docs: create docs workspace (#5174)
* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
This commit is contained in:
Shahed Nasser
GitHub
@@ -0,0 +1,10 @@
|
||||
import { Avatar } from "@medusajs/ui"
|
||||
|
||||
export default function AvatarDemo() {
|
||||
return (
|
||||
<Avatar
|
||||
src="https://avatars.githubusercontent.com/u/10656202?v=4"
|
||||
fallback="M"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeBlue() {
|
||||
return <Badge color="blue">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeDemo() {
|
||||
return <Badge>Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeGreen() {
|
||||
return <Badge color="green">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeGrey() {
|
||||
return <Badge color="grey">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { BuildingTax } from "@medusajs/icons"
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeIcon() {
|
||||
return (
|
||||
<Badge type="icon">
|
||||
<BuildingTax />
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeLarge() {
|
||||
return <Badge size="large">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeOrange() {
|
||||
return <Badge color="orange">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgePurple() {
|
||||
return <Badge color="purple">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeRed() {
|
||||
return <Badge color="red">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeRounded() {
|
||||
return <Badge type="rounded">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Badge } from "@medusajs/ui"
|
||||
|
||||
export default function BadgeSmall() {
|
||||
return <Badge size="small">Badge</Badge>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonDanger() {
|
||||
return <Button variant="danger">Button</Button>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonDemo() {
|
||||
return <Button>Button</Button>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonDisabled() {
|
||||
return <Button disabled={true}>Button</Button>
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonIconOnly() {
|
||||
return (
|
||||
<Button format="icon">
|
||||
<PlusMini />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonLoading() {
|
||||
return <Button isLoading={true}>Button</Button>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonPrimary() {
|
||||
return <Button>Button</Button>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonSecondary() {
|
||||
return <Button variant="secondary">Button</Button>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonTransparent() {
|
||||
return <Button variant="transparent">Button</Button>
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { Button } from "@medusajs/ui"
|
||||
|
||||
export default function ButtonWithIcon() {
|
||||
return (
|
||||
<Button>
|
||||
Button <PlusMini />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { Calendar } from "@medusajs/ui"
|
||||
import * as React from "react"
|
||||
|
||||
export default function CalendarDemo() {
|
||||
const [date, setDate] = React.useState<Date | undefined>()
|
||||
|
||||
return <Calendar selected={date} onSelect={setDate} />
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Calendar } from "@medusajs/ui"
|
||||
import * as React from "react"
|
||||
import type { DateRange } from "react-day-picker"
|
||||
|
||||
export default function CalendarRange() {
|
||||
const [dates, setDates] = React.useState<DateRange | undefined>()
|
||||
|
||||
const setDateRange = (range: DateRange | undefined) => {
|
||||
setDates(range)
|
||||
}
|
||||
|
||||
return <Calendar selected={dates} onSelect={setDateRange} mode="range" />
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { Calendar } from "@medusajs/ui"
|
||||
import * as React from "react"
|
||||
|
||||
export default function CalendarSingle() {
|
||||
const [date, setDate] = React.useState<Date | undefined>()
|
||||
|
||||
return <Calendar selected={date} onSelect={setDate} />
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Checkbox, Label } from "@medusajs/ui"
|
||||
|
||||
export default function CheckboxChecked() {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="billing-shipping-checked" checked={true} />
|
||||
<Label htmlFor="billing-shipping-checked">
|
||||
Billing address same as shipping address
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Checkbox, Label } from "@medusajs/ui"
|
||||
|
||||
export default function CheckboxDefault() {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="billing-shipping-default" />
|
||||
<Label htmlFor="billing-shipping-default">
|
||||
Billing address same as shipping address
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Checkbox, Label } from "@medusajs/ui"
|
||||
|
||||
export default function CheckboxDemo() {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="billing-shipping" />
|
||||
<Label htmlFor="billing-shipping">
|
||||
Billing address same as shipping address
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Checkbox, Label } from "@medusajs/ui"
|
||||
|
||||
export default function CheckboxDisabled() {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="billing-shipping-disabled" disabled={true} />
|
||||
<Label htmlFor="billing-shipping-disabled">
|
||||
Billing address same as shipping address
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Checkbox, Label } from "@medusajs/ui"
|
||||
|
||||
export default function CheckboxIndeterminate() {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="billing-shipping-indeterminate" checked={"indeterminate"} />
|
||||
<Label htmlFor="billing-shipping-indeterminate">
|
||||
Billing address same as shipping address
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { CodeBlock, Label } from "@medusajs/ui"
|
||||
|
||||
const snippets = [
|
||||
{
|
||||
label: "cURL",
|
||||
language: "markdown",
|
||||
code: `curl -H 'x-publishable-key: YOUR_API_KEY' 'http://localhost:9000/store/products/PRODUCT_ID'`,
|
||||
},
|
||||
{
|
||||
label: "Medusa JS Client",
|
||||
language: "jsx",
|
||||
code: `// Install the JS Client in your storefront project: @medusajs/medusa-js\n\nimport Medusa from "@medusajs/medusa-js"\n\nconst medusa = new Medusa({ publishableApiKey: "YOUR_API_KEY"})\nconst product = await medusa.products.retrieve("PRODUCT_ID")\nconsole.log(product.id)`,
|
||||
},
|
||||
{
|
||||
label: "Medusa React",
|
||||
language: "tsx",
|
||||
code: `// Install the React SDK and required dependencies in your storefront project:\n// medusa-react @tanstack/react-query @medusajs/medusa\n\nimport { useProduct } from "medusa-react"\n\nconst { product } = useProduct("PRODUCT_ID")\nconsole.log(product.id)`,
|
||||
},
|
||||
]
|
||||
|
||||
export default function CodeBlockDemo() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<CodeBlock snippets={snippets}>
|
||||
<CodeBlock.Header>
|
||||
<CodeBlock.Header.Meta>
|
||||
<Label weight={"plus"}>/product-detail.js</Label>
|
||||
</CodeBlock.Header.Meta>
|
||||
</CodeBlock.Header>
|
||||
<CodeBlock.Body />
|
||||
</CodeBlock>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { CodeBlock } from "@medusajs/ui"
|
||||
|
||||
const snippets = [
|
||||
{
|
||||
label: "Medusa React",
|
||||
language: "tsx",
|
||||
code: `import { useProduct } from "medusa-react"\n\nconst { product } = useProduct("PRODUCT_ID")\nconsole.log(product.id)`,
|
||||
},
|
||||
]
|
||||
|
||||
export default function CodeBlockNoHeader() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<CodeBlock snippets={snippets}>
|
||||
<CodeBlock.Body />
|
||||
</CodeBlock>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { CodeBlock, Label } from "@medusajs/ui"
|
||||
|
||||
const snippets = [
|
||||
{
|
||||
label: "Medusa React",
|
||||
language: "tsx",
|
||||
code: `import { useProduct } from "medusa-react"\n\nconst { product } = useProduct("PRODUCT_ID")\nconsole.log(product.id)`,
|
||||
},
|
||||
]
|
||||
|
||||
export default function CodeBlockNoLines() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<CodeBlock snippets={snippets}>
|
||||
<CodeBlock.Header>
|
||||
<CodeBlock.Header.Meta>
|
||||
<Label weight={"plus"}>/product-detail.js</Label>
|
||||
</CodeBlock.Header.Meta>
|
||||
</CodeBlock.Header>
|
||||
<CodeBlock.Body hideLineNumbers={true} />
|
||||
</CodeBlock>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { CodeBlock, Label } from "@medusajs/ui"
|
||||
|
||||
const snippets = [
|
||||
{
|
||||
label: "Medusa React",
|
||||
language: "tsx",
|
||||
code: `import { useProduct } from "medusa-react"\n\nconst { product } = useProduct("PRODUCT_ID")\nconsole.log(product.id)`,
|
||||
},
|
||||
]
|
||||
|
||||
export default function CodeBlockSingle() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<CodeBlock snippets={snippets}>
|
||||
<CodeBlock.Header hideLabels={true}>
|
||||
<CodeBlock.Header.Meta>
|
||||
<Label weight={"plus"}>/product-detail.js</Label>
|
||||
</CodeBlock.Header.Meta>
|
||||
</CodeBlock.Header>
|
||||
<CodeBlock.Body />
|
||||
</CodeBlock>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Badge, Command } from "@medusajs/ui"
|
||||
|
||||
export default function CommandDemo() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Command>
|
||||
<Badge color="green">Get</Badge>
|
||||
<code>localhost:9000/store/products</code>
|
||||
<Command.Copy
|
||||
content="localhost:9000/store/products"
|
||||
className="ml-auto"
|
||||
/>
|
||||
</Command>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Container } from "@medusajs/ui"
|
||||
|
||||
export default function ContainerDemo() {
|
||||
return <Container>Content</Container>
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Container, Heading } from "@medusajs/ui"
|
||||
|
||||
export default function ContainerLayout() {
|
||||
return (
|
||||
<div className="flex h-full w-full">
|
||||
<div className="border-ui-border-base w-full max-w-[216px] border-r p-4">
|
||||
<Heading level="h3">Menubar</Heading>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-y-2 px-8 pb-8 pt-6">
|
||||
<Container>
|
||||
<Heading>Section 1</Heading>
|
||||
</Container>
|
||||
<Container>
|
||||
<Heading>Section 2</Heading>
|
||||
</Container>
|
||||
<Container>
|
||||
<Heading>Section 3</Heading>
|
||||
</Container>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { PlusMini } from "@medusajs/icons"
|
||||
import { Button, Copy, Text } from "@medusajs/ui"
|
||||
|
||||
export default function CopyAsChild() {
|
||||
return (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Text>Copy command</Text>
|
||||
<Copy content="yarn add @medusajs/ui" asChild>
|
||||
<Button format="icon" size="small" className="text-ui-fg-on-inverted">
|
||||
<PlusMini />
|
||||
</Button>
|
||||
</Copy>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Code, Copy } from "@medusajs/ui"
|
||||
|
||||
export default function CopyDemo() {
|
||||
return (
|
||||
<Copy content="yarn add @medusajs/ui">
|
||||
<Code>yarn add @medusajs/ui</Code>
|
||||
</Copy>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Copy } from "@medusajs/ui"
|
||||
|
||||
export default function CopyDemo() {
|
||||
return <Copy content="yarn add @medusajs/ui" />
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerDemo() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<DatePicker />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerRangePresetsTime() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<DatePicker
|
||||
showTimePicker
|
||||
mode="range"
|
||||
presets={[
|
||||
{
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(),
|
||||
},
|
||||
label: "Today",
|
||||
},
|
||||
{
|
||||
label: "Past 7 days",
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(new Date().setDate(new Date().getDate() - 7)),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Past 30 days",
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(new Date().setDate(new Date().getDate() - 30)),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Past 90 days",
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(new Date().setDate(new Date().getDate() - 90)),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Past year",
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(
|
||||
new Date().setFullYear(new Date().getFullYear() - 1)
|
||||
),
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerRangePresets() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<DatePicker
|
||||
mode="range"
|
||||
presets={[
|
||||
{
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(),
|
||||
},
|
||||
label: "Today",
|
||||
},
|
||||
{
|
||||
label: "Past 7 days",
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(new Date().setDate(new Date().getDate() - 7)),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Past 30 days",
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(new Date().setDate(new Date().getDate() - 30)),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Past 90 days",
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(new Date().setDate(new Date().getDate() - 90)),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Past year",
|
||||
dateRange: {
|
||||
to: new Date(),
|
||||
from: new Date(
|
||||
new Date().setFullYear(new Date().getFullYear() - 1)
|
||||
),
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerRangeTime() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<DatePicker showTimePicker mode="range" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerRange() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<DatePicker mode="range" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerSinglePresetsTime() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<DatePicker
|
||||
showTimePicker
|
||||
presets={[
|
||||
{
|
||||
date: new Date(),
|
||||
label: "Today",
|
||||
},
|
||||
{
|
||||
label: "Tomorrow",
|
||||
date: new Date(new Date().setDate(new Date().getDate() + 1)),
|
||||
},
|
||||
{
|
||||
label: "A week from now",
|
||||
date: new Date(new Date().setDate(new Date().getDate() + 7)),
|
||||
},
|
||||
{
|
||||
label: "A month from now",
|
||||
date: new Date(new Date().setMonth(new Date().getMonth() + 1)),
|
||||
},
|
||||
{
|
||||
label: "A year from now",
|
||||
date: new Date(
|
||||
new Date().setFullYear(new Date().getFullYear() + 1)
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerSinglePresets() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<DatePicker
|
||||
presets={[
|
||||
{
|
||||
date: new Date(),
|
||||
label: "Today",
|
||||
},
|
||||
{
|
||||
label: "Tomorrow",
|
||||
date: new Date(new Date().setDate(new Date().getDate() + 1)),
|
||||
},
|
||||
{
|
||||
label: "A week from now",
|
||||
date: new Date(new Date().setDate(new Date().getDate() + 7)),
|
||||
},
|
||||
{
|
||||
label: "A month from now",
|
||||
date: new Date(new Date().setMonth(new Date().getMonth() + 1)),
|
||||
},
|
||||
{
|
||||
label: "A year from now",
|
||||
date: new Date(
|
||||
new Date().setFullYear(new Date().getFullYear() + 1)
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerSingleTime() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<DatePicker showTimePicker />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { DatePicker } from "@medusajs/ui"
|
||||
|
||||
export default function DatePickerSingle() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<DatePicker />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Button, Drawer } from "@medusajs/ui"
|
||||
|
||||
export default function DrawerDemo() {
|
||||
return (
|
||||
<Drawer>
|
||||
<Drawer.Trigger asChild>
|
||||
<Button>Edit Variant</Button>
|
||||
</Drawer.Trigger>
|
||||
<Drawer.Content>
|
||||
<Drawer.Header>
|
||||
<Drawer.Title>Edit Variant</Drawer.Title>
|
||||
</Drawer.Header>
|
||||
<Drawer.Body></Drawer.Body>
|
||||
<Drawer.Footer>
|
||||
<Drawer.Close asChild>
|
||||
<Button variant="secondary">Cancel</Button>
|
||||
</Drawer.Close>
|
||||
<Button>Save</Button>
|
||||
</Drawer.Footer>
|
||||
</Drawer.Content>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { EllipsisHorizontal, PencilSquare, Plus, Trash } from "@medusajs/icons"
|
||||
import { Button, DropdownMenu } from "@medusajs/ui"
|
||||
|
||||
export default function DropdownMenuDemo() {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<Button variant="secondary" format={"icon"}>
|
||||
<EllipsisHorizontal />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Item className="gap-x-2">
|
||||
<PencilSquare className="text-ui-fg-subtle" />
|
||||
Edit
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="gap-x-2">
|
||||
<Plus className="text-ui-fg-subtle" />
|
||||
Add
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item className="gap-x-2">
|
||||
<Trash className="text-ui-fg-subtle" />
|
||||
Delete
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { EllipsisHorizontal } from "@medusajs/icons"
|
||||
import { Button, DropdownMenu } from "@medusajs/ui"
|
||||
import React from "react"
|
||||
|
||||
type SortingState = "asc" | "desc" | "alpha" | "alpha-reverse" | "none"
|
||||
|
||||
export default function DropdownMenuSorting() {
|
||||
const [sort, setSort] = React.useState<SortingState>("none")
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-y-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<Button variant="secondary" format={"icon"}>
|
||||
<EllipsisHorizontal />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content className="w-[300px]">
|
||||
<DropdownMenu.RadioGroup
|
||||
value={sort}
|
||||
onValueChange={(v) => setSort(v as SortingState)}
|
||||
>
|
||||
<DropdownMenu.RadioItem value="none">
|
||||
No Sorting
|
||||
</DropdownMenu.RadioItem>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.RadioItem value="alpha">
|
||||
Alphabetical
|
||||
<DropdownMenu.Hint>A-Z</DropdownMenu.Hint>
|
||||
</DropdownMenu.RadioItem>
|
||||
<DropdownMenu.RadioItem value="alpha-reverse">
|
||||
Reverse Alphabetical
|
||||
<DropdownMenu.Hint>Z-A</DropdownMenu.Hint>
|
||||
</DropdownMenu.RadioItem>
|
||||
<DropdownMenu.RadioItem value="asc">
|
||||
Created At - Ascending
|
||||
<DropdownMenu.Hint>1 - 30</DropdownMenu.Hint>
|
||||
</DropdownMenu.RadioItem>
|
||||
<DropdownMenu.RadioItem value="desc">
|
||||
Created At - Descending
|
||||
<DropdownMenu.Hint>30 - 1</DropdownMenu.Hint>
|
||||
</DropdownMenu.RadioItem>
|
||||
</DropdownMenu.RadioGroup>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu>
|
||||
<div>
|
||||
<pre className=" text-sm">Sorting: {sort}</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { Button, FocusModal, Heading, Input, Label, Text } from "@medusajs/ui"
|
||||
|
||||
export default function FocusModalDemo() {
|
||||
return (
|
||||
<FocusModal>
|
||||
<FocusModal.Trigger asChild>
|
||||
<Button>Edit Variant</Button>
|
||||
</FocusModal.Trigger>
|
||||
<FocusModal.Content className="z-[100]">
|
||||
<FocusModal.Header>
|
||||
<Button>Save</Button>
|
||||
</FocusModal.Header>
|
||||
<FocusModal.Body className="flex flex-col items-center py-16">
|
||||
<div className="flex w-full max-w-lg flex-col gap-y-8">
|
||||
<div className="flex flex-col gap-y-1">
|
||||
<Heading>Create API key</Heading>
|
||||
<Text className="text-ui-fg-subtle">
|
||||
Create and manage API keys. You can create multiple keys to
|
||||
organize your applications.
|
||||
</Text>
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-2">
|
||||
<Label htmlFor="key_name" className="text-ui-fg-subtle">
|
||||
Key name
|
||||
</Label>
|
||||
<Input id="key_name" placeholder="my_app" />
|
||||
</div>
|
||||
</div>
|
||||
</FocusModal.Body>
|
||||
</FocusModal.Content>
|
||||
</FocusModal>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Heading } from "@medusajs/ui"
|
||||
|
||||
export default function HeadingDemo() {
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
<Heading level="h1">This is an H1 heading</Heading>
|
||||
<Heading level="h2">This is an H2 heading</Heading>
|
||||
<Heading level="h3">This is an H3 heading</Heading>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Input } from "@medusajs/ui"
|
||||
|
||||
export default function InputDemo() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<Input placeholder="Sales Channel Name" id="sales-channel-name" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Input } from "@medusajs/ui"
|
||||
|
||||
export default function InputDisabled() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<Input placeholder="Disabled" id="disabled-input" disabled />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Input } from "@medusajs/ui"
|
||||
|
||||
export default function InputError() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<Input
|
||||
placeholder="Sales Channel Name"
|
||||
id="sales-channel-name"
|
||||
aria-invalid={true}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Input } from "@medusajs/ui"
|
||||
|
||||
export default function InputPassword() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<Input id="password" type="password" defaultValue="supersecret" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Input } from "@medusajs/ui"
|
||||
|
||||
export default function InputSearch() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<Input placeholder="Search" id="search-input" type="search" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Input } from "@medusajs/ui"
|
||||
|
||||
export default function InputSmall() {
|
||||
return (
|
||||
<div className="w-[250px]">
|
||||
<Input placeholder="First name" id="first-name" size="small" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Kbd } from "@medusajs/ui"
|
||||
|
||||
export default function KbdDemo() {
|
||||
return <Kbd>⌘ + K</Kbd>
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Label } from "@medusajs/ui"
|
||||
|
||||
export default function LabelBasePlus() {
|
||||
return (
|
||||
<Label size="base" weight="plus">
|
||||
Label
|
||||
</Label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Label } from "@medusajs/ui"
|
||||
|
||||
export default function LabelBaseRegular() {
|
||||
return (
|
||||
<Label size="base" weight="regular">
|
||||
Label
|
||||
</Label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Label } from "@medusajs/ui"
|
||||
|
||||
export default function LabelDemo() {
|
||||
return <Label>Regular label</Label>
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Label } from "@medusajs/ui"
|
||||
|
||||
export default function LabelLargePlus() {
|
||||
return (
|
||||
<Label size="large" weight="plus">
|
||||
Label
|
||||
</Label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Label } from "@medusajs/ui"
|
||||
|
||||
export default function LabelLargeRegular() {
|
||||
return (
|
||||
<Label size="large" weight="regular">
|
||||
Label
|
||||
</Label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Label } from "@medusajs/ui"
|
||||
|
||||
export default function LabelSmallPlus() {
|
||||
return (
|
||||
<Label size="small" weight="plus">
|
||||
Label
|
||||
</Label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Label } from "@medusajs/ui"
|
||||
|
||||
export default function LabelSmallRegular() {
|
||||
return (
|
||||
<Label size="small" weight="regular">
|
||||
Label
|
||||
</Label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Label } from "@medusajs/ui"
|
||||
|
||||
export default function LabelXSmallPlus() {
|
||||
return (
|
||||
<Label size="xsmall" weight="plus">
|
||||
Label
|
||||
</Label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Label } from "@medusajs/ui"
|
||||
|
||||
export default function LabelXSmallRegular() {
|
||||
return (
|
||||
<Label size="xsmall" weight="regular">
|
||||
Label
|
||||
</Label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Button, Prompt } from "@medusajs/ui"
|
||||
|
||||
export default function PromptDemo() {
|
||||
return (
|
||||
<Prompt>
|
||||
<Prompt.Trigger asChild>
|
||||
<Button>Open</Button>
|
||||
</Prompt.Trigger>
|
||||
<Prompt.Content>
|
||||
<Prompt.Header>
|
||||
<Prompt.Title>Delete something</Prompt.Title>
|
||||
<Prompt.Description>
|
||||
Are you sure? This cannot be undone.
|
||||
</Prompt.Description>
|
||||
</Prompt.Header>
|
||||
<Prompt.Footer>
|
||||
<Prompt.Cancel>Cancel</Prompt.Cancel>
|
||||
<Prompt.Action>Delete</Prompt.Action>
|
||||
</Prompt.Footer>
|
||||
</Prompt.Content>
|
||||
</Prompt>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Label, RadioGroup } from "@medusajs/ui"
|
||||
|
||||
export default function RadioGroupDemo() {
|
||||
return (
|
||||
<RadioGroup>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<RadioGroup.Item value="1" id="radio_1" />
|
||||
<Label htmlFor="radio_1" weight="plus">
|
||||
Radio 1
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<RadioGroup.Item value="2" id="radio_2" />
|
||||
<Label htmlFor="radio_2" weight="plus">
|
||||
Radio 2
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<RadioGroup.Item value="3" id="radio_3" />
|
||||
<Label htmlFor="radio_3" weight="plus">
|
||||
Radio 3
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { Label, RadioGroup, Text } from "@medusajs/ui"
|
||||
|
||||
export default function RadioGroupDescriptions() {
|
||||
return (
|
||||
<RadioGroup>
|
||||
<div className="flex items-start gap-x-3">
|
||||
<RadioGroup.Item value="1" id="radio_1_descriptions" />
|
||||
<div className="flex flex-col gap-y-0.5">
|
||||
<Label htmlFor="radio_1_descriptions" weight="plus">
|
||||
Radio 1
|
||||
</Label>
|
||||
<Text className="text-ui-fg-subtle">
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-x-3">
|
||||
<RadioGroup.Item value="2" id="radio_2_descriptions" />
|
||||
<div className="flex flex-col gap-y-0.5">
|
||||
<Label htmlFor="radio_2_descriptions" weight="plus">
|
||||
Radio 2
|
||||
</Label>
|
||||
<Text className="text-ui-fg-subtle">
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-x-3">
|
||||
<RadioGroup.Item value="3" id="radio_3_descriptions" />
|
||||
<div className="flex flex-col gap-y-0.5">
|
||||
<Label htmlFor="radio_3_descriptions" weight="plus">
|
||||
Radio 3
|
||||
</Label>
|
||||
<Text className="text-ui-fg-subtle">
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Label, RadioGroup } from "@medusajs/ui"
|
||||
|
||||
export default function RadioGroupDisabled() {
|
||||
return (
|
||||
<RadioGroup>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<RadioGroup.Item value="1" id="radio_1_disabled" />
|
||||
<Label htmlFor="radio_1_disabled" weight="plus">
|
||||
Radio 1
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<RadioGroup.Item value="2" id="radio_2_disabled" />
|
||||
<Label htmlFor="radio_2_disabled" weight="plus">
|
||||
Radio 2
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<RadioGroup.Item value="3" id="radio_3_disabled" disabled={true} />
|
||||
<Label htmlFor="radio_3_disabled" weight="plus">
|
||||
Radio 3
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Select } from "@medusajs/ui"
|
||||
import * as React from "react"
|
||||
|
||||
export default function SelectDemo() {
|
||||
const [value, setValue] = React.useState<string | undefined>()
|
||||
|
||||
return (
|
||||
<div className="w-[256px]">
|
||||
<Select onValueChange={setValue} value={value}>
|
||||
<Select.Trigger>
|
||||
<Select.Value placeholder="Select a currency" />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{currencies.map((item) => (
|
||||
<Select.Item key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const currencies = [
|
||||
{
|
||||
value: "eur",
|
||||
label: "EUR",
|
||||
},
|
||||
{
|
||||
value: "usd",
|
||||
label: "USD",
|
||||
},
|
||||
{
|
||||
value: "dkk",
|
||||
label: "DKK",
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Select } from "@medusajs/ui"
|
||||
|
||||
export default function SelectDemo() {
|
||||
return (
|
||||
<div className="w-[256px]">
|
||||
<Select>
|
||||
<Select.Trigger>
|
||||
<Select.Value placeholder="Select a currency" />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{currencies.map((item) => (
|
||||
<Select.Item key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const currencies = [
|
||||
{
|
||||
value: "eur",
|
||||
label: "EUR",
|
||||
},
|
||||
{
|
||||
value: "usd",
|
||||
label: "USD",
|
||||
},
|
||||
{
|
||||
value: "dkk",
|
||||
label: "DKK",
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Select } from "@medusajs/ui"
|
||||
|
||||
export default function SelectDemo() {
|
||||
return (
|
||||
<div className="w-[256px]">
|
||||
<Select disabled>
|
||||
<Select.Trigger>
|
||||
<Select.Value placeholder="Select a currency" />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{currencies.map((item) => (
|
||||
<Select.Item key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const currencies = [
|
||||
{
|
||||
value: "eur",
|
||||
label: "EUR",
|
||||
},
|
||||
{
|
||||
value: "usd",
|
||||
label: "USD",
|
||||
},
|
||||
{
|
||||
value: "dkk",
|
||||
label: "DKK",
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Select } from "@medusajs/ui"
|
||||
|
||||
export default function SelectDemo() {
|
||||
return (
|
||||
<div className="w-[256px]">
|
||||
<Select>
|
||||
<Select.Trigger>
|
||||
<Select.Value placeholder="Select a currency" />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{data.map((group) => (
|
||||
<Select.Group key={group.label}>
|
||||
<Select.Label>{group.label}</Select.Label>
|
||||
{group.items.map((item) => (
|
||||
<Select.Item key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Group>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
label: "Shirts",
|
||||
items: [
|
||||
{
|
||||
value: "dress-shirt-solid",
|
||||
label: "Solid Dress Shirt",
|
||||
},
|
||||
{
|
||||
value: "dress-shirt-check",
|
||||
label: "Check Dress Shirt",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "T-Shirts",
|
||||
items: [
|
||||
{
|
||||
value: "v-neck",
|
||||
label: "V-Neck",
|
||||
},
|
||||
{
|
||||
value: "crew-neck",
|
||||
label: "Crew Neck",
|
||||
},
|
||||
{
|
||||
value: "henley",
|
||||
label: "Henley",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Select } from "@medusajs/ui"
|
||||
|
||||
export default function SelectSmall() {
|
||||
return (
|
||||
<div className="w-[256px]">
|
||||
<Select size="small">
|
||||
<Select.Trigger>
|
||||
<Select.Value placeholder="Select a currency" />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{currencies.map((item) => (
|
||||
<Select.Item key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const currencies = [
|
||||
{
|
||||
value: "eur",
|
||||
label: "EUR",
|
||||
},
|
||||
{
|
||||
value: "usd",
|
||||
label: "USD",
|
||||
},
|
||||
{
|
||||
value: "dkk",
|
||||
label: "DKK",
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Label, Switch } from "@medusajs/ui"
|
||||
|
||||
export default function SwitchCheckedDisabled() {
|
||||
return (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Switch
|
||||
id="manage-inventory-checked-disabled"
|
||||
checked={true}
|
||||
disabled={true}
|
||||
/>
|
||||
<Label htmlFor="manage-inventory-checked-disabled">
|
||||
Manage Inventory
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { Label, Switch } from "@medusajs/ui"
|
||||
|
||||
export default function SwitchChecked() {
|
||||
return (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Switch id="manage-inventory-checked" checked={true} />
|
||||
<Label htmlFor="manage-inventory-checked">Manage Inventory</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { Label, Switch } from "@medusajs/ui"
|
||||
|
||||
export default function SwitchDemo() {
|
||||
return (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Switch id="manage-inventory" />
|
||||
<Label htmlFor="manage-inventory">Manage Inventory</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { Label, Switch } from "@medusajs/ui"
|
||||
|
||||
export default function SwitchDisabled() {
|
||||
return (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Switch id="manage-inventory-disabled" disabled={true} />
|
||||
<Label htmlFor="manage-inventory-disabled">Manage Inventory</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Label, Switch } from "@medusajs/ui"
|
||||
|
||||
export default function SwitchSmall() {
|
||||
return (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Switch id="manage-inventory-small" size="small" />
|
||||
<Label htmlFor="manage-inventory-small" size="small">
|
||||
Manage Inventory
|
||||
</Label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { Table } from "@medusajs/ui"
|
||||
|
||||
type Order = {
|
||||
id: string
|
||||
displayId: number
|
||||
customer: string
|
||||
email: string
|
||||
amount: number
|
||||
currency: string
|
||||
}
|
||||
|
||||
const fakeData: Order[] = [
|
||||
{
|
||||
id: "order_6782",
|
||||
displayId: 86078,
|
||||
customer: "Jill Miller",
|
||||
email: "32690@gmail.com",
|
||||
amount: 493,
|
||||
currency: "EUR",
|
||||
},
|
||||
{
|
||||
id: "order_46487",
|
||||
displayId: 42845,
|
||||
customer: "Sarah Garcia",
|
||||
email: "86379@gmail.com",
|
||||
amount: 113,
|
||||
currency: "JPY",
|
||||
},
|
||||
{
|
||||
id: "order_8169",
|
||||
displayId: 39129,
|
||||
customer: "Josef Smith",
|
||||
email: "89383@gmail.com",
|
||||
amount: 43,
|
||||
currency: "USD",
|
||||
},
|
||||
{
|
||||
id: "order_67883",
|
||||
displayId: 5548,
|
||||
customer: "Elvis Jones",
|
||||
email: "52860@gmail.com",
|
||||
amount: 840,
|
||||
currency: "GBP",
|
||||
},
|
||||
{
|
||||
id: "order_61121",
|
||||
displayId: 87668,
|
||||
customer: "Charles Rodriguez",
|
||||
email: "45675@gmail.com",
|
||||
amount: 304,
|
||||
currency: "GBP",
|
||||
},
|
||||
]
|
||||
|
||||
export default function TableDemo() {
|
||||
return (
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>#</Table.HeaderCell>
|
||||
<Table.HeaderCell>Customer</Table.HeaderCell>
|
||||
<Table.HeaderCell>Email</Table.HeaderCell>
|
||||
<Table.HeaderCell className="text-right">Amount</Table.HeaderCell>
|
||||
<Table.HeaderCell></Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{fakeData.map((order) => {
|
||||
return (
|
||||
<Table.Row
|
||||
key={order.id}
|
||||
className="[&_td:last-child]:w-[1%] [&_td:last-child]:whitespace-nowrap"
|
||||
>
|
||||
<Table.Cell>{order.displayId}</Table.Cell>
|
||||
<Table.Cell>{order.customer}</Table.Cell>
|
||||
<Table.Cell>{order.email}</Table.Cell>
|
||||
<Table.Cell className="text-right">
|
||||
{new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: order.currency,
|
||||
}).format(order.amount)}
|
||||
</Table.Cell>
|
||||
<Table.Cell className="text-ui-fg-muted">
|
||||
{order.currency}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
)
|
||||
})}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Text } from "@medusajs/ui"
|
||||
|
||||
export default function TextDemo() {
|
||||
return <Text>Text</Text>
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { Text } from "@medusajs/ui"
|
||||
|
||||
export default function TextExamples() {
|
||||
return (
|
||||
<div className="flex flex-col items-start gap-y-2">
|
||||
<Text size="base" weight="regular" family="sans">
|
||||
Base Size, Regular Weight, Sans-Serif
|
||||
</Text>
|
||||
<Text size="base" weight="plus" family="sans">
|
||||
Base Size, Plus Weight, Sans-Serif
|
||||
</Text>
|
||||
<Text size="large" weight="regular" family="sans">
|
||||
Large Size, Regular Weight, Sans-Serif
|
||||
</Text>
|
||||
<Text size="large" weight="plus" family="sans">
|
||||
Large Size, Plus Weight, Sans-Serif
|
||||
</Text>
|
||||
<Text size="xlarge" weight="regular" family="sans">
|
||||
XLarge Size, Regular Weight, Sans-Serif
|
||||
</Text>
|
||||
<Text size="xlarge" weight="plus" family="sans">
|
||||
XLarge Size, Plus Weight, Sans-Serif
|
||||
</Text>
|
||||
<Text size="base" weight="regular" family="mono">
|
||||
Base Size, Regular Weight, Mono
|
||||
</Text>
|
||||
<Text size="large" weight="regular" family="mono">
|
||||
Large Size, Regular Weight, Mono
|
||||
</Text>
|
||||
<Text size="large" weight="plus" family="mono">
|
||||
Large Size, Plus Weight, Mono
|
||||
</Text>
|
||||
<Text size="xlarge" weight="regular" family="mono">
|
||||
XLarge Size, Regular Weight, Mono
|
||||
</Text>
|
||||
<Text size="xlarge" weight="plus" family="mono">
|
||||
XLarge Size, Plus Weight, Mono
|
||||
</Text>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Textarea } from "@medusajs/ui"
|
||||
|
||||
export default function TextAreaDemo() {
|
||||
return <Textarea placeholder="Product description ..." />
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Button, Toaster, useToast } from "@medusajs/ui"
|
||||
|
||||
export default function ToasterDemo() {
|
||||
const { toast } = useToast()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
<Button
|
||||
onClick={() =>
|
||||
toast({
|
||||
title: "Info",
|
||||
description: "The quick brown fox jumps over the lazy dog.",
|
||||
})
|
||||
}
|
||||
>
|
||||
Show
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Button, Toaster, useToast } from "@medusajs/ui"
|
||||
|
||||
export default function ToasterError() {
|
||||
const { toast } = useToast()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
<Button
|
||||
onClick={() =>
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "The quick brown fox jumps over the lazy dog.",
|
||||
variant: "error",
|
||||
duration: 5000,
|
||||
})
|
||||
}
|
||||
>
|
||||
Show
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Button, Toaster, useToast } from "@medusajs/ui"
|
||||
|
||||
export default function ToasterLoading() {
|
||||
const { toast } = useToast()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
<Button
|
||||
onClick={() =>
|
||||
toast({
|
||||
title: "Loading",
|
||||
description: "The quick brown fox jumps over the lazy dog.",
|
||||
variant: "loading",
|
||||
duration: 5000,
|
||||
})
|
||||
}
|
||||
>
|
||||
Show
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Button, Toaster, useToast } from "@medusajs/ui"
|
||||
|
||||
export default function ToasterSuccess() {
|
||||
const { toast } = useToast()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
<Button
|
||||
onClick={() =>
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "The quick brown fox jumps over the lazy dog.",
|
||||
variant: "success",
|
||||
duration: 5000,
|
||||
})
|
||||
}
|
||||
>
|
||||
Show
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Button, Toaster, useToast } from "@medusajs/ui"
|
||||
|
||||
export default function ToasterWarning() {
|
||||
const { toast } = useToast()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
<Button
|
||||
onClick={() =>
|
||||
toast({
|
||||
title: "Warning",
|
||||
description: "The quick brown fox jumps over the lazy dog.",
|
||||
variant: "warning",
|
||||
duration: 5000,
|
||||
})
|
||||
}
|
||||
>
|
||||
Show
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Button, Toaster, useToast } from "@medusajs/ui"
|
||||
|
||||
export default function ToasterWithAction() {
|
||||
const { toast } = useToast()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
<Button
|
||||
onClick={() =>
|
||||
toast({
|
||||
title: "Created Product",
|
||||
description: "The product has been created.",
|
||||
variant: "success",
|
||||
action: {
|
||||
altText: "Undo product creation",
|
||||
onClick: () => {},
|
||||
label: "Undo",
|
||||
},
|
||||
duration: 10000,
|
||||
})
|
||||
}
|
||||
>
|
||||
Show
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { InformationCircleSolid } from "@medusajs/icons"
|
||||
import { Tooltip } from "@medusajs/ui"
|
||||
|
||||
export default function TooltipDemo() {
|
||||
return (
|
||||
<Tooltip content="The quick brown fox jumps over the lazy dog.">
|
||||
<InformationCircleSolid />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Button, usePrompt } from "@medusajs/ui"
|
||||
|
||||
export default function usePromptDemo() {
|
||||
const dialog = usePrompt()
|
||||
|
||||
const deleteEntity = async () => {
|
||||
const userHasConfirmed = await dialog({
|
||||
title: "Please confirm",
|
||||
description: "Are you sure you want to do this?",
|
||||
})
|
||||
if (userHasConfirmed) {
|
||||
// Perform Delete
|
||||
}
|
||||
}
|
||||
|
||||
return <Button onClick={async () => deleteEntity()}>Delete Entity</Button>
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Button, usePrompt } from "@medusajs/ui"
|
||||
|
||||
export default function usePromptVerification() {
|
||||
const entityName = "foo-bar-baz"
|
||||
|
||||
const dialog = usePrompt()
|
||||
|
||||
const deleteEntity = async () => {
|
||||
const userHasConfirmed = await dialog({
|
||||
title: "Please confirm",
|
||||
description: "Are you sure you want to delete this entity?",
|
||||
verificationText: entityName,
|
||||
})
|
||||
console.log({ userHasConfirmed })
|
||||
if (userHasConfirmed) {
|
||||
// Perform Delete
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Button onClick={async () => deleteEntity()}>Delete {entityName}</Button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import {
|
||||
Button,
|
||||
FocusModal,
|
||||
Heading,
|
||||
Table,
|
||||
useToggleState,
|
||||
} from "@medusajs/ui"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function useToggleStateDemo() {
|
||||
const [editOpen, showEdit, closeEdit] = useToggleState()
|
||||
const [entityToEdit, setEntityToEdit] = useState<string>()
|
||||
|
||||
const entities = ["foo", "bar", "baz"]
|
||||
|
||||
const editEntity = (entity: string) => {
|
||||
setEntityToEdit(entity)
|
||||
showEdit()
|
||||
}
|
||||
|
||||
const onSave = () => {
|
||||
// do entity update, etc.
|
||||
closeEdit()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>Entity Name</Table.HeaderCell>
|
||||
<Table.HeaderCell className="text-right">Actions</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{entities.map((entity, index) => (
|
||||
<Table.Row key={index}>
|
||||
<Table.Cell>{entity}</Table.Cell>
|
||||
<Table.Cell className="text-right">
|
||||
<Button variant="secondary" onClick={() => editEntity(entity)}>
|
||||
Edit
|
||||
</Button>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
<FocusModal
|
||||
open={editOpen}
|
||||
onOpenChange={(modalOpened) => {
|
||||
if (!modalOpened) {
|
||||
closeEdit()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FocusModal.Content>
|
||||
<FocusModal.Header>
|
||||
<Button onClick={() => onSave()}>Save</Button>
|
||||
</FocusModal.Header>
|
||||
<FocusModal.Body>
|
||||
<div className="p-10">
|
||||
<Heading>Edit {entityToEdit}</Heading>
|
||||
</div>
|
||||
</FocusModal.Body>
|
||||
</FocusModal.Content>
|
||||
</FocusModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user