From 869dc751a041abc70b2eb9acb36e147d7fd4fd62 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 12 Feb 2024 19:46:51 +0100 Subject: [PATCH] chore(docs): Updated UI Reference (#6347) * chore(docs): Generated UI Reference * fixed props typing + added new alert page * updated ui dependencies --------- Co-authored-by: olivermrbl Co-authored-by: Shahed Nasser --- .changeset/brave-rules-vanish.md | 5 ++ .changeset/orange-phones-happen.md | 2 + .../ui/src/components/alert/alert.tsx | 2 +- www/apps/api-reference/package.json | 2 +- www/apps/docs/package.json | 2 +- www/apps/ui/package.json | 6 +- www/apps/ui/src/config/docs.tsx | 5 ++ .../ui/src/content/docs/components/alert.mdx | 45 ++++++++++++ www/apps/ui/src/examples/alert-demo.tsx | 5 ++ .../ui/src/examples/alert-dismissable.tsx | 5 ++ www/apps/ui/src/examples/alert-error.tsx | 5 ++ www/apps/ui/src/examples/alert-success.tsx | 5 ++ www/apps/ui/src/examples/alert-warning.tsx | 5 ++ .../ui/src/registries/example-registry.tsx | 25 +++++++ www/apps/ui/src/specs/Alert/Alert.json | 48 +++++++++++++ www/apps/ui/src/specs/Button/Button.json | 6 +- www/apps/ui/src/specs/Heading/Heading.json | 10 +-- .../ui/src/specs/IconButton/IconButton.json | 10 ++- www/packages/docs-ui/package.json | 4 +- www/packages/tailwind/package.json | 2 +- www/yarn.lock | 71 +++++++++---------- 21 files changed, 213 insertions(+), 57 deletions(-) create mode 100644 .changeset/brave-rules-vanish.md create mode 100644 .changeset/orange-phones-happen.md create mode 100644 www/apps/ui/src/content/docs/components/alert.mdx create mode 100644 www/apps/ui/src/examples/alert-demo.tsx create mode 100644 www/apps/ui/src/examples/alert-dismissable.tsx create mode 100644 www/apps/ui/src/examples/alert-error.tsx create mode 100644 www/apps/ui/src/examples/alert-success.tsx create mode 100644 www/apps/ui/src/examples/alert-warning.tsx create mode 100644 www/apps/ui/src/specs/Alert/Alert.json diff --git a/.changeset/brave-rules-vanish.md b/.changeset/brave-rules-vanish.md new file mode 100644 index 0000000000..84943121f4 --- /dev/null +++ b/.changeset/brave-rules-vanish.md @@ -0,0 +1,5 @@ +--- +"@medusajs/ui": patch +--- + +fix(ui): explicitly specify props type diff --git a/.changeset/orange-phones-happen.md b/.changeset/orange-phones-happen.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/orange-phones-happen.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/design-system/ui/src/components/alert/alert.tsx b/packages/design-system/ui/src/components/alert/alert.tsx index 450a111682..132368d4b9 100644 --- a/packages/design-system/ui/src/components/alert/alert.tsx +++ b/packages/design-system/ui/src/components/alert/alert.tsx @@ -34,7 +34,7 @@ export const Alert = React.forwardRef( className, children, ...props - }, + }: AlertProps, ref ) => { const [dismissed, setDismissed] = React.useState(false) diff --git a/www/apps/api-reference/package.json b/www/apps/api-reference/package.json index 1fb6dc027f..93c9840ad4 100644 --- a/www/apps/api-reference/package.json +++ b/www/apps/api-reference/package.json @@ -14,7 +14,7 @@ "dependencies": { "@mdx-js/loader": "^2.3.0", "@mdx-js/react": "^2.3.0", - "@medusajs/icons": "^1.0.0", + "@medusajs/icons": "^1.2.0", "@next/mdx": "13.4.19", "@readme/openapi-parser": "^2.5.0", "@types/mapbox__rehype-prism": "^0.8.0", diff --git a/www/apps/docs/package.json b/www/apps/docs/package.json index 7d2e41a238..6e08ea07e4 100644 --- a/www/apps/docs/package.json +++ b/www/apps/docs/package.json @@ -28,7 +28,7 @@ "@docusaurus/theme-mermaid": "^3.1.0", "@mdx-js/mdx": "3.0.0", "@mdx-js/react": "3", - "@medusajs/icons": "^1.0.0", + "@medusajs/icons": "^1.2.0", "@svgr/webpack": "6.2.1", "@swc/core": "^1.3.102", "autoprefixer": "^10.4.14", diff --git a/www/apps/ui/package.json b/www/apps/ui/package.json index 479f728024..207dda6c6a 100644 --- a/www/apps/ui/package.json +++ b/www/apps/ui/package.json @@ -14,9 +14,9 @@ }, "dependencies": { "@faker-js/faker": "^8.0.2", - "@medusajs/icons": "latest", - "@medusajs/ui": "^2.3.0", - "@medusajs/ui-preset": "latest", + "@medusajs/icons": "^1.2.0", + "@medusajs/ui": "^2.4.1", + "@medusajs/ui-preset": "^1.1.2", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-scroll-area": "^1.0.4", "@radix-ui/react-tabs": "^1.0.4", diff --git a/www/apps/ui/src/config/docs.tsx b/www/apps/ui/src/config/docs.tsx index 715579d7f0..46c5a6124a 100644 --- a/www/apps/ui/src/config/docs.tsx +++ b/www/apps/ui/src/config/docs.tsx @@ -103,6 +103,11 @@ export const docsConfig: DocsConfig = { { title: "Components", children: [ + { + title: "Alert", + path: "/components/alert", + isPathHref: true, + }, { title: "Avatar", path: "/components/avatar", diff --git a/www/apps/ui/src/content/docs/components/alert.mdx b/www/apps/ui/src/content/docs/components/alert.mdx new file mode 100644 index 0000000000..70d3122f23 --- /dev/null +++ b/www/apps/ui/src/content/docs/components/alert.mdx @@ -0,0 +1,45 @@ +--- +title: "Avatar" +description: "An image element with a fallback for representing the user." +component: true +--- + + + +## Usage + +--- + +```tsx +import { Alert } from "@medusajs/ui" +``` + +```tsx +Here's a message +``` + +## API Reference + +--- + + + +## Examples + +--- + +### Success Alert + + + +### Warning Alert + + + +### Error Alert + + + +### Dismissable Alert + + \ No newline at end of file diff --git a/www/apps/ui/src/examples/alert-demo.tsx b/www/apps/ui/src/examples/alert-demo.tsx new file mode 100644 index 0000000000..b123196c6f --- /dev/null +++ b/www/apps/ui/src/examples/alert-demo.tsx @@ -0,0 +1,5 @@ +import { Alert } from "@medusajs/ui" + +export default function AlertDemo() { + return You are viewing Medusa docs. +} diff --git a/www/apps/ui/src/examples/alert-dismissable.tsx b/www/apps/ui/src/examples/alert-dismissable.tsx new file mode 100644 index 0000000000..b7b306a69e --- /dev/null +++ b/www/apps/ui/src/examples/alert-dismissable.tsx @@ -0,0 +1,5 @@ +import { Alert } from "@medusajs/ui" + +export default function AlertDismissable() { + return You are viewing Medusa docs. +} diff --git a/www/apps/ui/src/examples/alert-error.tsx b/www/apps/ui/src/examples/alert-error.tsx new file mode 100644 index 0000000000..6f5299a95a --- /dev/null +++ b/www/apps/ui/src/examples/alert-error.tsx @@ -0,0 +1,5 @@ +import { Alert } from "@medusajs/ui" + +export default function AlertError() { + return An error occured while updating data. +} diff --git a/www/apps/ui/src/examples/alert-success.tsx b/www/apps/ui/src/examples/alert-success.tsx new file mode 100644 index 0000000000..73fa29a3ad --- /dev/null +++ b/www/apps/ui/src/examples/alert-success.tsx @@ -0,0 +1,5 @@ +import { Alert } from "@medusajs/ui" + +export default function AlertSuccess() { + return Data updated successfully! +} diff --git a/www/apps/ui/src/examples/alert-warning.tsx b/www/apps/ui/src/examples/alert-warning.tsx new file mode 100644 index 0000000000..63e6a437d8 --- /dev/null +++ b/www/apps/ui/src/examples/alert-warning.tsx @@ -0,0 +1,5 @@ +import { Alert } from "@medusajs/ui" + +export default function AlertWarning() { + return Be careful! +} diff --git a/www/apps/ui/src/registries/example-registry.tsx b/www/apps/ui/src/registries/example-registry.tsx index 747923ea73..45d98011a9 100644 --- a/www/apps/ui/src/registries/example-registry.tsx +++ b/www/apps/ui/src/registries/example-registry.tsx @@ -7,6 +7,31 @@ type ExampleType = { } export const ExampleRegistry: Record = { + "alert-demo": { + name: "alert-demo", + component: React.lazy(async () => import("@/examples/alert-demo")), + file: "src/examples/alert-demo.tsx", + }, + "alert-dismissable": { + name: "alert-dismissable", + component: React.lazy(async () => import("@/examples/alert-dismissable")), + file: "src/examples/alert-dismissable.tsx", + }, + "alert-error": { + name: "alert-error", + component: React.lazy(async () => import("@/examples/alert-error")), + file: "src/examples/alert-error.tsx", + }, + "alert-success": { + name: "alert-success", + component: React.lazy(async () => import("@/examples/alert-success")), + file: "src/examples/alert-demo.tsx", + }, + "alert-warning": { + name: "alert-warning", + component: React.lazy(async () => import("@/examples/alert-warning")), + file: "src/examples/alert-demo.tsx", + }, "avatar-demo": { name: "avatar-demo", component: React.lazy(async () => import("@/examples/avatar-demo")), diff --git a/www/apps/ui/src/specs/Alert/Alert.json b/www/apps/ui/src/specs/Alert/Alert.json new file mode 100644 index 0000000000..014e4078ea --- /dev/null +++ b/www/apps/ui/src/specs/Alert/Alert.json @@ -0,0 +1,48 @@ +{ + "description": "This component is based on the div element and supports all of its props", + "methods": [], + "displayName": "Alert", + "props": { + "variant": { + "required": false, + "tsType": { + "name": "union", + "raw": "\"error\" | \"success\" | \"warning\" | \"info\"", + "elements": [ + { + "name": "literal", + "value": "\"error\"" + }, + { + "name": "literal", + "value": "\"success\"" + }, + { + "name": "literal", + "value": "\"warning\"" + }, + { + "name": "literal", + "value": "\"info\"" + } + ] + }, + "description": "The variant of the alert", + "defaultValue": { + "value": "\"info\"", + "computed": false + } + }, + "dismissible": { + "required": false, + "tsType": { + "name": "boolean" + }, + "description": "Whether the alert is dismissible", + "defaultValue": { + "value": "false", + "computed": false + } + } + } +} \ No newline at end of file diff --git a/www/apps/ui/src/specs/Button/Button.json b/www/apps/ui/src/specs/Button/Button.json index 9a8fcd8953..711731f585 100644 --- a/www/apps/ui/src/specs/Button/Button.json +++ b/www/apps/ui/src/specs/Button/Button.json @@ -33,7 +33,7 @@ "description": "The button's style.", "tsType": { "name": "union", - "raw": "\"primary\" \\| \"secondary\" \\| \"transparent\" \\| \"danger\"", + "raw": "\"primary\" \\| \"transparent\" \\| \"secondary\" \\| \"danger\"", "elements": [ { "name": "literal", @@ -41,11 +41,11 @@ }, { "name": "literal", - "value": "\"secondary\"" + "value": "\"transparent\"" }, { "name": "literal", - "value": "\"transparent\"" + "value": "\"secondary\"" }, { "name": "literal", diff --git a/www/apps/ui/src/specs/Heading/Heading.json b/www/apps/ui/src/specs/Heading/Heading.json index acab9a1787..0526017155 100644 --- a/www/apps/ui/src/specs/Heading/Heading.json +++ b/www/apps/ui/src/specs/Heading/Heading.json @@ -11,8 +11,12 @@ "description": "The heading level which specifies which heading element is used.", "tsType": { "name": "union", - "raw": "\"h2\" \\| \"h3\" \\| \"h1\"", + "raw": "\"h1\" \\| \"h2\" \\| \"h3\"", "elements": [ + { + "name": "literal", + "value": "\"h1\"" + }, { "name": "literal", "value": "\"h2\"" @@ -20,10 +24,6 @@ { "name": "literal", "value": "\"h3\"" - }, - { - "name": "literal", - "value": "\"h1\"" } ] }, diff --git a/www/apps/ui/src/specs/IconButton/IconButton.json b/www/apps/ui/src/specs/IconButton/IconButton.json index ebdcd41e37..9bf7a669ad 100644 --- a/www/apps/ui/src/specs/IconButton/IconButton.json +++ b/www/apps/ui/src/specs/IconButton/IconButton.json @@ -55,8 +55,16 @@ "description": "The button's size.", "tsType": { "name": "union", - "raw": "\"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"", + "raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"", "elements": [ + { + "name": "literal", + "value": "\"2xsmall\"" + }, + { + "name": "literal", + "value": "\"xsmall\"" + }, { "name": "literal", "value": "\"small\"" diff --git a/www/packages/docs-ui/package.json b/www/packages/docs-ui/package.json index 9334d9822e..98969d895a 100644 --- a/www/packages/docs-ui/package.json +++ b/www/packages/docs-ui/package.json @@ -57,8 +57,8 @@ "react-dom": "^18.2.0" }, "dependencies": { - "@medusajs/icons": "latest", - "@medusajs/ui": "^2.3.0", + "@medusajs/icons": "^1.2.0", + "@medusajs/ui": "^2.4.1", "@octokit/request": "^8.1.1", "@react-hook/resize-observer": "^1.2.6", "@segment/analytics-next": "^1.55.0", diff --git a/www/packages/tailwind/package.json b/www/packages/tailwind/package.json index 894654105c..50c27f0363 100644 --- a/www/packages/tailwind/package.json +++ b/www/packages/tailwind/package.json @@ -15,7 +15,7 @@ "postcss.config.js" ], "dependencies": { - "@medusajs/ui-preset": "latest", + "@medusajs/ui-preset": "^1.1.2", "tailwindcss-animate": "^1.0.7" }, "peerDependencies": { diff --git a/www/yarn.lock b/www/yarn.lock index fd1f03d956..f9db66e2ed 100644 --- a/www/yarn.lock +++ b/www/yarn.lock @@ -2680,6 +2680,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.23.7": + version: 7.23.9 + resolution: "@babel/runtime@npm:7.23.9" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: e71205fdd7082b2656512cc98e647d9ea7e222e4fe5c36e9e5adc026446fcc3ba7b3cdff8b0b694a0b78bb85db83e7b1e3d4c56ef90726682b74f13249cf952d + languageName: node + linkType: hard + "@babel/template@npm:^7.22.15, @babel/template@npm:^7.22.5": version: 7.22.15 resolution: "@babel/template@npm:7.22.15" @@ -4319,15 +4328,6 @@ __metadata: languageName: node linkType: hard -"@medusajs/icons@npm:^1.0.0": - version: 1.0.0 - resolution: "@medusajs/icons@npm:1.0.0" - peerDependencies: - react: ^16.x || ^17.x || ^18.x - checksum: 3bf8d754a9e55460e6b6ab593c470ed1f0018a0b98d7fd53dd651359788d9f293dab3cc32719a2042834e71b252fd1d76dd32b60c076fe11f98999f6bea149de - languageName: node - linkType: hard - "@medusajs/icons@npm:^1.2.0": version: 1.2.0 resolution: "@medusajs/icons@npm:1.2.0" @@ -4337,30 +4337,21 @@ __metadata: languageName: node linkType: hard -"@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" +"@medusajs/ui-preset@npm:^1.1.2": + version: 1.1.2 + resolution: "@medusajs/ui-preset@npm:1.1.2" dependencies: "@tailwindcss/forms": ^0.5.3 tailwindcss-animate: ^1.0.6 peerDependencies: tailwindcss: ">=3.0.0" - checksum: 80c4cb6ba5b3bd70c95cf0dad16f05a33636b7640b95aca96871bb4e1fcb9957c9254fe69ca16e19109a83da5cd2eb29afa6cc5798209117e6970934a20ce96a + checksum: 63b525eee5d5a6a7d2d9596f6cc9015c221a3a55c83f524511d35eeb6916261baeae472e8748725480016a38e379f6a1a34e373d4ca824bbabdb151605086f94 languageName: node linkType: hard -"@medusajs/ui@npm:^2.3.0": - version: 2.3.0 - resolution: "@medusajs/ui@npm:2.3.0" +"@medusajs/ui@npm:^2.4.1": + version: 2.4.1 + resolution: "@medusajs/ui@npm:2.4.1" dependencies: "@medusajs/icons": ^1.2.0 "@radix-ui/react-accordion": ^1.1.2 @@ -4389,11 +4380,11 @@ __metadata: prism-react-renderer: ^2.0.6 react-currency-input-field: ^3.6.11 react-day-picker: ^8.8.0 - tailwind-merge: ^1.13.2 + tailwind-merge: ^2.2.1 peerDependencies: react: ^18.0.0 react-dom: ^18.0.0 - checksum: a76976812186eaf4600817b83c8303e05ddb272556a2062508b33ed262e2d1d03c91477d35381db4094c8b26ae3828ed0dd95fdc2c0e00bd617e11ff1f2e9e6f + checksum: 1d044632044b9a3e06ed86d574ad67ccefe797a23b839f32f9d15a2563c4c40fc74b0faf1826bef4aa256b34c30dcae8dc1f11d456de2bfc506162d92fe512d5 languageName: node linkType: hard @@ -9577,7 +9568,7 @@ __metadata: dependencies: "@mdx-js/loader": ^2.3.0 "@mdx-js/react": ^2.3.0 - "@medusajs/icons": ^1.0.0 + "@medusajs/icons": ^1.2.0 "@next/bundle-analyzer": ^13.4.19 "@next/mdx": 13.4.19 "@readme/openapi-parser": ^2.5.0 @@ -12099,8 +12090,8 @@ __metadata: version: 0.0.0-use.local resolution: "docs-ui@workspace:packages/docs-ui" dependencies: - "@medusajs/icons": latest - "@medusajs/ui": ^2.3.0 + "@medusajs/icons": ^1.2.0 + "@medusajs/ui": ^2.4.1 "@octokit/request": ^8.1.1 "@react-hook/resize-observer": ^1.2.6 "@segment/analytics-next": ^1.55.0 @@ -12153,7 +12144,7 @@ __metadata: "@docusaurus/types": ^3.1.0 "@mdx-js/mdx": 3.0.0 "@mdx-js/react": 3 - "@medusajs/icons": ^1.0.0 + "@medusajs/icons": ^1.2.0 "@svgr/webpack": 6.2.1 "@swc/core": ^1.3.102 "@types/react": ^18.2.0 @@ -22028,10 +22019,12 @@ __metadata: languageName: node linkType: hard -"tailwind-merge@npm:^1.13.2": - version: 1.14.0 - resolution: "tailwind-merge@npm:1.14.0" - checksum: a66f5ab1a2bb2b0f5a40a031867a6bc900de98eb3339b2a51759351221527a3d600eecb6cb5a038830aa89548eba72bb63aa3856cb9f31c9a3918b42eb3df350 +"tailwind-merge@npm:^2.2.1": + version: 2.2.1 + resolution: "tailwind-merge@npm:2.2.1" + dependencies: + "@babel/runtime": ^7.23.7 + checksum: 14ab965ec897e9377484b7593f7a700dde09b8035b762ad42652622a3ed1f202b203f48c0f235c0b1b38e9390470d94458f6f9010d33a5a18d71b15f38b986a6 languageName: node linkType: hard @@ -22039,7 +22032,7 @@ __metadata: version: 0.0.0-use.local resolution: "tailwind@workspace:packages/tailwind" dependencies: - "@medusajs/ui-preset": latest + "@medusajs/ui-preset": ^1.1.2 eslint-config-docs: "*" tailwindcss-animate: ^1.0.7 peerDependencies: @@ -22742,9 +22735,9 @@ __metadata: resolution: "ui@workspace:apps/ui" dependencies: "@faker-js/faker": ^8.0.2 - "@medusajs/icons": latest - "@medusajs/ui": ^2.3.0 - "@medusajs/ui-preset": latest + "@medusajs/icons": ^1.2.0 + "@medusajs/ui": ^2.4.1 + "@medusajs/ui-preset": ^1.1.2 "@radix-ui/react-dialog": ^1.0.4 "@radix-ui/react-scroll-area": ^1.0.4 "@radix-ui/react-tabs": ^1.0.4