feat: deployable design studio and updated component showcase
This commit is contained in:
Clintchiz committed
1 parent
3dddcaac1a
commit
3987ddbcfe
113 files changed
+4544
-1039
No files matched your search
+330
-24
@@ -2873,7 +2873,10 @@ export const componentProfiles = {
|
||||
},
|
||||
),
|
||||
],
|
||||
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline", "minimal", "compact", "alternate"] },
|
||||
options: {
|
||||
size: ["sm", "default", "lg"],
|
||||
variant: ["default", "soft", "raised", "outline", "minimal", "compact", "alternate"],
|
||||
},
|
||||
},
|
||||
|
||||
Typography: {
|
||||
@@ -2958,28 +2961,280 @@ const genericEventDescriptions = {
|
||||
toggle: "Fires when the component changes between open and closed or on and off states.",
|
||||
};
|
||||
|
||||
|
||||
componentProfiles.Card.demos.push(
|
||||
standard("Image with footer", "A cover image, concise body, and separate footer.", {title:"Design your next chapter",description:"A practical guide to building thoughtful products.",imageSrc:"/showcase-images/green-hero.svg",imageAlt:"Green abstract cover",footer:"6 min read",actionLabel:"Read guide",actionHref:"#guide"}),
|
||||
compact("Without a header", "Body content with an optional footer; no reserved heading space.", {title:"",description:"Your workspace is ready. Invite your teammates to get started.",footer:"Updated just now"}, {default:""}),
|
||||
advanced("Image-only card", "A simple image surface without header or footer chrome.", {title:"",description:"",imageSrc:"/showcase-images/blue-mountain.svg",imageAlt:"Blue geometric landscape"}, {default:""}),
|
||||
standard("Image with footer", "A cover image, concise body, and separate footer.", {
|
||||
title: "Design your next chapter",
|
||||
description: "A practical guide to building thoughtful products.",
|
||||
imageSrc: "/showcase-images/green-hero.svg",
|
||||
imageAlt: "Green abstract cover",
|
||||
footer: "6 min read",
|
||||
actionLabel: "Read guide",
|
||||
actionHref: "#guide",
|
||||
}),
|
||||
compact(
|
||||
"Without a header",
|
||||
"Body content with an optional footer; no reserved heading space.",
|
||||
{
|
||||
title: "",
|
||||
description: "Your workspace is ready. Invite your teammates to get started.",
|
||||
footer: "Updated just now",
|
||||
},
|
||||
{ default: "" },
|
||||
),
|
||||
advanced(
|
||||
"Image-only card",
|
||||
"A simple image surface without header or footer chrome.",
|
||||
{
|
||||
title: "",
|
||||
description: "",
|
||||
imageSrc: "/showcase-images/blue-mountain.svg",
|
||||
imageAlt: "Blue geometric landscape",
|
||||
},
|
||||
{ default: "" },
|
||||
),
|
||||
);
|
||||
componentProfiles.Map = { demos:[
|
||||
standard("OpenStreetMap", "A real interactive geographic map. Set latitude, longitude and zoomLevel; no API key is needed.", {title:"Bengaluru",description:"Pan and zoom to explore the city",provider:"openstreetmap",latitude:12.9716,longitude:77.5946,zoomLevel:13,imageSrc:"",items:[]}),
|
||||
compact("Google Maps", "Pass your restricted Maps Embed API key and a place query to show Google Maps.", {title:"Google Maps",provider:"google",apiKey:"",query:"Bengaluru",imageSrc:"",items:[]}),
|
||||
], playground:{title:"Bengaluru",description:"Interactive geographic map",provider:"openstreetmap",latitude:12.9716,longitude:77.5946,zoomLevel:13,imageSrc:"",items:[]}, options:{provider:["openstreetmap","google"]} };
|
||||
componentProfiles.Rating = {demos:[standard("Whole stars", "Choose a rating from zero to five with step 1.",{title:"Rate your experience",value:3,step:1}),compact("Half stars", "Click a half star or use the precise slider and arrow keys.",{title:"Half-star rating",value:3.5,step:0.5}),advanced("Fine increments", "Use increments of 0.2 for a more precise rating.",{title:"Detailed score",value:4.2,step:0.2})]};
|
||||
componentProfiles.LegendIndicator = {demos:[standard("Chart legend", "Toggle a series and handle @toggle to update your chart.",{title:"Traffic sources",description:"Select a source to toggle its visibility.",items:[{label:"Direct",color:"#8b5cf6",value:"42%"},{label:"Search",color:"#14b8a6",value:"35%"},{label:"Referral",color:"#f59e0b",value:"23%"}]})]};
|
||||
componentProfiles.Chart = {demos:[standard("Bar chart", "Pass an array of label/value objects through data.",{title:"Weekly signups",type:"bar",data:[{label:"Mon",value:24},{label:"Tue",value:38},{label:"Wed",value:29},{label:"Thu",value:52},{label:"Fri",value:45}],items:[],showLegend:false}),compact("Line chart", "Use type=line to compare a trend over time.",{title:"Monthly revenue",type:"line",data:[{label:"Jan",value:20},{label:"Feb",value:35},{label:"Mar",value:28},{label:"Apr",value:55}],items:[],showLegend:false})],options:{type:["bar","line"]}};
|
||||
componentProfiles.DatePicker = { demos:[
|
||||
standard("Date picker", "An anchored calendar that does not move surrounding content.", {label:"Start date",name:"start-date",type:"date"}),
|
||||
compact("Date and time", "Choose a calendar date and a time in one field.", {label:"Schedule for",name:"schedule",type:"datetime-local",value:"2026-09-20T09:30"}),
|
||||
advanced("Disabled date", "A read-only scheduled date.", {label:"Scheduled date",readonly:true}),
|
||||
], options:{type:["date","datetime-local"]} };
|
||||
componentProfiles.TimePicker = { demos:[standard("Time picker", "Choose an hour and minute in an anchored panel.", {label:"Meeting time",name:"meeting-time",value:"09:30"})] };
|
||||
componentProfiles.Map = {
|
||||
demos: [
|
||||
standard(
|
||||
"OpenStreetMap",
|
||||
"A real interactive geographic map. Set latitude, longitude and zoomLevel; no API key is needed.",
|
||||
{
|
||||
title: "Bengaluru",
|
||||
description: "Pan and zoom to explore the city",
|
||||
provider: "openstreetmap",
|
||||
latitude: 12.9716,
|
||||
longitude: 77.5946,
|
||||
zoomLevel: 13,
|
||||
imageSrc: "",
|
||||
items: [],
|
||||
},
|
||||
),
|
||||
compact(
|
||||
"Google Maps",
|
||||
"Pass your restricted Maps Embed API key and a place query to show Google Maps.",
|
||||
{
|
||||
title: "Google Maps",
|
||||
provider: "google",
|
||||
apiKey: "",
|
||||
query: "Bengaluru",
|
||||
imageSrc: "",
|
||||
items: [],
|
||||
},
|
||||
),
|
||||
],
|
||||
playground: {
|
||||
title: "Bengaluru",
|
||||
description: "Interactive geographic map",
|
||||
provider: "openstreetmap",
|
||||
latitude: 12.9716,
|
||||
longitude: 77.5946,
|
||||
zoomLevel: 13,
|
||||
imageSrc: "",
|
||||
items: [],
|
||||
},
|
||||
options: { provider: ["openstreetmap", "google"] },
|
||||
};
|
||||
componentProfiles.Rating = {
|
||||
demos: [
|
||||
standard("Whole stars", "Choose a rating from zero to five with step 1.", {
|
||||
title: "Rate your experience",
|
||||
value: 3,
|
||||
step: 1,
|
||||
}),
|
||||
compact("Half stars", "Click a half star or use the precise slider and arrow keys.", {
|
||||
title: "Half-star rating",
|
||||
value: 3.5,
|
||||
step: 0.5,
|
||||
}),
|
||||
advanced("Fine increments", "Use increments of 0.2 for a more precise rating.", {
|
||||
title: "Detailed score",
|
||||
value: 4.2,
|
||||
step: 0.2,
|
||||
}),
|
||||
],
|
||||
};
|
||||
componentProfiles.LegendIndicator = {
|
||||
demos: [
|
||||
standard("Chart legend", "Toggle a series and handle @toggle to update your chart.", {
|
||||
title: "Traffic sources",
|
||||
description: "Select a source to toggle its visibility.",
|
||||
items: [
|
||||
{ label: "Direct", color: "#8b5cf6", value: "42%" },
|
||||
{ label: "Search", color: "#14b8a6", value: "35%" },
|
||||
{ label: "Referral", color: "#f59e0b", value: "23%" },
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
componentProfiles.Chart = {
|
||||
demos: [
|
||||
standard("Bar chart", "Chart.js bars with positive and negative values.", {
|
||||
title: "Sample weekly changes",
|
||||
description: "Sample data",
|
||||
type: "bar",
|
||||
data: [
|
||||
{ label: "Mon", value: 24 },
|
||||
{ label: "Tue", value: -12 },
|
||||
{ label: "Wed", value: 29 },
|
||||
{ label: "Thu", value: 52 },
|
||||
{ label: "Fri", value: 45 },
|
||||
],
|
||||
items: [],
|
||||
showLegend: true,
|
||||
showValues: false,
|
||||
}),
|
||||
...["line", "area", "pie", "doughnut", "radar", "polarArea"].map((type) =>
|
||||
compact(
|
||||
type + " chart",
|
||||
"Rendered by Chart.js with native tooltips and legend interactions.",
|
||||
{
|
||||
title: "Sample " + type,
|
||||
description: "Sample data",
|
||||
type,
|
||||
data: {
|
||||
labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
|
||||
datasets: [{ label: "Series A", data: [24, 38, 29, 52, 45] }],
|
||||
},
|
||||
items: [],
|
||||
showLegend: true,
|
||||
showValues: false,
|
||||
},
|
||||
),
|
||||
),
|
||||
advanced("Scatter chart", "Pass native x/y coordinates without flattening them.", {
|
||||
title: "Sample coordinates",
|
||||
description: "Sample data",
|
||||
type: "scatter",
|
||||
items: [],
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: "Observations",
|
||||
data: [
|
||||
{ x: 1, y: 4 },
|
||||
{ x: 3, y: 8 },
|
||||
{ x: 5, y: 3 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
showValues: false,
|
||||
}),
|
||||
advanced("Bubble chart", "Native x/y/r points preserve bubble radii.", {
|
||||
title: "Sample bubbles",
|
||||
description: "Sample data",
|
||||
type: "bubble",
|
||||
items: [],
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: "Observations",
|
||||
data: [
|
||||
{ x: 1, y: 4, r: 8 },
|
||||
{ x: 3, y: 8, r: 16 },
|
||||
{ x: 5, y: 3, r: 12 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
showValues: false,
|
||||
}),
|
||||
advanced("Mixed chart", "Set each dataset's type and pass native Chart.js options.", {
|
||||
title: "Sample mixed chart",
|
||||
description: "Sample data",
|
||||
type: "bar",
|
||||
items: [],
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar"],
|
||||
datasets: [
|
||||
{ type: "bar", label: "Actual", data: [20, 35, 28] },
|
||||
{ type: "line", label: "Target", data: [25, 30, 40] },
|
||||
],
|
||||
},
|
||||
showValues: false,
|
||||
}),
|
||||
advanced("Horizontal stacked bars", "Configure indexAxis and stacked scales through options.", {
|
||||
title: "Sample stacked chart",
|
||||
description: "Sample data",
|
||||
type: "bar",
|
||||
items: [],
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar"],
|
||||
datasets: [
|
||||
{ label: "A", data: [20, 35, 28] },
|
||||
{ label: "B", data: [25, 30, 40] },
|
||||
],
|
||||
},
|
||||
options: { indexAxis: "y", scales: { x: { stacked: true }, y: { stacked: true } } },
|
||||
showValues: false,
|
||||
}),
|
||||
],
|
||||
options: {
|
||||
type: ["bar", "line", "area", "pie", "doughnut", "radar", "polarArea", "scatter", "bubble"],
|
||||
},
|
||||
};
|
||||
componentProfiles.DatePicker = {
|
||||
demos: [
|
||||
standard("Date picker", "An anchored calendar that does not move surrounding content.", {
|
||||
label: "Start date",
|
||||
name: "start-date",
|
||||
type: "date",
|
||||
}),
|
||||
compact("Date and time", "Choose a calendar date and a time in one field.", {
|
||||
label: "Schedule for",
|
||||
name: "schedule",
|
||||
type: "datetime-local",
|
||||
value: "2026-09-20T09:30",
|
||||
}),
|
||||
advanced("Disabled date", "A read-only scheduled date.", {
|
||||
label: "Scheduled date",
|
||||
readonly: true,
|
||||
}),
|
||||
],
|
||||
options: { type: ["date", "datetime-local"] },
|
||||
};
|
||||
componentProfiles.TimePicker = {
|
||||
demos: [
|
||||
standard("Time picker", "Choose an hour and minute in an anchored panel.", {
|
||||
label: "Meeting time",
|
||||
name: "meeting-time",
|
||||
value: "09:30",
|
||||
}),
|
||||
],
|
||||
};
|
||||
componentProfiles.Modal.demos.push(
|
||||
advanced("Custom header and footer", "Supply your own header, body, and footer actions.", {title:"",description:"",cancelLabel:"",confirmLabel:"",triggerLabel:"Open custom dialog"}, {header:'<h2>Invite a teammate</h2>',default:'<p>Give your teammate access to your workspace.</p>',footer:`<button type="button" class="showcase-action" data-modal-close="true">Done</button>`}),
|
||||
compact("Centered content", "Omit the standard header and footer for a fully custom composition.", {showHeader:false,showFooter:false,title:"",description:"",icon:"",size:"sm",triggerLabel:"Open centered dialog"}, {default:`<div style="text-align:center;padding:2rem"><h2>You are all set</h2><p>Your preferences have been saved.</p><button type="button" class="showcase-action" data-modal-close="true">Continue</button></div>`}),
|
||||
advanced(
|
||||
"Custom header and footer",
|
||||
"Supply your own header, body, and footer actions.",
|
||||
{
|
||||
title: "",
|
||||
description: "",
|
||||
cancelLabel: "",
|
||||
confirmLabel: "",
|
||||
triggerLabel: "Open custom dialog",
|
||||
},
|
||||
{
|
||||
header: "<h2>Invite a teammate</h2>",
|
||||
default: "<p>Give your teammate access to your workspace.</p>",
|
||||
footer: `<button type="button" class="showcase-action" data-modal-close="true">Done</button>`,
|
||||
},
|
||||
),
|
||||
compact(
|
||||
"Centered content",
|
||||
"Omit the standard header and footer for a fully custom composition.",
|
||||
{
|
||||
showHeader: false,
|
||||
showFooter: false,
|
||||
title: "",
|
||||
description: "",
|
||||
icon: "",
|
||||
size: "sm",
|
||||
triggerLabel: "Open centered dialog",
|
||||
},
|
||||
{
|
||||
default: `<div style="text-align:center;padding:2rem"><h2>You are all set</h2><p>Your preferences have been saved.</p><button type="button" class="showcase-action" data-modal-close="true">Continue</button></div>`,
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
export function profileFor(name) {
|
||||
@@ -2992,8 +3247,59 @@ export function eventDescriptionFor(_componentName, eventName) {
|
||||
);
|
||||
}
|
||||
|
||||
componentProfiles.Card.demos.push(advanced("Custom slots", "Supply arbitrary header, body, and footer content. Use showHeader and showFooter to hide either region.", {title:"",description:"",showHeader:true,showFooter:true,footer:"",actionLabel:""}, {header:"<strong>Team invitation</strong>",default:'<Input label="Email" placeholder="name@company.com" />',footer:'<Button label="Send invitation" />'}));
|
||||
componentProfiles.RangeSlider = { demos: [compact("Fractional steps", "Use step=0.2 for precise increments with buttons, dragging, or arrow keys.", {label:"Scale",min:0,max:5,value:2.4,step:0.2})] };
|
||||
componentProfiles.Card.demos.push(
|
||||
advanced(
|
||||
"Custom slots",
|
||||
"Supply arbitrary header, body, and footer content. Use showHeader and showFooter to hide either region.",
|
||||
{ title: "", description: "", showHeader: true, showFooter: true, footer: "", actionLabel: "" },
|
||||
{
|
||||
header: "<strong>Team invitation</strong>",
|
||||
default: '<Input label="Email" placeholder="name@company.com" />',
|
||||
footer: '<Button label="Send invitation" />',
|
||||
},
|
||||
),
|
||||
);
|
||||
componentProfiles.RangeSlider = {
|
||||
demos: [
|
||||
compact(
|
||||
"Fractional steps",
|
||||
"Use step=0.2 for precise increments with buttons, dragging, or arrow keys.",
|
||||
{ label: "Scale", min: 0, max: 5, value: 2.4, step: 0.2 },
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
componentProfiles.FileInput = {demos:[standard("Choose a document", "Select a PDF or image. The selected filename replaces the placeholder.", {label:"Attachment",name:"attachment",value:"",accept:".pdf,image/*",helperText:"PDF or image",placeholder:"Choose a file"}),compact("Multiple attachments", "Select several files; each filename is shown in the control.",{label:"Attachments",name:"attachments",value:"",multiple:true,placeholder:"Choose files"}),advanced("Disabled upload", "A disabled control cannot open the file chooser.",{label:"Attachment",name:"disabled-file",value:"",disabled:true,placeholder:"Uploads unavailable"})]};
|
||||
componentProfiles.FileInput = {
|
||||
demos: [
|
||||
standard(
|
||||
"Choose a document",
|
||||
"Select a PDF or image. The selected filename replaces the placeholder.",
|
||||
{
|
||||
label: "Attachment",
|
||||
name: "attachment",
|
||||
value: "",
|
||||
accept: ".pdf,image/*",
|
||||
helperText: "PDF or image",
|
||||
placeholder: "Choose a file",
|
||||
},
|
||||
),
|
||||
compact(
|
||||
"Multiple attachments",
|
||||
"Select several files; each filename is shown in the control.",
|
||||
{
|
||||
label: "Attachments",
|
||||
name: "attachments",
|
||||
value: "",
|
||||
multiple: true,
|
||||
placeholder: "Choose files",
|
||||
},
|
||||
),
|
||||
advanced("Disabled upload", "A disabled control cannot open the file chooser.", {
|
||||
label: "Attachment",
|
||||
name: "disabled-file",
|
||||
value: "",
|
||||
disabled: true,
|
||||
placeholder: "Uploads unavailable",
|
||||
}),
|
||||
],
|
||||
};
|
||||
Reference in new issue
Block a user