diff --git a/www/apps/docs/content/upgrade-guides/index.mdx b/www/apps/docs/content/upgrade-guides/index.mdx index 770395b466..94e2756e52 100644 --- a/www/apps/docs/content/upgrade-guides/index.mdx +++ b/www/apps/docs/content/upgrade-guides/index.mdx @@ -26,4 +26,10 @@ Find in this page the upgrade guides that require necessary steps when upgrading \ No newline at end of file +/> + +## Medusa UI + + diff --git a/www/apps/docs/content/upgrade-guides/medusa-ui/2-0-0.md b/www/apps/docs/content/upgrade-guides/medusa-ui/2-0-0.md new file mode 100644 index 0000000000..b628ed7b52 --- /dev/null +++ b/www/apps/docs/content/upgrade-guides/medusa-ui/2-0-0.md @@ -0,0 +1,105 @@ +--- +description: "Actions Required for v.2.0.0" +sidebar_custom_props: + iconName: "component-solid" +--- + +# v2.0.0 + +Version 2.0.0 of Medusa UI introduces a set of new components, and breaking changes to some of the existing components. + +## How to Update + +Run the following command in your project: + +```bash npm2yarn +npm install @medusajs/ui@2.0.0 +``` + +--- + +## Breaking Changes + +### `Button` Component + +The [Button](https://docs.medusajs.com/ui/components/button) component has been split into two components: `Button` and `IconButton`. + +The `Button` no longer supports the `format` property that was periously used to specify if a button should be styled as a icon button. + +Instead, use the `IconButton` component for this purpose. + +### `Badge` Component + +The [Badge](https://docs.medusajs.com/ui/components/badge) component has been split into two components: `Badge` and `IconBadge`. + +The `Badge` component no longer supports the `format` property that was previously used to specify if a badge should be styled as a tag. Also, the border-radius of the `Badge` component is now controlled by the `rounded` property. + +Instead, use the `IconBadge` component for this purpose. + +### `CodeBlock` Component + +The [CodeBlock](https://docs.medusajs.com/ui/components/code-block) component no longer accepts the `hideLineNumbers` property. Instead, the property should be passed directly to the `snippets` property. + +This change was made to make the component more flexible, allowing users to specify whether to show line numbers for each snippet individually. + +--- + +## New Components + +### `IconBadge` Component + +The [IconBadge](https://docs.medusajs.com/ui/components/icon-badge) component is a new component that can be used to render a badge with an icon. It is a replacement for the `Badge` component with the `format` property set to `icon`. + +### `StatusBadge` Component + +The [StatusBadge](https://docs.medusajs.com/ui/components/status-badge) component is a new component that can be used to render a badge with a status. + +### `IconButton` Component + +The [IconButton](https://docs.medusajs.com/ui/components/icon-button) component is a new component that can be used to render a button with an icon. It is a replacement for the `Button` component with the `format` property set to `icon`. + +### `Tabs` Component + +The [Tabs](https://docs.medusajs.com/ui/components/tabs) component allows you to render a set of tab panels, which are displayed one at a time. + +### `ProgressTabs` Component + +The [ProgressTabs](https://docs.medusajs.com/ui/components/progress-tabs) component is a new component that can be used to render a set of tab panels with a progress indicator. It is specifically designed to be used for implementing multi-step tasks. + +### `CurrencyInpput` Component + +The [CurrencyInput](https://docs.medusajs.com/ui/components/currency-input) component is a new component that can be used to render a currency input field. It is specifically designed to be used for implementing currency inputs, such as money amounts. + +### `CommandBar` Component + +The [CommandBar](https://docs.medusajs.com/ui/components/command-bar) component is a new component that can be used to render a list of keyboard commands or shortcuts. + +### `ProgressAccordion` Component + +The [ProgressAccordion](https://docs.medusajs.com/ui/components/progress-accordion) component is a new component that can be used to render a list of accordion panels with a progress indicator. It is specifically designed to be used for implementing multi-step tasks. + +The `ProgressAccordion` component requires animations that have been introduced in the latest version of `@medusajs/ui-preset`, so make sure to update this package as well: + +```bash npm2yarn +npm install @medusajs/ui-preset@1.0.1 +``` + +--- + +## Other Changes + +### Cleanup of `z-index`'s across all components + +The `z-index`'s of all components have been cleaned up to ensure that components are layered correctly, out of the box. Components now have a maximum `z-index` of `1`, with the exception of the `Toaster` component. + +This prevents issues such as the `Select.Content` component being layered behind the `FocusModal` component. + +While this is meant to make it easier to use the components, be aware that if your application uses custom `z-index`'s, you may need to update them, or override the `z-index` of the components from Medusa UI. + +### `Table.Pagination` Component + +The [Table.Pagination](https://docs.medusajs.com/ui/components/table) component now displays the correct number of pages (`0`) when `count` is `0`. + +### `Calendar` Component + +The [Calendar](https://docs.medusajs.com/ui/components/calendar) component's day buttons are now of type `button`, which prevents them from submitting the form when clicked. diff --git a/www/apps/docs/content/upgrade-guides/medusa-ui/_category_.json b/www/apps/docs/content/upgrade-guides/medusa-ui/_category_.json new file mode 100644 index 0000000000..6d6e6aaf09 --- /dev/null +++ b/www/apps/docs/content/upgrade-guides/medusa-ui/_category_.json @@ -0,0 +1,6 @@ +{ + "position": 5, + "collapsed": true, + "link": null, + "label": "Medusa UI" +} diff --git a/www/apps/docs/sidebars.js b/www/apps/docs/sidebars.js index 88625c2821..f98eace014 100644 --- a/www/apps/docs/sidebars.js +++ b/www/apps/docs/sidebars.js @@ -1944,6 +1944,23 @@ module.exports = { }, ], }, + { + type: "category", + label: "Medusa UI", + collapsible: false, + customProps: { + sidebar_is_group_headline: true, + }, + items: [ + { + type: "autogenerated", + dirName: "upgrade-guides/medusa-ui", + customProps: { + reverse: true, + }, + }, + ], + }, { type: "category", label: "Modules", diff --git a/www/apps/ui/src/components/component-example.tsx b/www/apps/ui/src/components/component-example.tsx index c473401ff8..f06e4f135e 100644 --- a/www/apps/ui/src/components/component-example.tsx +++ b/www/apps/ui/src/components/component-example.tsx @@ -1,13 +1,12 @@ "use client" import { Spinner } from "@medusajs/icons" -import * as React from "react" -import { ExampleRegistry } from "../registries/example-registry" - -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs" -import { Feedback } from "./feedback" -import clsx from "clsx" +import { Tabs, clx } from "@medusajs/ui" import { CodeBlock } from "docs-ui" +import * as React from "react" + +import { Feedback } from "@/components/feedback" +import { ExampleRegistry } from "@/registries/example-registry" interface ComponentExampleProps extends React.HTMLAttributes { name: string @@ -34,14 +33,17 @@ export function ComponentExample({ return (
-
- - Preview - Code - - +
+ + Preview + Code + +
- - + + - +
{ const { mobileSidebarOpen, setMobileSidebarOpen } = useSidebar() diff --git a/www/apps/ui/src/components/tabs.tsx b/www/apps/ui/src/components/tabs.tsx deleted file mode 100644 index 8cbd70e3e1..0000000000 --- a/www/apps/ui/src/components/tabs.tsx +++ /dev/null @@ -1,62 +0,0 @@ -"use client" - -import { clx } from "@medusajs/ui" -import * as Primitives from "@radix-ui/react-tabs" -import * as React from "react" -import { Key } from "@/types/props" - -const Tabs = Primitives.Root - -const TabsList = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef - // eslint-disable-next-line react/prop-types ->(({ className, key, ...props }, ref) => ( - -)) -TabsList.displayName = "TabsList" - -const TabsTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef - // eslint-disable-next-line react/prop-types ->(({ className, key, ...props }, ref) => ( - -)) -TabsTrigger.displayName = "TabsTrigger" - -const TabsContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef - // eslint-disable-next-line react/prop-types ->(({ className, key, ...props }, ref) => ( - -)) -TabsContent.displayName = "TabsContent" - -export { Tabs, TabsContent, TabsList, TabsTrigger } diff --git a/www/apps/ui/src/config/colors.ts b/www/apps/ui/src/config/colors.ts index 22f32493b2..b24bef6132 100644 --- a/www/apps/ui/src/config/colors.ts +++ b/www/apps/ui/src/config/colors.ts @@ -1,5 +1,31 @@ export const colors = { dark: { + "--code-text-subtle": "rgba(105, 110, 119, 1)", + "--button-transparent-pressed": "rgba(46, 48, 53, 1)", + "--border-base": "rgba(46, 48, 53, 1)", + "--code-text-base": "rgba(237, 238, 240, 1)", + "--tag-neutral-icon": "rgba(125, 130, 138, 1)", + "--bg-switch-off-hover": "rgba(70, 75, 80, 1)", + "--fg-on-color": "rgba(255, 255, 255, 1)", + "--button-neutral-hover": "rgba(53, 55, 60, 1)", + "--bg-switch-off": "rgba(53, 55, 60, 1)", + "--border-strong": "rgba(53, 55, 60, 1)", + "--fg-subtle": "rgba(173, 177, 184, 1)", + "--fg-base": "rgba(237, 238, 240, 1)", + "--bg-base-hover": "rgba(39, 40, 45, 1)", + "--bg-subtle-hover": "rgba(27, 27, 31, 1)", + "--fg-disabled": "rgba(60, 63, 68, 1)", + "--bg-subtle": "rgba(24, 24, 26, 1)", + "--tag-neutral-border": "rgba(60, 63, 68, 1)", + "--bg-subtle-pressed": "rgba(39, 40, 45, 1)", + "--tag-neutral-text": "rgba(173, 177, 184, 1)", + "--fg-muted": "rgba(105, 110, 119, 1)", + "--button-danger-pressed": "rgba(225, 29, 72, 1)", + "--code-bg-header": "rgba(24, 24, 26, 1)", + "--border-loud": "rgba(237, 238, 240, 1)", + "--bg-base-pressed": "rgba(46, 48, 53, 1)", + "--bg-disabled": "rgba(39, 40, 45, 1)", + "--code-icon": "rgba(70, 75, 80, 1)", "--bg-highlight-hover": "rgba(30, 58, 138, 1)", "--border-danger": "rgba(190, 18, 60, 1)", "--border-interactive": "rgba(96, 165, 250, 1)", @@ -11,95 +37,61 @@ export const colors = { "--button-danger": "rgba(159, 18, 57, 1)", "--button-danger-gradient-from": "rgba(255, 255, 255, 1)", "--button-danger-gradient-to": "rgba(255, 255, 255, 0)", - "--bg-overlay": "rgba(10, 10, 10, 0.7)", "--fg-interactive": "rgba(96, 165, 250, 1)", - "--fg-on-inverted": "rgba(10, 10, 10, 1)", - "--button-danger-pressed": "rgba(159, 18, 57, 1)", - "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)", - "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)", - "--button-neutral-pressed": "rgba(38, 38, 38, 1)", - "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 0)", - "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 1)", + "--bg-overlay": "rgba(24, 24, 26, 0.7)", + "--fg-on-inverted": "rgba(24, 24, 26, 1)", + "--button-neutral-pressed": "rgba(60, 63, 68, 1)", "--tag-red-border": "rgba(136, 19, 55, 1)", "--tag-red-bg": "rgba(76, 5, 25, 1)", - "--button-transparent-hover": "rgba(38, 38, 38, 1)", + "--button-transparent-hover": "rgba(39, 40, 45, 1)", "--tag-blue-text": "rgba(96, 165, 250, 1)", - "--button-inverted": "rgba(238, 238, 238, 1)", - "--button-inverted-gradient-from": "rgba(0, 0, 0, 0)", - "--button-inverted-gradient-to": "rgba(0, 0, 0, 1)", "--tag-orange-text": "rgba(251, 191, 36, 1)", "--tag-green-text": "rgba(52, 211, 153, 1)", - "--button-transparent": "rgba(0, 0, 0, 0)", - "--button-transparent-pressed": "rgba(48, 48, 48, 1)", - "--tag-neutral-bg": "rgba(48, 48, 48, 1)", - "--code-text-subtle": "rgba(110, 110, 110, 1)", - "--code-bg-base": "rgba(30, 30, 30, 1)", + "--tag-neutral-bg": "rgba(46, 48, 53, 1)", "--tag-orange-border": "rgba(120, 53, 15, 1)", - "--border-base": "rgba(48, 48, 48, 1)", - "--bg-component": "rgba(38, 38, 38, 1)", - "--code-text-base": "rgba(238, 238, 238, 1)", "--tag-green-border": "rgba(6, 78, 59, 1)", - "--bg-base": "rgba(23, 23, 23, 1)", - "--fg-on-color": "rgba(238, 238, 238, 1)", + "--bg-base": "rgba(27, 27, 31, 1)", "--tag-red-text": "rgba(251, 113, 133, 1)", "--tag-green-bg-hover": "rgba(6, 78, 59, 1)", "--tag-purple-bg-hover": "rgba(76, 29, 149, 1)", "--tag-red-bg-hover": "rgba(136, 19, 55, 1)", - "--border-strong": "rgba(55, 55, 55, 1)", - "--fg-subtle": "rgba(163, 163, 163, 1)", - "--fg-base": "rgba(238, 238, 238, 1)", - "--code-border": "rgba(48, 48, 48, 1)", - "--border-transparent": "rgba(238, 238, 238, 0)", + "--border-transparent": "rgba(255, 255, 255, 0)", + "--code-border": "rgba(46, 48, 53, 1)", "--tag-orange-icon": "rgba(245, 158, 11, 1)", "--tag-purple-bg": "rgba(46, 16, 100, 1)", - "--bg-base-hover": "rgba(38, 38, 38, 1)", - "--bg-subtle-hover": "rgba(23, 23, 23, 1)", "--tag-blue-bg": "rgba(23, 37, 84, 1)", - "--fg-disabled": "rgba(63, 63, 63, 1)", - "--bg-subtle": "rgba(10, 10, 10, 1)", "--tag-green-bg": "rgba(2, 44, 34, 1)", - "--bg-subtle-pressed": "rgba(38, 38, 38, 1)", "--tag-blue-border": "rgba(30, 58, 138, 1)", - "--fg-muted": "rgba(110, 110, 110, 1)", "--tag-purple-border": "rgba(76, 29, 149, 1)", "--tag-blue-bg-hover": "rgba(30, 42, 138, 1)", - "--code-bg-header": "rgba(23, 23, 23, 1)", - "--border-loud": "rgba(238, 238, 238, 1)", - "--bg-base-pressed": "rgba(48, 48, 48, 1)", "--tag-orange-bg": "rgba(69, 26, 3, 1)", - "--bg-disabled": "rgba(38, 38, 38, 1)", "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)", - "--code-icon": "rgba(74, 74, 74, 1)", - "--bg-field-hover": "rgba(48, 48, 48, 1)", - "--bg-field": "rgba(38, 38, 38, 1)", - "--button-neutral": "rgba(38, 38, 38, 1)", + "--code-bg-base": "rgba(27, 27, 31, 1)", + "--button-transparent": "rgba(255, 255, 255, 0)", + "--button-neutral": "rgba(39, 40, 45, 1)", "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)", "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)", - "--button-inverted-pressed": "rgba(238, 238, 238, 1)", - "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 1)", - "--button-inverted-pressed-gradient-to": "rgba(0, 0, 0, 0)", - "--button-neutral-hover": "rgba(38, 38, 38, 1)", - "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)", - "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)", - "--button-inverted-hover": "rgba(238, 238, 238, 1)", - "--button-inverted-hover-gradient-from": "rgba(0, 0, 0, 0)", - "--button-inverted-hover-gradient-to": "rgba(0, 0, 0, 1)", - "--button-danger-hover": "rgba(159, 18, 57, 1)", - "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)", - "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)", - "--bg-switch-off-hover": "rgba(74, 74, 74, 1)", - "--bg-switch-off": "rgba(55, 55, 55, 1)", - "--tag-neutral-bg-hover": "rgba(63, 63, 63, 1)", - "--tag-neutral-border": "rgba(63, 63, 63, 1)", + "--button-inverted-pressed": "rgba(237, 238, 240, 1)", + "--button-inverted-hover": "rgba(255, 255, 255, 1)", + "--button-danger-hover": "rgba(190, 18, 60, 1)", + "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)", "--tag-blue-icon": "rgba(59, 130, 246, 1)", "--tag-red-icon": "rgba(244, 63, 94, 1)", - "--tag-neutral-icon": "rgba(129, 129, 129, 1)", "--tag-purple-icon": "rgba(139, 92, 246, 1)", "--tag-purple-text": "rgba(167, 139, 250, 1)", - "--tag-neutral-text": "rgba(163, 163, 163, 1)", "--tag-green-icon": "rgba(16, 185, 129, 1)", + "--button-inverted": "rgba(237, 238, 240, 1)", + "--button-inverted-gradient-from": "rgba(24, 24, 26, 0)", + "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)", + "--bg-component": "rgba(39, 40, 45, 1)", + "--bg-field": "rgba(39, 40, 45, 1)", + "--bg-field-hover": "rgba(46, 48, 53, 1)", }, light: { + "--button-inverted": "rgba(3, 7, 18, 1)", + "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)", + "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)", + "--button-inverted-hover": "rgba(31, 41, 55, 1)", "--code-text-base": "rgba(249, 250, 251, 1)", "--tag-green-bg": "rgba(209, 250, 229, 1)", "--border-strong": "rgba(209, 213, 219, 1)", @@ -120,24 +112,17 @@ export const colors = { "--tag-purple-text": "rgba(109, 40, 217, 1)", "--tag-blue-bg": "rgba(219, 234, 254, 1)", "--tag-blue-icon": "rgba(37, 99, 235, 1)", - "--bg-component": "rgba(241, 243, 245, 1)", "--border-error": "rgba(225, 29, 72, 1)", - "--bg-field-hover": "rgba(243, 244, 246, 1)", - "--bg-field": "rgba(249, 250, 251, 1)", "--border-loud": "rgba(3, 7, 18, 1)", "--fg-on-inverted": "rgba(255, 255, 255, 1)", "--fg-on-color": "rgba(255, 255, 255, 1)", - "--button-danger-pressed": "rgba(225, 29, 72, 1)", - "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)", - "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)", "--button-transparent": "rgba(255, 255, 255, 0)", - "--bg-interactive": "rgba(59, 130, 246, 1)", + "--button-danger-pressed": "rgba(190, 18, 60, 1)", "--fg-interactive-hover": "rgba(37, 99, 235, 1)", "--fg-interactive": "rgba(59, 130, 246, 1)", "--fg-error": "rgba(225, 29, 72, 1)", "--border-danger": "rgba(190, 18, 60, 1)", "--border-transparent": "rgba(3, 7, 18, 0)", - "--bg-overlay": "rgba(3, 7, 18, 0.4)", "--fg-base": "rgba(3, 7, 18, 1)", "--fg-disabled": "rgba(209, 213, 219, 1)", "--bg-subtle-pressed": "rgba(229, 231, 235, 1)", @@ -163,42 +148,31 @@ export const colors = { "--tag-red-border": "rgba(254, 205, 211, 1)", "--tag-green-border": "rgba(167, 243, 208, 1)", "--tag-green-text": "rgba(4, 120, 87, 1)", - "--bg-disabled": "rgba(243, 244, 246, 1)", "--button-transparent-hover": "rgba(249, 250, 251, 1)", "--button-transparent-pressed": "rgba(243, 244, 246, 1)", - "--bg-switch-off-hover": "rgba(229, 231, 235, 1)", - "--bg-switch-off-hover-gradient-from": "rgba(3, 7, 18, 0)", - "--bg-switch-off-hover-gradient-to": "rgba(3, 7, 18, 1)", - "--bg-highlight-hover": "rgba(219, 234, 254, 1)", "--code-bg-base": "rgba(17, 24, 39, 1)", "--code-bg-header": "rgba(31, 41, 55, 1)", "--code-text-subtle": "rgba(156, 163, 175, 1)", "--code-border": "rgba(55, 65, 81, 1)", "--code-icon": "rgba(107, 114, 128, 1)", - "--button-inverted": "rgba(10, 10, 10, 1)", - "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)", - "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)", - "--button-neutral-pressed": "rgba(255, 255, 255, 1)", - "--button-neutral-pressed-gradient-from": "rgba(10, 10, 10, 1)", - "--button-neutral-pressed-gradient-to": "rgba(10, 10, 10, 0)", - "--button-inverted-pressed": "rgba(10, 10, 10, 1)", - "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 0)", - "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 1)", - "--button-inverted-hover": "rgba(10, 10, 10, 1)", - "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)", - "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)", + "--button-neutral-pressed": "rgba(243, 244, 246, 1)", + "--button-inverted-pressed": "rgba(55, 65, 81, 1)", "--button-neutral": "rgba(255, 255, 255, 1)", - "--button-neutral-gradient-from": "rgba(10, 10, 10, 0)", - "--button-neutral-gradient-to": "rgba(10, 10, 10, 1)", - "--button-neutral-hover": "rgba(255, 255, 255, 1)", - "--button-neutral-hover-gradient-from": "rgba(10, 10, 10, 0)", - "--button-neutral-hover-gradient-to": "rgba(10, 10, 10, 1)", + "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)", + "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)", "--button-danger": "rgba(225, 29, 72, 1)", "--button-danger-gradient-from": "rgba(255, 255, 255, 1)", "--button-danger-gradient-to": "rgba(255, 255, 255, 0)", + "--button-neutral-hover": "rgba(249, 250, 251, 1)", "--button-danger-hover": "rgba(225, 29, 72, 1)", - "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)", - "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)", + "--bg-component": "rgba(241, 243, 245, 1)", + "--bg-overlay": "rgba(3, 7, 18, 0.4)", "--bg-switch-off": "rgba(229, 231, 235, 1)", + "--bg-field-hover": "rgba(243, 244, 246, 1)", + "--bg-field": "rgba(249, 250, 251, 1)", + "--bg-interactive": "rgba(59, 130, 246, 1)", + "--bg-highlight-hover": "rgba(219, 234, 254, 1)", + "--bg-switch-off-hover": "rgba(209, 213, 219, 1)", + "--bg-disabled": "rgba(243, 244, 246, 1)", }, } diff --git a/www/apps/ui/src/config/docs.ts b/www/apps/ui/src/config/docs.ts index 7b71e27567..87b17f8c17 100644 --- a/www/apps/ui/src/config/docs.ts +++ b/www/apps/ui/src/config/docs.ts @@ -127,6 +127,11 @@ export const docsConfig: DocsConfig = { path: "/components/command", isPathHref: true, }, + { + title: "Command Bar", + path: "/components/command-bar", + isPathHref: true, + }, { title: "Container", path: "/components/container", @@ -137,6 +142,11 @@ export const docsConfig: DocsConfig = { path: "/components/copy", isPathHref: true, }, + { + title: "Currency Input", + path: "/components/currency-input", + isPathHref: true, + }, { title: "Date Picker", path: "/components/date-picker", @@ -162,6 +172,16 @@ export const docsConfig: DocsConfig = { path: "/components/heading", isPathHref: true, }, + { + title: "Icon Badge", + path: "/components/icon-badge", + isPathHref: true, + }, + { + title: "Icon Button", + path: "/components/icon-button", + isPathHref: true, + }, { title: "Input", path: "/components/input", @@ -177,6 +197,16 @@ export const docsConfig: DocsConfig = { path: "/components/label", isPathHref: true, }, + { + title: "Progress Accordion", + path: "/components/progress-accordion", + isPathHref: true, + }, + { + title: "Progress Tabs", + path: "/components/progress-tabs", + isPathHref: true, + }, { title: "Prompt", path: "/components/prompt", @@ -192,6 +222,11 @@ export const docsConfig: DocsConfig = { path: "/components/select", isPathHref: true, }, + { + title: "Status Badge", + path: "/components/status-badge", + isPathHref: true, + }, { title: "Switch", path: "/components/switch", @@ -202,6 +237,11 @@ export const docsConfig: DocsConfig = { path: "/components/table", isPathHref: true, }, + { + title: "Tabs", + path: "/components/tabs", + isPathHref: true, + }, { title: "Text", path: "/components/text", diff --git a/www/apps/ui/src/content/docs/components/badge.mdx b/www/apps/ui/src/content/docs/components/badge.mdx index f91f21ec5a..2e6beb88fa 100644 --- a/www/apps/ui/src/content/docs/components/badge.mdx +++ b/www/apps/ui/src/content/docs/components/badge.mdx @@ -62,10 +62,10 @@ This component is based on the `div` element and supports all props of this elem -### Rounded +### Rounded Full - + -### Icon +### Rounded Base - \ No newline at end of file + \ No newline at end of file diff --git a/www/apps/ui/src/content/docs/components/button.mdx b/www/apps/ui/src/content/docs/components/button.mdx index ba9e797d12..2bd61631ff 100644 --- a/www/apps/ui/src/content/docs/components/button.mdx +++ b/www/apps/ui/src/content/docs/components/button.mdx @@ -1,6 +1,6 @@ --- title: "Button" -description: "Displays a button component" +description: "Displays a button" component: true --- @@ -54,10 +54,6 @@ This component is based on the `button` element and supports all props of this e -### Icon Only - - - ### Loading diff --git a/www/apps/ui/src/content/docs/components/code-block.mdx b/www/apps/ui/src/content/docs/components/code-block.mdx index 7d74a3f1bf..7ea255d81b 100644 --- a/www/apps/ui/src/content/docs/components/code-block.mdx +++ b/www/apps/ui/src/content/docs/components/code-block.mdx @@ -54,8 +54,6 @@ This component is based on the `div` element and supports all props of this elem This component is based on the `div` element and supports all props of this element. - - ## Examples --- diff --git a/www/apps/ui/src/content/docs/components/command-bar.mdx b/www/apps/ui/src/content/docs/components/command-bar.mdx new file mode 100644 index 0000000000..4a5ba0df21 --- /dev/null +++ b/www/apps/ui/src/content/docs/components/command-bar.mdx @@ -0,0 +1,63 @@ +--- +title: "Command Bar" +description: "Display a command bar with a list of commands" +component: true +--- + + + +## Usage + +--- + +```tsx +import { CommandBar } from "@medusajs/ui" +``` + +```tsx + + + {count} selected + + + + + + +``` + +## API Reference + +--- + +### CommandBar + +The root component of the command bar. This component manages the state of the command bar. + + + +### CommandBar.Bar + +The bar component of the command bar. This component is used to display the commands. + +### CommandBar.Value + +The value component of the command bar. This component is used to display a value, such as the number of selected items which the commands will act on. + +### CommandBar.Seperator + +The seperator component of the command bar. This component is used to display a seperator between commands. + +### CommandBar.Command + +The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut. + + \ No newline at end of file diff --git a/www/apps/ui/src/content/docs/components/currency-input.mdx b/www/apps/ui/src/content/docs/components/currency-input.mdx new file mode 100644 index 0000000000..b03e4dc65e --- /dev/null +++ b/www/apps/ui/src/content/docs/components/currency-input.mdx @@ -0,0 +1,39 @@ +--- +title: "Currency Input" +description: "Input component for currency values" +component: true +--- + + + +## Usage + +--- + +```tsx +import { CurrencyInput } from "@medusajs/ui" +``` + +```tsx + +``` + +## API Reference + +--- + +This component is based on the `input` element and supports all props of this element. + + + +## Examples + +--- + +### Base + + + +### Small + + \ No newline at end of file diff --git a/www/apps/ui/src/content/docs/components/icon-badge.mdx b/www/apps/ui/src/content/docs/components/icon-badge.mdx new file mode 100644 index 0000000000..bf68656e55 --- /dev/null +++ b/www/apps/ui/src/content/docs/components/icon-badge.mdx @@ -0,0 +1,66 @@ +--- +title: "Icon Badge" +description: "Displays an icon badge" +component: true +--- + + + +## Usage + +--- + +```tsx +import { IconBadge } from "@medusajs/ui" +import { BuildingTax } from "@medusajs/icons" +``` + +```tsx + + + +``` + +## API Reference + +--- + +This component is based on the `span` element and supports all props of this element. + + + +## Examples + +--- + +### Grey + + + +### Red + + + +### Green + + + +### Blue + + + +### Orange + + + +### Purple + + + +### Base + + + +### Large + + \ No newline at end of file diff --git a/www/apps/ui/src/content/docs/components/icon-button.mdx b/www/apps/ui/src/content/docs/components/icon-button.mdx new file mode 100644 index 0000000000..54484fb271 --- /dev/null +++ b/www/apps/ui/src/content/docs/components/icon-button.mdx @@ -0,0 +1,62 @@ +--- +title: "Icon Button" +description: "Displays an icon button" +component: true +--- + + + +## Usage + +--- + +```tsx +import { IconBadge } from "@medusajs/ui" +import { Plus } from "@medusajs/icons" +``` + +```tsx + + + +``` + +## API Reference + +--- + +This component is based on the `button` element and supports all props of this element. + + + +## Examples + +--- + +### Primary + + + +### Transparent + + + +### Base + + + +### Large + + + +### X-Large + + + +### Disabled + + + +### Loading + + \ No newline at end of file diff --git a/www/apps/ui/src/content/docs/components/progress-accordion.mdx b/www/apps/ui/src/content/docs/components/progress-accordion.mdx new file mode 100644 index 0000000000..d144f13966 --- /dev/null +++ b/www/apps/ui/src/content/docs/components/progress-accordion.mdx @@ -0,0 +1,60 @@ +--- +title: "Progress Accordion" +description: "A set of expandable content panels, specifically designed for implementing multi-step tasks" +component: true +--- + + + +## Usage + +--- + +```tsx +import { ProgressAccordion } from "@medusajs/ui" +``` + +```tsx + + + + General + + + {/* Content */} + + + + + Shipping + + + {/* Content */} + + + +``` + +## API Reference + +--- + +This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves. + +### ProgressAccordion.Header + +--- + + + +## Examples + +--- + +### Single + + + +### Multiple + + \ No newline at end of file diff --git a/www/apps/ui/src/content/docs/components/progress-tabs.mdx b/www/apps/ui/src/content/docs/components/progress-tabs.mdx new file mode 100644 index 0000000000..7ecf235b23 --- /dev/null +++ b/www/apps/ui/src/content/docs/components/progress-tabs.mdx @@ -0,0 +1,50 @@ +--- +title: "Progress Tabs" +description: "A set of layered content panels, known as tabs, specifically designed for implementing multi-step tasks" +component: true +--- + + + +## Usage + +--- + +```tsx +import { ProgressTabs } from "@medusajs/ui" +``` + +```tsx + + + + General + + + Shipping + + + Payment + + + + {/* Content */} + + + {/* Content */} + + + {/* Content */} + + +``` + +## API Reference + +--- + +This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves. + +### ProgressAccordion.Header + + \ No newline at end of file diff --git a/www/apps/ui/src/content/docs/components/status-badge.mdx b/www/apps/ui/src/content/docs/components/status-badge.mdx new file mode 100644 index 0000000000..f618c1a8e9 --- /dev/null +++ b/www/apps/ui/src/content/docs/components/status-badge.mdx @@ -0,0 +1,55 @@ +--- +title: "Status Badge" +description: "Displays a status badge" +component: true +--- + + + +## Usage + +--- + +```tsx +import { StatusBadge } from "@medusajs/ui" +``` + +```tsx +Active +``` + +## API Reference + +--- + +This component is based on the `span` element and supports all props of this element. + + + +## Examples + +--- + +### Grey + + + +### Red + + + +### Green + + + +### Blue + + + +### Orange + + + +### Purple + + diff --git a/www/apps/ui/src/content/docs/components/tabs.mdx b/www/apps/ui/src/content/docs/components/tabs.mdx new file mode 100644 index 0000000000..ef9780d00a --- /dev/null +++ b/www/apps/ui/src/content/docs/components/tabs.mdx @@ -0,0 +1,34 @@ +--- +title: "Tabs" +description: "A set of layered content panels, known as tabs, that display content one panel at a time" +component: true +--- + + + +## Usage + +--- + +```tsx +import { Tabs } from "@medusajs/ui" +``` + +```tsx + + + Tab 1 + Tab 2 + Tab 3 + + Panel 1 + Panel 2 + Panel 3 + +``` + +## API Reference + +--- + +This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves \ No newline at end of file diff --git a/www/apps/ui/src/examples/badge-icon.tsx b/www/apps/ui/src/examples/badge-icon.tsx deleted file mode 100644 index dcb263a550..0000000000 --- a/www/apps/ui/src/examples/badge-icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { BuildingTax } from "@medusajs/icons" -import { Badge } from "@medusajs/ui" - -export default function BadgeIcon() { - return ( - - - - ) -} diff --git a/www/apps/ui/src/examples/badge-rounded-base.tsx b/www/apps/ui/src/examples/badge-rounded-base.tsx new file mode 100644 index 0000000000..4a7565bed8 --- /dev/null +++ b/www/apps/ui/src/examples/badge-rounded-base.tsx @@ -0,0 +1,5 @@ +import { Badge } from "@medusajs/ui" + +export default function BadgeRoundedBase() { + return Badge +} diff --git a/www/apps/ui/src/examples/badge-rounded-full.tsx b/www/apps/ui/src/examples/badge-rounded-full.tsx new file mode 100644 index 0000000000..cadb8d5efd --- /dev/null +++ b/www/apps/ui/src/examples/badge-rounded-full.tsx @@ -0,0 +1,5 @@ +import { Badge } from "@medusajs/ui" + +export default function BadgeRoundedFull() { + return Badge +} diff --git a/www/apps/ui/src/examples/badge-rounded.tsx b/www/apps/ui/src/examples/badge-rounded.tsx deleted file mode 100644 index 10e71b1b49..0000000000 --- a/www/apps/ui/src/examples/badge-rounded.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Badge } from "@medusajs/ui" - -export default function BadgeRounded() { - return Badge -} diff --git a/www/apps/ui/src/examples/button-icon-only.tsx b/www/apps/ui/src/examples/button-icon-only.tsx deleted file mode 100644 index e3beb0f400..0000000000 --- a/www/apps/ui/src/examples/button-icon-only.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { PlusMini } from "@medusajs/icons" -import { Button } from "@medusajs/ui" - -export default function ButtonIconOnly() { - return ( - - ) -} diff --git a/www/apps/ui/src/examples/code-block-demo.tsx b/www/apps/ui/src/examples/code-block-demo.tsx index c6392bed3e..59369b70ed 100644 --- a/www/apps/ui/src/examples/code-block-demo.tsx +++ b/www/apps/ui/src/examples/code-block-demo.tsx @@ -5,6 +5,7 @@ const snippets = [ label: "cURL", language: "markdown", code: `curl -H 'x-publishable-key: YOUR_API_KEY' 'http://localhost:9000/store/products/PRODUCT_ID'`, + hideLineNumbers: true, }, { label: "Medusa JS Client", diff --git a/www/apps/ui/src/examples/code-block-no-lines.tsx b/www/apps/ui/src/examples/code-block-no-lines.tsx index 065e3ec634..02d9e144e6 100644 --- a/www/apps/ui/src/examples/code-block-no-lines.tsx +++ b/www/apps/ui/src/examples/code-block-no-lines.tsx @@ -5,6 +5,7 @@ const snippets = [ label: "Medusa React", language: "tsx", code: `import { useProduct } from "medusa-react"\n\nconst { product } = useProduct("PRODUCT_ID")\nconsole.log(product.id)`, + hideLineNumbers: true, }, ] @@ -17,7 +18,7 @@ export default function CodeBlockNoLines() { - +
) diff --git a/www/apps/ui/src/examples/command-bar-demo.tsx b/www/apps/ui/src/examples/command-bar-demo.tsx new file mode 100644 index 0000000000..dc38d0db78 --- /dev/null +++ b/www/apps/ui/src/examples/command-bar-demo.tsx @@ -0,0 +1,41 @@ +import { Checkbox, CommandBar, Label } from "@medusajs/ui" +import * as React from "react" + +export default function CommandBarDemo() { + const [selected, setSelected] = React.useState(false) + + return ( +
+
+ + setSelected(checked === true ? true : false) + } + /> + +
+ + + 1 selected + + { + alert("Delete") + }} + label="Delete" + shortcut="d" + /> + + { + alert("Edit") + }} + label="Edit" + shortcut="e" + /> + + +
+ ) +} diff --git a/www/apps/ui/src/examples/copy-as-child.tsx b/www/apps/ui/src/examples/copy-as-child.tsx index b6fb47525b..48cc3aa7bd 100644 --- a/www/apps/ui/src/examples/copy-as-child.tsx +++ b/www/apps/ui/src/examples/copy-as-child.tsx @@ -1,14 +1,14 @@ import { PlusMini } from "@medusajs/icons" -import { Button, Copy, Text } from "@medusajs/ui" +import { Copy, IconButton, Text } from "@medusajs/ui" export default function CopyAsChild() { return (
Copy command - +
) diff --git a/www/apps/ui/src/examples/currency-input-base.tsx b/www/apps/ui/src/examples/currency-input-base.tsx new file mode 100644 index 0000000000..0f0c62b985 --- /dev/null +++ b/www/apps/ui/src/examples/currency-input-base.tsx @@ -0,0 +1,9 @@ +import { CurrencyInput } from "@medusajs/ui" + +export default function CurrencyInputBase() { + return ( +
+ +
+ ) +} diff --git a/www/apps/ui/src/examples/currency-input-demo.tsx b/www/apps/ui/src/examples/currency-input-demo.tsx new file mode 100644 index 0000000000..7c830244d6 --- /dev/null +++ b/www/apps/ui/src/examples/currency-input-demo.tsx @@ -0,0 +1,9 @@ +import { CurrencyInput } from "@medusajs/ui" + +export default function CurrencyInputDemo() { + return ( +
+ +
+ ) +} diff --git a/www/apps/ui/src/examples/currency-input-small.tsx b/www/apps/ui/src/examples/currency-input-small.tsx new file mode 100644 index 0000000000..ea49159907 --- /dev/null +++ b/www/apps/ui/src/examples/currency-input-small.tsx @@ -0,0 +1,9 @@ +import { CurrencyInput } from "@medusajs/ui" + +export default function CurrencyInputSmall() { + return ( +
+ +
+ ) +} diff --git a/www/apps/ui/src/examples/dropdown-menu-demo.tsx b/www/apps/ui/src/examples/dropdown-menu-demo.tsx index 090bc3ee66..883e7982c8 100644 --- a/www/apps/ui/src/examples/dropdown-menu-demo.tsx +++ b/www/apps/ui/src/examples/dropdown-menu-demo.tsx @@ -1,13 +1,13 @@ import { EllipsisHorizontal, PencilSquare, Plus, Trash } from "@medusajs/icons" -import { Button, DropdownMenu } from "@medusajs/ui" +import { DropdownMenu, IconButton } from "@medusajs/ui" export default function DropdownMenuDemo() { return ( - + diff --git a/www/apps/ui/src/examples/dropdown-menu-sorting.tsx b/www/apps/ui/src/examples/dropdown-menu-sorting.tsx index bc7e41a8c6..cfdd688476 100644 --- a/www/apps/ui/src/examples/dropdown-menu-sorting.tsx +++ b/www/apps/ui/src/examples/dropdown-menu-sorting.tsx @@ -1,5 +1,5 @@ import { EllipsisHorizontal } from "@medusajs/icons" -import { Button, DropdownMenu } from "@medusajs/ui" +import { DropdownMenu, IconButton } from "@medusajs/ui" import React from "react" type SortingState = "asc" | "desc" | "alpha" | "alpha-reverse" | "none" @@ -11,9 +11,9 @@ export default function DropdownMenuSorting() {
- + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-badge-blue.tsx b/www/apps/ui/src/examples/icon-badge-blue.tsx new file mode 100644 index 0000000000..cbdb7a396b --- /dev/null +++ b/www/apps/ui/src/examples/icon-badge-blue.tsx @@ -0,0 +1,10 @@ +import { BuildingTax } from "@medusajs/icons" +import { IconBadge } from "@medusajs/ui" + +export default function IconBadgeBlue() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-badge-demo.tsx b/www/apps/ui/src/examples/icon-badge-demo.tsx new file mode 100644 index 0000000000..510bc23824 --- /dev/null +++ b/www/apps/ui/src/examples/icon-badge-demo.tsx @@ -0,0 +1,10 @@ +import { BuildingTax } from "@medusajs/icons" +import { IconBadge } from "@medusajs/ui" + +export default function IconBadgeDemo() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-badge-green.tsx b/www/apps/ui/src/examples/icon-badge-green.tsx new file mode 100644 index 0000000000..e9b2b6c63b --- /dev/null +++ b/www/apps/ui/src/examples/icon-badge-green.tsx @@ -0,0 +1,10 @@ +import { BuildingTax } from "@medusajs/icons" +import { IconBadge } from "@medusajs/ui" + +export default function IconBadgeGreen() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-badge-grey.tsx b/www/apps/ui/src/examples/icon-badge-grey.tsx new file mode 100644 index 0000000000..0420f80933 --- /dev/null +++ b/www/apps/ui/src/examples/icon-badge-grey.tsx @@ -0,0 +1,10 @@ +import { BuildingTax } from "@medusajs/icons" +import { IconBadge } from "@medusajs/ui" + +export default function IconBadgeGrey() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-badge-large.tsx b/www/apps/ui/src/examples/icon-badge-large.tsx new file mode 100644 index 0000000000..ea41f2f459 --- /dev/null +++ b/www/apps/ui/src/examples/icon-badge-large.tsx @@ -0,0 +1,10 @@ +import { BuildingTax } from "@medusajs/icons" +import { IconBadge } from "@medusajs/ui" + +export default function IconBadgeLarge() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-badge-orange.tsx b/www/apps/ui/src/examples/icon-badge-orange.tsx new file mode 100644 index 0000000000..adc8f55ebf --- /dev/null +++ b/www/apps/ui/src/examples/icon-badge-orange.tsx @@ -0,0 +1,10 @@ +import { BuildingTax } from "@medusajs/icons" +import { IconBadge } from "@medusajs/ui" + +export default function IconBadgeOrange() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-badge-purple.tsx b/www/apps/ui/src/examples/icon-badge-purple.tsx new file mode 100644 index 0000000000..bba897defd --- /dev/null +++ b/www/apps/ui/src/examples/icon-badge-purple.tsx @@ -0,0 +1,10 @@ +import { BuildingTax } from "@medusajs/icons" +import { IconBadge } from "@medusajs/ui" + +export default function IconBadgePurple() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-badge-red.tsx b/www/apps/ui/src/examples/icon-badge-red.tsx new file mode 100644 index 0000000000..84350f51c0 --- /dev/null +++ b/www/apps/ui/src/examples/icon-badge-red.tsx @@ -0,0 +1,10 @@ +import { BuildingTax } from "@medusajs/icons" +import { IconBadge } from "@medusajs/ui" + +export default function IconBadgeRed() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-button-base.tsx b/www/apps/ui/src/examples/icon-button-base.tsx new file mode 100644 index 0000000000..c2d01fad15 --- /dev/null +++ b/www/apps/ui/src/examples/icon-button-base.tsx @@ -0,0 +1,10 @@ +import { PlusMini } from "@medusajs/icons" +import { IconButton } from "@medusajs/ui" + +export default function IconButtonBase() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-button-demo.tsx b/www/apps/ui/src/examples/icon-button-demo.tsx new file mode 100644 index 0000000000..527fa5761b --- /dev/null +++ b/www/apps/ui/src/examples/icon-button-demo.tsx @@ -0,0 +1,10 @@ +import { PlusMini } from "@medusajs/icons" +import { IconButton } from "@medusajs/ui" + +export default function IconButtonDemo() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-button-disabled.tsx b/www/apps/ui/src/examples/icon-button-disabled.tsx new file mode 100644 index 0000000000..40a5010ca0 --- /dev/null +++ b/www/apps/ui/src/examples/icon-button-disabled.tsx @@ -0,0 +1,10 @@ +import { PlusMini } from "@medusajs/icons" +import { IconButton } from "@medusajs/ui" + +export default function IconButtonDisabled() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-button-large.tsx b/www/apps/ui/src/examples/icon-button-large.tsx new file mode 100644 index 0000000000..3e7d758b34 --- /dev/null +++ b/www/apps/ui/src/examples/icon-button-large.tsx @@ -0,0 +1,10 @@ +import { PlusMini } from "@medusajs/icons" +import { IconButton } from "@medusajs/ui" + +export default function IconButtonLarge() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-button-loading.tsx b/www/apps/ui/src/examples/icon-button-loading.tsx new file mode 100644 index 0000000000..80e0274c68 --- /dev/null +++ b/www/apps/ui/src/examples/icon-button-loading.tsx @@ -0,0 +1,10 @@ +import { PlusMini } from "@medusajs/icons" +import { IconButton } from "@medusajs/ui" + +export default function IconButtonLoading() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-button-primary.tsx b/www/apps/ui/src/examples/icon-button-primary.tsx new file mode 100644 index 0000000000..ed76150900 --- /dev/null +++ b/www/apps/ui/src/examples/icon-button-primary.tsx @@ -0,0 +1,10 @@ +import { PlusMini } from "@medusajs/icons" +import { IconButton } from "@medusajs/ui" + +export default function IconButtonPrimary() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-button-transparent.tsx b/www/apps/ui/src/examples/icon-button-transparent.tsx new file mode 100644 index 0000000000..6a770f0601 --- /dev/null +++ b/www/apps/ui/src/examples/icon-button-transparent.tsx @@ -0,0 +1,10 @@ +import { PlusMini } from "@medusajs/icons" +import { IconButton } from "@medusajs/ui" + +export default function IconButtonTransparent() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/icon-button-xlarge.tsx b/www/apps/ui/src/examples/icon-button-xlarge.tsx new file mode 100644 index 0000000000..8bb23f15ac --- /dev/null +++ b/www/apps/ui/src/examples/icon-button-xlarge.tsx @@ -0,0 +1,10 @@ +import { PlusMini } from "@medusajs/icons" +import { IconButton } from "@medusajs/ui" + +export default function IconButtonXLarge() { + return ( + + + + ) +} diff --git a/www/apps/ui/src/examples/progress-accordion-demo.tsx b/www/apps/ui/src/examples/progress-accordion-demo.tsx new file mode 100644 index 0000000000..635eb374a5 --- /dev/null +++ b/www/apps/ui/src/examples/progress-accordion-demo.tsx @@ -0,0 +1,36 @@ +import { ProgressAccordion, Text } from "@medusajs/ui" + +export default function ProgressAccordionDemo() { + return ( +
+ + + General + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + ornare, tortor nec commodo ultrices, diam leo porttitor eros, + eget ultricies mauris nisl nec nisl. Donec quis magna euismod, + lacinia ipsum id, varius velit. + +
+ + + + Shipping + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + ornare, tortor nec commodo ultrices, diam leo porttitor eros, + eget ultricies mauris nisl nec nisl. Donec quis magna euismod, + lacinia ipsum id, varius velit. + +
+ + + +
+ ) +} diff --git a/www/apps/ui/src/examples/progress-accordion-multiple.tsx b/www/apps/ui/src/examples/progress-accordion-multiple.tsx new file mode 100644 index 0000000000..e73e4102c6 --- /dev/null +++ b/www/apps/ui/src/examples/progress-accordion-multiple.tsx @@ -0,0 +1,36 @@ +import { ProgressAccordion, Text } from "@medusajs/ui" + +export default function ProgressAccordionSingle() { + return ( +
+ + + General + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + ornare, tortor nec commodo ultrices, diam leo porttitor eros, + eget ultricies mauris nisl nec nisl. Donec quis magna euismod, + lacinia ipsum id, varius velit. + +
+ + + + Shipping + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + ornare, tortor nec commodo ultrices, diam leo porttitor eros, + eget ultricies mauris nisl nec nisl. Donec quis magna euismod, + lacinia ipsum id, varius velit. + +
+ + + +
+ ) +} diff --git a/www/apps/ui/src/examples/progress-accordion-single.tsx b/www/apps/ui/src/examples/progress-accordion-single.tsx new file mode 100644 index 0000000000..c17c0e39de --- /dev/null +++ b/www/apps/ui/src/examples/progress-accordion-single.tsx @@ -0,0 +1,36 @@ +import { ProgressAccordion, Text } from "@medusajs/ui" + +export default function ProgressAccordionSingle() { + return ( +
+ + + General + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + ornare, tortor nec commodo ultrices, diam leo porttitor eros, + eget ultricies mauris nisl nec nisl. Donec quis magna euismod, + lacinia ipsum id, varius velit. + +
+ + + + Shipping + +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + ornare, tortor nec commodo ultrices, diam leo porttitor eros, + eget ultricies mauris nisl nec nisl. Donec quis magna euismod, + lacinia ipsum id, varius velit. + +
+ + + +
+ ) +} diff --git a/www/apps/ui/src/examples/progress-tabs-demo.tsx b/www/apps/ui/src/examples/progress-tabs-demo.tsx new file mode 100644 index 0000000000..b19443471a --- /dev/null +++ b/www/apps/ui/src/examples/progress-tabs-demo.tsx @@ -0,0 +1,53 @@ +import { ProgressTabs, Text } from "@medusajs/ui" + +export default function ProgressTabsDemo() { + return ( +
+ +
+ + General + + Shipping + + Payment + +
+
+ + + At ACME, we're dedicated to providing you with an exceptional + shopping experience. Our wide selection of products caters to your + every need, from fashion to electronics and beyond. We take pride + in our commitment to quality, customer satisfaction, and timely + delivery. Our friendly customer support team is here to assist you + with any inquiries or concerns you may have. Thank you for + choosing ACME as your trusted online shopping destination. + + + + + Shipping is a crucial part of our service, designed to ensure your + products reach you quickly and securely. Our dedicated team works + tirelessly to process orders, carefully package items, and + coordinate with reliable carriers to deliver your purchases to + your doorstep. We take pride in our efficient shipping process, + guaranteeing your satisfaction with every delivery. + + + + + Our payment process is designed to make your shopping experience + smooth and secure. We offer a variety of payment options to + accommodate your preferences, from credit and debit cards to + online payment gateways. Rest assured that your financial + information is protected through advanced encryption methods. + Shopping with us means you can shop with confidence, knowing your + payments are safe and hassle-free. + + +
+ +
+ ) +} diff --git a/www/apps/ui/src/examples/status-badge-blue.tsx b/www/apps/ui/src/examples/status-badge-blue.tsx new file mode 100644 index 0000000000..78ab458521 --- /dev/null +++ b/www/apps/ui/src/examples/status-badge-blue.tsx @@ -0,0 +1,5 @@ +import { StatusBadge } from "@medusajs/ui" + +export default function StatusBadgeBlue() { + return Status +} diff --git a/www/apps/ui/src/examples/status-badge-demo.tsx b/www/apps/ui/src/examples/status-badge-demo.tsx new file mode 100644 index 0000000000..2482d933c9 --- /dev/null +++ b/www/apps/ui/src/examples/status-badge-demo.tsx @@ -0,0 +1,5 @@ +import { StatusBadge } from "@medusajs/ui" + +export default function StatusBadgeDemo() { + return Status +} diff --git a/www/apps/ui/src/examples/status-badge-green.tsx b/www/apps/ui/src/examples/status-badge-green.tsx new file mode 100644 index 0000000000..ff63050576 --- /dev/null +++ b/www/apps/ui/src/examples/status-badge-green.tsx @@ -0,0 +1,5 @@ +import { StatusBadge } from "@medusajs/ui" + +export default function StatusBadgeGreen() { + return Status +} diff --git a/www/apps/ui/src/examples/status-badge-grey.tsx b/www/apps/ui/src/examples/status-badge-grey.tsx new file mode 100644 index 0000000000..dbe7a1f39d --- /dev/null +++ b/www/apps/ui/src/examples/status-badge-grey.tsx @@ -0,0 +1,5 @@ +import { StatusBadge } from "@medusajs/ui" + +export default function StatusBadgeGrey() { + return Status +} diff --git a/www/apps/ui/src/examples/status-badge-orange.tsx b/www/apps/ui/src/examples/status-badge-orange.tsx new file mode 100644 index 0000000000..7a4473e684 --- /dev/null +++ b/www/apps/ui/src/examples/status-badge-orange.tsx @@ -0,0 +1,5 @@ +import { StatusBadge } from "@medusajs/ui" + +export default function StatusBadgeOrange() { + return Status +} diff --git a/www/apps/ui/src/examples/status-badge-purple.tsx b/www/apps/ui/src/examples/status-badge-purple.tsx new file mode 100644 index 0000000000..5f3b2f56b7 --- /dev/null +++ b/www/apps/ui/src/examples/status-badge-purple.tsx @@ -0,0 +1,5 @@ +import { StatusBadge } from "@medusajs/ui" + +export default function StatusBadgePurple() { + return Status +} diff --git a/www/apps/ui/src/examples/status-badge-red.tsx b/www/apps/ui/src/examples/status-badge-red.tsx new file mode 100644 index 0000000000..3113da5924 --- /dev/null +++ b/www/apps/ui/src/examples/status-badge-red.tsx @@ -0,0 +1,5 @@ +import { StatusBadge } from "@medusajs/ui" + +export default function StatusBadgeRed() { + return Status +} diff --git a/www/apps/ui/src/examples/tabs-demo.tsx b/www/apps/ui/src/examples/tabs-demo.tsx new file mode 100644 index 0000000000..2d774f0ab7 --- /dev/null +++ b/www/apps/ui/src/examples/tabs-demo.tsx @@ -0,0 +1,49 @@ +import { Tabs, Text } from "@medusajs/ui" + +export default function TabsDemo() { + return ( +
+ + + General + Shipping + Payment + +
+ + + At ACME, we're dedicated to providing you with an exceptional + shopping experience. Our wide selection of products caters to your + every need, from fashion to electronics and beyond. We take pride + in our commitment to quality, customer satisfaction, and timely + delivery. Our friendly customer support team is here to assist you + with any inquiries or concerns you may have. Thank you for + choosing ACME as your trusted online shopping destination. + + + + + Shipping is a crucial part of our service, designed to ensure your + products reach you quickly and securely. Our dedicated team works + tirelessly to process orders, carefully package items, and + coordinate with reliable carriers to deliver your purchases to + your doorstep. We take pride in our efficient shipping process, + guaranteeing your satisfaction with every delivery. + + + + + Our payment process is designed to make your shopping experience + smooth and secure. We offer a variety of payment options to + accommodate your preferences, from credit and debit cards to + online payment gateways. Rest assured that your financial + information is protected through advanced encryption methods. + Shopping with us means you can shop with confidence, knowing your + payments are safe and hassle-free. + + +
+ +
+ ) +} diff --git a/www/apps/ui/src/props/badge.tsx b/www/apps/ui/src/props/badge.tsx index 95e31412cb..3302c5945b 100644 --- a/www/apps/ui/src/props/badge.tsx +++ b/www/apps/ui/src/props/badge.tsx @@ -1,7 +1,7 @@ import { PropTable } from "@/components/props-table" import { PropDataMap } from "@/types/props" -const badgeProps: PropDataMap = [ +const iconBadgeProps: PropDataMap = [ { prop: "color", type: { @@ -19,17 +19,17 @@ const badgeProps: PropDataMap = [ defaultValue: "base", }, { - prop: "type", + prop: "rounded", type: { type: "enum", - values: ["default", "rounded", "icon"], + values: ["base", "rounded"], }, - defaultValue: "default", + defaultValue: "base", }, ] const Props = () => { - return + return } export default Props diff --git a/www/apps/ui/src/props/button.tsx b/www/apps/ui/src/props/button.tsx index 04bdef72d7..0e7fbd1a44 100644 --- a/www/apps/ui/src/props/button.tsx +++ b/www/apps/ui/src/props/button.tsx @@ -18,14 +18,6 @@ const buttonProps: PropDataMap = [ }, defaultValue: "base", }, - { - prop: "format", - type: { - type: "enum", - values: ["default", "icon"], - }, - defaultValue: "default", - }, { prop: "isLoading", type: "boolean", diff --git a/www/apps/ui/src/props/code-block.tsx b/www/apps/ui/src/props/code-block.tsx index 4c6f9bab70..090216e5f8 100644 --- a/www/apps/ui/src/props/code-block.tsx +++ b/www/apps/ui/src/props/code-block.tsx @@ -7,7 +7,8 @@ const codeBlockProps: PropDataMap = [ type: { type: "object", name: "CodeSnippet[]", - shape: "{\n label: string\n language: string\n code: string\n}[]", + shape: + "{\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n}[]", }, }, ] diff --git a/www/apps/ui/src/props/command-bar-command.tsx b/www/apps/ui/src/props/command-bar-command.tsx new file mode 100644 index 0000000000..50adfd911a --- /dev/null +++ b/www/apps/ui/src/props/command-bar-command.tsx @@ -0,0 +1,23 @@ +import { PropTable } from "@/components/props-table" +import { PropDataMap } from "@/types/props" + +const commandBarCommandProps: PropDataMap = [ + { + prop: "action", + type: "function", + }, + { + prop: "label", + type: "string", + }, + { + prop: "shortcut", + type: "string", + }, +] + +const Props = () => { + return +} + +export default Props diff --git a/www/apps/ui/src/props/code-block-body.tsx b/www/apps/ui/src/props/command-bar.tsx similarity index 62% rename from www/apps/ui/src/props/code-block-body.tsx rename to www/apps/ui/src/props/command-bar.tsx index 51a713afe8..717de15cd7 100644 --- a/www/apps/ui/src/props/code-block-body.tsx +++ b/www/apps/ui/src/props/command-bar.tsx @@ -1,16 +1,16 @@ import { PropTable } from "@/components/props-table" import { PropDataMap } from "@/types/props" -const codeBlockBodyProps: PropDataMap = [ +const commandBarProps: PropDataMap = [ { - prop: "hideLineNumbers", + prop: "open", type: "boolean", defaultValue: false, }, ] const Props = () => { - return + return } export default Props diff --git a/www/apps/ui/src/props/currency-input.tsx b/www/apps/ui/src/props/currency-input.tsx new file mode 100644 index 0000000000..4c80030cb8 --- /dev/null +++ b/www/apps/ui/src/props/currency-input.tsx @@ -0,0 +1,19 @@ +import { PropTable } from "@/components/props-table" +import { PropDataMap } from "@/types/props" + +const currencyInputProps: PropDataMap = [ + { + prop: "symbol", + type: "string", + }, + { + prop: "code", + type: "string", + }, +] + +const Props = () => { + return +} + +export default Props diff --git a/www/apps/ui/src/props/icon-badge.tsx b/www/apps/ui/src/props/icon-badge.tsx new file mode 100644 index 0000000000..4293aa34ec --- /dev/null +++ b/www/apps/ui/src/props/icon-badge.tsx @@ -0,0 +1,27 @@ +import { PropTable } from "@/components/props-table" +import { PropDataMap } from "@/types/props" + +const badgeProps: PropDataMap = [ + { + prop: "color", + type: { + type: "enum", + values: ["green", "red", "blue", "orange", "grey", "purple"], + }, + defaultValue: "grey", + }, + { + prop: "size", + type: { + type: "enum", + values: ["base", "large"], + }, + defaultValue: "base", + }, +] + +const Props = () => { + return +} + +export default Props diff --git a/www/apps/ui/src/props/icon-button.tsx b/www/apps/ui/src/props/icon-button.tsx new file mode 100644 index 0000000000..64792dbea2 --- /dev/null +++ b/www/apps/ui/src/props/icon-button.tsx @@ -0,0 +1,32 @@ +import { PropTable } from "@/components/props-table" +import { PropDataMap } from "@/types/props" + +const iconButtonProps: PropDataMap = [ + { + prop: "variant", + type: { + type: "enum", + values: ["primary", "transparent"], + }, + defaultValue: "primary", + }, + { + prop: "size", + type: { + type: "enum", + values: ["base", "large", "xlarge"], + }, + defaultValue: "base", + }, + { + prop: "isLoading", + type: "boolean", + defaultValue: false, + }, +] + +const Props = () => { + return +} + +export default Props diff --git a/www/apps/ui/src/props/progress-accordion-header.tsx b/www/apps/ui/src/props/progress-accordion-header.tsx new file mode 100644 index 0000000000..20cc32a093 --- /dev/null +++ b/www/apps/ui/src/props/progress-accordion-header.tsx @@ -0,0 +1,19 @@ +import { PropTable } from "@/components/props-table" +import { PropDataMap } from "@/types/props" + +const progressAccordionHeaderProps: PropDataMap = [ + { + prop: "status", + type: { + type: "enum", + values: ["not-started", "in-progress", "completed"], + }, + defaultValue: "not-started", + }, +] + +const Props = () => { + return +} + +export default Props diff --git a/www/apps/ui/src/props/progress-tabs-trigger.tsx b/www/apps/ui/src/props/progress-tabs-trigger.tsx new file mode 100644 index 0000000000..0b6e97e176 --- /dev/null +++ b/www/apps/ui/src/props/progress-tabs-trigger.tsx @@ -0,0 +1,19 @@ +import { PropTable } from "@/components/props-table" +import { PropDataMap } from "@/types/props" + +const progressTabsTriggerProps: PropDataMap = [ + { + prop: "status", + type: { + type: "enum", + values: ["not-started", "in-progress", "completed"], + }, + defaultValue: "not-started", + }, +] + +const Props = () => { + return +} + +export default Props diff --git a/www/apps/ui/src/props/status-badge.tsx b/www/apps/ui/src/props/status-badge.tsx new file mode 100644 index 0000000000..473b85f30e --- /dev/null +++ b/www/apps/ui/src/props/status-badge.tsx @@ -0,0 +1,19 @@ +import { PropTable } from "@/components/props-table" +import { PropDataMap } from "@/types/props" + +const statusBadgeProps: PropDataMap = [ + { + prop: "color", + type: { + type: "enum", + values: ["green", "red", "blue", "orange", "grey", "purple"], + }, + defaultValue: "grey", + }, +] + +const Props = () => { + return +} + +export default Props diff --git a/www/apps/ui/src/registries/example-registry.tsx b/www/apps/ui/src/registries/example-registry.tsx index 37f9ff7538..cbbaaf28f8 100644 --- a/www/apps/ui/src/registries/example-registry.tsx +++ b/www/apps/ui/src/registries/example-registry.tsx @@ -57,15 +57,60 @@ export const ExampleRegistry: Record = { component: React.lazy(async () => import("@/examples/badge-large")), file: "src/examples/badge-large.tsx", }, - "badge-rounded": { + "badge-rounded-full": { name: "badge-rounded", - component: React.lazy(async () => import("@/examples/badge-rounded")), - file: "src/examples/badge-rounded.tsx", + component: React.lazy(async () => import("@/examples/badge-rounded-full")), + file: "src/examples/badge-rounded-full.tsx", }, - "badge-icon": { - name: "badge-icon", - component: React.lazy(async () => import("@/examples/badge-icon")), - file: "src/examples/badge-icon.tsx", + "badge-rounded-base": { + name: "badge-rounded", + component: React.lazy(async () => import("@/examples/badge-rounded-base")), + file: "src/examples/badge-rounded-base.tsx", + }, + "icon-badge-demo": { + name: "icon-badge-demo", + component: React.lazy(async () => import("@/examples/icon-badge-demo")), + file: "src/examples/icon-badge-demo.tsx", + }, + "icon-badge-blue": { + name: "icon-badge-blue", + component: React.lazy(async () => import("@/examples/icon-badge-blue")), + file: "src/examples/icon-badge-blue.tsx", + }, + "icon-badge-green": { + name: "icon-badge-green", + component: React.lazy(async () => import("@/examples/icon-badge-green")), + file: "src/examples/icon-badge-green.tsx", + }, + "icon-badge-red": { + name: "icon-badge-red", + component: React.lazy(async () => import("@/examples/icon-badge-red")), + file: "src/examples/icon-badge-red.tsx", + }, + "icon-badge-orange": { + name: "icon-badge-orange", + component: React.lazy(async () => import("@/examples/icon-badge-orange")), + file: "src/examples/icon-badge-orange.tsx", + }, + "icon-badge-purple": { + name: "icon-badge-purple", + component: React.lazy(async () => import("@/examples/icon-badge-purple")), + file: "src/examples/icon-badge-purple.tsx", + }, + "icon-badge-grey": { + name: "icon-badge-grey", + component: React.lazy(async () => import("@/examples/icon-badge-grey")), + file: "src/examples/icon-badge-grey.tsx", + }, + "icon-badge-base": { + name: "icon-badge-base", + component: React.lazy(async () => import("@/examples/icon-badge-base")), + file: "src/examples/icon-badge-base.tsx", + }, + "icon-badge-large": { + name: "icon-badge-small", + component: React.lazy(async () => import("@/examples/icon-badge-large")), + file: "src/examples/icon-badge-large.tsx", }, "button-demo": { name: "button-demo", @@ -370,10 +415,137 @@ export const ExampleRegistry: Record = { component: React.lazy(async () => import("@/examples/button-with-icon")), file: "src/examples/button-with-icon.tsx", }, - "button-icon-only": { - name: "button-icon-only", - component: React.lazy(async () => import("@/examples/button-icon-only")), - file: "src/examples/button-icon-only.tsx", + "icon-button-demo": { + name: "icon-button-demo", + component: React.lazy(async () => import("@/examples/icon-button-demo")), + file: "src/examples/icon-button-demo.tsx", + }, + "icon-button-primary": { + name: "icon-button-primary", + component: React.lazy(async () => import("@/examples/icon-button-primary")), + file: "src/examples/icon-button-primary.tsx", + }, + "icon-button-transparent": { + name: "icon-button-transparent", + component: React.lazy( + async () => import("@/examples/icon-button-transparent") + ), + file: "src/examples/icon-button-transparent.tsx", + }, + "icon-button-disabled": { + name: "icon-button-disabled", + component: React.lazy( + async () => import("@/examples/icon-button-disabled") + ), + file: "src/examples/icon-button-disabled.tsx", + }, + "icon-button-loading": { + name: "icon-button-with-text", + component: React.lazy(async () => import("@/examples/icon-button-loading")), + file: "src/examples/icon-button-loading.tsx", + }, + "icon-button-base": { + name: "icon-button-base", + component: React.lazy(async () => import("@/examples/icon-button-base")), + file: "src/examples/icon-button-base.tsx", + }, + "icon-button-large": { + name: "icon-button-large", + component: React.lazy(async () => import("@/examples/icon-button-large")), + file: "src/examples/icon-button-large.tsx", + }, + "icon-button-xlarge": { + name: "icon-button-xlarge", + component: React.lazy(async () => import("@/examples/icon-button-xlarge")), + file: "src/examples/icon-button-xlarge.tsx", + }, + "currency-input-demo": { + name: "currency-input-demo", + component: React.lazy(async () => import("@/examples/currency-input-demo")), + file: "src/examples/currency-input-demo.tsx", + }, + "currency-input-small": { + name: "currency-input-small", + component: React.lazy( + async () => import("@/examples/currency-input-small") + ), + file: "src/examples/currency-input-small.tsx", + }, + "status-badge-demo": { + name: "status-badge-demo", + component: React.lazy(async () => import("@/examples/status-badge-demo")), + file: "src/examples/status-badge-demo.tsx", + }, + "status-badge-blue": { + name: "status-badge-blue", + component: React.lazy(async () => import("@/examples/status-badge-blue")), + file: "src/examples/status-badge-blue.tsx", + }, + "status-badge-green": { + name: "status-badge-green", + component: React.lazy(async () => import("@/examples/status-badge-green")), + file: "src/examples/status-badge-green.tsx", + }, + "status-badge-red": { + name: "status-badge-red", + component: React.lazy(async () => import("@/examples/status-badge-red")), + file: "src/examples/status-badge-red.tsx", + }, + "status-badge-orange": { + name: "status-badge-orange", + component: React.lazy(async () => import("@/examples/status-badge-orange")), + file: "src/examples/status-badge-orange.tsx", + }, + "status-badge-purple": { + name: "status-badge-purple", + component: React.lazy(async () => import("@/examples/status-badge-purple")), + file: "src/examples/status-badge-purple.tsx", + }, + "status-badge-grey": { + name: "status-badge-grey", + component: React.lazy(async () => import("@/examples/status-badge-grey")), + file: "src/examples/status-badge-grey.tsx", + }, + "command-bar-demo": { + name: "command-bar-demo", + component: React.lazy(async () => import("@/examples/command-bar-demo")), + file: "src/examples/command-bar-demo.tsx", + }, + "progress-accordion-demo": { + name: "progress-accordion-demo", + component: React.lazy( + async () => import("@/examples/progress-accordion-demo") + ), + file: "src/examples/progress-accordion-demo.tsx", + }, + "progress-accordion-single": { + name: "progress-accordion-single", + component: React.lazy( + async () => import("@/examples/progress-accordion-single") + ), + file: "src/examples/progress-accordion-single.tsx", + }, + "progress-accordion-multiple": { + name: "progress-accordion-multiple", + component: React.lazy( + async () => import("@/examples/progress-accordion-multiple") + ), + file: "src/examples/progress-accordion-multiple.tsx", + }, + "progress-tabs-demo": { + name: "progress-tabs-demo", + component: React.lazy(async () => import("@/examples/progress-tabs-demo")), + file: "src/examples/progress-tabs-demo.tsx", + }, + "tabs-demo": { + name: "tabs-demo", + component: React.lazy(async () => import("@/examples/tabs-demo")), + file: "src/examples/tabs-demo.tsx", + }, + "currency-input-base": { + name: "currency-input-base", + component: React.lazy(async () => import("@/examples/currency-input-base")), + file: "src/examples/currency-input-base.tsx", }, "button-loading": { name: "button-loading", diff --git a/www/apps/ui/src/registries/prop-registry.tsx b/www/apps/ui/src/registries/prop-registry.tsx index 1ee9ebba0f..679c606d2b 100644 --- a/www/apps/ui/src/registries/prop-registry.tsx +++ b/www/apps/ui/src/registries/prop-registry.tsx @@ -20,15 +20,30 @@ export const PropRegistry: Record = { "code-block-header": { table: React.lazy(async () => import("../props/code-block-header")), }, - "code-block-body": { - table: React.lazy(async () => import("../props/code-block-body")), + "currency-input": { + table: React.lazy(async () => import("../props/currency-input")), }, copy: { table: React.lazy(async () => import("../props/copy")), }, + "command-bar": { + table: React.lazy(async () => import("../props/command-bar")), + }, + "command-bar-command": { + table: React.lazy(async () => import("../props/command-bar-command")), + }, "date-picker": { table: React.lazy(async () => import("../props/date-picker")), }, + "icon-badge": { + table: React.lazy(async () => import("../props/icon-badge")), + }, + "icon-button": { + table: React.lazy(async () => import("../props/icon-button")), + }, + "status-badge": { + table: React.lazy(async () => import("../props/status-badge")), + }, "focus-modal": { table: React.lazy(async () => import("../props/focus-modal")), }, @@ -68,4 +83,10 @@ export const PropRegistry: Record = { tooltip: { table: React.lazy(async () => import("../props/tooltip")), }, + "progress-accordion-header": { + table: React.lazy(async () => import("../props/progress-accordion-header")), + }, + "progress-tabs-trigger": { + table: React.lazy(async () => import("../props/progress-tabs-trigger")), + }, } diff --git a/www/packages/docs-ui/package.json b/www/packages/docs-ui/package.json index a0bd24a13b..48d7ca1e30 100644 --- a/www/packages/docs-ui/package.json +++ b/www/packages/docs-ui/package.json @@ -56,8 +56,8 @@ "react-dom": ">=17" }, "dependencies": { - "@medusajs/icons": "^1.0.0", - "@medusajs/ui": "^1.0.0", + "@medusajs/icons": "latest", + "@medusajs/ui": "latest", "@octokit/request": "^8.1.1", "@segment/analytics-next": "^1.55.0", "algoliasearch": "^4.20.0", diff --git a/www/packages/tailwind/package.json b/www/packages/tailwind/package.json index 9f31cf2770..894654105c 100644 --- a/www/packages/tailwind/package.json +++ b/www/packages/tailwind/package.json @@ -15,7 +15,7 @@ "postcss.config.js" ], "dependencies": { - "@medusajs/ui-preset": "^1.0.0", + "@medusajs/ui-preset": "latest", "tailwindcss-animate": "^1.0.7" }, "peerDependencies": { diff --git a/www/yarn.lock b/www/yarn.lock index d9bc5b3f1f..1518766083 100644 --- a/www/yarn.lock +++ b/www/yarn.lock @@ -1733,7 +1733,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7": version: 7.22.15 resolution: "@babel/runtime@npm:7.22.15" dependencies: @@ -3266,7 +3266,7 @@ __metadata: languageName: node linkType: hard -"@medusajs/icons@npm:*, @medusajs/icons@npm:^1.0.0, @medusajs/icons@npm:latest": +"@medusajs/icons@npm:*, @medusajs/icons@npm:^1.0.0": version: 1.0.0 resolution: "@medusajs/icons@npm:1.0.0" peerDependencies: @@ -3275,23 +3275,33 @@ __metadata: languageName: node linkType: hard -"@medusajs/ui-preset@npm:^1.0.0, @medusajs/ui-preset@npm:latest": - version: 1.0.0 - resolution: "@medusajs/ui-preset@npm:1.0.0" +"@medusajs/icons@npm:latest": + version: 1.0.1 + resolution: "@medusajs/icons@npm:1.0.1" + peerDependencies: + react: ^16.x || ^17.x || ^18.x + checksum: 7b800035c4553a336f03c0e2ba454c83fc1701badef0629b9b9a5745a26b0ac75ad0bcbd2b674fb294fe3fca47ee8f74760a26ffe84a094409703eca25f24b12 + languageName: node + linkType: hard + +"@medusajs/ui-preset@npm:latest": + version: 1.0.1 + resolution: "@medusajs/ui-preset@npm:1.0.1" dependencies: "@tailwindcss/forms": ^0.5.3 tailwindcss-animate: ^1.0.6 peerDependencies: tailwindcss: ">=3.0.0" - checksum: 4365d5e4a726250aa5299df8ce9e1ffdc9f864586b506d8552ad1561ac2a2d66d8692dd761702728904d7af884aae9d85de9dcfe94413161264821a8c7648223 + checksum: 80c4cb6ba5b3bd70c95cf0dad16f05a33636b7640b95aca96871bb4e1fcb9957c9254fe69ca16e19109a83da5cd2eb29afa6cc5798209117e6970934a20ce96a languageName: node linkType: hard -"@medusajs/ui@npm:^1.0.0, @medusajs/ui@npm:latest": - version: 1.0.0 - resolution: "@medusajs/ui@npm:1.0.0" +"@medusajs/ui@npm:latest": + version: 2.0.0 + resolution: "@medusajs/ui@npm:2.0.0" dependencies: "@medusajs/icons": "*" + "@radix-ui/react-accordion": ^1.1.2 "@radix-ui/react-alert-dialog": ^1.0.4 "@radix-ui/react-avatar": ^1.0.3 "@radix-ui/react-checkbox": ^1.0.4 @@ -3299,11 +3309,13 @@ __metadata: "@radix-ui/react-dropdown-menu": ^2.0.5 "@radix-ui/react-label": ^2.0.2 "@radix-ui/react-popover": ^1.0.6 + "@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-slot": ^1.0.2 "@radix-ui/react-switch": ^1.0.3 + "@radix-ui/react-tabs": ^1.0.4 "@radix-ui/react-toast": ^1.1.4 "@radix-ui/react-tooltip": ^1.0.6 "@react-aria/datepicker": ^3.5.0 @@ -3312,15 +3324,14 @@ __metadata: clsx: ^1.2.1 copy-to-clipboard: ^3.3.3 date-fns: ^2.30.0 - downshift: ^8.1.0 - lodash: ^4.17.21 prism-react-renderer: ^2.0.6 + react-currency-input-field: ^3.6.11 react-day-picker: ^8.8.0 tailwind-merge: ^1.13.2 peerDependencies: react: ^18.0.0 react-dom: ^18.0.0 - checksum: 6b957037cda3cc10ed7dad3491440c4fda38289f4b64b7cc275aea8c96e9ede80ee78417d597fd93a1f0db9abdc7ac0e1f1f2e820c4b71538fa4640b78891171 + checksum: 1243cb33cc12fe4aaa840a89be06d5db4f01d95f9ba0de44ea7bdd1621835f080a2e67fd572e55bce5751941ba3fcdb287139df6427560efc2c5b3f4d5ec9d57 languageName: node linkType: hard @@ -4002,6 +4013,34 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-accordion@npm:^1.1.2": + version: 1.1.2 + resolution: "@radix-ui/react-accordion@npm:1.1.2" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-collapsible": 1.0.3 + "@radix-ui/react-collection": 1.0.3 + "@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-id": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-controllable-state": 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: 54fe3642306d62f68ac4d534c6bec1998d00d441663b16119fe267cb085e48761acf3c02b9466245d42b8ab419632a573d35d79d3a5d328906bde121dd1816db + languageName: node + linkType: hard + "@radix-ui/react-alert-dialog@npm:^1.0.4": version: 1.0.4 resolution: "@radix-ui/react-alert-dialog@npm:1.0.4" @@ -4097,6 +4136,33 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-collapsible@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-collapsible@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-id": 1.0.1 + "@radix-ui/react-presence": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-controllable-state": 1.0.1 + "@radix-ui/react-use-layout-effect": 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: 7bc3e601e3fa84991bdf46ea1bdb725760942f8facadf42f05808abc7a1399c6ab90a00c70699367026afbd8afba0254ff9634f9d1e05b24ae452d9e0524d328 + languageName: node + linkType: hard + "@radix-ui/react-collection@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-collection@npm:1.0.3" @@ -4441,6 +4507,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-portal@npm:^1.0.3": + version: 1.0.4 + resolution: "@radix-ui/react-portal@npm:1.0.4" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-primitive": 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: fed32f8148b833fe852fb5e2f859979ffdf2fb9a9ef46583b9b52915d764ad36ba5c958a64e61d23395628ccc09d678229ee94cd112941e8fe2575021f820c29 + languageName: node + linkType: hard + "@radix-ui/react-presence@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-presence@npm:1.0.1" @@ -9262,13 +9348,6 @@ __metadata: languageName: node linkType: hard -"compute-scroll-into-view@npm:^3.0.3": - version: 3.0.3 - resolution: "compute-scroll-into-view@npm:3.0.3" - checksum: 43feebe676552ea061308a17d25b7dea498255b6777368bf950adf6cb504b7b4f6eca3a8c989564527b8bcdaafab93f346760d15f73a6536cd0467286873355c - languageName: node - linkType: hard - "concat-map@npm:0.0.1": version: 0.0.1 resolution: "concat-map@npm:0.0.1" @@ -10099,8 +10178,8 @@ __metadata: version: 0.0.0-use.local resolution: "docs-ui@workspace:packages/docs-ui" dependencies: - "@medusajs/icons": ^1.0.0 - "@medusajs/ui": ^1.0.0 + "@medusajs/icons": latest + "@medusajs/ui": latest "@octokit/request": ^8.1.1 "@segment/analytics-next": ^1.55.0 "@types/react": ^17.0.1 @@ -10328,21 +10407,6 @@ __metadata: languageName: node linkType: hard -"downshift@npm:^8.1.0": - version: 8.2.0 - resolution: "downshift@npm:8.2.0" - dependencies: - "@babel/runtime": ^7.22.15 - compute-scroll-into-view: ^3.0.3 - prop-types: ^15.8.1 - react-is: ^18.2.0 - tslib: ^2.6.2 - peerDependencies: - react: ">=16.12.0" - checksum: 61abd17c68908b3ee5dcf889141776d806fd056f3cccbdd9f261acced9b010550acf1b10572facf58ffc1750e61e0164a7e7f1b2a081bd160b0bff58ea450a7c - languageName: node - linkType: hard - "dset@npm:^3.1.1, dset@npm:^3.1.2": version: 3.1.2 resolution: "dset@npm:3.1.2" @@ -17239,6 +17303,15 @@ __metadata: languageName: node linkType: hard +"react-currency-input-field@npm:^3.6.11": + version: 3.6.11 + resolution: "react-currency-input-field@npm:3.6.11" + peerDependencies: + react: ^16.9.0 || ^17.0.0 || ^18.0.0 + checksum: d1a15dc14f572806917e452c77a2b69d00647676be578304624c98fe66e557a9f397a3ece72b997b2a8db827db236a5801f26b86605ef334398175c856e46d50 + languageName: node + linkType: hard + "react-day-picker@npm:^8.8.0": version: 8.8.2 resolution: "react-day-picker@npm:8.8.2" @@ -17382,13 +17455,6 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^18.2.0": - version: 18.2.0 - resolution: "react-is@npm:18.2.0" - checksum: 6eb5e4b28028c23e2bfcf73371e72cd4162e4ac7ab445ddae2afe24e347a37d6dc22fae6e1748632cd43c6d4f9b8f86dcf26bf9275e1874f436d129952528ae0 - languageName: node - linkType: hard - "react-json-view@npm:^1.21.3": version: 1.21.3 resolution: "react-json-view@npm:1.21.3" @@ -19149,7 +19215,7 @@ __metadata: version: 0.0.0-use.local resolution: "tailwind@workspace:packages/tailwind" dependencies: - "@medusajs/ui-preset": ^1.0.0 + "@medusajs/ui-preset": latest eslint-config-docs: "*" tailwindcss-animate: ^1.0.7 peerDependencies: @@ -19559,7 +19625,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1, tslib@npm:^2.6.2": +"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1": version: 2.6.2 resolution: "tslib@npm:2.6.2" checksum: e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb