diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.tsx index 36ac5ff791..0013a88732 100644 --- a/packages/design-system/ui/src/components/date-picker/date-picker.tsx +++ b/packages/design-system/ui/src/components/date-picker/date-picker.tsx @@ -287,7 +287,7 @@ type CalendarProps = { */ toDate?: Date /** - * Locale to use for formatting dates. To change the locale pass a `date-fns` locale object. + * The locale to use for formatting dates. To change the locale pass a date-fns locale object. */ locale?: Locale } diff --git a/www/apps/ui/package.json b/www/apps/ui/package.json index 8304601b4e..479f728024 100644 --- a/www/apps/ui/package.json +++ b/www/apps/ui/package.json @@ -15,7 +15,7 @@ "dependencies": { "@faker-js/faker": "^8.0.2", "@medusajs/icons": "latest", - "@medusajs/ui": "latest", + "@medusajs/ui": "^2.3.0", "@medusajs/ui-preset": "latest", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-scroll-area": "^1.0.4", @@ -26,7 +26,7 @@ "autoprefixer": "10.4.14", "clsx": "^2.0.0", "contentlayer": "^0.3.4", - "date-fns": "^2.30.0", + "date-fns": "^3.3.1", "docs-ui": "*", "eslint-config-docs": "*", "mdast-util-toc": "^7.0.0", @@ -35,6 +35,7 @@ "next-themes": "^0.2.1", "postcss": "8.4.27", "react": "18.2.0", + "react-day-picker": "^8.10.0", "react-dom": "18.2.0", "remark": "^14.0.3", "tailwind": "*", diff --git a/www/apps/ui/src/content/docs/components/calendar.mdx b/www/apps/ui/src/content/docs/components/calendar.mdx index ffb38223a9..0a4a9cab21 100644 --- a/www/apps/ui/src/content/docs/components/calendar.mdx +++ b/www/apps/ui/src/content/docs/components/calendar.mdx @@ -35,3 +35,9 @@ import { Calendar } from "@medusajs/ui" ### Range + +### Changing Locale + +Changing the locale requires installing the [date-fns library](https://date-fns.org/docs/Getting-Started#npm). + + diff --git a/www/apps/ui/src/content/docs/components/date-picker.mdx b/www/apps/ui/src/content/docs/components/date-picker.mdx index 7dcf1dca66..f2b4112d84 100644 --- a/www/apps/ui/src/content/docs/components/date-picker.mdx +++ b/www/apps/ui/src/content/docs/components/date-picker.mdx @@ -59,4 +59,10 @@ import { DatePicker } from "@medusajs/ui" ### Range with presets and time - \ No newline at end of file + + +### Changing the Locale + +Changing the locale requires installing the [date-fns library](https://date-fns.org/docs/Getting-Started#npm). + + \ No newline at end of file diff --git a/www/apps/ui/src/examples/calendar-locale.tsx b/www/apps/ui/src/examples/calendar-locale.tsx new file mode 100644 index 0000000000..f88a1c5d20 --- /dev/null +++ b/www/apps/ui/src/examples/calendar-locale.tsx @@ -0,0 +1,9 @@ +import { Calendar } from "@medusajs/ui" +import * as React from "react" +import { es } from "date-fns/locale" + +export default function CalendarDemo() { + const [date, setDate] = React.useState() + + return +} diff --git a/www/apps/ui/src/examples/date-picker-demo.tsx b/www/apps/ui/src/examples/date-picker-demo.tsx index 6aaa253302..d9fd31bdc0 100644 --- a/www/apps/ui/src/examples/date-picker-demo.tsx +++ b/www/apps/ui/src/examples/date-picker-demo.tsx @@ -3,7 +3,7 @@ import { DatePicker } from "@medusajs/ui" export default function DatePickerDemo() { return (
- +
) } diff --git a/www/apps/ui/src/examples/date-picker-locale.tsx b/www/apps/ui/src/examples/date-picker-locale.tsx new file mode 100644 index 0000000000..55873a3076 --- /dev/null +++ b/www/apps/ui/src/examples/date-picker-locale.tsx @@ -0,0 +1,10 @@ +import { DatePicker } from "@medusajs/ui" +import { es } from "date-fns/locale" + +export default function DatePickerDemo() { + return ( +
+ +
+ ) +} diff --git a/www/apps/ui/src/examples/date-picker-range-presets-time.tsx b/www/apps/ui/src/examples/date-picker-range-presets-time.tsx index d7f79ba644..efe2b77c5f 100644 --- a/www/apps/ui/src/examples/date-picker-range-presets-time.tsx +++ b/www/apps/ui/src/examples/date-picker-range-presets-time.tsx @@ -4,6 +4,7 @@ export default function DatePickerRangePresetsTime() { return (
- +
) } diff --git a/www/apps/ui/src/examples/date-picker-range.tsx b/www/apps/ui/src/examples/date-picker-range.tsx index c69f7b8a1d..8dffa26353 100644 --- a/www/apps/ui/src/examples/date-picker-range.tsx +++ b/www/apps/ui/src/examples/date-picker-range.tsx @@ -3,7 +3,7 @@ import { DatePicker } from "@medusajs/ui" export default function DatePickerRange() { return (
- +
) } diff --git a/www/apps/ui/src/examples/date-picker-single-presets-time.tsx b/www/apps/ui/src/examples/date-picker-single-presets-time.tsx index ea4ccb7bfb..61aaafba3e 100644 --- a/www/apps/ui/src/examples/date-picker-single-presets-time.tsx +++ b/www/apps/ui/src/examples/date-picker-single-presets-time.tsx @@ -4,6 +4,7 @@ export default function DatePickerSinglePresetsTime() { return (
- +
) } diff --git a/www/apps/ui/src/examples/date-picker-single.tsx b/www/apps/ui/src/examples/date-picker-single.tsx index b11ad06092..3340b11389 100644 --- a/www/apps/ui/src/examples/date-picker-single.tsx +++ b/www/apps/ui/src/examples/date-picker-single.tsx @@ -3,7 +3,7 @@ import { DatePicker } from "@medusajs/ui" export default function DatePickerSingle() { return (
- +
) } diff --git a/www/apps/ui/src/registries/example-registry.tsx b/www/apps/ui/src/registries/example-registry.tsx index d2c55ef2d5..747923ea73 100644 --- a/www/apps/ui/src/registries/example-registry.tsx +++ b/www/apps/ui/src/registries/example-registry.tsx @@ -122,6 +122,11 @@ export const ExampleRegistry: Record = { component: React.lazy(async () => import("@/examples/calendar-demo")), file: "src/examples/calendar-demo.tsx", }, + "calendar-locale": { + name: "calendar-locale", + component: React.lazy(async () => import("@/examples/calendar-locale")), + file: "src/examples/calendar-locale.tsx", + }, "checkbox-demo": { name: "checkbox-demo", component: React.lazy(async () => import("@/examples/checkbox-demo")), @@ -214,6 +219,11 @@ export const ExampleRegistry: Record = { ), file: "src/examples/date-picker-range-presets-time.tsx", }, + "date-picker-locale": { + name: "date-picker-locale", + component: React.lazy(async () => import("@/examples/date-picker-locale")), + file: "src/examples/date-picker-locale.tsx", + }, "drawer-demo": { name: "drawer-demo", component: React.lazy(async () => import("@/examples/drawer-demo")), diff --git a/www/apps/ui/src/specs/Avatar/Avatar.json b/www/apps/ui/src/specs/Avatar/Avatar.json index c91d361fd0..02580207f6 100644 --- a/www/apps/ui/src/specs/Avatar/Avatar.json +++ b/www/apps/ui/src/specs/Avatar/Avatar.json @@ -47,8 +47,20 @@ "description": "The size of the avatar's border radius.", "tsType": { "name": "union", - "raw": "\"base\" \\| \"large\"", + "raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"", "elements": [ + { + "name": "literal", + "value": "\"2xsmall\"" + }, + { + "name": "literal", + "value": "\"xsmall\"" + }, + { + "name": "literal", + "value": "\"small\"" + }, { "name": "literal", "value": "\"base\"" @@ -56,6 +68,10 @@ { "name": "literal", "value": "\"large\"" + }, + { + "name": "literal", + "value": "\"xlarge\"" } ] }, diff --git a/www/apps/ui/src/specs/Badge/Badge.json b/www/apps/ui/src/specs/Badge/Badge.json index 5dc64e93ee..71cf8d2dce 100644 --- a/www/apps/ui/src/specs/Badge/Badge.json +++ b/www/apps/ui/src/specs/Badge/Badge.json @@ -22,8 +22,12 @@ "description": "The badge's size.", "tsType": { "name": "union", - "raw": "\"base\" \\| \"large\" \\| \"small\"", + "raw": "\"small\" \\| \"base\" \\| \"large\"", "elements": [ + { + "name": "literal", + "value": "\"small\"" + }, { "name": "literal", "value": "\"base\"" @@ -31,10 +35,6 @@ { "name": "literal", "value": "\"large\"" - }, - { - "name": "literal", - "value": "\"small\"" } ] }, diff --git a/www/apps/ui/src/specs/Button/Button.json b/www/apps/ui/src/specs/Button/Button.json index 2b7cebdc84..9a8fcd8953 100644 --- a/www/apps/ui/src/specs/Button/Button.json +++ b/www/apps/ui/src/specs/Button/Button.json @@ -63,8 +63,12 @@ "description": "The button's size.", "tsType": { "name": "union", - "raw": "\"base\" \\| \"large\" \\| \"xlarge\"", + "raw": "\"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"", "elements": [ + { + "name": "literal", + "value": "\"small\"" + }, { "name": "literal", "value": "\"base\"" diff --git a/www/apps/ui/src/specs/Calendar/Calendar.json b/www/apps/ui/src/specs/Calendar/Calendar.json index cc008646cb..6fa7a1dd7a 100644 --- a/www/apps/ui/src/specs/Calendar/Calendar.json +++ b/www/apps/ui/src/specs/Calendar/Calendar.json @@ -35,6 +35,248 @@ "name": "boolean" }, "required": false + }, + "locale": { + "description": "The locale to use for formatting dates. To change the locale pass a date-fns locale object.", + "tsType": { + "name": "Locale", + "elements": [ + { + "name": "signature", + "type": "object", + "raw": "{ code?: string ; formatDistance?: (...args: any[]) => any ; formatLong?: { date: (...args: any[]) => any ; dateTime: (...args: any[]) => any ; time: (...args: any[]) => any } ; formatRelative?: (...args: any[]) => any ; localize?: { day: (...args: any[]) => any ; dayPeriod: (...args: any[]) => any ; era: (...args: any[]) => any ; month: (...args: any[]) => any ; ordinalNumber: (...args: any[]) => any ; quarter: (...args: any[]) => any } ; match?: { day: (...args: any[]) => any ; dayPeriod: (...args: any[]) => any ; era: (...args: any[]) => any ; month: (...args: any[]) => any ; ordinalNumber: (...args: any[]) => any ; quarter: (...args: any[]) => any } ; options?: { firstWeekContainsDate?: 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| 7 ; weekStartsOn?: 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 } }", + "signature": { + "properties": [ + { + "key": "code", + "value": { + "name": "string" + }, + "description": "" + }, + { + "key": "formatDistance", + "value": { + "name": "signature", + "type": "function", + "raw": "(...args: any[]) => any", + "signature": { + "arguments": [ + { + "name": "args", + "type": { + "name": "any[]" + }, + "rest": true + } + ], + "return": { + "name": "any" + } + } + }, + "description": "" + }, + { + "key": "formatLong", + "value": { + "name": "signature", + "type": "object", + "raw": "{ date: (...args: any[]) => any ; dateTime: (...args: any[]) => any ; time: (...args: any[]) => any }", + "signature": { + "properties": [ + { + "key": "date", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "dateTime", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "time", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + } + ] + } + }, + "description": "" + }, + { + "key": "formatRelative", + "value": { + "name": "signature", + "type": "function", + "raw": "(...args: any[]) => any", + "signature": { + "arguments": [ + { + "name": "args", + "type": { + "name": "any[]" + }, + "rest": true + } + ], + "return": { + "name": "any" + } + } + }, + "description": "" + }, + { + "key": "localize", + "value": { + "name": "signature", + "type": "object", + "raw": "{ day: (...args: any[]) => any ; dayPeriod: (...args: any[]) => any ; era: (...args: any[]) => any ; month: (...args: any[]) => any ; ordinalNumber: (...args: any[]) => any ; quarter: (...args: any[]) => any }", + "signature": { + "properties": [ + { + "key": "day", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "dayPeriod", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "era", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "month", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "ordinalNumber", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "quarter", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + } + ] + } + }, + "description": "" + }, + { + "key": "match", + "value": { + "name": "signature", + "type": "object", + "raw": "{ day: (...args: any[]) => any ; dayPeriod: (...args: any[]) => any ; era: (...args: any[]) => any ; month: (...args: any[]) => any ; ordinalNumber: (...args: any[]) => any ; quarter: (...args: any[]) => any }", + "signature": { + "properties": [ + { + "key": "day", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "dayPeriod", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "era", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "month", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "ordinalNumber", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + }, + { + "key": "quarter", + "value": { + "name": "(...args: any[]) => any" + }, + "description": "" + } + ] + } + }, + "description": "" + }, + { + "key": "options", + "value": { + "name": "signature", + "type": "object", + "raw": "{ firstWeekContainsDate?: 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| 7 ; weekStartsOn?: 0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 }", + "signature": { + "properties": [ + { + "key": "firstWeekContainsDate", + "value": { + "name": "1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| 7" + }, + "description": "" + }, + { + "key": "weekStartsOn", + "value": { + "name": "0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6" + }, + "description": "" + } + ] + } + }, + "description": "" + } + ] + } + } + ], + "raw": "Locale" + } } } } \ No newline at end of file diff --git a/www/apps/ui/src/specs/CommandBar/CommandBar.Value.json b/www/apps/ui/src/specs/CommandBar/CommandBar.Value.json index 86b179ca29..381a4a0f77 100644 --- a/www/apps/ui/src/specs/CommandBar/CommandBar.Value.json +++ b/www/apps/ui/src/specs/CommandBar/CommandBar.Value.json @@ -1,5 +1,5 @@ { - "description": "The value component of the command bar. This component is used to display a value, \nsuch as the number of selected items which the commands will act on.", + "description": "The value component of the command bar. This component is used to display a value,\nsuch as the number of selected items which the commands will act on.", "methods": [], "displayName": "CommandBar.Value", "props": {} diff --git a/www/apps/ui/src/specs/Copy/Copy.json b/www/apps/ui/src/specs/Copy/Copy.json index 978175000b..a6cdf9d554 100644 --- a/www/apps/ui/src/specs/Copy/Copy.json +++ b/www/apps/ui/src/specs/Copy/Copy.json @@ -10,6 +10,31 @@ }, "description": "The content to copy." }, + "variant": { + "required": false, + "tsType": { + "name": "union", + "raw": "\"mini\" | \"default\" | null", + "elements": [ + { + "name": "literal", + "value": "\"mini\"" + }, + { + "name": "literal", + "value": "\"default\"" + }, + { + "name": "null" + } + ] + }, + "description": "The variant of the copy button.", + "defaultValue": { + "value": "\"default\"", + "computed": false + } + }, "asChild": { "required": false, "tsType": { diff --git a/www/apps/ui/src/specs/CurrencyInput/CurrencyInput.json b/www/apps/ui/src/specs/CurrencyInput/CurrencyInput.json index 14e6f34191..d3cb525240 100644 --- a/www/apps/ui/src/specs/CurrencyInput/CurrencyInput.json +++ b/www/apps/ui/src/specs/CurrencyInput/CurrencyInput.json @@ -25,15 +25,15 @@ "description": "The input's size.", "tsType": { "name": "union", - "raw": "\"base\" \\| \"small\"", + "raw": "\"small\" \\| \"base\"", "elements": [ { "name": "literal", - "value": "\"base\"" + "value": "\"small\"" }, { "name": "literal", - "value": "\"small\"" + "value": "\"base\"" } ] }, diff --git a/www/apps/ui/src/specs/DatePicker/DatePicker.json b/www/apps/ui/src/specs/DatePicker/DatePicker.json index e64f5c0dc3..13e3d8dfd7 100644 --- a/www/apps/ui/src/specs/DatePicker/DatePicker.json +++ b/www/apps/ui/src/specs/DatePicker/DatePicker.json @@ -59,6 +59,13 @@ }, "description": "The date to show dates to." }, + "locale": { + "required": false, + "tsType": { + "name": "Locale" + }, + "description": "The locale to use for formatting dates. To change the locale pass a date-fns locale object." + }, "className": { "required": false, "tsType": { @@ -80,6 +87,13 @@ }, "description": "Whether the date picker's input is required." }, + "placeholder": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "The date picker's placeholder." + }, "size": { "required": false, "tsType": { @@ -105,6 +119,54 @@ }, "description": "Whether to show a time picker along with the date picker." }, + "translations": { + "required": false, + "tsType": { + "name": "signature", + "type": "object", + "raw": "{\n cancel?: string\n apply?: string\n start?: string\n end?: string\n range?: string\n}", + "signature": { + "properties": [ + { + "key": "cancel", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "apply", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "start", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "end", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "range", + "value": { + "name": "string", + "required": false + } + } + ] + } + }, + "description": "Translation keys for the date picker. Use this to localize the date picker." + }, "mode": { "defaultValue": { "value": "\"single\"", diff --git a/www/apps/ui/src/specs/FocusModal/FocusModal.Close.json b/www/apps/ui/src/specs/FocusModal/FocusModal.Close.json new file mode 100644 index 0000000000..b7feb6038e --- /dev/null +++ b/www/apps/ui/src/specs/FocusModal/FocusModal.Close.json @@ -0,0 +1,6 @@ +{ + "description": "", + "methods": [], + "displayName": "FocusModal.Close", + "props": {} +} \ No newline at end of file diff --git a/www/apps/ui/src/specs/IconButton/IconButton.json b/www/apps/ui/src/specs/IconButton/IconButton.json index 14e01670d4..ebdcd41e37 100644 --- a/www/apps/ui/src/specs/IconButton/IconButton.json +++ b/www/apps/ui/src/specs/IconButton/IconButton.json @@ -55,8 +55,12 @@ "description": "The button's size.", "tsType": { "name": "union", - "raw": "\"base\" \\| \"large\" \\| \"xlarge\"", + "raw": "\"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"", "elements": [ + { + "name": "literal", + "value": "\"small\"" + }, { "name": "literal", "value": "\"base\"" diff --git a/www/apps/ui/src/specs/Input/Input.json b/www/apps/ui/src/specs/Input/Input.json index 5222015936..9a4a3c8bb8 100644 --- a/www/apps/ui/src/specs/Input/Input.json +++ b/www/apps/ui/src/specs/Input/Input.json @@ -11,15 +11,15 @@ "description": "The input's size.", "tsType": { "name": "union", - "raw": "\"base\" \\| \"small\"", + "raw": "\"small\" \\| \"base\"", "elements": [ { "name": "literal", - "value": "\"base\"" + "value": "\"small\"" }, { "name": "literal", - "value": "\"small\"" + "value": "\"base\"" } ] }, diff --git a/www/apps/ui/src/specs/Label/Label.json b/www/apps/ui/src/specs/Label/Label.json index 611a173ec9..523c6cb271 100644 --- a/www/apps/ui/src/specs/Label/Label.json +++ b/www/apps/ui/src/specs/Label/Label.json @@ -11,15 +11,11 @@ "description": "The label's size.", "tsType": { "name": "union", - "raw": "\"base\" \\| \"large\" \\| \"small\" \\| \"xsmall\"", + "raw": "\"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\"", "elements": [ { "name": "literal", - "value": "\"base\"" - }, - { - "name": "literal", - "value": "\"large\"" + "value": "\"xsmall\"" }, { "name": "literal", @@ -27,7 +23,11 @@ }, { "name": "literal", - "value": "\"xsmall\"" + "value": "\"base\"" + }, + { + "name": "literal", + "value": "\"large\"" } ] }, diff --git a/www/apps/ui/src/specs/Prompt/Prompt.json b/www/apps/ui/src/specs/Prompt/Prompt.json index e9d43161d0..e9f3783426 100644 --- a/www/apps/ui/src/specs/Prompt/Prompt.json +++ b/www/apps/ui/src/specs/Prompt/Prompt.json @@ -2,5 +2,28 @@ "description": "This component is based on the [Radix UI Alert Dialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog) primitives.", "methods": [], "displayName": "Prompt", - "props": {} + "props": { + "variant": { + "required": false, + "tsType": { + "name": "union", + "raw": "\"danger\" | \"confirmation\"", + "elements": [ + { + "name": "literal", + "value": "\"danger\"" + }, + { + "name": "literal", + "value": "\"confirmation\"" + } + ] + }, + "description": "The variant of the prompt.", + "defaultValue": { + "value": "\"danger\"", + "computed": false + } + } + } } \ No newline at end of file diff --git a/www/apps/ui/src/specs/PromptProvider/PromptProvider.json b/www/apps/ui/src/specs/PromptProvider/PromptProvider.json new file mode 100644 index 0000000000..afe9262247 --- /dev/null +++ b/www/apps/ui/src/specs/PromptProvider/PromptProvider.json @@ -0,0 +1,6 @@ +{ + "description": "", + "methods": [], + "displayName": "PromptProvider", + "props": {} +} \ No newline at end of file diff --git a/www/apps/ui/src/specs/RangeDatePicker/RangeDatePicker.json b/www/apps/ui/src/specs/RangeDatePicker/RangeDatePicker.json index afbea4f63b..b1e3324078 100644 --- a/www/apps/ui/src/specs/RangeDatePicker/RangeDatePicker.json +++ b/www/apps/ui/src/specs/RangeDatePicker/RangeDatePicker.json @@ -59,6 +59,13 @@ }, "description": "The date to show dates to." }, + "locale": { + "required": false, + "tsType": { + "name": "Locale" + }, + "description": "The locale to use for formatting dates. To change the locale pass a date-fns locale object." + }, "className": { "required": false, "tsType": { @@ -80,6 +87,13 @@ }, "description": "Whether the date picker's input is required." }, + "placeholder": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "The date picker's placeholder." + }, "size": { "required": false, "tsType": { @@ -109,6 +123,54 @@ }, "description": "Whether to show a time picker along with the date picker." }, + "translations": { + "required": false, + "tsType": { + "name": "signature", + "type": "object", + "raw": "{\n cancel?: string\n apply?: string\n start?: string\n end?: string\n range?: string\n}", + "signature": { + "properties": [ + { + "key": "cancel", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "apply", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "start", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "end", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "range", + "value": { + "name": "string", + "required": false + } + } + ] + } + }, + "description": "Translation keys for the date picker. Use this to localize the date picker." + }, "id": { "required": false, "tsType": { diff --git a/www/apps/ui/src/specs/RenderPrompt/RenderPrompt.json b/www/apps/ui/src/specs/RenderPrompt/RenderPrompt.json index 6be26cc560..fe56fcfb4c 100644 --- a/www/apps/ui/src/specs/RenderPrompt/RenderPrompt.json +++ b/www/apps/ui/src/specs/RenderPrompt/RenderPrompt.json @@ -17,6 +17,28 @@ }, "description": "The prompt's description." }, + "variant": { + "required": false, + "tsType": { + "name": "union", + "raw": "\"danger\" | \"confirmation\"", + "elements": [ + { + "name": "literal", + "value": "\"danger\"" + }, + { + "name": "literal", + "value": "\"confirmation\"" + } + ] + }, + "description": "The variant of the prompt.", + "defaultValue": { + "value": "\"danger\"", + "computed": false + } + }, "verificationText": { "required": false, "tsType": { @@ -24,6 +46,17 @@ }, "description": "The text the user has to input in order to confirm the action." }, + "verificationInstruction": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "The instruction for the verification text. Useful for passing a translated string to use instead of the default english one.\nShould be in the format: \"Please type {val} to confirm:\"", + "defaultValue": { + "value": "\"Please type {val} to confirm:\"", + "computed": false + } + }, "cancelText": { "required": false, "tsType": { diff --git a/www/apps/ui/src/specs/SingleDatePicker/SingleDatePicker.json b/www/apps/ui/src/specs/SingleDatePicker/SingleDatePicker.json index 50f98a0c69..c4ebf7f03a 100644 --- a/www/apps/ui/src/specs/SingleDatePicker/SingleDatePicker.json +++ b/www/apps/ui/src/specs/SingleDatePicker/SingleDatePicker.json @@ -59,6 +59,13 @@ }, "description": "The date to show dates to." }, + "locale": { + "required": false, + "tsType": { + "name": "Locale" + }, + "description": "The locale to use for formatting dates. To change the locale pass a date-fns locale object." + }, "className": { "required": false, "tsType": { @@ -80,6 +87,13 @@ }, "description": "Whether the date picker's input is required." }, + "placeholder": { + "required": false, + "tsType": { + "name": "string" + }, + "description": "The date picker's placeholder." + }, "size": { "required": false, "tsType": { @@ -109,6 +123,54 @@ }, "description": "Whether to show a time picker along with the date picker." }, + "translations": { + "required": false, + "tsType": { + "name": "signature", + "type": "object", + "raw": "{\n cancel?: string\n apply?: string\n start?: string\n end?: string\n range?: string\n}", + "signature": { + "properties": [ + { + "key": "cancel", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "apply", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "start", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "end", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "range", + "value": { + "name": "string", + "required": false + } + } + ] + } + }, + "description": "Translation keys for the date picker. Use this to localize the date picker." + }, "id": { "required": false, "tsType": { diff --git a/www/apps/ui/src/specs/StatusBadge/StatusBadge.json b/www/apps/ui/src/specs/StatusBadge/StatusBadge.json index 32e624b25c..b5ea5f1498 100644 --- a/www/apps/ui/src/specs/StatusBadge/StatusBadge.json +++ b/www/apps/ui/src/specs/StatusBadge/StatusBadge.json @@ -4,10 +4,14 @@ "displayName": "StatusBadge", "props": { "color": { - "required": false, + "defaultValue": { + "value": "\"grey\"", + "computed": false + }, + "description": "The status's color.", "tsType": { "name": "union", - "raw": "\"green\" | \"red\" | \"blue\" | \"orange\" | \"grey\" | \"purple\"", + "raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"", "elements": [ { "name": "literal", @@ -35,14 +39,11 @@ } ] }, - "description": "The status's color.", - "defaultValue": { - "value": "\"grey\"", - "computed": false - } + "required": false } }, "composes": [ - "Omit" + "Omit", + "VariantProps" ] } \ No newline at end of file diff --git a/www/apps/ui/src/specs/Switch/Switch.json b/www/apps/ui/src/specs/Switch/Switch.json index e8c609eac4..e1f3eda603 100644 --- a/www/apps/ui/src/specs/Switch/Switch.json +++ b/www/apps/ui/src/specs/Switch/Switch.json @@ -11,15 +11,15 @@ "description": "The switch's size.", "tsType": { "name": "union", - "raw": "\"base\" \\| \"small\"", + "raw": "\"small\" \\| \"base\"", "elements": [ { "name": "literal", - "value": "\"base\"" + "value": "\"small\"" }, { "name": "literal", - "value": "\"small\"" + "value": "\"base\"" } ] }, diff --git a/www/apps/ui/src/specs/Table/Table.Pagination.json b/www/apps/ui/src/specs/Table/Table.Pagination.json index e9c1de01e3..0aa7e73756 100644 --- a/www/apps/ui/src/specs/Table/Table.Pagination.json +++ b/www/apps/ui/src/specs/Table/Table.Pagination.json @@ -45,6 +45,58 @@ }, "description": "Whether there's a next page that can be navigated to." }, + "translations": { + "required": false, + "tsType": { + "name": "signature", + "type": "object", + "raw": "{\n of?: string\n results?: string\n pages?: string\n prev?: string\n next?: string\n}", + "signature": { + "properties": [ + { + "key": "of", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "results", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "pages", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "prev", + "value": { + "name": "string", + "required": false + } + }, + { + "key": "next", + "value": { + "name": "string", + "required": false + } + } + ] + } + }, + "description": "An optional object of words to use in the pagination component.\nUse this to override the default words, or translate them into another language.", + "defaultValue": { + "value": "{\n of: \"of\",\n results: \"results\",\n pages: \"pages\",\n prev: \"Prev\",\n next: \"Next\",\n}", + "computed": false + } + }, "previousPage": { "required": true, "tsType": { diff --git a/www/apps/ui/src/specs/Text/Text.json b/www/apps/ui/src/specs/Text/Text.json index 1852fd970d..f3755178e9 100644 --- a/www/apps/ui/src/specs/Text/Text.json +++ b/www/apps/ui/src/specs/Text/Text.json @@ -48,8 +48,16 @@ "description": "The text's size.", "tsType": { "name": "union", - "raw": "\"base\" \\| \"large\" \\| \"small\" \\| \"xlarge\" \\| \"xsmall\"", + "raw": "\"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"", "elements": [ + { + "name": "literal", + "value": "\"xsmall\"" + }, + { + "name": "literal", + "value": "\"small\"" + }, { "name": "literal", "value": "\"base\"" @@ -58,17 +66,9 @@ "name": "literal", "value": "\"large\"" }, - { - "name": "literal", - "value": "\"small\"" - }, { "name": "literal", "value": "\"xlarge\"" - }, - { - "name": "literal", - "value": "\"xsmall\"" } ] }, diff --git a/www/packages/docs-ui/package.json b/www/packages/docs-ui/package.json index 441d0e32c0..9334d9822e 100644 --- a/www/packages/docs-ui/package.json +++ b/www/packages/docs-ui/package.json @@ -58,7 +58,7 @@ }, "dependencies": { "@medusajs/icons": "latest", - "@medusajs/ui": "latest", + "@medusajs/ui": "^2.3.0", "@octokit/request": "^8.1.1", "@react-hook/resize-observer": "^1.2.6", "@segment/analytics-next": "^1.55.0", diff --git a/www/yarn.lock b/www/yarn.lock index 90a8ff2749..fd1f03d956 100644 --- a/www/yarn.lock +++ b/www/yarn.lock @@ -4319,7 +4319,7 @@ __metadata: languageName: node linkType: hard -"@medusajs/icons@npm:*, @medusajs/icons@npm:^1.0.0": +"@medusajs/icons@npm:^1.0.0": version: 1.0.0 resolution: "@medusajs/icons@npm:1.0.0" peerDependencies: @@ -4328,6 +4328,15 @@ __metadata: languageName: node linkType: hard +"@medusajs/icons@npm:^1.2.0": + version: 1.2.0 + resolution: "@medusajs/icons@npm:1.2.0" + peerDependencies: + react: ^16.x || ^17.x || ^18.x + checksum: b732b8b5401a235483b7095588ee6aa4916a8b60bc2f50c138e741d61b2f456e32c5042af63dc2d45f81433f7452dd16cb38e418a06e0ffb29f7512e89dd5111 + languageName: node + linkType: hard + "@medusajs/icons@npm:latest": version: 1.0.1 resolution: "@medusajs/icons@npm:1.0.1" @@ -4349,11 +4358,11 @@ __metadata: languageName: node linkType: hard -"@medusajs/ui@npm:latest": - version: 2.0.0 - resolution: "@medusajs/ui@npm:2.0.0" +"@medusajs/ui@npm:^2.3.0": + version: 2.3.0 + resolution: "@medusajs/ui@npm:2.3.0" dependencies: - "@medusajs/icons": "*" + "@medusajs/icons": ^1.2.0 "@radix-ui/react-accordion": ^1.1.2 "@radix-ui/react-alert-dialog": ^1.0.4 "@radix-ui/react-avatar": ^1.0.3 @@ -4365,7 +4374,7 @@ __metadata: "@radix-ui/react-portal": ^1.0.3 "@radix-ui/react-radio-group": ^1.1.3 "@radix-ui/react-scroll-area": ^1.0.4 - "@radix-ui/react-select": ^1.2.2 + "@radix-ui/react-select": ^2.0.0 "@radix-ui/react-slot": ^1.0.2 "@radix-ui/react-switch": ^1.0.3 "@radix-ui/react-tabs": ^1.0.4 @@ -4373,9 +4382,9 @@ __metadata: "@radix-ui/react-tooltip": ^1.0.6 "@react-aria/datepicker": ^3.5.0 "@react-stately/datepicker": ^3.5.0 - class-variance-authority: ^0.6.1 clsx: ^1.2.1 copy-to-clipboard: ^3.3.3 + cva: 1.0.0-beta.1 date-fns: ^2.30.0 prism-react-renderer: ^2.0.6 react-currency-input-field: ^3.6.11 @@ -4384,7 +4393,7 @@ __metadata: peerDependencies: react: ^18.0.0 react-dom: ^18.0.0 - checksum: 1243cb33cc12fe4aaa840a89be06d5db4f01d95f9ba0de44ea7bdd1621835f080a2e67fd572e55bce5751941ba3fcdb287139df6427560efc2c5b3f4d5ec9d57 + checksum: a76976812186eaf4600817b83c8303e05ddb272556a2062508b33ed262e2d1d03c91477d35381db4094c8b26ae3828ed0dd95fdc2c0e00bd617e11ff1f2e9e6f languageName: node linkType: hard @@ -5298,6 +5307,30 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-dismissable-layer@npm:1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-escape-keydown": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 7e4308867aecfb07b506330c1964d94a52247ab9453725613cd326762aa13e483423c250f107219c131b0449600eb8d1576ce3159c2b96e8c978f75e46062cb2 + languageName: node + linkType: hard + "@radix-ui/react-dropdown-menu@npm:^2.0.5": version: 2.0.5 resolution: "@radix-ui/react-dropdown-menu@npm:2.0.5" @@ -5361,6 +5394,28 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-focus-scope@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-focus-scope@npm:1.0.4" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 2fce0bafcab4e16cf4ed7560bda40654223f3d0add6b231e1c607433030c14e6249818b444b7b58ee7a6ff6bbf8e192c9c81d22c3a5c88c2daade9d1f881b5be + languageName: node + linkType: hard + "@radix-ui/react-id@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-id@npm:1.0.1" @@ -5497,6 +5552,35 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-popper@npm:1.1.3": + version: 1.1.3 + resolution: "@radix-ui/react-popper@npm:1.1.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@floating-ui/react-dom": ^2.0.0 + "@radix-ui/react-arrow": 1.0.3 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-layout-effect": 1.0.1 + "@radix-ui/react-use-rect": 1.0.1 + "@radix-ui/react-use-size": 1.0.1 + "@radix-ui/rect": 1.0.1 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: a38c374ec65dd8d7c604af7151e96faec1743828d859dc4892e720c1803a7e1562add26aec2ddf2091defae4e15d989c028032ea481419e38c4693b3f12545c3 + languageName: node + linkType: hard + "@radix-ui/react-portal@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-portal@npm:1.0.3" @@ -5517,7 +5601,7 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-portal@npm:^1.0.3": +"@radix-ui/react-portal@npm:1.0.4, @radix-ui/react-portal@npm:^1.0.3": version: 1.0.4 resolution: "@radix-ui/react-portal@npm:1.0.4" dependencies: @@ -5663,9 +5747,9 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-select@npm:^1.2.2": - version: 1.2.2 - resolution: "@radix-ui/react-select@npm:1.2.2" +"@radix-ui/react-select@npm:^2.0.0": + version: 2.0.0 + resolution: "@radix-ui/react-select@npm:2.0.0" dependencies: "@babel/runtime": ^7.13.10 "@radix-ui/number": 1.0.1 @@ -5674,12 +5758,12 @@ __metadata: "@radix-ui/react-compose-refs": 1.0.1 "@radix-ui/react-context": 1.0.1 "@radix-ui/react-direction": 1.0.1 - "@radix-ui/react-dismissable-layer": 1.0.4 + "@radix-ui/react-dismissable-layer": 1.0.5 "@radix-ui/react-focus-guards": 1.0.1 - "@radix-ui/react-focus-scope": 1.0.3 + "@radix-ui/react-focus-scope": 1.0.4 "@radix-ui/react-id": 1.0.1 - "@radix-ui/react-popper": 1.1.2 - "@radix-ui/react-portal": 1.0.3 + "@radix-ui/react-popper": 1.1.3 + "@radix-ui/react-portal": 1.0.4 "@radix-ui/react-primitive": 1.0.3 "@radix-ui/react-slot": 1.0.2 "@radix-ui/react-use-callback-ref": 1.0.1 @@ -5699,7 +5783,7 @@ __metadata: optional: true "@types/react-dom": optional: true - checksum: 888fffa703a8f79b45c01d5f03ad9aae66250ddfff827bbba4f222c4d0720aa2f01a3e4b6bd80acabaf5e2fa7ad79de9e9dfd14831f7f4c24337d4d8dfb58ccc + checksum: 63aa4d119c5273035a2fce5a05739729abb8995ead00e810b86acfba05835fda655d962d3553b1f2011ed4f84e328f1e7e171cd9eaa7e3433b3d65c58cf3394a languageName: node linkType: hard @@ -10426,15 +10510,6 @@ __metadata: languageName: node linkType: hard -"class-variance-authority@npm:^0.6.1": - version: 0.6.1 - resolution: "class-variance-authority@npm:0.6.1" - dependencies: - clsx: 1.2.1 - checksum: 0685b1a92d97fbb26b1031a9dcb9d419c4bbb163aa20a6025a11f3a92ebd6209da277c63f789b294d890a0d500558de285fd842068c824d40b5beda97e01aa1a - languageName: node - linkType: hard - "classnames@npm:^2.3.0, classnames@npm:^2.3.2": version: 2.3.2 resolution: "classnames@npm:2.3.2" @@ -10527,20 +10602,20 @@ __metadata: languageName: node linkType: hard -"clsx@npm:1.2.1, clsx@npm:^1.1.1, clsx@npm:^1.2.1": - version: 1.2.1 - resolution: "clsx@npm:1.2.1" - checksum: 34dead8bee24f5e96f6e7937d711978380647e936a22e76380290e35486afd8634966ce300fc4b74a32f3762c7d4c0303f442c3e259f4ce02374eb0c82834f27 - languageName: node - linkType: hard - -"clsx@npm:^2.0.0": +"clsx@npm:2.0.0, clsx@npm:^2.0.0": version: 2.0.0 resolution: "clsx@npm:2.0.0" checksum: c09f43b3144a0b7826b6b11b6a111b2c7440831004eecc02d333533c5e58ef0aa5f2dce071d3b25fbb8c8ea97b45df96c74bcc1d51c8c2027eb981931107b0cd languageName: node linkType: hard +"clsx@npm:^1.1.1, clsx@npm:^1.2.1": + version: 1.2.1 + resolution: "clsx@npm:1.2.1" + checksum: 34dead8bee24f5e96f6e7937d711978380647e936a22e76380290e35486afd8634966ce300fc4b74a32f3762c7d4c0303f442c3e259f4ce02374eb0c82834f27 + languageName: node + linkType: hard + "code-error-fragment@npm:0.0.230": version: 0.0.230 resolution: "code-error-fragment@npm:0.0.230" @@ -11252,6 +11327,20 @@ __metadata: languageName: node linkType: hard +"cva@npm:1.0.0-beta.1": + version: 1.0.0-beta.1 + resolution: "cva@npm:1.0.0-beta.1" + dependencies: + clsx: 2.0.0 + peerDependencies: + typescript: ">= 4.5.5 < 6" + peerDependenciesMeta: + typescript: + optional: true + checksum: 0ac27613b156d0ff6b1450c3257c1b98356865366165cb973748a102ed576dc07824cd098b23da6e24155d3b732d6222b4fa83cff85fbd2df3924a5b425bfbde + languageName: node + linkType: hard + "cytoscape-cose-bilkent@npm:^4.1.0": version: 4.1.0 resolution: "cytoscape-cose-bilkent@npm:4.1.0" @@ -11681,6 +11770,13 @@ __metadata: languageName: node linkType: hard +"date-fns@npm:^3.3.1": + version: 3.3.1 + resolution: "date-fns@npm:3.3.1" + checksum: e04ff79244010e03b912d791cd3250af5f18866ce868604958d76bd87e5fb0b79f0a810b8e7066248452b41779b288c4fd21de1cac2cd4b6d384e9dd931c9674 + languageName: node + linkType: hard + "dayjs@npm:^1.11.7": version: 1.11.10 resolution: "dayjs@npm:1.11.10" @@ -12004,7 +12100,7 @@ __metadata: resolution: "docs-ui@workspace:packages/docs-ui" dependencies: "@medusajs/icons": latest - "@medusajs/ui": latest + "@medusajs/ui": ^2.3.0 "@octokit/request": ^8.1.1 "@react-hook/resize-observer": ^1.2.6 "@segment/analytics-next": ^1.55.0 @@ -19953,6 +20049,16 @@ __metadata: languageName: node linkType: hard +"react-day-picker@npm:^8.10.0": + version: 8.10.0 + resolution: "react-day-picker@npm:8.10.0" + peerDependencies: + date-fns: ^2.28.0 || ^3.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: e9868aced1e40b4cb7d6cf8d50e250226b38ec7ebea944b65aa9db20a0f36d0581b8a501297d09dcbf2d812de852168952b3fb27990915381629d6e314c2a4d8 + languageName: node + linkType: hard + "react-day-picker@npm:^8.8.0": version: 8.8.2 resolution: "react-day-picker@npm:8.8.2" @@ -22637,7 +22743,7 @@ __metadata: dependencies: "@faker-js/faker": ^8.0.2 "@medusajs/icons": latest - "@medusajs/ui": latest + "@medusajs/ui": ^2.3.0 "@medusajs/ui-preset": latest "@radix-ui/react-dialog": ^1.0.4 "@radix-ui/react-scroll-area": ^1.0.4 @@ -22648,7 +22754,7 @@ __metadata: autoprefixer: 10.4.14 clsx: ^2.0.0 contentlayer: ^0.3.4 - date-fns: ^2.30.0 + date-fns: ^3.3.1 docs-ui: "*" eslint: ^8.49.0 eslint-config-docs: "*" @@ -22658,6 +22764,7 @@ __metadata: next-themes: ^0.2.1 postcss: 8.4.27 react: 18.2.0 + react-day-picker: ^8.10.0 react-docgen: ^7.0.1 react-dom: 18.2.0 remark: ^14.0.3