From e4ce2f4e07a0c02103c17e16d3a12dbba6053b0e Mon Sep 17 00:00:00 2001 From: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> Date: Tue, 7 Nov 2023 22:17:44 +0100 Subject: [PATCH] chore(ui,icons,ui-preset,toolbox): Move design system packages to monorepo (#5470) --- .changeset/old-otters-run.md | 5 + .eslintrc.js | 55 + .gitignore | 3 +- ...iance-authority-npm-0.6.1-22a468e86e.patch | 71 + CODEOWNERS | 1 + package.json | 5 +- packages/admin-ui/package.json | 6 +- packages/design-system/icons/.env.template | 2 + packages/design-system/icons/CHANGELOG.md | 79 + packages/design-system/icons/LICENSE | 21 + packages/design-system/icons/README.md | 48 + packages/design-system/icons/package.json | 64 + .../design-system/icons/rollup.config.mjs | 103 + packages/design-system/icons/setup-test.ts | 14 + .../__tests__/academic-cap-solid.spec.tsx | 17 + .../__tests__/academic-cap.spec.tsx | 17 + .../components/__tests__/adjustments.spec.tsx | 17 + .../src/components/__tests__/apple.spec.tsx | 17 + .../components/__tests__/archive-box.spec.tsx | 17 + .../__tests__/arrow-down-circle.spec.tsx | 17 + .../__tests__/arrow-down-left-mini.spec.tsx | 17 + .../__tests__/arrow-down-left.spec.tsx | 17 + .../__tests__/arrow-down-mini.spec.tsx | 17 + .../__tests__/arrow-down-right-mini.spec.tsx | 17 + .../__tests__/arrow-down-tray.spec.tsx | 17 + .../components/__tests__/arrow-down.spec.tsx | 17 + .../__tests__/arrow-left-mini.spec.tsx | 17 + .../components/__tests__/arrow-left.spec.tsx | 17 + .../__tests__/arrow-long-down.spec.tsx | 17 + .../__tests__/arrow-long-left.spec.tsx | 17 + .../__tests__/arrow-long-right.spec.tsx | 17 + .../__tests__/arrow-long-up.spec.tsx | 17 + .../__tests__/arrow-path-mini.spec.tsx | 17 + .../components/__tests__/arrow-path.spec.tsx | 17 + .../__tests__/arrow-right-mini.spec.tsx | 17 + .../arrow-right-on-rectangle.spec.tsx | 17 + .../__tests__/arrow-up-circle-solid.spec.tsx | 17 + .../__tests__/arrow-up-down.spec.tsx | 17 + .../__tests__/arrow-up-mini.spec.tsx | 17 + .../__tests__/arrow-up-right-mini.spec.tsx | 17 + .../__tests__/arrow-up-right-on-box.spec.tsx | 17 + .../__tests__/arrow-up-tray.spec.tsx | 17 + .../__tests__/arrow-uturn-left.spec.tsx | 17 + .../arrows-pointing-out-mini.spec.tsx | 17 + .../__tests__/arrows-pointing-out.spec.tsx | 17 + .../__tests__/arrrow-right.spec.tsx | 17 + .../components/__tests__/at-symbol.spec.tsx | 17 + .../__tests__/backward-solid.spec.tsx | 17 + .../components/__tests__/bars-three.spec.tsx | 17 + .../__tests__/bell-alert-solid.spec.tsx | 17 + .../components/__tests__/bell-alert.spec.tsx | 17 + .../components/__tests__/bolt-solid.spec.tsx | 17 + .../src/components/__tests__/bolt.spec.tsx | 17 + .../components/__tests__/book-open.spec.tsx | 17 + .../__tests__/bug-ant-solid.spec.tsx | 17 + .../src/components/__tests__/bug.spec.tsx | 17 + .../__tests__/building-storefront.spec.tsx | 17 + .../__tests__/building-tax.spec.tsx | 17 + .../__tests__/buildings-mini.spec.tsx | 17 + .../__tests__/buildings-solid.spec.tsx | 17 + .../components/__tests__/buildings.spec.tsx | 17 + .../__tests__/calendar-mini.spec.tsx | 17 + .../__tests__/calendar-solid.spec.tsx | 17 + .../components/__tests__/calendar.spec.tsx | 17 + .../src/components/__tests__/camera.spec.tsx | 17 + .../components/__tests__/cash-solid.spec.tsx | 17 + .../src/components/__tests__/cash.spec.tsx | 17 + .../__tests__/channels-solid.spec.tsx | 17 + .../components/__tests__/channels.spec.tsx | 17 + .../components/__tests__/chart-bar.spec.tsx | 17 + .../chat-bubble-left-right-solid.spec.tsx | 17 + .../__tests__/chat-bubble-left-right.spec.tsx | 17 + .../components/__tests__/chat-bubble.spec.tsx | 17 + .../check-circle-mini-solid.spec.tsx | 17 + .../__tests__/check-circle-solid.spec.tsx | 17 + .../components/__tests__/check-mini.spec.tsx | 17 + .../src/components/__tests__/check.spec.tsx | 17 + .../chevron-double-left-mini-solid.spec.tsx | 17 + .../__tests__/chevron-double-left.spec.tsx | 17 + .../chevron-double-right-mini-solid.spec.tsx | 17 + .../__tests__/chevron-double-right.spec.tsx | 17 + .../__tests__/chevron-down-mini.spec.tsx | 17 + .../__tests__/chevron-down.spec.tsx | 17 + .../__tests__/chevron-left-mini.spec.tsx | 17 + .../__tests__/chevron-left.spec.tsx | 17 + .../__tests__/chevron-right-mini.spec.tsx | 17 + .../__tests__/chevron-right.spec.tsx | 17 + .../__tests__/chevron-up-down.spec.tsx | 17 + .../__tests__/chevron-up-mini.spec.tsx | 17 + .../__tests__/circle-dotted-line.spec.tsx | 17 + .../__tests__/circle-filled-solid.spec.tsx | 17 + .../__tests__/circle-half-solid.spec.tsx | 17 + .../circle-mini-filled-solid.spec.tsx | 17 + .../__tests__/circle-mini-solid.spec.tsx | 17 + .../__tests__/circle-quarter-solid.spec.tsx | 17 + .../__tests__/circle-solid.spec.tsx | 17 + .../__tests__/circle-stack-solid.spec.tsx | 17 + .../__tests__/circle-stack.spec.tsx | 17 + .../circle-three-quarters-solid.spec.tsx | 17 + .../clock-changed-solid-mini.spec.tsx | 17 + .../__tests__/clock-solid-mini.spec.tsx | 17 + .../components/__tests__/clock-solid.spec.tsx | 17 + .../src/components/__tests__/clock.spec.tsx | 17 + .../__tests__/cloud-arrow-down.spec.tsx | 17 + .../__tests__/cloud-arrow-up.spec.tsx | 17 + .../__tests__/cog-six-tooth-solid.spec.tsx | 17 + .../__tests__/cog-six-tooth.spec.tsx | 17 + .../__tests__/command-line-solid.spec.tsx | 17 + .../__tests__/command-line.spec.tsx | 17 + .../__tests__/component-solid.spec.tsx | 17 + .../components/__tests__/component.spec.tsx | 17 + .../__tests__/computer-desktop-solid.spec.tsx | 17 + .../__tests__/computer-desktop.spec.tsx | 17 + .../__tests__/credit-card-solid.spec.tsx | 17 + .../components/__tests__/credit-card.spec.tsx | 17 + .../components/__tests__/cube-solid.spec.tsx | 17 + .../__tests__/currency-dollar-solid.spec.tsx | 17 + .../__tests__/currency-dollar.spec.tsx | 17 + .../__tests__/cursor-arrow-rays.spec.tsx | 17 + .../src/components/__tests__/discord.spec.tsx | 17 + .../__tests__/document-series.spec.tsx | 17 + .../__tests__/document-text-solid.spec.tsx | 17 + .../__tests__/document-text.spec.tsx | 17 + .../components/__tests__/dots-six.spec.tsx | 17 + .../__tests__/ellipse-blue-solid.spec.tsx | 17 + .../__tests__/ellipse-green-solid.spec.tsx | 17 + .../__tests__/ellipse-grey-solid.spec.tsx | 17 + .../__tests__/ellipse-mini-solid.spec.tsx | 17 + .../__tests__/ellipse-orange-solid.spec.tsx | 17 + .../__tests__/ellipse-purple-solid.spec.tsx | 17 + .../__tests__/ellipse-red-solid.spec.tsx | 17 + .../__tests__/ellipse-solid.spec.tsx | 17 + .../__tests__/ellipsis-horizontal.spec.tsx | 17 + .../__tests__/ellipsis-vertical.spec.tsx | 17 + .../__tests__/envelope-solid.spec.tsx | 17 + .../components/__tests__/envelope.spec.tsx | 17 + .../exclamation-circle-solid.spec.tsx | 17 + .../__tests__/exclamation-circle.spec.tsx | 17 + .../components/__tests__/eye-mini.spec.tsx | 17 + .../__tests__/eye-slash-mini.spec.tsx | 17 + .../components/__tests__/eye-slash.spec.tsx | 17 + .../src/components/__tests__/eye.spec.tsx | 17 + .../components/__tests__/face-smile.spec.tsx | 17 + .../components/__tests__/facebook.spec.tsx | 17 + .../src/components/__tests__/figma.spec.tsx | 17 + .../components/__tests__/flying-box.spec.tsx | 17 + .../components/__tests__/folder-open.spec.tsx | 17 + .../src/components/__tests__/folder.spec.tsx | 17 + .../__tests__/forward-solid.spec.tsx | 17 + .../src/components/__tests__/funnel.spec.tsx | 17 + .../components/__tests__/gatsby-ex.spec.tsx | 17 + .../src/components/__tests__/gatsby.spec.tsx | 17 + .../components/__tests__/gift-solid.spec.tsx | 17 + .../src/components/__tests__/gift.spec.tsx | 17 + .../src/components/__tests__/github.spec.tsx | 17 + .../__tests__/globe-europe-solid.spec.tsx | 17 + .../__tests__/globe-europe.spec.tsx | 17 + .../src/components/__tests__/google.spec.tsx | 17 + .../src/components/__tests__/hashtag.spec.tsx | 17 + .../src/components/__tests__/heart.spec.tsx | 17 + .../components/__tests__/inbox-solid.spec.tsx | 17 + .../information-circle-solid.spec.tsx | 17 + .../__tests__/information-circle.spec.tsx | 17 + .../__tests__/javascript-ex.spec.tsx | 17 + .../components/__tests__/javascript.spec.tsx | 17 + .../components/__tests__/key-solid.spec.tsx | 17 + .../src/components/__tests__/key.spec.tsx | 17 + .../components/__tests__/klarna-ex.spec.tsx | 17 + .../src/components/__tests__/klarna.spec.tsx | 17 + .../__tests__/light-bulb-solid.spec.tsx | 17 + .../components/__tests__/light-bulb.spec.tsx | 17 + .../src/components/__tests__/link.spec.tsx | 17 + .../components/__tests__/linkedin.spec.tsx | 17 + .../components/__tests__/list-bullet.spec.tsx | 17 + .../__tests__/lock-closed-solid.spec.tsx | 17 + .../__tests__/lock-open-solid.spec.tsx | 17 + .../__tests__/magnifying-glass-mini.spec.tsx | 17 + .../__tests__/magnifying-glass.spec.tsx | 17 + .../src/components/__tests__/map-pin.spec.tsx | 17 + .../src/components/__tests__/map.spec.tsx | 17 + .../src/components/__tests__/medusa.spec.tsx | 17 + .../components/__tests__/minus-mini.spec.tsx | 17 + .../src/components/__tests__/minus.spec.tsx | 17 + .../components/__tests__/moon-solid.spec.tsx | 17 + .../src/components/__tests__/moon.spec.tsx | 17 + .../components/__tests__/newspaper.spec.tsx | 17 + .../src/components/__tests__/next-js.spec.tsx | 17 + .../components/__tests__/paper-clip.spec.tsx | 17 + .../components/__tests__/pause-solid.spec.tsx | 17 + .../__tests__/pencil-square-solid.spec.tsx | 17 + .../__tests__/pencil-square.spec.tsx | 17 + .../src/components/__tests__/pencil.spec.tsx | 17 + .../src/components/__tests__/phone.spec.tsx | 17 + .../components/__tests__/photo-solid.spec.tsx | 17 + .../src/components/__tests__/photo.spec.tsx | 17 + .../__tests__/play-mini-solid.spec.tsx | 17 + .../components/__tests__/play-solid.spec.tsx | 17 + .../components/__tests__/plus-mini.spec.tsx | 17 + .../src/components/__tests__/plus.spec.tsx | 17 + .../__tests__/puzzle-solid.spec.tsx | 17 + .../src/components/__tests__/puzzle.spec.tsx | 17 + .../__tests__/question-mark-circle.spec.tsx | 17 + .../__tests__/question-mark.spec.tsx | 17 + .../components/__tests__/react-js-ex.spec.tsx | 17 + .../components/__tests__/react-js.spec.tsx | 17 + .../__tests__/receipt-percent.spec.tsx | 17 + .../__tests__/replay-solid.spec.tsx | 17 + .../src/components/__tests__/resize.spec.tsx | 17 + .../__tests__/rocket-launch-solid.spec.tsx | 17 + .../__tests__/rocket-launch.spec.tsx | 17 + .../src/components/__tests__/rss.spec.tsx | 17 + .../__tests__/server-solid.spec.tsx | 17 + .../__tests__/server-stack-solid.spec.tsx | 17 + .../__tests__/server-stack.spec.tsx | 17 + .../src/components/__tests__/server.spec.tsx | 17 + .../__tests__/shopping-bag.spec.tsx | 17 + .../__tests__/shopping-cart-solid.spec.tsx | 17 + .../__tests__/shopping-cart.spec.tsx | 17 + .../src/components/__tests__/sidebar.spec.tsx | 17 + .../src/components/__tests__/slack.spec.tsx | 17 + .../src/components/__tests__/snooze.spec.tsx | 17 + .../__tests__/sparkles-mini-solid.spec.tsx | 17 + .../__tests__/sparkles-mini.spec.tsx | 17 + .../__tests__/sparkles-solid.spec.tsx | 17 + .../components/__tests__/sparkles.spec.tsx | 17 + .../src/components/__tests__/spinner.spec.tsx | 17 + .../__tests__/square-two-stack-mini.spec.tsx | 17 + .../__tests__/square-two-stack-solid.spec.tsx | 17 + .../__tests__/square-two-stack.spec.tsx | 17 + .../__tests__/squares-plus-solid.spec.tsx | 17 + .../__tests__/squares-plus.spec.tsx | 17 + .../components/__tests__/star-solid.spec.tsx | 17 + .../src/components/__tests__/star.spec.tsx | 17 + .../src/components/__tests__/stripe.spec.tsx | 17 + .../components/__tests__/sun-solid.spec.tsx | 17 + .../src/components/__tests__/sun.spec.tsx | 17 + .../__tests__/swatch-solid.spec.tsx | 17 + .../src/components/__tests__/swatch.spec.tsx | 17 + .../components/__tests__/tag-solid.spec.tsx | 17 + .../src/components/__tests__/tag.spec.tsx | 17 + .../components/__tests__/tailwind.spec.tsx | 17 + .../src/components/__tests__/text.spec.tsx | 17 + .../components/__tests__/thumb-down.spec.tsx | 17 + .../components/__tests__/thumb-up.spec.tsx | 17 + .../components/__tests__/tools-solid.spec.tsx | 17 + .../src/components/__tests__/tools.spec.tsx | 17 + .../src/components/__tests__/trash.spec.tsx | 17 + .../__tests__/triangle-down-mini.spec.tsx | 17 + .../__tests__/triangle-right-mini.spec.tsx | 17 + .../src/components/__tests__/twitter.spec.tsx | 17 + .../__tests__/typescript-ex.spec.tsx | 17 + .../components/__tests__/typescript.spec.tsx | 17 + .../__tests__/user-circle-mini.spec.tsx | 17 + .../components/__tests__/user-group.spec.tsx | 17 + .../src/components/__tests__/user.spec.tsx | 17 + .../components/__tests__/users-solid.spec.tsx | 17 + .../src/components/__tests__/users.spec.tsx | 17 + .../src/components/__tests__/vercel.spec.tsx | 17 + .../src/components/__tests__/window.spec.tsx | 17 + .../__tests__/x-circle-solid.spec.tsx | 17 + .../components/__tests__/x-mark-mini.spec.tsx | 17 + .../src/components/__tests__/x-mark.spec.tsx | 17 + .../icons/src/components/__tests__/x.spec.tsx | 17 + .../src/components/academic-cap-solid.tsx | 25 + .../icons/src/components/academic-cap.tsx | 26 + .../icons/src/components/adjustments.tsx | 26 + .../icons/src/components/apple.tsx | 27 + .../icons/src/components/archive-box.tsx | 26 + .../src/components/arrow-down-circle.tsx | 25 + .../src/components/arrow-down-left-mini.tsx | 33 + .../icons/src/components/arrow-down-left.tsx | 33 + .../icons/src/components/arrow-down-mini.tsx | 26 + .../src/components/arrow-down-right-mini.tsx | 26 + .../icons/src/components/arrow-down-tray.tsx | 26 + .../icons/src/components/arrow-down.tsx | 26 + .../icons/src/components/arrow-left-mini.tsx | 26 + .../icons/src/components/arrow-left.tsx | 26 + .../icons/src/components/arrow-long-down.tsx | 26 + .../icons/src/components/arrow-long-left.tsx | 26 + .../icons/src/components/arrow-long-right.tsx | 26 + .../icons/src/components/arrow-long-up.tsx | 26 + .../icons/src/components/arrow-path-mini.tsx | 26 + .../icons/src/components/arrow-path.tsx | 26 + .../icons/src/components/arrow-right-mini.tsx | 26 + .../components/arrow-right-on-rectangle.tsx | 26 + .../src/components/arrow-up-circle-solid.tsx | 25 + .../icons/src/components/arrow-up-down.tsx | 26 + .../icons/src/components/arrow-up-mini.tsx | 26 + .../src/components/arrow-up-right-mini.tsx | 26 + .../src/components/arrow-up-right-on-box.tsx | 26 + .../icons/src/components/arrow-up-tray.tsx | 26 + .../icons/src/components/arrow-uturn-left.tsx | 26 + .../components/arrows-pointing-out-mini.tsx | 26 + .../src/components/arrows-pointing-out.tsx | 26 + .../icons/src/components/arrrow-right.tsx | 26 + .../icons/src/components/at-symbol.tsx | 25 + .../icons/src/components/backward-solid.tsx | 23 + .../icons/src/components/bars-three.tsx | 26 + .../icons/src/components/bell-alert-solid.tsx | 29 + .../icons/src/components/bell-alert.tsx | 26 + .../icons/src/components/bolt-solid.tsx | 25 + .../icons/src/components/bolt.tsx | 26 + .../icons/src/components/book-open.tsx | 26 + .../icons/src/components/bug-ant-solid.tsx | 25 + .../icons/src/components/bug.tsx | 26 + .../src/components/building-storefront.tsx | 26 + .../icons/src/components/building-tax.tsx | 44 + .../icons/src/components/buildings-mini.tsx | 40 + .../icons/src/components/buildings-solid.tsx | 25 + .../icons/src/components/buildings.tsx | 40 + .../icons/src/components/calendar-mini.tsx | 31 + .../icons/src/components/calendar-solid.tsx | 29 + .../icons/src/components/calendar.tsx | 26 + .../icons/src/components/camera.tsx | 33 + .../icons/src/components/cash-solid.tsx | 25 + .../icons/src/components/cash.tsx | 26 + .../icons/src/components/channels-solid.tsx | 25 + .../icons/src/components/channels.tsx | 33 + .../icons/src/components/chart-bar.tsx | 26 + .../chat-bubble-left-right-solid.tsx | 27 + .../src/components/chat-bubble-left-right.tsx | 26 + .../icons/src/components/chat-bubble.tsx | 26 + .../components/check-circle-mini-solid.tsx | 25 + .../src/components/check-circle-solid.tsx | 25 + .../icons/src/components/check-mini.tsx | 26 + .../icons/src/components/check.tsx | 26 + .../chevron-double-left-mini-solid.tsx | 25 + .../src/components/chevron-double-left.tsx | 26 + .../chevron-double-right-mini-solid.tsx | 31 + .../src/components/chevron-double-right.tsx | 26 + .../src/components/chevron-down-mini.tsx | 26 + .../icons/src/components/chevron-down.tsx | 26 + .../src/components/chevron-left-mini.tsx | 26 + .../icons/src/components/chevron-left.tsx | 26 + .../src/components/chevron-right-mini.tsx | 26 + .../icons/src/components/chevron-right.tsx | 26 + .../icons/src/components/chevron-up-down.tsx | 26 + .../icons/src/components/chevron-up-mini.tsx | 26 + .../src/components/circle-dotted-line.tsx | 26 + .../src/components/circle-filled-solid.tsx | 21 + .../src/components/circle-half-solid.tsx | 21 + .../components/circle-mini-filled-solid.tsx | 21 + .../src/components/circle-mini-solid.tsx | 20 + .../src/components/circle-quarter-solid.tsx | 21 + .../icons/src/components/circle-solid.tsx | 20 + .../src/components/circle-stack-solid.tsx | 35 + .../icons/src/components/circle-stack.tsx | 26 + .../circle-three-quarters-solid.tsx | 21 + .../components/clock-changed-solid-mini.tsx | 25 + .../icons/src/components/clock-solid-mini.tsx | 25 + .../icons/src/components/clock-solid.tsx | 25 + .../icons/src/components/clock.tsx | 33 + .../icons/src/components/cloud-arrow-down.tsx | 26 + .../icons/src/components/cloud-arrow-up.tsx | 26 + .../src/components/cog-six-tooth-solid.tsx | 25 + .../icons/src/components/cog-six-tooth.tsx | 33 + .../src/components/command-line-solid.tsx | 25 + .../icons/src/components/command-line.tsx | 26 + .../icons/src/components/component-solid.tsx | 27 + .../icons/src/components/component.tsx | 26 + .../src/components/computer-desktop-solid.tsx | 25 + .../icons/src/components/computer-desktop.tsx | 26 + .../src/components/credit-card-solid.tsx | 29 + .../icons/src/components/credit-card.tsx | 26 + .../icons/src/components/cube-solid.tsx | 25 + .../src/components/currency-dollar-solid.tsx | 29 + .../icons/src/components/currency-dollar.tsx | 26 + .../src/components/cursor-arrow-rays.tsx | 26 + .../icons/src/components/discord.tsx | 23 + .../icons/src/components/document-series.tsx | 26 + .../src/components/document-text-solid.tsx | 29 + .../icons/src/components/document-text.tsx | 26 + .../icons/src/components/dots-six.tsx | 26 + .../src/components/ellipse-blue-solid.tsx | 72 + .../src/components/ellipse-green-solid.tsx | 72 + .../src/components/ellipse-grey-solid.tsx | 72 + .../src/components/ellipse-mini-solid.tsx | 20 + .../src/components/ellipse-orange-solid.tsx | 72 + .../src/components/ellipse-purple-solid.tsx | 72 + .../src/components/ellipse-red-solid.tsx | 72 + .../icons/src/components/ellipse-solid.tsx | 20 + .../src/components/ellipsis-horizontal.tsx | 24 + .../src/components/ellipsis-vertical.tsx | 24 + .../icons/src/components/envelope-solid.tsx | 27 + .../icons/src/components/envelope.tsx | 26 + .../components/exclamation-circle-solid.tsx | 25 + .../src/components/exclamation-circle.tsx | 33 + .../icons/src/components/eye-mini.tsx | 33 + .../icons/src/components/eye-slash-mini.tsx | 26 + .../icons/src/components/eye-slash.tsx | 26 + .../icons/src/components/eye.tsx | 33 + .../icons/src/components/face-smile.tsx | 26 + .../icons/src/components/facebook.tsx | 38 + .../icons/src/components/figma.tsx | 46 + .../icons/src/components/flying-box.tsx | 33 + .../icons/src/components/folder-open.tsx | 26 + .../icons/src/components/folder.tsx | 26 + .../icons/src/components/forward-solid.tsx | 23 + .../icons/src/components/funnel.tsx | 26 + .../icons/src/components/gatsby-ex.tsx | 25 + .../icons/src/components/gatsby.tsx | 24 + .../icons/src/components/gift-solid.tsx | 29 + .../icons/src/components/gift.tsx | 26 + .../icons/src/components/github.tsx | 25 + .../src/components/globe-europe-solid.tsx | 25 + .../icons/src/components/globe-europe.tsx | 26 + .../icons/src/components/google.tsx | 35 + .../icons/src/components/hashtag.tsx | 26 + .../icons/src/components/heart.tsx | 26 + .../icons/src/components/inbox-solid.tsx | 27 + .../icons/src/components/index.ts | 250 + .../components/information-circle-solid.tsx | 25 + .../src/components/information-circle.tsx | 26 + .../icons/src/components/javascript-ex.tsx | 25 + .../icons/src/components/javascript.tsx | 27 + .../icons/src/components/key-solid.tsx | 25 + .../icons/src/components/key.tsx | 26 + .../icons/src/components/klarna-ex.tsx | 25 + .../icons/src/components/klarna.tsx | 28 + .../icons/src/components/light-bulb-solid.tsx | 29 + .../icons/src/components/light-bulb.tsx | 26 + .../icons/src/components/link.tsx | 26 + .../icons/src/components/linkedin.tsx | 23 + .../icons/src/components/list-bullet.tsx | 26 + .../src/components/lock-closed-solid.tsx | 25 + .../icons/src/components/lock-open-solid.tsx | 25 + .../src/components/magnifying-glass-mini.tsx | 26 + .../icons/src/components/magnifying-glass.tsx | 26 + .../icons/src/components/map-pin.tsx | 33 + .../icons/src/components/map.tsx | 26 + .../icons/src/components/medusa.tsx | 23 + .../icons/src/components/minus-mini.tsx | 26 + .../icons/src/components/minus.tsx | 26 + .../icons/src/components/moon-solid.tsx | 25 + .../icons/src/components/moon.tsx | 26 + .../icons/src/components/newspaper.tsx | 26 + .../icons/src/components/next-js.tsx | 27 + .../icons/src/components/paper-clip.tsx | 26 + .../icons/src/components/pause-solid.tsx | 35 + .../src/components/pencil-square-solid.tsx | 27 + .../icons/src/components/pencil-square.tsx | 26 + .../icons/src/components/pencil.tsx | 26 + .../icons/src/components/phone.tsx | 26 + .../icons/src/components/photo-solid.tsx | 25 + .../icons/src/components/photo.tsx | 26 + .../icons/src/components/play-mini-solid.tsx | 25 + .../icons/src/components/play-solid.tsx | 25 + .../icons/src/components/plus-mini.tsx | 26 + .../icons/src/components/plus.tsx | 26 + .../icons/src/components/puzzle-solid.tsx | 23 + .../icons/src/components/puzzle.tsx | 26 + .../src/components/question-mark-circle.tsx | 26 + .../icons/src/components/question-mark.tsx | 26 + .../icons/src/components/react-js-ex.tsx | 25 + .../icons/src/components/react-js.tsx | 39 + .../icons/src/components/receipt-percent.tsx | 26 + .../icons/src/components/replay-solid.tsx | 26 + .../icons/src/components/resize.tsx | 26 + .../src/components/rocket-launch-solid.tsx | 31 + .../icons/src/components/rocket-launch.tsx | 26 + .../icons/src/components/rss.tsx | 26 + .../icons/src/components/server-solid.tsx | 29 + .../src/components/server-stack-solid.tsx | 29 + .../icons/src/components/server-stack.tsx | 26 + .../icons/src/components/server.tsx | 26 + .../icons/src/components/shopping-bag.tsx | 26 + .../src/components/shopping-cart-solid.tsx | 23 + .../icons/src/components/shopping-cart.tsx | 26 + .../icons/src/components/sidebar.tsx | 26 + .../icons/src/components/slack.tsx | 35 + .../icons/src/components/snooze.tsx | 26 + .../src/components/sparkles-mini-solid.tsx | 25 + .../icons/src/components/sparkles-mini.tsx | 26 + .../icons/src/components/sparkles-solid.tsx | 25 + .../icons/src/components/sparkles.tsx | 26 + .../icons/src/components/spinner.tsx | 23 + .../src/components/square-two-stack-mini.tsx | 26 + .../src/components/square-two-stack-solid.tsx | 27 + .../icons/src/components/square-two-stack.tsx | 26 + .../src/components/squares-plus-solid.tsx | 23 + .../icons/src/components/squares-plus.tsx | 26 + .../icons/src/components/star-solid.tsx | 25 + .../icons/src/components/star.tsx | 26 + .../icons/src/components/stripe.tsx | 25 + .../icons/src/components/sun-solid.tsx | 23 + .../icons/src/components/sun.tsx | 26 + .../icons/src/components/swatch-solid.tsx | 29 + .../icons/src/components/swatch.tsx | 26 + .../icons/src/components/tag-solid.tsx | 25 + .../icons/src/components/tag.tsx | 33 + .../icons/src/components/tailwind.tsx | 40 + .../icons/src/components/text.tsx | 26 + .../icons/src/components/thumb-down.tsx | 26 + .../icons/src/components/thumb-up.tsx | 26 + .../icons/src/components/tools-solid.tsx | 35 + .../icons/src/components/tools.tsx | 26 + .../icons/src/components/trash.tsx | 26 + .../src/components/triangle-down-mini.tsx | 25 + .../src/components/triangle-right-mini.tsx | 25 + .../icons/src/components/twitter.tsx | 23 + .../icons/src/components/typescript-ex.tsx | 25 + .../icons/src/components/typescript.tsx | 29 + .../icons/src/components/user-circle-mini.tsx | 26 + .../icons/src/components/user-group.tsx | 26 + .../icons/src/components/user.tsx | 26 + .../icons/src/components/users-solid.tsx | 23 + .../icons/src/components/users.tsx | 26 + .../icons/src/components/vercel.tsx | 23 + .../icons/src/components/window.tsx | 26 + .../icons/src/components/x-circle-solid.tsx | 25 + .../icons/src/components/x-mark-mini.tsx | 26 + .../icons/src/components/x-mark.tsx | 26 + .../design-system/icons/src/components/x.tsx | 25 + packages/design-system/icons/src/index.ts | 1 + packages/design-system/icons/src/types.ts | 6 + packages/design-system/icons/tsconfig.json | 31 + packages/design-system/icons/vite.config.ts | 21 + packages/design-system/toolbox/README.md | 3 + packages/design-system/toolbox/bin/toolbox.js | 2 + packages/design-system/toolbox/package.json | 33 + .../toolbox/src/commands/icons/command.ts | 173 + .../commands/icons/utils/generate-index.ts | 30 + .../src/commands/icons/utils/get-icon-data.ts | 47 + .../toolbox/src/commands/icons/utils/index.ts | 2 + .../toolbox/src/commands/tokens/command.ts | 458 ++ .../src/commands/tokens/utils/colors.ts | 151 + .../src/commands/tokens/utils/effects.ts | 58 + .../design-system/toolbox/src/constants.ts | 32 + .../design-system/toolbox/src/create-cli.ts | 31 + .../design-system/toolbox/src/figma-client.ts | 16 + .../toolbox/src/figma/assertions.ts | 42 + .../design-system/toolbox/src/figma/client.ts | 56 + .../design-system/toolbox/src/figma/index.ts | 308 + .../design-system/toolbox/src/figma/types.ts | 1236 ++++ .../design-system/toolbox/src/figma/utils.ts | 25 + packages/design-system/toolbox/src/index.ts | 8 + packages/design-system/toolbox/src/logger.ts | 18 + .../toolbox/src/templates/icon-templates.ts | 39 + .../toolbox/src/templates/index.ts | 1 + .../toolbox/src/transformers/index.ts | 1 + .../toolbox/src/transformers/transform-svg.ts | 56 + packages/design-system/toolbox/tsconfig.json | 25 + packages/design-system/toolbox/tsup.config.ts | 10 + .../design-system/ui-preset/.env.template | 2 + packages/design-system/ui-preset/CHANGELOG.md | 79 + packages/design-system/ui-preset/LICENSE | 21 + packages/design-system/ui-preset/README.md | 36 + packages/design-system/ui-preset/package.json | 41 + .../design-system/ui-preset/src/constants.ts | 4 + packages/design-system/ui-preset/src/index.ts | 3 + .../design-system/ui-preset/src/plugin.ts | 69 + .../design-system/ui-preset/src/preset.ts | 10 + .../ui-preset/src/theme/extension/theme.ts | 335 ++ .../ui-preset/src/theme/tokens/colors.ts | 218 + .../ui-preset/src/theme/tokens/components.ts | 78 + .../ui-preset/src/theme/tokens/effects.ts | 48 + .../ui-preset/src/theme/tokens/typography.ts | 194 + .../design-system/ui-preset/tsconfig.json | 20 + .../design-system/ui-preset/tsup.config.ts | 10 + packages/design-system/ui/.eslintignore | 3 + packages/design-system/ui/.gitignore | 1 + packages/design-system/ui/.storybook/main.ts | 29 + .../design-system/ui/.storybook/preview.tsx | 29 + packages/design-system/ui/CHANGELOG.md | 115 + packages/design-system/ui/CONTRIBUTING.md | 62 + packages/design-system/ui/LICENSE | 21 + packages/design-system/ui/README.md | 52 + packages/design-system/ui/package.json | 129 + packages/design-system/ui/postcss.config.js | 6 + packages/design-system/ui/setup-test.ts | 14 + .../src/components/avatar/avatar.stories.tsx | 52 + .../ui/src/components/avatar/avatar.tsx | 90 + .../ui/src/components/avatar/index.ts | 1 + .../ui/src/components/badge/badge.spec.tsx | 21 + .../ui/src/components/badge/badge.stories.tsx | 85 + .../ui/src/components/badge/badge.tsx | 80 + .../ui/src/components/badge/index.ts | 1 + .../ui/src/components/button/button.spec.tsx | 23 + .../src/components/button/button.stories.tsx | 78 + .../ui/src/components/button/button.tsx | 118 + .../ui/src/components/button/index.ts | 1 + .../components/calendar/calendar.stories.tsx | 79 + .../ui/src/components/calendar/calendar.tsx | 145 + .../ui/src/components/calendar/index.ts | 1 + .../src/components/checkbox/checkbox.spec.tsx | 12 + .../components/checkbox/checkbox.stories.tsx | 51 + .../ui/src/components/checkbox/checkbox.tsx | 33 + .../ui/src/components/checkbox/index.ts | 1 + .../code-block/code-block.stories.tsx | 52 + .../src/components/code-block/code-block.tsx | 186 + .../ui/src/components/code-block/index.ts | 1 + .../ui/src/components/code/code.stories.tsx | 18 + .../ui/src/components/code/code.tsx | 22 + .../ui/src/components/code/index.tsx | 1 + .../command-bar/command-bar.stories.tsx | 54 + .../components/command-bar/command-bar.tsx | 168 + .../ui/src/components/command-bar/index.ts | 1 + .../components/command/command.stories.tsx | 30 + .../ui/src/components/command/command.tsx | 25 + .../ui/src/components/command/index.tsx | 1 + .../container/container.stories.tsx | 48 + .../ui/src/components/container/container.tsx | 22 + .../ui/src/components/container/index.ts | 1 + .../ui/src/components/copy/copy.spec.tsx | 11 + .../ui/src/components/copy/copy.stories.tsx | 31 + .../ui/src/components/copy/copy.tsx | 62 + .../ui/src/components/copy/index.tsx | 1 + .../currency-input/currency-input.stories.tsx | 39 + .../currency-input/currency-input.tsx | 129 + .../ui/src/components/currency-input/index.ts | 1 + .../date-picker/date-picker.spec.tsx | 58 + .../date-picker/date-picker.stories.tsx | 243 + .../components/date-picker/date-picker.tsx | 908 +++ .../ui/src/components/date-picker/index.ts | 1 + .../src/components/drawer/drawer.stories.tsx | 41 + .../ui/src/components/drawer/drawer.tsx | 175 + .../ui/src/components/drawer/index.ts | 1 + .../dropdown-menu/dropdown-menu.stories.tsx | 275 + .../dropdown-menu/dropdown-menu.tsx | 229 + .../ui/src/components/dropdown-menu/index.ts | 1 + .../focus-modal/focus-modal.stories.tsx | 35 + .../components/focus-modal/focus-modal.tsx | 117 + .../ui/src/components/focus-modal/index.ts | 1 + .../src/components/heading/heading.spec.tsx | 21 + .../components/heading/heading.stories.tsx | 44 + .../ui/src/components/heading/heading.tsx | 33 + .../ui/src/components/heading/index.ts | 1 + .../ui/src/components/hint/hint.stories.tsx | 27 + .../ui/src/components/hint/hint.tsx | 41 + .../ui/src/components/hint/index.ts | 1 + .../icon-badge/icon-badge.stories.tsx | 114 + .../src/components/icon-badge/icon-badge.tsx | 58 + .../ui/src/components/icon-badge/index.ts | 1 + .../icon-button/icon-button.spec.tsx | 30 + .../icon-button/icon-button.stories.tsx | 83 + .../components/icon-button/icon-button.tsx | 105 + .../ui/src/components/icon-button/index.ts | 1 + .../ui/src/components/input/index.ts | 1 + .../ui/src/components/input/input.spec.tsx | 11 + .../ui/src/components/input/input.stories.tsx | 55 + .../ui/src/components/input/input.tsx | 104 + .../ui/src/components/kbd/index.ts | 1 + .../ui/src/components/kbd/kbd.stories.tsx | 21 + .../ui/src/components/kbd/kbd.tsx | 25 + .../ui/src/components/label/index.ts | 1 + .../ui/src/components/label/label.spec.tsx | 12 + .../ui/src/components/label/label.stories.tsx | 85 + .../ui/src/components/label/label.tsx | 45 + .../ui/src/components/popover/index.ts | 1 + .../ui/src/components/popover/popover.tsx | 95 + .../components/progress-accordion/index.ts | 1 + .../progress-accordion.stories.tsx | 64 + .../progress-accordion/progress-accordion.tsx | 120 + .../ui/src/components/progress-tabs/index.ts | 1 + .../progress-tabs/progress-tabs.stories.tsx | 50 + .../progress-tabs/progress-tabs.tsx | 114 + .../ui/src/components/prompt/index.ts | 1 + .../ui/src/components/prompt/prompt.spec.tsx | 92 + .../src/components/prompt/prompt.stories.tsx | 41 + .../ui/src/components/prompt/prompt.tsx | 149 + .../ui/src/components/radio-group/index.ts | 1 + .../radio-group/radio-group.stories.tsx | 161 + .../components/radio-group/radio-group.tsx | 130 + .../ui/src/components/select/index.ts | 1 + .../src/components/select/select.stories.tsx | 219 + .../ui/src/components/select/select.tsx | 206 + .../ui/src/components/status-badge/index.ts | 1 + .../status-badge/status-badge.stories.tsx | 50 + .../components/status-badge/status-badge.tsx | 46 + .../ui/src/components/switch/index.ts | 1 + .../ui/src/components/switch/switch.spec.tsx | 12 + .../src/components/switch/switch.stories.tsx | 44 + .../ui/src/components/switch/switch.tsx | 61 + .../ui/src/components/table/index.ts | 1 + .../ui/src/components/table/table.stories.tsx | 280 + .../ui/src/components/table/table.tsx | 163 + .../ui/src/components/tabs/index.ts | 1 + .../ui/src/components/tabs/tabs.stories.tsx | 40 + .../ui/src/components/tabs/tabs.tsx | 65 + .../ui/src/components/text/index.ts | 1 + .../ui/src/components/text/text.spec.tsx | 26 + .../ui/src/components/text/text.stories.tsx | 144 + .../ui/src/components/text/text.tsx | 129 + .../ui/src/components/textarea/index.ts | 1 + .../components/textarea/textarea.stories.tsx | 27 + .../ui/src/components/textarea/textarea.tsx | 24 + .../ui/src/components/time-input/index.ts | 1 + .../time-input/time-input.stories.tsx | 56 + .../src/components/time-input/time-input.tsx | 118 + .../ui/src/components/toast/index.ts | 1 + .../ui/src/components/toast/toast.stories.tsx | 83 + .../ui/src/components/toast/toast.tsx | 169 + .../ui/src/components/toaster/index.ts | 1 + .../ui/src/components/toaster/toaster.tsx | 21 + .../ui/src/components/tooltip/index.ts | 1 + .../src/components/tooltip/tooltip.spec.tsx | 34 + .../components/tooltip/tooltip.stories.tsx | 36 + .../ui/src/components/tooltip/tooltip.tsx | 66 + .../ui/src/hooks/use-prompt/dialog.tsx | 112 + .../ui/src/hooks/use-prompt/index.ts | 1 + .../src/hooks/use-prompt/use-prompt.spec.tsx | 121 + .../hooks/use-prompt/use-prompt.stories.tsx | 59 + .../ui/src/hooks/use-prompt/use-prompt.tsx | 48 + .../ui/src/hooks/use-toast/index.ts | 1 + .../src/hooks/use-toast/use-toast.stories.tsx | 85 + .../ui/src/hooks/use-toast/use-toast.tsx | 188 + .../ui/src/hooks/use-toggle-state/index.ts | 1 + .../use-toggle-state.spec.tsx | 54 + .../use-toggle-state.stories.tsx | 35 + .../use-toggle-state/use-toggle-state.tsx | 35 + packages/design-system/ui/src/index.ts | 49 + packages/design-system/ui/src/main.css | 9 + packages/design-system/ui/src/types.ts | 6 + packages/design-system/ui/src/utils/clx.ts | 6 + .../utils/is-browser-locale-hour-cycle-24h.ts | 12 + packages/design-system/ui/tailwind.config.cjs | 6 + packages/design-system/ui/tsconfig.cjs.json | 21 + packages/design-system/ui/tsconfig.esm.json | 21 + packages/design-system/ui/tsconfig.json | 29 + packages/design-system/ui/vite.config.ts | 30 + packages/medusa-payment-stripe/package.json | 5 + yarn.lock | 5193 ++++++++++++++++- 722 files changed, 30294 insertions(+), 180 deletions(-) create mode 100644 .changeset/old-otters-run.md create mode 100644 .yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch create mode 100644 packages/design-system/icons/.env.template create mode 100644 packages/design-system/icons/CHANGELOG.md create mode 100644 packages/design-system/icons/LICENSE create mode 100644 packages/design-system/icons/README.md create mode 100644 packages/design-system/icons/package.json create mode 100644 packages/design-system/icons/rollup.config.mjs create mode 100644 packages/design-system/icons/setup-test.ts create mode 100644 packages/design-system/icons/src/components/__tests__/academic-cap-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/academic-cap.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/adjustments.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/apple.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/archive-box.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-down-circle.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-down-left-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-down-left.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-down-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-down-right-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-down-tray.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-down.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-left-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-left.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-long-down.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-long-left.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-long-right.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-long-up.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-path-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-path.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-right-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-right-on-rectangle.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-up-circle-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-up-down.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-up-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-up-right-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-up-right-on-box.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-up-tray.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrow-uturn-left.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrows-pointing-out-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrows-pointing-out.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/at-symbol.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/backward-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/bars-three.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/bell-alert-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/bell-alert.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/bolt-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/bolt.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/book-open.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/bug-ant-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/bug.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/building-storefront.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/building-tax.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/buildings-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/buildings-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/buildings.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/calendar-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/calendar-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/calendar.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/camera.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/cash-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/cash.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/channels-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/channels.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chart-bar.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chat-bubble-left-right-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chat-bubble-left-right.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chat-bubble.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/check-circle-mini-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/check-circle-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/check-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/check.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-double-left-mini-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-double-left.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-double-right-mini-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-double-right.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-down-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-down.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-left-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-left.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-right-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-right.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-up-down.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/chevron-up-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-dotted-line.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-filled-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-half-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-mini-filled-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-mini-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-quarter-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-stack-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-stack.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/circle-three-quarters-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/clock-changed-solid-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/clock-solid-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/clock-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/clock.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/cloud-arrow-down.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/cloud-arrow-up.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/cog-six-tooth-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/cog-six-tooth.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/command-line-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/command-line.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/component-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/component.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/computer-desktop-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/computer-desktop.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/credit-card-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/credit-card.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/cube-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/currency-dollar-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/currency-dollar.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/cursor-arrow-rays.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/discord.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/document-series.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/document-text-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/document-text.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/dots-six.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipse-blue-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipse-green-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipse-grey-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipse-mini-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipse-orange-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipse-purple-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipse-red-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipse-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipsis-horizontal.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/ellipsis-vertical.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/envelope-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/envelope.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/exclamation-circle-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/exclamation-circle.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/eye-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/eye-slash-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/eye-slash.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/eye.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/face-smile.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/facebook.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/figma.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/flying-box.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/folder-open.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/folder.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/forward-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/funnel.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/gatsby-ex.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/gatsby.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/gift-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/gift.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/github.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/globe-europe-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/globe-europe.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/google.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/hashtag.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/heart.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/inbox-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/information-circle-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/information-circle.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/javascript-ex.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/javascript.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/key-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/key.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/klarna-ex.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/klarna.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/light-bulb-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/light-bulb.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/link.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/linkedin.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/list-bullet.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/lock-closed-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/lock-open-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/magnifying-glass-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/magnifying-glass.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/map-pin.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/map.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/medusa.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/minus-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/minus.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/moon-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/moon.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/newspaper.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/next-js.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/paper-clip.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/pause-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/pencil-square-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/pencil-square.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/pencil.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/phone.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/photo-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/photo.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/play-mini-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/play-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/plus-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/plus.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/puzzle-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/puzzle.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/question-mark-circle.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/question-mark.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/react-js-ex.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/react-js.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/receipt-percent.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/replay-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/resize.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/rocket-launch-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/rocket-launch.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/rss.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/server-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/server-stack-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/server-stack.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/server.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/shopping-bag.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/shopping-cart-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/shopping-cart.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/sidebar.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/slack.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/snooze.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/sparkles-mini-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/sparkles-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/sparkles-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/sparkles.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/spinner.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/square-two-stack-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/square-two-stack-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/square-two-stack.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/squares-plus-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/squares-plus.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/star-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/star.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/stripe.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/sun-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/sun.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/swatch-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/swatch.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/tag-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/tag.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/tailwind.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/text.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/thumb-down.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/thumb-up.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/tools-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/tools.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/trash.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/triangle-down-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/triangle-right-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/twitter.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/typescript-ex.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/typescript.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/user-circle-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/user-group.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/user.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/users-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/users.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/vercel.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/window.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/x-circle-solid.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/x-mark-mini.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/x-mark.spec.tsx create mode 100644 packages/design-system/icons/src/components/__tests__/x.spec.tsx create mode 100644 packages/design-system/icons/src/components/academic-cap-solid.tsx create mode 100644 packages/design-system/icons/src/components/academic-cap.tsx create mode 100644 packages/design-system/icons/src/components/adjustments.tsx create mode 100644 packages/design-system/icons/src/components/apple.tsx create mode 100644 packages/design-system/icons/src/components/archive-box.tsx create mode 100644 packages/design-system/icons/src/components/arrow-down-circle.tsx create mode 100644 packages/design-system/icons/src/components/arrow-down-left-mini.tsx create mode 100644 packages/design-system/icons/src/components/arrow-down-left.tsx create mode 100644 packages/design-system/icons/src/components/arrow-down-mini.tsx create mode 100644 packages/design-system/icons/src/components/arrow-down-right-mini.tsx create mode 100644 packages/design-system/icons/src/components/arrow-down-tray.tsx create mode 100644 packages/design-system/icons/src/components/arrow-down.tsx create mode 100644 packages/design-system/icons/src/components/arrow-left-mini.tsx create mode 100644 packages/design-system/icons/src/components/arrow-left.tsx create mode 100644 packages/design-system/icons/src/components/arrow-long-down.tsx create mode 100644 packages/design-system/icons/src/components/arrow-long-left.tsx create mode 100644 packages/design-system/icons/src/components/arrow-long-right.tsx create mode 100644 packages/design-system/icons/src/components/arrow-long-up.tsx create mode 100644 packages/design-system/icons/src/components/arrow-path-mini.tsx create mode 100644 packages/design-system/icons/src/components/arrow-path.tsx create mode 100644 packages/design-system/icons/src/components/arrow-right-mini.tsx create mode 100644 packages/design-system/icons/src/components/arrow-right-on-rectangle.tsx create mode 100644 packages/design-system/icons/src/components/arrow-up-circle-solid.tsx create mode 100644 packages/design-system/icons/src/components/arrow-up-down.tsx create mode 100644 packages/design-system/icons/src/components/arrow-up-mini.tsx create mode 100644 packages/design-system/icons/src/components/arrow-up-right-mini.tsx create mode 100644 packages/design-system/icons/src/components/arrow-up-right-on-box.tsx create mode 100644 packages/design-system/icons/src/components/arrow-up-tray.tsx create mode 100644 packages/design-system/icons/src/components/arrow-uturn-left.tsx create mode 100644 packages/design-system/icons/src/components/arrows-pointing-out-mini.tsx create mode 100644 packages/design-system/icons/src/components/arrows-pointing-out.tsx create mode 100644 packages/design-system/icons/src/components/arrrow-right.tsx create mode 100644 packages/design-system/icons/src/components/at-symbol.tsx create mode 100644 packages/design-system/icons/src/components/backward-solid.tsx create mode 100644 packages/design-system/icons/src/components/bars-three.tsx create mode 100644 packages/design-system/icons/src/components/bell-alert-solid.tsx create mode 100644 packages/design-system/icons/src/components/bell-alert.tsx create mode 100644 packages/design-system/icons/src/components/bolt-solid.tsx create mode 100644 packages/design-system/icons/src/components/bolt.tsx create mode 100644 packages/design-system/icons/src/components/book-open.tsx create mode 100644 packages/design-system/icons/src/components/bug-ant-solid.tsx create mode 100644 packages/design-system/icons/src/components/bug.tsx create mode 100644 packages/design-system/icons/src/components/building-storefront.tsx create mode 100644 packages/design-system/icons/src/components/building-tax.tsx create mode 100644 packages/design-system/icons/src/components/buildings-mini.tsx create mode 100644 packages/design-system/icons/src/components/buildings-solid.tsx create mode 100644 packages/design-system/icons/src/components/buildings.tsx create mode 100644 packages/design-system/icons/src/components/calendar-mini.tsx create mode 100644 packages/design-system/icons/src/components/calendar-solid.tsx create mode 100644 packages/design-system/icons/src/components/calendar.tsx create mode 100644 packages/design-system/icons/src/components/camera.tsx create mode 100644 packages/design-system/icons/src/components/cash-solid.tsx create mode 100644 packages/design-system/icons/src/components/cash.tsx create mode 100644 packages/design-system/icons/src/components/channels-solid.tsx create mode 100644 packages/design-system/icons/src/components/channels.tsx create mode 100644 packages/design-system/icons/src/components/chart-bar.tsx create mode 100644 packages/design-system/icons/src/components/chat-bubble-left-right-solid.tsx create mode 100644 packages/design-system/icons/src/components/chat-bubble-left-right.tsx create mode 100644 packages/design-system/icons/src/components/chat-bubble.tsx create mode 100644 packages/design-system/icons/src/components/check-circle-mini-solid.tsx create mode 100644 packages/design-system/icons/src/components/check-circle-solid.tsx create mode 100644 packages/design-system/icons/src/components/check-mini.tsx create mode 100644 packages/design-system/icons/src/components/check.tsx create mode 100644 packages/design-system/icons/src/components/chevron-double-left-mini-solid.tsx create mode 100644 packages/design-system/icons/src/components/chevron-double-left.tsx create mode 100644 packages/design-system/icons/src/components/chevron-double-right-mini-solid.tsx create mode 100644 packages/design-system/icons/src/components/chevron-double-right.tsx create mode 100644 packages/design-system/icons/src/components/chevron-down-mini.tsx create mode 100644 packages/design-system/icons/src/components/chevron-down.tsx create mode 100644 packages/design-system/icons/src/components/chevron-left-mini.tsx create mode 100644 packages/design-system/icons/src/components/chevron-left.tsx create mode 100644 packages/design-system/icons/src/components/chevron-right-mini.tsx create mode 100644 packages/design-system/icons/src/components/chevron-right.tsx create mode 100644 packages/design-system/icons/src/components/chevron-up-down.tsx create mode 100644 packages/design-system/icons/src/components/chevron-up-mini.tsx create mode 100644 packages/design-system/icons/src/components/circle-dotted-line.tsx create mode 100644 packages/design-system/icons/src/components/circle-filled-solid.tsx create mode 100644 packages/design-system/icons/src/components/circle-half-solid.tsx create mode 100644 packages/design-system/icons/src/components/circle-mini-filled-solid.tsx create mode 100644 packages/design-system/icons/src/components/circle-mini-solid.tsx create mode 100644 packages/design-system/icons/src/components/circle-quarter-solid.tsx create mode 100644 packages/design-system/icons/src/components/circle-solid.tsx create mode 100644 packages/design-system/icons/src/components/circle-stack-solid.tsx create mode 100644 packages/design-system/icons/src/components/circle-stack.tsx create mode 100644 packages/design-system/icons/src/components/circle-three-quarters-solid.tsx create mode 100644 packages/design-system/icons/src/components/clock-changed-solid-mini.tsx create mode 100644 packages/design-system/icons/src/components/clock-solid-mini.tsx create mode 100644 packages/design-system/icons/src/components/clock-solid.tsx create mode 100644 packages/design-system/icons/src/components/clock.tsx create mode 100644 packages/design-system/icons/src/components/cloud-arrow-down.tsx create mode 100644 packages/design-system/icons/src/components/cloud-arrow-up.tsx create mode 100644 packages/design-system/icons/src/components/cog-six-tooth-solid.tsx create mode 100644 packages/design-system/icons/src/components/cog-six-tooth.tsx create mode 100644 packages/design-system/icons/src/components/command-line-solid.tsx create mode 100644 packages/design-system/icons/src/components/command-line.tsx create mode 100644 packages/design-system/icons/src/components/component-solid.tsx create mode 100644 packages/design-system/icons/src/components/component.tsx create mode 100644 packages/design-system/icons/src/components/computer-desktop-solid.tsx create mode 100644 packages/design-system/icons/src/components/computer-desktop.tsx create mode 100644 packages/design-system/icons/src/components/credit-card-solid.tsx create mode 100644 packages/design-system/icons/src/components/credit-card.tsx create mode 100644 packages/design-system/icons/src/components/cube-solid.tsx create mode 100644 packages/design-system/icons/src/components/currency-dollar-solid.tsx create mode 100644 packages/design-system/icons/src/components/currency-dollar.tsx create mode 100644 packages/design-system/icons/src/components/cursor-arrow-rays.tsx create mode 100644 packages/design-system/icons/src/components/discord.tsx create mode 100644 packages/design-system/icons/src/components/document-series.tsx create mode 100644 packages/design-system/icons/src/components/document-text-solid.tsx create mode 100644 packages/design-system/icons/src/components/document-text.tsx create mode 100644 packages/design-system/icons/src/components/dots-six.tsx create mode 100644 packages/design-system/icons/src/components/ellipse-blue-solid.tsx create mode 100644 packages/design-system/icons/src/components/ellipse-green-solid.tsx create mode 100644 packages/design-system/icons/src/components/ellipse-grey-solid.tsx create mode 100644 packages/design-system/icons/src/components/ellipse-mini-solid.tsx create mode 100644 packages/design-system/icons/src/components/ellipse-orange-solid.tsx create mode 100644 packages/design-system/icons/src/components/ellipse-purple-solid.tsx create mode 100644 packages/design-system/icons/src/components/ellipse-red-solid.tsx create mode 100644 packages/design-system/icons/src/components/ellipse-solid.tsx create mode 100644 packages/design-system/icons/src/components/ellipsis-horizontal.tsx create mode 100644 packages/design-system/icons/src/components/ellipsis-vertical.tsx create mode 100644 packages/design-system/icons/src/components/envelope-solid.tsx create mode 100644 packages/design-system/icons/src/components/envelope.tsx create mode 100644 packages/design-system/icons/src/components/exclamation-circle-solid.tsx create mode 100644 packages/design-system/icons/src/components/exclamation-circle.tsx create mode 100644 packages/design-system/icons/src/components/eye-mini.tsx create mode 100644 packages/design-system/icons/src/components/eye-slash-mini.tsx create mode 100644 packages/design-system/icons/src/components/eye-slash.tsx create mode 100644 packages/design-system/icons/src/components/eye.tsx create mode 100644 packages/design-system/icons/src/components/face-smile.tsx create mode 100644 packages/design-system/icons/src/components/facebook.tsx create mode 100644 packages/design-system/icons/src/components/figma.tsx create mode 100644 packages/design-system/icons/src/components/flying-box.tsx create mode 100644 packages/design-system/icons/src/components/folder-open.tsx create mode 100644 packages/design-system/icons/src/components/folder.tsx create mode 100644 packages/design-system/icons/src/components/forward-solid.tsx create mode 100644 packages/design-system/icons/src/components/funnel.tsx create mode 100644 packages/design-system/icons/src/components/gatsby-ex.tsx create mode 100644 packages/design-system/icons/src/components/gatsby.tsx create mode 100644 packages/design-system/icons/src/components/gift-solid.tsx create mode 100644 packages/design-system/icons/src/components/gift.tsx create mode 100644 packages/design-system/icons/src/components/github.tsx create mode 100644 packages/design-system/icons/src/components/globe-europe-solid.tsx create mode 100644 packages/design-system/icons/src/components/globe-europe.tsx create mode 100644 packages/design-system/icons/src/components/google.tsx create mode 100644 packages/design-system/icons/src/components/hashtag.tsx create mode 100644 packages/design-system/icons/src/components/heart.tsx create mode 100644 packages/design-system/icons/src/components/inbox-solid.tsx create mode 100644 packages/design-system/icons/src/components/index.ts create mode 100644 packages/design-system/icons/src/components/information-circle-solid.tsx create mode 100644 packages/design-system/icons/src/components/information-circle.tsx create mode 100644 packages/design-system/icons/src/components/javascript-ex.tsx create mode 100644 packages/design-system/icons/src/components/javascript.tsx create mode 100644 packages/design-system/icons/src/components/key-solid.tsx create mode 100644 packages/design-system/icons/src/components/key.tsx create mode 100644 packages/design-system/icons/src/components/klarna-ex.tsx create mode 100644 packages/design-system/icons/src/components/klarna.tsx create mode 100644 packages/design-system/icons/src/components/light-bulb-solid.tsx create mode 100644 packages/design-system/icons/src/components/light-bulb.tsx create mode 100644 packages/design-system/icons/src/components/link.tsx create mode 100644 packages/design-system/icons/src/components/linkedin.tsx create mode 100644 packages/design-system/icons/src/components/list-bullet.tsx create mode 100644 packages/design-system/icons/src/components/lock-closed-solid.tsx create mode 100644 packages/design-system/icons/src/components/lock-open-solid.tsx create mode 100644 packages/design-system/icons/src/components/magnifying-glass-mini.tsx create mode 100644 packages/design-system/icons/src/components/magnifying-glass.tsx create mode 100644 packages/design-system/icons/src/components/map-pin.tsx create mode 100644 packages/design-system/icons/src/components/map.tsx create mode 100644 packages/design-system/icons/src/components/medusa.tsx create mode 100644 packages/design-system/icons/src/components/minus-mini.tsx create mode 100644 packages/design-system/icons/src/components/minus.tsx create mode 100644 packages/design-system/icons/src/components/moon-solid.tsx create mode 100644 packages/design-system/icons/src/components/moon.tsx create mode 100644 packages/design-system/icons/src/components/newspaper.tsx create mode 100644 packages/design-system/icons/src/components/next-js.tsx create mode 100644 packages/design-system/icons/src/components/paper-clip.tsx create mode 100644 packages/design-system/icons/src/components/pause-solid.tsx create mode 100644 packages/design-system/icons/src/components/pencil-square-solid.tsx create mode 100644 packages/design-system/icons/src/components/pencil-square.tsx create mode 100644 packages/design-system/icons/src/components/pencil.tsx create mode 100644 packages/design-system/icons/src/components/phone.tsx create mode 100644 packages/design-system/icons/src/components/photo-solid.tsx create mode 100644 packages/design-system/icons/src/components/photo.tsx create mode 100644 packages/design-system/icons/src/components/play-mini-solid.tsx create mode 100644 packages/design-system/icons/src/components/play-solid.tsx create mode 100644 packages/design-system/icons/src/components/plus-mini.tsx create mode 100644 packages/design-system/icons/src/components/plus.tsx create mode 100644 packages/design-system/icons/src/components/puzzle-solid.tsx create mode 100644 packages/design-system/icons/src/components/puzzle.tsx create mode 100644 packages/design-system/icons/src/components/question-mark-circle.tsx create mode 100644 packages/design-system/icons/src/components/question-mark.tsx create mode 100644 packages/design-system/icons/src/components/react-js-ex.tsx create mode 100644 packages/design-system/icons/src/components/react-js.tsx create mode 100644 packages/design-system/icons/src/components/receipt-percent.tsx create mode 100644 packages/design-system/icons/src/components/replay-solid.tsx create mode 100644 packages/design-system/icons/src/components/resize.tsx create mode 100644 packages/design-system/icons/src/components/rocket-launch-solid.tsx create mode 100644 packages/design-system/icons/src/components/rocket-launch.tsx create mode 100644 packages/design-system/icons/src/components/rss.tsx create mode 100644 packages/design-system/icons/src/components/server-solid.tsx create mode 100644 packages/design-system/icons/src/components/server-stack-solid.tsx create mode 100644 packages/design-system/icons/src/components/server-stack.tsx create mode 100644 packages/design-system/icons/src/components/server.tsx create mode 100644 packages/design-system/icons/src/components/shopping-bag.tsx create mode 100644 packages/design-system/icons/src/components/shopping-cart-solid.tsx create mode 100644 packages/design-system/icons/src/components/shopping-cart.tsx create mode 100644 packages/design-system/icons/src/components/sidebar.tsx create mode 100644 packages/design-system/icons/src/components/slack.tsx create mode 100644 packages/design-system/icons/src/components/snooze.tsx create mode 100644 packages/design-system/icons/src/components/sparkles-mini-solid.tsx create mode 100644 packages/design-system/icons/src/components/sparkles-mini.tsx create mode 100644 packages/design-system/icons/src/components/sparkles-solid.tsx create mode 100644 packages/design-system/icons/src/components/sparkles.tsx create mode 100644 packages/design-system/icons/src/components/spinner.tsx create mode 100644 packages/design-system/icons/src/components/square-two-stack-mini.tsx create mode 100644 packages/design-system/icons/src/components/square-two-stack-solid.tsx create mode 100644 packages/design-system/icons/src/components/square-two-stack.tsx create mode 100644 packages/design-system/icons/src/components/squares-plus-solid.tsx create mode 100644 packages/design-system/icons/src/components/squares-plus.tsx create mode 100644 packages/design-system/icons/src/components/star-solid.tsx create mode 100644 packages/design-system/icons/src/components/star.tsx create mode 100644 packages/design-system/icons/src/components/stripe.tsx create mode 100644 packages/design-system/icons/src/components/sun-solid.tsx create mode 100644 packages/design-system/icons/src/components/sun.tsx create mode 100644 packages/design-system/icons/src/components/swatch-solid.tsx create mode 100644 packages/design-system/icons/src/components/swatch.tsx create mode 100644 packages/design-system/icons/src/components/tag-solid.tsx create mode 100644 packages/design-system/icons/src/components/tag.tsx create mode 100644 packages/design-system/icons/src/components/tailwind.tsx create mode 100644 packages/design-system/icons/src/components/text.tsx create mode 100644 packages/design-system/icons/src/components/thumb-down.tsx create mode 100644 packages/design-system/icons/src/components/thumb-up.tsx create mode 100644 packages/design-system/icons/src/components/tools-solid.tsx create mode 100644 packages/design-system/icons/src/components/tools.tsx create mode 100644 packages/design-system/icons/src/components/trash.tsx create mode 100644 packages/design-system/icons/src/components/triangle-down-mini.tsx create mode 100644 packages/design-system/icons/src/components/triangle-right-mini.tsx create mode 100644 packages/design-system/icons/src/components/twitter.tsx create mode 100644 packages/design-system/icons/src/components/typescript-ex.tsx create mode 100644 packages/design-system/icons/src/components/typescript.tsx create mode 100644 packages/design-system/icons/src/components/user-circle-mini.tsx create mode 100644 packages/design-system/icons/src/components/user-group.tsx create mode 100644 packages/design-system/icons/src/components/user.tsx create mode 100644 packages/design-system/icons/src/components/users-solid.tsx create mode 100644 packages/design-system/icons/src/components/users.tsx create mode 100644 packages/design-system/icons/src/components/vercel.tsx create mode 100644 packages/design-system/icons/src/components/window.tsx create mode 100644 packages/design-system/icons/src/components/x-circle-solid.tsx create mode 100644 packages/design-system/icons/src/components/x-mark-mini.tsx create mode 100644 packages/design-system/icons/src/components/x-mark.tsx create mode 100644 packages/design-system/icons/src/components/x.tsx create mode 100644 packages/design-system/icons/src/index.ts create mode 100644 packages/design-system/icons/src/types.ts create mode 100644 packages/design-system/icons/tsconfig.json create mode 100644 packages/design-system/icons/vite.config.ts create mode 100644 packages/design-system/toolbox/README.md create mode 100755 packages/design-system/toolbox/bin/toolbox.js create mode 100644 packages/design-system/toolbox/package.json create mode 100644 packages/design-system/toolbox/src/commands/icons/command.ts create mode 100644 packages/design-system/toolbox/src/commands/icons/utils/generate-index.ts create mode 100644 packages/design-system/toolbox/src/commands/icons/utils/get-icon-data.ts create mode 100644 packages/design-system/toolbox/src/commands/icons/utils/index.ts create mode 100644 packages/design-system/toolbox/src/commands/tokens/command.ts create mode 100644 packages/design-system/toolbox/src/commands/tokens/utils/colors.ts create mode 100644 packages/design-system/toolbox/src/commands/tokens/utils/effects.ts create mode 100644 packages/design-system/toolbox/src/constants.ts create mode 100644 packages/design-system/toolbox/src/create-cli.ts create mode 100644 packages/design-system/toolbox/src/figma-client.ts create mode 100644 packages/design-system/toolbox/src/figma/assertions.ts create mode 100644 packages/design-system/toolbox/src/figma/client.ts create mode 100644 packages/design-system/toolbox/src/figma/index.ts create mode 100644 packages/design-system/toolbox/src/figma/types.ts create mode 100644 packages/design-system/toolbox/src/figma/utils.ts create mode 100644 packages/design-system/toolbox/src/index.ts create mode 100644 packages/design-system/toolbox/src/logger.ts create mode 100644 packages/design-system/toolbox/src/templates/icon-templates.ts create mode 100644 packages/design-system/toolbox/src/templates/index.ts create mode 100644 packages/design-system/toolbox/src/transformers/index.ts create mode 100644 packages/design-system/toolbox/src/transformers/transform-svg.ts create mode 100644 packages/design-system/toolbox/tsconfig.json create mode 100644 packages/design-system/toolbox/tsup.config.ts create mode 100644 packages/design-system/ui-preset/.env.template create mode 100644 packages/design-system/ui-preset/CHANGELOG.md create mode 100644 packages/design-system/ui-preset/LICENSE create mode 100644 packages/design-system/ui-preset/README.md create mode 100644 packages/design-system/ui-preset/package.json create mode 100644 packages/design-system/ui-preset/src/constants.ts create mode 100644 packages/design-system/ui-preset/src/index.ts create mode 100644 packages/design-system/ui-preset/src/plugin.ts create mode 100644 packages/design-system/ui-preset/src/preset.ts create mode 100644 packages/design-system/ui-preset/src/theme/extension/theme.ts create mode 100644 packages/design-system/ui-preset/src/theme/tokens/colors.ts create mode 100644 packages/design-system/ui-preset/src/theme/tokens/components.ts create mode 100644 packages/design-system/ui-preset/src/theme/tokens/effects.ts create mode 100644 packages/design-system/ui-preset/src/theme/tokens/typography.ts create mode 100644 packages/design-system/ui-preset/tsconfig.json create mode 100644 packages/design-system/ui-preset/tsup.config.ts create mode 100644 packages/design-system/ui/.eslintignore create mode 100644 packages/design-system/ui/.gitignore create mode 100644 packages/design-system/ui/.storybook/main.ts create mode 100644 packages/design-system/ui/.storybook/preview.tsx create mode 100644 packages/design-system/ui/CHANGELOG.md create mode 100644 packages/design-system/ui/CONTRIBUTING.md create mode 100644 packages/design-system/ui/LICENSE create mode 100644 packages/design-system/ui/README.md create mode 100644 packages/design-system/ui/package.json create mode 100644 packages/design-system/ui/postcss.config.js create mode 100644 packages/design-system/ui/setup-test.ts create mode 100644 packages/design-system/ui/src/components/avatar/avatar.stories.tsx create mode 100644 packages/design-system/ui/src/components/avatar/avatar.tsx create mode 100644 packages/design-system/ui/src/components/avatar/index.ts create mode 100644 packages/design-system/ui/src/components/badge/badge.spec.tsx create mode 100644 packages/design-system/ui/src/components/badge/badge.stories.tsx create mode 100644 packages/design-system/ui/src/components/badge/badge.tsx create mode 100644 packages/design-system/ui/src/components/badge/index.ts create mode 100644 packages/design-system/ui/src/components/button/button.spec.tsx create mode 100644 packages/design-system/ui/src/components/button/button.stories.tsx create mode 100644 packages/design-system/ui/src/components/button/button.tsx create mode 100644 packages/design-system/ui/src/components/button/index.ts create mode 100644 packages/design-system/ui/src/components/calendar/calendar.stories.tsx create mode 100644 packages/design-system/ui/src/components/calendar/calendar.tsx create mode 100644 packages/design-system/ui/src/components/calendar/index.ts create mode 100644 packages/design-system/ui/src/components/checkbox/checkbox.spec.tsx create mode 100644 packages/design-system/ui/src/components/checkbox/checkbox.stories.tsx create mode 100644 packages/design-system/ui/src/components/checkbox/checkbox.tsx create mode 100644 packages/design-system/ui/src/components/checkbox/index.ts create mode 100644 packages/design-system/ui/src/components/code-block/code-block.stories.tsx create mode 100644 packages/design-system/ui/src/components/code-block/code-block.tsx create mode 100644 packages/design-system/ui/src/components/code-block/index.ts create mode 100644 packages/design-system/ui/src/components/code/code.stories.tsx create mode 100644 packages/design-system/ui/src/components/code/code.tsx create mode 100644 packages/design-system/ui/src/components/code/index.tsx create mode 100644 packages/design-system/ui/src/components/command-bar/command-bar.stories.tsx create mode 100644 packages/design-system/ui/src/components/command-bar/command-bar.tsx create mode 100644 packages/design-system/ui/src/components/command-bar/index.ts create mode 100644 packages/design-system/ui/src/components/command/command.stories.tsx create mode 100644 packages/design-system/ui/src/components/command/command.tsx create mode 100644 packages/design-system/ui/src/components/command/index.tsx create mode 100644 packages/design-system/ui/src/components/container/container.stories.tsx create mode 100644 packages/design-system/ui/src/components/container/container.tsx create mode 100644 packages/design-system/ui/src/components/container/index.ts create mode 100644 packages/design-system/ui/src/components/copy/copy.spec.tsx create mode 100644 packages/design-system/ui/src/components/copy/copy.stories.tsx create mode 100644 packages/design-system/ui/src/components/copy/copy.tsx create mode 100644 packages/design-system/ui/src/components/copy/index.tsx create mode 100644 packages/design-system/ui/src/components/currency-input/currency-input.stories.tsx create mode 100644 packages/design-system/ui/src/components/currency-input/currency-input.tsx create mode 100644 packages/design-system/ui/src/components/currency-input/index.ts create mode 100644 packages/design-system/ui/src/components/date-picker/date-picker.spec.tsx create mode 100644 packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx create mode 100644 packages/design-system/ui/src/components/date-picker/date-picker.tsx create mode 100644 packages/design-system/ui/src/components/date-picker/index.ts create mode 100644 packages/design-system/ui/src/components/drawer/drawer.stories.tsx create mode 100644 packages/design-system/ui/src/components/drawer/drawer.tsx create mode 100644 packages/design-system/ui/src/components/drawer/index.ts create mode 100644 packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.stories.tsx create mode 100644 packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx create mode 100644 packages/design-system/ui/src/components/dropdown-menu/index.ts create mode 100644 packages/design-system/ui/src/components/focus-modal/focus-modal.stories.tsx create mode 100644 packages/design-system/ui/src/components/focus-modal/focus-modal.tsx create mode 100644 packages/design-system/ui/src/components/focus-modal/index.ts create mode 100644 packages/design-system/ui/src/components/heading/heading.spec.tsx create mode 100644 packages/design-system/ui/src/components/heading/heading.stories.tsx create mode 100644 packages/design-system/ui/src/components/heading/heading.tsx create mode 100644 packages/design-system/ui/src/components/heading/index.ts create mode 100644 packages/design-system/ui/src/components/hint/hint.stories.tsx create mode 100644 packages/design-system/ui/src/components/hint/hint.tsx create mode 100644 packages/design-system/ui/src/components/hint/index.ts create mode 100644 packages/design-system/ui/src/components/icon-badge/icon-badge.stories.tsx create mode 100644 packages/design-system/ui/src/components/icon-badge/icon-badge.tsx create mode 100644 packages/design-system/ui/src/components/icon-badge/index.ts create mode 100644 packages/design-system/ui/src/components/icon-button/icon-button.spec.tsx create mode 100644 packages/design-system/ui/src/components/icon-button/icon-button.stories.tsx create mode 100644 packages/design-system/ui/src/components/icon-button/icon-button.tsx create mode 100644 packages/design-system/ui/src/components/icon-button/index.ts create mode 100644 packages/design-system/ui/src/components/input/index.ts create mode 100644 packages/design-system/ui/src/components/input/input.spec.tsx create mode 100644 packages/design-system/ui/src/components/input/input.stories.tsx create mode 100644 packages/design-system/ui/src/components/input/input.tsx create mode 100644 packages/design-system/ui/src/components/kbd/index.ts create mode 100644 packages/design-system/ui/src/components/kbd/kbd.stories.tsx create mode 100644 packages/design-system/ui/src/components/kbd/kbd.tsx create mode 100644 packages/design-system/ui/src/components/label/index.ts create mode 100644 packages/design-system/ui/src/components/label/label.spec.tsx create mode 100644 packages/design-system/ui/src/components/label/label.stories.tsx create mode 100644 packages/design-system/ui/src/components/label/label.tsx create mode 100644 packages/design-system/ui/src/components/popover/index.ts create mode 100644 packages/design-system/ui/src/components/popover/popover.tsx create mode 100644 packages/design-system/ui/src/components/progress-accordion/index.ts create mode 100644 packages/design-system/ui/src/components/progress-accordion/progress-accordion.stories.tsx create mode 100644 packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx create mode 100644 packages/design-system/ui/src/components/progress-tabs/index.ts create mode 100644 packages/design-system/ui/src/components/progress-tabs/progress-tabs.stories.tsx create mode 100644 packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx create mode 100644 packages/design-system/ui/src/components/prompt/index.ts create mode 100644 packages/design-system/ui/src/components/prompt/prompt.spec.tsx create mode 100644 packages/design-system/ui/src/components/prompt/prompt.stories.tsx create mode 100644 packages/design-system/ui/src/components/prompt/prompt.tsx create mode 100644 packages/design-system/ui/src/components/radio-group/index.ts create mode 100644 packages/design-system/ui/src/components/radio-group/radio-group.stories.tsx create mode 100644 packages/design-system/ui/src/components/radio-group/radio-group.tsx create mode 100644 packages/design-system/ui/src/components/select/index.ts create mode 100644 packages/design-system/ui/src/components/select/select.stories.tsx create mode 100644 packages/design-system/ui/src/components/select/select.tsx create mode 100644 packages/design-system/ui/src/components/status-badge/index.ts create mode 100644 packages/design-system/ui/src/components/status-badge/status-badge.stories.tsx create mode 100644 packages/design-system/ui/src/components/status-badge/status-badge.tsx create mode 100644 packages/design-system/ui/src/components/switch/index.ts create mode 100644 packages/design-system/ui/src/components/switch/switch.spec.tsx create mode 100644 packages/design-system/ui/src/components/switch/switch.stories.tsx create mode 100644 packages/design-system/ui/src/components/switch/switch.tsx create mode 100644 packages/design-system/ui/src/components/table/index.ts create mode 100644 packages/design-system/ui/src/components/table/table.stories.tsx create mode 100644 packages/design-system/ui/src/components/table/table.tsx create mode 100644 packages/design-system/ui/src/components/tabs/index.ts create mode 100644 packages/design-system/ui/src/components/tabs/tabs.stories.tsx create mode 100644 packages/design-system/ui/src/components/tabs/tabs.tsx create mode 100644 packages/design-system/ui/src/components/text/index.ts create mode 100644 packages/design-system/ui/src/components/text/text.spec.tsx create mode 100644 packages/design-system/ui/src/components/text/text.stories.tsx create mode 100644 packages/design-system/ui/src/components/text/text.tsx create mode 100644 packages/design-system/ui/src/components/textarea/index.ts create mode 100644 packages/design-system/ui/src/components/textarea/textarea.stories.tsx create mode 100644 packages/design-system/ui/src/components/textarea/textarea.tsx create mode 100644 packages/design-system/ui/src/components/time-input/index.ts create mode 100644 packages/design-system/ui/src/components/time-input/time-input.stories.tsx create mode 100644 packages/design-system/ui/src/components/time-input/time-input.tsx create mode 100644 packages/design-system/ui/src/components/toast/index.ts create mode 100644 packages/design-system/ui/src/components/toast/toast.stories.tsx create mode 100644 packages/design-system/ui/src/components/toast/toast.tsx create mode 100644 packages/design-system/ui/src/components/toaster/index.ts create mode 100644 packages/design-system/ui/src/components/toaster/toaster.tsx create mode 100644 packages/design-system/ui/src/components/tooltip/index.ts create mode 100644 packages/design-system/ui/src/components/tooltip/tooltip.spec.tsx create mode 100644 packages/design-system/ui/src/components/tooltip/tooltip.stories.tsx create mode 100644 packages/design-system/ui/src/components/tooltip/tooltip.tsx create mode 100644 packages/design-system/ui/src/hooks/use-prompt/dialog.tsx create mode 100644 packages/design-system/ui/src/hooks/use-prompt/index.ts create mode 100644 packages/design-system/ui/src/hooks/use-prompt/use-prompt.spec.tsx create mode 100644 packages/design-system/ui/src/hooks/use-prompt/use-prompt.stories.tsx create mode 100644 packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx create mode 100644 packages/design-system/ui/src/hooks/use-toast/index.ts create mode 100644 packages/design-system/ui/src/hooks/use-toast/use-toast.stories.tsx create mode 100644 packages/design-system/ui/src/hooks/use-toast/use-toast.tsx create mode 100644 packages/design-system/ui/src/hooks/use-toggle-state/index.ts create mode 100644 packages/design-system/ui/src/hooks/use-toggle-state/use-toggle-state.spec.tsx create mode 100644 packages/design-system/ui/src/hooks/use-toggle-state/use-toggle-state.stories.tsx create mode 100644 packages/design-system/ui/src/hooks/use-toggle-state/use-toggle-state.tsx create mode 100644 packages/design-system/ui/src/index.ts create mode 100644 packages/design-system/ui/src/main.css create mode 100644 packages/design-system/ui/src/types.ts create mode 100644 packages/design-system/ui/src/utils/clx.ts create mode 100644 packages/design-system/ui/src/utils/is-browser-locale-hour-cycle-24h.ts create mode 100644 packages/design-system/ui/tailwind.config.cjs create mode 100644 packages/design-system/ui/tsconfig.cjs.json create mode 100644 packages/design-system/ui/tsconfig.esm.json create mode 100644 packages/design-system/ui/tsconfig.json create mode 100644 packages/design-system/ui/vite.config.ts diff --git a/.changeset/old-otters-run.md b/.changeset/old-otters-run.md new file mode 100644 index 0000000000000..5fea91c91b175 --- /dev/null +++ b/.changeset/old-otters-run.md @@ -0,0 +1,5 @@ +--- +"medusa-payment-stripe": patch +--- + +fix(medusa-payment-stripe): Add missing dev/peer dependency on react table diff --git a/.eslintrc.js b/.eslintrc.js index ee219a0d44871..1f757251da28a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -126,6 +126,61 @@ module.exports = { "@typescript-eslint/no-var-requires": "off", }, }, + { + files: ["packages/design-system/ui/**/*.{ts,tsx}"], + extends: [ + "plugin:react/recommended", + "plugin:storybook/recommended", + "plugin:react-hooks/recommended", + "plugin:@typescript-eslint/recommended", + ], + plugins: ["@typescript-eslint"], + rules: { + "react/no-children-prop": "off", + "react-hooks/exhaustive-deps": "warn", + "react/prop-types": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-unused-vars": [ + "error", + { argsIgnorePattern: "^_" }, + ], + }, + settings: { + react: { + version: "detect", + }, + }, + parser: "@typescript-eslint/parser", + parserOptions: { + project: "./packages/design-system/ui/tsconfig.json", + }, + }, + { + files: ["packages/design-system/icons/**/*.{ts,tsx}"], + extends: [ + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + ], + plugins: ["@typescript-eslint"], + rules: { + "react/no-children-prop": "off", + "react/prop-types": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-unused-vars": [ + "error", + { argsIgnorePattern: "^_" }, + ], + }, + settings: { + react: { + version: "detect", + }, + }, + parser: "@typescript-eslint/parser", + parserOptions: { + project: "./packages/design-system/icons/tsconfig.json", + }, + }, { files: ["packages/admin-ui/ui/**/*.ts", "packages/admin-ui/ui/**/*.tsx"], plugins: ["unused-imports"], diff --git a/.gitignore b/.gitignore index eb87687bd32cc..9bddff74f0fb7 100644 --- a/.gitignore +++ b/.gitignore @@ -20,4 +20,5 @@ www/**/.yarn/* .idea .turbo build/** -**/dist \ No newline at end of file +**/dist +**/stats \ No newline at end of file diff --git a/.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch b/.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch new file mode 100644 index 0000000000000..31f3a2f88f25c --- /dev/null +++ b/.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch @@ -0,0 +1,71 @@ +diff --git a/dist/index.d.ts b/dist/index.d.ts +index 676e466a43ad8932cbb3131bb2c3dea687d47041..cbffdc5191bd8535468fdeaf68365845d15804ea 100644 +--- a/dist/index.d.ts ++++ b/dist/index.d.ts +@@ -1,21 +1,55 @@ ++import type * as CLSX from "clsx"; + import clsx from "clsx"; +-import type { ClassProp, ClassValue, OmitUndefined, StringToBoolean } from "./types"; +-export type VariantProps any> = Omit[0]>, "class" | "className">; ++ ++type ClassPropKey = "class" | "className"; ++type ClassValue = CLSX.ClassValue; ++type ClassProp = ++ | { ++ class: ClassValue; ++ className?: never; ++ } ++ | { ++ class?: never; ++ className: ClassValue; ++ } ++ | { ++ class?: never; ++ className?: never; ++ }; ++type OmitUndefined = T extends undefined ? never : T; ++type StringToBoolean = T extends "true" | "false" ? boolean : T; ++ ++export type VariantProps any> = Omit< ++ OmitUndefined[0]>, ++ "class" | "className" ++>; + export type CxOptions = Parameters; + export type CxReturn = ReturnType; + export declare const cx: typeof clsx; + type ConfigSchema = Record>; + type ConfigVariants = { +- [Variant in keyof T]?: StringToBoolean | null | undefined; ++ [Variant in keyof T]?: StringToBoolean | null | undefined; + }; + type ConfigVariantsMulti = { +- [Variant in keyof T]?: StringToBoolean | StringToBoolean[] | undefined; ++ [Variant in keyof T]?: ++ | StringToBoolean ++ | StringToBoolean[] ++ | undefined; + }; +-type Config = T extends ConfigSchema ? { +- variants?: T; +- defaultVariants?: ConfigVariants; +- compoundVariants?: (T extends ConfigSchema ? (ConfigVariants | ConfigVariantsMulti) & ClassProp : ClassProp)[]; +-} : never; +-type Props = T extends ConfigSchema ? ConfigVariants & ClassProp : ClassProp; +-export declare const cva: (base?: ClassValue, config?: Config | undefined) => (props?: Props | undefined) => string; ++type Config = T extends ConfigSchema ++ ? { ++ variants?: T; ++ defaultVariants?: ConfigVariants; ++ compoundVariants?: (T extends ConfigSchema ++ ? (ConfigVariants | ConfigVariantsMulti) & ClassProp ++ : ClassProp)[]; ++ } ++ : never; ++type Props = T extends ConfigSchema ++ ? ConfigVariants & ClassProp ++ : ClassProp; ++export declare const cva: ( ++ base?: ClassValue, ++ config?: Config | undefined ++) => (props?: Props | undefined) => string; + export {}; diff --git a/CODEOWNERS b/CODEOWNERS index 338067c7ef864..3eb0f0c4c3fa9 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -2,3 +2,4 @@ * @medusajs/core /docs/ @medusajs/docs /www/ @medusajs/docs +/packages/design-system/ @medusajs/ui diff --git a/package.json b/package.json index c975593f3bc40..6701ae07479a7 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "packages/medusa-js", "packages/medusa-react", "packages/*", + "packages/design-system/*", "packages/generated/*", "packages/oas/*", "integration-tests/**/*" @@ -37,6 +38,7 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-storybook": "^0.6.12", "eslint-plugin-unused-imports": "^2.0.0", "express": "^4.17.1", "get-port": "^5.1.1", @@ -90,6 +92,7 @@ "resolutions": { "@redocly/cli/react": "^17.0.1", "@redocly/cli/react-dom": "^17.0.1", - "pg": "8.10.0" + "pg": "8.10.0", + "class-variance-authority@0.6.1": "patch:class-variance-authority@npm:0.6.1#.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch" } } diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index 3eaae5a1ed670..f563ebc6a9b95 100644 --- a/packages/admin-ui/package.json +++ b/packages/admin-ui/package.json @@ -36,9 +36,9 @@ "@babel/traverse": "7.22.5", "@hookform/error-message": "^2.0.1", "@hookform/resolvers": "^3.3.1", - "@medusajs/icons": "1.1.0", - "@medusajs/ui": "^2.2.0", - "@medusajs/ui-preset": "1.0.2", + "@medusajs/icons": "workspace:^", + "@medusajs/ui": "workspace:^", + "@medusajs/ui-preset": "workspace:^", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10", "@radix-ui/react-accordion": "^1.0.1", "@radix-ui/react-avatar": "^1.0.1", diff --git a/packages/design-system/icons/.env.template b/packages/design-system/icons/.env.template new file mode 100644 index 0000000000000..3ebc5cc9d147a --- /dev/null +++ b/packages/design-system/icons/.env.template @@ -0,0 +1,2 @@ +# Docs: https://www.figma.com/developers/api#access-tokens +FIGMA_TOKEN= \ No newline at end of file diff --git a/packages/design-system/icons/CHANGELOG.md b/packages/design-system/icons/CHANGELOG.md new file mode 100644 index 0000000000000..0e50618207698 --- /dev/null +++ b/packages/design-system/icons/CHANGELOG.md @@ -0,0 +1,79 @@ +# @medusajs/icons + +## 1.1.0 + +### Minor Changes + +- 035fa72: feat(ui,ui-preset): Release 2.1.0 + + ## `@medusajs/ui` + + - The styling of buttons, inputs, and the CommandBar has been adjusted to have a more consistent look and feel. + - Fixed an issue that caused DropdownMenu.Content to overflow the viewport. + - Fixed an issue with the DatePicker component where deleting a time segment would throw an error. + - The Text component now accepts a `leading` prop to adjust the line height. It can be set to `normal` (default) or `compact`. This change in the API is fully backwards compatible. + - Adds a new subcomponent to RadioGroup called RadioGroup.ChoiceBox. This component wraps the RadioGroup.Item component with a mandatory label and description. + + ## `@medusajs/ui-preset` + + - Updated several colors, shadows, and gradient effects. + + ## `@medusajs/icons` + + - Introduces 6 new icons: QuestionMark, SparklesMiniSolid, SparklesMini, ThumbDown, ThumbUp, and UserCircleMini. + - There have been slight adjustments made to ArrowPathMini, EllipseBlueSolid, EllipseGreenSolid, EllipseGreySolid, EllipseOrangeSolid, EllipsePurpleSolid, and EllipseRedSolid. + +## 1.0.1 + +### Patch Changes + +- ef98084: feat(ui,icons,ui-preset): Update to Medusa UI, including new components, icons, and preset styles. + + # Changes in `@medusajs/ui` + + ## New components + + - `IconButton` - A button that only contains an icon. + - `IconBadge` - A badge that only contains an icon. + - `StatusBadge` - A badge component specifically designed to be used for displaying statuses. + - `Tabs` - A tab component that can be used to switch between different views. + - `ProgressTabs` - A tab component specifically designed to be used for building multi-step tasks. + - `ProgressAccordion` - An accordion component specifically designed to be used for building multi-step tasks. + - `CurrencyInput` - An input component that can be used to input currency values. + - `CommandBar` - A component that can be used to display a list of keyboard commands omn the screen. + - `CurrencyInput` - An input component that can be used to input currency values, such as prices. + + ## Breaking changes + + Several components have been reorganized to streamline their API. The following components have breaking changes: + + - Button - The `format` property has been removed. To create a Icon only button, use the new `IconButton` component. + - Badge - The `format` property has been removed. To create a Icon only badge, use the new `IconBadge` component. The border radius of the component is now controlled using the new `rounded` property. + - CodeBlock - The `hideLineNumbers` property has been moved to the `snippets` property. This allows users to control the visibility of line numbers on a per snippet basis. + + ## Other changes + + - The `z-index`'s of all components have been cleaned up to to make stacking portalled components easier. + - `Table.Pagination` has been tweaked to ensure that it displays the correct number of pages when there is no data. + - `Calendar` has been tweaked to prevent clicking a date from submitting any forms that precede it in the DOM. + + # Changes in `@medusajs/icons` + + ## New icons + + - `X` + - `AcademicCap` + - `Figma` + - `Photo` + - `PuzzleSolid` + - `Text` + + # Changes in `@medusajs/ui-preset` + + Minor tweaks to colors, typography, and animations. + +## 1.0.0 + +### Major Changes + +- 8d31ce6: Release of the Medusa UI design system, includes three new packages: `@medusajs/ui` a set of React components, hooks, and utils; `@medusajs/icons` a set of React icons; `@medusajs/ui-preset` a Tailwind CSS preset containing Medusa UI design tokens. diff --git a/packages/design-system/icons/LICENSE b/packages/design-system/icons/LICENSE new file mode 100644 index 0000000000000..422b1da232869 --- /dev/null +++ b/packages/design-system/icons/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2023 Medusajs + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/design-system/icons/README.md b/packages/design-system/icons/README.md new file mode 100644 index 0000000000000..6c82917d2aec2 --- /dev/null +++ b/packages/design-system/icons/README.md @@ -0,0 +1,48 @@ +

+ + + + + Medusa logo + + +

+

+ Medusa Icons +

+ +

+ Documentation | + Website +

+ +

+ Icons used in Medusa's design system. +

+

+ + Medusa is released under the MIT license. + + + Discord Chat + + + Follow @medusajs + +

+ +## Note + +This package is auto-generated, and requires a Figma token associated with the Medusa Figma organization. If you are a not a Medusa team member, you will not be able to make changes to this package. If you discover any issues please open an issue instead of a PR. + +## Installation + +```sh +yarn add @medusajs/icons +``` + +## Usage + +```jsx +import { Star } from "@medusajs/icons" +``` diff --git a/packages/design-system/icons/package.json b/packages/design-system/icons/package.json new file mode 100644 index 0000000000000..21b92604c7ecc --- /dev/null +++ b/packages/design-system/icons/package.json @@ -0,0 +1,64 @@ +{ + "name": "@medusajs/icons", + "version": "1.1.0", + "description": "Medusa UI React icon library", + "author": "Kasper Kristensen ", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/medusajs/medusa.git", + "directory": "packages/design-system/icons" + }, + "main": "dist/cjs/medusa-icons.js", + "main:umd": "dist/umd/medusa-icons.js", + "module": "dist/esm/index.js", + "unpkg": "dist/umd/medusa-icons.min.js", + "typings": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn build:bundles && yarn build:types", + "build:bundles": "rollup -c ./rollup.config.mjs", + "build:types": "tsc --emitDeclarationOnly", + "test": "vitest --run", + "test:watch": "vitest", + "test:coverage": "vitest --run --coverage", + "generate": "rimraf ./src/components && toolbox icons -o './src/components'" + }, + "devDependencies": { + "@atomico/rollup-plugin-sizes": "^1.1.4", + "@medusajs/toolbox": "^0.0.1", + "@rollup/plugin-node-resolve": "^15.1.0", + "@rollup/plugin-replace": "^5.0.2", + "@testing-library/dom": "^9.3.1", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^14.0.0", + "@types/jsdom": "^21.1.1", + "@types/react": "^18.2.14", + "@types/react-dom": "^18.2.6", + "esbuild": "^0.18.11", + "eslint": "^7.32.0", + "jsdom": "^22.1.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "resize-observer-polyfill": "^1.5.1", + "rimraf": "^5.0.1", + "rollup": "^3.26.0", + "rollup-plugin-esbuild": "^5.0.0", + "rollup-plugin-license": "^3.0.1", + "rollup-plugin-ts": "^3.2.0", + "rollup-plugin-visualizer": "^5.9.2", + "typescript": "^5.1.6", + "vite": "^4.3.9", + "vitest": "^0.32.2" + }, + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + }, + "packageManager": "yarn@3.5.0", + "publishConfig": { + "access": "public" + } +} diff --git a/packages/design-system/icons/rollup.config.mjs b/packages/design-system/icons/rollup.config.mjs new file mode 100644 index 0000000000000..9d73bda0cae66 --- /dev/null +++ b/packages/design-system/icons/rollup.config.mjs @@ -0,0 +1,103 @@ +import bundleSize from "@atomico/rollup-plugin-sizes" +import nodeResolve from "@rollup/plugin-node-resolve" +import replace from "@rollup/plugin-replace" +import esbuild from "rollup-plugin-esbuild" +import license from "rollup-plugin-license" +import { visualizer } from "rollup-plugin-visualizer" +import fs from "fs" +import path from "path" + +const pkg = JSON.parse(fs.readFileSync(path.resolve("./package.json"), "utf-8")) + +const plugins = (pkg, minify, esbuildOptions = {}) => + [ + esbuild({ + minify, + ...esbuildOptions, + }), + license({ + banner: `${pkg.name} v${pkg.version} - ${pkg.license}`, + }), + bundleSize(), + visualizer({ + sourcemap: true, + filename: `stats/${pkg.name}${minify ? "-min" : ""}.html`, + }), + nodeResolve(), + ].filter(Boolean) + +const packageName = pkg.name +const outputFileName = "medusa-icons" +const outputDir = "dist" +const inputs = ["src/components/index.ts"] + +const bundles = [ + { + format: "umd", + inputs, + outputDir, + minify: true, + sourcemap: true, + }, + { + format: "cjs", + inputs, + outputDir, + aliasesSupport: true, + sourcemap: true, + }, + { + format: "esm", + inputs, + outputDir, + preserveModules: true, + aliasesSupport: true, + sourcemap: true, + dir: `${outputDir}/esm`, // Update this line + }, +] + +const configs = bundles + .map( + ({ inputs, outputDir, format, minify, preserveModules, aliasesSupport }) => + inputs.map((input) => ({ + input, + plugins: [ + ...(!aliasesSupport + ? [ + replace({ + "export * from './aliases';": "", + "export * as icons from './icons';": "", + delimiters: ["", ""], + preventAssignment: false, + }), + ] + : []), + ...plugins(pkg, minify), + ], + external: ["react", "prop-types"], + output: { + name: packageName, + ...(preserveModules + ? { + dir: `${outputDir}/${format}`, + } + : { + file: `${outputDir}/${format}/${outputFileName}${ + minify ? ".min" : "" + }.js`, + }), + format, + sourcemap: true, + preserveModules, + globals: { + react: "react", + "prop-types": "PropTypes", + "react-jsx": "jsx", + }, + }, + })) + ) + .flat() + +export default configs diff --git a/packages/design-system/icons/setup-test.ts b/packages/design-system/icons/setup-test.ts new file mode 100644 index 0000000000000..d6509146dba92 --- /dev/null +++ b/packages/design-system/icons/setup-test.ts @@ -0,0 +1,14 @@ +import "@testing-library/jest-dom" +import { JSDOM } from "jsdom" +import ResizeObserver from "resize-observer-polyfill" + +const { window } = new JSDOM() + +window.ResizeObserver = ResizeObserver +global.ResizeObserver = ResizeObserver +window.Element.prototype.scrollTo = () => { + // no-op +} +window.requestAnimationFrame = (cb) => setTimeout(cb, 1000 / 60) + +Object.assign(global, { window, document: window.document }) diff --git a/packages/design-system/icons/src/components/__tests__/academic-cap-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/academic-cap-solid.spec.tsx new file mode 100644 index 0000000000000..556c6a635399a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/academic-cap-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import AcademicCapSolid from "../academic-cap-solid" + + describe("AcademicCapSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/academic-cap.spec.tsx b/packages/design-system/icons/src/components/__tests__/academic-cap.spec.tsx new file mode 100644 index 0000000000000..2f1870b60b929 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/academic-cap.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import AcademicCap from "../academic-cap" + + describe("AcademicCap", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/adjustments.spec.tsx b/packages/design-system/icons/src/components/__tests__/adjustments.spec.tsx new file mode 100644 index 0000000000000..7bca88ad3954e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/adjustments.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Adjustments from "../adjustments" + + describe("Adjustments", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/apple.spec.tsx b/packages/design-system/icons/src/components/__tests__/apple.spec.tsx new file mode 100644 index 0000000000000..35cbad5a087b0 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/apple.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Apple from "../apple" + + describe("Apple", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/archive-box.spec.tsx b/packages/design-system/icons/src/components/__tests__/archive-box.spec.tsx new file mode 100644 index 0000000000000..4278fa82d86d9 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/archive-box.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArchiveBox from "../archive-box" + + describe("ArchiveBox", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-circle.spec.tsx new file mode 100644 index 0000000000000..035192a08451f --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-down-circle.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowDownCircle from "../arrow-down-circle" + + describe("ArrowDownCircle", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-left-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-left-mini.spec.tsx new file mode 100644 index 0000000000000..bde4b5ae66367 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-down-left-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowDownLeftMini from "../arrow-down-left-mini" + + describe("ArrowDownLeftMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-left.spec.tsx new file mode 100644 index 0000000000000..4c01374b9788a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-down-left.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowDownLeft from "../arrow-down-left" + + describe("ArrowDownLeft", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-mini.spec.tsx new file mode 100644 index 0000000000000..cee35898d008a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-down-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowDownMini from "../arrow-down-mini" + + describe("ArrowDownMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-right-mini.spec.tsx new file mode 100644 index 0000000000000..02df8833e53bf --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-down-right-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowDownRightMini from "../arrow-down-right-mini" + + describe("ArrowDownRightMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-tray.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-tray.spec.tsx new file mode 100644 index 0000000000000..60a4e9635bd2a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-down-tray.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowDownTray from "../arrow-down-tray" + + describe("ArrowDownTray", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down.spec.tsx new file mode 100644 index 0000000000000..d983ccea7c70e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-down.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowDown from "../arrow-down" + + describe("ArrowDown", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-left-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-left-mini.spec.tsx new file mode 100644 index 0000000000000..14c531affa3d7 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-left-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowLeftMini from "../arrow-left-mini" + + describe("ArrowLeftMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-left.spec.tsx new file mode 100644 index 0000000000000..29abb62ce7380 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-left.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowLeft from "../arrow-left" + + describe("ArrowLeft", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-long-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-long-down.spec.tsx new file mode 100644 index 0000000000000..e30cbe9a67193 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-long-down.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowLongDown from "../arrow-long-down" + + describe("ArrowLongDown", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-long-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-long-left.spec.tsx new file mode 100644 index 0000000000000..95298f773cd53 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-long-left.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowLongLeft from "../arrow-long-left" + + describe("ArrowLongLeft", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-long-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-long-right.spec.tsx new file mode 100644 index 0000000000000..9ff29841b1759 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-long-right.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowLongRight from "../arrow-long-right" + + describe("ArrowLongRight", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-long-up.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-long-up.spec.tsx new file mode 100644 index 0000000000000..9dfcdd3889d1d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-long-up.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowLongUp from "../arrow-long-up" + + describe("ArrowLongUp", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-path-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-path-mini.spec.tsx new file mode 100644 index 0000000000000..d534f0d4f97d6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-path-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowPathMini from "../arrow-path-mini" + + describe("ArrowPathMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-path.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-path.spec.tsx new file mode 100644 index 0000000000000..2309565e77df3 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-path.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowPath from "../arrow-path" + + describe("ArrowPath", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-right-mini.spec.tsx new file mode 100644 index 0000000000000..f927f6c098810 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-right-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowRightMini from "../arrow-right-mini" + + describe("ArrowRightMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-right-on-rectangle.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-right-on-rectangle.spec.tsx new file mode 100644 index 0000000000000..2ce51e4632b9a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-right-on-rectangle.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowRightOnRectangle from "../arrow-right-on-rectangle" + + describe("ArrowRightOnRectangle", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-circle-solid.spec.tsx new file mode 100644 index 0000000000000..056c99aa5c24c --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-up-circle-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowUpCircleSolid from "../arrow-up-circle-solid" + + describe("ArrowUpCircleSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-down.spec.tsx new file mode 100644 index 0000000000000..f1afec7e9ac09 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-up-down.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowUpDown from "../arrow-up-down" + + describe("ArrowUpDown", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-mini.spec.tsx new file mode 100644 index 0000000000000..bb174e16ca267 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-up-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowUpMini from "../arrow-up-mini" + + describe("ArrowUpMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-right-mini.spec.tsx new file mode 100644 index 0000000000000..0c0af2a762ae4 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-up-right-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowUpRightMini from "../arrow-up-right-mini" + + describe("ArrowUpRightMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-right-on-box.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-right-on-box.spec.tsx new file mode 100644 index 0000000000000..9382524a5f107 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-up-right-on-box.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowUpRightOnBox from "../arrow-up-right-on-box" + + describe("ArrowUpRightOnBox", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-tray.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-tray.spec.tsx new file mode 100644 index 0000000000000..8975750767ea5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-up-tray.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowUpTray from "../arrow-up-tray" + + describe("ArrowUpTray", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrow-uturn-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-uturn-left.spec.tsx new file mode 100644 index 0000000000000..d75c7b45759a0 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrow-uturn-left.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowUturnLeft from "../arrow-uturn-left" + + describe("ArrowUturnLeft", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrows-pointing-out-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrows-pointing-out-mini.spec.tsx new file mode 100644 index 0000000000000..b33e72e7e40e0 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrows-pointing-out-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowsPointingOutMini from "../arrows-pointing-out-mini" + + describe("ArrowsPointingOutMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrows-pointing-out.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrows-pointing-out.spec.tsx new file mode 100644 index 0000000000000..8db16567fc219 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrows-pointing-out.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrowsPointingOut from "../arrows-pointing-out" + + describe("ArrowsPointingOut", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx new file mode 100644 index 0000000000000..a787a1800f5a4 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ArrrowRight from "../arrrow-right" + + describe("ArrrowRight", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/at-symbol.spec.tsx b/packages/design-system/icons/src/components/__tests__/at-symbol.spec.tsx new file mode 100644 index 0000000000000..379ba44be2e14 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/at-symbol.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import AtSymbol from "../at-symbol" + + describe("AtSymbol", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/backward-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/backward-solid.spec.tsx new file mode 100644 index 0000000000000..9fc989126101d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/backward-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BackwardSolid from "../backward-solid" + + describe("BackwardSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/bars-three.spec.tsx b/packages/design-system/icons/src/components/__tests__/bars-three.spec.tsx new file mode 100644 index 0000000000000..005d5bd4df7b9 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/bars-three.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BarsThree from "../bars-three" + + describe("BarsThree", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/bell-alert-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/bell-alert-solid.spec.tsx new file mode 100644 index 0000000000000..5047d86ede6c4 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/bell-alert-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BellAlertSolid from "../bell-alert-solid" + + describe("BellAlertSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/bell-alert.spec.tsx b/packages/design-system/icons/src/components/__tests__/bell-alert.spec.tsx new file mode 100644 index 0000000000000..ccf989c70a379 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/bell-alert.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BellAlert from "../bell-alert" + + describe("BellAlert", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/bolt-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/bolt-solid.spec.tsx new file mode 100644 index 0000000000000..19bc2fa5b92c7 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/bolt-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BoltSolid from "../bolt-solid" + + describe("BoltSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/bolt.spec.tsx b/packages/design-system/icons/src/components/__tests__/bolt.spec.tsx new file mode 100644 index 0000000000000..5502825dc27f6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/bolt.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Bolt from "../bolt" + + describe("Bolt", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/book-open.spec.tsx b/packages/design-system/icons/src/components/__tests__/book-open.spec.tsx new file mode 100644 index 0000000000000..2a6b7adf9af76 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/book-open.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BookOpen from "../book-open" + + describe("BookOpen", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/bug-ant-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/bug-ant-solid.spec.tsx new file mode 100644 index 0000000000000..2239def735d3c --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/bug-ant-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BugAntSolid from "../bug-ant-solid" + + describe("BugAntSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/bug.spec.tsx b/packages/design-system/icons/src/components/__tests__/bug.spec.tsx new file mode 100644 index 0000000000000..2313d4a92aef3 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/bug.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Bug from "../bug" + + describe("Bug", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/building-storefront.spec.tsx b/packages/design-system/icons/src/components/__tests__/building-storefront.spec.tsx new file mode 100644 index 0000000000000..e6ac06362108f --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/building-storefront.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BuildingStorefront from "../building-storefront" + + describe("BuildingStorefront", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/building-tax.spec.tsx b/packages/design-system/icons/src/components/__tests__/building-tax.spec.tsx new file mode 100644 index 0000000000000..5528526dde05f --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/building-tax.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BuildingTax from "../building-tax" + + describe("BuildingTax", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/buildings-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/buildings-mini.spec.tsx new file mode 100644 index 0000000000000..938fe98ae473e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/buildings-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BuildingsMini from "../buildings-mini" + + describe("BuildingsMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/buildings-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/buildings-solid.spec.tsx new file mode 100644 index 0000000000000..cb5d6f9921f21 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/buildings-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import BuildingsSolid from "../buildings-solid" + + describe("BuildingsSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/buildings.spec.tsx b/packages/design-system/icons/src/components/__tests__/buildings.spec.tsx new file mode 100644 index 0000000000000..4ac4a8a0c7c4b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/buildings.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Buildings from "../buildings" + + describe("Buildings", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/calendar-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/calendar-mini.spec.tsx new file mode 100644 index 0000000000000..2189aa5645753 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/calendar-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CalendarMini from "../calendar-mini" + + describe("CalendarMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/calendar-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/calendar-solid.spec.tsx new file mode 100644 index 0000000000000..321084c3ed454 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/calendar-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CalendarSolid from "../calendar-solid" + + describe("CalendarSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/calendar.spec.tsx b/packages/design-system/icons/src/components/__tests__/calendar.spec.tsx new file mode 100644 index 0000000000000..2a83fbefb8efd --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/calendar.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Calendar from "../calendar" + + describe("Calendar", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/camera.spec.tsx b/packages/design-system/icons/src/components/__tests__/camera.spec.tsx new file mode 100644 index 0000000000000..3f329df64192e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/camera.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Camera from "../camera" + + describe("Camera", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/cash-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/cash-solid.spec.tsx new file mode 100644 index 0000000000000..db495bd239e74 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/cash-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CashSolid from "../cash-solid" + + describe("CashSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/cash.spec.tsx b/packages/design-system/icons/src/components/__tests__/cash.spec.tsx new file mode 100644 index 0000000000000..5d5fedbcdbad1 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/cash.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Cash from "../cash" + + describe("Cash", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/channels-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/channels-solid.spec.tsx new file mode 100644 index 0000000000000..513fbba5edf8e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/channels-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChannelsSolid from "../channels-solid" + + describe("ChannelsSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/channels.spec.tsx b/packages/design-system/icons/src/components/__tests__/channels.spec.tsx new file mode 100644 index 0000000000000..8be7936092c56 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/channels.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Channels from "../channels" + + describe("Channels", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chart-bar.spec.tsx b/packages/design-system/icons/src/components/__tests__/chart-bar.spec.tsx new file mode 100644 index 0000000000000..2fbd704d1ffd8 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chart-bar.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChartBar from "../chart-bar" + + describe("ChartBar", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right-solid.spec.tsx new file mode 100644 index 0000000000000..19dcc277ac475 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChatBubbleLeftRightSolid from "../chat-bubble-left-right-solid" + + describe("ChatBubbleLeftRightSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right.spec.tsx new file mode 100644 index 0000000000000..5623d1ecebdd7 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChatBubbleLeftRight from "../chat-bubble-left-right" + + describe("ChatBubbleLeftRight", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chat-bubble.spec.tsx b/packages/design-system/icons/src/components/__tests__/chat-bubble.spec.tsx new file mode 100644 index 0000000000000..4f446d9fff0e5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chat-bubble.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChatBubble from "../chat-bubble" + + describe("ChatBubble", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/check-circle-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/check-circle-mini-solid.spec.tsx new file mode 100644 index 0000000000000..0cab24c2123d6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/check-circle-mini-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CheckCircleMiniSolid from "../check-circle-mini-solid" + + describe("CheckCircleMiniSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/check-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/check-circle-solid.spec.tsx new file mode 100644 index 0000000000000..9ce54e82c4aa3 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/check-circle-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CheckCircleSolid from "../check-circle-solid" + + describe("CheckCircleSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/check-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/check-mini.spec.tsx new file mode 100644 index 0000000000000..5d155897f80be --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/check-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CheckMini from "../check-mini" + + describe("CheckMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/check.spec.tsx b/packages/design-system/icons/src/components/__tests__/check.spec.tsx new file mode 100644 index 0000000000000..b979efe31b27c --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/check.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Check from "../check" + + describe("Check", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-double-left-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-double-left-mini-solid.spec.tsx new file mode 100644 index 0000000000000..194bd7148c332 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-double-left-mini-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronDoubleLeftMiniSolid from "../chevron-double-left-mini-solid" + + describe("ChevronDoubleLeftMiniSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-double-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-double-left.spec.tsx new file mode 100644 index 0000000000000..b97923c2a6214 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-double-left.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronDoubleLeft from "../chevron-double-left" + + describe("ChevronDoubleLeft", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-double-right-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-double-right-mini-solid.spec.tsx new file mode 100644 index 0000000000000..fdbd9245e7805 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-double-right-mini-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronDoubleRightMiniSolid from "../chevron-double-right-mini-solid" + + describe("ChevronDoubleRightMiniSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-double-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-double-right.spec.tsx new file mode 100644 index 0000000000000..a021523388c4d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-double-right.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronDoubleRight from "../chevron-double-right" + + describe("ChevronDoubleRight", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-down-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-down-mini.spec.tsx new file mode 100644 index 0000000000000..f120cd306489b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-down-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronDownMini from "../chevron-down-mini" + + describe("ChevronDownMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-down.spec.tsx new file mode 100644 index 0000000000000..f420fa314a001 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-down.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronDown from "../chevron-down" + + describe("ChevronDown", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-left-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-left-mini.spec.tsx new file mode 100644 index 0000000000000..0c2f1cc52ade9 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-left-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronLeftMini from "../chevron-left-mini" + + describe("ChevronLeftMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-left.spec.tsx new file mode 100644 index 0000000000000..ce547f59122fd --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-left.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronLeft from "../chevron-left" + + describe("ChevronLeft", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-right-mini.spec.tsx new file mode 100644 index 0000000000000..c279d11587207 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-right-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronRightMini from "../chevron-right-mini" + + describe("ChevronRightMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-right.spec.tsx new file mode 100644 index 0000000000000..661d8abdd4a03 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-right.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronRight from "../chevron-right" + + describe("ChevronRight", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-up-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-up-down.spec.tsx new file mode 100644 index 0000000000000..1c5cae25607c3 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-up-down.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronUpDown from "../chevron-up-down" + + describe("ChevronUpDown", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/chevron-up-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-up-mini.spec.tsx new file mode 100644 index 0000000000000..1fd13096a7b69 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/chevron-up-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ChevronUpMini from "../chevron-up-mini" + + describe("ChevronUpMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-dotted-line.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-dotted-line.spec.tsx new file mode 100644 index 0000000000000..73fda1f054140 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-dotted-line.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleDottedLine from "../circle-dotted-line" + + describe("CircleDottedLine", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-filled-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-filled-solid.spec.tsx new file mode 100644 index 0000000000000..5b183f049d1f5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-filled-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleFilledSolid from "../circle-filled-solid" + + describe("CircleFilledSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-half-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-half-solid.spec.tsx new file mode 100644 index 0000000000000..5e1c2b619b523 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-half-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleHalfSolid from "../circle-half-solid" + + describe("CircleHalfSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-mini-filled-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-mini-filled-solid.spec.tsx new file mode 100644 index 0000000000000..d9a9882aa3dbc --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-mini-filled-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleMiniFilledSolid from "../circle-mini-filled-solid" + + describe("CircleMiniFilledSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-mini-solid.spec.tsx new file mode 100644 index 0000000000000..bdfc5320fd4cf --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-mini-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleMiniSolid from "../circle-mini-solid" + + describe("CircleMiniSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-quarter-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-quarter-solid.spec.tsx new file mode 100644 index 0000000000000..e93acd1da2aba --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-quarter-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleQuarterSolid from "../circle-quarter-solid" + + describe("CircleQuarterSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-solid.spec.tsx new file mode 100644 index 0000000000000..c64bd6f1dd66e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleSolid from "../circle-solid" + + describe("CircleSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-stack-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-stack-solid.spec.tsx new file mode 100644 index 0000000000000..13f2d8e6476e9 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-stack-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleStackSolid from "../circle-stack-solid" + + describe("CircleStackSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-stack.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-stack.spec.tsx new file mode 100644 index 0000000000000..0e5d540e83d16 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-stack.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleStack from "../circle-stack" + + describe("CircleStack", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/circle-three-quarters-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-three-quarters-solid.spec.tsx new file mode 100644 index 0000000000000..021099e37343b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/circle-three-quarters-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CircleThreeQuartersSolid from "../circle-three-quarters-solid" + + describe("CircleThreeQuartersSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/clock-changed-solid-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/clock-changed-solid-mini.spec.tsx new file mode 100644 index 0000000000000..9eeb68231ed78 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/clock-changed-solid-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ClockChangedSolidMini from "../clock-changed-solid-mini" + + describe("ClockChangedSolidMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/clock-solid-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/clock-solid-mini.spec.tsx new file mode 100644 index 0000000000000..3a8d46eeebf20 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/clock-solid-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ClockSolidMini from "../clock-solid-mini" + + describe("ClockSolidMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/clock-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/clock-solid.spec.tsx new file mode 100644 index 0000000000000..ab4b42d611040 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/clock-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ClockSolid from "../clock-solid" + + describe("ClockSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/clock.spec.tsx b/packages/design-system/icons/src/components/__tests__/clock.spec.tsx new file mode 100644 index 0000000000000..e1713f7377839 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/clock.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Clock from "../clock" + + describe("Clock", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/cloud-arrow-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/cloud-arrow-down.spec.tsx new file mode 100644 index 0000000000000..c366c89e3fae0 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/cloud-arrow-down.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CloudArrowDown from "../cloud-arrow-down" + + describe("CloudArrowDown", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/cloud-arrow-up.spec.tsx b/packages/design-system/icons/src/components/__tests__/cloud-arrow-up.spec.tsx new file mode 100644 index 0000000000000..256c3bda560f2 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/cloud-arrow-up.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CloudArrowUp from "../cloud-arrow-up" + + describe("CloudArrowUp", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/cog-six-tooth-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/cog-six-tooth-solid.spec.tsx new file mode 100644 index 0000000000000..8f7de53ccc094 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/cog-six-tooth-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CogSixToothSolid from "../cog-six-tooth-solid" + + describe("CogSixToothSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/cog-six-tooth.spec.tsx b/packages/design-system/icons/src/components/__tests__/cog-six-tooth.spec.tsx new file mode 100644 index 0000000000000..ed58ac87db0b3 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/cog-six-tooth.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CogSixTooth from "../cog-six-tooth" + + describe("CogSixTooth", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/command-line-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/command-line-solid.spec.tsx new file mode 100644 index 0000000000000..d1de824d77939 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/command-line-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CommandLineSolid from "../command-line-solid" + + describe("CommandLineSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/command-line.spec.tsx b/packages/design-system/icons/src/components/__tests__/command-line.spec.tsx new file mode 100644 index 0000000000000..09384495120da --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/command-line.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CommandLine from "../command-line" + + describe("CommandLine", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/component-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/component-solid.spec.tsx new file mode 100644 index 0000000000000..b27cd9aa5eba1 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/component-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ComponentSolid from "../component-solid" + + describe("ComponentSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/component.spec.tsx b/packages/design-system/icons/src/components/__tests__/component.spec.tsx new file mode 100644 index 0000000000000..b9d15b2f3efbb --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/component.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Component from "../component" + + describe("Component", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/computer-desktop-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/computer-desktop-solid.spec.tsx new file mode 100644 index 0000000000000..26e111b13c48a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/computer-desktop-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ComputerDesktopSolid from "../computer-desktop-solid" + + describe("ComputerDesktopSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/computer-desktop.spec.tsx b/packages/design-system/icons/src/components/__tests__/computer-desktop.spec.tsx new file mode 100644 index 0000000000000..e163cc55695dd --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/computer-desktop.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ComputerDesktop from "../computer-desktop" + + describe("ComputerDesktop", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/credit-card-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/credit-card-solid.spec.tsx new file mode 100644 index 0000000000000..9af9852841a0f --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/credit-card-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CreditCardSolid from "../credit-card-solid" + + describe("CreditCardSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/credit-card.spec.tsx b/packages/design-system/icons/src/components/__tests__/credit-card.spec.tsx new file mode 100644 index 0000000000000..cd7249700719e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/credit-card.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CreditCard from "../credit-card" + + describe("CreditCard", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/cube-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/cube-solid.spec.tsx new file mode 100644 index 0000000000000..73ed02173c284 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/cube-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CubeSolid from "../cube-solid" + + describe("CubeSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/currency-dollar-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/currency-dollar-solid.spec.tsx new file mode 100644 index 0000000000000..a0bedb4bd4655 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/currency-dollar-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CurrencyDollarSolid from "../currency-dollar-solid" + + describe("CurrencyDollarSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/currency-dollar.spec.tsx b/packages/design-system/icons/src/components/__tests__/currency-dollar.spec.tsx new file mode 100644 index 0000000000000..816de68c1d83a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/currency-dollar.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CurrencyDollar from "../currency-dollar" + + describe("CurrencyDollar", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/cursor-arrow-rays.spec.tsx b/packages/design-system/icons/src/components/__tests__/cursor-arrow-rays.spec.tsx new file mode 100644 index 0000000000000..bf94249d11992 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/cursor-arrow-rays.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import CursorArrowRays from "../cursor-arrow-rays" + + describe("CursorArrowRays", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/discord.spec.tsx b/packages/design-system/icons/src/components/__tests__/discord.spec.tsx new file mode 100644 index 0000000000000..e4208edd0e485 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/discord.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Discord from "../discord" + + describe("Discord", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/document-series.spec.tsx b/packages/design-system/icons/src/components/__tests__/document-series.spec.tsx new file mode 100644 index 0000000000000..bd8c1d752c453 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/document-series.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import DocumentSeries from "../document-series" + + describe("DocumentSeries", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/document-text-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/document-text-solid.spec.tsx new file mode 100644 index 0000000000000..c2321beb0f604 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/document-text-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import DocumentTextSolid from "../document-text-solid" + + describe("DocumentTextSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/document-text.spec.tsx b/packages/design-system/icons/src/components/__tests__/document-text.spec.tsx new file mode 100644 index 0000000000000..cbc967d0e255f --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/document-text.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import DocumentText from "../document-text" + + describe("DocumentText", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/dots-six.spec.tsx b/packages/design-system/icons/src/components/__tests__/dots-six.spec.tsx new file mode 100644 index 0000000000000..60ad58308ccb9 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/dots-six.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import DotsSix from "../dots-six" + + describe("DotsSix", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-blue-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-blue-solid.spec.tsx new file mode 100644 index 0000000000000..cca3eadfb6576 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipse-blue-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipseBlueSolid from "../ellipse-blue-solid" + + describe("EllipseBlueSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-green-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-green-solid.spec.tsx new file mode 100644 index 0000000000000..100460a2a239e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipse-green-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipseGreenSolid from "../ellipse-green-solid" + + describe("EllipseGreenSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-grey-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-grey-solid.spec.tsx new file mode 100644 index 0000000000000..9abc1a2d95d97 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipse-grey-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipseGreySolid from "../ellipse-grey-solid" + + describe("EllipseGreySolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-mini-solid.spec.tsx new file mode 100644 index 0000000000000..9d2323d2105a1 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipse-mini-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipseMiniSolid from "../ellipse-mini-solid" + + describe("EllipseMiniSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-orange-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-orange-solid.spec.tsx new file mode 100644 index 0000000000000..69739932cabb9 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipse-orange-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipseOrangeSolid from "../ellipse-orange-solid" + + describe("EllipseOrangeSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-purple-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-purple-solid.spec.tsx new file mode 100644 index 0000000000000..a18781ffe825c --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipse-purple-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipsePurpleSolid from "../ellipse-purple-solid" + + describe("EllipsePurpleSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-red-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-red-solid.spec.tsx new file mode 100644 index 0000000000000..4305fa6828a40 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipse-red-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipseRedSolid from "../ellipse-red-solid" + + describe("EllipseRedSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-solid.spec.tsx new file mode 100644 index 0000000000000..80739383379b9 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipse-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipseSolid from "../ellipse-solid" + + describe("EllipseSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipsis-horizontal.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipsis-horizontal.spec.tsx new file mode 100644 index 0000000000000..8dc45b736e2ee --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipsis-horizontal.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipsisHorizontal from "../ellipsis-horizontal" + + describe("EllipsisHorizontal", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/ellipsis-vertical.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipsis-vertical.spec.tsx new file mode 100644 index 0000000000000..de093e048323d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/ellipsis-vertical.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EllipsisVertical from "../ellipsis-vertical" + + describe("EllipsisVertical", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/envelope-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/envelope-solid.spec.tsx new file mode 100644 index 0000000000000..6c0424c598be6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/envelope-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EnvelopeSolid from "../envelope-solid" + + describe("EnvelopeSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/envelope.spec.tsx b/packages/design-system/icons/src/components/__tests__/envelope.spec.tsx new file mode 100644 index 0000000000000..2e17a89825269 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/envelope.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Envelope from "../envelope" + + describe("Envelope", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/exclamation-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/exclamation-circle-solid.spec.tsx new file mode 100644 index 0000000000000..4278abdb4b679 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/exclamation-circle-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ExclamationCircleSolid from "../exclamation-circle-solid" + + describe("ExclamationCircleSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/exclamation-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/exclamation-circle.spec.tsx new file mode 100644 index 0000000000000..2c7c61dc54b72 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/exclamation-circle.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ExclamationCircle from "../exclamation-circle" + + describe("ExclamationCircle", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/eye-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/eye-mini.spec.tsx new file mode 100644 index 0000000000000..222c99fab5ccd --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/eye-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EyeMini from "../eye-mini" + + describe("EyeMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/eye-slash-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/eye-slash-mini.spec.tsx new file mode 100644 index 0000000000000..1eeff839e4ad5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/eye-slash-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EyeSlashMini from "../eye-slash-mini" + + describe("EyeSlashMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/eye-slash.spec.tsx b/packages/design-system/icons/src/components/__tests__/eye-slash.spec.tsx new file mode 100644 index 0000000000000..f3f70ff47923d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/eye-slash.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import EyeSlash from "../eye-slash" + + describe("EyeSlash", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/eye.spec.tsx b/packages/design-system/icons/src/components/__tests__/eye.spec.tsx new file mode 100644 index 0000000000000..b670224cc4788 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/eye.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Eye from "../eye" + + describe("Eye", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/face-smile.spec.tsx b/packages/design-system/icons/src/components/__tests__/face-smile.spec.tsx new file mode 100644 index 0000000000000..f5370c6c50edb --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/face-smile.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import FaceSmile from "../face-smile" + + describe("FaceSmile", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/facebook.spec.tsx b/packages/design-system/icons/src/components/__tests__/facebook.spec.tsx new file mode 100644 index 0000000000000..31573de45cb2b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/facebook.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Facebook from "../facebook" + + describe("Facebook", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/figma.spec.tsx b/packages/design-system/icons/src/components/__tests__/figma.spec.tsx new file mode 100644 index 0000000000000..69530492dee62 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/figma.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Figma from "../figma" + + describe("Figma", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/flying-box.spec.tsx b/packages/design-system/icons/src/components/__tests__/flying-box.spec.tsx new file mode 100644 index 0000000000000..ec1fca4221db2 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/flying-box.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import FlyingBox from "../flying-box" + + describe("FlyingBox", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/folder-open.spec.tsx b/packages/design-system/icons/src/components/__tests__/folder-open.spec.tsx new file mode 100644 index 0000000000000..93bd21425a684 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/folder-open.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import FolderOpen from "../folder-open" + + describe("FolderOpen", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/folder.spec.tsx b/packages/design-system/icons/src/components/__tests__/folder.spec.tsx new file mode 100644 index 0000000000000..0e77d5f4bd961 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/folder.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Folder from "../folder" + + describe("Folder", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/forward-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/forward-solid.spec.tsx new file mode 100644 index 0000000000000..8e46b1fbb2d59 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/forward-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ForwardSolid from "../forward-solid" + + describe("ForwardSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/funnel.spec.tsx b/packages/design-system/icons/src/components/__tests__/funnel.spec.tsx new file mode 100644 index 0000000000000..70f940555145b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/funnel.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Funnel from "../funnel" + + describe("Funnel", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/gatsby-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/gatsby-ex.spec.tsx new file mode 100644 index 0000000000000..71bceea433ab1 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/gatsby-ex.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import GatsbyEx from "../gatsby-ex" + + describe("GatsbyEx", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/gatsby.spec.tsx b/packages/design-system/icons/src/components/__tests__/gatsby.spec.tsx new file mode 100644 index 0000000000000..fe48570b4a5a5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/gatsby.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Gatsby from "../gatsby" + + describe("Gatsby", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/gift-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/gift-solid.spec.tsx new file mode 100644 index 0000000000000..e97fec1853487 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/gift-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import GiftSolid from "../gift-solid" + + describe("GiftSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/gift.spec.tsx b/packages/design-system/icons/src/components/__tests__/gift.spec.tsx new file mode 100644 index 0000000000000..a97887504cc2d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/gift.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Gift from "../gift" + + describe("Gift", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/github.spec.tsx b/packages/design-system/icons/src/components/__tests__/github.spec.tsx new file mode 100644 index 0000000000000..1d6f68a14ab72 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/github.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Github from "../github" + + describe("Github", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/globe-europe-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/globe-europe-solid.spec.tsx new file mode 100644 index 0000000000000..31567f4b5d49a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/globe-europe-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import GlobeEuropeSolid from "../globe-europe-solid" + + describe("GlobeEuropeSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/globe-europe.spec.tsx b/packages/design-system/icons/src/components/__tests__/globe-europe.spec.tsx new file mode 100644 index 0000000000000..510d1e4bfc765 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/globe-europe.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import GlobeEurope from "../globe-europe" + + describe("GlobeEurope", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/google.spec.tsx b/packages/design-system/icons/src/components/__tests__/google.spec.tsx new file mode 100644 index 0000000000000..4a90ad4c7a44f --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/google.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Google from "../google" + + describe("Google", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/hashtag.spec.tsx b/packages/design-system/icons/src/components/__tests__/hashtag.spec.tsx new file mode 100644 index 0000000000000..3b484946b062a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/hashtag.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Hashtag from "../hashtag" + + describe("Hashtag", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/heart.spec.tsx b/packages/design-system/icons/src/components/__tests__/heart.spec.tsx new file mode 100644 index 0000000000000..64fe3a716f9de --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/heart.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Heart from "../heart" + + describe("Heart", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/inbox-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/inbox-solid.spec.tsx new file mode 100644 index 0000000000000..292719f98bc96 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/inbox-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import InboxSolid from "../inbox-solid" + + describe("InboxSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/information-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/information-circle-solid.spec.tsx new file mode 100644 index 0000000000000..4fcdb8fd63608 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/information-circle-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import InformationCircleSolid from "../information-circle-solid" + + describe("InformationCircleSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/information-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/information-circle.spec.tsx new file mode 100644 index 0000000000000..4e1a927e348bf --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/information-circle.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import InformationCircle from "../information-circle" + + describe("InformationCircle", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/javascript-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/javascript-ex.spec.tsx new file mode 100644 index 0000000000000..7397f3f347f82 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/javascript-ex.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import JavascriptEx from "../javascript-ex" + + describe("JavascriptEx", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/javascript.spec.tsx b/packages/design-system/icons/src/components/__tests__/javascript.spec.tsx new file mode 100644 index 0000000000000..264376216a8c4 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/javascript.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Javascript from "../javascript" + + describe("Javascript", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/key-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/key-solid.spec.tsx new file mode 100644 index 0000000000000..43bdd1f1dffa7 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/key-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import KeySolid from "../key-solid" + + describe("KeySolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/key.spec.tsx b/packages/design-system/icons/src/components/__tests__/key.spec.tsx new file mode 100644 index 0000000000000..8137673b6d4ef --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/key.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Key from "../key" + + describe("Key", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/klarna-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/klarna-ex.spec.tsx new file mode 100644 index 0000000000000..17399b83333bf --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/klarna-ex.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import KlarnaEx from "../klarna-ex" + + describe("KlarnaEx", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/klarna.spec.tsx b/packages/design-system/icons/src/components/__tests__/klarna.spec.tsx new file mode 100644 index 0000000000000..6cbc5f0dc277d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/klarna.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Klarna from "../klarna" + + describe("Klarna", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/light-bulb-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/light-bulb-solid.spec.tsx new file mode 100644 index 0000000000000..bbbc9b401bb92 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/light-bulb-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import LightBulbSolid from "../light-bulb-solid" + + describe("LightBulbSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/light-bulb.spec.tsx b/packages/design-system/icons/src/components/__tests__/light-bulb.spec.tsx new file mode 100644 index 0000000000000..7e1519d636a3a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/light-bulb.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import LightBulb from "../light-bulb" + + describe("LightBulb", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/link.spec.tsx b/packages/design-system/icons/src/components/__tests__/link.spec.tsx new file mode 100644 index 0000000000000..ce153b411dd02 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/link.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Link from "../link" + + describe("Link", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/linkedin.spec.tsx b/packages/design-system/icons/src/components/__tests__/linkedin.spec.tsx new file mode 100644 index 0000000000000..b3d7fec0ec39d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/linkedin.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Linkedin from "../linkedin" + + describe("Linkedin", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/list-bullet.spec.tsx b/packages/design-system/icons/src/components/__tests__/list-bullet.spec.tsx new file mode 100644 index 0000000000000..fbb0d9b786ec5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/list-bullet.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ListBullet from "../list-bullet" + + describe("ListBullet", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/lock-closed-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/lock-closed-solid.spec.tsx new file mode 100644 index 0000000000000..14d1694b60490 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/lock-closed-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import LockClosedSolid from "../lock-closed-solid" + + describe("LockClosedSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/lock-open-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/lock-open-solid.spec.tsx new file mode 100644 index 0000000000000..c21da783aa47c --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/lock-open-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import LockOpenSolid from "../lock-open-solid" + + describe("LockOpenSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/magnifying-glass-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/magnifying-glass-mini.spec.tsx new file mode 100644 index 0000000000000..a446d3bb99bcd --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/magnifying-glass-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import MagnifyingGlassMini from "../magnifying-glass-mini" + + describe("MagnifyingGlassMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/magnifying-glass.spec.tsx b/packages/design-system/icons/src/components/__tests__/magnifying-glass.spec.tsx new file mode 100644 index 0000000000000..5e75279292348 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/magnifying-glass.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import MagnifyingGlass from "../magnifying-glass" + + describe("MagnifyingGlass", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/map-pin.spec.tsx b/packages/design-system/icons/src/components/__tests__/map-pin.spec.tsx new file mode 100644 index 0000000000000..4ee98f0c9500b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/map-pin.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import MapPin from "../map-pin" + + describe("MapPin", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/map.spec.tsx b/packages/design-system/icons/src/components/__tests__/map.spec.tsx new file mode 100644 index 0000000000000..244376853de27 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/map.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Map from "../map" + + describe("Map", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/medusa.spec.tsx b/packages/design-system/icons/src/components/__tests__/medusa.spec.tsx new file mode 100644 index 0000000000000..95e343ad3b00e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/medusa.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Medusa from "../medusa" + + describe("Medusa", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/minus-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/minus-mini.spec.tsx new file mode 100644 index 0000000000000..1c550045e43b7 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/minus-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import MinusMini from "../minus-mini" + + describe("MinusMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/minus.spec.tsx b/packages/design-system/icons/src/components/__tests__/minus.spec.tsx new file mode 100644 index 0000000000000..336e73deb9b24 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/minus.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Minus from "../minus" + + describe("Minus", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/moon-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/moon-solid.spec.tsx new file mode 100644 index 0000000000000..572f52183f8aa --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/moon-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import MoonSolid from "../moon-solid" + + describe("MoonSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/moon.spec.tsx b/packages/design-system/icons/src/components/__tests__/moon.spec.tsx new file mode 100644 index 0000000000000..4818a01b83681 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/moon.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Moon from "../moon" + + describe("Moon", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/newspaper.spec.tsx b/packages/design-system/icons/src/components/__tests__/newspaper.spec.tsx new file mode 100644 index 0000000000000..9065e390f0afa --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/newspaper.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Newspaper from "../newspaper" + + describe("Newspaper", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/next-js.spec.tsx b/packages/design-system/icons/src/components/__tests__/next-js.spec.tsx new file mode 100644 index 0000000000000..3297a5d2f876e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/next-js.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import NextJs from "../next-js" + + describe("NextJs", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/paper-clip.spec.tsx b/packages/design-system/icons/src/components/__tests__/paper-clip.spec.tsx new file mode 100644 index 0000000000000..ad96afb788b07 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/paper-clip.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import PaperClip from "../paper-clip" + + describe("PaperClip", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/pause-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/pause-solid.spec.tsx new file mode 100644 index 0000000000000..0d45043856c9b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/pause-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import PauseSolid from "../pause-solid" + + describe("PauseSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/pencil-square-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/pencil-square-solid.spec.tsx new file mode 100644 index 0000000000000..cf3d817b6bfa9 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/pencil-square-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import PencilSquareSolid from "../pencil-square-solid" + + describe("PencilSquareSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/pencil-square.spec.tsx b/packages/design-system/icons/src/components/__tests__/pencil-square.spec.tsx new file mode 100644 index 0000000000000..d355a78f877af --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/pencil-square.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import PencilSquare from "../pencil-square" + + describe("PencilSquare", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/pencil.spec.tsx b/packages/design-system/icons/src/components/__tests__/pencil.spec.tsx new file mode 100644 index 0000000000000..49eac38d97ff8 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/pencil.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Pencil from "../pencil" + + describe("Pencil", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/phone.spec.tsx b/packages/design-system/icons/src/components/__tests__/phone.spec.tsx new file mode 100644 index 0000000000000..073f98d1a20c2 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/phone.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Phone from "../phone" + + describe("Phone", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/photo-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/photo-solid.spec.tsx new file mode 100644 index 0000000000000..001a381d103a6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/photo-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import PhotoSolid from "../photo-solid" + + describe("PhotoSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/photo.spec.tsx b/packages/design-system/icons/src/components/__tests__/photo.spec.tsx new file mode 100644 index 0000000000000..2e8c5b1658ab5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/photo.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Photo from "../photo" + + describe("Photo", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/play-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/play-mini-solid.spec.tsx new file mode 100644 index 0000000000000..f6bc5aa9d28d0 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/play-mini-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import PlayMiniSolid from "../play-mini-solid" + + describe("PlayMiniSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/play-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/play-solid.spec.tsx new file mode 100644 index 0000000000000..0828166513081 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/play-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import PlaySolid from "../play-solid" + + describe("PlaySolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/plus-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/plus-mini.spec.tsx new file mode 100644 index 0000000000000..1617f6f5bb0d1 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/plus-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import PlusMini from "../plus-mini" + + describe("PlusMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/plus.spec.tsx b/packages/design-system/icons/src/components/__tests__/plus.spec.tsx new file mode 100644 index 0000000000000..2e73169ac7ca6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/plus.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Plus from "../plus" + + describe("Plus", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/puzzle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/puzzle-solid.spec.tsx new file mode 100644 index 0000000000000..e5c5aed663523 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/puzzle-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import PuzzleSolid from "../puzzle-solid" + + describe("PuzzleSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/puzzle.spec.tsx b/packages/design-system/icons/src/components/__tests__/puzzle.spec.tsx new file mode 100644 index 0000000000000..2ff99f5d31197 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/puzzle.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Puzzle from "../puzzle" + + describe("Puzzle", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/question-mark-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/question-mark-circle.spec.tsx new file mode 100644 index 0000000000000..a6fe2db92466b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/question-mark-circle.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import QuestionMarkCircle from "../question-mark-circle" + + describe("QuestionMarkCircle", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/question-mark.spec.tsx b/packages/design-system/icons/src/components/__tests__/question-mark.spec.tsx new file mode 100644 index 0000000000000..a599ffa9866f1 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/question-mark.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import QuestionMark from "../question-mark" + + describe("QuestionMark", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/react-js-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/react-js-ex.spec.tsx new file mode 100644 index 0000000000000..5e013275d816b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/react-js-ex.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ReactJsEx from "../react-js-ex" + + describe("ReactJsEx", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/react-js.spec.tsx b/packages/design-system/icons/src/components/__tests__/react-js.spec.tsx new file mode 100644 index 0000000000000..1c32718836553 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/react-js.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ReactJs from "../react-js" + + describe("ReactJs", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/receipt-percent.spec.tsx b/packages/design-system/icons/src/components/__tests__/receipt-percent.spec.tsx new file mode 100644 index 0000000000000..a90a0d70b7682 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/receipt-percent.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ReceiptPercent from "../receipt-percent" + + describe("ReceiptPercent", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/replay-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/replay-solid.spec.tsx new file mode 100644 index 0000000000000..d3affbd7a90c6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/replay-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ReplaySolid from "../replay-solid" + + describe("ReplaySolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/resize.spec.tsx b/packages/design-system/icons/src/components/__tests__/resize.spec.tsx new file mode 100644 index 0000000000000..cd9249b704585 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/resize.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Resize from "../resize" + + describe("Resize", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/rocket-launch-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/rocket-launch-solid.spec.tsx new file mode 100644 index 0000000000000..e55ae78218311 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/rocket-launch-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import RocketLaunchSolid from "../rocket-launch-solid" + + describe("RocketLaunchSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/rocket-launch.spec.tsx b/packages/design-system/icons/src/components/__tests__/rocket-launch.spec.tsx new file mode 100644 index 0000000000000..b32f1c048bae5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/rocket-launch.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import RocketLaunch from "../rocket-launch" + + describe("RocketLaunch", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/rss.spec.tsx b/packages/design-system/icons/src/components/__tests__/rss.spec.tsx new file mode 100644 index 0000000000000..6e429f1bb136f --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/rss.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Rss from "../rss" + + describe("Rss", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/server-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/server-solid.spec.tsx new file mode 100644 index 0000000000000..d9b44b3994580 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/server-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ServerSolid from "../server-solid" + + describe("ServerSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/server-stack-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/server-stack-solid.spec.tsx new file mode 100644 index 0000000000000..46ef17f8e522e --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/server-stack-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ServerStackSolid from "../server-stack-solid" + + describe("ServerStackSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/server-stack.spec.tsx b/packages/design-system/icons/src/components/__tests__/server-stack.spec.tsx new file mode 100644 index 0000000000000..e246b91bb9056 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/server-stack.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ServerStack from "../server-stack" + + describe("ServerStack", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/server.spec.tsx b/packages/design-system/icons/src/components/__tests__/server.spec.tsx new file mode 100644 index 0000000000000..f66d614c446e2 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/server.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Server from "../server" + + describe("Server", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/shopping-bag.spec.tsx b/packages/design-system/icons/src/components/__tests__/shopping-bag.spec.tsx new file mode 100644 index 0000000000000..b276fdde0e844 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/shopping-bag.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ShoppingBag from "../shopping-bag" + + describe("ShoppingBag", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/shopping-cart-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/shopping-cart-solid.spec.tsx new file mode 100644 index 0000000000000..95a13eb9859e1 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/shopping-cart-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ShoppingCartSolid from "../shopping-cart-solid" + + describe("ShoppingCartSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/shopping-cart.spec.tsx b/packages/design-system/icons/src/components/__tests__/shopping-cart.spec.tsx new file mode 100644 index 0000000000000..20ec520aecc32 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/shopping-cart.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ShoppingCart from "../shopping-cart" + + describe("ShoppingCart", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/sidebar.spec.tsx b/packages/design-system/icons/src/components/__tests__/sidebar.spec.tsx new file mode 100644 index 0000000000000..c61caae767597 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/sidebar.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Sidebar from "../sidebar" + + describe("Sidebar", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/slack.spec.tsx b/packages/design-system/icons/src/components/__tests__/slack.spec.tsx new file mode 100644 index 0000000000000..ecf208e3acfee --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/slack.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Slack from "../slack" + + describe("Slack", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/snooze.spec.tsx b/packages/design-system/icons/src/components/__tests__/snooze.spec.tsx new file mode 100644 index 0000000000000..1fad3a8dd6269 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/snooze.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Snooze from "../snooze" + + describe("Snooze", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/sparkles-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/sparkles-mini-solid.spec.tsx new file mode 100644 index 0000000000000..e7095c2f7be83 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/sparkles-mini-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SparklesMiniSolid from "../sparkles-mini-solid" + + describe("SparklesMiniSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/sparkles-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/sparkles-mini.spec.tsx new file mode 100644 index 0000000000000..f0b7479558b19 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/sparkles-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SparklesMini from "../sparkles-mini" + + describe("SparklesMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/sparkles-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/sparkles-solid.spec.tsx new file mode 100644 index 0000000000000..f4de02b87fe4d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/sparkles-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SparklesSolid from "../sparkles-solid" + + describe("SparklesSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/sparkles.spec.tsx b/packages/design-system/icons/src/components/__tests__/sparkles.spec.tsx new file mode 100644 index 0000000000000..3f257a96adcee --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/sparkles.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Sparkles from "../sparkles" + + describe("Sparkles", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/spinner.spec.tsx b/packages/design-system/icons/src/components/__tests__/spinner.spec.tsx new file mode 100644 index 0000000000000..0f588f840b188 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/spinner.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Spinner from "../spinner" + + describe("Spinner", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/square-two-stack-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/square-two-stack-mini.spec.tsx new file mode 100644 index 0000000000000..142d539a4cc9c --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/square-two-stack-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SquareTwoStackMini from "../square-two-stack-mini" + + describe("SquareTwoStackMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/square-two-stack-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/square-two-stack-solid.spec.tsx new file mode 100644 index 0000000000000..97ad1278bd84d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/square-two-stack-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SquareTwoStackSolid from "../square-two-stack-solid" + + describe("SquareTwoStackSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/square-two-stack.spec.tsx b/packages/design-system/icons/src/components/__tests__/square-two-stack.spec.tsx new file mode 100644 index 0000000000000..b01ecc2a7b17d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/square-two-stack.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SquareTwoStack from "../square-two-stack" + + describe("SquareTwoStack", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/squares-plus-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/squares-plus-solid.spec.tsx new file mode 100644 index 0000000000000..163200290e02b --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/squares-plus-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SquaresPlusSolid from "../squares-plus-solid" + + describe("SquaresPlusSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/squares-plus.spec.tsx b/packages/design-system/icons/src/components/__tests__/squares-plus.spec.tsx new file mode 100644 index 0000000000000..65fb312b749ef --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/squares-plus.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SquaresPlus from "../squares-plus" + + describe("SquaresPlus", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/star-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/star-solid.spec.tsx new file mode 100644 index 0000000000000..5f436dd579bdf --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/star-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import StarSolid from "../star-solid" + + describe("StarSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/star.spec.tsx b/packages/design-system/icons/src/components/__tests__/star.spec.tsx new file mode 100644 index 0000000000000..67c450f53bb13 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/star.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Star from "../star" + + describe("Star", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/stripe.spec.tsx b/packages/design-system/icons/src/components/__tests__/stripe.spec.tsx new file mode 100644 index 0000000000000..8a91494de3148 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/stripe.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Stripe from "../stripe" + + describe("Stripe", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/sun-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/sun-solid.spec.tsx new file mode 100644 index 0000000000000..1c15be1eb726d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/sun-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SunSolid from "../sun-solid" + + describe("SunSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/sun.spec.tsx b/packages/design-system/icons/src/components/__tests__/sun.spec.tsx new file mode 100644 index 0000000000000..6b12df6330b17 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/sun.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Sun from "../sun" + + describe("Sun", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/swatch-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/swatch-solid.spec.tsx new file mode 100644 index 0000000000000..3750fecd99faa --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/swatch-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import SwatchSolid from "../swatch-solid" + + describe("SwatchSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/swatch.spec.tsx b/packages/design-system/icons/src/components/__tests__/swatch.spec.tsx new file mode 100644 index 0000000000000..51943c5f00696 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/swatch.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Swatch from "../swatch" + + describe("Swatch", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/tag-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/tag-solid.spec.tsx new file mode 100644 index 0000000000000..63a15ae853ea1 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/tag-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import TagSolid from "../tag-solid" + + describe("TagSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/tag.spec.tsx b/packages/design-system/icons/src/components/__tests__/tag.spec.tsx new file mode 100644 index 0000000000000..bd7dbb4a859e6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/tag.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Tag from "../tag" + + describe("Tag", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/tailwind.spec.tsx b/packages/design-system/icons/src/components/__tests__/tailwind.spec.tsx new file mode 100644 index 0000000000000..19cd0571368a2 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/tailwind.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Tailwind from "../tailwind" + + describe("Tailwind", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/text.spec.tsx b/packages/design-system/icons/src/components/__tests__/text.spec.tsx new file mode 100644 index 0000000000000..f1f1b450b30fa --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/text.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Text from "../text" + + describe("Text", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/thumb-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/thumb-down.spec.tsx new file mode 100644 index 0000000000000..e089f59b1eb8c --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/thumb-down.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ThumbDown from "../thumb-down" + + describe("ThumbDown", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/thumb-up.spec.tsx b/packages/design-system/icons/src/components/__tests__/thumb-up.spec.tsx new file mode 100644 index 0000000000000..80b38623507cc --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/thumb-up.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ThumbUp from "../thumb-up" + + describe("ThumbUp", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/tools-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/tools-solid.spec.tsx new file mode 100644 index 0000000000000..e04e0cc6cd42d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/tools-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ToolsSolid from "../tools-solid" + + describe("ToolsSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/tools.spec.tsx b/packages/design-system/icons/src/components/__tests__/tools.spec.tsx new file mode 100644 index 0000000000000..2c4533efda9dd --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/tools.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Tools from "../tools" + + describe("Tools", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/trash.spec.tsx b/packages/design-system/icons/src/components/__tests__/trash.spec.tsx new file mode 100644 index 0000000000000..461fb5cda70c4 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/trash.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Trash from "../trash" + + describe("Trash", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/triangle-down-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/triangle-down-mini.spec.tsx new file mode 100644 index 0000000000000..f34ebcb9ad609 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/triangle-down-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import TriangleDownMini from "../triangle-down-mini" + + describe("TriangleDownMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/triangle-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/triangle-right-mini.spec.tsx new file mode 100644 index 0000000000000..499c0b227dd68 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/triangle-right-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import TriangleRightMini from "../triangle-right-mini" + + describe("TriangleRightMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/twitter.spec.tsx b/packages/design-system/icons/src/components/__tests__/twitter.spec.tsx new file mode 100644 index 0000000000000..a7623820393c8 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/twitter.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Twitter from "../twitter" + + describe("Twitter", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/typescript-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/typescript-ex.spec.tsx new file mode 100644 index 0000000000000..a30e6453178d2 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/typescript-ex.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import TypescriptEx from "../typescript-ex" + + describe("TypescriptEx", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/typescript.spec.tsx b/packages/design-system/icons/src/components/__tests__/typescript.spec.tsx new file mode 100644 index 0000000000000..3ca38fe2d89a5 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/typescript.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Typescript from "../typescript" + + describe("Typescript", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/user-circle-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/user-circle-mini.spec.tsx new file mode 100644 index 0000000000000..73bcfd1d9a870 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/user-circle-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import UserCircleMini from "../user-circle-mini" + + describe("UserCircleMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/user-group.spec.tsx b/packages/design-system/icons/src/components/__tests__/user-group.spec.tsx new file mode 100644 index 0000000000000..1a39be05fe83f --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/user-group.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import UserGroup from "../user-group" + + describe("UserGroup", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/user.spec.tsx b/packages/design-system/icons/src/components/__tests__/user.spec.tsx new file mode 100644 index 0000000000000..a1d6def039346 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/user.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import User from "../user" + + describe("User", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/users-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/users-solid.spec.tsx new file mode 100644 index 0000000000000..f20d5b3b93424 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/users-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import UsersSolid from "../users-solid" + + describe("UsersSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/users.spec.tsx b/packages/design-system/icons/src/components/__tests__/users.spec.tsx new file mode 100644 index 0000000000000..962581e9e5193 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/users.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Users from "../users" + + describe("Users", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/vercel.spec.tsx b/packages/design-system/icons/src/components/__tests__/vercel.spec.tsx new file mode 100644 index 0000000000000..389a7a003a9db --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/vercel.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Vercel from "../vercel" + + describe("Vercel", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/window.spec.tsx b/packages/design-system/icons/src/components/__tests__/window.spec.tsx new file mode 100644 index 0000000000000..efd175027091a --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/window.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import Window from "../window" + + describe("Window", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/x-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/x-circle-solid.spec.tsx new file mode 100644 index 0000000000000..b5721ad97bba6 --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/x-circle-solid.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import XCircleSolid from "../x-circle-solid" + + describe("XCircleSolid", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/x-mark-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/x-mark-mini.spec.tsx new file mode 100644 index 0000000000000..acafddb31997d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/x-mark-mini.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import XMarkMini from "../x-mark-mini" + + describe("XMarkMini", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/x-mark.spec.tsx b/packages/design-system/icons/src/components/__tests__/x-mark.spec.tsx new file mode 100644 index 0000000000000..07566667ad3cb --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/x-mark.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import XMark from "../x-mark" + + describe("XMark", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/__tests__/x.spec.tsx b/packages/design-system/icons/src/components/__tests__/x.spec.tsx new file mode 100644 index 0000000000000..c51b935f8b09d --- /dev/null +++ b/packages/design-system/icons/src/components/__tests__/x.spec.tsx @@ -0,0 +1,17 @@ + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import X from "../x" + + describe("X", () => { + it("should render without crashing", async () => { + render() + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) \ No newline at end of file diff --git a/packages/design-system/icons/src/components/academic-cap-solid.tsx b/packages/design-system/icons/src/components/academic-cap-solid.tsx new file mode 100644 index 0000000000000..aba3634a49440 --- /dev/null +++ b/packages/design-system/icons/src/components/academic-cap-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const AcademicCapSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +AcademicCapSolid.displayName = "AcademicCapSolid" +export default AcademicCapSolid diff --git a/packages/design-system/icons/src/components/academic-cap.tsx b/packages/design-system/icons/src/components/academic-cap.tsx new file mode 100644 index 0000000000000..0d593a5c1f36c --- /dev/null +++ b/packages/design-system/icons/src/components/academic-cap.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const AcademicCap = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +AcademicCap.displayName = "AcademicCap" +export default AcademicCap diff --git a/packages/design-system/icons/src/components/adjustments.tsx b/packages/design-system/icons/src/components/adjustments.tsx new file mode 100644 index 0000000000000..50d6c300604a4 --- /dev/null +++ b/packages/design-system/icons/src/components/adjustments.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Adjustments = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Adjustments.displayName = "Adjustments" +export default Adjustments diff --git a/packages/design-system/icons/src/components/apple.tsx b/packages/design-system/icons/src/components/apple.tsx new file mode 100644 index 0000000000000..6751de5cc0755 --- /dev/null +++ b/packages/design-system/icons/src/components/apple.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Apple = React.forwardRef>( + (props, ref) => { + return ( + + + + + ) + } +) +Apple.displayName = "Apple" +export default Apple diff --git a/packages/design-system/icons/src/components/archive-box.tsx b/packages/design-system/icons/src/components/archive-box.tsx new file mode 100644 index 0000000000000..1852499415a39 --- /dev/null +++ b/packages/design-system/icons/src/components/archive-box.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArchiveBox = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArchiveBox.displayName = "ArchiveBox" +export default ArchiveBox diff --git a/packages/design-system/icons/src/components/arrow-down-circle.tsx b/packages/design-system/icons/src/components/arrow-down-circle.tsx new file mode 100644 index 0000000000000..90c452e9dfa8f --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-down-circle.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowDownCircle = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowDownCircle.displayName = "ArrowDownCircle" +export default ArrowDownCircle diff --git a/packages/design-system/icons/src/components/arrow-down-left-mini.tsx b/packages/design-system/icons/src/components/arrow-down-left-mini.tsx new file mode 100644 index 0000000000000..58d5cb3763aff --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-down-left-mini.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowDownLeftMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +ArrowDownLeftMini.displayName = "ArrowDownLeftMini" +export default ArrowDownLeftMini diff --git a/packages/design-system/icons/src/components/arrow-down-left.tsx b/packages/design-system/icons/src/components/arrow-down-left.tsx new file mode 100644 index 0000000000000..06ccc8f648cac --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-down-left.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowDownLeft = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +ArrowDownLeft.displayName = "ArrowDownLeft" +export default ArrowDownLeft diff --git a/packages/design-system/icons/src/components/arrow-down-mini.tsx b/packages/design-system/icons/src/components/arrow-down-mini.tsx new file mode 100644 index 0000000000000..a397408ba5f63 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-down-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowDownMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowDownMini.displayName = "ArrowDownMini" +export default ArrowDownMini diff --git a/packages/design-system/icons/src/components/arrow-down-right-mini.tsx b/packages/design-system/icons/src/components/arrow-down-right-mini.tsx new file mode 100644 index 0000000000000..b91fe103ac5bd --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-down-right-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowDownRightMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowDownRightMini.displayName = "ArrowDownRightMini" +export default ArrowDownRightMini diff --git a/packages/design-system/icons/src/components/arrow-down-tray.tsx b/packages/design-system/icons/src/components/arrow-down-tray.tsx new file mode 100644 index 0000000000000..dc917280950a7 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-down-tray.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowDownTray = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowDownTray.displayName = "ArrowDownTray" +export default ArrowDownTray diff --git a/packages/design-system/icons/src/components/arrow-down.tsx b/packages/design-system/icons/src/components/arrow-down.tsx new file mode 100644 index 0000000000000..f164ca83e09b7 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-down.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowDown = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowDown.displayName = "ArrowDown" +export default ArrowDown diff --git a/packages/design-system/icons/src/components/arrow-left-mini.tsx b/packages/design-system/icons/src/components/arrow-left-mini.tsx new file mode 100644 index 0000000000000..f83857e9b0d49 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-left-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowLeftMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowLeftMini.displayName = "ArrowLeftMini" +export default ArrowLeftMini diff --git a/packages/design-system/icons/src/components/arrow-left.tsx b/packages/design-system/icons/src/components/arrow-left.tsx new file mode 100644 index 0000000000000..77b43be6bc7dd --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-left.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowLeft = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowLeft.displayName = "ArrowLeft" +export default ArrowLeft diff --git a/packages/design-system/icons/src/components/arrow-long-down.tsx b/packages/design-system/icons/src/components/arrow-long-down.tsx new file mode 100644 index 0000000000000..0a69a75011633 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-long-down.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowLongDown = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowLongDown.displayName = "ArrowLongDown" +export default ArrowLongDown diff --git a/packages/design-system/icons/src/components/arrow-long-left.tsx b/packages/design-system/icons/src/components/arrow-long-left.tsx new file mode 100644 index 0000000000000..83fd6471cb333 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-long-left.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowLongLeft = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowLongLeft.displayName = "ArrowLongLeft" +export default ArrowLongLeft diff --git a/packages/design-system/icons/src/components/arrow-long-right.tsx b/packages/design-system/icons/src/components/arrow-long-right.tsx new file mode 100644 index 0000000000000..880028e3e82c9 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-long-right.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowLongRight = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowLongRight.displayName = "ArrowLongRight" +export default ArrowLongRight diff --git a/packages/design-system/icons/src/components/arrow-long-up.tsx b/packages/design-system/icons/src/components/arrow-long-up.tsx new file mode 100644 index 0000000000000..25fe2df0e1033 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-long-up.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowLongUp = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowLongUp.displayName = "ArrowLongUp" +export default ArrowLongUp diff --git a/packages/design-system/icons/src/components/arrow-path-mini.tsx b/packages/design-system/icons/src/components/arrow-path-mini.tsx new file mode 100644 index 0000000000000..ecdcb3a8deea3 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-path-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowPathMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowPathMini.displayName = "ArrowPathMini" +export default ArrowPathMini diff --git a/packages/design-system/icons/src/components/arrow-path.tsx b/packages/design-system/icons/src/components/arrow-path.tsx new file mode 100644 index 0000000000000..c9c5555b8c880 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-path.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowPath = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowPath.displayName = "ArrowPath" +export default ArrowPath diff --git a/packages/design-system/icons/src/components/arrow-right-mini.tsx b/packages/design-system/icons/src/components/arrow-right-mini.tsx new file mode 100644 index 0000000000000..848e7ed171564 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-right-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowRightMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowRightMini.displayName = "ArrowRightMini" +export default ArrowRightMini diff --git a/packages/design-system/icons/src/components/arrow-right-on-rectangle.tsx b/packages/design-system/icons/src/components/arrow-right-on-rectangle.tsx new file mode 100644 index 0000000000000..fca7f388ab129 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-right-on-rectangle.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowRightOnRectangle = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowRightOnRectangle.displayName = "ArrowRightOnRectangle" +export default ArrowRightOnRectangle diff --git a/packages/design-system/icons/src/components/arrow-up-circle-solid.tsx b/packages/design-system/icons/src/components/arrow-up-circle-solid.tsx new file mode 100644 index 0000000000000..90e56182721e7 --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-up-circle-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowUpCircleSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowUpCircleSolid.displayName = "ArrowUpCircleSolid" +export default ArrowUpCircleSolid diff --git a/packages/design-system/icons/src/components/arrow-up-down.tsx b/packages/design-system/icons/src/components/arrow-up-down.tsx new file mode 100644 index 0000000000000..ef7bbab4add5e --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-up-down.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowUpDown = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowUpDown.displayName = "ArrowUpDown" +export default ArrowUpDown diff --git a/packages/design-system/icons/src/components/arrow-up-mini.tsx b/packages/design-system/icons/src/components/arrow-up-mini.tsx new file mode 100644 index 0000000000000..c8dab018eb41f --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-up-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowUpMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowUpMini.displayName = "ArrowUpMini" +export default ArrowUpMini diff --git a/packages/design-system/icons/src/components/arrow-up-right-mini.tsx b/packages/design-system/icons/src/components/arrow-up-right-mini.tsx new file mode 100644 index 0000000000000..1b681d8f1484a --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-up-right-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowUpRightMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowUpRightMini.displayName = "ArrowUpRightMini" +export default ArrowUpRightMini diff --git a/packages/design-system/icons/src/components/arrow-up-right-on-box.tsx b/packages/design-system/icons/src/components/arrow-up-right-on-box.tsx new file mode 100644 index 0000000000000..70ce538495bcd --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-up-right-on-box.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowUpRightOnBox = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowUpRightOnBox.displayName = "ArrowUpRightOnBox" +export default ArrowUpRightOnBox diff --git a/packages/design-system/icons/src/components/arrow-up-tray.tsx b/packages/design-system/icons/src/components/arrow-up-tray.tsx new file mode 100644 index 0000000000000..01c5322439b2f --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-up-tray.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowUpTray = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowUpTray.displayName = "ArrowUpTray" +export default ArrowUpTray diff --git a/packages/design-system/icons/src/components/arrow-uturn-left.tsx b/packages/design-system/icons/src/components/arrow-uturn-left.tsx new file mode 100644 index 0000000000000..67f6d153fb8af --- /dev/null +++ b/packages/design-system/icons/src/components/arrow-uturn-left.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowUturnLeft = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowUturnLeft.displayName = "ArrowUturnLeft" +export default ArrowUturnLeft diff --git a/packages/design-system/icons/src/components/arrows-pointing-out-mini.tsx b/packages/design-system/icons/src/components/arrows-pointing-out-mini.tsx new file mode 100644 index 0000000000000..adaaaa420df7d --- /dev/null +++ b/packages/design-system/icons/src/components/arrows-pointing-out-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowsPointingOutMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowsPointingOutMini.displayName = "ArrowsPointingOutMini" +export default ArrowsPointingOutMini diff --git a/packages/design-system/icons/src/components/arrows-pointing-out.tsx b/packages/design-system/icons/src/components/arrows-pointing-out.tsx new file mode 100644 index 0000000000000..633c8315d1b2f --- /dev/null +++ b/packages/design-system/icons/src/components/arrows-pointing-out.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrowsPointingOut = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrowsPointingOut.displayName = "ArrowsPointingOut" +export default ArrowsPointingOut diff --git a/packages/design-system/icons/src/components/arrrow-right.tsx b/packages/design-system/icons/src/components/arrrow-right.tsx new file mode 100644 index 0000000000000..5fbda90fafddf --- /dev/null +++ b/packages/design-system/icons/src/components/arrrow-right.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ArrrowRight = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ArrrowRight.displayName = "ArrrowRight" +export default ArrrowRight diff --git a/packages/design-system/icons/src/components/at-symbol.tsx b/packages/design-system/icons/src/components/at-symbol.tsx new file mode 100644 index 0000000000000..e27a7b740bbc1 --- /dev/null +++ b/packages/design-system/icons/src/components/at-symbol.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const AtSymbol = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +AtSymbol.displayName = "AtSymbol" +export default AtSymbol diff --git a/packages/design-system/icons/src/components/backward-solid.tsx b/packages/design-system/icons/src/components/backward-solid.tsx new file mode 100644 index 0000000000000..a44c2c0408433 --- /dev/null +++ b/packages/design-system/icons/src/components/backward-solid.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BackwardSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +BackwardSolid.displayName = "BackwardSolid" +export default BackwardSolid diff --git a/packages/design-system/icons/src/components/bars-three.tsx b/packages/design-system/icons/src/components/bars-three.tsx new file mode 100644 index 0000000000000..9cf3b95fd96ce --- /dev/null +++ b/packages/design-system/icons/src/components/bars-three.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BarsThree = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +BarsThree.displayName = "BarsThree" +export default BarsThree diff --git a/packages/design-system/icons/src/components/bell-alert-solid.tsx b/packages/design-system/icons/src/components/bell-alert-solid.tsx new file mode 100644 index 0000000000000..75b3b82fb94db --- /dev/null +++ b/packages/design-system/icons/src/components/bell-alert-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BellAlertSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +BellAlertSolid.displayName = "BellAlertSolid" +export default BellAlertSolid diff --git a/packages/design-system/icons/src/components/bell-alert.tsx b/packages/design-system/icons/src/components/bell-alert.tsx new file mode 100644 index 0000000000000..53487e117ca31 --- /dev/null +++ b/packages/design-system/icons/src/components/bell-alert.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BellAlert = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +BellAlert.displayName = "BellAlert" +export default BellAlert diff --git a/packages/design-system/icons/src/components/bolt-solid.tsx b/packages/design-system/icons/src/components/bolt-solid.tsx new file mode 100644 index 0000000000000..8b4bedf1cb182 --- /dev/null +++ b/packages/design-system/icons/src/components/bolt-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BoltSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +BoltSolid.displayName = "BoltSolid" +export default BoltSolid diff --git a/packages/design-system/icons/src/components/bolt.tsx b/packages/design-system/icons/src/components/bolt.tsx new file mode 100644 index 0000000000000..e8fb7f3e5daa9 --- /dev/null +++ b/packages/design-system/icons/src/components/bolt.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Bolt = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Bolt.displayName = "Bolt" +export default Bolt diff --git a/packages/design-system/icons/src/components/book-open.tsx b/packages/design-system/icons/src/components/book-open.tsx new file mode 100644 index 0000000000000..7a4cf9c89439b --- /dev/null +++ b/packages/design-system/icons/src/components/book-open.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BookOpen = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +BookOpen.displayName = "BookOpen" +export default BookOpen diff --git a/packages/design-system/icons/src/components/bug-ant-solid.tsx b/packages/design-system/icons/src/components/bug-ant-solid.tsx new file mode 100644 index 0000000000000..3f143a22998d6 --- /dev/null +++ b/packages/design-system/icons/src/components/bug-ant-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BugAntSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +BugAntSolid.displayName = "BugAntSolid" +export default BugAntSolid diff --git a/packages/design-system/icons/src/components/bug.tsx b/packages/design-system/icons/src/components/bug.tsx new file mode 100644 index 0000000000000..561ea63011ea0 --- /dev/null +++ b/packages/design-system/icons/src/components/bug.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Bug = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Bug.displayName = "Bug" +export default Bug diff --git a/packages/design-system/icons/src/components/building-storefront.tsx b/packages/design-system/icons/src/components/building-storefront.tsx new file mode 100644 index 0000000000000..b76da450f2548 --- /dev/null +++ b/packages/design-system/icons/src/components/building-storefront.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BuildingStorefront = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +BuildingStorefront.displayName = "BuildingStorefront" +export default BuildingStorefront diff --git a/packages/design-system/icons/src/components/building-tax.tsx b/packages/design-system/icons/src/components/building-tax.tsx new file mode 100644 index 0000000000000..a3cff446d15ff --- /dev/null +++ b/packages/design-system/icons/src/components/building-tax.tsx @@ -0,0 +1,44 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BuildingTax = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + ) + } +) +BuildingTax.displayName = "BuildingTax" +export default BuildingTax diff --git a/packages/design-system/icons/src/components/buildings-mini.tsx b/packages/design-system/icons/src/components/buildings-mini.tsx new file mode 100644 index 0000000000000..347090012f52f --- /dev/null +++ b/packages/design-system/icons/src/components/buildings-mini.tsx @@ -0,0 +1,40 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BuildingsMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + ) + } +) +BuildingsMini.displayName = "BuildingsMini" +export default BuildingsMini diff --git a/packages/design-system/icons/src/components/buildings-solid.tsx b/packages/design-system/icons/src/components/buildings-solid.tsx new file mode 100644 index 0000000000000..1d20a5776208e --- /dev/null +++ b/packages/design-system/icons/src/components/buildings-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const BuildingsSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +BuildingsSolid.displayName = "BuildingsSolid" +export default BuildingsSolid diff --git a/packages/design-system/icons/src/components/buildings.tsx b/packages/design-system/icons/src/components/buildings.tsx new file mode 100644 index 0000000000000..fa1788bf1b617 --- /dev/null +++ b/packages/design-system/icons/src/components/buildings.tsx @@ -0,0 +1,40 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Buildings = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + ) + } +) +Buildings.displayName = "Buildings" +export default Buildings diff --git a/packages/design-system/icons/src/components/calendar-mini.tsx b/packages/design-system/icons/src/components/calendar-mini.tsx new file mode 100644 index 0000000000000..33490857bd68f --- /dev/null +++ b/packages/design-system/icons/src/components/calendar-mini.tsx @@ -0,0 +1,31 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CalendarMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CalendarMini.displayName = "CalendarMini" +export default CalendarMini diff --git a/packages/design-system/icons/src/components/calendar-solid.tsx b/packages/design-system/icons/src/components/calendar-solid.tsx new file mode 100644 index 0000000000000..654f7d978730d --- /dev/null +++ b/packages/design-system/icons/src/components/calendar-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CalendarSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CalendarSolid.displayName = "CalendarSolid" +export default CalendarSolid diff --git a/packages/design-system/icons/src/components/calendar.tsx b/packages/design-system/icons/src/components/calendar.tsx new file mode 100644 index 0000000000000..5c25b1ad962db --- /dev/null +++ b/packages/design-system/icons/src/components/calendar.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Calendar = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Calendar.displayName = "Calendar" +export default Calendar diff --git a/packages/design-system/icons/src/components/camera.tsx b/packages/design-system/icons/src/components/camera.tsx new file mode 100644 index 0000000000000..f39beaefefe3c --- /dev/null +++ b/packages/design-system/icons/src/components/camera.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Camera = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +Camera.displayName = "Camera" +export default Camera diff --git a/packages/design-system/icons/src/components/cash-solid.tsx b/packages/design-system/icons/src/components/cash-solid.tsx new file mode 100644 index 0000000000000..887811d9cc5ea --- /dev/null +++ b/packages/design-system/icons/src/components/cash-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CashSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CashSolid.displayName = "CashSolid" +export default CashSolid diff --git a/packages/design-system/icons/src/components/cash.tsx b/packages/design-system/icons/src/components/cash.tsx new file mode 100644 index 0000000000000..6bf77c8e9e3d3 --- /dev/null +++ b/packages/design-system/icons/src/components/cash.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Cash = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Cash.displayName = "Cash" +export default Cash diff --git a/packages/design-system/icons/src/components/channels-solid.tsx b/packages/design-system/icons/src/components/channels-solid.tsx new file mode 100644 index 0000000000000..8cbd2e1502f83 --- /dev/null +++ b/packages/design-system/icons/src/components/channels-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChannelsSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChannelsSolid.displayName = "ChannelsSolid" +export default ChannelsSolid diff --git a/packages/design-system/icons/src/components/channels.tsx b/packages/design-system/icons/src/components/channels.tsx new file mode 100644 index 0000000000000..6625e9503645b --- /dev/null +++ b/packages/design-system/icons/src/components/channels.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Channels = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +Channels.displayName = "Channels" +export default Channels diff --git a/packages/design-system/icons/src/components/chart-bar.tsx b/packages/design-system/icons/src/components/chart-bar.tsx new file mode 100644 index 0000000000000..29ca59d82cc64 --- /dev/null +++ b/packages/design-system/icons/src/components/chart-bar.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChartBar = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChartBar.displayName = "ChartBar" +export default ChartBar diff --git a/packages/design-system/icons/src/components/chat-bubble-left-right-solid.tsx b/packages/design-system/icons/src/components/chat-bubble-left-right-solid.tsx new file mode 100644 index 0000000000000..226f8d90f897f --- /dev/null +++ b/packages/design-system/icons/src/components/chat-bubble-left-right-solid.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChatBubbleLeftRightSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +ChatBubbleLeftRightSolid.displayName = "ChatBubbleLeftRightSolid" +export default ChatBubbleLeftRightSolid diff --git a/packages/design-system/icons/src/components/chat-bubble-left-right.tsx b/packages/design-system/icons/src/components/chat-bubble-left-right.tsx new file mode 100644 index 0000000000000..4211d5ffcb9a8 --- /dev/null +++ b/packages/design-system/icons/src/components/chat-bubble-left-right.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChatBubbleLeftRight = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChatBubbleLeftRight.displayName = "ChatBubbleLeftRight" +export default ChatBubbleLeftRight diff --git a/packages/design-system/icons/src/components/chat-bubble.tsx b/packages/design-system/icons/src/components/chat-bubble.tsx new file mode 100644 index 0000000000000..d008cc3c5184b --- /dev/null +++ b/packages/design-system/icons/src/components/chat-bubble.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChatBubble = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChatBubble.displayName = "ChatBubble" +export default ChatBubble diff --git a/packages/design-system/icons/src/components/check-circle-mini-solid.tsx b/packages/design-system/icons/src/components/check-circle-mini-solid.tsx new file mode 100644 index 0000000000000..3125175792284 --- /dev/null +++ b/packages/design-system/icons/src/components/check-circle-mini-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CheckCircleMiniSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CheckCircleMiniSolid.displayName = "CheckCircleMiniSolid" +export default CheckCircleMiniSolid diff --git a/packages/design-system/icons/src/components/check-circle-solid.tsx b/packages/design-system/icons/src/components/check-circle-solid.tsx new file mode 100644 index 0000000000000..e9fd87d3617fd --- /dev/null +++ b/packages/design-system/icons/src/components/check-circle-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CheckCircleSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CheckCircleSolid.displayName = "CheckCircleSolid" +export default CheckCircleSolid diff --git a/packages/design-system/icons/src/components/check-mini.tsx b/packages/design-system/icons/src/components/check-mini.tsx new file mode 100644 index 0000000000000..d29452b53f4cd --- /dev/null +++ b/packages/design-system/icons/src/components/check-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CheckMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CheckMini.displayName = "CheckMini" +export default CheckMini diff --git a/packages/design-system/icons/src/components/check.tsx b/packages/design-system/icons/src/components/check.tsx new file mode 100644 index 0000000000000..3f37e4aa366b8 --- /dev/null +++ b/packages/design-system/icons/src/components/check.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Check = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Check.displayName = "Check" +export default Check diff --git a/packages/design-system/icons/src/components/chevron-double-left-mini-solid.tsx b/packages/design-system/icons/src/components/chevron-double-left-mini-solid.tsx new file mode 100644 index 0000000000000..4392408b40802 --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-double-left-mini-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronDoubleLeftMiniSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronDoubleLeftMiniSolid.displayName = "ChevronDoubleLeftMiniSolid" +export default ChevronDoubleLeftMiniSolid diff --git a/packages/design-system/icons/src/components/chevron-double-left.tsx b/packages/design-system/icons/src/components/chevron-double-left.tsx new file mode 100644 index 0000000000000..64e6554eb9fdf --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-double-left.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronDoubleLeft = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronDoubleLeft.displayName = "ChevronDoubleLeft" +export default ChevronDoubleLeft diff --git a/packages/design-system/icons/src/components/chevron-double-right-mini-solid.tsx b/packages/design-system/icons/src/components/chevron-double-right-mini-solid.tsx new file mode 100644 index 0000000000000..2df71f8d3e65a --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-double-right-mini-solid.tsx @@ -0,0 +1,31 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronDoubleRightMiniSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +ChevronDoubleRightMiniSolid.displayName = "ChevronDoubleRightMiniSolid" +export default ChevronDoubleRightMiniSolid diff --git a/packages/design-system/icons/src/components/chevron-double-right.tsx b/packages/design-system/icons/src/components/chevron-double-right.tsx new file mode 100644 index 0000000000000..a4d103eb2cbda --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-double-right.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronDoubleRight = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronDoubleRight.displayName = "ChevronDoubleRight" +export default ChevronDoubleRight diff --git a/packages/design-system/icons/src/components/chevron-down-mini.tsx b/packages/design-system/icons/src/components/chevron-down-mini.tsx new file mode 100644 index 0000000000000..f4a2433451710 --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-down-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronDownMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronDownMini.displayName = "ChevronDownMini" +export default ChevronDownMini diff --git a/packages/design-system/icons/src/components/chevron-down.tsx b/packages/design-system/icons/src/components/chevron-down.tsx new file mode 100644 index 0000000000000..0116fbc874985 --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-down.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronDown = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronDown.displayName = "ChevronDown" +export default ChevronDown diff --git a/packages/design-system/icons/src/components/chevron-left-mini.tsx b/packages/design-system/icons/src/components/chevron-left-mini.tsx new file mode 100644 index 0000000000000..8d8f7e6fe1c93 --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-left-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronLeftMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronLeftMini.displayName = "ChevronLeftMini" +export default ChevronLeftMini diff --git a/packages/design-system/icons/src/components/chevron-left.tsx b/packages/design-system/icons/src/components/chevron-left.tsx new file mode 100644 index 0000000000000..0a5ce718843ba --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-left.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronLeft = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronLeft.displayName = "ChevronLeft" +export default ChevronLeft diff --git a/packages/design-system/icons/src/components/chevron-right-mini.tsx b/packages/design-system/icons/src/components/chevron-right-mini.tsx new file mode 100644 index 0000000000000..50e052b7ed4f9 --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-right-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronRightMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronRightMini.displayName = "ChevronRightMini" +export default ChevronRightMini diff --git a/packages/design-system/icons/src/components/chevron-right.tsx b/packages/design-system/icons/src/components/chevron-right.tsx new file mode 100644 index 0000000000000..f3557a517a10e --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-right.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronRight = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronRight.displayName = "ChevronRight" +export default ChevronRight diff --git a/packages/design-system/icons/src/components/chevron-up-down.tsx b/packages/design-system/icons/src/components/chevron-up-down.tsx new file mode 100644 index 0000000000000..d5319d0e1ff8a --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-up-down.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronUpDown = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronUpDown.displayName = "ChevronUpDown" +export default ChevronUpDown diff --git a/packages/design-system/icons/src/components/chevron-up-mini.tsx b/packages/design-system/icons/src/components/chevron-up-mini.tsx new file mode 100644 index 0000000000000..474639412def6 --- /dev/null +++ b/packages/design-system/icons/src/components/chevron-up-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ChevronUpMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ChevronUpMini.displayName = "ChevronUpMini" +export default ChevronUpMini diff --git a/packages/design-system/icons/src/components/circle-dotted-line.tsx b/packages/design-system/icons/src/components/circle-dotted-line.tsx new file mode 100644 index 0000000000000..c561363c4a895 --- /dev/null +++ b/packages/design-system/icons/src/components/circle-dotted-line.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleDottedLine = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CircleDottedLine.displayName = "CircleDottedLine" +export default CircleDottedLine diff --git a/packages/design-system/icons/src/components/circle-filled-solid.tsx b/packages/design-system/icons/src/components/circle-filled-solid.tsx new file mode 100644 index 0000000000000..d2895286ec8dc --- /dev/null +++ b/packages/design-system/icons/src/components/circle-filled-solid.tsx @@ -0,0 +1,21 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleFilledSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CircleFilledSolid.displayName = "CircleFilledSolid" +export default CircleFilledSolid diff --git a/packages/design-system/icons/src/components/circle-half-solid.tsx b/packages/design-system/icons/src/components/circle-half-solid.tsx new file mode 100644 index 0000000000000..c53d75c3d22e4 --- /dev/null +++ b/packages/design-system/icons/src/components/circle-half-solid.tsx @@ -0,0 +1,21 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleHalfSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CircleHalfSolid.displayName = "CircleHalfSolid" +export default CircleHalfSolid diff --git a/packages/design-system/icons/src/components/circle-mini-filled-solid.tsx b/packages/design-system/icons/src/components/circle-mini-filled-solid.tsx new file mode 100644 index 0000000000000..ff7a1943ae631 --- /dev/null +++ b/packages/design-system/icons/src/components/circle-mini-filled-solid.tsx @@ -0,0 +1,21 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleMiniFilledSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CircleMiniFilledSolid.displayName = "CircleMiniFilledSolid" +export default CircleMiniFilledSolid diff --git a/packages/design-system/icons/src/components/circle-mini-solid.tsx b/packages/design-system/icons/src/components/circle-mini-solid.tsx new file mode 100644 index 0000000000000..36cf60f4eccce --- /dev/null +++ b/packages/design-system/icons/src/components/circle-mini-solid.tsx @@ -0,0 +1,20 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleMiniSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CircleMiniSolid.displayName = "CircleMiniSolid" +export default CircleMiniSolid diff --git a/packages/design-system/icons/src/components/circle-quarter-solid.tsx b/packages/design-system/icons/src/components/circle-quarter-solid.tsx new file mode 100644 index 0000000000000..8d522ebc8ba35 --- /dev/null +++ b/packages/design-system/icons/src/components/circle-quarter-solid.tsx @@ -0,0 +1,21 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleQuarterSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CircleQuarterSolid.displayName = "CircleQuarterSolid" +export default CircleQuarterSolid diff --git a/packages/design-system/icons/src/components/circle-solid.tsx b/packages/design-system/icons/src/components/circle-solid.tsx new file mode 100644 index 0000000000000..4332efe310760 --- /dev/null +++ b/packages/design-system/icons/src/components/circle-solid.tsx @@ -0,0 +1,20 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CircleSolid.displayName = "CircleSolid" +export default CircleSolid diff --git a/packages/design-system/icons/src/components/circle-stack-solid.tsx b/packages/design-system/icons/src/components/circle-stack-solid.tsx new file mode 100644 index 0000000000000..175958d475b52 --- /dev/null +++ b/packages/design-system/icons/src/components/circle-stack-solid.tsx @@ -0,0 +1,35 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleStackSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + ) + } +) +CircleStackSolid.displayName = "CircleStackSolid" +export default CircleStackSolid diff --git a/packages/design-system/icons/src/components/circle-stack.tsx b/packages/design-system/icons/src/components/circle-stack.tsx new file mode 100644 index 0000000000000..a3d682f05e438 --- /dev/null +++ b/packages/design-system/icons/src/components/circle-stack.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleStack = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CircleStack.displayName = "CircleStack" +export default CircleStack diff --git a/packages/design-system/icons/src/components/circle-three-quarters-solid.tsx b/packages/design-system/icons/src/components/circle-three-quarters-solid.tsx new file mode 100644 index 0000000000000..21269a192ac5f --- /dev/null +++ b/packages/design-system/icons/src/components/circle-three-quarters-solid.tsx @@ -0,0 +1,21 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CircleThreeQuartersSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CircleThreeQuartersSolid.displayName = "CircleThreeQuartersSolid" +export default CircleThreeQuartersSolid diff --git a/packages/design-system/icons/src/components/clock-changed-solid-mini.tsx b/packages/design-system/icons/src/components/clock-changed-solid-mini.tsx new file mode 100644 index 0000000000000..7a7227f8285d1 --- /dev/null +++ b/packages/design-system/icons/src/components/clock-changed-solid-mini.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ClockChangedSolidMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ClockChangedSolidMini.displayName = "ClockChangedSolidMini" +export default ClockChangedSolidMini diff --git a/packages/design-system/icons/src/components/clock-solid-mini.tsx b/packages/design-system/icons/src/components/clock-solid-mini.tsx new file mode 100644 index 0000000000000..2035a07a0d65e --- /dev/null +++ b/packages/design-system/icons/src/components/clock-solid-mini.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ClockSolidMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ClockSolidMini.displayName = "ClockSolidMini" +export default ClockSolidMini diff --git a/packages/design-system/icons/src/components/clock-solid.tsx b/packages/design-system/icons/src/components/clock-solid.tsx new file mode 100644 index 0000000000000..2684772ebd6b3 --- /dev/null +++ b/packages/design-system/icons/src/components/clock-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ClockSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ClockSolid.displayName = "ClockSolid" +export default ClockSolid diff --git a/packages/design-system/icons/src/components/clock.tsx b/packages/design-system/icons/src/components/clock.tsx new file mode 100644 index 0000000000000..f70776375e1dd --- /dev/null +++ b/packages/design-system/icons/src/components/clock.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Clock = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +Clock.displayName = "Clock" +export default Clock diff --git a/packages/design-system/icons/src/components/cloud-arrow-down.tsx b/packages/design-system/icons/src/components/cloud-arrow-down.tsx new file mode 100644 index 0000000000000..7c23008d44998 --- /dev/null +++ b/packages/design-system/icons/src/components/cloud-arrow-down.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CloudArrowDown = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CloudArrowDown.displayName = "CloudArrowDown" +export default CloudArrowDown diff --git a/packages/design-system/icons/src/components/cloud-arrow-up.tsx b/packages/design-system/icons/src/components/cloud-arrow-up.tsx new file mode 100644 index 0000000000000..78140775ce4e5 --- /dev/null +++ b/packages/design-system/icons/src/components/cloud-arrow-up.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CloudArrowUp = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CloudArrowUp.displayName = "CloudArrowUp" +export default CloudArrowUp diff --git a/packages/design-system/icons/src/components/cog-six-tooth-solid.tsx b/packages/design-system/icons/src/components/cog-six-tooth-solid.tsx new file mode 100644 index 0000000000000..3cf195aabed64 --- /dev/null +++ b/packages/design-system/icons/src/components/cog-six-tooth-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CogSixToothSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CogSixToothSolid.displayName = "CogSixToothSolid" +export default CogSixToothSolid diff --git a/packages/design-system/icons/src/components/cog-six-tooth.tsx b/packages/design-system/icons/src/components/cog-six-tooth.tsx new file mode 100644 index 0000000000000..0ef297e28d9d5 --- /dev/null +++ b/packages/design-system/icons/src/components/cog-six-tooth.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CogSixTooth = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CogSixTooth.displayName = "CogSixTooth" +export default CogSixTooth diff --git a/packages/design-system/icons/src/components/command-line-solid.tsx b/packages/design-system/icons/src/components/command-line-solid.tsx new file mode 100644 index 0000000000000..f764672027d38 --- /dev/null +++ b/packages/design-system/icons/src/components/command-line-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CommandLineSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CommandLineSolid.displayName = "CommandLineSolid" +export default CommandLineSolid diff --git a/packages/design-system/icons/src/components/command-line.tsx b/packages/design-system/icons/src/components/command-line.tsx new file mode 100644 index 0000000000000..c2197d033121b --- /dev/null +++ b/packages/design-system/icons/src/components/command-line.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CommandLine = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CommandLine.displayName = "CommandLine" +export default CommandLine diff --git a/packages/design-system/icons/src/components/component-solid.tsx b/packages/design-system/icons/src/components/component-solid.tsx new file mode 100644 index 0000000000000..169b78a7b2800 --- /dev/null +++ b/packages/design-system/icons/src/components/component-solid.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ComponentSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ComponentSolid.displayName = "ComponentSolid" +export default ComponentSolid diff --git a/packages/design-system/icons/src/components/component.tsx b/packages/design-system/icons/src/components/component.tsx new file mode 100644 index 0000000000000..dca38f8206cc6 --- /dev/null +++ b/packages/design-system/icons/src/components/component.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Component = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Component.displayName = "Component" +export default Component diff --git a/packages/design-system/icons/src/components/computer-desktop-solid.tsx b/packages/design-system/icons/src/components/computer-desktop-solid.tsx new file mode 100644 index 0000000000000..0b935762e612c --- /dev/null +++ b/packages/design-system/icons/src/components/computer-desktop-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ComputerDesktopSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ComputerDesktopSolid.displayName = "ComputerDesktopSolid" +export default ComputerDesktopSolid diff --git a/packages/design-system/icons/src/components/computer-desktop.tsx b/packages/design-system/icons/src/components/computer-desktop.tsx new file mode 100644 index 0000000000000..092665edd87dd --- /dev/null +++ b/packages/design-system/icons/src/components/computer-desktop.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ComputerDesktop = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ComputerDesktop.displayName = "ComputerDesktop" +export default ComputerDesktop diff --git a/packages/design-system/icons/src/components/credit-card-solid.tsx b/packages/design-system/icons/src/components/credit-card-solid.tsx new file mode 100644 index 0000000000000..2fd12e6b57c78 --- /dev/null +++ b/packages/design-system/icons/src/components/credit-card-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CreditCardSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CreditCardSolid.displayName = "CreditCardSolid" +export default CreditCardSolid diff --git a/packages/design-system/icons/src/components/credit-card.tsx b/packages/design-system/icons/src/components/credit-card.tsx new file mode 100644 index 0000000000000..94dbd812ace2e --- /dev/null +++ b/packages/design-system/icons/src/components/credit-card.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CreditCard = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CreditCard.displayName = "CreditCard" +export default CreditCard diff --git a/packages/design-system/icons/src/components/cube-solid.tsx b/packages/design-system/icons/src/components/cube-solid.tsx new file mode 100644 index 0000000000000..7b24c35611043 --- /dev/null +++ b/packages/design-system/icons/src/components/cube-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CubeSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CubeSolid.displayName = "CubeSolid" +export default CubeSolid diff --git a/packages/design-system/icons/src/components/currency-dollar-solid.tsx b/packages/design-system/icons/src/components/currency-dollar-solid.tsx new file mode 100644 index 0000000000000..72e704c7d3ef0 --- /dev/null +++ b/packages/design-system/icons/src/components/currency-dollar-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CurrencyDollarSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +CurrencyDollarSolid.displayName = "CurrencyDollarSolid" +export default CurrencyDollarSolid diff --git a/packages/design-system/icons/src/components/currency-dollar.tsx b/packages/design-system/icons/src/components/currency-dollar.tsx new file mode 100644 index 0000000000000..d3c351339ce85 --- /dev/null +++ b/packages/design-system/icons/src/components/currency-dollar.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CurrencyDollar = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CurrencyDollar.displayName = "CurrencyDollar" +export default CurrencyDollar diff --git a/packages/design-system/icons/src/components/cursor-arrow-rays.tsx b/packages/design-system/icons/src/components/cursor-arrow-rays.tsx new file mode 100644 index 0000000000000..93d5a5a861d3a --- /dev/null +++ b/packages/design-system/icons/src/components/cursor-arrow-rays.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const CursorArrowRays = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +CursorArrowRays.displayName = "CursorArrowRays" +export default CursorArrowRays diff --git a/packages/design-system/icons/src/components/discord.tsx b/packages/design-system/icons/src/components/discord.tsx new file mode 100644 index 0000000000000..78a761a68466b --- /dev/null +++ b/packages/design-system/icons/src/components/discord.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Discord = React.forwardRef>( + (props, ref) => { + return ( + + + + ) + } +) +Discord.displayName = "Discord" +export default Discord diff --git a/packages/design-system/icons/src/components/document-series.tsx b/packages/design-system/icons/src/components/document-series.tsx new file mode 100644 index 0000000000000..cfae09ad8bc48 --- /dev/null +++ b/packages/design-system/icons/src/components/document-series.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const DocumentSeries = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +DocumentSeries.displayName = "DocumentSeries" +export default DocumentSeries diff --git a/packages/design-system/icons/src/components/document-text-solid.tsx b/packages/design-system/icons/src/components/document-text-solid.tsx new file mode 100644 index 0000000000000..d75447f37d3e2 --- /dev/null +++ b/packages/design-system/icons/src/components/document-text-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const DocumentTextSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +DocumentTextSolid.displayName = "DocumentTextSolid" +export default DocumentTextSolid diff --git a/packages/design-system/icons/src/components/document-text.tsx b/packages/design-system/icons/src/components/document-text.tsx new file mode 100644 index 0000000000000..f4e339bdddd74 --- /dev/null +++ b/packages/design-system/icons/src/components/document-text.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const DocumentText = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +DocumentText.displayName = "DocumentText" +export default DocumentText diff --git a/packages/design-system/icons/src/components/dots-six.tsx b/packages/design-system/icons/src/components/dots-six.tsx new file mode 100644 index 0000000000000..90d37d7e57d3f --- /dev/null +++ b/packages/design-system/icons/src/components/dots-six.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const DotsSix = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +DotsSix.displayName = "DotsSix" +export default DotsSix diff --git a/packages/design-system/icons/src/components/ellipse-blue-solid.tsx b/packages/design-system/icons/src/components/ellipse-blue-solid.tsx new file mode 100644 index 0000000000000..74aa5e7e26be7 --- /dev/null +++ b/packages/design-system/icons/src/components/ellipse-blue-solid.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipseBlueSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ) + } +) +EllipseBlueSolid.displayName = "EllipseBlueSolid" +export default EllipseBlueSolid diff --git a/packages/design-system/icons/src/components/ellipse-green-solid.tsx b/packages/design-system/icons/src/components/ellipse-green-solid.tsx new file mode 100644 index 0000000000000..9e0e1dc8f52bc --- /dev/null +++ b/packages/design-system/icons/src/components/ellipse-green-solid.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipseGreenSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ) + } +) +EllipseGreenSolid.displayName = "EllipseGreenSolid" +export default EllipseGreenSolid diff --git a/packages/design-system/icons/src/components/ellipse-grey-solid.tsx b/packages/design-system/icons/src/components/ellipse-grey-solid.tsx new file mode 100644 index 0000000000000..a6501931c6cda --- /dev/null +++ b/packages/design-system/icons/src/components/ellipse-grey-solid.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipseGreySolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ) + } +) +EllipseGreySolid.displayName = "EllipseGreySolid" +export default EllipseGreySolid diff --git a/packages/design-system/icons/src/components/ellipse-mini-solid.tsx b/packages/design-system/icons/src/components/ellipse-mini-solid.tsx new file mode 100644 index 0000000000000..f6951b3cb7b76 --- /dev/null +++ b/packages/design-system/icons/src/components/ellipse-mini-solid.tsx @@ -0,0 +1,20 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipseMiniSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +EllipseMiniSolid.displayName = "EllipseMiniSolid" +export default EllipseMiniSolid diff --git a/packages/design-system/icons/src/components/ellipse-orange-solid.tsx b/packages/design-system/icons/src/components/ellipse-orange-solid.tsx new file mode 100644 index 0000000000000..752388635bd68 --- /dev/null +++ b/packages/design-system/icons/src/components/ellipse-orange-solid.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipseOrangeSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ) + } +) +EllipseOrangeSolid.displayName = "EllipseOrangeSolid" +export default EllipseOrangeSolid diff --git a/packages/design-system/icons/src/components/ellipse-purple-solid.tsx b/packages/design-system/icons/src/components/ellipse-purple-solid.tsx new file mode 100644 index 0000000000000..7c7c1a4e2f8bf --- /dev/null +++ b/packages/design-system/icons/src/components/ellipse-purple-solid.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipsePurpleSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ) + } +) +EllipsePurpleSolid.displayName = "EllipsePurpleSolid" +export default EllipsePurpleSolid diff --git a/packages/design-system/icons/src/components/ellipse-red-solid.tsx b/packages/design-system/icons/src/components/ellipse-red-solid.tsx new file mode 100644 index 0000000000000..07b7eecbaa3c4 --- /dev/null +++ b/packages/design-system/icons/src/components/ellipse-red-solid.tsx @@ -0,0 +1,72 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipseRedSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ) + } +) +EllipseRedSolid.displayName = "EllipseRedSolid" +export default EllipseRedSolid diff --git a/packages/design-system/icons/src/components/ellipse-solid.tsx b/packages/design-system/icons/src/components/ellipse-solid.tsx new file mode 100644 index 0000000000000..01054ca641214 --- /dev/null +++ b/packages/design-system/icons/src/components/ellipse-solid.tsx @@ -0,0 +1,20 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipseSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +EllipseSolid.displayName = "EllipseSolid" +export default EllipseSolid diff --git a/packages/design-system/icons/src/components/ellipsis-horizontal.tsx b/packages/design-system/icons/src/components/ellipsis-horizontal.tsx new file mode 100644 index 0000000000000..7e1e144b6d42a --- /dev/null +++ b/packages/design-system/icons/src/components/ellipsis-horizontal.tsx @@ -0,0 +1,24 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipsisHorizontal = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +EllipsisHorizontal.displayName = "EllipsisHorizontal" +export default EllipsisHorizontal diff --git a/packages/design-system/icons/src/components/ellipsis-vertical.tsx b/packages/design-system/icons/src/components/ellipsis-vertical.tsx new file mode 100644 index 0000000000000..488d10c754c23 --- /dev/null +++ b/packages/design-system/icons/src/components/ellipsis-vertical.tsx @@ -0,0 +1,24 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EllipsisVertical = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +EllipsisVertical.displayName = "EllipsisVertical" +export default EllipsisVertical diff --git a/packages/design-system/icons/src/components/envelope-solid.tsx b/packages/design-system/icons/src/components/envelope-solid.tsx new file mode 100644 index 0000000000000..8cca0d926e0cc --- /dev/null +++ b/packages/design-system/icons/src/components/envelope-solid.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EnvelopeSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +EnvelopeSolid.displayName = "EnvelopeSolid" +export default EnvelopeSolid diff --git a/packages/design-system/icons/src/components/envelope.tsx b/packages/design-system/icons/src/components/envelope.tsx new file mode 100644 index 0000000000000..06cdc825d4b01 --- /dev/null +++ b/packages/design-system/icons/src/components/envelope.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Envelope = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Envelope.displayName = "Envelope" +export default Envelope diff --git a/packages/design-system/icons/src/components/exclamation-circle-solid.tsx b/packages/design-system/icons/src/components/exclamation-circle-solid.tsx new file mode 100644 index 0000000000000..9b5e59f869022 --- /dev/null +++ b/packages/design-system/icons/src/components/exclamation-circle-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ExclamationCircleSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ExclamationCircleSolid.displayName = "ExclamationCircleSolid" +export default ExclamationCircleSolid diff --git a/packages/design-system/icons/src/components/exclamation-circle.tsx b/packages/design-system/icons/src/components/exclamation-circle.tsx new file mode 100644 index 0000000000000..2158fe98342ad --- /dev/null +++ b/packages/design-system/icons/src/components/exclamation-circle.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ExclamationCircle = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +ExclamationCircle.displayName = "ExclamationCircle" +export default ExclamationCircle diff --git a/packages/design-system/icons/src/components/eye-mini.tsx b/packages/design-system/icons/src/components/eye-mini.tsx new file mode 100644 index 0000000000000..668cfd4960fab --- /dev/null +++ b/packages/design-system/icons/src/components/eye-mini.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EyeMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +EyeMini.displayName = "EyeMini" +export default EyeMini diff --git a/packages/design-system/icons/src/components/eye-slash-mini.tsx b/packages/design-system/icons/src/components/eye-slash-mini.tsx new file mode 100644 index 0000000000000..fe70596b00840 --- /dev/null +++ b/packages/design-system/icons/src/components/eye-slash-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EyeSlashMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +EyeSlashMini.displayName = "EyeSlashMini" +export default EyeSlashMini diff --git a/packages/design-system/icons/src/components/eye-slash.tsx b/packages/design-system/icons/src/components/eye-slash.tsx new file mode 100644 index 0000000000000..48f1d9e387cd4 --- /dev/null +++ b/packages/design-system/icons/src/components/eye-slash.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const EyeSlash = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +EyeSlash.displayName = "EyeSlash" +export default EyeSlash diff --git a/packages/design-system/icons/src/components/eye.tsx b/packages/design-system/icons/src/components/eye.tsx new file mode 100644 index 0000000000000..81637d2c79bd6 --- /dev/null +++ b/packages/design-system/icons/src/components/eye.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Eye = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +Eye.displayName = "Eye" +export default Eye diff --git a/packages/design-system/icons/src/components/face-smile.tsx b/packages/design-system/icons/src/components/face-smile.tsx new file mode 100644 index 0000000000000..3f9cf172d0fad --- /dev/null +++ b/packages/design-system/icons/src/components/face-smile.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const FaceSmile = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +FaceSmile.displayName = "FaceSmile" +export default FaceSmile diff --git a/packages/design-system/icons/src/components/facebook.tsx b/packages/design-system/icons/src/components/facebook.tsx new file mode 100644 index 0000000000000..2ec0e6d934408 --- /dev/null +++ b/packages/design-system/icons/src/components/facebook.tsx @@ -0,0 +1,38 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Facebook = React.forwardRef>( + (props, ref) => { + return ( + + + + + + + + + + ) + } +) +Facebook.displayName = "Facebook" +export default Facebook diff --git a/packages/design-system/icons/src/components/figma.tsx b/packages/design-system/icons/src/components/figma.tsx new file mode 100644 index 0000000000000..d0b7b33b4c1e2 --- /dev/null +++ b/packages/design-system/icons/src/components/figma.tsx @@ -0,0 +1,46 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Figma = React.forwardRef>( + (props, ref) => { + return ( + + + + + + + + + + + + + + + ) + } +) +Figma.displayName = "Figma" +export default Figma diff --git a/packages/design-system/icons/src/components/flying-box.tsx b/packages/design-system/icons/src/components/flying-box.tsx new file mode 100644 index 0000000000000..c05db89114481 --- /dev/null +++ b/packages/design-system/icons/src/components/flying-box.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const FlyingBox = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +FlyingBox.displayName = "FlyingBox" +export default FlyingBox diff --git a/packages/design-system/icons/src/components/folder-open.tsx b/packages/design-system/icons/src/components/folder-open.tsx new file mode 100644 index 0000000000000..49a1281b6ec94 --- /dev/null +++ b/packages/design-system/icons/src/components/folder-open.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const FolderOpen = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +FolderOpen.displayName = "FolderOpen" +export default FolderOpen diff --git a/packages/design-system/icons/src/components/folder.tsx b/packages/design-system/icons/src/components/folder.tsx new file mode 100644 index 0000000000000..63b65b9292059 --- /dev/null +++ b/packages/design-system/icons/src/components/folder.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Folder = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Folder.displayName = "Folder" +export default Folder diff --git a/packages/design-system/icons/src/components/forward-solid.tsx b/packages/design-system/icons/src/components/forward-solid.tsx new file mode 100644 index 0000000000000..71a03580aa3fa --- /dev/null +++ b/packages/design-system/icons/src/components/forward-solid.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ForwardSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ForwardSolid.displayName = "ForwardSolid" +export default ForwardSolid diff --git a/packages/design-system/icons/src/components/funnel.tsx b/packages/design-system/icons/src/components/funnel.tsx new file mode 100644 index 0000000000000..fdfb0230ceab7 --- /dev/null +++ b/packages/design-system/icons/src/components/funnel.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Funnel = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Funnel.displayName = "Funnel" +export default Funnel diff --git a/packages/design-system/icons/src/components/gatsby-ex.tsx b/packages/design-system/icons/src/components/gatsby-ex.tsx new file mode 100644 index 0000000000000..9f6a530eb89ec --- /dev/null +++ b/packages/design-system/icons/src/components/gatsby-ex.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const GatsbyEx = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +GatsbyEx.displayName = "GatsbyEx" +export default GatsbyEx diff --git a/packages/design-system/icons/src/components/gatsby.tsx b/packages/design-system/icons/src/components/gatsby.tsx new file mode 100644 index 0000000000000..9ec553f7454ff --- /dev/null +++ b/packages/design-system/icons/src/components/gatsby.tsx @@ -0,0 +1,24 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Gatsby = React.forwardRef>( + (props, ref) => { + return ( + + + + + ) + } +) +Gatsby.displayName = "Gatsby" +export default Gatsby diff --git a/packages/design-system/icons/src/components/gift-solid.tsx b/packages/design-system/icons/src/components/gift-solid.tsx new file mode 100644 index 0000000000000..93c9006e840a5 --- /dev/null +++ b/packages/design-system/icons/src/components/gift-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const GiftSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +GiftSolid.displayName = "GiftSolid" +export default GiftSolid diff --git a/packages/design-system/icons/src/components/gift.tsx b/packages/design-system/icons/src/components/gift.tsx new file mode 100644 index 0000000000000..06ab961cf19ac --- /dev/null +++ b/packages/design-system/icons/src/components/gift.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Gift = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Gift.displayName = "Gift" +export default Gift diff --git a/packages/design-system/icons/src/components/github.tsx b/packages/design-system/icons/src/components/github.tsx new file mode 100644 index 0000000000000..b64e14bd428f9 --- /dev/null +++ b/packages/design-system/icons/src/components/github.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Github = React.forwardRef>( + (props, ref) => { + return ( + + + + ) + } +) +Github.displayName = "Github" +export default Github diff --git a/packages/design-system/icons/src/components/globe-europe-solid.tsx b/packages/design-system/icons/src/components/globe-europe-solid.tsx new file mode 100644 index 0000000000000..1706d4a55a342 --- /dev/null +++ b/packages/design-system/icons/src/components/globe-europe-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const GlobeEuropeSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +GlobeEuropeSolid.displayName = "GlobeEuropeSolid" +export default GlobeEuropeSolid diff --git a/packages/design-system/icons/src/components/globe-europe.tsx b/packages/design-system/icons/src/components/globe-europe.tsx new file mode 100644 index 0000000000000..ea0b3c85a8776 --- /dev/null +++ b/packages/design-system/icons/src/components/globe-europe.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const GlobeEurope = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +GlobeEurope.displayName = "GlobeEurope" +export default GlobeEurope diff --git a/packages/design-system/icons/src/components/google.tsx b/packages/design-system/icons/src/components/google.tsx new file mode 100644 index 0000000000000..d1c01e29b15e8 --- /dev/null +++ b/packages/design-system/icons/src/components/google.tsx @@ -0,0 +1,35 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Google = React.forwardRef>( + (props, ref) => { + return ( + + + + + + + ) + } +) +Google.displayName = "Google" +export default Google diff --git a/packages/design-system/icons/src/components/hashtag.tsx b/packages/design-system/icons/src/components/hashtag.tsx new file mode 100644 index 0000000000000..ca350926f023c --- /dev/null +++ b/packages/design-system/icons/src/components/hashtag.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Hashtag = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Hashtag.displayName = "Hashtag" +export default Hashtag diff --git a/packages/design-system/icons/src/components/heart.tsx b/packages/design-system/icons/src/components/heart.tsx new file mode 100644 index 0000000000000..755807cc4dc99 --- /dev/null +++ b/packages/design-system/icons/src/components/heart.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Heart = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Heart.displayName = "Heart" +export default Heart diff --git a/packages/design-system/icons/src/components/inbox-solid.tsx b/packages/design-system/icons/src/components/inbox-solid.tsx new file mode 100644 index 0000000000000..4c5ce9ba91f87 --- /dev/null +++ b/packages/design-system/icons/src/components/inbox-solid.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import type { IconProps } from "../types" +const InboxSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +InboxSolid.displayName = "InboxSolid" +export default InboxSolid diff --git a/packages/design-system/icons/src/components/index.ts b/packages/design-system/icons/src/components/index.ts new file mode 100644 index 0000000000000..7a9a737c06940 --- /dev/null +++ b/packages/design-system/icons/src/components/index.ts @@ -0,0 +1,250 @@ +// This file is generated automatically. +export { default as AcademicCapSolid } from "./academic-cap-solid" +export { default as AcademicCap } from "./academic-cap" +export { default as Adjustments } from "./adjustments" +export { default as Apple } from "./apple" +export { default as ArchiveBox } from "./archive-box" +export { default as ArrowDownCircle } from "./arrow-down-circle" +export { default as ArrowDownLeftMini } from "./arrow-down-left-mini" +export { default as ArrowDownLeft } from "./arrow-down-left" +export { default as ArrowDownMini } from "./arrow-down-mini" +export { default as ArrowDownRightMini } from "./arrow-down-right-mini" +export { default as ArrowDownTray } from "./arrow-down-tray" +export { default as ArrowDown } from "./arrow-down" +export { default as ArrowLeftMini } from "./arrow-left-mini" +export { default as ArrowLeft } from "./arrow-left" +export { default as ArrowLongDown } from "./arrow-long-down" +export { default as ArrowLongLeft } from "./arrow-long-left" +export { default as ArrowLongRight } from "./arrow-long-right" +export { default as ArrowLongUp } from "./arrow-long-up" +export { default as ArrowPathMini } from "./arrow-path-mini" +export { default as ArrowPath } from "./arrow-path" +export { default as ArrowRightMini } from "./arrow-right-mini" +export { default as ArrowRightOnRectangle } from "./arrow-right-on-rectangle" +export { default as ArrowUpCircleSolid } from "./arrow-up-circle-solid" +export { default as ArrowUpDown } from "./arrow-up-down" +export { default as ArrowUpMini } from "./arrow-up-mini" +export { default as ArrowUpRightMini } from "./arrow-up-right-mini" +export { default as ArrowUpRightOnBox } from "./arrow-up-right-on-box" +export { default as ArrowUpTray } from "./arrow-up-tray" +export { default as ArrowUturnLeft } from "./arrow-uturn-left" +export { default as ArrowsPointingOutMini } from "./arrows-pointing-out-mini" +export { default as ArrowsPointingOut } from "./arrows-pointing-out" +export { default as ArrrowRight } from "./arrrow-right" +export { default as AtSymbol } from "./at-symbol" +export { default as BackwardSolid } from "./backward-solid" +export { default as BarsThree } from "./bars-three" +export { default as BellAlertSolid } from "./bell-alert-solid" +export { default as BellAlert } from "./bell-alert" +export { default as BoltSolid } from "./bolt-solid" +export { default as Bolt } from "./bolt" +export { default as BookOpen } from "./book-open" +export { default as BugAntSolid } from "./bug-ant-solid" +export { default as Bug } from "./bug" +export { default as BuildingStorefront } from "./building-storefront" +export { default as BuildingTax } from "./building-tax" +export { default as BuildingsMini } from "./buildings-mini" +export { default as BuildingsSolid } from "./buildings-solid" +export { default as Buildings } from "./buildings" +export { default as CalendarMini } from "./calendar-mini" +export { default as CalendarSolid } from "./calendar-solid" +export { default as Calendar } from "./calendar" +export { default as Camera } from "./camera" +export { default as CashSolid } from "./cash-solid" +export { default as Cash } from "./cash" +export { default as ChannelsSolid } from "./channels-solid" +export { default as Channels } from "./channels" +export { default as ChartBar } from "./chart-bar" +export { default as ChatBubbleLeftRightSolid } from "./chat-bubble-left-right-solid" +export { default as ChatBubbleLeftRight } from "./chat-bubble-left-right" +export { default as ChatBubble } from "./chat-bubble" +export { default as CheckCircleMiniSolid } from "./check-circle-mini-solid" +export { default as CheckCircleSolid } from "./check-circle-solid" +export { default as CheckMini } from "./check-mini" +export { default as Check } from "./check" +export { default as ChevronDoubleLeftMiniSolid } from "./chevron-double-left-mini-solid" +export { default as ChevronDoubleLeft } from "./chevron-double-left" +export { default as ChevronDoubleRightMiniSolid } from "./chevron-double-right-mini-solid" +export { default as ChevronDoubleRight } from "./chevron-double-right" +export { default as ChevronDownMini } from "./chevron-down-mini" +export { default as ChevronDown } from "./chevron-down" +export { default as ChevronLeftMini } from "./chevron-left-mini" +export { default as ChevronLeft } from "./chevron-left" +export { default as ChevronRightMini } from "./chevron-right-mini" +export { default as ChevronRight } from "./chevron-right" +export { default as ChevronUpDown } from "./chevron-up-down" +export { default as ChevronUpMini } from "./chevron-up-mini" +export { default as CircleDottedLine } from "./circle-dotted-line" +export { default as CircleFilledSolid } from "./circle-filled-solid" +export { default as CircleHalfSolid } from "./circle-half-solid" +export { default as CircleMiniFilledSolid } from "./circle-mini-filled-solid" +export { default as CircleMiniSolid } from "./circle-mini-solid" +export { default as CircleQuarterSolid } from "./circle-quarter-solid" +export { default as CircleSolid } from "./circle-solid" +export { default as CircleStackSolid } from "./circle-stack-solid" +export { default as CircleStack } from "./circle-stack" +export { default as CircleThreeQuartersSolid } from "./circle-three-quarters-solid" +export { default as ClockChangedSolidMini } from "./clock-changed-solid-mini" +export { default as ClockSolidMini } from "./clock-solid-mini" +export { default as ClockSolid } from "./clock-solid" +export { default as Clock } from "./clock" +export { default as CloudArrowDown } from "./cloud-arrow-down" +export { default as CloudArrowUp } from "./cloud-arrow-up" +export { default as CogSixToothSolid } from "./cog-six-tooth-solid" +export { default as CogSixTooth } from "./cog-six-tooth" +export { default as CommandLineSolid } from "./command-line-solid" +export { default as CommandLine } from "./command-line" +export { default as ComponentSolid } from "./component-solid" +export { default as Component } from "./component" +export { default as ComputerDesktopSolid } from "./computer-desktop-solid" +export { default as ComputerDesktop } from "./computer-desktop" +export { default as CreditCardSolid } from "./credit-card-solid" +export { default as CreditCard } from "./credit-card" +export { default as CubeSolid } from "./cube-solid" +export { default as CurrencyDollarSolid } from "./currency-dollar-solid" +export { default as CurrencyDollar } from "./currency-dollar" +export { default as CursorArrowRays } from "./cursor-arrow-rays" +export { default as Discord } from "./discord" +export { default as DocumentSeries } from "./document-series" +export { default as DocumentTextSolid } from "./document-text-solid" +export { default as DocumentText } from "./document-text" +export { default as DotsSix } from "./dots-six" +export { default as EllipseBlueSolid } from "./ellipse-blue-solid" +export { default as EllipseGreenSolid } from "./ellipse-green-solid" +export { default as EllipseGreySolid } from "./ellipse-grey-solid" +export { default as EllipseMiniSolid } from "./ellipse-mini-solid" +export { default as EllipseOrangeSolid } from "./ellipse-orange-solid" +export { default as EllipsePurpleSolid } from "./ellipse-purple-solid" +export { default as EllipseRedSolid } from "./ellipse-red-solid" +export { default as EllipseSolid } from "./ellipse-solid" +export { default as EllipsisHorizontal } from "./ellipsis-horizontal" +export { default as EllipsisVertical } from "./ellipsis-vertical" +export { default as EnvelopeSolid } from "./envelope-solid" +export { default as Envelope } from "./envelope" +export { default as ExclamationCircleSolid } from "./exclamation-circle-solid" +export { default as ExclamationCircle } from "./exclamation-circle" +export { default as EyeMini } from "./eye-mini" +export { default as EyeSlashMini } from "./eye-slash-mini" +export { default as EyeSlash } from "./eye-slash" +export { default as Eye } from "./eye" +export { default as FaceSmile } from "./face-smile" +export { default as Facebook } from "./facebook" +export { default as Figma } from "./figma" +export { default as FlyingBox } from "./flying-box" +export { default as FolderOpen } from "./folder-open" +export { default as Folder } from "./folder" +export { default as ForwardSolid } from "./forward-solid" +export { default as Funnel } from "./funnel" +export { default as GatsbyEx } from "./gatsby-ex" +export { default as Gatsby } from "./gatsby" +export { default as GiftSolid } from "./gift-solid" +export { default as Gift } from "./gift" +export { default as Github } from "./github" +export { default as GlobeEuropeSolid } from "./globe-europe-solid" +export { default as GlobeEurope } from "./globe-europe" +export { default as Google } from "./google" +export { default as Hashtag } from "./hashtag" +export { default as Heart } from "./heart" +export { default as InboxSolid } from "./inbox-solid" +export { default as InformationCircleSolid } from "./information-circle-solid" +export { default as InformationCircle } from "./information-circle" +export { default as JavascriptEx } from "./javascript-ex" +export { default as Javascript } from "./javascript" +export { default as KeySolid } from "./key-solid" +export { default as Key } from "./key" +export { default as KlarnaEx } from "./klarna-ex" +export { default as Klarna } from "./klarna" +export { default as LightBulbSolid } from "./light-bulb-solid" +export { default as LightBulb } from "./light-bulb" +export { default as Link } from "./link" +export { default as Linkedin } from "./linkedin" +export { default as ListBullet } from "./list-bullet" +export { default as LockClosedSolid } from "./lock-closed-solid" +export { default as LockOpenSolid } from "./lock-open-solid" +export { default as MagnifyingGlassMini } from "./magnifying-glass-mini" +export { default as MagnifyingGlass } from "./magnifying-glass" +export { default as MapPin } from "./map-pin" +export { default as Map } from "./map" +export { default as Medusa } from "./medusa" +export { default as MinusMini } from "./minus-mini" +export { default as Minus } from "./minus" +export { default as MoonSolid } from "./moon-solid" +export { default as Moon } from "./moon" +export { default as Newspaper } from "./newspaper" +export { default as NextJs } from "./next-js" +export { default as PaperClip } from "./paper-clip" +export { default as PauseSolid } from "./pause-solid" +export { default as PencilSquareSolid } from "./pencil-square-solid" +export { default as PencilSquare } from "./pencil-square" +export { default as Pencil } from "./pencil" +export { default as Phone } from "./phone" +export { default as PhotoSolid } from "./photo-solid" +export { default as Photo } from "./photo" +export { default as PlayMiniSolid } from "./play-mini-solid" +export { default as PlaySolid } from "./play-solid" +export { default as PlusMini } from "./plus-mini" +export { default as Plus } from "./plus" +export { default as PuzzleSolid } from "./puzzle-solid" +export { default as Puzzle } from "./puzzle" +export { default as QuestionMarkCircle } from "./question-mark-circle" +export { default as QuestionMark } from "./question-mark" +export { default as ReactJsEx } from "./react-js-ex" +export { default as ReactJs } from "./react-js" +export { default as ReceiptPercent } from "./receipt-percent" +export { default as ReplaySolid } from "./replay-solid" +export { default as Resize } from "./resize" +export { default as RocketLaunchSolid } from "./rocket-launch-solid" +export { default as RocketLaunch } from "./rocket-launch" +export { default as Rss } from "./rss" +export { default as ServerSolid } from "./server-solid" +export { default as ServerStackSolid } from "./server-stack-solid" +export { default as ServerStack } from "./server-stack" +export { default as Server } from "./server" +export { default as ShoppingBag } from "./shopping-bag" +export { default as ShoppingCartSolid } from "./shopping-cart-solid" +export { default as ShoppingCart } from "./shopping-cart" +export { default as Sidebar } from "./sidebar" +export { default as Slack } from "./slack" +export { default as Snooze } from "./snooze" +export { default as SparklesMiniSolid } from "./sparkles-mini-solid" +export { default as SparklesMini } from "./sparkles-mini" +export { default as SparklesSolid } from "./sparkles-solid" +export { default as Sparkles } from "./sparkles" +export { default as Spinner } from "./spinner" +export { default as SquareTwoStackMini } from "./square-two-stack-mini" +export { default as SquareTwoStackSolid } from "./square-two-stack-solid" +export { default as SquareTwoStack } from "./square-two-stack" +export { default as SquaresPlusSolid } from "./squares-plus-solid" +export { default as SquaresPlus } from "./squares-plus" +export { default as StarSolid } from "./star-solid" +export { default as Star } from "./star" +export { default as Stripe } from "./stripe" +export { default as SunSolid } from "./sun-solid" +export { default as Sun } from "./sun" +export { default as SwatchSolid } from "./swatch-solid" +export { default as Swatch } from "./swatch" +export { default as TagSolid } from "./tag-solid" +export { default as Tag } from "./tag" +export { default as Tailwind } from "./tailwind" +export { default as Text } from "./text" +export { default as ThumbDown } from "./thumb-down" +export { default as ThumbUp } from "./thumb-up" +export { default as ToolsSolid } from "./tools-solid" +export { default as Tools } from "./tools" +export { default as Trash } from "./trash" +export { default as TriangleDownMini } from "./triangle-down-mini" +export { default as TriangleRightMini } from "./triangle-right-mini" +export { default as Twitter } from "./twitter" +export { default as TypescriptEx } from "./typescript-ex" +export { default as Typescript } from "./typescript" +export { default as UserCircleMini } from "./user-circle-mini" +export { default as UserGroup } from "./user-group" +export { default as User } from "./user" +export { default as UsersSolid } from "./users-solid" +export { default as Users } from "./users" +export { default as Vercel } from "./vercel" +export { default as Window } from "./window" +export { default as XCircleSolid } from "./x-circle-solid" +export { default as XMarkMini } from "./x-mark-mini" +export { default as XMark } from "./x-mark" +export { default as X } from "./x" diff --git a/packages/design-system/icons/src/components/information-circle-solid.tsx b/packages/design-system/icons/src/components/information-circle-solid.tsx new file mode 100644 index 0000000000000..988afaa01a649 --- /dev/null +++ b/packages/design-system/icons/src/components/information-circle-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const InformationCircleSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +InformationCircleSolid.displayName = "InformationCircleSolid" +export default InformationCircleSolid diff --git a/packages/design-system/icons/src/components/information-circle.tsx b/packages/design-system/icons/src/components/information-circle.tsx new file mode 100644 index 0000000000000..0ed7c5a5df64b --- /dev/null +++ b/packages/design-system/icons/src/components/information-circle.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const InformationCircle = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +InformationCircle.displayName = "InformationCircle" +export default InformationCircle diff --git a/packages/design-system/icons/src/components/javascript-ex.tsx b/packages/design-system/icons/src/components/javascript-ex.tsx new file mode 100644 index 0000000000000..f62db6b3ff2bd --- /dev/null +++ b/packages/design-system/icons/src/components/javascript-ex.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const JavascriptEx = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +JavascriptEx.displayName = "JavascriptEx" +export default JavascriptEx diff --git a/packages/design-system/icons/src/components/javascript.tsx b/packages/design-system/icons/src/components/javascript.tsx new file mode 100644 index 0000000000000..f3e7b4684be2e --- /dev/null +++ b/packages/design-system/icons/src/components/javascript.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Javascript = React.forwardRef>( + (props, ref) => { + return ( + + + + + ) + } +) +Javascript.displayName = "Javascript" +export default Javascript diff --git a/packages/design-system/icons/src/components/key-solid.tsx b/packages/design-system/icons/src/components/key-solid.tsx new file mode 100644 index 0000000000000..6a102b7640588 --- /dev/null +++ b/packages/design-system/icons/src/components/key-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const KeySolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +KeySolid.displayName = "KeySolid" +export default KeySolid diff --git a/packages/design-system/icons/src/components/key.tsx b/packages/design-system/icons/src/components/key.tsx new file mode 100644 index 0000000000000..fe9353440f28c --- /dev/null +++ b/packages/design-system/icons/src/components/key.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Key = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Key.displayName = "Key" +export default Key diff --git a/packages/design-system/icons/src/components/klarna-ex.tsx b/packages/design-system/icons/src/components/klarna-ex.tsx new file mode 100644 index 0000000000000..c1a44b013a8d3 --- /dev/null +++ b/packages/design-system/icons/src/components/klarna-ex.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const KlarnaEx = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +KlarnaEx.displayName = "KlarnaEx" +export default KlarnaEx diff --git a/packages/design-system/icons/src/components/klarna.tsx b/packages/design-system/icons/src/components/klarna.tsx new file mode 100644 index 0000000000000..8f7e3ef87f887 --- /dev/null +++ b/packages/design-system/icons/src/components/klarna.tsx @@ -0,0 +1,28 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Klarna = React.forwardRef>( + (props, ref) => { + return ( + + + + + + ) + } +) +Klarna.displayName = "Klarna" +export default Klarna diff --git a/packages/design-system/icons/src/components/light-bulb-solid.tsx b/packages/design-system/icons/src/components/light-bulb-solid.tsx new file mode 100644 index 0000000000000..af960ff1445db --- /dev/null +++ b/packages/design-system/icons/src/components/light-bulb-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const LightBulbSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +LightBulbSolid.displayName = "LightBulbSolid" +export default LightBulbSolid diff --git a/packages/design-system/icons/src/components/light-bulb.tsx b/packages/design-system/icons/src/components/light-bulb.tsx new file mode 100644 index 0000000000000..3283ae8e7a68d --- /dev/null +++ b/packages/design-system/icons/src/components/light-bulb.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const LightBulb = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +LightBulb.displayName = "LightBulb" +export default LightBulb diff --git a/packages/design-system/icons/src/components/link.tsx b/packages/design-system/icons/src/components/link.tsx new file mode 100644 index 0000000000000..b0fc44ad6afcc --- /dev/null +++ b/packages/design-system/icons/src/components/link.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Link = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Link.displayName = "Link" +export default Link diff --git a/packages/design-system/icons/src/components/linkedin.tsx b/packages/design-system/icons/src/components/linkedin.tsx new file mode 100644 index 0000000000000..cf62d95cc00ab --- /dev/null +++ b/packages/design-system/icons/src/components/linkedin.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Linkedin = React.forwardRef>( + (props, ref) => { + return ( + + + + ) + } +) +Linkedin.displayName = "Linkedin" +export default Linkedin diff --git a/packages/design-system/icons/src/components/list-bullet.tsx b/packages/design-system/icons/src/components/list-bullet.tsx new file mode 100644 index 0000000000000..99d7c391b6f85 --- /dev/null +++ b/packages/design-system/icons/src/components/list-bullet.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ListBullet = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ListBullet.displayName = "ListBullet" +export default ListBullet diff --git a/packages/design-system/icons/src/components/lock-closed-solid.tsx b/packages/design-system/icons/src/components/lock-closed-solid.tsx new file mode 100644 index 0000000000000..87dafc828bddc --- /dev/null +++ b/packages/design-system/icons/src/components/lock-closed-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const LockClosedSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +LockClosedSolid.displayName = "LockClosedSolid" +export default LockClosedSolid diff --git a/packages/design-system/icons/src/components/lock-open-solid.tsx b/packages/design-system/icons/src/components/lock-open-solid.tsx new file mode 100644 index 0000000000000..3d4d05f9c6e0e --- /dev/null +++ b/packages/design-system/icons/src/components/lock-open-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const LockOpenSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +LockOpenSolid.displayName = "LockOpenSolid" +export default LockOpenSolid diff --git a/packages/design-system/icons/src/components/magnifying-glass-mini.tsx b/packages/design-system/icons/src/components/magnifying-glass-mini.tsx new file mode 100644 index 0000000000000..6e6838af4b1c0 --- /dev/null +++ b/packages/design-system/icons/src/components/magnifying-glass-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const MagnifyingGlassMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +MagnifyingGlassMini.displayName = "MagnifyingGlassMini" +export default MagnifyingGlassMini diff --git a/packages/design-system/icons/src/components/magnifying-glass.tsx b/packages/design-system/icons/src/components/magnifying-glass.tsx new file mode 100644 index 0000000000000..1d82af8c31a0e --- /dev/null +++ b/packages/design-system/icons/src/components/magnifying-glass.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const MagnifyingGlass = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +MagnifyingGlass.displayName = "MagnifyingGlass" +export default MagnifyingGlass diff --git a/packages/design-system/icons/src/components/map-pin.tsx b/packages/design-system/icons/src/components/map-pin.tsx new file mode 100644 index 0000000000000..2100ee82f198a --- /dev/null +++ b/packages/design-system/icons/src/components/map-pin.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const MapPin = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +MapPin.displayName = "MapPin" +export default MapPin diff --git a/packages/design-system/icons/src/components/map.tsx b/packages/design-system/icons/src/components/map.tsx new file mode 100644 index 0000000000000..f3e651d4c1883 --- /dev/null +++ b/packages/design-system/icons/src/components/map.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Map = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Map.displayName = "Map" +export default Map diff --git a/packages/design-system/icons/src/components/medusa.tsx b/packages/design-system/icons/src/components/medusa.tsx new file mode 100644 index 0000000000000..ac1e8d3a90891 --- /dev/null +++ b/packages/design-system/icons/src/components/medusa.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Medusa = React.forwardRef>( + (props, ref) => { + return ( + + + + ) + } +) +Medusa.displayName = "Medusa" +export default Medusa diff --git a/packages/design-system/icons/src/components/minus-mini.tsx b/packages/design-system/icons/src/components/minus-mini.tsx new file mode 100644 index 0000000000000..fcf0ae4d7d88b --- /dev/null +++ b/packages/design-system/icons/src/components/minus-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const MinusMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +MinusMini.displayName = "MinusMini" +export default MinusMini diff --git a/packages/design-system/icons/src/components/minus.tsx b/packages/design-system/icons/src/components/minus.tsx new file mode 100644 index 0000000000000..34ce78e7864ca --- /dev/null +++ b/packages/design-system/icons/src/components/minus.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Minus = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Minus.displayName = "Minus" +export default Minus diff --git a/packages/design-system/icons/src/components/moon-solid.tsx b/packages/design-system/icons/src/components/moon-solid.tsx new file mode 100644 index 0000000000000..24ad54ab596ba --- /dev/null +++ b/packages/design-system/icons/src/components/moon-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const MoonSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +MoonSolid.displayName = "MoonSolid" +export default MoonSolid diff --git a/packages/design-system/icons/src/components/moon.tsx b/packages/design-system/icons/src/components/moon.tsx new file mode 100644 index 0000000000000..61c99e5ced6eb --- /dev/null +++ b/packages/design-system/icons/src/components/moon.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Moon = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Moon.displayName = "Moon" +export default Moon diff --git a/packages/design-system/icons/src/components/newspaper.tsx b/packages/design-system/icons/src/components/newspaper.tsx new file mode 100644 index 0000000000000..09dc026506261 --- /dev/null +++ b/packages/design-system/icons/src/components/newspaper.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Newspaper = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Newspaper.displayName = "Newspaper" +export default Newspaper diff --git a/packages/design-system/icons/src/components/next-js.tsx b/packages/design-system/icons/src/components/next-js.tsx new file mode 100644 index 0000000000000..9d30b8696c735 --- /dev/null +++ b/packages/design-system/icons/src/components/next-js.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import type { IconProps } from "../types" +const NextJs = React.forwardRef>( + (props, ref) => { + return ( + + + + + ) + } +) +NextJs.displayName = "NextJs" +export default NextJs diff --git a/packages/design-system/icons/src/components/paper-clip.tsx b/packages/design-system/icons/src/components/paper-clip.tsx new file mode 100644 index 0000000000000..cd2307c4b9574 --- /dev/null +++ b/packages/design-system/icons/src/components/paper-clip.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const PaperClip = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +PaperClip.displayName = "PaperClip" +export default PaperClip diff --git a/packages/design-system/icons/src/components/pause-solid.tsx b/packages/design-system/icons/src/components/pause-solid.tsx new file mode 100644 index 0000000000000..ad0216cc6d9c7 --- /dev/null +++ b/packages/design-system/icons/src/components/pause-solid.tsx @@ -0,0 +1,35 @@ +import * as React from "react" +import type { IconProps } from "../types" +const PauseSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +PauseSolid.displayName = "PauseSolid" +export default PauseSolid diff --git a/packages/design-system/icons/src/components/pencil-square-solid.tsx b/packages/design-system/icons/src/components/pencil-square-solid.tsx new file mode 100644 index 0000000000000..b3a63d65ddaed --- /dev/null +++ b/packages/design-system/icons/src/components/pencil-square-solid.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import type { IconProps } from "../types" +const PencilSquareSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +PencilSquareSolid.displayName = "PencilSquareSolid" +export default PencilSquareSolid diff --git a/packages/design-system/icons/src/components/pencil-square.tsx b/packages/design-system/icons/src/components/pencil-square.tsx new file mode 100644 index 0000000000000..a9b2843d04c53 --- /dev/null +++ b/packages/design-system/icons/src/components/pencil-square.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const PencilSquare = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +PencilSquare.displayName = "PencilSquare" +export default PencilSquare diff --git a/packages/design-system/icons/src/components/pencil.tsx b/packages/design-system/icons/src/components/pencil.tsx new file mode 100644 index 0000000000000..443533c809cbd --- /dev/null +++ b/packages/design-system/icons/src/components/pencil.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Pencil = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Pencil.displayName = "Pencil" +export default Pencil diff --git a/packages/design-system/icons/src/components/phone.tsx b/packages/design-system/icons/src/components/phone.tsx new file mode 100644 index 0000000000000..5c3537435f756 --- /dev/null +++ b/packages/design-system/icons/src/components/phone.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Phone = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Phone.displayName = "Phone" +export default Phone diff --git a/packages/design-system/icons/src/components/photo-solid.tsx b/packages/design-system/icons/src/components/photo-solid.tsx new file mode 100644 index 0000000000000..5e744e53c83cc --- /dev/null +++ b/packages/design-system/icons/src/components/photo-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const PhotoSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +PhotoSolid.displayName = "PhotoSolid" +export default PhotoSolid diff --git a/packages/design-system/icons/src/components/photo.tsx b/packages/design-system/icons/src/components/photo.tsx new file mode 100644 index 0000000000000..42b712bc9f3fc --- /dev/null +++ b/packages/design-system/icons/src/components/photo.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Photo = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Photo.displayName = "Photo" +export default Photo diff --git a/packages/design-system/icons/src/components/play-mini-solid.tsx b/packages/design-system/icons/src/components/play-mini-solid.tsx new file mode 100644 index 0000000000000..b9381b5bc0552 --- /dev/null +++ b/packages/design-system/icons/src/components/play-mini-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const PlayMiniSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +PlayMiniSolid.displayName = "PlayMiniSolid" +export default PlayMiniSolid diff --git a/packages/design-system/icons/src/components/play-solid.tsx b/packages/design-system/icons/src/components/play-solid.tsx new file mode 100644 index 0000000000000..9d05ca1a628a1 --- /dev/null +++ b/packages/design-system/icons/src/components/play-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const PlaySolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +PlaySolid.displayName = "PlaySolid" +export default PlaySolid diff --git a/packages/design-system/icons/src/components/plus-mini.tsx b/packages/design-system/icons/src/components/plus-mini.tsx new file mode 100644 index 0000000000000..e60f3760fc5d6 --- /dev/null +++ b/packages/design-system/icons/src/components/plus-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const PlusMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +PlusMini.displayName = "PlusMini" +export default PlusMini diff --git a/packages/design-system/icons/src/components/plus.tsx b/packages/design-system/icons/src/components/plus.tsx new file mode 100644 index 0000000000000..d2540429c6346 --- /dev/null +++ b/packages/design-system/icons/src/components/plus.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Plus = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Plus.displayName = "Plus" +export default Plus diff --git a/packages/design-system/icons/src/components/puzzle-solid.tsx b/packages/design-system/icons/src/components/puzzle-solid.tsx new file mode 100644 index 0000000000000..b4d6d096d4627 --- /dev/null +++ b/packages/design-system/icons/src/components/puzzle-solid.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const PuzzleSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +PuzzleSolid.displayName = "PuzzleSolid" +export default PuzzleSolid diff --git a/packages/design-system/icons/src/components/puzzle.tsx b/packages/design-system/icons/src/components/puzzle.tsx new file mode 100644 index 0000000000000..3b8183eb6da68 --- /dev/null +++ b/packages/design-system/icons/src/components/puzzle.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Puzzle = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Puzzle.displayName = "Puzzle" +export default Puzzle diff --git a/packages/design-system/icons/src/components/question-mark-circle.tsx b/packages/design-system/icons/src/components/question-mark-circle.tsx new file mode 100644 index 0000000000000..76a876d0dbf3c --- /dev/null +++ b/packages/design-system/icons/src/components/question-mark-circle.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const QuestionMarkCircle = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +QuestionMarkCircle.displayName = "QuestionMarkCircle" +export default QuestionMarkCircle diff --git a/packages/design-system/icons/src/components/question-mark.tsx b/packages/design-system/icons/src/components/question-mark.tsx new file mode 100644 index 0000000000000..051e1b8e16a92 --- /dev/null +++ b/packages/design-system/icons/src/components/question-mark.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const QuestionMark = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +QuestionMark.displayName = "QuestionMark" +export default QuestionMark diff --git a/packages/design-system/icons/src/components/react-js-ex.tsx b/packages/design-system/icons/src/components/react-js-ex.tsx new file mode 100644 index 0000000000000..05f2ac8d5d54d --- /dev/null +++ b/packages/design-system/icons/src/components/react-js-ex.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ReactJsEx = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ReactJsEx.displayName = "ReactJsEx" +export default ReactJsEx diff --git a/packages/design-system/icons/src/components/react-js.tsx b/packages/design-system/icons/src/components/react-js.tsx new file mode 100644 index 0000000000000..d4de5230aa20b --- /dev/null +++ b/packages/design-system/icons/src/components/react-js.tsx @@ -0,0 +1,39 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ReactJs = React.forwardRef>( + (props, ref) => { + return ( + + + + + + + + ) + } +) +ReactJs.displayName = "ReactJs" +export default ReactJs diff --git a/packages/design-system/icons/src/components/receipt-percent.tsx b/packages/design-system/icons/src/components/receipt-percent.tsx new file mode 100644 index 0000000000000..a1b70ba83696d --- /dev/null +++ b/packages/design-system/icons/src/components/receipt-percent.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ReceiptPercent = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ReceiptPercent.displayName = "ReceiptPercent" +export default ReceiptPercent diff --git a/packages/design-system/icons/src/components/replay-solid.tsx b/packages/design-system/icons/src/components/replay-solid.tsx new file mode 100644 index 0000000000000..0b9f8e6d1de03 --- /dev/null +++ b/packages/design-system/icons/src/components/replay-solid.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ReplaySolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +ReplaySolid.displayName = "ReplaySolid" +export default ReplaySolid diff --git a/packages/design-system/icons/src/components/resize.tsx b/packages/design-system/icons/src/components/resize.tsx new file mode 100644 index 0000000000000..4706c0ae3733d --- /dev/null +++ b/packages/design-system/icons/src/components/resize.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Resize = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Resize.displayName = "Resize" +export default Resize diff --git a/packages/design-system/icons/src/components/rocket-launch-solid.tsx b/packages/design-system/icons/src/components/rocket-launch-solid.tsx new file mode 100644 index 0000000000000..9d5f8e7c9c03c --- /dev/null +++ b/packages/design-system/icons/src/components/rocket-launch-solid.tsx @@ -0,0 +1,31 @@ +import * as React from "react" +import type { IconProps } from "../types" +const RocketLaunchSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +RocketLaunchSolid.displayName = "RocketLaunchSolid" +export default RocketLaunchSolid diff --git a/packages/design-system/icons/src/components/rocket-launch.tsx b/packages/design-system/icons/src/components/rocket-launch.tsx new file mode 100644 index 0000000000000..6a330372f203b --- /dev/null +++ b/packages/design-system/icons/src/components/rocket-launch.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const RocketLaunch = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +RocketLaunch.displayName = "RocketLaunch" +export default RocketLaunch diff --git a/packages/design-system/icons/src/components/rss.tsx b/packages/design-system/icons/src/components/rss.tsx new file mode 100644 index 0000000000000..86d99b7c26e75 --- /dev/null +++ b/packages/design-system/icons/src/components/rss.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Rss = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Rss.displayName = "Rss" +export default Rss diff --git a/packages/design-system/icons/src/components/server-solid.tsx b/packages/design-system/icons/src/components/server-solid.tsx new file mode 100644 index 0000000000000..8436df5638ff2 --- /dev/null +++ b/packages/design-system/icons/src/components/server-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ServerSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +ServerSolid.displayName = "ServerSolid" +export default ServerSolid diff --git a/packages/design-system/icons/src/components/server-stack-solid.tsx b/packages/design-system/icons/src/components/server-stack-solid.tsx new file mode 100644 index 0000000000000..68e7a053558c5 --- /dev/null +++ b/packages/design-system/icons/src/components/server-stack-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ServerStackSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +ServerStackSolid.displayName = "ServerStackSolid" +export default ServerStackSolid diff --git a/packages/design-system/icons/src/components/server-stack.tsx b/packages/design-system/icons/src/components/server-stack.tsx new file mode 100644 index 0000000000000..58e98087f1966 --- /dev/null +++ b/packages/design-system/icons/src/components/server-stack.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ServerStack = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ServerStack.displayName = "ServerStack" +export default ServerStack diff --git a/packages/design-system/icons/src/components/server.tsx b/packages/design-system/icons/src/components/server.tsx new file mode 100644 index 0000000000000..f0af9b0abe3c8 --- /dev/null +++ b/packages/design-system/icons/src/components/server.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Server = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Server.displayName = "Server" +export default Server diff --git a/packages/design-system/icons/src/components/shopping-bag.tsx b/packages/design-system/icons/src/components/shopping-bag.tsx new file mode 100644 index 0000000000000..dedc9a01ba8e4 --- /dev/null +++ b/packages/design-system/icons/src/components/shopping-bag.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ShoppingBag = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ShoppingBag.displayName = "ShoppingBag" +export default ShoppingBag diff --git a/packages/design-system/icons/src/components/shopping-cart-solid.tsx b/packages/design-system/icons/src/components/shopping-cart-solid.tsx new file mode 100644 index 0000000000000..a91df36d33070 --- /dev/null +++ b/packages/design-system/icons/src/components/shopping-cart-solid.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ShoppingCartSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ShoppingCartSolid.displayName = "ShoppingCartSolid" +export default ShoppingCartSolid diff --git a/packages/design-system/icons/src/components/shopping-cart.tsx b/packages/design-system/icons/src/components/shopping-cart.tsx new file mode 100644 index 0000000000000..72418d5fb2db0 --- /dev/null +++ b/packages/design-system/icons/src/components/shopping-cart.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ShoppingCart = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ShoppingCart.displayName = "ShoppingCart" +export default ShoppingCart diff --git a/packages/design-system/icons/src/components/sidebar.tsx b/packages/design-system/icons/src/components/sidebar.tsx new file mode 100644 index 0000000000000..e5c2b2cbee134 --- /dev/null +++ b/packages/design-system/icons/src/components/sidebar.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Sidebar = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Sidebar.displayName = "Sidebar" +export default Sidebar diff --git a/packages/design-system/icons/src/components/slack.tsx b/packages/design-system/icons/src/components/slack.tsx new file mode 100644 index 0000000000000..37d8f6f0bc123 --- /dev/null +++ b/packages/design-system/icons/src/components/slack.tsx @@ -0,0 +1,35 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Slack = React.forwardRef>( + (props, ref) => { + return ( + + + + + + + ) + } +) +Slack.displayName = "Slack" +export default Slack diff --git a/packages/design-system/icons/src/components/snooze.tsx b/packages/design-system/icons/src/components/snooze.tsx new file mode 100644 index 0000000000000..3fc9ae39a3cc1 --- /dev/null +++ b/packages/design-system/icons/src/components/snooze.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Snooze = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Snooze.displayName = "Snooze" +export default Snooze diff --git a/packages/design-system/icons/src/components/sparkles-mini-solid.tsx b/packages/design-system/icons/src/components/sparkles-mini-solid.tsx new file mode 100644 index 0000000000000..33d379aa79127 --- /dev/null +++ b/packages/design-system/icons/src/components/sparkles-mini-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SparklesMiniSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +SparklesMiniSolid.displayName = "SparklesMiniSolid" +export default SparklesMiniSolid diff --git a/packages/design-system/icons/src/components/sparkles-mini.tsx b/packages/design-system/icons/src/components/sparkles-mini.tsx new file mode 100644 index 0000000000000..243ec81e5b49e --- /dev/null +++ b/packages/design-system/icons/src/components/sparkles-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SparklesMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +SparklesMini.displayName = "SparklesMini" +export default SparklesMini diff --git a/packages/design-system/icons/src/components/sparkles-solid.tsx b/packages/design-system/icons/src/components/sparkles-solid.tsx new file mode 100644 index 0000000000000..a148a658fc889 --- /dev/null +++ b/packages/design-system/icons/src/components/sparkles-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SparklesSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +SparklesSolid.displayName = "SparklesSolid" +export default SparklesSolid diff --git a/packages/design-system/icons/src/components/sparkles.tsx b/packages/design-system/icons/src/components/sparkles.tsx new file mode 100644 index 0000000000000..7a2bd2bd6ce92 --- /dev/null +++ b/packages/design-system/icons/src/components/sparkles.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Sparkles = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Sparkles.displayName = "Sparkles" +export default Sparkles diff --git a/packages/design-system/icons/src/components/spinner.tsx b/packages/design-system/icons/src/components/spinner.tsx new file mode 100644 index 0000000000000..96f6c12e1c7a4 --- /dev/null +++ b/packages/design-system/icons/src/components/spinner.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Spinner = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Spinner.displayName = "Spinner" +export default Spinner diff --git a/packages/design-system/icons/src/components/square-two-stack-mini.tsx b/packages/design-system/icons/src/components/square-two-stack-mini.tsx new file mode 100644 index 0000000000000..c3553a36fabf5 --- /dev/null +++ b/packages/design-system/icons/src/components/square-two-stack-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SquareTwoStackMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +SquareTwoStackMini.displayName = "SquareTwoStackMini" +export default SquareTwoStackMini diff --git a/packages/design-system/icons/src/components/square-two-stack-solid.tsx b/packages/design-system/icons/src/components/square-two-stack-solid.tsx new file mode 100644 index 0000000000000..282e17633c118 --- /dev/null +++ b/packages/design-system/icons/src/components/square-two-stack-solid.tsx @@ -0,0 +1,27 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SquareTwoStackSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +SquareTwoStackSolid.displayName = "SquareTwoStackSolid" +export default SquareTwoStackSolid diff --git a/packages/design-system/icons/src/components/square-two-stack.tsx b/packages/design-system/icons/src/components/square-two-stack.tsx new file mode 100644 index 0000000000000..aadaa4d256d64 --- /dev/null +++ b/packages/design-system/icons/src/components/square-two-stack.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SquareTwoStack = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +SquareTwoStack.displayName = "SquareTwoStack" +export default SquareTwoStack diff --git a/packages/design-system/icons/src/components/squares-plus-solid.tsx b/packages/design-system/icons/src/components/squares-plus-solid.tsx new file mode 100644 index 0000000000000..55e5d1b67ba74 --- /dev/null +++ b/packages/design-system/icons/src/components/squares-plus-solid.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SquaresPlusSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +SquaresPlusSolid.displayName = "SquaresPlusSolid" +export default SquaresPlusSolid diff --git a/packages/design-system/icons/src/components/squares-plus.tsx b/packages/design-system/icons/src/components/squares-plus.tsx new file mode 100644 index 0000000000000..db08ec6115306 --- /dev/null +++ b/packages/design-system/icons/src/components/squares-plus.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SquaresPlus = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +SquaresPlus.displayName = "SquaresPlus" +export default SquaresPlus diff --git a/packages/design-system/icons/src/components/star-solid.tsx b/packages/design-system/icons/src/components/star-solid.tsx new file mode 100644 index 0000000000000..b2b4c4479c102 --- /dev/null +++ b/packages/design-system/icons/src/components/star-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const StarSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +StarSolid.displayName = "StarSolid" +export default StarSolid diff --git a/packages/design-system/icons/src/components/star.tsx b/packages/design-system/icons/src/components/star.tsx new file mode 100644 index 0000000000000..84ca81fb8bbfc --- /dev/null +++ b/packages/design-system/icons/src/components/star.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Star = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Star.displayName = "Star" +export default Star diff --git a/packages/design-system/icons/src/components/stripe.tsx b/packages/design-system/icons/src/components/stripe.tsx new file mode 100644 index 0000000000000..5002dd46c1c91 --- /dev/null +++ b/packages/design-system/icons/src/components/stripe.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Stripe = React.forwardRef>( + (props, ref) => { + return ( + + + + ) + } +) +Stripe.displayName = "Stripe" +export default Stripe diff --git a/packages/design-system/icons/src/components/sun-solid.tsx b/packages/design-system/icons/src/components/sun-solid.tsx new file mode 100644 index 0000000000000..e5605524373ce --- /dev/null +++ b/packages/design-system/icons/src/components/sun-solid.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SunSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +SunSolid.displayName = "SunSolid" +export default SunSolid diff --git a/packages/design-system/icons/src/components/sun.tsx b/packages/design-system/icons/src/components/sun.tsx new file mode 100644 index 0000000000000..b83fcb99b38eb --- /dev/null +++ b/packages/design-system/icons/src/components/sun.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Sun = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Sun.displayName = "Sun" +export default Sun diff --git a/packages/design-system/icons/src/components/swatch-solid.tsx b/packages/design-system/icons/src/components/swatch-solid.tsx new file mode 100644 index 0000000000000..3b3370f3b08f5 --- /dev/null +++ b/packages/design-system/icons/src/components/swatch-solid.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const SwatchSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +SwatchSolid.displayName = "SwatchSolid" +export default SwatchSolid diff --git a/packages/design-system/icons/src/components/swatch.tsx b/packages/design-system/icons/src/components/swatch.tsx new file mode 100644 index 0000000000000..be44d758af294 --- /dev/null +++ b/packages/design-system/icons/src/components/swatch.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Swatch = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Swatch.displayName = "Swatch" +export default Swatch diff --git a/packages/design-system/icons/src/components/tag-solid.tsx b/packages/design-system/icons/src/components/tag-solid.tsx new file mode 100644 index 0000000000000..9406d3b6c0631 --- /dev/null +++ b/packages/design-system/icons/src/components/tag-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const TagSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +TagSolid.displayName = "TagSolid" +export default TagSolid diff --git a/packages/design-system/icons/src/components/tag.tsx b/packages/design-system/icons/src/components/tag.tsx new file mode 100644 index 0000000000000..b16e085b93cb8 --- /dev/null +++ b/packages/design-system/icons/src/components/tag.tsx @@ -0,0 +1,33 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Tag = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + ) + } +) +Tag.displayName = "Tag" +export default Tag diff --git a/packages/design-system/icons/src/components/tailwind.tsx b/packages/design-system/icons/src/components/tailwind.tsx new file mode 100644 index 0000000000000..17a2e49fb5bb8 --- /dev/null +++ b/packages/design-system/icons/src/components/tailwind.tsx @@ -0,0 +1,40 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Tailwind = React.forwardRef>( + (props, ref) => { + return ( + + + + + + + + + ) + } +) +Tailwind.displayName = "Tailwind" +export default Tailwind diff --git a/packages/design-system/icons/src/components/text.tsx b/packages/design-system/icons/src/components/text.tsx new file mode 100644 index 0000000000000..623b67bade639 --- /dev/null +++ b/packages/design-system/icons/src/components/text.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Text = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Text.displayName = "Text" +export default Text diff --git a/packages/design-system/icons/src/components/thumb-down.tsx b/packages/design-system/icons/src/components/thumb-down.tsx new file mode 100644 index 0000000000000..fbc819e2b2602 --- /dev/null +++ b/packages/design-system/icons/src/components/thumb-down.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ThumbDown = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ThumbDown.displayName = "ThumbDown" +export default ThumbDown diff --git a/packages/design-system/icons/src/components/thumb-up.tsx b/packages/design-system/icons/src/components/thumb-up.tsx new file mode 100644 index 0000000000000..5915e0f4ce9c8 --- /dev/null +++ b/packages/design-system/icons/src/components/thumb-up.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ThumbUp = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +ThumbUp.displayName = "ThumbUp" +export default ThumbUp diff --git a/packages/design-system/icons/src/components/tools-solid.tsx b/packages/design-system/icons/src/components/tools-solid.tsx new file mode 100644 index 0000000000000..b85929e390088 --- /dev/null +++ b/packages/design-system/icons/src/components/tools-solid.tsx @@ -0,0 +1,35 @@ +import * as React from "react" +import type { IconProps } from "../types" +const ToolsSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + + + ) + } +) +ToolsSolid.displayName = "ToolsSolid" +export default ToolsSolid diff --git a/packages/design-system/icons/src/components/tools.tsx b/packages/design-system/icons/src/components/tools.tsx new file mode 100644 index 0000000000000..543b6719a018c --- /dev/null +++ b/packages/design-system/icons/src/components/tools.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Tools = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Tools.displayName = "Tools" +export default Tools diff --git a/packages/design-system/icons/src/components/trash.tsx b/packages/design-system/icons/src/components/trash.tsx new file mode 100644 index 0000000000000..00c2bfdb244c8 --- /dev/null +++ b/packages/design-system/icons/src/components/trash.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Trash = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Trash.displayName = "Trash" +export default Trash diff --git a/packages/design-system/icons/src/components/triangle-down-mini.tsx b/packages/design-system/icons/src/components/triangle-down-mini.tsx new file mode 100644 index 0000000000000..bb52238c660b7 --- /dev/null +++ b/packages/design-system/icons/src/components/triangle-down-mini.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const TriangleDownMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +TriangleDownMini.displayName = "TriangleDownMini" +export default TriangleDownMini diff --git a/packages/design-system/icons/src/components/triangle-right-mini.tsx b/packages/design-system/icons/src/components/triangle-right-mini.tsx new file mode 100644 index 0000000000000..b8d44554455e5 --- /dev/null +++ b/packages/design-system/icons/src/components/triangle-right-mini.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const TriangleRightMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +TriangleRightMini.displayName = "TriangleRightMini" +export default TriangleRightMini diff --git a/packages/design-system/icons/src/components/twitter.tsx b/packages/design-system/icons/src/components/twitter.tsx new file mode 100644 index 0000000000000..97f0922444003 --- /dev/null +++ b/packages/design-system/icons/src/components/twitter.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Twitter = React.forwardRef>( + (props, ref) => { + return ( + + + + ) + } +) +Twitter.displayName = "Twitter" +export default Twitter diff --git a/packages/design-system/icons/src/components/typescript-ex.tsx b/packages/design-system/icons/src/components/typescript-ex.tsx new file mode 100644 index 0000000000000..6e46386e34748 --- /dev/null +++ b/packages/design-system/icons/src/components/typescript-ex.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const TypescriptEx = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +TypescriptEx.displayName = "TypescriptEx" +export default TypescriptEx diff --git a/packages/design-system/icons/src/components/typescript.tsx b/packages/design-system/icons/src/components/typescript.tsx new file mode 100644 index 0000000000000..f5d38c1643ced --- /dev/null +++ b/packages/design-system/icons/src/components/typescript.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Typescript = React.forwardRef>( + (props, ref) => { + return ( + + + + + ) + } +) +Typescript.displayName = "Typescript" +export default Typescript diff --git a/packages/design-system/icons/src/components/user-circle-mini.tsx b/packages/design-system/icons/src/components/user-circle-mini.tsx new file mode 100644 index 0000000000000..fcf6d098111a1 --- /dev/null +++ b/packages/design-system/icons/src/components/user-circle-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const UserCircleMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +UserCircleMini.displayName = "UserCircleMini" +export default UserCircleMini diff --git a/packages/design-system/icons/src/components/user-group.tsx b/packages/design-system/icons/src/components/user-group.tsx new file mode 100644 index 0000000000000..197aca4efa8b2 --- /dev/null +++ b/packages/design-system/icons/src/components/user-group.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const UserGroup = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +UserGroup.displayName = "UserGroup" +export default UserGroup diff --git a/packages/design-system/icons/src/components/user.tsx b/packages/design-system/icons/src/components/user.tsx new file mode 100644 index 0000000000000..c13f14114d08d --- /dev/null +++ b/packages/design-system/icons/src/components/user.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const User = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +User.displayName = "User" +export default User diff --git a/packages/design-system/icons/src/components/users-solid.tsx b/packages/design-system/icons/src/components/users-solid.tsx new file mode 100644 index 0000000000000..e30366c89b837 --- /dev/null +++ b/packages/design-system/icons/src/components/users-solid.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const UsersSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +UsersSolid.displayName = "UsersSolid" +export default UsersSolid diff --git a/packages/design-system/icons/src/components/users.tsx b/packages/design-system/icons/src/components/users.tsx new file mode 100644 index 0000000000000..2d75f6ce02d45 --- /dev/null +++ b/packages/design-system/icons/src/components/users.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Users = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Users.displayName = "Users" +export default Users diff --git a/packages/design-system/icons/src/components/vercel.tsx b/packages/design-system/icons/src/components/vercel.tsx new file mode 100644 index 0000000000000..62f45e3bee72a --- /dev/null +++ b/packages/design-system/icons/src/components/vercel.tsx @@ -0,0 +1,23 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Vercel = React.forwardRef>( + (props, ref) => { + return ( + + + + ) + } +) +Vercel.displayName = "Vercel" +export default Vercel diff --git a/packages/design-system/icons/src/components/window.tsx b/packages/design-system/icons/src/components/window.tsx new file mode 100644 index 0000000000000..4d657b1ca346e --- /dev/null +++ b/packages/design-system/icons/src/components/window.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const Window = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +Window.displayName = "Window" +export default Window diff --git a/packages/design-system/icons/src/components/x-circle-solid.tsx b/packages/design-system/icons/src/components/x-circle-solid.tsx new file mode 100644 index 0000000000000..76369997fb4f9 --- /dev/null +++ b/packages/design-system/icons/src/components/x-circle-solid.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const XCircleSolid = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +XCircleSolid.displayName = "XCircleSolid" +export default XCircleSolid diff --git a/packages/design-system/icons/src/components/x-mark-mini.tsx b/packages/design-system/icons/src/components/x-mark-mini.tsx new file mode 100644 index 0000000000000..c697099762126 --- /dev/null +++ b/packages/design-system/icons/src/components/x-mark-mini.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const XMarkMini = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +XMarkMini.displayName = "XMarkMini" +export default XMarkMini diff --git a/packages/design-system/icons/src/components/x-mark.tsx b/packages/design-system/icons/src/components/x-mark.tsx new file mode 100644 index 0000000000000..6984696bea8d5 --- /dev/null +++ b/packages/design-system/icons/src/components/x-mark.tsx @@ -0,0 +1,26 @@ +import * as React from "react" +import type { IconProps } from "../types" +const XMark = React.forwardRef( + ({ color = "currentColor", ...props }, ref) => { + return ( + + + + ) + } +) +XMark.displayName = "XMark" +export default XMark diff --git a/packages/design-system/icons/src/components/x.tsx b/packages/design-system/icons/src/components/x.tsx new file mode 100644 index 0000000000000..1822c9036a84a --- /dev/null +++ b/packages/design-system/icons/src/components/x.tsx @@ -0,0 +1,25 @@ +import * as React from "react" +import type { IconProps } from "../types" +const X = React.forwardRef>( + (props, ref) => { + return ( + + + + ) + } +) +X.displayName = "X" +export default X diff --git a/packages/design-system/icons/src/index.ts b/packages/design-system/icons/src/index.ts new file mode 100644 index 0000000000000..373877d56eb1f --- /dev/null +++ b/packages/design-system/icons/src/index.ts @@ -0,0 +1 @@ +export * from "./components" diff --git a/packages/design-system/icons/src/types.ts b/packages/design-system/icons/src/types.ts new file mode 100644 index 0000000000000..ec4f938fbee2f --- /dev/null +++ b/packages/design-system/icons/src/types.ts @@ -0,0 +1,6 @@ +import * as React from "react" + +export interface IconProps extends React.SVGAttributes { + children?: never + color?: string +} diff --git a/packages/design-system/icons/tsconfig.json b/packages/design-system/icons/tsconfig.json new file mode 100644 index 0000000000000..d21d1fbeb739f --- /dev/null +++ b/packages/design-system/icons/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "forceConsistentCasingInFileNames": true, + "composite": false, + "declaration": true, + "declarationMap": true, + "inlineSources": false, + "isolatedModules": true, + "moduleResolution": "node", + "noUnusedLocals": false, + "noUnusedParameters": false, + "preserveWatchOutput": true, + "skipLibCheck": true, + "strict": true, + "checkJs": false, + "jsx": "react", + "lib": ["ES2015", "DOM"], + "module": "ESNext", + "target": "es6", + "resolveJsonModule": true, + "outDir": "dist", + "esModuleInterop": true, + "baseUrl": "src", + "declarationDir": "dist", + "paths": { + "@medusajs/icon": ["src/index.ts"] + } + }, + "include": ["src"], + "exclude": ["dist", "build", "node_modules", "./src/**/*.spec.tsx"] +} diff --git a/packages/design-system/icons/vite.config.ts b/packages/design-system/icons/vite.config.ts new file mode 100644 index 0000000000000..19baabc07444b --- /dev/null +++ b/packages/design-system/icons/vite.config.ts @@ -0,0 +1,21 @@ +/// +/// + +import react from "@vitejs/plugin-react" +import { defineConfig } from "vite" + +export default defineConfig({ + plugins: [react()], + test: { + setupFiles: "./setup-test.ts", + coverage: { + all: true, + reporter: ["lcov", "text"], + include: ["src/**"], + exclude: ["**/*.stories.tsx", "**/index.ts"], // exclude stories and index files + }, + globals: true, + environment: "jsdom", + css: false, + }, +}) diff --git a/packages/design-system/toolbox/README.md b/packages/design-system/toolbox/README.md new file mode 100644 index 0000000000000..15df9a7a2bffe --- /dev/null +++ b/packages/design-system/toolbox/README.md @@ -0,0 +1,3 @@ +# @medusajs/toolbox + +This package is a collection of CLI commands to generate Medusa UI design tokens and components. It is not intended for use outside of the Medusa monorepo. diff --git a/packages/design-system/toolbox/bin/toolbox.js b/packages/design-system/toolbox/bin/toolbox.js new file mode 100755 index 0000000000000..53d5a5033d870 --- /dev/null +++ b/packages/design-system/toolbox/bin/toolbox.js @@ -0,0 +1,2 @@ +#!/usr/bin/env node +require("../dist/index.js") diff --git a/packages/design-system/toolbox/package.json b/packages/design-system/toolbox/package.json new file mode 100644 index 0000000000000..126e2f7898f14 --- /dev/null +++ b/packages/design-system/toolbox/package.json @@ -0,0 +1,33 @@ +{ + "name": "@medusajs/toolbox", + "private": true, + "version": "0.0.1", + "description": "CLI tool for importing Figma designs for Medusa UI", + "license": "MIT", + "author": "Kasper Kristensen ", + "bin": "./bin/toolbox.js", + "scripts": { + "build": "tsup" + }, + "dependencies": { + "@svgr/core": "8.0.0", + "@svgr/plugin-jsx": "8.0.1", + "@svgr/plugin-prettier": "8.0.1", + "@svgr/plugin-svgo": "8.0.1", + "axios": "^0.24.0", + "commander": "11.0.0", + "dotenv": "16.3.1", + "fs-extra": "11.1.1", + "picocolors": "^1.0.0", + "retry-axios": "^2.6.0", + "ts-dedent": "2.2.0" + }, + "devDependencies": { + "@types/fs-extra": "11.0.1", + "@types/react": "^18.2.14", + "eslint": "7.32.0", + "react": "^18.2.0", + "tsup": "7.1.0", + "typescript": "5.1.6" + } +} diff --git a/packages/design-system/toolbox/src/commands/icons/command.ts b/packages/design-system/toolbox/src/commands/icons/command.ts new file mode 100644 index 0000000000000..5ed2669bfa214 --- /dev/null +++ b/packages/design-system/toolbox/src/commands/icons/command.ts @@ -0,0 +1,173 @@ +import { client } from "@/figma-client" +import fse from "fs-extra" +import { extname, join, resolve } from "path" +import dedent from "ts-dedent" + +import { generateIndex, getIconData } from "@/commands/icons/utils" +import { transformSvg } from "@/transformers" + +import { FIGMA_FILE_ID, FIGMA_ICONS_NODE_ID } from "@/constants" +import { logger } from "@/logger" + +type GenerateIconsArgs = { + output: string +} + +// We don't want to generate icons for these frames as they are not optimized +const BANNED_FRAMES = ["Flags"] + +export async function generateIcons({ output }: GenerateIconsArgs) { + const skippedIcons: string[] = [] + + // Ensure the destination directory exists + await fse.mkdirp(output) + + logger.info("Fetching components from Figma") + + const fileComponents = await client + .getFileComponents(FIGMA_FILE_ID) + .then((file) => { + logger.success("Successfully fetched components from Figma") + return file + }) + .catch((_error) => { + logger.error("Failed to fetch components from Figma") + return null + }) + + if (!fileComponents) { + return + } + + logger.info("Fetching URLs for SVGs") + + const iconNodes = fileComponents.meta?.components.reduce((acc, component) => { + const frameInfo = component.containing_frame + + if (!frameInfo) { + return acc + } + + if (BANNED_FRAMES.includes(frameInfo.name)) { + return acc + } + + if (frameInfo.pageId !== FIGMA_ICONS_NODE_ID) { + return acc + } + + acc.push({ + node_id: component.node_id, + name: component.name, + frame_name: frameInfo.name, + }) + + return acc + }, [] as { node_id: string; name: string; frame_name: string }[]) + + if (!iconNodes) { + logger.error( + "Found no SVGs to export. Make sure that the Figma file is correct." + ) + return + } + + const URLData = await client.getImage(FIGMA_FILE_ID, { + ids: iconNodes.map((icon) => icon.node_id), + format: "svg", + scale: 1, + }) + + logger.success("Successfully fetched URLs for SVGs") + + const length = iconNodes.length + + logger.info("Transforming SVGs") + for (let i = 0; i < length; i += 20) { + const slice = iconNodes.slice(i, i + 20) + + const requests = slice.map(async (icon) => { + const URL = URLData.images[icon.node_id] + + if (!URL) { + logger.warn(`Failed to fetch icon ${icon.name}. Skipping...`) + skippedIcons.push(icon.name) + return + } + + let code: string | null = null + + try { + code = await client.getResource(URL) + } catch (e) { + logger.warn(`Failed to fetch icon ${icon.name}. Skipping...`) + skippedIcons.push(icon.name) + } + + if (!code) { + return + } + + const { componentName, fileName, testName, fixed } = getIconData( + icon.name, + icon.frame_name + ) + + const component = await transformSvg({ + code, + componentName, + fixed, + }) + + const filePath = resolve(output, fileName) + + await fse.outputFile(filePath, component) + + // Get fileName without extension + const ext = extname(fileName) + const fileNameWithoutExt = fileName.replace(ext, "") + + // Generate a test file for the icon + const testFilePath = resolve(join(output, "__tests__"), testName) + + const testFile = dedent` + import * as React from "react" + import { cleanup, render, screen } from "@testing-library/react" + + import ${componentName} from "../${fileNameWithoutExt}" + + describe("${componentName}", () => { + it("should render the icon without errors", async () => { + render(<${componentName} data-testid="icon" />) + + + const svgElement = screen.getByTestId("icon") + + expect(svgElement).toBeInTheDocument() + + cleanup() + }) + }) + ` + + await fse.outputFile(testFilePath, testFile) + }) + + await Promise.all(requests) + } + logger.success("Successfully transformed SVGs") + + if (skippedIcons.length) { + logger.warn( + `Skipped ${skippedIcons.length} icons. Check the logs for more information.` + ) + } + + logger.info("Generating index file") + + await generateIndex(output) + + logger.success("Successfully generated index file") + + logger.success(`Successfully generated ${length} icons ✨`) +} diff --git a/packages/design-system/toolbox/src/commands/icons/utils/generate-index.ts b/packages/design-system/toolbox/src/commands/icons/utils/generate-index.ts new file mode 100644 index 0000000000000..18a46f9bf7710 --- /dev/null +++ b/packages/design-system/toolbox/src/commands/icons/utils/generate-index.ts @@ -0,0 +1,30 @@ +import fse from "fs-extra" +import os from "os" +import { resolve } from "path" +import dedent from "ts-dedent" + +import { getComponentName } from "@/commands/icons/utils" + +const BANNER = + dedent` + // This file is generated automatically. +` + os.EOL + +export async function generateIndex(path: string) { + let index = BANNER + + const entries = await fse.readdir(path) + + for (const entry of entries) { + if (entry === "index.ts" || entry === "__tests__") { + continue + } + + const name = entry.replace(/\.tsx?$/, "") + const exportName = getComponentName(name) + + index += `export { default as ${exportName} } from "./${name}"${os.EOL}` + } + + await fse.writeFile(resolve(path, "index.ts"), index) +} diff --git a/packages/design-system/toolbox/src/commands/icons/utils/get-icon-data.ts b/packages/design-system/toolbox/src/commands/icons/utils/get-icon-data.ts new file mode 100644 index 0000000000000..8e3431505468d --- /dev/null +++ b/packages/design-system/toolbox/src/commands/icons/utils/get-icon-data.ts @@ -0,0 +1,47 @@ +export function getComponentName(name: string) { + return name + .replace(/[-_]+/g, " ") + .replace(/[^\w\s]/g, "") + .replace( + /\s+(.)(\w*)/g, + (_$1, $2, $3) => `${$2.toUpperCase() + $3.toLowerCase()}` + ) + .replace(/\w/, (s) => s.toUpperCase()) +} + +function getFileName(name: string) { + return `${name.replace("$", "").replace("/", "-")}.tsx` +} + +function getTestName(name: string) { + return `${name.replace("$", "").replace("/", "-")}.spec.tsx` +} + +const FIXED_FRAMES = ["Flags", "Brands"] + +function isFixedIcon(name: string, frame_name: string) { + if (FIXED_FRAMES.includes(frame_name)) { + if (frame_name === "Brands" && name.includes("-ex")) { + return false + } + + return true + } + + return false +} + +export function getIconData(name: string, frame_name: string) { + const componentName = getComponentName(name) + const fileName = getFileName(name) + const testName = getTestName(name) + + const fixed = isFixedIcon(name, frame_name) + + return { + componentName, + testName, + fileName, + fixed, + } +} diff --git a/packages/design-system/toolbox/src/commands/icons/utils/index.ts b/packages/design-system/toolbox/src/commands/icons/utils/index.ts new file mode 100644 index 0000000000000..6781c2fd21612 --- /dev/null +++ b/packages/design-system/toolbox/src/commands/icons/utils/index.ts @@ -0,0 +1,2 @@ +export * from "./generate-index" +export * from "./get-icon-data" diff --git a/packages/design-system/toolbox/src/commands/tokens/command.ts b/packages/design-system/toolbox/src/commands/tokens/command.ts new file mode 100644 index 0000000000000..5af808aa6fbeb --- /dev/null +++ b/packages/design-system/toolbox/src/commands/tokens/command.ts @@ -0,0 +1,458 @@ +import fse from "fs-extra" +import path from "path" +import type { CSSProperties } from "react" +import { Node, PaintGradient, PaintType } from "../../figma" + +import { + FIGMA_FILE_ID, + FONT_FAMILY_MONO, + FONT_FAMILY_SANS, +} from "../../constants" +import { client } from "../../figma-client" +import { logger } from "../../logger" +import { + colorToRGBA, + createLinearGradientComponent, + gradientValues, +} from "./utils/colors" +import { createDropShadowVariable } from "./utils/effects" + +type GenerateTokensArgs = { + output: string +} + +type Tokens = { + colors: { + dark: Record + light: Record + } + effects: { + dark: Record + light: Record + } + components: { + dark: Record + light: Record + } +} + +export async function generateTokens({ output }: GenerateTokensArgs) { + logger.info("Fetching file styles") + + const res = await client.getFileStyles(FIGMA_FILE_ID).catch((err) => { + logger.error(`Failed to fetch file styles: ${err.message}`) + process.exit(1) + }) + + logger.success("Fetched file styles successfully") + + const colorNodeIds: string[] = [] + + const textNodeIds: string[] = [] + + const effectNodeIds: string[] = [] + + res.meta?.styles.forEach((style) => { + if (style.style_type === "FILL") { + colorNodeIds.push(style.node_id) + } + + if (style.style_type === "TEXT") { + textNodeIds.push(style.node_id) + } + + if (style.style_type === "EFFECT") { + effectNodeIds.push(style.node_id) + } + }) + + logger.info("Fetching file nodes") + const [colorStyles, textStyles, effectStyles] = await Promise.all([ + client.getFileNodes<"RECTANGLE">(FIGMA_FILE_ID, { + ids: colorNodeIds, + }), + client.getFileNodes(FIGMA_FILE_ID, { + ids: textNodeIds, + }), + client.getFileNodes<"RECTANGLE">(FIGMA_FILE_ID, { + ids: effectNodeIds, + }), + ]) + .catch((err) => { + logger.error(`Failed to fetch file nodes: ${err.message}`) + process.exit(1) + }) + .finally(() => { + logger.success("Fetched file nodes successfully") + }) + + const themeNode: Tokens = { + colors: { + dark: {}, + light: {}, + }, + effects: { + dark: {}, + light: {}, + }, + components: { + dark: {}, + light: {}, + }, + } + + const typo = Object.values(textStyles.nodes).reduce((acc, curr) => { + if (!curr) { + return acc + } + + const node = curr.document as unknown as Node<"TEXT"> + + const isText = node.name.startsWith("Text") + + if (isText) { + const [_parent, identifier] = node.name.split("/") + const { lineHeightPx, fontWeight, fontSize } = node.style + + const name = "." + identifier.toLowerCase().replace("text", "txt") + + const style: CSSProperties = { + fontSize: `${fontSize / 16}rem`, + lineHeight: `${lineHeightPx / 16}rem`, + fontWeight: `${fontWeight}`, + fontFamily: FONT_FAMILY_SANS.join(", "), + } + + acc[name] = style + + return acc + } + + const isHeader = node.name.startsWith("Headers") + + if (isHeader) { + const [theme, identifier] = node.name.split("/") + + const formattedTheme = theme.toLowerCase().replace("headers ", "") + const formattedIdentifier = identifier.toLowerCase() + + const name = "." + `${formattedIdentifier}-${formattedTheme}` + + const { lineHeightPx, fontSize, fontWeight } = node.style + + const style: CSSProperties = { + fontSize: `${fontSize / 16}rem`, + lineHeight: `${lineHeightPx / 16}rem`, + fontWeight: `${fontWeight}`, + fontFamily: FONT_FAMILY_SANS.join(", "), + } + + acc[name] = style + + return acc + } + + const isCodeBlock = node.name.startsWith("Code Block") + + if (isCodeBlock) { + const [_parent, identifier] = node.name.split("/") + + const formattedIdentifier = "." + "code-" + identifier.toLowerCase() + + const { lineHeightPx, fontSize, fontWeight } = node.style + + const style: CSSProperties = { + fontSize: `${fontSize / 16}rem`, + lineHeight: `${lineHeightPx / 16}rem`, + fontWeight: `${fontWeight}`, + fontFamily: FONT_FAMILY_MONO.join(", "), + } + + acc[formattedIdentifier] = style + + return acc + } + + return acc + }, {} as Record) + + const typoPath = path.join(output, "tokens", "typography.ts") + + logger.info(`Writing typography tokens to file`) + await fse + .outputFile( + typoPath, + `export const typography = ${JSON.stringify(typo, null, 2)}` + ) + .then(() => { + logger.success(`Typography tokens written to file successfully`) + }) + .catch((err) => { + logger.error(`Failed to write typography tokens to file: ${err.message}`) + process.exit(1) + }) + + Object.values(colorStyles.nodes).reduce((acc, curr) => { + if (!curr) { + return acc + } + + const [theme, _, variable] = curr.document.name.split("/") + + const lowerCaseTheme = theme.toLowerCase() + + if (lowerCaseTheme !== "light" && lowerCaseTheme !== "dark") { + return acc + } + + const fills = curr.document.fills + + const solid = fills.find((fill) => fill.type === "SOLID") + const gradient = fills.find((fill) => fill.type === "GRADIENT_LINEAR") + + if (!solid && !gradient) { + return acc + } + + const solidVariable = `--${variable}` + const gradientIdentifier = `${variable}-gradient` + + if (solid && solid.color) { + acc["colors"][lowerCaseTheme][solidVariable] = colorToRGBA( + solid.color, + solid.opacity + ) + } + + if (gradient) { + const values = gradientValues(gradient as PaintGradient) + + if (values) { + if (values.type === PaintType.GRADIENT_LINEAR) { + const toVariable = `--${gradientIdentifier}-to` + const fromVariable = `--${gradientIdentifier}-from` + + const component = createLinearGradientComponent({ + ...values, + to: toVariable, + from: fromVariable, + }) + + if (component) { + acc["colors"][lowerCaseTheme][fromVariable] = values.from + acc["colors"][lowerCaseTheme][toVariable] = values.to + + acc["components"][lowerCaseTheme][`.${gradientIdentifier}`] = + component + } + } else { + logger.warn(`Unsupported gradient type: ${values.type}`) + } + } + } + + return acc + }, themeNode) + + Object.values(effectStyles.nodes).reduce((acc, curr) => { + if (!curr) { + return acc + } + + const [theme, type, variable] = curr.document.name.split("/") + + if (!type || !variable) { + return acc + } + + const lowerCaseTheme = theme.toLowerCase() + const lowerCaseType = type.toLowerCase() + + if (lowerCaseTheme !== "light" && lowerCaseTheme !== "dark") { + return acc + } + + const effects = curr.document.effects + + if (!effects) { + return acc + } + + const identifier = `--${lowerCaseType}-${variable}` + + /** + * Figma returns effects in reverse order + * so we need to reverse them back to get the correct order + */ + const reversedEffects = effects.reverse() + + const value = createDropShadowVariable(reversedEffects, identifier) + + if (!value) { + return acc + } + + acc["effects"][lowerCaseTheme][identifier] = value + + return acc + }, themeNode) + + logger.info("Writing tokens to files") + logger.info("Writing colors to file") + + const colorTokensPath = path.join(output, "tokens", "colors.ts") + + await fse + .outputFile( + colorTokensPath, + `export const colors = ${JSON.stringify(themeNode.colors, null, 2)}` + ) + .then(() => { + logger.success("Wrote colors to file successfully") + }) + .catch((err) => { + logger.error(`Failed to write colors to file: ${err.message}`) + process.exit(1) + }) + + logger.info("Writing effects to file") + + const effectTokensPath = path.join(output, "tokens", "effects.ts") + await fse + .outputFile( + effectTokensPath, + `export const effects = ${JSON.stringify(themeNode.effects, null, 2)}` + ) + .then(() => { + logger.success("Wrote effects to file successfully") + }) + .catch((err) => { + logger.error(`Failed to write effects to file: ${err.message}`) + process.exit(1) + }) + + logger.info("Writing components to file") + + const componentTokensPath = path.join(output, "tokens", "components.ts") + await fse + .outputFile( + componentTokensPath, + `export const components = ${JSON.stringify( + themeNode.components, + null, + 2 + )}` + ) + .then(() => { + logger.success("Wrote components to file successfully") + }) + .catch((err) => { + logger.error(`Failed to write components to file: ${err.message}`) + process.exit(1) + }) + + logger.success("Wrote tokens to files successfully") + + logger.info("Extending Tailwind config") + + const colorsExtension: Record = {} + + Object.keys(themeNode.colors.light).reduce((acc, curr) => { + const [prefix, style, state, context, ...others] = + curr.split(/(?<=\w)-(?=\w)/) + + if ( + state === "gradient" || + context === "gradient" || + (others.length > 0 && others.includes("gradient")) + ) { + // We don't want to add gradients to the tailwind config, as they are added as components + return acc + } + + const fixedPrefix = prefix.replace("--", "") + + if (!acc[fixedPrefix]) { + acc[fixedPrefix] = {} + } + + if (!acc[fixedPrefix][style]) { + acc[fixedPrefix][style] = {} + } + + if (!state) { + acc[fixedPrefix][style] = { + ...acc[fixedPrefix][style], + DEFAULT: `var(${curr})`, + } + + return acc + } + + if (!acc[fixedPrefix][style][state]) { + acc[fixedPrefix][style][state] = {} + } + + if (!context) { + acc[fixedPrefix][style][state] = { + ...acc[fixedPrefix][style][state], + DEFAULT: `var(${curr})`, + } + + return acc + } + + if (context === "gradient") { + // We don't want to add gradients to the tailwind config, as they are added as components + return acc + } + + if (!acc[fixedPrefix][style][state][context]) { + acc[fixedPrefix][style][state][context] = {} + } + + acc[fixedPrefix][style][state][context] = { + ...acc[fixedPrefix][style][state][context], + DEFAULT: `var(${curr})`, + } + + return acc + }, colorsExtension) + + const boxShadowExtension: Record = {} + + Object.keys(themeNode.effects.light).reduce((acc, curr) => { + const key = `${curr.replace("--", "")}` + + acc[key] = `var(${curr})` + + return acc + }, boxShadowExtension) + + const themeExtension = { + extend: { + colors: { + ui: colorsExtension, + }, + boxShadow: boxShadowExtension, + }, + } + + const tailwindConfigPath = path.join(output, "extension", "theme.ts") + await fse + .outputFile( + tailwindConfigPath, + `export const theme = ${JSON.stringify(themeExtension, null, 2)}` + ) + .then(() => { + logger.success("Wrote Tailwind config extension successfully") + }) + .catch((err) => { + logger.error(`Failed to write Tailwind config extension: ${err.message}`) + process.exit(1) + }) + + logger.success("Extended Tailwind config successfully") + + // TODO: Add text styles +} diff --git a/packages/design-system/toolbox/src/commands/tokens/utils/colors.ts b/packages/design-system/toolbox/src/commands/tokens/utils/colors.ts new file mode 100644 index 0000000000000..e0672eb7bb1b6 --- /dev/null +++ b/packages/design-system/toolbox/src/commands/tokens/utils/colors.ts @@ -0,0 +1,151 @@ +import { PaintType, type Color, type PaintGradient, type Vector } from "@/figma" +import { logger } from "@/logger" +import type { CSSProperties } from "react" + +/** + * Normalizes a color's opacity to a 0-1 range. + * @param opacity The opacity to normalize. + * @returns The normalized opacity. + */ +function normalizeOpacity(opacity?: number) { + opacity = opacity !== undefined ? opacity : 1 + + return Math.round(opacity * 100) / 100 +} + +/** + * Normalizes a channel value to a 0-255 range. + * @param value The channel value to normalize. + * @returns The normalized channel value. + */ +function normalizeChannelValue(value: number) { + return Math.round(value * 255) +} + +/** + * Converts a Color to an RGBA string. + * @param color The color to convert to RGBA. + * @param opacity The opacity to apply to the color. + * @returns The RGBA string. + */ +function colorToRGBA(color: Color, opacity?: number): string { + const red = normalizeChannelValue(color.r) + const green = normalizeChannelValue(color.g) + const blue = normalizeChannelValue(color.b) + + /** + * How Figma returns opacity for colors is a bit weird. + * They always return the alpha channel as 1, even if the color is less than solid. + * Instead, they return the opacity in a seperate opacity property. + * So we need to check if the opacity is defined, and if it is, + * use that for the alpha channel instead. + */ + const alpha = + opacity !== undefined + ? normalizeOpacity(opacity) + : Math.round(color.a * 100) / 100 + + return `rgba(${red}, ${green}, ${blue}, ${alpha})` +} + +/** + * Calculates the gradient degree of a gradient. + * @param handlebarPositions The handlebar positions of the gradient. + * @returns The gradient degree. + */ +function calculateGradientDegree(handlebarPositions: Vector[]): number { + const startPoint = handlebarPositions[0] + const endPoint = handlebarPositions[1] + + const angleRadians = Math.atan2( + endPoint.y - startPoint.y, + endPoint.x - startPoint.x + ) + + const angleDegrees = (angleRadians * 180) / Math.PI + + const normalizedAngleDegrees = (angleDegrees + 360) % 360 + + // Rotate the angle by 90 degrees to get the correct angle for CSS gradients + const rotatedAngleDegrees = normalizedAngleDegrees + 90 + + return rotatedAngleDegrees +} + +interface GradientValues { + type: PaintType +} + +interface LinearGradientValues extends GradientValues { + type: PaintType.GRADIENT_LINEAR + opacity: number + degree: number + from: string + to: string +} + +/** + * Get the values of a linear gradient. + * @param gradient + * @returns + */ +function linearGradientValues(gradient: PaintGradient): LinearGradientValues { + const opacity = normalizeOpacity(gradient.opacity) * 100 + const degree = calculateGradientDegree(gradient.gradientHandlePositions) + const from = colorToRGBA(gradient.gradientStops[0].color) + const to = colorToRGBA(gradient.gradientStops[1].color) + + return { + type: gradient.type as PaintType.GRADIENT_LINEAR, + opacity, + degree, + from, + to, + } +} + +interface CreateGradientComponentProps { + type: PaintType +} + +interface CreateLinearGradientComponentProps + extends CreateGradientComponentProps { + type: PaintType.GRADIENT_LINEAR + degree: number + from: string + to: string + opacity: number +} + +/** + * Create a CSSProperties object for a linear gradient. + * @param props + * @returns + */ +function createLinearGradientComponent({ + degree, + from, + to, + opacity, +}: CreateLinearGradientComponentProps): CSSProperties { + return { + backgroundImage: `linear-gradient(${degree}deg, var(${from}), var(${to}))`, + opacity: `${opacity}%`, + } +} + +/** + * Get the values of a gradient based on its type. + * @param gradient + * @returns + */ +function gradientValues(gradient: PaintGradient) { + if (gradient.type === PaintType.GRADIENT_LINEAR) { + return linearGradientValues(gradient) + } + + logger.warn(`The gradient type "${gradient.type}" is not supported.`) + return null +} + +export { colorToRGBA, createLinearGradientComponent, gradientValues } diff --git a/packages/design-system/toolbox/src/commands/tokens/utils/effects.ts b/packages/design-system/toolbox/src/commands/tokens/utils/effects.ts new file mode 100644 index 0000000000000..96aebf28b3108 --- /dev/null +++ b/packages/design-system/toolbox/src/commands/tokens/utils/effects.ts @@ -0,0 +1,58 @@ +import { Effect } from "@/figma" +import { colorToRGBA } from "./colors" + +/** + * We know that we will need to correct the Y value of the inset shadows + * on these effects due to the difference in the way Figma and CSS + * handle shadows. + */ +const SPECIAL_IDENTIFIERS = [ + "--buttons-colored", + "--buttons-neutral", + "--buttons-neutral-focus", + "--buttons-colored-focus", +] + +function createDropShadowVariable(effects: Effect[], identifier: string) { + const shadows = effects.filter( + (effect) => effect.type === "DROP_SHADOW" || effect.type === "INNER_SHADOW" + ) + + if (shadows.length === 0) { + return null + } + + const value = shadows + .map((shadow) => { + const { color, offset, radius, spread, type } = shadow + + const x = offset?.x ?? 0 + let y = offset?.y ?? 0 + + if ( + SPECIAL_IDENTIFIERS.includes(identifier) && + type === "INNER_SHADOW" && + y > 0 + ) { + y = y - 1 + } + + const b = radius + const s = spread ?? 0 + + const c = color ? colorToRGBA(color) : "" + + const t = type === "INNER_SHADOW" ? "inset" : "" + + return `${x}px ${y}px ${b}px ${s}px ${c} ${t}`.trim() + }) + .join(", ") + + if (value.length === 0) { + return null + } + + return value +} + +export { createDropShadowVariable } diff --git a/packages/design-system/toolbox/src/constants.ts b/packages/design-system/toolbox/src/constants.ts new file mode 100644 index 0000000000000..9265aa3de4137 --- /dev/null +++ b/packages/design-system/toolbox/src/constants.ts @@ -0,0 +1,32 @@ +export const FIGMA_FILE_ID = "TW0kRpjhpsi3sR1u4a4wF8" +export const FIGMA_ICONS_NODE_ID = "109:599" + +export const FONT_FAMILY_SANS = [ + "Inter", + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "Segoe UI", + "Roboto", + "Helvetica Neue", + "Arial", + "Noto Sans", + "sans-serif", + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji", +] + +export const FONT_FAMILY_MONO = [ + "Roboto Mono", + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "Liberation Mono", + "Courier New", + "monospace", +] diff --git a/packages/design-system/toolbox/src/create-cli.ts b/packages/design-system/toolbox/src/create-cli.ts new file mode 100644 index 0000000000000..31cc42d118bb7 --- /dev/null +++ b/packages/design-system/toolbox/src/create-cli.ts @@ -0,0 +1,31 @@ +import { generateIcons } from "@/commands/icons/command" +import { Command } from "commander" + +import { generateTokens } from "@/commands/tokens/command" +import pkg from "../package.json" + +export async function createCli() { + const program = new Command() + + program.name("toolbox").version(pkg.version) + + // Icon + + const generateIconsCommand = program.command("icons") + generateIconsCommand.description("Generate icons from Figma") + + generateIconsCommand.option("-o, --output ", "Output directory") + + generateIconsCommand.action(generateIcons) + + // Color tokens + + const generateTokensCommand = program.command("tokens") + generateTokensCommand.description("Generate tokens from Figma") + + generateTokensCommand.option("-o, --output ", "Output directory") + + generateTokensCommand.action(generateTokens) + + return program +} diff --git a/packages/design-system/toolbox/src/figma-client.ts b/packages/design-system/toolbox/src/figma-client.ts new file mode 100644 index 0000000000000..f3c7c5118ad0c --- /dev/null +++ b/packages/design-system/toolbox/src/figma-client.ts @@ -0,0 +1,16 @@ +import dotenv from "dotenv" +import { resolve } from "path" +import Figma from "./figma" + +dotenv.config({ path: resolve(process.cwd(), ".env") }) + +const accessToken = process.env.FIGMA_TOKEN || "" + +if (!accessToken) { + throw new Error("FIGMA_TOKEN is not defined") +} + +export const client = new Figma({ + accessToken: accessToken, + maxRetries: 3, +}) diff --git a/packages/design-system/toolbox/src/figma/assertions.ts b/packages/design-system/toolbox/src/figma/assertions.ts new file mode 100644 index 0000000000000..20add5c70529f --- /dev/null +++ b/packages/design-system/toolbox/src/figma/assertions.ts @@ -0,0 +1,42 @@ +import { + Effect, + EffectBlur, + EffectShadow, + EffectType, + Paint, + PaintGradient, + PaintImage, + PaintSolid, + PaintType, +} from "./types" + +export function isEffectShadow(effect: Effect): effect is EffectShadow { + return ( + effect.type === EffectType.DROP_SHADOW || + effect.type === EffectType.INNER_SHADOW + ) +} + +export function isEffectBlur(effect: Effect): effect is EffectBlur { + return ( + effect.type === EffectType.BACKGROUND_BLUR || + effect.type === EffectType.LAYER_BLUR + ) +} + +export function isPaintSolid(paint: Paint): paint is PaintSolid { + return paint.type === PaintType.SOLID +} + +export function isPaintGradient(paint: Paint): paint is PaintGradient { + return ( + paint.type === PaintType.GRADIENT_ANGULAR || + paint.type === PaintType.GRADIENT_DIAMOND || + paint.type === PaintType.GRADIENT_LINEAR || + paint.type === PaintType.GRADIENT_RADIAL + ) +} + +export function isPaintImage(paint: Paint): paint is PaintImage { + return paint.type === PaintType.IMAGE +} diff --git a/packages/design-system/toolbox/src/figma/client.ts b/packages/design-system/toolbox/src/figma/client.ts new file mode 100644 index 0000000000000..4d78b1da9c519 --- /dev/null +++ b/packages/design-system/toolbox/src/figma/client.ts @@ -0,0 +1,56 @@ +import axios, { AxiosInstance, AxiosRequestConfig, Method } from "axios" +import axiosRetry from "axios-retry" + +export type ClientArgs = { + accessToken: string + baseURL: string + maxRetries?: number +} + +class Client { + private _axios: AxiosInstance + + constructor({ accessToken, baseURL, maxRetries = 3 }: ClientArgs) { + const instance = axios.create({ + baseURL, + headers: { + "X-FIGMA-TOKEN": accessToken, + }, + }) + + // Typecast to any because our monorepo is using an older version of axios-retry and axios + axiosRetry(instance as any, { + retries: maxRetries, + retryDelay: axiosRetry.exponentialDelay, + }) + + this._axios = instance + } + + async request( + method: Method, + url: string, + payload: Record = {}, + config?: AxiosRequestConfig + ) { + const requestConfig: AxiosRequestConfig = { + method, + url, + ...config, + } + + if (["POST", "DELETE"].includes(method)) { + requestConfig.data = payload + } + + const response = await this._axios.request(requestConfig) + + if (Math.floor(response.status / 100) !== 2) { + throw response.statusText + } + + return response.data + } +} + +export default Client diff --git a/packages/design-system/toolbox/src/figma/index.ts b/packages/design-system/toolbox/src/figma/index.ts new file mode 100644 index 0000000000000..8a76eee703386 --- /dev/null +++ b/packages/design-system/toolbox/src/figma/index.ts @@ -0,0 +1,308 @@ +import axios from "axios" +import Client, { ClientArgs } from "./client" +import { + FrameOffset, + GetCommentsResult, + GetComponentResult, + GetComponentSetResult, + GetFileComponentSetsResult, + GetFileComponentsResult, + GetFileNodesResult, + GetFileResult, + GetFileStylesResult, + GetImageFillsResult, + GetImageResult, + GetProjectFilesResult, + GetStyleResult, + GetTeamComponentSetsResult, + GetTeamComponentsResult, + GetTeamProjectsResult, + GetTeamStylesResult, + GetVersionsResult, + NodeType, + PostCommentResult, + Vector, +} from "./types" +import { encodeQuery } from "./utils" + +type FigmaArgs = Omit + +const FIGMA_BASE_URL = "https://api.figma.com/v1/" + +class Figma { + private _api: Client + + constructor({ accessToken, maxRetries = 3 }: FigmaArgs) { + this._api = new Client({ + accessToken, + baseURL: FIGMA_BASE_URL, + maxRetries, + }) + } + + /** + * Get a resource by its URL. + */ + async getResource(url: string) { + const response = await axios.get(url) + + if (Math.floor(response.status / 100) !== 2) { + throw response.statusText + } + + return response.data + } + + async getFile( + file_key: string, + options?: { + /** A specific version ID to get. Omitting this will get the current version of the file */ + version?: string + /** If specified, only a subset of the document will be returned corresponding to the nodes listed, their children, and everything between the root node and the listed nodes */ + ids?: string[] + /** Positive integer representing how deep into the document tree to traverse. For example, setting this to 1 returns only Pages, setting it to 2 returns Pages and all top level objects on each page. Not setting this parameter returns all nodes */ + depth?: number + /** Set to "paths" to export vector data */ + geometry?: "paths" + /** A comma separated list of plugin IDs and/or the string "shared". Any data present in the document written by those plugins will be included in the result in the `pluginData` and `sharedPluginData` properties. */ + plugin_data?: string + /** Set to returns branch metadata for the requested file */ + branch_data?: boolean + } + ): Promise { + const queryString = options + ? `?${encodeQuery({ + ...options, + ids: options.ids && options.ids.join(","), + })}` + : "" + + return this._api.request("GET", `files/${file_key}${queryString}`) + } + + async getFileNodes( + file_key: string, + options: { + /** A comma separated list of node IDs to retrieve and convert */ + ids: string[] + /** A specific version ID to get. Omitting this will get the current version of the file */ + version?: string + /** Positive integer representing how deep into the document tree to traverse. For example, setting this to 1 returns only Pages, setting it to 2 returns Pages and all top level objects on each page. Not setting this parameter returns all nodes */ + depth?: number + /** Set to "paths" to export vector data */ + geometry?: "paths" + /** A comma separated list of plugin IDs and/or the string "shared". Any data present in the document written by those plugins will be included in the result in the `pluginData` and `sharedPluginData` properties. */ + plugin_data?: string + } + ): Promise> { + const queryString = `?${encodeQuery({ + ...options, + ids: options.ids.join(","), + })}` + + return this._api.request("GET", `files/${file_key}/nodes${queryString}`) + } + + async getImage( + file_key: string, + options: { + /** A comma separated list of node IDs to render */ + ids: string[] + /** A number between 0.01 and 4, the image scaling factor */ + scale: number + /** A string enum for the image output format */ + format: "jpg" | "png" | "svg" | "pdf" + /** Whether to include id attributes for all SVG elements. `Default: false` */ + svg_include_id?: boolean + /** Whether to simplify inside/outside strokes and use stroke attribute if possible instead of . `Default: true` */ + svg_simplify_stroke?: boolean + /** Use the full dimensions of the node regardless of whether or not it is cropped or the space around it is empty. Use this to export text nodes without cropping. `Default: false` */ + use_absolute_bounds?: boolean + /** A specific version ID to get. Omitting this will get the current version of the file */ + version?: string + } + ): Promise { + const queryString = options + ? `?${encodeQuery({ + ...options, + ids: options.ids && options.ids.join(","), + })}` + : "" + + return this._api.request("GET", `images/${file_key}${queryString}`) + } + + async getImageFills(file_key: string): Promise { + return this._api.request("GET", `files/${file_key}/images`) + } + + async getComments(file_key: string): Promise { + return this._api.request("GET", `files/${file_key}/comments`) + } + + async postComment( + file_key: string, + /** The text contents of the comment to post */ + message: string, + /** The position of where to place the comment. This can either be an absolute canvas position or the relative position within a frame. */ + client_meta: Vector | FrameOffset, + /** (Optional) The comment to reply to, if any. This must be a root comment, that is, you cannot reply to a comment that is a reply itself (a reply has a parent_id). */ + comment_id?: string + ): Promise { + return this._api.request("POST", `files/${file_key}/comments`, { + message, + client_meta, + comment_id, + }) + } + + async deleteComment(file_key: string, comment_id: string): Promise { + return this._api.request( + "DELETE", + `files/${file_key}/comments/${comment_id}` + ) + } + + async getVersions(file_key: string): Promise { + return this._api.request("GET", `files/${file_key}/versions`) + } + + async getTeamProjects(teamId: string): Promise { + return this._api.request("GET", `teams/${teamId}/projects`) + } + + async getProjectFiles( + project_id: string, + options: { + /** Set to returns branch metadata for the requested file */ + branch_data?: boolean + } + ): Promise { + const queryString = options + ? `?${encodeQuery({ + ...options, + })}` + : "" + + return this._api.request( + "GET", + `projects/${project_id}/files${queryString}` + ) + } + + /** + * Get a paginated list of published components within a team library + */ + async getTeamComponents( + team_id: string, + options: { + /** Number of items in a paged list of results. Defaults to 30. */ + page_size?: number + /** Cursor indicating which id after which to start retrieving components for. Exclusive with before. The cursor value is an internally tracked integer that doesn't correspond to any Ids */ + after?: number + /** Cursor indicating which id before which to start retrieving components for. Exclusive with after. The cursor value is an internally tracked integer that doesn't correspond to any Ids */ + before?: number + } + ): Promise { + const queryString = options ? `?${encodeQuery(options)}` : "" + + return this._api.request("GET", `teams/${team_id}/components${queryString}`) + } + + /** + * Get a list of published components within a file library + */ + async getFileComponents(file_key: string): Promise { + return this._api.request("GET", `files/${file_key}/components`) + } + + /** + * Get metadata on a component by key. + */ + async getComponent(component_key: string): Promise { + return this._api.request("GET", `components/${component_key}`) + } + + /** + * Get a paginated list of published component_sets within a team library + */ + async getTeamComponentSets( + team_id: string, + options: { + /** Number of items in a paged list of results. Defaults to 30. */ + page_size?: number + /** Cursor indicating which id after which to start retrieving component sets for. Exclusive with before. The cursor value is an internally tracked integer that doesn't correspond to any Ids */ + after?: number + /** Cursor indicating which id before which to start retrieving component sets for. Exclusive with after. The cursor value is an internally tracked integer that doesn't correspond to any Ids */ + before?: number + } + ): Promise { + const queryString = options ? `?${encodeQuery(options)}` : "" + + return this._api.request( + "GET", + `teams/${team_id}/component_sets${queryString}` + ) + } + + async getFileComponentSets( + file_key: string + ): Promise { + return this._api.request("GET", `files/${file_key}/component_sets`) + } + + /** + * Get metadata on a component_set by key. + */ + async getComponentSet(key: string): Promise { + return this._api.request("GET", `component_sets/${key}`) + } + + /** + * Get a paginated list of published styles within a team library + */ + async getTeamStyles( + team_id: string, + options: { + /** Number of items in a paged list of results. Defaults to 30. */ + page_size?: number + /** Cursor indicating which id after which to start retrieving styles for. Exclusive with before. The cursor value is an internally tracked integer that doesn't correspond to any Ids */ + after?: number + /** Cursor indicating which id before which to start retrieving styles for. Exclusive with after. The cursor value is an internally tracked integer that doesn't correspond to any Ids */ + before?: number + } + ): Promise { + const queryString = options ? `?${encodeQuery(options)}` : "" + + return this._api.request("GET", `teams/${team_id}/styles${queryString}`) + } + + /** + * Get a list of published styles within a file library + */ + async getFileStyles(file_key: string): Promise { + return this._api.request("GET", `files/${file_key}/styles`) + } + + /** + * Get metadata on a style by key. + */ + async getStyle(key: string): Promise { + return this._api.request("GET", `styles/${key}`) + } + + // Variables - Beta API (TODO) + + // Webhooks - Beta API (TODO) + + // Activity Logs - Beta API (TODO) + + // Payments - Beta API (TODO) + + // Dev Resources - Beta API (TODO) +} + +export * from "./assertions" +export * from "./types" + +export default Figma diff --git a/packages/design-system/toolbox/src/figma/types.ts b/packages/design-system/toolbox/src/figma/types.ts new file mode 100644 index 0000000000000..ee49e8823e875 --- /dev/null +++ b/packages/design-system/toolbox/src/figma/types.ts @@ -0,0 +1,1236 @@ +// AST TYPES + +/** An RGBA color */ +export type Color = { + /** Red channel value, between 0 and 1 */ + r: number + /** Green channel value, between 0 and 1 */ + g: number + /** Blue channel value, between 0 and 1 */ + b: number + /** Alpha channel value, between 0 and 1 */ + a: number +} + +/** A string enum with value, describing the end caps of vector paths. */ +export enum StrokeCap { + NONE = "NONE", + ROUND = "ROUND", + SQUARE = "SQUARE", + LINE_ARROW = "LINE_ARROW", + TRIANGLE_ARROW = "TRIANGLE_ARROW", +} + +/** Where stroke is drawn relative to the vector outline as a string enum */ +export enum StrokeAlign { + INSIDE = "INSIDE", + OUTSIDE = "OUTSIDE", + CENTER = "CENTER", +} + +/** A string enum with value, describing how corners in vector paths are rendered. */ +export enum StrokeJoin { + MITER = "MITER", + BEVEL = "BEVEL", + ROUND = "ROUND", +} + +export enum ImageType { + JPG = "JPG", + PNG = "PNG", + SVG = "SVG", + PDF = "PDF", +} + +/** A string enum with value, indicating the type of boolean operation applied */ +export enum BooleanOperationType { + UNION = "UNION", + INTERSECT = "INTERSECT", + SUBTRACT = "SUBTRACT", + EXCLUDE = "EXCLUDE", +} + +/** Text casing applied to the node, default is the original casing */ +export enum TextCase { + ORIGINAL = "ORIGINAL", + UPPER = "UPPER", + LOWER = "LOWER", + TITLE = "TITLE", + SMALL_CAPS = "SMALL_CAPS", + SMALL_CAPS_FORCED = "SMALL_CAPS_FORCED", +} + +/** Text decoration applied to the node */ +export enum TextDecoration { + NONE = "NONE", + STRIKETHROUGH = "STRIKETHROUGH", + UNDERLINE = "UNDERLINE", +} + +/** Dimensions along which text will auto resize, default is that the text does not auto-resize. */ +export enum TextAutoResize { + NONE = "NONE", + HEIGHT = "HEIGHT", + WIDTH_AND_HEIGHT = "WIDTH_AND_HEIGHT", + TRUNCATE = "TRUNCATE", +} + +/** The unit of the line height value specified by the user. */ +export enum LineHeightUnit { + PIXELS = "PIXELS", + "FONT_SIZE_%" = "FONT_SIZE_%", + "INTRINSIC_%" = "INTRINSIC_%", +} + +/** + * Map + * A mapping of a StyleType to style ID (see Style) of styles present on this node. The style ID can be used to look up more information about the style in the top-level styles field. + */ +export type StylesMap = { [styleType in StyleType]: string } + +/** Format and size to export an asset at */ +export type ExportSetting = { + /** File suffix to append to all filenames */ + suffix: string + /** Image type, string enum that supports values "JPG", "PNG", "SVG" and "PDF" */ + format: ImageType + /** Constraint that determines sizing of exported asset */ + constraint: Constrain +} + +export enum ConstrainType { + /** Scale by value */ + SCALE = "SCALE", + /** Scale proportionally and set width to value */ + WIDTH = "WIDTH", + /** Scale proportionally and set width to value */ + HEIGHT = "HEIGHT", +} + +/** Sizing constraint for exports */ +export type Constrain = { + /** + * Type of constraint to apply; string enum with potential values below + * "SCALE": Scale by value + * "WIDTH": Scale proportionally and set width to value + * "HEIGHT": Scale proportionally and set height to value + */ + type: ConstrainType + /** See type property for effect of this field */ + value: number +} + +/** A rectangle that expresses a bounding box in absolute coordinates */ +export type Rectangle = { + /** X coordinate of top left corner of the rectangle */ + x: number + /** Y coordinate of top left corner of the rectangle */ + y: number + /** Width of the rectangle */ + width: number + /** Height of the rectangle */ + height: number +} + +/** + * This type is a string enum with the following possible values + * Normal blends: + * "PASS_THROUGH" (Only applicable to objects with children) + * "NORMAL" + * + * Darken: + * "DARKEN" + * "MULTIPLY" + * "LINEAR_BURN" + * "COLOR_BURN" + * + * Lighten: + * "LIGHTEN" + * "SCREEN" + * "LINEAR_DODGE" + * "COLOR_DODGE" + * + * Contrast: + * "OVERLAY" + * "SOFT_LIGHT" + * "HARD_LIGHT" + * + * Inversion: + * "DIFFERENCE" + * "EXCLUSION" + * + * Component: + * "HUE" + * "SATURATION" + * "COLOR" + * "LUMINOSITY" + */ +export enum BlendMode { + // Normal blends: + /** (Only applicable to objects with children) */ + PASS_THROUGH = "PASS_THROUGH", + /** (Only applicable to objects with children) */ + NORMAL = "NORMAL", + + /** Darken */ + DARKEN = "DARKEN", + MULTIPLY = "MULTIPLY", + LINEAR_BURN = "LINEAR_BURN", + COLOR_BURN = "COLOR_BURN", + + /** Lighten */ + LIGHTEN = "LIGHTEN", + SCREEN = "SCREEN", + LINEAR_DODGE = "LINEAR_DODGE", + COLOR_DODGE = "COLOR_DODGE", + + /** Contrast */ + OVERLAY = "OVERLAY", + SOFT_LIGHT = "SOFT_LIGHT", + HARD_LIGHT = "HARD_LIGHT", + + /** Inversion */ + DIFFERENCE = "DIFFERENCE", + EXCLUSION = "EXCLUSION", + + /** Component */ + HUE = "HUE", + SATURATION = "SATURATION", + COLOR = "COLOR", + LUMINOSITY = "LUMINOSITY", +} + +/** + * Enum describing animation easing curves + * This type is a string enum with the following possible values + * "EASE_IN": Ease in with an animation curve similar to CSS ease-in. + * "EASE_OUT": Ease out with an animation curve similar to CSS ease-out. + * "EASE_IN_AND_OUT": Ease in and then out with an animation curve similar to CSS ease-in-out. + * "LINEAR": No easing, similar to CSS linear. + */ +export enum EasingType { + /** Ease in with an animation curve similar to CSS ease-in. */ + EASE_IN = "EASE_IN", + /** Ease out with an animation curve similar to CSS ease-out. */ + EASE_OUT = "EASE_OUT", + /** Ease in and then out with an animation curve similar to CSS ease-in-out. */ + EASE_IN_AND_OUT = "EASE_IN_AND_OUT", + /** No easing, similar to CSS linear. */ + LINEAR = "LINEAR", +} + +export enum LayoutConstraintVertical { + TOP = "TOP", + BOTTOM = "BOTTOM", + CENTER = "CENTER", + TOP_BOTTOM = "TOP_BOTTOM", + SCALE = "SCALE", +} + +export enum LayoutConstraintHorizontal { + LEFT = "LEFT", + RIGHT = "RIGHT", + CENTER = "CENTER", + LEFT_RIGHT = "LEFT_RIGHT", + SCALE = "SCALE", +} + +/** Layout constraint relative to containing Frame */ +export type LayoutConstraint = { + /** + * Vertical constraint as an enum + * "TOP": Node is laid out relative to top of the containing frame + * "BOTTOM": Node is laid out relative to bottom of the containing frame + * "CENTER": Node is vertically centered relative to containing frame + * "TOP_BOTTOM": Both top and bottom of node are constrained relative to containing frame (node stretches with frame) + * "SCALE": Node scales vertically with containing frame + */ + vertical: LayoutConstraintVertical + /** + * Horizontal constraint as an enum + * "LEFT": Node is laid out relative to left of the containing frame + * "RIGHT": Node is laid out relative to right of the containing frame + * "CENTER": Node is horizontally centered relative to containing frame + * "LEFT_RIGHT": Both left and right of node are constrained relative to containing frame (node stretches with frame) + * "SCALE": Node scales horizontally with containing frame + */ + horizontal: LayoutConstraintHorizontal +} + +export enum LayoutAlign { + /** Determines if the layer should stretch along the parent’s counter axis. This property is only provided for direct children of auto-layout frames. */ + INHERIT = "INHERIT", + STRETCH = "STRETCH", + /** In horizontal auto-layout frames, "MIN" and "MAX" correspond to "TOP" and "BOTTOM". In vertical auto-layout frames, "MIN" and "MAX" correspond to "LEFT" and "RIGHT". */ + MIN = "MIN", + CENTER = "CENTER", + MAX = "MAX", +} + +export enum LayoutGridPattern { + COLUMNS = "COLUMNS", + ROWS = "ROWS", + GRID = "GRID", +} + +export enum LayoutGridAlignment { + MIN = "MIN", + MAX = "MAX", + CENTER = "CENTER", +} + +/** Guides to align and place objects within a frame */ +export type LayoutGrid = { + /** + * Orientation of the grid as a string enum + * "COLUMNS": Vertical grid + * "ROWS": Horizontal grid + * "GRID": Square grid + */ + pattern: LayoutGridPattern + + /** Width of column grid or height of row grid or square grid spacing */ + sectionSize: number + + /** Is the grid currently visible? */ + visible: boolean + + /** Color of the grid */ + color: Color + + // The following properties are only meaningful for directional grids (COLUMNS or ROWS) + + /** + * Positioning of grid as a string enum + * "MIN": Grid starts at the left or top of the frame + * "MAX": Grid starts at the right or bottom of the frame + * "CENTER": Grid is center aligned + */ + alignment: LayoutGridAlignment + + /** Spacing in between columns and rows */ + gutterSize: number + + /** Spacing before the first column or row */ + offset: number + + /** Number of columns or rows */ + count: number +} + +export enum AxisSizingMode { + FIXED = "FIXED", + AUTO = "AUTO", +} + +export enum EffectType { + INNER_SHADOW = "INNER_SHADOW", + DROP_SHADOW = "DROP_SHADOW", + LAYER_BLUR = "LAYER_BLUR", + BACKGROUND_BLUR = "BACKGROUND_BLUR", +} + +type Effect_ = { + /** Is the effect active? */ + visible: boolean + + /** Radius of the blur effect (applies to shadows as well) */ + radius: number +} + +type EffectShadow_ = { + /** The color of the shadow */ + color: Color + + /** Blend mode of the shadow */ + blendMode: BlendMode + + /** How far the shadow is projected in the x and y directions */ + offset: Vector + + /** How far the shadow spreads */ + spread: number +} + +export type EffectShadow = { + type: EffectType.DROP_SHADOW | EffectType.INNER_SHADOW +} & Effect_ & + EffectShadow_ + +export type EffectBlur = { + type: EffectType.BACKGROUND_BLUR | EffectType.LAYER_BLUR +} & Effect_ + +/** A visual effect such as a shadow or blur */ +export type Effect = { type: EffectType } & Effect_ & Partial + +export type Hyperlink = { + /** Type of hyperlink */ + type: "URL" | "NODE" + + /** URL being linked to, if URL type */ + url: string + + /** ID of frame hyperlink points to, if NODE type */ + nodeID: string +} + +export enum PaintType { + SOLID = "SOLID", + GRADIENT_LINEAR = "GRADIENT_LINEAR", + GRADIENT_RADIAL = "GRADIENT_RADIAL", + GRADIENT_ANGULAR = "GRADIENT_ANGULAR", + GRADIENT_DIAMOND = "GRADIENT_DIAMOND", + IMAGE = "IMAGE", + EMOJI = "EMOJI", +} + +export enum PaintSolidScaleMode { + FILL = "FILL", + FIT = "FIT", + TILE = "TILE", + STRETCH = "STRETCH", +} + +export type Paint_ = { + /** `default: true` Is the paint enabled? */ + visible?: boolean + + /** `default: 1` Overall opacity of paint (colors within the paint can also have opacity values which would blend with this) */ + opacity?: number +} + +type PaintSolid_ = { + /** Solid color of the paint */ + color: Color +} + +type PaintGradient_ = { + /** + * How this node blends with nodes behind it in the scene (see blend mode section for more details) + */ + blendMode: BlendMode + + /** + * This field contains three vectors, each of which are a position in normalized object space (normalized object space is if the top left corner of the bounding box of the object is (0, 0) and the bottom right is (1,1)). The first position corresponds to the start of the gradient (value 0 for the purposes of calculating gradient stops), the second position is the end of the gradient (value 1), and the third handle position determines the width of the gradient (only relevant for non-linear gradients). + */ + gradientHandlePositions: Vector[] + + /** + * Positions of key points along the gradient axis with the colors anchored there. Colors along the gradient are interpolated smoothly between neighboring gradient stops. + */ + gradientStops: ColorStop[] +} + +type PaintImage_ = { + /** Image scaling mode */ + scaleMode: PaintSolidScaleMode + /** Image reference, get it with `Api.getImage` */ + imageRef: string + /** Affine transform applied to the image, only present if scaleMode is STRETCH */ + imageTransform?: Transform + /** Amount image is scaled by in tiling, only present if scaleMode is TILE */ + scalingFactor?: number + /** Image rotation, in degrees. */ + rotation: number + /** A reference to the GIF embedded in this node, if the image is a GIF. To download the image using this reference, use the GET file images endpoint to retrieve the mapping from image references to image URLs */ + gifRef: string +} + +export type PaintSolid = { + type: PaintType.SOLID +} & PaintSolid_ & + Paint_ + +export type PaintGradient = { + type: + | PaintType.GRADIENT_ANGULAR + | PaintType.GRADIENT_DIAMOND + | PaintType.GRADIENT_LINEAR + | PaintType.GRADIENT_RADIAL +} & PaintGradient_ & + Paint_ + +export type PaintImage = { + type: PaintType.IMAGE +} & PaintImage_ & + Paint_ + +/** A solid color, gradient, or image texture that can be applied as fills or strokes */ +export type Paint = { type: PaintType } & Paint_ & + Partial & + Partial & + Partial + +/** A 2d vector */ +export type Vector = { + /** X coordinate of the vector */ + x: number + /** Y coordinate of the vector */ + y: number +} + +/** A 2x3 2D affine transformation matrix */ +export type Transform = [[number, number, number], [number, number, number]] + +export enum PathWindingRule { + EVENODD = "EVENODD", + NONZERO = "NONZERO", +} + +/** A vector svg path */ +export type Path = { + /** A sequence of path commands in SVG notation */ + path: string + /** Winding rule for the path, either "EVENODD" or "NONZERO" */ + windingRule: PathWindingRule +} + +/** A relative offset within a frame */ +export type FrameOffset = { + /** Unique id specifying the frame */ + node_id: string + /** 2d vector offset within the frame */ + node_offset: Vector +} + +/** A position color pair representing a gradient stop */ +export type ColorStop = { + /** Value between 0 and 1 representing position along gradient axis */ + position: number + /** Color attached to corresponding position */ + color: Color +} + +/** Metadata for character formatting */ +export type TypeStyle = { + /** Font family of text (standard name) */ + fontFamily: string + /** PostScript font name */ + fontPostScriptName: string + /** Space between paragraphs in px, 0 if not present */ + paragraphSpacing?: number + /** Paragraph indentation in px, 0 if not present */ + paragraphIndent?: number + /** Is text italicized? */ + italic: boolean + /** Numeric font weight */ + fontWeight: number + /** Font size in px */ + fontSize: number + /** Text casing applied to the node, default is the `ORIGINAL` casing */ + textCase?: TextCase + /** Text decoration applied to the node, default is `NONE` */ + textDecoration?: TextDecoration + /** Dimensions along which text will auto resize, default is that the text does not auto-resize. Default is `NONE` */ + textAutoResize?: TextAutoResize + /** Horizontal text alignment as string enum */ + textAlignHorizontal: "LEFT" | "RIGHT" | "CENTER" | "JUSTIFIED" + /** Vertical text alignment as string enum */ + textAlignVertical: "TOP" | "CENTER" | "BOTTOM" + /** Space between characters in px */ + letterSpacing: number + /** Paints applied to characters */ + fills: Paint[] + /** Link to a URL or frame */ + hyperlink: Hyperlink + /** A map of OpenType feature flags to 1 or 0, 1 if it is enabled and 0 if it is disabled. Note that some flags aren't reflected here. For example, SMCP (small caps) is still represented by the textCase field. */ + opentypeFlags: { [flag: string]: number } + /** Line height in px */ + lineHeightPx: number + /** @deprecated Line height as a percentage of normal line height. This is deprecated; in a future version of the API only lineHeightPx and lineHeightPercentFontSize will be returned. */ + lineHeightPercent?: number + /** Line height as a percentage of the font size. Only returned when lineHeightPercent is not 100 */ + lineHeightPercentFontSize?: number + /** The unit of the line height value specified by the user. */ + lineHeightUnit: LineHeightUnit +} + +export type StyleType = "FILL" | "TEXT" | "EFFECT" | "GRID" + +/** Data on the frame a component resides in */ +export interface FrameInfo { + /** Id of the frame node within the figma file */ + nodeId: string + /** Name of the frame */ + name: string + /** Background color of the frame */ + backgroundColor: string + /** Id of the frame's residing page */ + pageId: string + /** Name of the frame's residing page */ + pageName: string +} + +/** Data on the "containingStateGroup" a component resides in */ +/** Notice: at the moment is not documented in the REST API documentation. I have raised the issue + * (https://forum.figma.com/t/missing-containingstategroup-parameter-in-documentation-for-frameinfo/2558) + * and filed a bug with the support, but no one replied. From what I understand, this extra parameters are + * added when a component is a variant within a component_set (the name/nodeId are of the parent component_set) + */ +export interface ContainingStateGroup { + /** Name of the element's residing "state group" (likely, a component_set) */ + name: string + /** Id of the element's residing "state group" (likely, a component_set) */ + nodeId: string +} + +/** + * NOT DOCUMENTED + * + * Data on component's containing page, if component resides in a multi-page file + */ +export interface PageInfo {} + +/** An arrangement of published UI elements that can be instantiated across figma files */ +export interface Component { + /** The key of the component */ + key: string + /** The name of the component */ + name: string + /** The description of the component as entered in the editor */ + description: string + /** The ID of the component set if the component belongs to one */ + componentSetId: string | null + /** The documentation links for this component */ + documentationLinks: DocumentationLinks[] +} + +/** Represents a link to documentation for a component. */ +export interface DocumentationLinks { + /** Should be a valid URI (e.g. https://www.figma.com). */ + uri: string +} + +/** A set of properties that can be applied to nodes and published. Styles for a property can be created in the corresponding property's panel while editing a file */ +export interface Style { + /** The key of the style */ + key: string + /** The name of the style */ + name: string + /** The description of the style */ + description: string + /** The type of style */ + styleType: StyleType +} + +/** The root node */ +export interface DOCUMENT { + /** An array of canvases attached to the document */ + children: Node[] +} + +/** Represents a single page */ +export interface CANVAS { + /** An array of top level layers on the canvas */ + children: Node[] + /** Background color of the canvas */ + backgroundColor: Color + /** default: [] An array of export settings representing images to export from the canvas */ + exportSettings: ExportSetting[] + /** Node ID that corresponds to the start frame for prototypes */ + prototypeStartNodeID?: string | null +} + +/** A node of fixed size containing other nodes */ +export interface FRAME { + /** An array of nodes that are direct children of this node */ + children: Node[] + /** If true, layer is locked and cannot be edited, default `false` */ + locked?: boolean + /** @deprecated Background of the node. This is deprecated, as backgrounds for frames are now in the fills field. */ + background: Paint[] + /** @deprecated Background color of the node. This is deprecated, as frames now support more than a solid color as a background. Please use the background field instead. */ + backgroundColor?: Color + /** An array of fill paints applied to the node */ + fills: Paint[] + /** An array of stroke paints applied to the node */ + strokes: Paint[] + /** The weight of strokes on the node */ + strokeWeight: number + /** The weight of strokes on different side of the node */ + individualStrokeWeights?: { + top: number + right: number + left: number + bottom: number + } + /** Position of stroke relative to vector outline, as a string enum */ + strokeAlign: StrokeAlign + /** Radius of each corner of the frame if a single radius is set for all corners */ + cornerRadius: number + /** Array of length 4 of the radius of each corner of the rectangle, starting in the top left and proceeding clockwise */ + rectangleCornerRadii: [number, number, number, number] + /** default: [] An array of export settings representing images to export from node */ + exportSettings: ExportSetting[] + /** How this node blends with nodes behind it in the scene (see blend mode section for more details) */ + blendMode: BlendMode + /** default: false Keep height and width constrained to same ratio */ + preserveRatio: boolean + /** Horizontal and vertical layout constraints for node */ + constraints: LayoutConstraint + /** Determines if the layer should stretch along the parent’s counter axis. This property is only provided for direct children of auto-layout frames. */ + layoutAlign: LayoutAlign + /** default: 0. This property is applicable only for direct children of auto-layout frames, ignored otherwise. Determines whether a layer should stretch along the parent’s primary axis. A 0 corresponds to a fixed size and 1 corresponds to stretch. */ + layoutGrow?: number + /** default: null Node ID of node to transition to in prototyping */ + transitionNodeID?: string | null + /** default: null The duration of the prototyping transition on this node (in milliseconds). */ + transitionDuration?: number | null + /** default: null The easing curve used in the prototyping transition on this node. */ + transitionEasing?: EasingType | null + /** default: 1 Opacity of the node */ + opacity: number + /** Bounding box of the node in absolute space coordinates */ + absoluteBoundingBox: Rectangle + /** Width and height of element. This is different from the width and height of the bounding box in that the absolute bounding box represents the element after scaling and rotation. Only present if geometry=paths is passed */ + size?: Vector + /** The top two rows of a matrix that represents the 2D transform of this node relative to its parent. The bottom row of the matrix is implicitly always (0, 0, 1). Use to transform coordinates in geometry. Only present if geometry=paths is passed */ + relativeTransform?: Transform + /** Does this node clip content outside of its bounds? */ + clipsContent: boolean + /** Whether this layer uses auto-layout to position its children. default NONE */ + layoutMode: "NONE" | "HORIZONTAL" | "VERTICAL" + /** Whether the primary axis has a fixed length (determined by the user) or an automatic length (determined by the layout engine). This property is only applicable for auto-layout frames. Default AUTO */ + primaryAxisSizingMode: AxisSizingMode + /** Whether the counter axis has a fixed length (determined by the user) or an automatic length (determined by the layout engine). This property is only applicable for auto-layout frames. Default AUTO */ + counterAxisSizingMode: AxisSizingMode + /** Determines how the auto-layout frame’s children should be aligned in the primary axis direction. This property is only applicable for auto-layout frames. Default MIN */ + primaryAxisAlignItems: "MIN" | "CENTER" | "MAX" | "SPACE_BETWEEN" + /** Determines how the auto-layout frame’s children should be aligned in the counter axis direction. This property is only applicable for auto-layout frames. Default MIN */ + counterAxisAlignItems: "MIN" | "CENTER" | "MAX" | "BASELINE" + /** default: 0. The padding between the left border of the frame and its children. This property is only applicable for auto-layout frames. */ + paddingLeft: number + /** default: 0. The padding between the right border of the frame and its children. This property is only applicable for auto-layout frames. */ + paddingRight: number + /** default: 0. The padding between the top border of the frame and its children. This property is only applicable for auto-layout frames. */ + paddingTop: number + /** default: 0. The padding between the bottom border of the frame and its children. This property is only applicable for auto-layout frames. */ + paddingBottom: number + /** @deprecated default: 0. The horizontal padding between the borders of the frame and its children. This property is only applicable for auto-layout frames. Deprecated in favor of setting individual paddings. */ + horizontalPadding: number + /** @deprecated default: 0. The vertical padding between the borders of the frame and its children. This property is only applicable for auto-layout frames. Deprecated in favor of setting individual paddings. */ + verticalPadding: number + /** default: 0. The distance between children of the frame. This property is only applicable for auto-layout frames. */ + itemSpacing: number + /**default: false. Applicable only if layoutMode != "NONE". */ + itemReverseZIndex: boolean + /**default: false. Applicable only if layoutMode != "NONE". */ + strokesIncludedInLayout: boolean + /** Defines the scrolling behavior of the frame, if there exist contents outside of the frame boundaries. The frame can either scroll vertically, horizontally, or in both directions to the extents of the content contained within it. This behavior can be observed in a prototype. Default NONE */ + overflowDirection: + | "NONE" + | "HORIZONTAL_SCROLLING" + | "VERTICAL_SCROLLING" + | "HORIZONTAL_AND_VERTICAL_SCROLLING" + /** default: [] An array of layout grids attached to this node (see layout grids section for more details). GROUP nodes do not have this attribute */ + layoutGrids?: LayoutGrid[] + /** default: [] An array of effects attached to this node (see effects section for more details) */ + effects: Effect[] + /** default: false Does this node mask sibling nodes in front of it? */ + isMask: boolean + /** default: false Does this mask ignore fill style (like gradients) and effects? */ + isMaskOutline: boolean + /** default: AUTO */ + layoutPositioning: "AUTO" | "ABSOLUTE" +} + +/** A logical grouping of nodes */ +export type GROUP = FRAME +// { +// /** How this node blends with nodes behind it in the scene (see blend mode section for more details) */ +// blendMode: BlendMode; +// children: Node[], +// } + +/** A vector network, consisting of vertices and edges */ +export interface VECTOR { + /** default: [] An array of export settings representing images to export from node */ + exportSettings: ExportSetting[] + /** If true, layer is locked and cannot be edited, default `false` */ + locked?: boolean + /** How this node blends with nodes behind it in the scene (see blend mode section for more details) */ + blendMode: BlendMode + /** default: false Keep height and width constrained to same ratio */ + preserveRatio?: boolean + /** Determines if the layer should stretch along the parent’s counter axis. This property is only provided for direct children of auto-layout frames. */ + layoutAlign: LayoutAlign + /** default: 0. This property is applicable only for direct children of auto-layout frames, ignored otherwise. Determines whether a layer should stretch along the parent’s primary axis. A 0 corresponds to a fixed size and 1 corresponds to stretch. */ + layoutGrow?: number + /** Horizontal and vertical layout constraints for node */ + constraints: LayoutConstraint + /** default: null Node ID of node to transition to in prototyping */ + transitionNodeID?: string | null + /** default: null The duration of the prototyping transition on this node (in milliseconds). */ + transitionDuration?: number | null + /** default: null The easing curve used in the prototyping transition on this node. */ + transitionEasing?: EasingType | null + /** default: 1 Opacity of the node */ + opacity?: number + /** Bounding box of the node in absolute space coordinates */ + absoluteBoundingBox: Rectangle + /** Width and height of element. This is different from the width and height of the bounding box in that the absolute bounding box represents the element after scaling and rotation. Only present if geometry=paths is passed */ + size?: Vector + /** The top two rows of a matrix that represents the 2D transform of this node relative to its parent. The bottom row of the matrix is implicitly always (0, 0, 1). Use to transform coordinates in geometry. Only present if geometry=paths is passed */ + relativeTransform?: Transform + /** default: [] An array of effects attached to this node (see effects section for more details) */ + effects?: Effect[] + /** default: false Does this node mask sibling nodes in front of it? */ + isMask?: boolean + /** default: [] An array of fill paints applied to the node */ + fills: Paint[] + /** Only specified if parameter geometry=paths is used. An array of paths representing the object fill */ + fillGeometry?: Path[] + /** default: [] An array of stroke paints applied to the node */ + strokes: Paint[] + /** The weight of strokes on the node */ + strokeWeight: number + /** The weight of strokes on different side of the node */ + individualStrokeWeights?: { + top: number + right: number + left: number + bottom: number + } + /** default: NONE. A string enum with value of "NONE", "ROUND", "SQUARE", "LINE_ARROW", or "TRIANGLE_ARROW", describing the end caps of vector paths. */ + strokeCap?: StrokeCap + /** Only specified if parameter geometry=paths is used. An array of paths representing the object stroke */ + strokeGeometry?: Path[] + /** Where stroke is drawn relative to the vector outline as a string enum + "INSIDE": draw stroke inside the shape boundary + "OUTSIDE": draw stroke outside the shape boundary + "CENTER": draw stroke centered along the shape boundary */ + strokeAlign: StrokeAlign + /** A string enum with value of "MITER", "BEVEL", or "ROUND", describing how corners in vector paths are rendered. */ + strokeJoin?: StrokeJoin + /** An array of floating point numbers describing the pattern of dash length and gap lengths that the vector path follows. For example a value of [1, 2] indicates that the path has a dash of length 1 followed by a gap of length 2, repeated. */ + strokeDashes?: number[] + /** Only valid if strokeJoin is "MITER". The corner angle, in degrees, below which strokeJoin will be set to "BEVEL" to avoid super sharp corners. By default this is 28.96 degrees. */ + strokeMiterAngle?: number + /** A mapping of a StyleType to style ID (see Style) of styles present on this node. The style ID can be used to look up more information about the style in the top-level styles field. */ + styles?: StylesMap + /** default: AUTO */ + layoutPositioning: "AUTO" | "ABSOLUTE" +} + +/** A group that has a boolean operation applied to it */ +export type BOOLEAN = VECTOR & { + /** An array of nodes that are being boolean operated on */ + children: Node[] +} + +/** A group that has a boolean operation applied to it */ +export type BOOLEAN_OPERATION = VECTOR & { + /** An array of nodes that are being boolean operated on */ + children: Node[] + /** A string enum with value of "UNION", "INTERSECT", "SUBTRACT", or "EXCLUDE" indicating the type of boolean operation applied */ + booleanOperation: BooleanOperationType +} + +/** A regular star shape */ +export type STAR = VECTOR + +/** A straight line */ +export type LINE = VECTOR + +/** An ellipse */ +export type ELLIPSE = VECTOR + +/** A regular n-sided polygon */ +export type REGULAR_POLYGON = VECTOR + +/** A rectangle */ +export type RECTANGLE = VECTOR & { + /** Radius of each corner of the rectangle */ + cornerRadius: number + /** Array of length 4 of the radius of each corner of the rectangle, starting in the top left and proceeding clockwise */ + rectangleCornerRadii: [number, number, number, number] +} + +/** List types are represented as string enums with one of these possible values: ORDERED: Text is an ordered list (numbered), UNORDERED: Text is an unordered list (bulleted), NONE: Text is plain text and not part of any list */ +export enum LineTypes { + ORDERED = "ORDERED", + UNORDERED = "UNORDERED", + NONE = "NONE", +} + +/** A text box */ +export type TEXT = VECTOR & { + /** Text contained within text box */ + characters: string + /** Style of text including font family and weight (see type style section for more information) */ + style: TypeStyle + /** Array with same number of elements as characters in text box, each element is a reference to the styleOverrideTable defined below and maps to the corresponding character in the characters field. Elements with value 0 have the default type style */ + characterStyleOverrides: number[] + /** Map from ID to TypeStyle for looking up style overrides */ + styleOverrideTable: { [mapId: number]: TypeStyle } + /** An array with the same number of elements as lines in the text node, where lines are delimited by newline or paragraph separator characters. Each element in the array corresponds to the list type of a specific line. */ + lineTypes: LineTypes[] + /** An array with the same number of elements as lines in the text node, where lines are delimited by newline or paragraph separator characters. Each element in the array corresponds to the indentation level of a specific line. */ + lineIndentations: number[] +} + +/** A rectangular region of the canvas that can be exported */ +export interface SLICE { + /** An array of export settings representing images to export from this node */ + exportSettings: ExportSetting[] + /** Bounding box of the node in absolute space coordinates */ + absoluteBoundingBox: Rectangle + /** Width and height of element. This is different from the width and height of the bounding box in that the absolute bounding box represents the element after scaling and rotation. Only present if geometry=paths is passed */ + size?: Vector + /** The top two rows of a matrix that represents the 2D transform of this node relative to its parent. The bottom row of the matrix is implicitly always (0, 0, 1). Use to transform coordinates in geometry. Only present if geometry=paths is passed */ + relativeTransform?: Transform +} + +/** A node that can have instances created of it that share the same properties */ +export type COMPONENT = FRAME + +/** A node that can have instances created of it that share the same properties */ +export type COMPONENT_SET = FRAME + +/** An instance of a component, changes to the component result in the same changes applied to the instance */ +export type INSTANCE = FRAME & { + /** ID of component that this instance came from, refers to components table (see endpoints section below) */ + componentId: ComponentID +} + +export type NodeTypes = { + /** The root node */ + DOCUMENT: DOCUMENT + /** Represents a single page */ + CANVAS: CANVAS + /** A node of fixed size containing other nodes */ + FRAME: FRAME + /** A logical grouping of nodes */ + GROUP: GROUP + /** A vector network, consisting of vertices and edges */ + VECTOR: VECTOR + /** A group that has a boolean operation applied to it */ + BOOLEAN: BOOLEAN + BOOLEAN_OPERATION: BOOLEAN_OPERATION + /** A regular star shape */ + STAR: STAR + /** A straight line */ + LINE: LINE + /** An ellipse */ + ELLIPSE: ELLIPSE + /** A regular n-sided polygon */ + REGULAR_POLYGON: REGULAR_POLYGON + /** A rectangle */ + RECTANGLE: RECTANGLE + /** A text box */ + TEXT: TEXT + /** A rectangular region of the canvas that can be exported */ + SLICE: SLICE + /** A node that can have instances created of it that share the same properties */ + COMPONENT: COMPONENT + /** A node that can have instances created of it that share the same properties */ + COMPONENT_SET: COMPONENT_SET + /** An instance of a component, changes to the component result in the same changes applied to the instance */ + INSTANCE: INSTANCE +} + +export type NodeType = keyof NodeTypes + +export type Node = { + id: string + name: string + visible: boolean + type: NType + pluginData: any + sharedPluginData: any + isFixed?: boolean +} & NodeTypes[NType] + +/** A comment or reply left by a user */ +export interface Comment { + /** Unique identifier for comment */ + id: string + /** The position of the comment. Either the absolute coordinates on the canvas or a relative offset within a frame */ + client_meta: Vector | FrameOffset + /** The file in which the comment lives */ + file_key: string + /** If present, the id of the comment to which this is the reply */ + parent_id: string + /** The user who left the comment */ + user: User + /** The UTC ISO 8601 time at which the comment was left */ + created_at: string + /** If set, the UTC ISO 8601 time the comment was resolved */ + resolved_at: string + /** Only set for top level comments. The number displayed with the comment in the UI */ + order_id?: number + /** Comment message */ + message: string +} + +/** A description of a user */ +export interface User { + /** Unique stable id of the user */ + id: string + /** Name of the user */ + handle: string + /** URL link to the user's profile image */ + img_url: string + /** Email associated with the user's account. This will only be present on the /v1/me endpoint */ + email?: string +} + +/** A version of a file */ +export interface Version { + /** Unique identifier for version */ + id: string + /** The UTC ISO 8601 time at which the version was created */ + created_at: string + /** The label given to the version in the editor */ + label: string + /** The description of the version as entered in the editor */ + description: string + /** The user that created the version */ + user: User +} + +/** A Project can be identified by both the Project name, and the ProjectID. */ +export interface Project { + /** The ID of the project */ + id: number + /** The name of the project */ + name: string +} + +export interface BaseFile { + key: string + name: string + thumbnail_url: string + last_modified: string +} + +export interface ProjectFile extends BaseFile { + branches?: BaseFile[] +} + +/** An arrangement of published UI elements that can be instantiated across figma files */ +export interface ComponentMetadata { + /** The unique identifier of the component */ + key: string + /** The unique identifier of the figma file which contains the component */ + file_key: string + /** Id of the component node within the figma file */ + node_id: string + /** URL link to the component's thumbnail image */ + thumbnail_url: string + /** The name of the component */ + name: string + /** The description of the component as entered in the editor */ + description: string + /** The UTC ISO 8601 time at which the component was created */ + created_at: string + /** The UTC ISO 8601 time at which the component was updated */ + updated_at: string + /** The user who last updated the component */ + user: User + /** Data on component's containing frame, if component resides within a frame, plus the optional "containingStateGroup" if is a variant of a component_set */ + containing_frame?: FrameInfo & { containingStateGroup?: ContainingStateGroup } + /** Data on component's containing page, if component resides in a multi-page file */ + containing_page?: PageInfo +} + +/** A node containing a set of variants of a component */ +export interface ComponentSetMetadata { + /** The unique identifier of the component set */ + key: string + /** The unique identifier of the figma file which contains the component set */ + file_key: string + /** Id of the component set node within the figma file */ + node_id: string + /** URL link to the component set's thumbnail image */ + thumbnail_url: string + /** The name of the component set */ + name: string + /** The description of the component set as entered in the editor */ + description: string + /** The UTC ISO 8601 time at which the component set was created */ + created_at: string + /** The UTC ISO 8601 time at which the component set was updated */ + updated_at: string + /** The user who last updated the component set */ + user: User + /** Data on component set's containing frame, if component resides within a frame */ + containing_frame?: FrameInfo + /** Data on component set's containing page, if component resides in a multi-page file */ + containing_page?: PageInfo +} + +export interface StyleMetadata { + /** The unique identifier of the style */ + key: string + /** The unique identifier of the file which contains the style */ + file_key: string + /** Id of the style node within the figma file */ + node_id: string + /** The type of style */ + style_type: StyleType + /** URL link to the style's thumbnail image */ + thumbnail_url: string + /** Name of the style */ + name: string + /** The description of the style as entered by the publisher */ + description: string + /** The UTC ISO 8601 time at which the component set was created */ + created_at: string + /** The UTC ISO 8601 time at which the style was updated */ + updated_at: string + /** The user who last updated the style */ + sort_position: string + /** A user specified order number by which the style can be sorted */ + user: User +} + +// API TYPES + +// FIGMA FILES + +export interface GetFileResult { + name: string + lastModified: string + thumbnailUrl: string + version: string + document: Node<"DOCUMENT"> + components: { [nodeId: string]: Component } + schemaVersion: number + styles: { [styleName: string]: Style } + mainFileKey?: string + branches?: ProjectFile[] +} + +/** The `name`, `lastModified`, `thumbnailUrl`, and `version` attributes are all metadata of the specified file. */ +export interface GetFileNodesResult { + name: string + lastModified: string + thumbnailUrl: string + version: string + err?: string + nodes: { + [nodeId: string]: { + document: Node + components: { [nodeId: string]: Component } + schemaVersion: number + styles: { [styleName: string]: Style } + } | null + } +} + +export interface GetImageResult { + err?: string + /** { nodeId -> rendered image url } */ + images: { [nodeId: string]: string | null } + status?: number +} + +export interface GetImageFillsResult { + err?: string + /** { nodeId -> rendered image url } */ + images: { [imageRef: string]: string | null } + meta?: { images: { [imageRef: string]: string | null } } + status?: number +} + +// COMMENTS + +export interface GetCommentsResult { + comments: Comment[] +} + +// This returns the Comment that was successfully posted (see: https://www.figma.com/developers/api#post-comments-endpoint) +export interface PostCommentResult extends Comment {} + +// Nothing is returned from this endpoint (see: https://www.figma.com/developers/api#delete-comments-endpoint) +export interface DeleteCommentsResult {} + +// USERS + +export interface GetUserMeResult extends User {} + +// VERSION HISTORY + +export interface GetVersionsResult { + versions: Version[] +} + +// PROJECTS + +export interface GetTeamProjectsResult { + projects: Project[] +} + +export interface GetProjectFilesResult { + files: ProjectFile[] +} + +// COMPONENTS AND STYLES + +export interface GetTeamComponentsResult { + status?: number + error?: Boolean + meta?: { + components: ComponentMetadata[] + cursor: { [x: string]: number } + } +} + +export interface GetFileComponentsResult { + status?: number + error?: Boolean + meta?: { + components: ComponentMetadata[] + } +} + +export interface GetComponentResult { + status?: number + error?: Boolean + meta?: ComponentMetadata +} + +export interface GetTeamComponentSetsResult { + component_sets: ComponentSetMetadata[] + cursor: { [x: string]: number } +} + +export interface GetFileComponentSetsResult { + status?: number + error?: Boolean + meta?: { + component_sets: ComponentSetMetadata[] + cursor: { [x: string]: number } + } +} + +export interface GetComponentSetResult { + status?: number + error?: Boolean + meta?: ComponentSetMetadata +} + +export interface GetTeamStylesResult { + status?: number + error?: Boolean + meta?: { + styles: StyleMetadata[] + cursor: { [x: string]: number } + } +} + +export interface GetFileStylesResult { + status?: number + error?: Boolean + meta?: { + styles: StyleMetadata[] + } +} + +export interface GetStyleResult { + status?: number + error?: Boolean + meta?: StyleMetadata +} diff --git a/packages/design-system/toolbox/src/figma/utils.ts b/packages/design-system/toolbox/src/figma/utils.ts new file mode 100644 index 0000000000000..018e396e4a19c --- /dev/null +++ b/packages/design-system/toolbox/src/figma/utils.ts @@ -0,0 +1,25 @@ +import { Node, NodeType } from "./types" + +/** + * Checks if a node is of a certain type. + */ +export function isNodeType>( + node: Node, + type: NType +): node is R { + return node.type === type +} + +/** + * Encodes an object into a query string. + */ +export function encodeQuery(obj: any): string { + if (!obj) { + return "" + } + + return Object.entries(obj) + .map(([k, v]) => k && v && `${k}=${encodeURIComponent(v as any)}`) + .filter(Boolean) + .join("&") +} diff --git a/packages/design-system/toolbox/src/index.ts b/packages/design-system/toolbox/src/index.ts new file mode 100644 index 0000000000000..fd04d6859b570 --- /dev/null +++ b/packages/design-system/toolbox/src/index.ts @@ -0,0 +1,8 @@ +import { createCli } from "./create-cli" + +createCli() + .then(async (cli) => cli.parseAsync(process.argv)) + .catch((err) => { + console.error(err) + process.exit(1) + }) diff --git a/packages/design-system/toolbox/src/logger.ts b/packages/design-system/toolbox/src/logger.ts new file mode 100644 index 0000000000000..721717d54529c --- /dev/null +++ b/packages/design-system/toolbox/src/logger.ts @@ -0,0 +1,18 @@ +import colors from "picocolors" + +const PREFIX = colors.magenta("[toolbox]") + +export const logger = { + info: (message: string) => { + console.log(`${PREFIX} ${colors.gray(message)}`) + }, + success: (message: string) => { + console.log(`${PREFIX} ${colors.green(message)}`) + }, + warn: (message: string) => { + console.log(`${PREFIX} ${colors.yellow(message)}`) + }, + error: (message: string) => { + console.log(`${PREFIX} ${colors.red(message)}`) + }, +} diff --git a/packages/design-system/toolbox/src/templates/icon-templates.ts b/packages/design-system/toolbox/src/templates/icon-templates.ts new file mode 100644 index 0000000000000..82d712da66b3e --- /dev/null +++ b/packages/design-system/toolbox/src/templates/icon-templates.ts @@ -0,0 +1,39 @@ +export const defaultTemplate = ( + { jsx, componentName }: { jsx: any; componentName: string }, + { tpl }: { tpl: any } +) => { + return tpl` + import * as React from "react" + + import type { IconProps } from "../types" + + const ${componentName} = React.forwardRef(({ color = "currentColor", ...props }, ref) => { + return ( + ${jsx} + ) + }) + ${componentName}.displayName = "${componentName}" + + export default ${componentName} + ` +} + +export const fixedTemplate = ( + { jsx, componentName }: { jsx: any; componentName: string }, + { tpl }: { tpl: any } +) => { + return tpl` + import * as React from "react" + + import type { IconProps } from "../types" + + const ${componentName} = React.forwardRef>((props, ref) => { + return ( + ${jsx} + ) + }) + ${componentName}.displayName = "${componentName}" + + export default ${componentName} + ` +} diff --git a/packages/design-system/toolbox/src/templates/index.ts b/packages/design-system/toolbox/src/templates/index.ts new file mode 100644 index 0000000000000..6051b8584870e --- /dev/null +++ b/packages/design-system/toolbox/src/templates/index.ts @@ -0,0 +1 @@ +export * from "./icon-templates" diff --git a/packages/design-system/toolbox/src/transformers/index.ts b/packages/design-system/toolbox/src/transformers/index.ts new file mode 100644 index 0000000000000..01c7780ab7c69 --- /dev/null +++ b/packages/design-system/toolbox/src/transformers/index.ts @@ -0,0 +1 @@ +export * from "./transform-svg" diff --git a/packages/design-system/toolbox/src/transformers/transform-svg.ts b/packages/design-system/toolbox/src/transformers/transform-svg.ts new file mode 100644 index 0000000000000..9113806b81ea2 --- /dev/null +++ b/packages/design-system/toolbox/src/transformers/transform-svg.ts @@ -0,0 +1,56 @@ +import { transform } from "@svgr/core" +import jsx from "@svgr/plugin-jsx" +import prettier from "@svgr/plugin-prettier" +import svgo from "@svgr/plugin-svgo" + +import { defaultTemplate, fixedTemplate } from "@/templates" + +type TransformArgs = { + code: string + componentName: string + fixed?: boolean +} + +export async function transformSvg({ + code, + componentName, + fixed = false, +}: TransformArgs) { + return await transform( + code, + { + typescript: true, + replaceAttrValues: !fixed + ? { + "#030712": "{color}", + } + : undefined, + svgProps: { + ref: "{ref}", + }, + expandProps: "end", + plugins: [svgo, jsx, prettier], + jsxRuntime: "classic", + prettierConfig: { + semi: false, + parser: "typescript", + }, + svgoConfig: { + plugins: [ + { + name: "preset-default", + params: { + overrides: { + removeTitle: false, + }, + }, + }, + ], + }, + template: fixed ? fixedTemplate : defaultTemplate, + }, + { + componentName, + } + ) +} diff --git a/packages/design-system/toolbox/tsconfig.json b/packages/design-system/toolbox/tsconfig.json new file mode 100644 index 0000000000000..8e25c7cb1c408 --- /dev/null +++ b/packages/design-system/toolbox/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "composite": false, + "declaration": true, + "declarationMap": true, + "inlineSources": false, + "isolatedModules": true, + "moduleResolution": "node", + "noUnusedLocals": false, + "noUnusedParameters": false, + "preserveWatchOutput": true, + "skipLibCheck": true, + "strict": true, + "allowJs": true, + "checkJs": false, + "baseUrl": ".", + "resolveJsonModule": true, + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src"] +} diff --git a/packages/design-system/toolbox/tsup.config.ts b/packages/design-system/toolbox/tsup.config.ts new file mode 100644 index 0000000000000..30e47a6254e99 --- /dev/null +++ b/packages/design-system/toolbox/tsup.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from "tsup" + +export default defineConfig({ + entry: ["src/index.ts"], + format: ["esm", "cjs"], + dts: true, + sourcemap: true, + outDir: "dist", + clean: true, +}) diff --git a/packages/design-system/ui-preset/.env.template b/packages/design-system/ui-preset/.env.template new file mode 100644 index 0000000000000..3ebc5cc9d147a --- /dev/null +++ b/packages/design-system/ui-preset/.env.template @@ -0,0 +1,2 @@ +# Docs: https://www.figma.com/developers/api#access-tokens +FIGMA_TOKEN= \ No newline at end of file diff --git a/packages/design-system/ui-preset/CHANGELOG.md b/packages/design-system/ui-preset/CHANGELOG.md new file mode 100644 index 0000000000000..37c9685e04281 --- /dev/null +++ b/packages/design-system/ui-preset/CHANGELOG.md @@ -0,0 +1,79 @@ +# @medusajs/ui-preset + +## 1.0.2 + +### Patch Changes + +- 035fa72: feat(ui,ui-preset): Release 2.1.0 + + ## `@medusajs/ui` + + - The styling of buttons, inputs, and the CommandBar has been adjusted to have a more consistent look and feel. + - Fixed an issue that caused DropdownMenu.Content to overflow the viewport. + - Fixed an issue with the DatePicker component where deleting a time segment would throw an error. + - The Text component now accepts a `leading` prop to adjust the line height. It can be set to `normal` (default) or `compact`. This change in the API is fully backwards compatible. + - Adds a new subcomponent to RadioGroup called RadioGroup.ChoiceBox. This component wraps the RadioGroup.Item component with a mandatory label and description. + + ## `@medusajs/ui-preset` + + - Updated several colors, shadows, and gradient effects. + + ## `@medusajs/icons` + + - Introduces 6 new icons: QuestionMark, SparklesMiniSolid, SparklesMini, ThumbDown, ThumbUp, and UserCircleMini. + - There have been slight adjustments made to ArrowPathMini, EllipseBlueSolid, EllipseGreenSolid, EllipseGreySolid, EllipseOrangeSolid, EllipsePurpleSolid, and EllipseRedSolid. + +## 1.0.1 + +### Patch Changes + +- ef98084: feat(ui,icons,ui-preset): Update to Medusa UI, including new components, icons, and preset styles. + + # Changes in `@medusajs/ui` + + ## New components + + - `IconButton` - A button that only contains an icon. + - `IconBadge` - A badge that only contains an icon. + - `StatusBadge` - A badge component specifically designed to be used for displaying statuses. + - `Tabs` - A tab component that can be used to switch between different views. + - `ProgressTabs` - A tab component specifically designed to be used for building multi-step tasks. + - `ProgressAccordion` - An accordion component specifically designed to be used for building multi-step tasks. + - `CurrencyInput` - An input component that can be used to input currency values. + - `CommandBar` - A component that can be used to display a list of keyboard commands omn the screen. + - `CurrencyInput` - An input component that can be used to input currency values, such as prices. + + ## Breaking changes + + Several components have been reorganized to streamline their API. The following components have breaking changes: + + - Button - The `format` property has been removed. To create a Icon only button, use the new `IconButton` component. + - Badge - The `format` property has been removed. To create a Icon only badge, use the new `IconBadge` component. The border radius of the component is now controlled using the new `rounded` property. + - CodeBlock - The `hideLineNumbers` property has been moved to the `snippets` property. This allows users to control the visibility of line numbers on a per snippet basis. + + ## Other changes + + - The `z-index`'s of all components have been cleaned up to to make stacking portalled components easier. + - `Table.Pagination` has been tweaked to ensure that it displays the correct number of pages when there is no data. + - `Calendar` has been tweaked to prevent clicking a date from submitting any forms that precede it in the DOM. + + # Changes in `@medusajs/icons` + + ## New icons + + - `X` + - `AcademicCap` + - `Figma` + - `Photo` + - `PuzzleSolid` + - `Text` + + # Changes in `@medusajs/ui-preset` + + Minor tweaks to colors, typography, and animations. + +## 1.0.0 + +### Major Changes + +- 8d31ce6: Release of the Medusa UI design system, includes three new packages: `@medusajs/ui` a set of React components, hooks, and utils; `@medusajs/icons` a set of React icons; `@medusajs/ui-preset` a Tailwind CSS preset containing Medusa UI design tokens. diff --git a/packages/design-system/ui-preset/LICENSE b/packages/design-system/ui-preset/LICENSE new file mode 100644 index 0000000000000..422b1da232869 --- /dev/null +++ b/packages/design-system/ui-preset/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2023 Medusajs + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/design-system/ui-preset/README.md b/packages/design-system/ui-preset/README.md new file mode 100644 index 0000000000000..2ea97a5fc4207 --- /dev/null +++ b/packages/design-system/ui-preset/README.md @@ -0,0 +1,36 @@ +

+ + + + + Medusa logo + + +

+

+ Medusa UI +

+ +

+ Documentation | + Website +

+ +

+ Medusa's design system tokens. +

+

+ + Medusa is released under the MIT license. + + + Discord Chat + + + Follow @medusajs + +

+ +## Note + +This package is auto-generated, and requires a Figma token associated with the Medusa Figma organization. If you are a not a Medusa team member, you will not be able to make changes to this package. If you discover any issues please open an issue instead of a PR. diff --git a/packages/design-system/ui-preset/package.json b/packages/design-system/ui-preset/package.json new file mode 100644 index 0000000000000..80924faddd168 --- /dev/null +++ b/packages/design-system/ui-preset/package.json @@ -0,0 +1,41 @@ +{ + "name": "@medusajs/ui-preset", + "version": "1.0.2", + "description": "Medusa UI preset", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/medusajs/medusa.git", + "directory": "packages/design-system/ui-preset" + }, + "author": "Kasper Kristensen ", + "exports": { + ".": { + "import": "./dist/index.mjs", + "require": "./dist/index.js" + }, + "./package.json": "./package.json" + }, + "types": "./dist/index.d.ts", + "main": "./dist/index.js", + "scripts": { + "build": "tsup", + "generate": "toolbox tokens -o './src/theme'" + }, + "dependencies": { + "@tailwindcss/forms": "^0.5.3", + "tailwindcss-animate": "^1.0.6" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0" + }, + "devDependencies": { + "@medusajs/toolbox": "^0.0.1", + "tailwindcss": "^3.3.2", + "tsup": "^7.1.0", + "typescript": "^5.1.6" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/design-system/ui-preset/src/constants.ts b/packages/design-system/ui-preset/src/constants.ts new file mode 100644 index 0000000000000..6d67ce25986ab --- /dev/null +++ b/packages/design-system/ui-preset/src/constants.ts @@ -0,0 +1,4 @@ +import { fontFamily } from "tailwindcss/defaultTheme" + +export const FONT_FAMILY_SANS = ["Inter", ...fontFamily.sans] +export const FONT_FAMILY_MONO = ["Roboto Mono", ...fontFamily.mono] diff --git a/packages/design-system/ui-preset/src/index.ts b/packages/design-system/ui-preset/src/index.ts new file mode 100644 index 0000000000000..c00590f2dec99 --- /dev/null +++ b/packages/design-system/ui-preset/src/index.ts @@ -0,0 +1,3 @@ +import { preset } from "./preset" + +module.exports = preset diff --git a/packages/design-system/ui-preset/src/plugin.ts b/packages/design-system/ui-preset/src/plugin.ts new file mode 100644 index 0000000000000..298be62a6fc95 --- /dev/null +++ b/packages/design-system/ui-preset/src/plugin.ts @@ -0,0 +1,69 @@ +import plugin from "tailwindcss/plugin" +import { FONT_FAMILY_MONO, FONT_FAMILY_SANS } from "./constants" +import { theme } from "./theme/extension/theme" +import { colors } from "./theme/tokens/colors" +import { components } from "./theme/tokens/components" +import { effects } from "./theme/tokens/effects" +import { typography } from "./theme/tokens/typography" + +export default plugin( + function medusaUi({ addBase, addComponents, config }) { + const [darkMode, className = ".dark"] = ([] as string[]).concat( + config("darkMode", "media") + ) + + addBase({ + "*": { + borderColor: "var(--border-base)", + }, + }) + + addComponents(typography) + + addBase({ + ":root": { ...colors.light, ...effects.light }, + ...components.light, + }) + + if (darkMode === "class") { + addBase({ + [className]: { ...colors.dark, ...effects.dark }, + }) + } else { + addBase({ + "@media (prefers-color-scheme: dark)": { + ":root": { ...colors.dark, ...effects.dark }, + ...components.dark, + }, + }) + } + }, + { + theme: { + extend: { + ...theme.extend, + fontFamily: { + sans: FONT_FAMILY_SANS, + mono: FONT_FAMILY_MONO, + }, + transitionProperty: { + fg: "color, background-color, border-color, box-shadow, opacity", + }, + keyframes: { + "accordion-down": { + from: { height: "0px" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0px" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + } +) diff --git a/packages/design-system/ui-preset/src/preset.ts b/packages/design-system/ui-preset/src/preset.ts new file mode 100644 index 0000000000000..ffb28022a680e --- /dev/null +++ b/packages/design-system/ui-preset/src/preset.ts @@ -0,0 +1,10 @@ +import type { Config } from "tailwindcss" + +import plugin from "./plugin" + +const preset = { + content: [], + plugins: [plugin, require("tailwindcss-animate")] as Config["plugins"], +} satisfies Config + +export { preset } diff --git a/packages/design-system/ui-preset/src/theme/extension/theme.ts b/packages/design-system/ui-preset/src/theme/extension/theme.ts new file mode 100644 index 0000000000000..8b0a234e16780 --- /dev/null +++ b/packages/design-system/ui-preset/src/theme/extension/theme.ts @@ -0,0 +1,335 @@ +export const theme = { + "extend": { + "colors": { + "ui": { + "button": { + "inverted": { + "DEFAULT": "var(--button-inverted)", + "pressed": { + "DEFAULT": "var(--button-inverted-pressed)" + }, + "hover": { + "DEFAULT": "var(--button-inverted-hover)" + } + }, + "transparent": { + "DEFAULT": "var(--button-transparent)", + "hover": { + "DEFAULT": "var(--button-transparent-hover)" + }, + "pressed": { + "DEFAULT": "var(--button-transparent-pressed)" + } + }, + "neutral": { + "pressed": { + "DEFAULT": "var(--button-neutral-pressed)" + }, + "DEFAULT": "var(--button-neutral)", + "hover": { + "DEFAULT": "var(--button-neutral-hover)" + } + }, + "danger": { + "DEFAULT": "var(--button-danger)", + "pressed": { + "DEFAULT": "var(--button-danger-pressed)" + }, + "hover": { + "DEFAULT": "var(--button-danger-hover)" + } + } + }, + "code": { + "text": { + "base": { + "DEFAULT": "var(--code-text-base)" + }, + "subtle": { + "DEFAULT": "var(--code-text-subtle)" + } + }, + "bg": { + "base": { + "DEFAULT": "var(--code-bg-base)" + }, + "header": { + "DEFAULT": "var(--code-bg-header)" + } + }, + "border": { + "DEFAULT": "var(--code-border)" + }, + "icon": { + "DEFAULT": "var(--code-icon)" + } + }, + "tag": { + "green": { + "bg": { + "DEFAULT": "var(--tag-green-bg)", + "hover": { + "DEFAULT": "var(--tag-green-bg-hover)" + } + }, + "icon": { + "DEFAULT": "var(--tag-green-icon)" + }, + "border": { + "DEFAULT": "var(--tag-green-border)" + }, + "text": { + "DEFAULT": "var(--tag-green-text)" + } + }, + "neutral": { + "bg": { + "DEFAULT": "var(--tag-neutral-bg)", + "hover": { + "DEFAULT": "var(--tag-neutral-bg-hover)" + } + }, + "border": { + "DEFAULT": "var(--tag-neutral-border)" + }, + "text": { + "DEFAULT": "var(--tag-neutral-text)" + }, + "icon": { + "DEFAULT": "var(--tag-neutral-icon)" + } + }, + "red": { + "bg": { + "DEFAULT": "var(--tag-red-bg)", + "hover": { + "DEFAULT": "var(--tag-red-bg-hover)" + } + }, + "icon": { + "DEFAULT": "var(--tag-red-icon)" + }, + "text": { + "DEFAULT": "var(--tag-red-text)" + }, + "border": { + "DEFAULT": "var(--tag-red-border)" + } + }, + "orange": { + "bg": { + "DEFAULT": "var(--tag-orange-bg)", + "hover": { + "DEFAULT": "var(--tag-orange-bg-hover)" + } + }, + "icon": { + "DEFAULT": "var(--tag-orange-icon)" + }, + "text": { + "DEFAULT": "var(--tag-orange-text)" + }, + "border": { + "DEFAULT": "var(--tag-orange-border)" + } + }, + "purple": { + "bg": { + "hover": { + "DEFAULT": "var(--tag-purple-bg-hover)" + }, + "DEFAULT": "var(--tag-purple-bg)" + }, + "text": { + "DEFAULT": "var(--tag-purple-text)" + }, + "icon": { + "DEFAULT": "var(--tag-purple-icon)" + }, + "border": { + "DEFAULT": "var(--tag-purple-border)" + } + }, + "blue": { + "border": { + "DEFAULT": "var(--tag-blue-border)" + }, + "bg": { + "DEFAULT": "var(--tag-blue-bg)", + "hover": { + "DEFAULT": "var(--tag-blue-bg-hover)" + } + }, + "icon": { + "DEFAULT": "var(--tag-blue-icon)" + }, + "text": { + "DEFAULT": "var(--tag-blue-text)" + } + } + }, + "border": { + "strong": { + "DEFAULT": "var(--border-strong)" + }, + "interactive": { + "DEFAULT": "var(--border-interactive)" + }, + "base": { + "DEFAULT": "var(--border-base)" + }, + "error": { + "DEFAULT": "var(--border-error)" + }, + "loud": { + "DEFAULT": "var(--border-loud)" + }, + "danger": { + "DEFAULT": "var(--border-danger)" + }, + "transparent": { + "DEFAULT": "var(--border-transparent)" + } + }, + "bg": { + "highlight": { + "DEFAULT": "var(--bg-highlight)", + "hover": { + "DEFAULT": "var(--bg-highlight-hover)" + } + }, + "base": { + "hover": { + "DEFAULT": "var(--bg-base-hover)" + }, + "DEFAULT": "var(--bg-base)", + "pressed": { + "DEFAULT": "var(--bg-base-pressed)" + } + }, + "subtle": { + "DEFAULT": "var(--bg-subtle)", + "pressed": { + "DEFAULT": "var(--bg-subtle-pressed)" + }, + "hover": { + "DEFAULT": "var(--bg-subtle-hover)" + } + }, + "component": { + "DEFAULT": "var(--bg-component)" + }, + "overlay": { + "DEFAULT": "var(--bg-overlay)" + }, + "switch": { + "off": { + "DEFAULT": "var(--bg-switch-off)", + "hover": { + "DEFAULT": "var(--bg-switch-off-hover)" + } + } + }, + "field": { + "hover": { + "DEFAULT": "var(--bg-field-hover)" + }, + "DEFAULT": "var(--bg-field)" + }, + "interactive": { + "DEFAULT": "var(--bg-interactive)" + }, + "disabled": { + "DEFAULT": "var(--bg-disabled)" + } + }, + "fg": { + "on": { + "inverted": { + "DEFAULT": "var(--fg-on-inverted)" + }, + "color": { + "DEFAULT": "var(--fg-on-color)" + } + }, + "interactive": { + "hover": { + "DEFAULT": "var(--fg-interactive-hover)" + }, + "DEFAULT": "var(--fg-interactive)" + }, + "error": { + "DEFAULT": "var(--fg-error)" + }, + "base": { + "DEFAULT": "var(--fg-base)" + }, + "disabled": { + "DEFAULT": "var(--fg-disabled)" + }, + "subtle": { + "DEFAULT": "var(--fg-subtle)" + }, + "muted": { + "DEFAULT": "var(--fg-muted)" + } + }, + "contrast": { + "bg": { + "subtle": { + "DEFAULT": "var(--contrast-bg-subtle)" + }, + "base": { + "DEFAULT": "var(--contrast-bg-base)", + "pressed": { + "DEFAULT": "var(--contrast-bg-base-pressed)" + }, + "hover": { + "DEFAULT": "var(--contrast-bg-base-hover)" + } + }, + "highlight": { + "DEFAULT": "var(--contrast-bg-highlight)" + } + }, + "border": { + "base": { + "DEFAULT": "var(--contrast-border-base)" + } + }, + "fg": { + "primary": { + "DEFAULT": "var(--contrast-fg-primary)" + }, + "secondary": { + "DEFAULT": "var(--contrast-fg-secondary)" + } + } + } + } + }, + "boxShadow": { + "elevation-card-hover": "var(--elevation-card-hover)", + "elevation-modal": "var(--elevation-modal)", + "buttons-inverted": "var(--buttons-inverted)", + "elevation-card-rest": "var(--elevation-card-rest)", + "buttons-neutral-focus": "var(--buttons-neutral-focus)", + "borders-interactive-with-active": "var(--borders-interactive-with-active)", + "buttons-danger-focus": "var(--buttons-danger-focus)", + "borders-base": "var(--borders-base)", + "buttons-danger": "var(--buttons-danger)", + "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)", + "details-switch-handle": "var(--details-switch-handle)", + "buttons-neutral": "var(--buttons-neutral)", + "borders-interactive-with-focus": "var(--borders-interactive-with-focus)", + "details-switch-background-focus": "var(--details-switch-background-focus)", + "borders-error": "var(--borders-error)", + "buttons-inverted-focus": "var(--buttons-inverted-focus)", + "borders-focus": "var(--borders-focus)", + "details-switch-background": "var(--details-switch-background)", + "elevation-tooltip": "var(--elevation-tooltip)", + "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)", + "elevation-flyout": "var(--elevation-flyout)" + } + } +} \ No newline at end of file diff --git a/packages/design-system/ui-preset/src/theme/tokens/colors.ts b/packages/design-system/ui-preset/src/theme/tokens/colors.ts new file mode 100644 index 0000000000000..3dc9aa6c25637 --- /dev/null +++ b/packages/design-system/ui-preset/src/theme/tokens/colors.ts @@ -0,0 +1,218 @@ +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)", + "--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)", + "--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)", + "--bg-highlight": "rgba(23, 37, 84, 1)", + "--fg-interactive-hover": "rgba(59, 130, 246, 1)", + "--fg-error": "rgba(251, 113, 133, 1)", + "--bg-interactive": "rgba(96, 165, 250, 1)", + "--border-error": "rgba(244, 63, 94, 1)", + "--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)", + "--fg-interactive": "rgba(96, 165, 250, 1)", + "--bg-overlay": "rgba(24, 24, 26, 0.7)", + "--fg-on-inverted": "rgba(24, 24, 26, 1)", + "--tag-red-border": "rgba(136, 19, 55, 1)", + "--tag-red-bg": "rgba(76, 5, 25, 1)", + "--button-transparent-hover": "rgba(39, 40, 45, 1)", + "--tag-blue-text": "rgba(96, 165, 250, 1)", + "--tag-orange-text": "rgba(251, 191, 36, 1)", + "--tag-green-text": "rgba(52, 211, 153, 1)", + "--tag-neutral-bg": "rgba(46, 48, 53, 1)", + "--tag-orange-border": "rgba(120, 53, 15, 1)", + "--tag-green-border": "rgba(6, 78, 59, 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-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)", + "--tag-blue-bg": "rgba(23, 37, 84, 1)", + "--tag-green-bg": "rgba(2, 44, 34, 1)", + "--tag-blue-border": "rgba(30, 58, 138, 1)", + "--tag-purple-border": "rgba(76, 29, 149, 1)", + "--tag-blue-bg-hover": "rgba(30, 42, 138, 1)", + "--tag-orange-bg": "rgba(69, 26, 3, 1)", + "--tag-orange-bg-hover": "rgba(120, 53, 15, 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)", + "--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-purple-icon": "rgba(139, 92, 246, 1)", + "--tag-purple-text": "rgba(167, 139, 250, 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)", + "--contrast-fg-primary": "rgba(28, 32, 36, 1)", + "--contrast-bg-base": "rgba(228, 228, 233, 1)", + "--contrast-fg-secondary": "rgba(96, 100, 108, 1)", + "--contrast-border-base": "rgba(185, 187, 198, 1)", + "--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)", + "--contrast-bg-subtle": "rgba(211, 212, 219, 1)", + "--contrast-bg-base-hover": "rgba(235, 235, 239, 1)", + "--contrast-bg-highlight": "rgba(242, 242, 245, 1)", + "--button-neutral-pressed": "rgba(60, 63, 68, 1)", + "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)", + "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)", + "--button-inverted-pressed": "rgba(237, 238, 240, 1)", + "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 0)", + "--button-inverted-pressed-gradient-to": "rgba(24, 24, 26, 1)", + "--button-neutral-hover": "rgba(53, 55, 60, 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(255, 255, 255, 1)", + "--button-inverted-hover-gradient-from": "rgba(24, 24, 26, 0)", + "--button-inverted-hover-gradient-to": "rgba(24, 24, 26, 1)", + "--button-danger-pressed": "rgba(225, 29, 72, 1)", + "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)", + "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)", + "--button-danger-hover": "rgba(190, 18, 60, 1)", + "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)", + "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)" + }, + "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)", + "--code-text-base": "rgba(249, 250, 251, 1)", + "--tag-green-bg": "rgba(209, 250, 229, 1)", + "--border-strong": "rgba(209, 213, 219, 1)", + "--border-interactive": "rgba(59, 130, 246, 1)", + "--bg-highlight": "rgba(239, 246, 255, 1)", + "--bg-base-hover": "rgba(249, 250, 251, 1)", + "--tag-neutral-bg": "rgba(243, 244, 246, 1)", + "--tag-red-bg": "rgba(255, 228, 230, 1)", + "--tag-orange-bg": "rgba(254, 244, 199, 1)", + "--bg-base": "rgba(255, 255, 255, 1)", + "--border-base": "rgba(229, 231, 235, 1)", + "--tag-green-icon": "rgba(5, 150, 105, 1)", + "--tag-purple-bg-hover": "rgba(221, 214, 254, 1)", + "--tag-blue-border": "rgba(191, 219, 254, 1)", + "--tag-orange-icon": "rgba(217, 119, 6, 1)", + "--tag-purple-bg": "rgba(237, 233, 254, 1)", + "--bg-subtle": "rgba(249, 250, 251, 1)", + "--tag-purple-text": "rgba(109, 40, 217, 1)", + "--tag-blue-bg": "rgba(219, 234, 254, 1)", + "--tag-blue-icon": "rgba(37, 99, 235, 1)", + "--border-error": "rgba(225, 29, 72, 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-transparent": "rgba(255, 255, 255, 0)", + "--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)", + "--fg-base": "rgba(3, 7, 18, 1)", + "--fg-disabled": "rgba(209, 213, 219, 1)", + "--bg-subtle-pressed": "rgba(229, 231, 235, 1)", + "--fg-subtle": "rgba(75, 85, 99, 1)", + "--fg-muted": "rgba(156, 163, 175, 1)", + "--bg-base-pressed": "rgba(243, 244, 246, 1)", + "--bg-subtle-hover": "rgba(243, 244, 246, 1)", + "--tag-neutral-border": "rgba(229, 231, 235, 1)", + "--tag-green-bg-hover": "rgba(167, 243, 208, 1)", + "--tag-blue-bg-hover": "rgba(191, 219, 254, 1)", + "--tag-red-icon": "rgba(225, 29, 72, 1)", + "--tag-neutral-text": "rgba(75, 85, 99, 1)", + "--tag-red-bg-hover": "rgba(254, 205, 211, 1)", + "--tag-red-text": "rgba(190, 18, 60, 1)", + "--tag-purple-icon": "rgba(124, 58, 237, 1)", + "--tag-blue-text": "rgba(29, 78, 216, 1)", + "--tag-orange-bg-hover": "rgba(253, 230, 138, 1)", + "--tag-neutral-bg-hover": "rgba(229, 231, 235, 1)", + "--tag-purple-border": "rgba(221, 214, 254, 1)", + "--tag-orange-text": "rgba(180, 83, 9, 1)", + "--tag-neutral-icon": "rgba(107, 114, 128, 1)", + "--tag-orange-border": "rgba(253, 230, 138, 1)", + "--tag-red-border": "rgba(254, 205, 211, 1)", + "--tag-green-border": "rgba(167, 243, 208, 1)", + "--tag-green-text": "rgba(4, 120, 87, 1)", + "--button-transparent-hover": "rgba(249, 250, 251, 1)", + "--button-transparent-pressed": "rgba(243, 244, 246, 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-neutral-pressed": "rgba(243, 244, 246, 1)", + "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)", + "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)", + "--button-neutral": "rgba(255, 255, 255, 1)", + "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)", + "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)", + "--button-neutral-hover": "rgba(249, 250, 251, 1)", + "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)", + "--button-neutral-hover-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-inverted-pressed": "rgba(31, 41, 55, 1)", + "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)", + "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)", + "--button-danger-pressed": "rgba(159, 18, 57, 1)", + "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)", + "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)", + "--button-inverted-hover": "rgba(17, 24, 39, 1)", + "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)", + "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)", + "--button-danger-hover": "rgba(190, 18, 60, 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)", + "--contrast-bg-subtle": "rgba(46, 48, 53, 1)", + "--contrast-bg-base": "rgba(27, 27, 31, 1)", + "--contrast-border-base": "rgba(60, 63, 68, 1)", + "--contrast-fg-primary": "rgba(237, 238, 240, 1)", + "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)", + "--contrast-fg-secondary": "rgba(173, 177, 184, 1)", + "--contrast-bg-highlight": "rgba(53, 55, 60, 1)", + "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)" + } +} \ No newline at end of file diff --git a/packages/design-system/ui-preset/src/theme/tokens/components.ts b/packages/design-system/ui-preset/src/theme/tokens/components.ts new file mode 100644 index 0000000000000..e8577575fa215 --- /dev/null +++ b/packages/design-system/ui-preset/src/theme/tokens/components.ts @@ -0,0 +1,78 @@ +export const components = { + "dark": { + ".button-danger-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))", + "opacity": "10%" + }, + ".button-neutral-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))", + "opacity": "6%" + }, + ".button-inverted-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))", + "opacity": "12%" + }, + ".button-neutral-pressed-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))", + "opacity": "6%" + }, + ".button-inverted-pressed-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))", + "opacity": "12%" + }, + ".button-neutral-hover-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))", + "opacity": "6%" + }, + ".button-inverted-hover-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))", + "opacity": "12%" + }, + ".button-danger-pressed-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))", + "opacity": "10%" + }, + ".button-danger-hover-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))", + "opacity": "10%" + } + }, + "light": { + ".button-inverted-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))", + "opacity": "16%" + }, + ".button-neutral-pressed-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))", + "opacity": "3%" + }, + ".button-neutral-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))", + "opacity": "3%" + }, + ".button-neutral-hover-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))", + "opacity": "3%" + }, + ".button-danger-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))", + "opacity": "16%" + }, + ".button-inverted-pressed-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))", + "opacity": "16%" + }, + ".button-danger-pressed-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))", + "opacity": "16%" + }, + ".button-inverted-hover-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))", + "opacity": "16%" + }, + ".button-danger-hover-gradient": { + "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))", + "opacity": "16%" + } + } +} \ No newline at end of file diff --git a/packages/design-system/ui-preset/src/theme/tokens/effects.ts b/packages/design-system/ui-preset/src/theme/tokens/effects.ts new file mode 100644 index 0000000000000..0fc6f42044be3 --- /dev/null +++ b/packages/design-system/ui-preset/src/theme/tokens/effects.ts @@ -0,0 +1,48 @@ +export const effects = { + "dark": { + "--details-switch-background-focus": "0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)", + "--buttons-neutral-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)", + "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(46, 48, 53, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)", + "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)", + "--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)", + "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)", + "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1)", + "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)", + "--elevation-card-rest": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)", + "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)", + "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)", + "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.16), 0px 5px 4px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1)", + "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)", + "--borders-interactive-with-active": "0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25)", + "--buttons-inverted": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)", + "--buttons-danger": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.4)", + "--buttons-neutral": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)", + "--buttons-danger-focus": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)", + "--borders-base": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)", + "--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 4px rgba(225, 29, 72, 0.25)", + "--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)" + }, + "light": { + "--elevation-card-hover": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 8px 0px rgba(3, 7, 18, 0.1)", + "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 231, 235, 0.4) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)", + "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8)", + "--elevation-card-rest": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)", + "--buttons-neutral-focus": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)", + "--borders-interactive-with-active": "0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.2)", + "--buttons-danger-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 0.8), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)", + "--borders-base": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)", + "--buttons-danger": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 0.8)", + "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)", + "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.02), 0px 5px 4px 0px rgba(3, 7, 18, 0.02), 0px 3px 3px 0px rgba(3, 7, 18, 0.04), 0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 1px 0px rgba(3, 7, 18, 0.08)", + "--buttons-neutral": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)", + "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)", + "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)", + "--borders-error": "0px 0px 0px 1px rgba(225, 29, 72, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.15)", + "--buttons-inverted-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)", + "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)", + "--details-switch-background": "0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)", + "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)", + "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)", + "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)" + } +} \ No newline at end of file diff --git a/packages/design-system/ui-preset/src/theme/tokens/typography.ts b/packages/design-system/ui-preset/src/theme/tokens/typography.ts new file mode 100644 index 0000000000000..d1b21a1f0e0ee --- /dev/null +++ b/packages/design-system/ui-preset/src/theme/tokens/typography.ts @@ -0,0 +1,194 @@ +export const typography = { + ".h1-docs": { + "fontSize": "2rem", + "lineHeight": "2.75rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".h2-docs": { + "fontSize": "1.5rem", + "lineHeight": "2rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".h4-webs": { + "fontSize": "1.125rem", + "lineHeight": "1.75rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".h1-webs": { + "fontSize": "4.5rem", + "lineHeight": "5.5rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".h2-core": { + "fontSize": "1rem", + "lineHeight": "1.5rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".h2-webs": { + "fontSize": "2rem", + "lineHeight": "2.75rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".h3-docs": { + "fontSize": "1.125rem", + "lineHeight": "1.75rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".h3-webs": { + "fontSize": "1.5rem", + "lineHeight": "2rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".h1-core": { + "fontSize": "1.25rem", + "lineHeight": "2rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".h3-core": { + "fontSize": "0.875rem", + "lineHeight": "1.25rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-medium": { + "fontSize": "0.875rem", + "lineHeight": "1.5rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-large": { + "fontSize": "1rem", + "lineHeight": "1.75rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-medium-plus": { + "fontSize": "0.875rem", + "lineHeight": "1.5rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-compact-xsmall": { + "fontSize": "0.75rem", + "lineHeight": "1.25rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-compact-xsmall-plus": { + "fontSize": "0.75rem", + "lineHeight": "1.25rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-xlarge-plus": { + "fontSize": "1.125rem", + "lineHeight": "2rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-large-plus": { + "fontSize": "1rem", + "lineHeight": "1.75rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-xlarge": { + "fontSize": "1.125rem", + "lineHeight": "2rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-compact-large": { + "fontSize": "1rem", + "lineHeight": "1.25rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-compact-medium-plus": { + "fontSize": "0.875rem", + "lineHeight": "1.25rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-compact-small-plus": { + "fontSize": "0.8125rem", + "lineHeight": "1.25rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-compact-medium": { + "fontSize": "0.875rem", + "lineHeight": "1.25rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-compact-small": { + "fontSize": "0.8125rem", + "lineHeight": "1.25rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".code-body": { + "fontSize": "0.8125rem", + "lineHeight": "1.5rem", + "fontWeight": "400", + "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" + }, + ".code-label": { + "fontSize": "0.8125rem", + "lineHeight": "1.25rem", + "fontWeight": "400", + "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" + }, + ".txt-compact-xlarge-plus": { + "fontSize": "1.125rem", + "lineHeight": "1.25rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-xsmall-plus": { + "fontSize": "0.75rem", + "lineHeight": "1.25rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-compact-xlarge": { + "fontSize": "1.125rem", + "lineHeight": "1.25rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-small-plus": { + "fontSize": "0.8125rem", + "lineHeight": "1.375rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-xsmall": { + "fontSize": "0.75rem", + "lineHeight": "1.25rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-compact-large-plus": { + "fontSize": "1rem", + "lineHeight": "1.25rem", + "fontWeight": "500", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + }, + ".txt-small": { + "fontSize": "0.8125rem", + "lineHeight": "1.375rem", + "fontWeight": "400", + "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji" + } +} \ No newline at end of file diff --git a/packages/design-system/ui-preset/tsconfig.json b/packages/design-system/ui-preset/tsconfig.json new file mode 100644 index 0000000000000..8570038386b8d --- /dev/null +++ b/packages/design-system/ui-preset/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "composite": false, + "declaration": true, + "declarationMap": true, + "inlineSources": false, + "isolatedModules": true, + "moduleResolution": "node", + "noUnusedLocals": false, + "noUnusedParameters": false, + "preserveWatchOutput": true, + "skipLibCheck": true, + "strict": true, + "checkJs": false + }, + "include": ["src"], + "exclude": ["dist", "node_modules"] +} diff --git a/packages/design-system/ui-preset/tsup.config.ts b/packages/design-system/ui-preset/tsup.config.ts new file mode 100644 index 0000000000000..444db5e4494ec --- /dev/null +++ b/packages/design-system/ui-preset/tsup.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from "tsup" +import path from "path" + +export default defineConfig({ + entry: ["src/index.ts"], + format: ["cjs", "esm"], + tsconfig: path.resolve(__dirname, "tsconfig.json"), + dts: true, + clean: true, +}) diff --git a/packages/design-system/ui/.eslintignore b/packages/design-system/ui/.eslintignore new file mode 100644 index 0000000000000..c49733bca4dce --- /dev/null +++ b/packages/design-system/ui/.eslintignore @@ -0,0 +1,3 @@ +node_modules/* +**/dist +**/build \ No newline at end of file diff --git a/packages/design-system/ui/.gitignore b/packages/design-system/ui/.gitignore new file mode 100644 index 0000000000000..e985853ed84ac --- /dev/null +++ b/packages/design-system/ui/.gitignore @@ -0,0 +1 @@ +.vercel diff --git a/packages/design-system/ui/.storybook/main.ts b/packages/design-system/ui/.storybook/main.ts new file mode 100644 index 0000000000000..311d8e74aff56 --- /dev/null +++ b/packages/design-system/ui/.storybook/main.ts @@ -0,0 +1,29 @@ +import type { StorybookConfig } from "@storybook/react-vite" +import { mergeConfig } from "vite" +import turbosnap from "vite-plugin-turbosnap" + +const config: StorybookConfig = { + stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], + addons: [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions", + "@storybook/addon-styling", + ], + framework: { + name: "@storybook/react-vite", + options: {}, + }, + docs: { + autodocs: "tag", + }, + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: + configType === "PRODUCTION" + ? [turbosnap({ rootDir: config.root ?? process.cwd() })] + : [], + }) + }, +} +export default config diff --git a/packages/design-system/ui/.storybook/preview.tsx b/packages/design-system/ui/.storybook/preview.tsx new file mode 100644 index 0000000000000..10ede20700233 --- /dev/null +++ b/packages/design-system/ui/.storybook/preview.tsx @@ -0,0 +1,29 @@ +import { withThemeByDataAttribute } from "@storybook/addon-styling" +import type { Preview } from "@storybook/react" + +import "../src/main.css" + +export const decorators = [ + withThemeByDataAttribute({ + themes: { + Light: "light", + Dark: "dark", + }, + defaultTheme: "light", + attributeName: "data-mode", + }), +] + +const preview: Preview = { + parameters: { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + }, +} + +export default preview diff --git a/packages/design-system/ui/CHANGELOG.md b/packages/design-system/ui/CHANGELOG.md new file mode 100644 index 0000000000000..1aa9d8962fa0a --- /dev/null +++ b/packages/design-system/ui/CHANGELOG.md @@ -0,0 +1,115 @@ +# @medusajs/ui + +## 2.2.0 + +### Minor Changes + +- 7f58964: fix(ui): 2.2.0 + + # Changelog + + ## `@medusajs/ui` + + This minor release contains a few bug fixes and improvements, as well as a new primitive component. + + ### Fixes + + - Fixes an issue that was preventing the onChange event from firing for the `DatePicker` component when `showTimePicker` was false. + - Fixes an issue where the `DatePicker` component would fire the onChange event when clicking outside of the component. It now only fires the event when the "Apply" button is clicked. + + ### New Components + + - Adds a new `Popover` component. This component is a primitive component that can be used to create popovers. It shares much of the same styling as the `DropdownMenu` component, and can be used as a replacement when building highly customized dropdowns where the `DropdownMenu` component is not flexible enough. + +## 2.1.0 + +### Minor Changes + +- 035fa72: feat(ui,ui-preset): Release 2.1.0 + + ## `@medusajs/ui` + + - The styling of buttons, inputs, and the CommandBar has been adjusted to have a more consistent look and feel. + - Fixed an issue that caused DropdownMenu.Content to overflow the viewport. + - Fixed an issue with the DatePicker component where deleting a time segment would throw an error. + - The Text component now accepts a `leading` prop to adjust the line height. It can be set to `normal` (default) or `compact`. This change in the API is fully backwards compatible. + - Adds a new subcomponent to RadioGroup called RadioGroup.ChoiceBox. This component wraps the RadioGroup.Item component with a mandatory label and description. + + ## `@medusajs/ui-preset` + + - Updated several colors, shadows, and gradient effects. + + ## `@medusajs/icons` + + - Introduces 6 new icons: QuestionMark, SparklesMiniSolid, SparklesMini, ThumbDown, ThumbUp, and UserCircleMini. + - There have been slight adjustments made to ArrowPathMini, EllipseBlueSolid, EllipseGreenSolid, EllipseGreySolid, EllipseOrangeSolid, EllipsePurpleSolid, and EllipseRedSolid. + +### Patch Changes + +- Updated dependencies [035fa72] + - @medusajs/icons@1.1.0 + +## 2.0.0 + +### Major Changes + +- ef98084: feat(ui,icons,ui-preset): Update to Medusa UI, including new components, icons, and preset styles. + + # Changes in `@medusajs/ui` + + ## New components + + - `IconButton` - A button that only contains an icon. + - `IconBadge` - A badge that only contains an icon. + - `StatusBadge` - A badge component specifically designed to be used for displaying statuses. + - `Tabs` - A tab component that can be used to switch between different views. + - `ProgressTabs` - A tab component specifically designed to be used for building multi-step tasks. + - `ProgressAccordion` - An accordion component specifically designed to be used for building multi-step tasks. + - `CurrencyInput` - An input component that can be used to input currency values. + - `CommandBar` - A component that can be used to display a list of keyboard commands omn the screen. + - `CurrencyInput` - An input component that can be used to input currency values, such as prices. + + ## Breaking changes + + Several components have been reorganized to streamline their API. The following components have breaking changes: + + - Button - The `format` property has been removed. To create a Icon only button, use the new `IconButton` component. + - Badge - The `format` property has been removed. To create a Icon only badge, use the new `IconBadge` component. The border radius of the component is now controlled using the new `rounded` property. + - CodeBlock - The `hideLineNumbers` property has been moved to the `snippets` property. This allows users to control the visibility of line numbers on a per snippet basis. + + ## Other changes + + - The `z-index`'s of all components have been cleaned up to to make stacking portalled components easier. + - `Table.Pagination` has been tweaked to ensure that it displays the correct number of pages when there is no data. + - `Calendar` has been tweaked to prevent clicking a date from submitting any forms that precede it in the DOM. + + # Changes in `@medusajs/icons` + + ## New icons + + - `X` + - `AcademicCap` + - `Figma` + - `Photo` + - `PuzzleSolid` + - `Text` + + # Changes in `@medusajs/ui-preset` + + Minor tweaks to colors, typography, and animations. + +### Patch Changes + +- Updated dependencies [ef98084] + - @medusajs/icons@1.0.1 + +## 1.0.0 + +### Major Changes + +- 8d31ce6: Release of the Medusa UI design system, includes three new packages: `@medusajs/ui` a set of React components, hooks, and utils; `@medusajs/icons` a set of React icons; `@medusajs/ui-preset` a Tailwind CSS preset containing Medusa UI design tokens. + +### Patch Changes + +- Updated dependencies [8d31ce6] + - @medusajs/icons@1.0.0 diff --git a/packages/design-system/ui/CONTRIBUTING.md b/packages/design-system/ui/CONTRIBUTING.md new file mode 100644 index 0000000000000..cccd29af38407 --- /dev/null +++ b/packages/design-system/ui/CONTRIBUTING.md @@ -0,0 +1,62 @@ +# Contributing + +Thank you for considering contributing to Medusa! This document will outline how to submit changes to this repository and which conventions to follow. If you are ever in doubt about anything we encourage you to reach out either by submitting an issue here or reaching out [via Discord](https://discord.gg/xpCwq3Kfn8). + +If you're contributing to our documentation, make sure to also check out the [contribution guidelines on our documentation website](https://docs.medusajs.com/contribution-guidelines). + +### Important + +Our core maintainers prioritize pull requests (PRs) from within our organization. External contributions are regularly triaged, but not at any fixed cadence. It varies depending on how busy the maintainers are. This is applicable to all types of PRs, so we kindly ask for your patience. + +As this package contains components for the Medusa UI design system, we do not accept PRs for new components. If you have a suggestion for a new component, please open an issue instead and label it with `feature request`. + +If you, as a community contributor, wish to work on more extensive features, please reach out to CODEOWNERS instead of directly submitting a PR with all the changes. This approach saves us both time, especially if the PR is not accepted (which will be the case if it does not align with our roadmap), and helps us effectively review and evaluate your contribution if it is accepted. + +## Prerequisites + +- **You're familiar with GitHub Issues and Pull Requests** +- **You've read the [docs](https://docs.medusajs.com).** +- **You've setup a test project with `medusa new`** + +## Issues before PRs + +1. Before you start working on a change please make sure that there is an issue for what you will be working on. You can either find and [existing issue](https://github.com/medusajs/ui/issues) or [open a new issue](https://github.com/medusajs/ui/issues/new) if none exists. Doing this makes sure that others can contribute with thoughts or suggest alternatives, ultimately making sure that we only add changes that make + +2. When you are ready to start working on a change you should first [fork the Medusa UI repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) and [branch out](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository) from the `develop` branch. +3. Make your changes. +4. [Open a pull request towards the develop branch in the Medusa UI repo](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork). Within a couple of days a Medusa team member will review, comment and eventually approve your PR. + +## Workflow + +### Branches + +All changes should be part of a branch and submitted as a pull request - your branches should be prefixed with one of: + +- `fix/` for bug fixes +- `feat/` for features +- `docs/` for documentation changes + +### Commits + +Strive towards keeping your commits small and isolated - this helps the reviewer understand what is going on and makes it easier to process your requests. + +### Pull Requests + +Once your changes are ready you must submit your branch as a pull request. Your pull request should be opened against the `develop` branch in the main Medusa UI repo. + +In your PR's description you should follow the structure: + +- **What** - what changes are in this PR +- **Why** - why are these changes relevant +- **How** - how have the changes been implemented +- **Testing** - how has the changes been tested or how can the reviewer test the feature + +We highly encourage that you do a self-review prior to requesting a review. To do a self review click the review button in the top right corner, go through your code and annotate your changes. This makes it easier for the reviewer to process your PR. + +#### Merge Style + +All pull requests are squashed and merged. + +### Release + +The Medusa team will regularly create releases from the develop branch. diff --git a/packages/design-system/ui/LICENSE b/packages/design-system/ui/LICENSE new file mode 100644 index 0000000000000..422b1da232869 --- /dev/null +++ b/packages/design-system/ui/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2023 Medusajs + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/design-system/ui/README.md b/packages/design-system/ui/README.md new file mode 100644 index 0000000000000..a4f522926ad01 --- /dev/null +++ b/packages/design-system/ui/README.md @@ -0,0 +1,52 @@ +

+ + + + + Medusa logo + + +

+

+ Medusa UI +

+ +

+ Documentation | + Website +

+ +

+ Medusa's admin component library. +

+

+ + Medusa is released under the MIT license. + + + Discord Chat + + + Follow @medusajs + +

+ +## Getting Started + +### Installation + +```sh +yarn add @medusajs/medusa-ui +``` + +### Usage + +```jsx +import { Button } from "@medusajs/ui" + +const App = () => +``` + +## Documentation + +You can find the documentation for Medusa UI [on the documentation site](https://docs.medusajs.com/ui). diff --git a/packages/design-system/ui/package.json b/packages/design-system/ui/package.json new file mode 100644 index 0000000000000..3f46f5e4dcf3f --- /dev/null +++ b/packages/design-system/ui/package.json @@ -0,0 +1,129 @@ +{ + "name": "@medusajs/ui", + "version": "2.2.0", + "author": "Kasper Kristensen ", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/medusajs/medusa.git", + "directory": "packages/design-system/ui" + }, + "main": "./dist/cjs/index.js", + "types": "./dist/cjs/index.d.ts", + "module": "./dist/esm/index.js", + "exports": { + ".": { + "require": { + "types": "./dist/cjs/index.d.ts", + "default": "./dist/cjs/index.js" + }, + "import": { + "types": "./dist/esm/index.d.ts", + "default": "./dist/esm/index.js" + } + } + }, + "sideEffects": false, + "files": [ + "dist/**", + "styles.css" + ], + "scripts": { + "build": "yarn clean && yarn build:js:cjs && yarn build:js:esm", + "build:js:cjs": "tsc --project tsconfig.cjs.json && tsc-alias -p tsconfig.cjs.json", + "build:js:esm": "tsc --project tsconfig.esm.json && tsc-alias -p tsconfig.esm.json", + "clean": "rimraf dist", + "test": "vitest --run", + "test:watch": "vitest", + "test:coverage": "vitest --run --coverage", + "lint": "eslint \"**/*.ts*\"", + "storybook": "storybook dev -p 6006", + "storybook:build": "storybook build", + "typecheck": "tsc --noEmit" + }, + "devDependencies": { + "@medusajs/ui-preset": "^1.0.2", + "@storybook/addon-essentials": "^7.0.23", + "@storybook/addon-interactions": "^7.0.23", + "@storybook/addon-links": "^7.0.23", + "@storybook/addon-styling": "^1.3.6", + "@storybook/blocks": "^7.0.23", + "@storybook/react": "^7.0.23", + "@storybook/react-vite": "^7.0.23", + "@storybook/testing-library": "^0.0.14-next.2", + "@testing-library/dom": "^9.3.1", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^14.0.0", + "@testing-library/user-event": "^14.4.3", + "@types/jsdom": "^21.1.1", + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.0", + "@vitejs/plugin-react": "^4.0.1", + "@vitest/coverage-v8": "^0.32.2", + "autoprefixer": "^10.4.14", + "chromatic": "^6.20.0", + "eslint": "^7.32.0", + "eslint-plugin-storybook": "^0.6.12", + "jsdom": "^22.1.0", + "postcss": "^8.4.24", + "prop-types": "^15.8.1", + "react": "18.2.0", + "react-dom": "18.2.0", + "resize-observer-polyfill": "^1.5.1", + "rimraf": "^5.0.1", + "storybook": "^7.0.23", + "tailwindcss": "^3.3.2", + "tsc-alias": "^1.8.7", + "typescript": "^5.1.6", + "vite": "^4.3.9", + "vite-plugin-turbosnap": "^1.0.2", + "vitest": "^0.32.2" + }, + "dependencies": { + "@medusajs/icons": "^1.1.0", + "@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", + "@radix-ui/react-dialog": "^1.0.4", + "@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": "^2.0.0", + "@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", + "@react-stately/datepicker": "^3.5.0", + "class-variance-authority": "^0.6.1", + "clsx": "^1.2.1", + "copy-to-clipboard": "^3.3.3", + "date-fns": "^2.30.0", + "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" + }, + "browserslist": [ + "last 3 chrome versions", + "last 3 firefox versions", + "last 3 opera versions", + "last 3 edge versions", + "last 3 safari versions", + "last 3 chromeandroid versions", + "last 1 firefoxandroid versions", + "ios >= 13.4" + ], + "publishConfig": { + "access": "public" + } +} diff --git a/packages/design-system/ui/postcss.config.js b/packages/design-system/ui/postcss.config.js new file mode 100644 index 0000000000000..12a703d900da8 --- /dev/null +++ b/packages/design-system/ui/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/packages/design-system/ui/setup-test.ts b/packages/design-system/ui/setup-test.ts new file mode 100644 index 0000000000000..d6509146dba92 --- /dev/null +++ b/packages/design-system/ui/setup-test.ts @@ -0,0 +1,14 @@ +import "@testing-library/jest-dom" +import { JSDOM } from "jsdom" +import ResizeObserver from "resize-observer-polyfill" + +const { window } = new JSDOM() + +window.ResizeObserver = ResizeObserver +global.ResizeObserver = ResizeObserver +window.Element.prototype.scrollTo = () => { + // no-op +} +window.requestAnimationFrame = (cb) => setTimeout(cb, 1000 / 60) + +Object.assign(global, { window, document: window.document }) diff --git a/packages/design-system/ui/src/components/avatar/avatar.stories.tsx b/packages/design-system/ui/src/components/avatar/avatar.stories.tsx new file mode 100644 index 0000000000000..6da2ad6271915 --- /dev/null +++ b/packages/design-system/ui/src/components/avatar/avatar.stories.tsx @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Avatar } from "./avatar" + +const meta: Meta = { + title: "Components/Avatar", + component: Avatar, + argTypes: { + src: { + control: { + type: "text", + }, + }, + fallback: { + control: { + type: "text", + }, + }, + variant: { + control: { + type: "select", + options: ["rounded", "squared"], + }, + }, + size: { + control: { + type: "select", + options: ["default", "large"], + }, + }, + }, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const WithImage: Story = { + args: { + src: "https://avatars.githubusercontent.com/u/10656202?v=4", + fallback: "J", + }, +} + +export const WithFallback: Story = { + args: { + fallback: "J", + }, +} diff --git a/packages/design-system/ui/src/components/avatar/avatar.tsx b/packages/design-system/ui/src/components/avatar/avatar.tsx new file mode 100644 index 0000000000000..3f34c55a528ca --- /dev/null +++ b/packages/design-system/ui/src/components/avatar/avatar.tsx @@ -0,0 +1,90 @@ +"use client" + +import * as Primitives from "@radix-ui/react-avatar" +import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const avatarVariants = cva( + "border-ui-border-strong flex shrink-0 items-center justify-center overflow-hidden border", + { + variants: { + variant: { + squared: "rounded-lg", + rounded: "rounded-full", + }, + size: { + base: "h-8 w-8", + large: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "rounded", + size: "base", + }, + } +) + +const innerVariants = cva("aspect-square object-cover object-center", { + variants: { + variant: { + squared: "rounded-lg", + rounded: "rounded-full", + }, + size: { + base: "txt-compact-small-plus h-6 w-6", + large: "txt-compact-medium-plus h-8 w-8", + }, + }, + defaultVariants: { + variant: "rounded", + size: "base", + }, +}) + +interface AvatarProps + extends Omit< + React.ComponentPropsWithoutRef, + "asChild" | "children" | "size" + >, + VariantProps { + src?: string + fallback: string +} + +const Avatar = React.forwardRef< + React.ElementRef, + AvatarProps +>( + ( + { src, fallback, variant = "rounded", size = "base", className, ...props }, + ref + ) => { + return ( + + {src && ( + + )} + + {fallback} + + + ) + } +) +Avatar.displayName = "Avatar" + +export { Avatar } diff --git a/packages/design-system/ui/src/components/avatar/index.ts b/packages/design-system/ui/src/components/avatar/index.ts new file mode 100644 index 0000000000000..de943ce04a380 --- /dev/null +++ b/packages/design-system/ui/src/components/avatar/index.ts @@ -0,0 +1 @@ +export * from "./avatar" diff --git a/packages/design-system/ui/src/components/badge/badge.spec.tsx b/packages/design-system/ui/src/components/badge/badge.spec.tsx new file mode 100644 index 0000000000000..2d1467f3f927f --- /dev/null +++ b/packages/design-system/ui/src/components/badge/badge.spec.tsx @@ -0,0 +1,21 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Badge } from "./badge" + +describe("Badge", () => { + it("should render", async () => { + render(Badge) + expect(screen.getByText("Badge")).toBeInTheDocument() + }) + + it("should render as child", async () => { + render( + + Changelog + + ) + + expect(screen.getByRole("link")).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/ui/src/components/badge/badge.stories.tsx b/packages/design-system/ui/src/components/badge/badge.stories.tsx new file mode 100644 index 0000000000000..63a1103d69d78 --- /dev/null +++ b/packages/design-system/ui/src/components/badge/badge.stories.tsx @@ -0,0 +1,85 @@ +import { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Badge } from "./badge" + +const meta: Meta = { + title: "Components/Badge", + component: Badge, + parameters: { + layout: "centered", + }, + render: ({ children, ...args }) => ( + {children || "Badge"} + ), +} + +export default meta + +type Story = StoryObj + +export const Grey: Story = { + args: { + color: "grey", + }, +} + +export const Green: Story = { + args: { + color: "green", + }, +} + +export const Red: Story = { + args: { + color: "red", + }, +} + +export const Blue: Story = { + args: { + color: "blue", + }, +} + +export const Orange: Story = { + args: { + color: "orange", + }, +} + +export const Purple: Story = { + args: { + color: "purple", + }, +} + +export const Default: Story = { + args: { + rounded: "base", + }, +} + +export const Rounded: Story = { + args: { + rounded: "full", + }, +} + +export const Small: Story = { + args: { + size: "small", + }, +} + +export const Base: Story = { + args: { + size: "base", + }, +} + +export const Large: Story = { + args: { + size: "large", + }, +} diff --git a/packages/design-system/ui/src/components/badge/badge.tsx b/packages/design-system/ui/src/components/badge/badge.tsx new file mode 100644 index 0000000000000..78a77afc2726b --- /dev/null +++ b/packages/design-system/ui/src/components/badge/badge.tsx @@ -0,0 +1,80 @@ +import { Slot } from "@radix-ui/react-slot" +import { VariantProps, cva } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const badgeColorVariants = cva("", { + variants: { + color: { + green: + "bg-ui-tag-green-bg text-ui-tag-green-text [&_svg]:text-ui-tag-green-icon border-ui-tag-green-border", + red: "bg-ui-tag-red-bg text-ui-tag-red-text [&_svg]:text-ui-tag-red-icon border-ui-tag-red-border", + blue: "bg-ui-tag-blue-bg text-ui-tag-blue-text [&_svg]:text-ui-tag-blue-icon border-ui-tag-blue-border", + orange: + "bg-ui-tag-orange-bg text-ui-tag-orange-text [&_svg]:text-ui-tag-orange-icon border-ui-tag-orange-border", + grey: "bg-ui-tag-neutral-bg text-ui-tag-neutral-text [&_svg]:text-ui-tag-neutral-icon border-ui-tag-neutral-border", + purple: + "bg-ui-tag-purple-bg text-ui-tag-purple-text [&_svg]:text-ui-tag-purple-icon border-ui-tag-purple-border", + }, + }, + defaultVariants: { + color: "grey", + }, +}) + +const badgeSizeVariants = cva("inline-flex items-center gap-x-0.5 border", { + variants: { + size: { + small: "txt-compact-xsmall-plus px-1.5", + base: "txt-compact-small-plus px-2 py-0.5", + large: "txt-compact-medium-plus px-2.5 py-1", + }, + rounded: { + base: "rounded-md", + full: "rounded-full", + }, + }, + defaultVariants: { + size: "base", + rounded: "base", + }, +}) + +interface BadgeProps + extends Omit, "color">, + VariantProps, + VariantProps { + asChild?: boolean +} + +const Badge = React.forwardRef( + ( + { + className, + size = "base", + rounded = "base", + color = "grey", + asChild = false, + ...props + }, + ref + ) => { + const Component = asChild ? Slot : "span" + + return ( + + ) + } +) +Badge.displayName = "Badge" + +export { Badge, badgeColorVariants } diff --git a/packages/design-system/ui/src/components/badge/index.ts b/packages/design-system/ui/src/components/badge/index.ts new file mode 100644 index 0000000000000..051fa6ea239c8 --- /dev/null +++ b/packages/design-system/ui/src/components/badge/index.ts @@ -0,0 +1 @@ +export * from "./badge" diff --git a/packages/design-system/ui/src/components/button/button.spec.tsx b/packages/design-system/ui/src/components/button/button.spec.tsx new file mode 100644 index 0000000000000..52218d459bc02 --- /dev/null +++ b/packages/design-system/ui/src/components/button/button.spec.tsx @@ -0,0 +1,23 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Button } from "./button" + +describe("Button", () => { + it("renders a button", () => { + render() + const button = screen.getByRole("button", { name: "Click me" }) + expect(button).toBeInTheDocument() + }) + + it("renders a button as a link", () => { + render( + + ) + + const button = screen.getByRole("link", { name: "Go to website" }) + expect(button).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/ui/src/components/button/button.stories.tsx b/packages/design-system/ui/src/components/button/button.stories.tsx new file mode 100644 index 0000000000000..de10bc3bc0d5f --- /dev/null +++ b/packages/design-system/ui/src/components/button/button.stories.tsx @@ -0,0 +1,78 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { PlusMini } from "@medusajs/icons" +import { Button } from "./button" + +const meta: Meta = { + title: "Components/Button", + component: Button, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Primary: Story = { + args: { + children: "Action", + }, +} + +export const Secondary: Story = { + args: { + children: "Action", + variant: "secondary", + }, +} + +export const Transparent: Story = { + args: { + children: "Action", + variant: "transparent", + }, +} + +export const Danger: Story = { + args: { + children: "Action", + variant: "danger", + }, +} + +export const Disabled: Story = { + args: { + children: "Action", + disabled: true, + }, +} + +export const WithIcon: Story = { + args: { + children: ["Action", ], + }, +} + +export const Loading: Story = { + args: { + children: "Action", + isLoading: true, + }, +} + +export const Large: Story = { + args: { + children: "Action", + size: "large", + }, +} + +export const XLarge: Story = { + args: { + children: "Action", + size: "xlarge", + }, +} diff --git a/packages/design-system/ui/src/components/button/button.tsx b/packages/design-system/ui/src/components/button/button.tsx new file mode 100644 index 0000000000000..8c1cf7b2b58e2 --- /dev/null +++ b/packages/design-system/ui/src/components/button/button.tsx @@ -0,0 +1,118 @@ +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" +import { Spinner } from "@medusajs/icons" + +const buttonVariants = cva( + clx( + "transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none", + "disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden", + "after:transition-fg after:absolute after:inset-0 after:content-['']" + ), + { + variants: { + variant: { + primary: clx( + "shadow-buttons-inverted text-ui-fg-on-inverted bg-ui-button-inverted after:button-inverted-gradient", + "hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient", + "active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient", + "focus:!shadow-buttons-inverted-focus" + ), + secondary: clx( + "shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:button-neutral-gradient", + "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient", + "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient", + "focus:shadow-buttons-neutral-focus" + ), + transparent: clx( + "after:hidden", + "text-ui-fg-base bg-ui-button-transparent", + "hover:bg-ui-button-transparent-hover", + "active:bg-ui-button-transparent-pressed", + "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base", + "disabled:!bg-transparent disabled:!shadow-none" + ), + danger: clx( + "shadow-buttons-colored shadow-buttons-danger text-ui-fg-on-color bg-ui-button-danger after:button-danger-gradient", + "hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient", + "active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient", + "focus:shadow-buttons-danger-focus" + ), + }, + size: { + base: "txt-compact-small-plus gap-x-1.5 px-3 py-1.5", + large: "txt-compact-medium-plus gap-x-1.5 px-4 py-2.5", + xlarge: "txt-compact-large-plus gap-x-1.5 px-5 py-3.5", + }, + }, + defaultVariants: { + size: "base", + variant: "primary", + }, + } +) + +interface ButtonProps + extends React.ComponentPropsWithoutRef<"button">, + VariantProps { + isLoading?: boolean + asChild?: boolean +} + +const Button = React.forwardRef( + ( + { + variant = "primary", + size = "base", + className, + asChild = false, + children, + isLoading = false, + disabled, + ...props + }, + ref + ) => { + const Component = asChild ? Slot : "button" + + /** + * In the case of a button where asChild is true, and isLoading is true, we ensure that + * only on element is passed as a child to the Slot component. This is because the Slot + * component only accepts a single child. + */ + const renderInner = () => { + if (isLoading) { + return ( + +
+ +
+ {children} + + ) + } + + return children + } + + return ( + + {renderInner()} + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/packages/design-system/ui/src/components/button/index.ts b/packages/design-system/ui/src/components/button/index.ts new file mode 100644 index 0000000000000..e93d26f6b0b3a --- /dev/null +++ b/packages/design-system/ui/src/components/button/index.ts @@ -0,0 +1 @@ +export * from "./button" diff --git a/packages/design-system/ui/src/components/calendar/calendar.stories.tsx b/packages/design-system/ui/src/components/calendar/calendar.stories.tsx new file mode 100644 index 0000000000000..ed24ea624dfb0 --- /dev/null +++ b/packages/design-system/ui/src/components/calendar/calendar.stories.tsx @@ -0,0 +1,79 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Text } from "@/components/text" +import { DateRange } from "react-day-picker" +import { Calendar } from "./calendar" + +const Demo = ({ mode, ...args }: Parameters[0]) => { + const [date, setDate] = React.useState(new Date()) + const [dateRange, setDateRange] = React.useState( + undefined + ) + + return ( +
+ + + {mode === "single" && ( + + Selected Date: {date ? date.toDateString() : "None"} + + )} + {mode === "range" && ( + + Selected Range:{" "} + {dateRange + ? `${dateRange.from?.toDateString()} – ${ + dateRange.to?.toDateString() ?? "" + }` + : "None"} + + )} +
+ ) +} + +const meta: Meta = { + title: "Components/Calendar", + component: Calendar, + render: Demo, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Single: Story = { + args: { + mode: "single", + }, +} + +export const TwoMonthSingle: Story = { + args: { + mode: "single", + numberOfMonths: 2, + }, +} + +export const Range: Story = { + args: { + mode: "range", + }, +} + +export const TwoMonthRange: Story = { + args: { + mode: "range", + numberOfMonths: 2, + }, +} diff --git a/packages/design-system/ui/src/components/calendar/calendar.tsx b/packages/design-system/ui/src/components/calendar/calendar.tsx new file mode 100644 index 0000000000000..3143b22eccf0c --- /dev/null +++ b/packages/design-system/ui/src/components/calendar/calendar.tsx @@ -0,0 +1,145 @@ +"use client" + +import { ChevronLeftMini, ChevronRightMini } from "@medusajs/icons" +import * as React from "react" +import { + DayPicker, + useDayRender, + type DayPickerRangeProps, + type DayPickerSingleProps, + type DayProps, +} from "react-day-picker" + +import { clx } from "@/utils/clx" +import { iconButtonVariants } from "../icon-button" + +type OmitKeys = { + [P in keyof T as P extends K ? never : P]: T[P] +} + +type KeysToOmit = "showWeekNumber" | "captionLayout" | "mode" + +type SingleProps = OmitKeys +type RangeProps = OmitKeys + +type CalendarProps = + | ({ + mode: "single" + } & SingleProps) + | ({ + mode?: undefined + } & SingleProps) + | ({ + mode: "range" + } & RangeProps) + +const Calendar = ({ + className, + classNames, + mode = "single", + showOutsideDays = true, + ...props +}: CalendarProps) => { + return ( + , + IconRight: () => , + Day: Day, + }} + {...(props as SingleProps & RangeProps)} + /> + ) +} +Calendar.displayName = "Calendar" + +const Day = ({ date, displayMonth }: DayProps) => { + const ref = React.useRef(null) + const { activeModifiers, buttonProps, divProps, isButton, isHidden } = + useDayRender(date, displayMonth, ref) + + const { selected, today, disabled, range_middle } = activeModifiers + + React.useEffect(() => { + if (selected) { + ref.current?.focus() + } + }, [selected]) + + if (isHidden) { + return <> + } + + if (!isButton) { + return ( +
+ ) + } + + const { + children: buttonChildren, + className: buttonClassName, + ...buttonPropsRest + } = buttonProps + + return ( + + ) +} + +export { Calendar } diff --git a/packages/design-system/ui/src/components/calendar/index.ts b/packages/design-system/ui/src/components/calendar/index.ts new file mode 100644 index 0000000000000..33dfcd855dda0 --- /dev/null +++ b/packages/design-system/ui/src/components/calendar/index.ts @@ -0,0 +1 @@ +export * from "./calendar" diff --git a/packages/design-system/ui/src/components/checkbox/checkbox.spec.tsx b/packages/design-system/ui/src/components/checkbox/checkbox.spec.tsx new file mode 100644 index 0000000000000..cdd8d52b4610c --- /dev/null +++ b/packages/design-system/ui/src/components/checkbox/checkbox.spec.tsx @@ -0,0 +1,12 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Checkbox } from "./checkbox" + +describe("Checkbox", () => { + it("renders a checkbox", () => { + render() + + expect(screen.getByRole("checkbox")).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/ui/src/components/checkbox/checkbox.stories.tsx b/packages/design-system/ui/src/components/checkbox/checkbox.stories.tsx new file mode 100644 index 0000000000000..38dee2e29e4a8 --- /dev/null +++ b/packages/design-system/ui/src/components/checkbox/checkbox.stories.tsx @@ -0,0 +1,51 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Checkbox } from "./checkbox" + +const meta: Meta = { + title: "Components/Checkbox", + component: Checkbox, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: {}, +} + +export const Checked: Story = { + args: { + checked: true, + }, +} + +export const Indeterminate: Story = { + args: { + checked: "indeterminate", + }, +} + +export const Disabled: Story = { + args: { + disabled: true, + }, +} + +export const DisabledChecked: Story = { + args: { + disabled: true, + checked: true, + }, +} + +export const DisabledIndeterminate: Story = { + args: { + disabled: true, + checked: "indeterminate", + }, +} diff --git a/packages/design-system/ui/src/components/checkbox/checkbox.tsx b/packages/design-system/ui/src/components/checkbox/checkbox.tsx new file mode 100644 index 0000000000000..fb2a7195a7382 --- /dev/null +++ b/packages/design-system/ui/src/components/checkbox/checkbox.tsx @@ -0,0 +1,33 @@ +"use client" + +import { CheckMini, MinusMini } from "@medusajs/icons" +import * as Primitives from "@radix-ui/react-checkbox" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, checked, ...props }, ref) => { + return ( + +
+ + {checked === "indeterminate" ? : } + +
+ + ) +}) +Checkbox.displayName = "Checkbox" + +export { Checkbox } diff --git a/packages/design-system/ui/src/components/checkbox/index.ts b/packages/design-system/ui/src/components/checkbox/index.ts new file mode 100644 index 0000000000000..1b929d06654d6 --- /dev/null +++ b/packages/design-system/ui/src/components/checkbox/index.ts @@ -0,0 +1 @@ +export * from "./checkbox" diff --git a/packages/design-system/ui/src/components/code-block/code-block.stories.tsx b/packages/design-system/ui/src/components/code-block/code-block.stories.tsx new file mode 100644 index 0000000000000..a981f9798a7b3 --- /dev/null +++ b/packages/design-system/ui/src/components/code-block/code-block.stories.tsx @@ -0,0 +1,52 @@ +import React from "react" +import type { Meta, StoryObj } from "@storybook/react" + +import { CodeBlock } from "./code-block" +import { Label } from "../label" + +const meta: Meta = { + title: "Components/CodeBlock", + component: CodeBlock, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +const snippets = [ + { + label: "cURL", + language: "markdown", + code: `curl -H 'x-publishable-key: YOUR_API_KEY' 'http://localhost:9000/store/products/PRODUCT_ID'`, + }, + { + label: "Medusa JS Client", + language: "jsx", + code: `// Install the JS Client in your storefront project: @medusajs/medusa-js\n\nimport Medusa from "@medusajs/medusa-js"\n\nconst medusa = new Medusa({ publishableApiKey: "YOUR_API_KEY"})\nconst product = await medusa.products.retrieve("PRODUCT_ID")\nconsole.log(product.id)`, + }, + { + label: "Medusa React", + language: "tsx", + code: `// Install the React SDK and required dependencies in your storefront project:\n// medusa-react @tanstack/react-query @medusajs/medusa\n\nimport { useProduct } from "medusa-react"\n\nconst { product } = useProduct("PRODUCT_ID")\nconsole.log(product.id)`, + }, +] + +export const Default: Story = { + render: () => { + return ( +
+ + + + + + + + +
+ ) + }, +} diff --git a/packages/design-system/ui/src/components/code-block/code-block.tsx b/packages/design-system/ui/src/components/code-block/code-block.tsx new file mode 100644 index 0000000000000..a7f716a85fc56 --- /dev/null +++ b/packages/design-system/ui/src/components/code-block/code-block.tsx @@ -0,0 +1,186 @@ +"use client" +import { Highlight, themes } from "prism-react-renderer" +import * as React from "react" + +import { Copy } from "@/components/copy" +import { clx } from "@/utils/clx" + +export type CodeSnippet = { + label: string + language: string + code: string + hideLineNumbers?: boolean +} + +type CodeBlockState = { + snippets: CodeSnippet[] + active: CodeSnippet + setActive: (active: CodeSnippet) => void +} | null + +const CodeBlockContext = React.createContext(null) + +const useCodeBlockContext = () => { + const context = React.useContext(CodeBlockContext) + + if (context === null) + throw new Error( + "useCodeBlockContext can only be used within a CodeBlockContext" + ) + + return context +} + +type RootProps = { + snippets: CodeSnippet[] +} + +const Root = ({ + snippets, + className, + children, + ...props +}: React.HTMLAttributes & RootProps) => { + const [active, setActive] = React.useState(snippets[0]) + + return ( + +
+ {children} +
+ + ) +} + +type HeaderProps = { + hideLabels?: boolean +} + +const HeaderComponent = ({ + children, + className, + hideLabels = false, + ...props +}: React.HTMLAttributes & HeaderProps) => { + const { snippets, active, setActive } = useCodeBlockContext() + return ( +
+ {!hideLabels && + snippets.map((snippet) => ( +
setActive(snippet)} + > + {snippet.label} +
+ ))} + {children} +
+ ) +} + +const Meta = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( +
+ ) +} + +const Header = Object.assign(HeaderComponent, { Meta }) + +const Body = ({ + className, + ...props +}: React.HTMLAttributes) => { + const { active } = useCodeBlockContext() + return ( +
+ +
+ + {({ style, tokens, getLineProps, getTokenProps }) => ( + 
+              {tokens.map((line, i) => (
+                

+                  {!active.hideLineNumbers && (
+                    {i + 1}
+                  )}
+                  

+                    {line.map((token, key) => (
+                      
+                    ))}
+                  

+                

+              ))}
+
+ )} + +
+
+ ) +} + +const CodeBlock = Object.assign(Root, { Body, Header, Meta }) + +export { CodeBlock } diff --git a/packages/design-system/ui/src/components/code-block/index.ts b/packages/design-system/ui/src/components/code-block/index.ts new file mode 100644 index 0000000000000..365dee1329adf --- /dev/null +++ b/packages/design-system/ui/src/components/code-block/index.ts @@ -0,0 +1 @@ +export * from "./code-block" diff --git a/packages/design-system/ui/src/components/code/code.stories.tsx b/packages/design-system/ui/src/components/code/code.stories.tsx new file mode 100644 index 0000000000000..d3785a0f08177 --- /dev/null +++ b/packages/design-system/ui/src/components/code/code.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Code } from "./code" + +const meta: Meta = { + title: "Components/Code", + component: Code, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + children: "yarn add -D @medusajs/ui-preset", + }, +} diff --git a/packages/design-system/ui/src/components/code/code.tsx b/packages/design-system/ui/src/components/code/code.tsx new file mode 100644 index 0000000000000..86459019fc03e --- /dev/null +++ b/packages/design-system/ui/src/components/code/code.tsx @@ -0,0 +1,22 @@ +import { clx } from "@/utils/clx" +import * as React from "react" + +const Code = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"code"> +>(({ className, ...props }, ref) => { + return ( + + ) +}) + +Code.displayName = "Code" + +export { Code } diff --git a/packages/design-system/ui/src/components/code/index.tsx b/packages/design-system/ui/src/components/code/index.tsx new file mode 100644 index 0000000000000..57a6d399f66df --- /dev/null +++ b/packages/design-system/ui/src/components/code/index.tsx @@ -0,0 +1 @@ +export * from "./code" diff --git a/packages/design-system/ui/src/components/command-bar/command-bar.stories.tsx b/packages/design-system/ui/src/components/command-bar/command-bar.stories.tsx new file mode 100644 index 0000000000000..dd41abfe28669 --- /dev/null +++ b/packages/design-system/ui/src/components/command-bar/command-bar.stories.tsx @@ -0,0 +1,54 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Button } from "../button" +import { CommandBar } from "./command-bar" + +const meta: Meta = { + title: "Components/CommandBar", + component: CommandBar, + parameters: { + layout: "fullscreen", + }, +} + +export default meta + +type Story = StoryObj + +const CommandBarDemo = () => { + const [active, setActive] = React.useState(false) + + return ( +
+ + + + 1 selected + + { + console.log("Edit") + }} + shortcut="e" + /> + + { + console.log("Delete") + }} + shortcut="d" + /> + + +
+ ) +} + +export const Default: Story = { + render: () => , +} diff --git a/packages/design-system/ui/src/components/command-bar/command-bar.tsx b/packages/design-system/ui/src/components/command-bar/command-bar.tsx new file mode 100644 index 0000000000000..d77cecc82802f --- /dev/null +++ b/packages/design-system/ui/src/components/command-bar/command-bar.tsx @@ -0,0 +1,168 @@ +"use client" + +import * as Popover from "@radix-ui/react-popover" +import * as Portal from "@radix-ui/react-portal" +import * as React from "react" + +import { Kbd } from "@/components/kbd" +import { clx } from "@/utils/clx" + +type CommandBarProps = React.PropsWithChildren<{ + open?: boolean + onOpenChange?: (open: boolean) => void + defaultOpen?: boolean + disableAutoFocus?: boolean +}> + +const Root = ({ + open = false, + onOpenChange, + defaultOpen = false, + disableAutoFocus = true, + children, +}: CommandBarProps) => { + return ( + + + + + + { + if (disableAutoFocus) { + e.preventDefault() + } + }} + className={clx( + "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" + )} + > + {children} + + + + ) +} +Root.displayName = "CommandBar" + +const Value = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<"div"> +>(({ className, ...props }, ref) => { + return ( +
+ ) +}) +Value.displayName = "CommandBar.Value" + +const Bar = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<"div"> +>(({ className, ...props }, ref) => { + return ( +
+ ) +}) +Bar.displayName = "CommandBar.Bar" + +const Seperator = React.forwardRef< + HTMLDivElement, + Omit, "children"> +>(({ className, ...props }, ref) => { + return ( +
+ ) +}) +Seperator.displayName = "CommandBar.Seperator" + +interface CommandProps + extends Omit< + React.ComponentPropsWithoutRef<"button">, + "children" | "onClick" + > { + action: () => void | Promise + label: string + shortcut: string +} + +const Command = React.forwardRef( + ( + { className, type = "button", label, action, shortcut, disabled, ...props }, + ref + ) => { + React.useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === shortcut) { + event.preventDefault() + event.stopPropagation() + action() + } + } + + if (!disabled) { + document.addEventListener("keydown", handleKeyDown) + } + + return () => { + document.removeEventListener("keydown", handleKeyDown) + } + }, [action, shortcut, disabled]) + + return ( + + ) + } +) +Command.displayName = "CommandBar.Command" + +const CommandBar = Object.assign(Root, { + Command, + Value, + Bar, + Seperator, +}) + +export { CommandBar } diff --git a/packages/design-system/ui/src/components/command-bar/index.ts b/packages/design-system/ui/src/components/command-bar/index.ts new file mode 100644 index 0000000000000..b3a99f1b2f840 --- /dev/null +++ b/packages/design-system/ui/src/components/command-bar/index.ts @@ -0,0 +1 @@ +export * from "./command-bar" diff --git a/packages/design-system/ui/src/components/command/command.stories.tsx b/packages/design-system/ui/src/components/command/command.stories.tsx new file mode 100644 index 0000000000000..55f1f59005427 --- /dev/null +++ b/packages/design-system/ui/src/components/command/command.stories.tsx @@ -0,0 +1,30 @@ +import React from "react" +import type { Meta, StoryObj } from "@storybook/react" +import { Command } from "./command" +import { Badge } from "../badge" + +const meta: Meta = { + title: "Components/Command", + component: Command, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + render: () => { + return ( +
+ + Get + localhost:9000/store/products + + +
+ ) + }, +} diff --git a/packages/design-system/ui/src/components/command/command.tsx b/packages/design-system/ui/src/components/command/command.tsx new file mode 100644 index 0000000000000..f3a715f6f9f7b --- /dev/null +++ b/packages/design-system/ui/src/components/command/command.tsx @@ -0,0 +1,25 @@ +"use client" + +import { Copy } from "@/components/copy" +import { clx } from "@/utils/clx" +import React from "react" + +const CommandComponent = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( +
code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6", + className + )} + {...props} + /> + ) +} + +const Command = Object.assign(CommandComponent, { Copy }) + +export { Command } diff --git a/packages/design-system/ui/src/components/command/index.tsx b/packages/design-system/ui/src/components/command/index.tsx new file mode 100644 index 0000000000000..2ce0e8e2dd92c --- /dev/null +++ b/packages/design-system/ui/src/components/command/index.tsx @@ -0,0 +1 @@ +export * from "./command" diff --git a/packages/design-system/ui/src/components/container/container.stories.tsx b/packages/design-system/ui/src/components/container/container.stories.tsx new file mode 100644 index 0000000000000..54c49d25cb977 --- /dev/null +++ b/packages/design-system/ui/src/components/container/container.stories.tsx @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Heading } from "@/components/heading" +import { Text } from "@/components/text" +import { Container } from "./container" + +const meta: Meta = { + title: "Components/Container", + component: Container, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + children: Hello World, + }, + parameters: { + layout: "centered", + }, +} + +export const InLayout: Story = { + render: () => ( +
+
+ Menubar +
+
+ + Section 1 + + + Section 2 + + + Section 3 + +
+
+ ), + parameters: { + layout: "fullscreen", + }, +} diff --git a/packages/design-system/ui/src/components/container/container.tsx b/packages/design-system/ui/src/components/container/container.tsx new file mode 100644 index 0000000000000..edeb27a4f8f1c --- /dev/null +++ b/packages/design-system/ui/src/components/container/container.tsx @@ -0,0 +1,22 @@ +import * as React from "react" + +import { clx } from "@/utils/clx" + +const Container = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<"div"> +>(({ className, ...props }, ref) => { + return ( +
+ ) +}) +Container.displayName = "Container" + +export { Container } diff --git a/packages/design-system/ui/src/components/container/index.ts b/packages/design-system/ui/src/components/container/index.ts new file mode 100644 index 0000000000000..242b7611e99c6 --- /dev/null +++ b/packages/design-system/ui/src/components/container/index.ts @@ -0,0 +1 @@ +export * from "./container" diff --git a/packages/design-system/ui/src/components/copy/copy.spec.tsx b/packages/design-system/ui/src/components/copy/copy.spec.tsx new file mode 100644 index 0000000000000..15e327fa176d3 --- /dev/null +++ b/packages/design-system/ui/src/components/copy/copy.spec.tsx @@ -0,0 +1,11 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Copy } from "./copy" + +describe("Copy", () => { + it("should render", () => { + render() + expect(screen.getByRole("button")).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/ui/src/components/copy/copy.stories.tsx b/packages/design-system/ui/src/components/copy/copy.stories.tsx new file mode 100644 index 0000000000000..02d31ed82c043 --- /dev/null +++ b/packages/design-system/ui/src/components/copy/copy.stories.tsx @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Button } from "@/components/button" +import { Copy } from "./copy" + +const meta: Meta = { + title: "Components/Copy", + component: Copy, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + content: "Hello world", + }, +} + +export const AsChild: Story = { + args: { + content: "Hello world", + asChild: true, + children: , + }, +} diff --git a/packages/design-system/ui/src/components/copy/copy.tsx b/packages/design-system/ui/src/components/copy/copy.tsx new file mode 100644 index 0000000000000..cddf31c09100e --- /dev/null +++ b/packages/design-system/ui/src/components/copy/copy.tsx @@ -0,0 +1,62 @@ +"use client" + +import { Tooltip } from "@/components/tooltip" +import { clx } from "@/utils/clx" +import { CheckCircleSolid, SquareTwoStack } from "@medusajs/icons" +import { Slot } from "@radix-ui/react-slot" +import copy from "copy-to-clipboard" +import React, { useState } from "react" + +type CopyProps = { + content: string + asChild?: boolean +} + +const Copy = React.forwardRef< + HTMLButtonElement, + React.HTMLAttributes & CopyProps +>(({ children, className, content, asChild = false, ...props }, ref) => { + const [done, setDone] = useState(false) + const [open, setOpen] = useState(false) + const [text, setText] = useState("Copy") + + const copyToClipboard = () => { + setDone(true) + copy(content) + + setTimeout(() => { + setDone(false) + }, 2000) + } + + React.useEffect(() => { + if (done) { + setText("Copied") + return + } + + setTimeout(() => { + setText("Copy") + }, 500) + }, [done]) + + const Component = asChild ? Slot : "button" + + return ( + + + {children ? children : done ? : } + + + ) +}) +Copy.displayName = "Copy" + +export { Copy } diff --git a/packages/design-system/ui/src/components/copy/index.tsx b/packages/design-system/ui/src/components/copy/index.tsx new file mode 100644 index 0000000000000..b54100d945e24 --- /dev/null +++ b/packages/design-system/ui/src/components/copy/index.tsx @@ -0,0 +1 @@ +export * from "./copy" diff --git a/packages/design-system/ui/src/components/currency-input/currency-input.stories.tsx b/packages/design-system/ui/src/components/currency-input/currency-input.stories.tsx new file mode 100644 index 0000000000000..f87938ed9fad4 --- /dev/null +++ b/packages/design-system/ui/src/components/currency-input/currency-input.stories.tsx @@ -0,0 +1,39 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { CurrencyInput } from "./currency-input" + +const meta: Meta = { + title: "Components/CurrencyInput", + component: CurrencyInput, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + symbol: "$", + code: "usd", + }, +} + +export const InGrid: Story = { + render: (args) => { + return ( +
+ + + +
+ ) + }, + args: { + symbol: "$", + code: "usd", + }, +} diff --git a/packages/design-system/ui/src/components/currency-input/currency-input.tsx b/packages/design-system/ui/src/components/currency-input/currency-input.tsx new file mode 100644 index 0000000000000..0c7aff0e116ba --- /dev/null +++ b/packages/design-system/ui/src/components/currency-input/currency-input.tsx @@ -0,0 +1,129 @@ +"use client" + +import * as React from "react" +import Primitive from "react-currency-input-field" + +import { Text } from "@/components/text" +import { clx } from "@/utils/clx" +import { VariantProps, cva } from "class-variance-authority" + +const currencyInputVariants = cva( + clx( + "flex items-center gap-x-1", + "bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-buttons-neutral placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full rounded-md", + "focus-within:shadow-borders-interactive-with-active" + ), + { + variants: { + size: { + base: "txt-compact-medium h-10 px-3", + small: "txt-compact-small h-8 px-2", + }, + }, + defaultVariants: { + size: "base", + }, + } +) + +interface CurrencyInputProps + extends Omit< + React.ComponentPropsWithoutRef, + "prefix" | "suffix" | "size" + >, + VariantProps { + symbol: string + code: string +} + +const CurrencyInput = React.forwardRef( + ( + { size = "base", symbol, code, disabled, onInvalid, className, ...props }, + ref + ) => { + const innerRef = React.useRef(null) + + React.useImperativeHandle( + ref, + () => innerRef.current + ) + + const [valid, setValid] = React.useState(true) + + const onInnerInvalid = React.useCallback( + (event: React.FormEvent) => { + setValid(event.currentTarget.validity.valid) + + if (onInvalid) { + onInvalid(event) + } + }, + [onInvalid] + ) + + return ( +
{ + if (innerRef.current) { + innerRef.current.focus() + } + }} + className={clx( + "w-full cursor-text justify-between overflow-hidden", + currencyInputVariants({ size }), + { + "text-ui-fg-disabled !bg-ui-bg-disabled !shadow-buttons-neutral !placeholder-ui-fg-disabled cursor-not-allowed": + disabled, + "!shadow-borders-error invalid:!shadow-borders-error": + props["aria-invalid"] || !valid, + }, + className + )} + > + + + {code} + + + + + + {symbol} + + +
+ ) + } +) +CurrencyInput.displayName = "CurrencyInput" + +export { CurrencyInput } diff --git a/packages/design-system/ui/src/components/currency-input/index.ts b/packages/design-system/ui/src/components/currency-input/index.ts new file mode 100644 index 0000000000000..6053b3990181c --- /dev/null +++ b/packages/design-system/ui/src/components/currency-input/index.ts @@ -0,0 +1 @@ +export * from "./currency-input" diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.spec.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.spec.tsx new file mode 100644 index 0000000000000..3a8664a622d87 --- /dev/null +++ b/packages/design-system/ui/src/components/date-picker/date-picker.spec.tsx @@ -0,0 +1,58 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { DatePicker } from "./date-picker" + +describe("DatePicker", () => { + describe("Preset validation", () => { + it("should throw an error if a preset is before the min year", async () => { + expect(() => + render( + + ) + ).toThrowError( + /Preset Year of the first US census is before fromYear 1800./ + ) + }) + + it("should throw an error if a preset is after the max year", async () => { + expect(() => + render( + + ) + ).toThrowError(/Preset End of the Mayan calendar is after toYear 2012./) + }) + }) + + describe("Single", () => { + it("should render", async () => { + render() + + expect(screen.getByRole("button")).toBeInTheDocument() + }) + }) + + describe("Range", () => { + it("should render", async () => { + render() + + expect(screen.getByRole("button")).toBeInTheDocument() + }) + }) +}) diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx new file mode 100644 index 0000000000000..cea8797a437fc --- /dev/null +++ b/packages/design-system/ui/src/components/date-picker/date-picker.stories.tsx @@ -0,0 +1,243 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" +import { DateRange } from "react-day-picker" + +import { Button } from "@/components/button" +import { DatePicker } from "./date-picker" +import { Popover } from "@/components/popover" + +const meta: Meta = { + title: "Components/DatePicker", + component: DatePicker, + parameters: { + layout: "centered", + }, + render: (args) => { + return ( +
+ +
+ ) + }, +} + +export default meta + +type Story = StoryObj + +const presets = [ + { + label: "Today", + date: new Date(), + }, + { + label: "Tomorrow", + date: new Date(new Date().setDate(new Date().getDate() + 1)), + }, + { + label: "A week from now", + date: new Date(new Date().setDate(new Date().getDate() + 7)), + }, + { + label: "A month from now", + date: new Date(new Date().setMonth(new Date().getMonth() + 1)), + }, + { + label: "6 months from now", + date: new Date(new Date().setMonth(new Date().getMonth() + 6)), + }, + { + label: "A year from now", + date: new Date(new Date().setFullYear(new Date().getFullYear() + 1)), + }, +] + +export const Single: Story = { + args: {}, +} + +export const SingleWithPresets: Story = { + args: { + presets, + }, +} + +export const SingleWithTimePicker: Story = { + args: { + showTimePicker: true, + }, +} + +export const SingleWithTimePickerAndPresets: Story = { + args: { + showTimePicker: true, + presets, + }, +} + +const rangePresets = [ + { + label: "Today", + dateRange: { + from: new Date(), + to: new Date(), + }, + }, + { + label: "Last 7 days", + dateRange: { + from: new Date(new Date().setDate(new Date().getDate() - 7)), + to: new Date(), + }, + }, + { + label: "Last 30 days", + dateRange: { + from: new Date(new Date().setDate(new Date().getDate() - 30)), + to: new Date(), + }, + }, + { + label: "Last 3 months", + dateRange: { + from: new Date(new Date().setMonth(new Date().getMonth() - 3)), + to: new Date(), + }, + }, + { + label: "Last 6 months", + dateRange: { + from: new Date(new Date().setMonth(new Date().getMonth() - 6)), + to: new Date(), + }, + }, + { + label: "Month to date", + dateRange: { + from: new Date(new Date().setDate(1)), + to: new Date(), + }, + }, + { + label: "Year to date", + dateRange: { + from: new Date(new Date().setFullYear(new Date().getFullYear(), 0, 1)), + to: new Date(), + }, + }, +] + +export const Range: Story = { + args: { + mode: "range", + }, +} + +export const RangeWithPresets: Story = { + args: { + mode: "range", + presets: rangePresets, + }, +} + +export const RangeWithTimePicker: Story = { + args: { + mode: "range", + showTimePicker: true, + }, +} + +export const RangeWithTimePickerAndPresets: Story = { + args: { + mode: "range", + showTimePicker: true, + presets: rangePresets, + }, +} + +const ControlledDemo = () => { + const [value, setValue] = React.useState(undefined) + + return ( +
+ { + setValue(value) + }} + /> + +
+ ) +} + +export const Controlled: Story = { + render: () => , +} + +const ControlledRangeDemo = () => { + const [value, setValue] = React.useState(undefined) + + React.useEffect(() => { + console.log("Value changed: ", value) + }, [value]) + + return ( +
+ { + setValue(value) + }} + /> + +
+ ) +} + +export const ControlledRange: Story = { + render: () => , +} + +type NestedProps = { + value?: Date + onChange?: (value: Date | undefined) => void +} +const Nested = ({ value, onChange }: NestedProps) => { + return ( + + + + + +
+ +
+ +
+ +
+ +
+ + +
+ + + ) +} + +const NestedDemo = () => { + const [value, setValue] = React.useState(undefined) + + return ( +
+ +
+ ) +} + +export const NestedControlled: Story = { + render: () => , +} diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.tsx new file mode 100644 index 0000000000000..3832576f87913 --- /dev/null +++ b/packages/design-system/ui/src/components/date-picker/date-picker.tsx @@ -0,0 +1,908 @@ +"use client" + +import { Time } from "@internationalized/date" +import { Calendar as CalendarIcon, Minus } from "@medusajs/icons" +import * as Primitives from "@radix-ui/react-popover" +import { TimeValue } from "@react-aria/datepicker" +import { format } from "date-fns" +import * as React from "react" + +import { Button } from "@/components/button" +import { Calendar as CalendarPrimitive } from "@/components/calendar" +import { TimeInput } from "@/components/time-input" +import type { DateRange } from "@/types" +import { clx } from "@/utils/clx" +import { isBrowserLocaleClockType24h } from "@/utils/is-browser-locale-hour-cycle-24h" +import { cva } from "class-variance-authority" + +const displayVariants = cva( + clx( + "text-ui-fg-base bg-ui-bg-field transition-fg shadow-buttons-neutral flex w-full items-center gap-x-2 rounded-md outline-none", + "hover:bg-ui-bg-field-hover", + "focus:shadow-borders-interactive-with-active data-[state=open]:shadow-borders-interactive-with-active", + "disabled:bg-ui-bg-disabled disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral", + "aria-[invalid=true]:!shadow-borders-error" + ), + { + variants: { + size: { + base: "txt-compact-medium h-10 px-3 py-2.5", + small: "txt-compact-small h-8 px-2 py-1.5", + }, + }, + defaultVariants: { + size: "base", + }, + } +) + +const Display = React.forwardRef< + HTMLButtonElement, + React.ComponentProps<"button"> & { + placeholder?: string + size?: "small" | "base" + } +>(({ className, children, placeholder, size = "base", ...props }, ref) => { + return ( + + + + ) +}) +Display.displayName = "DatePicker.Display" + +const Flyout = React.forwardRef< + React.ElementRef, + React.ComponentProps +>(({ className, children, ...props }, ref) => { + return ( + + + {children} + + + ) +}) +Flyout.displayName = "DatePicker.Flyout" + +interface Preset { + label: string +} + +interface DatePreset extends Preset { + date: Date +} + +interface DateRangePreset extends Preset { + dateRange: DateRange +} + +type PresetContainerProps = { + presets: TPreset[] | TPreset[] + onSelect: (value: TValue) => void + currentValue?: TValue +} + +const PresetContainer = ({ + presets, + onSelect, + currentValue, +}: PresetContainerProps) => { + const isDateRangePresets = (preset: any): preset is DateRangePreset => { + return "dateRange" in preset + } + + const isDatePresets = (preset: any): preset is DatePreset => { + return "date" in preset + } + + const handleClick = (preset: TPreset) => { + if (isDateRangePresets(preset)) { + onSelect(preset.dateRange as TValue) + } else if (isDatePresets(preset)) { + onSelect(preset.date as TValue) + } + } + + const compareDates = (date1: Date, date2: Date) => { + return ( + date1.getDate() === date2.getDate() && + date1.getMonth() === date2.getMonth() && + date1.getFullYear() === date2.getFullYear() + ) + } + + const compareRanges = (range1: DateRange, range2: DateRange) => { + const from1 = range1.from + const from2 = range2.from + + let equalFrom = false + + if (from1 && from2) { + const sameFrom = compareDates(from1, from2) + + if (sameFrom) { + equalFrom = true + } + } + + const to1 = range1.to + const to2 = range2.to + + let equalTo = false + + if (to1 && to2) { + const sameTo = compareDates(to1, to2) + + if (sameTo) { + equalTo = true + } + } + + return equalFrom && equalTo + } + + const matchesCurrent = (preset: TPreset) => { + if (isDateRangePresets(preset)) { + const value = currentValue as DateRange | undefined + + return value && compareRanges(value, preset.dateRange) + } else if (isDatePresets(preset)) { + const value = currentValue as Date | undefined + + return value && compareDates(value, preset.date) + } + + return false + } + + return ( +
    + {presets.map((preset, index) => { + return ( +
  • + +
    • + ) + })} +
+ ) +} + +const formatDate = (date: Date, includeTime?: boolean) => { + const usesAmPm = !isBrowserLocaleClockType24h() + + if (includeTime) { + if (usesAmPm) { + return format(date, "MMM d, yyyy h:mm a") + } + + return format(date, "MMM d, yyyy HH:mm") + } + + return format(date, "MMM d, yyyy") +} + +type CalendarProps = { + fromYear?: number + toYear?: number + fromMonth?: Date + toMonth?: Date + fromDay?: Date + toDay?: Date + fromDate?: Date + toDate?: Date +} + +interface PickerProps extends CalendarProps { + className?: string + disabled?: boolean + required?: boolean + size?: "small" | "base" + showTimePicker?: boolean + id?: string + "aria-invalid"?: boolean + "aria-label"?: string + "aria-labelledby"?: string + "aria-required"?: boolean +} + +interface SingleProps extends PickerProps { + presets?: DatePreset[] + defaultValue?: Date + value?: Date + onChange?: (date: Date | undefined) => void +} + +const SingleDatePicker = ({ + defaultValue, + value, + size = "base", + onChange, + presets, + showTimePicker, + disabled, + className, + ...props +}: SingleProps) => { + const [open, setOpen] = React.useState(false) + const [date, setDate] = React.useState( + value ?? defaultValue ?? undefined + ) + const [month, setMonth] = React.useState(date) + + const [time, setTime] = React.useState( + value + ? new Time(value.getHours(), value.getMinutes()) + : defaultValue + ? new Time(defaultValue.getHours(), defaultValue.getMinutes()) + : new Time(0, 0) + ) + + const initialDate = React.useMemo(() => { + return date + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [open]) + + /** + * Update the date when the value changes. + */ + React.useEffect(() => { + setDate(value ?? defaultValue ?? undefined) + }, [value, defaultValue]) + + React.useEffect(() => { + if (date) { + setMonth(date) + } + }, [date]) + + React.useEffect(() => { + if (!open) { + setMonth(date) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [open]) + + const onCancel = () => { + setDate(initialDate) + setTime( + initialDate + ? new Time(initialDate.getHours(), initialDate.getMinutes()) + : new Time(0, 0) + ) + setOpen(false) + } + + const onOpenChange = (open: boolean) => { + if (!open) { + onCancel() + } + + setOpen(open) + } + + const onDateChange = (date: Date | undefined) => { + const newDate = date + + if (showTimePicker) { + /** + * If the time is cleared, and the date is + * changed then we want to reset the time. + */ + if (newDate && !time) { + setTime(new Time(0, 0)) + } + + /** + * If the time is set, and the date is changed + * then we want to update the date with the + * time. + */ + if (newDate && time) { + newDate.setHours(time.hour) + newDate.setMinutes(time.minute) + } + } + + setDate(newDate) + } + + const onTimeChange = (time: TimeValue) => { + setTime(time) + + if (!date) { + return + } + + const newDate = new Date(date.getTime()) + + if (!time) { + /** + * When a segment of the time input is cleared, + * it will return `null` as the value is no longer + * a valid time. In this case, we want to set the + * time to for the date, effectivly resetting the + * input field. + */ + newDate.setHours(0) + newDate.setMinutes(0) + } else { + newDate.setHours(time.hour) + newDate.setMinutes(time.minute) + } + + setDate(newDate) + } + + const formattedDate = React.useMemo(() => { + if (!date) { + return null + } + + return formatDate(date, showTimePicker) + }, [date, showTimePicker]) + + const onApply = () => { + setOpen(false) + onChange?.(date) + } + + return ( + + + {formattedDate} + + +
+
+ {presets && presets.length > 0 && ( +
+
+ +
+
+ )} +
+ + {showTimePicker && ( +
+ +
+ )} +
+ + +
+
+
+
+ + + ) +} + +interface RangeProps extends PickerProps { + presets?: DateRangePreset[] + defaultValue?: DateRange + value?: DateRange + onChange?: (dateRange: DateRange | undefined) => void +} + +const RangeDatePicker = ({ + defaultValue, + value, + onChange, + size = "base", + showTimePicker, + presets, + disabled, + className, + ...props +}: RangeProps) => { + const [open, setOpen] = React.useState(false) + const [range, setRange] = React.useState( + value ?? defaultValue ?? undefined + ) + const [month, setMonth] = React.useState(range?.from) + + const [startTime, setStartTime] = React.useState( + value?.from + ? new Time(value.from.getHours(), value.from.getMinutes()) + : defaultValue?.from + ? new Time(defaultValue.from.getHours(), defaultValue.from.getMinutes()) + : new Time(0, 0) + ) + const [endTime, setEndTime] = React.useState( + value?.to + ? new Time(value.to.getHours(), value.to.getMinutes()) + : defaultValue?.to + ? new Time(defaultValue.to.getHours(), defaultValue.to.getMinutes()) + : new Time(0, 0) + ) + + const initialRange = React.useMemo(() => { + return range + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [open]) + + /** + * Update the range when the value changes. + */ + React.useEffect(() => { + setRange(value ?? defaultValue ?? undefined) + }, [value, defaultValue]) + + React.useEffect(() => { + if (range) { + setMonth(range.from) + } + }, [range]) + + React.useEffect(() => { + if (!open) { + setMonth(range?.from) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [open]) + + const onRangeChange = (range: DateRange | undefined) => { + const newRange = range + + if (showTimePicker) { + if (newRange?.from && !startTime) { + setStartTime(new Time(0, 0)) + } + + if (newRange?.to && !endTime) { + setEndTime(new Time(0, 0)) + } + + if (newRange?.from && startTime) { + newRange.from.setHours(startTime.hour) + newRange.from.setMinutes(startTime.minute) + } + + if (newRange?.to && endTime) { + newRange.to.setHours(endTime.hour) + newRange.to.setMinutes(endTime.minute) + } + } + + setRange(newRange) + } + + const onCancel = () => { + setRange(initialRange) + setStartTime( + initialRange?.from + ? new Time(initialRange.from.getHours(), initialRange.from.getMinutes()) + : new Time(0, 0) + ) + setEndTime( + initialRange?.to + ? new Time(initialRange.to.getHours(), initialRange.to.getMinutes()) + : new Time(0, 0) + ) + setOpen(false) + } + + const onOpenChange = (open: boolean) => { + if (!open) { + onCancel() + } + + setOpen(open) + } + + const onTimeChange = (time: TimeValue, pos: "start" | "end") => { + switch (pos) { + case "start": + setStartTime(time) + break + case "end": + setEndTime(time) + break + } + + if (!range) { + return + } + + if (pos === "start") { + if (!range.from) { + return + } + + const newDate = new Date(range.from.getTime()) + + if (!time) { + newDate.setHours(0) + newDate.setMinutes(0) + } else { + newDate.setHours(time.hour) + newDate.setMinutes(time.minute) + } + + setRange({ + ...range, + from: newDate, + }) + } + + if (pos === "end") { + if (!range.to) { + return + } + + const newDate = new Date(range.to.getTime()) + + if (!time) { + newDate.setHours(0) + newDate.setMinutes(0) + } else { + newDate.setHours(time.hour) + newDate.setMinutes(time.minute) + } + + setRange({ + ...range, + to: newDate, + }) + } + } + + const displayRange = React.useMemo(() => { + if (!range) { + return null + } + + return `${range.from ? formatDate(range.from, showTimePicker) : ""} - ${ + range.to ? formatDate(range.to, showTimePicker) : "" + }` + }, [range, showTimePicker]) + + const onApply = () => { + setOpen(false) + onChange?.(range) + } + + return ( + + + {displayRange} + + +
+
+ {presets && presets.length > 0 && ( +
+
+ +
+
+ )} +
+ + {showTimePicker && ( +
+
+ Start: + onTimeChange(v, "start")} + aria-label="Start date time" + isDisabled={!range?.from} + isRequired={props.required} + /> +
+ +
+ End: + onTimeChange(v, "end")} + aria-label="End date time" + isDisabled={!range?.to} + isRequired={props.required} + /> +
+
+ )} +
+

+ Range:{" "} + {displayRange} +

+
+ + +
+
+
+
+
+ + + ) +} + +type DatePickerProps = ( + | { + mode?: "single" + presets?: DatePreset[] + defaultValue?: Date + value?: Date + onChange?: (date: Date | undefined) => void + } + | { + mode: "range" + presets?: DateRangePreset[] + defaultValue?: DateRange + value?: DateRange + onChange?: (dateRange: DateRange | undefined) => void + } +) & + PickerProps + +const validatePresets = ( + presets: DateRangePreset[] | DatePreset[], + rules: PickerProps +) => { + const { toYear, fromYear, fromMonth, toMonth, fromDay, toDay } = rules + + if (presets && presets.length > 0) { + const fromYearToUse = fromYear + const toYearToUse = toYear + + presets.forEach((preset) => { + if ("date" in preset) { + const presetYear = preset.date.getFullYear() + + if (fromYear && presetYear < fromYear) { + throw new Error( + `Preset ${preset.label} is before fromYear ${fromYearToUse}.` + ) + } + + if (toYear && presetYear > toYear) { + throw new Error( + `Preset ${preset.label} is after toYear ${toYearToUse}.` + ) + } + + if (fromMonth) { + const presetMonth = preset.date.getMonth() + + if (presetMonth < fromMonth.getMonth()) { + throw new Error( + `Preset ${preset.label} is before fromMonth ${fromMonth}.` + ) + } + } + + if (toMonth) { + const presetMonth = preset.date.getMonth() + + if (presetMonth > toMonth.getMonth()) { + throw new Error( + `Preset ${preset.label} is after toMonth ${toMonth}.` + ) + } + } + + if (fromDay) { + const presetDay = preset.date.getDate() + + if (presetDay < fromDay.getDate()) { + throw new Error( + `Preset ${preset.label} is before fromDay ${fromDay}.` + ) + } + } + + if (toDay) { + const presetDay = preset.date.getDate() + + if (presetDay > toDay.getDate()) { + throw new Error( + `Preset ${preset.label} is after toDay ${format( + toDay, + "MMM dd, yyyy" + )}.` + ) + } + } + } + + if ("dateRange" in preset) { + const presetFromYear = preset.dateRange.from?.getFullYear() + const presetToYear = preset.dateRange.to?.getFullYear() + + if (presetFromYear && fromYear && presetFromYear < fromYear) { + throw new Error( + `Preset ${preset.label}'s 'from' is before fromYear ${fromYearToUse}.` + ) + } + + if (presetToYear && toYear && presetToYear > toYear) { + throw new Error( + `Preset ${preset.label}'s 'to' is after toYear ${toYearToUse}.` + ) + } + + if (fromMonth) { + const presetMonth = preset.dateRange.from?.getMonth() + + if (presetMonth && presetMonth < fromMonth.getMonth()) { + throw new Error( + `Preset ${preset.label}'s 'from' is before fromMonth ${format( + fromMonth, + "MMM, yyyy" + )}.` + ) + } + } + + if (toMonth) { + const presetMonth = preset.dateRange.to?.getMonth() + + if (presetMonth && presetMonth > toMonth.getMonth()) { + throw new Error( + `Preset ${preset.label}'s 'to' is after toMonth ${format( + toMonth, + "MMM, yyyy" + )}.` + ) + } + } + + if (fromDay) { + const presetDay = preset.dateRange.from?.getDate() + + if (presetDay && presetDay < fromDay.getDate()) { + throw new Error( + `Preset ${ + preset.dateRange.from + }'s 'from' is before fromDay ${format(fromDay, "MMM dd, yyyy")}.` + ) + } + } + + if (toDay) { + const presetDay = preset.dateRange.to?.getDate() + + if (presetDay && presetDay > toDay.getDate()) { + throw new Error( + `Preset ${preset.label}'s 'to' is after toDay ${format( + toDay, + "MMM dd, yyyy" + )}.` + ) + } + } + } + }) + } +} + +const DatePicker = ({ mode = "single", ...props }: DatePickerProps) => { + if (props.presets) { + validatePresets(props.presets, props) + } + + if (mode === "single") { + return + } + + return +} + +export { DatePicker } diff --git a/packages/design-system/ui/src/components/date-picker/index.ts b/packages/design-system/ui/src/components/date-picker/index.ts new file mode 100644 index 0000000000000..e79a6544b26ac --- /dev/null +++ b/packages/design-system/ui/src/components/date-picker/index.ts @@ -0,0 +1 @@ +export * from "./date-picker" diff --git a/packages/design-system/ui/src/components/drawer/drawer.stories.tsx b/packages/design-system/ui/src/components/drawer/drawer.stories.tsx new file mode 100644 index 0000000000000..2fbe8b2c534a2 --- /dev/null +++ b/packages/design-system/ui/src/components/drawer/drawer.stories.tsx @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Button } from "@/components/button" +import { Drawer } from "./drawer" + +const meta: Meta = { + title: "Components/Drawer", + component: Drawer, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + render: () => { + return ( + + + + + + + Edit Variant + + + + + + + + + + + ) + }, +} diff --git a/packages/design-system/ui/src/components/drawer/drawer.tsx b/packages/design-system/ui/src/components/drawer/drawer.tsx new file mode 100644 index 0000000000000..6f677749b5e7b --- /dev/null +++ b/packages/design-system/ui/src/components/drawer/drawer.tsx @@ -0,0 +1,175 @@ +"use client" + +import { XMark } from "@medusajs/icons" +import * as DrawerPrimitives from "@radix-ui/react-dialog" +import * as React from "react" + +import { Heading } from "@/components/heading" +import { IconButton } from "@/components/icon-button" +import { Kbd } from "@/components/kbd" +import { Text } from "@/components/text" +import { clx } from "@/utils/clx" + +const DrawerRoot = ( + props: React.ComponentPropsWithoutRef +) => { + return +} +DrawerRoot.displayName = "Drawer.Root" + +const DrawerTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +DrawerTrigger.displayName = "Drawer.Trigger" + +const DrawerClose = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +DrawerClose.displayName = "Drawer.Close" + +const DrawerPortal = (props: DrawerPrimitives.DialogPortalProps) => { + return +} +DrawerPortal.displayName = "Drawer.Portal" + +const DrawerOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +DrawerOverlay.displayName = "Drawer.Overlay" + +const DrawerContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + + + + ) +}) +DrawerContent.displayName = "Drawer.Content" + +const DrawerHeader = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<"div"> +>(({ children, className, ...props }, ref) => { + return ( +
+
{children}
+
+ esc + + + + + +
+
+ ) +}) +DrawerHeader.displayName = "Drawer.Header" + +const DrawerBody = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<"div"> +>(({ className, ...props }, ref) => { + return ( +
+ ) +}) +DrawerBody.displayName = "Drawer.Body" + +const DrawerFooter = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( +
+ ) +} +DrawerFooter.displayName = "Drawer.Footer" + +const DrawerTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + +)) +DrawerTitle.displayName = "Drawer.Title" + +const DrawerDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + +)) +DrawerDescription.displayName = "Drawer.Description" + +const Drawer = Object.assign(DrawerRoot, { + Body: DrawerBody, + Close: DrawerClose, + Content: DrawerContent, + Description: DrawerDescription, + Footer: DrawerFooter, + Header: DrawerHeader, + Title: DrawerTitle, + Trigger: DrawerTrigger, +}) + +export { Drawer } diff --git a/packages/design-system/ui/src/components/drawer/index.ts b/packages/design-system/ui/src/components/drawer/index.ts new file mode 100644 index 0000000000000..850df087947c7 --- /dev/null +++ b/packages/design-system/ui/src/components/drawer/index.ts @@ -0,0 +1 @@ +export * from "./drawer" diff --git a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.stories.tsx b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.stories.tsx new file mode 100644 index 0000000000000..dc2be4becb88e --- /dev/null +++ b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.stories.tsx @@ -0,0 +1,275 @@ +import { EllipsisHorizontal, PencilSquare, Plus, Trash } from "@medusajs/icons" +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Button } from "@/components/button" +import { IconButton } from "@/components/icon-button" +import { Select } from "@/components/select" + +import { DatePicker } from "../date-picker" +import { FocusModal } from "../focus-modal" +import { DropdownMenu } from "./dropdown-menu" + +const meta: Meta = { + title: "Components/DropdownMenu", + component: DropdownMenu, +} + +export default meta + +type Story = StoryObj + +type SortingState = "asc" | "desc" | "alpha" | "alpha-reverse" | "none" + +const SortingDemo = () => { + const [sort, setSort] = React.useState("none") + + return ( +
+ + + + + + + + setSort(v as SortingState)} + > + + No Sorting + + + + Alphabetical + A-Z + + + Reverse Alphabetical + Z-A + + + Created At - Ascending + 1 - 30 + + + Created At - Descending + 30 - 1 + + + + +
+ 
Sorting by: {sort}
+
+
+ ) +} + +export const SortingMenu: Story = { + render: () => { + return + }, +} + +const SelectDemo = () => { + const [currencies, setCurrencies] = React.useState([]) + const [regions, setRegions] = React.useState([]) + + const onSelectCurrency = (currency: string) => { + if (currencies.includes(currency)) { + setCurrencies(currencies.filter((c) => c !== currency)) + } else { + setCurrencies([...currencies, currency]) + } + } + + const onSelectRegion = (region: string) => { + if (regions.includes(region)) { + setRegions(regions.filter((r) => r !== region)) + } else { + setRegions([...regions, region]) + } + } + + return ( +
+ + + + + + + + + Currencies + { + e.preventDefault() + onSelectCurrency("EUR") + }} + > + EUR + Euro + + { + e.preventDefault() + onSelectCurrency("USD") + }} + > + USD + US Dollar + + { + e.preventDefault() + onSelectCurrency("DKK") + }} + > + DKK + Danish Krone + + + + + Regions + { + e.preventDefault() + onSelectRegion("NA") + }} + > + North America + + { + e.preventDefault() + onSelectRegion("EU") + }} + > + Europe + + { + e.preventDefault() + onSelectRegion("DK") + }} + > + Denmark + + + + +
+ 
Currencies: {currencies.join(", ")}
+ 
Regions: {regions.join(", ")}
+
+
+ ) +} + +export const SelectMenu: Story = { + render: () => { + return + }, +} + +export const SimpleMenu: Story = { + render: () => { + return ( + + + + + + + + + + Edit + + + + Add + + + + + Delete + + + + ) + }, +} + +const ComplexMenuDemo = () => { + return ( + + + + + + + + + +
+ + + + + + + + Edit + + + + Add + + + + + Delete + + +
+ + +
+
+ + +
+ + +
+ + + + ) +} + +export const ComplexMenu: Story = { + render: () => { + return + }, +} diff --git a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx new file mode 100644 index 0000000000000..4c79f60aed926 --- /dev/null +++ b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx @@ -0,0 +1,229 @@ +"use client" + +import { CheckMini, ChevronRightMini, EllipseMiniSolid } from "@medusajs/icons" +import * as Primitives from "@radix-ui/react-dropdown-menu" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const Root = Primitives.Root +Root.displayName = "DropdownMenu.Root" + +const Trigger = Primitives.Trigger +Trigger.displayName = "DropdownMenu.Trigger" + +const Group = Primitives.Group +Group.displayName = "DropdownMenu.Group" + +const SubMenu = Primitives.Sub +SubMenu.displayName = "DropdownMenu.SubMenu" + +const RadioGroup = Primitives.RadioGroup +RadioGroup.displayName = "DropdownMenu.RadioGroup" + +const SubMenuTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + +)) +SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger" + +const SubMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, collisionPadding = 8, ...props }, ref) => ( + + + +)) +SubMenuContent.displayName = "DropdownMenu.SubMenuContent" + +const Content = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { + className, + sideOffset = 8, + collisionPadding = 8, + align = "start", + ...props + }, + ref + ) => ( + + + + ) +) +Content.displayName = "DropdownMenu.Content" + +const Item = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Item.displayName = "DropdownMenu.Item" + +const CheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +CheckboxItem.displayName = "DropdownMenu.CheckboxItem" + +const RadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +RadioItem.displayName = "DropdownMenu.RadioItem" + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = "DropdownMenu.Label" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Separator.displayName = "DropdownMenu.Separator" + +const Shortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +Shortcut.displayName = "DropdownMenu.Shortcut" + +const Hint = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +Hint.displayName = "DropdownMenu.Hint" + +const DropdownMenu = Object.assign(Root, { + Trigger, + Group, + SubMenu, + SubMenuContent, + SubMenuTrigger, + Content, + Item, + CheckboxItem, + RadioGroup, + RadioItem, + Label, + Separator, + Shortcut, + Hint, +}) + +export { DropdownMenu } diff --git a/packages/design-system/ui/src/components/dropdown-menu/index.ts b/packages/design-system/ui/src/components/dropdown-menu/index.ts new file mode 100644 index 0000000000000..c4adeceeee82a --- /dev/null +++ b/packages/design-system/ui/src/components/dropdown-menu/index.ts @@ -0,0 +1 @@ +export * from "./dropdown-menu" diff --git a/packages/design-system/ui/src/components/focus-modal/focus-modal.stories.tsx b/packages/design-system/ui/src/components/focus-modal/focus-modal.stories.tsx new file mode 100644 index 0000000000000..12c484eba4898 --- /dev/null +++ b/packages/design-system/ui/src/components/focus-modal/focus-modal.stories.tsx @@ -0,0 +1,35 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Button } from "@/components/button" +import { FocusModal } from "./focus-modal" + +const meta: Meta = { + title: "Components/FocusModal", + component: FocusModal, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + render: () => { + return ( + + + + + + + + + + + + ) + }, +} diff --git a/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx b/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx new file mode 100644 index 0000000000000..b77912e70d64e --- /dev/null +++ b/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx @@ -0,0 +1,117 @@ +"use client" + +import { XMark } from "@medusajs/icons" +import * as FocusModalPrimitives from "@radix-ui/react-dialog" +import * as React from "react" + +import { IconButton } from "@/components/icon-button" +import { Kbd } from "@/components/kbd" +import { clx } from "@/utils/clx" + +const FocusModalRoot = ( + props: React.ComponentPropsWithoutRef +) => { + return +} +FocusModalRoot.displayName = "FocusModal" + +const FocusModalTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>((props, ref) => { + return +}) +FocusModalTrigger.displayName = "FocusModal.Trigger" + +const FocusModalPortal = ({ + className, + ...props +}: FocusModalPrimitives.DialogPortalProps) => { + return ( + + ) +} +FocusModalPortal.displayName = "FocusModal.Portal" + +const FocusModalOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +FocusModalOverlay.displayName = "FocusModal.Overlay" + +const FocusModalContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + + + + ) +}) +FocusModalContent.displayName = "FocusModal.Content" + +const FocusModalHeader = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<"div"> +>(({ children, className, ...props }, ref) => { + return ( +
+
+ + + + + + esc +
+ {children} +
+ ) +}) +FocusModalHeader.displayName = "FocusModal.Header" + +const FocusModalBody = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<"div"> +>(({ className, ...props }, ref) => { + return
+}) +FocusModalBody.displayName = "FocusModal.Body" + +const FocusModal = Object.assign(FocusModalRoot, { + Trigger: FocusModalTrigger, + Content: FocusModalContent, + Header: FocusModalHeader, + Body: FocusModalBody, +}) + +export { FocusModal } diff --git a/packages/design-system/ui/src/components/focus-modal/index.ts b/packages/design-system/ui/src/components/focus-modal/index.ts new file mode 100644 index 0000000000000..657b35e9fccf7 --- /dev/null +++ b/packages/design-system/ui/src/components/focus-modal/index.ts @@ -0,0 +1 @@ +export * from "./focus-modal" diff --git a/packages/design-system/ui/src/components/heading/heading.spec.tsx b/packages/design-system/ui/src/components/heading/heading.spec.tsx new file mode 100644 index 0000000000000..0ba7bfcc685b5 --- /dev/null +++ b/packages/design-system/ui/src/components/heading/heading.spec.tsx @@ -0,0 +1,21 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Heading } from "./heading" + +describe("Heading", () => { + it("should render a h1 successfully", async () => { + render(Header) + expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument() + }) + + it("should render a h2 successfully", async () => { + render(Header) + expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument() + }) + + it("should render a h3 successfully", async () => { + render(Header) + expect(screen.getByRole("heading", { level: 3 })).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/ui/src/components/heading/heading.stories.tsx b/packages/design-system/ui/src/components/heading/heading.stories.tsx new file mode 100644 index 0000000000000..767643edbdaae --- /dev/null +++ b/packages/design-system/ui/src/components/heading/heading.stories.tsx @@ -0,0 +1,44 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Heading } from "./heading" + +const meta: Meta = { + title: "Components/Heading", + component: Heading, + argTypes: { + level: { + control: { + type: "select", + }, + options: ["h1", "h2", "h3"], + }, + }, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const H1: Story = { + args: { + level: "h1", + children: "I am a H1 heading", + }, +} + +export const H2: Story = { + args: { + level: "h2", + children: "I am a H2 heading", + }, +} + +export const H3: Story = { + args: { + level: "h3", + children: "I am a H3 heading", + }, +} diff --git a/packages/design-system/ui/src/components/heading/heading.tsx b/packages/design-system/ui/src/components/heading/heading.tsx new file mode 100644 index 0000000000000..6ab4129c3b937 --- /dev/null +++ b/packages/design-system/ui/src/components/heading/heading.tsx @@ -0,0 +1,33 @@ +import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const headingVariants = cva("font-sans font-medium", { + variants: { + level: { + h1: "h1-core", + h2: "h2-core", + h3: "h3-core", + }, + }, + defaultVariants: { + level: "h1", + }, +}) + +type HeadingProps = VariantProps & + React.HTMLAttributes + +const Heading = ({ level, className, ...props }: HeadingProps) => { + const Component = level ? level : "h1" + + return ( + + ) +} + +export { Heading, headingVariants } diff --git a/packages/design-system/ui/src/components/heading/index.ts b/packages/design-system/ui/src/components/heading/index.ts new file mode 100644 index 0000000000000..6528f482fafad --- /dev/null +++ b/packages/design-system/ui/src/components/heading/index.ts @@ -0,0 +1 @@ +export * from "./heading" diff --git a/packages/design-system/ui/src/components/hint/hint.stories.tsx b/packages/design-system/ui/src/components/hint/hint.stories.tsx new file mode 100644 index 0000000000000..9ec16f7693efa --- /dev/null +++ b/packages/design-system/ui/src/components/hint/hint.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from "@storybook/react" +import { Hint } from "./hint" + +const meta: Meta = { + title: "Components/Hint", + component: Hint, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Info: Story = { + args: { + children: "This is a hint text to help user.", + }, +} + +export const Error: Story = { + args: { + variant: "error", + children: "This is a hint text to help user.", + }, +} diff --git a/packages/design-system/ui/src/components/hint/hint.tsx b/packages/design-system/ui/src/components/hint/hint.tsx new file mode 100644 index 0000000000000..d6598a18a172d --- /dev/null +++ b/packages/design-system/ui/src/components/hint/hint.tsx @@ -0,0 +1,41 @@ +import { VariantProps, cva } from "class-variance-authority" +import * as React from "react" + +import { ExclamationCircleSolid } from "@medusajs/icons" +import { clx } from "../../utils/clx" + +const hintVariants = cva( + "txt-compact-xsmall inline-flex items-center gap-x-2", + { + variants: { + variant: { + info: "text-ui-fg-subtle", + error: "text-ui-fg-error", + }, + }, + defaultVariants: { + variant: "info", + }, + } +) + +type HintProps = VariantProps & + React.ComponentPropsWithoutRef<"span"> + +const Hint = React.forwardRef( + ({ className, variant = "info", children, ...props }, ref) => { + return ( + + {variant === "error" && } + {children} + + ) + } +) +Hint.displayName = "Hint" + +export { Hint } diff --git a/packages/design-system/ui/src/components/hint/index.ts b/packages/design-system/ui/src/components/hint/index.ts new file mode 100644 index 0000000000000..875c74feb1adf --- /dev/null +++ b/packages/design-system/ui/src/components/hint/index.ts @@ -0,0 +1 @@ +export * from "./hint" diff --git a/packages/design-system/ui/src/components/icon-badge/icon-badge.stories.tsx b/packages/design-system/ui/src/components/icon-badge/icon-badge.stories.tsx new file mode 100644 index 0000000000000..71e96740f4561 --- /dev/null +++ b/packages/design-system/ui/src/components/icon-badge/icon-badge.stories.tsx @@ -0,0 +1,114 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { BuildingTax } from "@medusajs/icons" +import { IconBadge } from "./icon-badge" + +const meta: Meta = { + title: "Components/IconBadge", + component: IconBadge, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const GreyBase: Story = { + args: { + children: , + color: "grey", + size: "base", + }, +} + +export const GreyLarge: Story = { + args: { + children: , + color: "grey", + size: "large", + }, +} + +export const BlueBase: Story = { + args: { + children: , + color: "blue", + + size: "base", + }, +} + +export const BlueLarge: Story = { + args: { + children: , + color: "blue", + size: "large", + }, +} + +export const GreenBase: Story = { + args: { + children: , + color: "green", + size: "base", + }, +} + +export const GreenLarge: Story = { + args: { + children: , + color: "green", + size: "large", + }, +} + +export const RedBase: Story = { + args: { + children: , + color: "red", + size: "base", + }, +} + +export const RedLarge: Story = { + args: { + children: , + color: "red", + size: "large", + }, +} + +export const OrangeBase: Story = { + args: { + children: , + color: "orange", + size: "base", + }, +} + +export const OrangeLarge: Story = { + args: { + children: , + color: "orange", + size: "large", + }, +} + +export const PurpleBase: Story = { + args: { + children: , + color: "purple", + size: "base", + }, +} + +export const PurpleLarge: Story = { + args: { + children: , + color: "purple", + size: "large", + }, +} diff --git a/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx b/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx new file mode 100644 index 0000000000000..d0a86878ca191 --- /dev/null +++ b/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx @@ -0,0 +1,58 @@ +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react" + +import { badgeColorVariants } from "@/components/badge" +import { clx } from "@/utils/clx" + +const iconBadgeVariants = cva( + "flex items-center justify-center overflow-hidden rounded-md border", + { + variants: { + size: { + base: "h-6 w-6", + large: "h-7 w-7", + }, + }, + } +) + +interface IconBadgeProps + extends Omit, "color">, + VariantProps, + VariantProps { + asChild?: boolean +} + +const IconBadge = React.forwardRef( + ( + { + children, + className, + color = "grey", + size = "base", + asChild = false, + ...props + }, + ref + ) => { + const Component = asChild ? Slot : "span" + + return ( + + {children} + + ) + } +) +IconBadge.displayName = "IconBadge" + +export { IconBadge } diff --git a/packages/design-system/ui/src/components/icon-badge/index.ts b/packages/design-system/ui/src/components/icon-badge/index.ts new file mode 100644 index 0000000000000..a3342448d70c8 --- /dev/null +++ b/packages/design-system/ui/src/components/icon-badge/index.ts @@ -0,0 +1 @@ +export * from "./icon-badge" diff --git a/packages/design-system/ui/src/components/icon-button/icon-button.spec.tsx b/packages/design-system/ui/src/components/icon-button/icon-button.spec.tsx new file mode 100644 index 0000000000000..9de04a81abb4d --- /dev/null +++ b/packages/design-system/ui/src/components/icon-button/icon-button.spec.tsx @@ -0,0 +1,30 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Plus } from "@medusajs/icons" +import { IconButton } from "./icon-button" + +describe("IconButton", () => { + it("renders a IconButton", () => { + render( + + + + ) + const button = screen.getByRole("button") + expect(button).toBeInTheDocument() + }) + + it("renders a button as a link", () => { + render( + + + + + + ) + + const button = screen.getByRole("link") + expect(button).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/ui/src/components/icon-button/icon-button.stories.tsx b/packages/design-system/ui/src/components/icon-button/icon-button.stories.tsx new file mode 100644 index 0000000000000..98cd8ea8d9cb7 --- /dev/null +++ b/packages/design-system/ui/src/components/icon-button/icon-button.stories.tsx @@ -0,0 +1,83 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Plus } from "@medusajs/icons" +import { IconButton } from "./icon-button" + +const meta: Meta = { + title: "Components/IconButton", + component: IconButton, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const BasePrimary: Story = { + args: { + variant: "primary", + size: "base", + children: , + }, +} + +export const BaseTransparent: Story = { + args: { + variant: "transparent", + size: "base", + children: , + }, +} + +export const LargePrimary: Story = { + args: { + variant: "primary", + size: "large", + children: , + }, +} + +export const LargeTransparent: Story = { + args: { + variant: "transparent", + size: "large", + children: , + }, +} + +export const XLargePrimary: Story = { + args: { + variant: "primary", + size: "xlarge", + children: , + }, +} + +export const XLargeTransparent: Story = { + args: { + variant: "transparent", + size: "xlarge", + children: , + }, +} + +export const Disabled: Story = { + args: { + variant: "primary", + size: "base", + children: , + disabled: true, + }, +} + +export const IsLoading: Story = { + args: { + variant: "primary", + size: "base", + children: , + isLoading: true, + }, +} diff --git a/packages/design-system/ui/src/components/icon-button/icon-button.tsx b/packages/design-system/ui/src/components/icon-button/icon-button.tsx new file mode 100644 index 0000000000000..a5ba58e3967a4 --- /dev/null +++ b/packages/design-system/ui/src/components/icon-button/icon-button.tsx @@ -0,0 +1,105 @@ +import { Spinner } from "@medusajs/icons" +import { Slot } from "@radix-ui/react-slot" +import { VariantProps, cva } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const iconButtonVariants = cva( + clx( + "transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none", + "disabled:bg-ui-bg-disabled disabled:shadow-buttons-neutral disabled:text-ui-fg-disabled disabled:after:hidden" + ), + { + variants: { + variant: { + primary: clx( + "shadow-buttons-neutral text-ui-fg-subtle bg-ui-button-neutral after:button-neutral-gradient", + "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient", + "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient", + "focus:shadow-buttons-neutral-focus", + "after:absolute after:inset-0 after:content-['']" + ), + transparent: clx( + "text-ui-fg-subtle bg-ui-button-transparent", + "hover:bg-ui-button-transparent-hover", + "active:bg-ui-button-transparent-pressed", + "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base", + "disabled:!bg-transparent disabled:!shadow-none" + ), + }, + size: { + base: "h-8 w-8 p-1.5", + large: "h-10 w-10 p-2.5", + xlarge: "h-12 w-12 p-3.5", + }, + }, + defaultVariants: { + variant: "primary", + size: "base", + }, + } +) + +interface IconButtonProps + extends React.ComponentPropsWithoutRef<"button">, + VariantProps { + asChild?: boolean + isLoading?: boolean +} + +const IconButton = React.forwardRef( + ( + { + variant = "primary", + size = "base", + asChild = false, + className, + children, + isLoading = false, + disabled, + ...props + }, + ref + ) => { + const Component = asChild ? Slot : "button" + + /** + * In the case of a button where asChild is true, and isLoading is true, we ensure that + * only on element is passed as a child to the Slot component. This is because the Slot + * component only accepts a single child. + */ + const renderInner = () => { + if (isLoading) { + return ( + +
+ +
+ {children} + + ) + } + + return children + } + + return ( + + {renderInner()} + + ) + } +) +IconButton.displayName = "IconButton" + +export { IconButton, iconButtonVariants } diff --git a/packages/design-system/ui/src/components/icon-button/index.ts b/packages/design-system/ui/src/components/icon-button/index.ts new file mode 100644 index 0000000000000..46f00cbe68b4a --- /dev/null +++ b/packages/design-system/ui/src/components/icon-button/index.ts @@ -0,0 +1 @@ +export * from "./icon-button" diff --git a/packages/design-system/ui/src/components/input/index.ts b/packages/design-system/ui/src/components/input/index.ts new file mode 100644 index 0000000000000..be91c8ec4b0d9 --- /dev/null +++ b/packages/design-system/ui/src/components/input/index.ts @@ -0,0 +1 @@ +export * from "./input" diff --git a/packages/design-system/ui/src/components/input/input.spec.tsx b/packages/design-system/ui/src/components/input/input.spec.tsx new file mode 100644 index 0000000000000..e39aa37113f02 --- /dev/null +++ b/packages/design-system/ui/src/components/input/input.spec.tsx @@ -0,0 +1,11 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Input } from "./input" + +describe("Input", () => { + it("should render the component", () => { + render() + expect(screen.getByRole("textbox")).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/ui/src/components/input/input.stories.tsx b/packages/design-system/ui/src/components/input/input.stories.tsx new file mode 100644 index 0000000000000..0ac0ec5e6d05c --- /dev/null +++ b/packages/design-system/ui/src/components/input/input.stories.tsx @@ -0,0 +1,55 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Input } from "./input" + +const meta: Meta = { + title: "Components/Input", + component: Input, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + placeholder: "Placeholder", + }, +} + +export const Disabled: Story = { + args: { + value: "Floyd Mayweather", + disabled: true, + }, +} + +export const Invalid: Story = { + args: { + placeholder: "Placeholder", + required: true, + }, +} + +export const Password: Story = { + args: { + type: "password", + }, +} + +export const Search: Story = { + args: { + type: "search", + placeholder: "Search", + }, +} + +export const Small: Story = { + args: { + size: "small", + placeholder: "Placeholder", + }, +} diff --git a/packages/design-system/ui/src/components/input/input.tsx b/packages/design-system/ui/src/components/input/input.tsx new file mode 100644 index 0000000000000..74efff00eba97 --- /dev/null +++ b/packages/design-system/ui/src/components/input/input.tsx @@ -0,0 +1,104 @@ +"use client" + +import { Eye, EyeSlash, MagnifyingGlassMini } from "@medusajs/icons" +import { VariantProps, cva } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const inputBaseStyles = clx( + "caret-ui-fg-base bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-borders-base placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full appearance-none rounded-md outline-none", + "focus:shadow-borders-interactive-with-active", + "disabled:text-ui-fg-disabled disabled:!bg-ui-bg-disabled disabled:placeholder-ui-fg-disabled disabled:cursor-not-allowed", + "aria-[invalid=true]:!shadow-borders-error invalid:!shadow-borders-error" +) + +const inputVariants = cva( + clx( + inputBaseStyles, + "[&::--webkit-search-cancel-button]:hidden [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden" + ), + { + variants: { + size: { + base: "txt-compact-medium h-10 px-3 py-[9px]", + small: "txt-compact-small h-8 px-2 py-[5px]", + }, + }, + defaultVariants: { + size: "base", + }, + } +) + +const Input = React.forwardRef< + HTMLInputElement, + VariantProps & + Omit, "size"> +>(({ className, type, size = "base", ...props }, ref) => { + const [typeState, setTypeState] = React.useState(type) + + const isPassword = type === "password" + const isSearch = type === "search" + + return ( +
+ + {isSearch && ( +
+ +
+ )} + {isPassword && ( +
+ +
+ )} +
+ ) +}) +Input.displayName = "Input" + +export { Input, inputBaseStyles } diff --git a/packages/design-system/ui/src/components/kbd/index.ts b/packages/design-system/ui/src/components/kbd/index.ts new file mode 100644 index 0000000000000..3151d290e8c90 --- /dev/null +++ b/packages/design-system/ui/src/components/kbd/index.ts @@ -0,0 +1 @@ +export * from "./kbd" diff --git a/packages/design-system/ui/src/components/kbd/kbd.stories.tsx b/packages/design-system/ui/src/components/kbd/kbd.stories.tsx new file mode 100644 index 0000000000000..381d573a6a540 --- /dev/null +++ b/packages/design-system/ui/src/components/kbd/kbd.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Kbd } from "./kbd" + +const meta: Meta = { + title: "Components/Kbd", + component: Kbd, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + children: "⌘", + }, +} diff --git a/packages/design-system/ui/src/components/kbd/kbd.tsx b/packages/design-system/ui/src/components/kbd/kbd.tsx new file mode 100644 index 0000000000000..99f0352d2a710 --- /dev/null +++ b/packages/design-system/ui/src/components/kbd/kbd.tsx @@ -0,0 +1,25 @@ +import * as React from "react" + +import { clx } from "@/utils/clx" + +const Kbd = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"kbd"> +>(({ children, className, ...props }, ref) => { + return ( + + {children} + + ) +}) +Kbd.displayName = "Kbd" + +export { Kbd } diff --git a/packages/design-system/ui/src/components/label/index.ts b/packages/design-system/ui/src/components/label/index.ts new file mode 100644 index 0000000000000..99f94d6155840 --- /dev/null +++ b/packages/design-system/ui/src/components/label/index.ts @@ -0,0 +1 @@ +export * from "./label" diff --git a/packages/design-system/ui/src/components/label/label.spec.tsx b/packages/design-system/ui/src/components/label/label.spec.tsx new file mode 100644 index 0000000000000..6774dea3dae3e --- /dev/null +++ b/packages/design-system/ui/src/components/label/label.spec.tsx @@ -0,0 +1,12 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Label } from "./label" + +test("renders a label", () => { + render() + + const text = screen.getByText("I am a label") + expect(text).toBeInTheDocument() + expect(text.tagName).toBe("LABEL") +}) diff --git a/packages/design-system/ui/src/components/label/label.stories.tsx b/packages/design-system/ui/src/components/label/label.stories.tsx new file mode 100644 index 0000000000000..d805a889e1804 --- /dev/null +++ b/packages/design-system/ui/src/components/label/label.stories.tsx @@ -0,0 +1,85 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Label } from "./label" + +const meta: Meta = { + title: "Components/Label", + component: Label, + argTypes: { + size: { + control: { + type: "select", + }, + options: ["small", "xsmall", "base", "large"], + }, + weight: { + control: { + type: "select", + }, + options: ["regular", "plus"], + }, + }, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const BaseRegular: Story = { + args: { + size: "base", + weight: "regular", + children: "I am a label", + }, +} + +export const BasePlus: Story = { + args: { + size: "base", + weight: "plus", + children: "I am a label", + }, +} + +export const LargeRegular: Story = { + args: { + size: "large", + weight: "regular", + children: "I am a label", + }, +} + +export const LargePlus: Story = { + args: { + size: "large", + weight: "plus", + children: "I am a label", + }, +} + +export const SmallRegular: Story = { + args: { + size: "small", + weight: "regular", + children: "I am a label", + }, +} + +export const SmallPlus: Story = { + args: { + size: "small", + weight: "plus", + children: "I am a label", + }, +} + +export const XSmallRegular: Story = { + args: { + size: "xsmall", + weight: "regular", + children: "I am a label", + }, +} diff --git a/packages/design-system/ui/src/components/label/label.tsx b/packages/design-system/ui/src/components/label/label.tsx new file mode 100644 index 0000000000000..e0cc159b82d17 --- /dev/null +++ b/packages/design-system/ui/src/components/label/label.tsx @@ -0,0 +1,45 @@ +"use client" + +import * as Primitives from "@radix-ui/react-label" +import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const labelVariants = cva("font-sans", { + variants: { + size: { + xsmall: "txt-compact-xsmall", + small: "txt-compact-small", + base: "txt-compact-medium", + large: "txt-compact-large", + }, + weight: { + regular: "font-normal", + plus: "font-medium", + }, + }, + defaultVariants: { + size: "base", + weight: "regular", + }, +}) + +interface LabelProps + extends React.ComponentPropsWithoutRef<"label">, + VariantProps {} + +const Label = React.forwardRef( + ({ className, size = "base", weight = "regular", ...props }, ref) => { + return ( + + ) + } +) +Label.displayName = "Label" + +export { Label } diff --git a/packages/design-system/ui/src/components/popover/index.ts b/packages/design-system/ui/src/components/popover/index.ts new file mode 100644 index 0000000000000..137ef5d36262b --- /dev/null +++ b/packages/design-system/ui/src/components/popover/index.ts @@ -0,0 +1 @@ +export * from "./popover" diff --git a/packages/design-system/ui/src/components/popover/popover.tsx b/packages/design-system/ui/src/components/popover/popover.tsx new file mode 100644 index 0000000000000..1e43d91c7f0e6 --- /dev/null +++ b/packages/design-system/ui/src/components/popover/popover.tsx @@ -0,0 +1,95 @@ +import * as Primitives from "@radix-ui/react-popover" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const Root = ( + props: React.ComponentPropsWithoutRef +) => { + return +} +Root.displayName = "Popover" + +const Trigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>((props, ref) => { + return +}) +Trigger.displayName = "Popover.Trigger" + +const Anchor = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>((props, ref) => { + return +}) +Anchor.displayName = "Popover.Anchor" + +const Close = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>((props, ref) => { + return +}) +Close.displayName = "Popover.Close" + +const Content = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { + className, + sideOffset = 8, + side = "bottom", + align = "start", + collisionPadding, + ...props + }, + ref + ) => { + return ( + + + + ) + } +) +Content.displayName = "Popover.Content" + +const Seperator = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<"div"> +>(({ className, ...props }, ref) => { + return ( +
+ ) +}) +Seperator.displayName = "Popover.Seperator" + +const Popover = Object.assign(Root, { + Trigger, + Anchor, + Close, + Content, + Seperator, +}) + +export { Popover } diff --git a/packages/design-system/ui/src/components/progress-accordion/index.ts b/packages/design-system/ui/src/components/progress-accordion/index.ts new file mode 100644 index 0000000000000..6c38cd2420f26 --- /dev/null +++ b/packages/design-system/ui/src/components/progress-accordion/index.ts @@ -0,0 +1 @@ +export * from "./progress-accordion" diff --git a/packages/design-system/ui/src/components/progress-accordion/progress-accordion.stories.tsx b/packages/design-system/ui/src/components/progress-accordion/progress-accordion.stories.tsx new file mode 100644 index 0000000000000..09d6298aafdda --- /dev/null +++ b/packages/design-system/ui/src/components/progress-accordion/progress-accordion.stories.tsx @@ -0,0 +1,64 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Container } from "@/components/container" +import { ProgressAccordion } from "./progress-accordion" + +const meta: Meta = { + title: "Components/ProgressAccordion", + component: ProgressAccordion, + parameters: { + layout: "fullscreen", + }, +} + +export default meta + +type Story = StoryObj + +const AccordionDemo = () => { + const [value, setValue] = React.useState(["1"]) + + return ( +
+ + + + Trigger 1 + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. A + recusandae officiis aliquam quia, natus saepe obcaecati eligendi + non animi fuga culpa, cum unde consequuntur architecto quos + reiciendis deleniti eos iste! +
+ + + + Trigger 2 + +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. A + recusandae officiis aliquam quia, natus saepe obcaecati eligendi + non animi fuga culpa, cum unde consequuntur architecto quos + reiciendis deleniti eos iste! +
+ + + + +
+ ) +} + +export const Default: Story = { + render: () => { + return + }, + args: {}, +} diff --git a/packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx b/packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx new file mode 100644 index 0000000000000..1bdc4ba200b66 --- /dev/null +++ b/packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx @@ -0,0 +1,120 @@ +"use client" + +import { + CheckCircleSolid, + CircleDottedLine, + CircleHalfSolid, + Plus, +} from "@medusajs/icons" +import * as Primitves from "@radix-ui/react-accordion" +import * as React from "react" + +import { ProgressStatus } from "@/types" +import { clx } from "@/utils/clx" +import { IconButton } from "../icon-button" + +const Root = (props: React.ComponentPropsWithoutRef) => { + return +} +Root.displayName = "ProgressAccordion" + +const Item = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +Item.displayName = "ProgressAccordion.Item" + +interface HeaderProps + extends React.ComponentPropsWithoutRef { + status?: ProgressStatus +} + +interface StatusIndicatorProps extends React.ComponentPropsWithoutRef<"span"> { + status: ProgressStatus +} + +const ProgressIndicator = ({ status, ...props }: StatusIndicatorProps) => { + const Icon = React.useMemo(() => { + switch (status) { + case "not-started": + return CircleDottedLine + case "in-progress": + return CircleHalfSolid + case "completed": + return CheckCircleSolid + default: + return CircleDottedLine + } + }, [status]) + + return ( + + + + ) +} + +const Header = React.forwardRef< + React.ElementRef, + HeaderProps +>(({ className, status = "not-started", children, ...props }, ref) => { + return ( + + + {children} + + + + + + + ) +}) +Header.displayName = "ProgressAccordion.Header" + +const Content = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +Content.displayName = "ProgressAccordion.Content" + +const ProgressAccordion = Object.assign(Root, { + Item, + Header, + Content, +}) + +export { ProgressAccordion } diff --git a/packages/design-system/ui/src/components/progress-tabs/index.ts b/packages/design-system/ui/src/components/progress-tabs/index.ts new file mode 100644 index 0000000000000..894569f0a1e33 --- /dev/null +++ b/packages/design-system/ui/src/components/progress-tabs/index.ts @@ -0,0 +1 @@ +export * from "./progress-tabs" diff --git a/packages/design-system/ui/src/components/progress-tabs/progress-tabs.stories.tsx b/packages/design-system/ui/src/components/progress-tabs/progress-tabs.stories.tsx new file mode 100644 index 0000000000000..c81b293a71ae2 --- /dev/null +++ b/packages/design-system/ui/src/components/progress-tabs/progress-tabs.stories.tsx @@ -0,0 +1,50 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Container } from "../container" +import { ProgressTabs } from "./progress-tabs" + +const meta: Meta = { + title: "Components/ProgressTabs", + component: ProgressTabs, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +const Demo = () => { + return ( +
+ + + + Tab 1 + Tab 2 + + Tab 3 + + +
+ + Tab 1 content + + + Tab 2 content + + + Tab 3 content + +
+ + +
+ ) +} + +export const Default: Story = { + render: () => , +} diff --git a/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx b/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx new file mode 100644 index 0000000000000..72a19983059c0 --- /dev/null +++ b/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx @@ -0,0 +1,114 @@ +"use client" + +import { + CheckCircleSolid, + CircleDottedLine, + CircleHalfSolid, +} from "@medusajs/icons" +import * as ProgressTabsPrimitives from "@radix-ui/react-tabs" +import * as React from "react" + +import { ProgressStatus } from "@/types" +import { clx } from "@/utils/clx" + +const ProgressTabsRoot = (props: ProgressTabsPrimitives.TabsProps) => { + return +} +ProgressTabsRoot.displayName = "ProgressTabs" + +interface IndicatorProps + extends Omit, "children"> { + status?: ProgressStatus +} + +const ProgressIndicator = ({ status, className, ...props }: IndicatorProps) => { + const Icon = React.useMemo(() => { + switch (status) { + case "not-started": + return CircleDottedLine + case "in-progress": + return CircleHalfSolid + case "completed": + return CheckCircleSolid + default: + return CircleDottedLine + } + }, [status]) + + return ( + + + + ) +} + +interface ProgressTabsTriggerProps + extends Omit< + React.ComponentPropsWithoutRef, + "asChild" + > { + status?: ProgressStatus +} + +const ProgressTabsTrigger = React.forwardRef< + React.ElementRef, + ProgressTabsTriggerProps +>(({ className, children, status = "not-started", ...props }, ref) => ( + + + {children} + +)) +ProgressTabsTrigger.displayName = "ProgressTabs.Trigger" + +const ProgressTabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +ProgressTabsList.displayName = "ProgressTabs.List" + +const ProgressTabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +ProgressTabsContent.displayName = "ProgressTabs.Content" + +const ProgressTabs = Object.assign(ProgressTabsRoot, { + Trigger: ProgressTabsTrigger, + List: ProgressTabsList, + Content: ProgressTabsContent, +}) + +export { ProgressTabs } diff --git a/packages/design-system/ui/src/components/prompt/index.ts b/packages/design-system/ui/src/components/prompt/index.ts new file mode 100644 index 0000000000000..b90ccc48d01d1 --- /dev/null +++ b/packages/design-system/ui/src/components/prompt/index.ts @@ -0,0 +1 @@ +export * from "./prompt" diff --git a/packages/design-system/ui/src/components/prompt/prompt.spec.tsx b/packages/design-system/ui/src/components/prompt/prompt.spec.tsx new file mode 100644 index 0000000000000..2d274e3fd0c95 --- /dev/null +++ b/packages/design-system/ui/src/components/prompt/prompt.spec.tsx @@ -0,0 +1,92 @@ +import { + RenderResult, + cleanup, + fireEvent, + render, +} from "@testing-library/react" +import * as React from "react" + +import { Prompt } from "./prompt" + +import { Button } from "@/components/button" + +const TRIGGER_TEXT = "Open" +const TITLE_TEXT = "Delete something" +const DESCRIPTION_TEXT = "Are you sure? This cannot be undone." +const CANCEL_TEXT = "Cancel" +const CONFIRM_TEXT = "Confirm" + +describe("Prompt", () => { + let rendered: RenderResult + let trigger: HTMLElement + + beforeEach(() => { + rendered = render( + + + + + + + {TITLE_TEXT} + {DESCRIPTION_TEXT} + + + {CANCEL_TEXT} + {CONFIRM_TEXT} + + + + ) + + trigger = rendered.getByText(TRIGGER_TEXT) + }) + + afterEach(() => { + cleanup() + }) + + it("renders a basic alert dialog when the trigger is clicked", async () => { + fireEvent.click(trigger) + + const title = await rendered.findByText(TITLE_TEXT) + const description = await rendered.findByText(DESCRIPTION_TEXT) + + expect(title).toBeInTheDocument() + expect(description).toBeInTheDocument() + }) + + it("close the dialog when the cancel button is clicked", async () => { + fireEvent.click(trigger) + + const title = rendered.queryByText(TITLE_TEXT) + const description = rendered.queryByText(DESCRIPTION_TEXT) + + expect(title).toBeInTheDocument() + expect(description).toBeInTheDocument() + + const cancelButton = await rendered.findByText(CANCEL_TEXT) + + fireEvent.click(cancelButton) + + expect(title).not.toBeInTheDocument() + expect(description).not.toBeInTheDocument() + }) + + it("close the dialog when the confirm button is clicked", async () => { + fireEvent.click(trigger) + + const title = rendered.queryByText(TITLE_TEXT) + const description = rendered.queryByText(DESCRIPTION_TEXT) + + expect(title).toBeInTheDocument() + expect(description).toBeInTheDocument() + + const confirmButton = await rendered.findByText(CONFIRM_TEXT) + + fireEvent.click(confirmButton) + + expect(title).not.toBeInTheDocument() + expect(description).not.toBeInTheDocument() + }) +}) diff --git a/packages/design-system/ui/src/components/prompt/prompt.stories.tsx b/packages/design-system/ui/src/components/prompt/prompt.stories.tsx new file mode 100644 index 0000000000000..e9551b15034f2 --- /dev/null +++ b/packages/design-system/ui/src/components/prompt/prompt.stories.tsx @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Button } from "@/components/button" +import { Prompt } from "./prompt" + +const meta: Meta = { + title: "Components/Prompt", + component: Prompt, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + render: () => { + return ( + + + + + + + Delete something + + Are you sure? This cannot be undone. + + + + Cancel + Delete + + + + ) + }, +} diff --git a/packages/design-system/ui/src/components/prompt/prompt.tsx b/packages/design-system/ui/src/components/prompt/prompt.tsx new file mode 100644 index 0000000000000..7aaddc143259c --- /dev/null +++ b/packages/design-system/ui/src/components/prompt/prompt.tsx @@ -0,0 +1,149 @@ +"use client" + +import * as Primitives from "@radix-ui/react-alert-dialog" +import * as React from "react" + +import { Button } from "@/components/button" +import { Heading } from "@/components/heading" +import { clx } from "@/utils/clx" + +const Root = Primitives.AlertDialog +Root.displayName = "Prompt.Root" + +const Trigger = Primitives.Trigger +Trigger.displayName = "Prompt.Trigger" + +const Portal = ({ className, ...props }: Primitives.AlertDialogPortalProps) => { + return +} +Portal.displayName = "Prompt.Portal" + +const Overlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +Overlay.displayName = "Prompt.Overlay" + +const Title = React.forwardRef< + React.ElementRef, + Omit, "asChild"> +>(({ className, children, ...props }, ref) => { + return ( + + + {children} + + + ) +}) +Title.displayName = "Prompt.Title" + +const Content = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + + + + ) +}) +Content.displayName = "Prompt.Content" + +const Description = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +Description.displayName = "Prompt.Description" + +const Action = React.forwardRef< + React.ElementRef, + Omit, "asChild"> +>(({ className, children, type, ...props }, ref) => { + return ( + + + + ) +}) +Action.displayName = "Prompt.Action" + +const Cancel = React.forwardRef< + React.ElementRef, + Omit, "asChild"> +>(({ className, children, ...props }, ref) => { + return ( + + + + ) +}) +Cancel.displayName = "Prompt.Cancel" + +const Header = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( +
+ ) +} + +const Footer = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( +
+ ) +} + +const Prompt = Object.assign(Root, { + Trigger, + Content, + Title, + Description, + Action, + Cancel, + Header, + Footer, +}) + +export { Prompt } diff --git a/packages/design-system/ui/src/components/radio-group/index.ts b/packages/design-system/ui/src/components/radio-group/index.ts new file mode 100644 index 0000000000000..eac62d97325a3 --- /dev/null +++ b/packages/design-system/ui/src/components/radio-group/index.ts @@ -0,0 +1 @@ +export * from "./radio-group" diff --git a/packages/design-system/ui/src/components/radio-group/radio-group.stories.tsx b/packages/design-system/ui/src/components/radio-group/radio-group.stories.tsx new file mode 100644 index 0000000000000..1ccdccb4a80cc --- /dev/null +++ b/packages/design-system/ui/src/components/radio-group/radio-group.stories.tsx @@ -0,0 +1,161 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Label } from "@/components/label" +import { Text } from "@/components/text" +import { RadioGroup } from "./radio-group" + +const meta: Meta = { + title: "Components/RadioGroup", + component: RadioGroup, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + render: () => { + return ( + + + + + + ) + }, +} + +export const WithLabel: Story = { + render: () => { + return ( + +
+ + +
+
+ + +
+
+ + +
+ + ) + }, +} + +export const WithLabelAndDescription: Story = { + render: () => { + return ( + +
+ +
+ + + The quick brown fox jumps over a lazy dog. + +
+
+
+ +
+ + + The quick brown fox jumps over a lazy dog. + +
+
+
+ +
+ + + The quick brown fox jumps over a lazy dog. + +
+
+ + ) + }, +} + +export const Disabled: Story = { + render: () => { + return ( + + + + + + ) + }, +} + +export const ChoiceBox: Story = { + render: () => { + return ( + + + + + + ) + }, +} + +export const ChoiceBoxDisabledSelected: Story = { + render: () => { + return ( + + + + + + ) + }, +} diff --git a/packages/design-system/ui/src/components/radio-group/radio-group.tsx b/packages/design-system/ui/src/components/radio-group/radio-group.tsx new file mode 100644 index 0000000000000..c9d0da85a5abc --- /dev/null +++ b/packages/design-system/ui/src/components/radio-group/radio-group.tsx @@ -0,0 +1,130 @@ +"use client" + +import * as Primitives from "@radix-ui/react-radio-group" +import * as React from "react" + +import { clx } from "@/utils/clx" +import { Hint } from "../hint" +import { Label } from "../label" + +const Root = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +Root.displayName = "RadioGroup.Root" + +const Indicator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + +
+ + ) +}) +Indicator.displayName = "RadioGroup.Indicator" + +const Item = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + +
+ +
+ + ) +}) +Item.displayName = "RadioGroup.Item" + +interface ChoiceBoxProps + extends React.ComponentPropsWithoutRef { + label: string + description: string +} + +const ChoiceBox = React.forwardRef< + React.ElementRef, + ChoiceBoxProps +>(({ className, id, label, description, ...props }, ref) => { + const generatedId = React.useId() + + if (!id) { + id = generatedId + } + + const descriptionId = `${id}-description` + + return ( + +
+
+ +
+
+
+ + + {description} + +
+ + ) +}) +ChoiceBox.displayName = "RadioGroup.ChoiceBox" + +const RadioGroup = Object.assign(Root, { Item, ChoiceBox }) + +export { RadioGroup } diff --git a/packages/design-system/ui/src/components/select/index.ts b/packages/design-system/ui/src/components/select/index.ts new file mode 100644 index 0000000000000..7f869377f121a --- /dev/null +++ b/packages/design-system/ui/src/components/select/index.ts @@ -0,0 +1 @@ +export * from "./select" diff --git a/packages/design-system/ui/src/components/select/select.stories.tsx b/packages/design-system/ui/src/components/select/select.stories.tsx new file mode 100644 index 0000000000000..e1729c794ed90 --- /dev/null +++ b/packages/design-system/ui/src/components/select/select.stories.tsx @@ -0,0 +1,219 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Select } from "./select" + +const meta: Meta = { + title: "Components/Select", + component: Select, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +const data = [ + { + label: "Shirts", + items: [ + { + value: "dress-shirt-striped", + label: "Striped Dress Shirt", + }, + { + value: "relaxed-button-down", + label: "Relaxed Fit Button Down", + }, + { + value: "slim-button-down", + label: "Slim Fit Button Down", + }, + { + value: "dress-shirt-solid", + label: "Solid Dress Shirt", + }, + { + value: "dress-shirt-check", + label: "Check Dress Shirt", + }, + ], + }, + { + label: "T-Shirts", + items: [ + { + value: "v-neck", + label: "V-Neck", + }, + { + value: "crew-neck", + label: "Crew Neck", + }, + { + value: "henley", + label: "Henley", + }, + { + value: "polo", + label: "Polo", + }, + { + value: "mock-neck", + label: "Mock Neck", + }, + { + value: "turtleneck", + label: "Turtleneck", + }, + { + value: "scoop-neck", + label: "Scoop Neck", + }, + ], + }, +] + +export const Default: Story = { + render: () => { + return ( +
+ +
+ ) + }, +} + +export const Disabled: Story = { + render: () => { + return ( +
+ +
+ ) + }, +} + +export const Small: Story = { + render: () => { + return ( +
+ +
+ ) + }, +} + +// const InModalDemo = () => { +// const [open, setOpen] = React.useState(false) +// const prompt = usePrompt() + +// const onClose = async () => { +// const res = await prompt({ +// title: "Are you sure?", +// description: "You have unsaved changes. Are you sure you want to close?", +// confirmText: "Yes", +// cancelText: "Cancel", +// }) + +// if (!res) { +// return +// } + +// setOpen(false) +// } + +// return ( +// +// +// +// +// +// +// Edit Variant +// +// +// +// +// +// +// +// +// +// +// ) +// } + +// export const InModal: Story = { +// render: () => { +// return +// }, +// } diff --git a/packages/design-system/ui/src/components/select/select.tsx b/packages/design-system/ui/src/components/select/select.tsx new file mode 100644 index 0000000000000..5be9f26e8fe29 --- /dev/null +++ b/packages/design-system/ui/src/components/select/select.tsx @@ -0,0 +1,206 @@ +"use client" + +import { ChevronUpDown, EllipseMiniSolid } from "@medusajs/icons" +import * as SelectPrimitive from "@radix-ui/react-select" +import { cva } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" + +interface SelectProps + extends React.ComponentPropsWithoutRef { + size?: "base" | "small" +} + +type SelectContextValue = { + size: "base" | "small" +} + +const SelectContext = React.createContext(null) + +const useSelectContext = () => { + const context = React.useContext(SelectContext) + + if (context === null) { + throw new Error("useSelectContext must be used within a SelectProvider") + } + + return context +} + +const Root = ({ children, size = "base", ...props }: SelectProps) => { + return ( + ({ size }), [size])}> + {children} + + ) +} + +const Group = SelectPrimitive.Group + +const Value = SelectPrimitive.Value + +const triggerVariants = cva( + clx( + "bg-ui-bg-field txt-compact-medium shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none", + "data-[placeholder]:text-ui-fg-muted text-ui-fg-base", + "hover:bg-ui-bg-field-hover", + "focus:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active", + "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error", + "invalid::border-ui-border-error invalid:shadow-borders-error", + "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled", + "group/trigger" + ), + { + variants: { + size: { + base: "h-10 px-3 py-[9px]", + small: "h-8 px-2 py-[5px]", + }, + }, + } +) + +const Trigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => { + const { size } = useSelectContext() + + return ( + + {children} + + + + + ) +}) +Trigger.displayName = SelectPrimitive.Trigger.displayName + +const Content = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { + className, + children, + position = "popper", + sideOffset = 8, + collisionPadding = 24, + ...props + }, + ref + ) => ( + + + + {children} + + + + ) +) +Content.displayName = SelectPrimitive.Content.displayName + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = SelectPrimitive.Label.displayName + +const Item = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => { + const { size } = useSelectContext() + + return ( + + + + + + + + {children} + + + ) +}) +Item.displayName = SelectPrimitive.Item.displayName + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Separator.displayName = SelectPrimitive.Separator.displayName + +const Select = Object.assign(Root, { + Group, + Value, + Trigger, + Content, + Label, + Item, + Separator, +}) + +export { Select } diff --git a/packages/design-system/ui/src/components/status-badge/index.ts b/packages/design-system/ui/src/components/status-badge/index.ts new file mode 100644 index 0000000000000..3b2a98fc43450 --- /dev/null +++ b/packages/design-system/ui/src/components/status-badge/index.ts @@ -0,0 +1 @@ +export * from "./status-badge" diff --git a/packages/design-system/ui/src/components/status-badge/status-badge.stories.tsx b/packages/design-system/ui/src/components/status-badge/status-badge.stories.tsx new file mode 100644 index 0000000000000..55338191fea1b --- /dev/null +++ b/packages/design-system/ui/src/components/status-badge/status-badge.stories.tsx @@ -0,0 +1,50 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { StatusBadge } from "./status-badge" + +const meta: Meta = { + title: "Components/StatusBadge", + component: StatusBadge, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Grey: Story = { + args: { + children: "Draft", + color: "grey", + }, +} + +export const Green: Story = { + args: { + children: "Published", + color: "green", + }, +} + +export const Red: Story = { + args: { + children: "Expired", + color: "red", + }, +} + +export const Blue: Story = { + args: { + children: "Pending", + color: "blue", + }, +} + +export const Orange: Story = { + args: { + children: "Requires Attention", + color: "orange", + }, +} diff --git a/packages/design-system/ui/src/components/status-badge/status-badge.tsx b/packages/design-system/ui/src/components/status-badge/status-badge.tsx new file mode 100644 index 0000000000000..97e5c3a8c7e93 --- /dev/null +++ b/packages/design-system/ui/src/components/status-badge/status-badge.tsx @@ -0,0 +1,46 @@ +import * as React from "react" + +import { clx } from "@/utils/clx" +import { + EllipseBlueSolid, + EllipseGreenSolid, + EllipseGreySolid, + EllipseOrangeSolid, + EllipsePurpleSolid, + EllipseRedSolid, +} from "@medusajs/icons" + +interface StatusBadgeProps + extends Omit, "color"> { + color?: "green" | "red" | "blue" | "orange" | "grey" | "purple" +} + +const StatusBadge = React.forwardRef( + ({ children, className, color = "grey", ...props }, ref) => { + const StatusIndicator = { + green: EllipseGreenSolid, + red: EllipseRedSolid, + orange: EllipseOrangeSolid, + blue: EllipseBlueSolid, + purple: EllipsePurpleSolid, + grey: EllipseGreySolid, + }[color] + + return ( + + + {children} + + ) + } +) +StatusBadge.displayName = "StatusBadge" + +export { StatusBadge } diff --git a/packages/design-system/ui/src/components/switch/index.ts b/packages/design-system/ui/src/components/switch/index.ts new file mode 100644 index 0000000000000..b0af0ed6b4dd3 --- /dev/null +++ b/packages/design-system/ui/src/components/switch/index.ts @@ -0,0 +1 @@ +export * from "./switch" diff --git a/packages/design-system/ui/src/components/switch/switch.spec.tsx b/packages/design-system/ui/src/components/switch/switch.spec.tsx new file mode 100644 index 0000000000000..48a2a27210302 --- /dev/null +++ b/packages/design-system/ui/src/components/switch/switch.spec.tsx @@ -0,0 +1,12 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Switch } from "./switch" + +describe("Switch", () => { + it("should render successfully", () => { + render() + + expect(screen.getByRole("switch")).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/ui/src/components/switch/switch.stories.tsx b/packages/design-system/ui/src/components/switch/switch.stories.tsx new file mode 100644 index 0000000000000..1dbe2dea84876 --- /dev/null +++ b/packages/design-system/ui/src/components/switch/switch.stories.tsx @@ -0,0 +1,44 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Switch } from "./switch" + +const meta: Meta = { + title: "Components/Switch", + component: Switch, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: {}, +} + +export const Small: Story = { + args: { + size: "small", + }, +} + +export const Checked: Story = { + args: { + checked: true, + }, +} + +export const Disabled: Story = { + args: { + disabled: true, + }, +} + +export const CheckedDisabled: Story = { + args: { + checked: true, + disabled: true, + }, +} diff --git a/packages/design-system/ui/src/components/switch/switch.tsx b/packages/design-system/ui/src/components/switch/switch.tsx new file mode 100644 index 0000000000000..e0849bb4037d6 --- /dev/null +++ b/packages/design-system/ui/src/components/switch/switch.tsx @@ -0,0 +1,61 @@ +"use client" + +import * as Primitives from "@radix-ui/react-switch" +import { VariantProps, cva } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const switchVariants = cva( + "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed", + { + variants: { + size: { + small: "h-[16px] w-[28px]", + base: "h-[18px] w-[32px]", + }, + }, + defaultVariants: { + size: "base", + }, + } +) + +const thumbVariants = cva( + "bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none", + { + variants: { + size: { + small: + "h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5", + base: "h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5", + }, + }, + defaultVariants: { + size: "base", + }, + } +) + +interface SwitchProps + extends Omit< + React.ComponentPropsWithoutRef, + "asChild" + >, + VariantProps {} + +const Switch = React.forwardRef< + React.ElementRef, + SwitchProps +>(({ className, size = "base", ...props }, ref) => ( + + + +)) +Switch.displayName = "Switch" + +export { Switch } diff --git a/packages/design-system/ui/src/components/table/index.ts b/packages/design-system/ui/src/components/table/index.ts new file mode 100644 index 0000000000000..d3a48f92c0d2e --- /dev/null +++ b/packages/design-system/ui/src/components/table/index.ts @@ -0,0 +1 @@ +export * from "./table" diff --git a/packages/design-system/ui/src/components/table/table.stories.tsx b/packages/design-system/ui/src/components/table/table.stories.tsx new file mode 100644 index 0000000000000..cda99a9eb69b5 --- /dev/null +++ b/packages/design-system/ui/src/components/table/table.stories.tsx @@ -0,0 +1,280 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Table } from "./table" + +const meta: Meta = { + title: "Components/Table", + component: Table, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +type Order = { + id: string + displayId: number + customer: string + email: string + amount: number + currency: string +} + +const firstNames = [ + "Charles", + "Cooper", + "Johhny", + "Elvis", + "John", + "Jane", + "Joe", + "Jack", + "Jill", + "Jenny", +] +const lastNames = [ + "Brown", + "Smith", + "Johnson", + "Williams", + "Jones", + "Miller", + "Davis", + "Garcia", + "Rodriguez", + "Wilson", +] +const currencies = ["USD", "EUR", "GBP", "JPY"] + +function makeDate(x: number): Order[] { + // get random name + const getRandomName = () => { + const firstName = firstNames[Math.floor(Math.random() * firstNames.length)] + const lastName = lastNames[Math.floor(Math.random() * lastNames.length)] + return `${firstName} ${lastName}` + } + + const getRandomId = () => { + return `order_${Math.floor(Math.random() * 100000)}` + } + + const getRandomDisplayId = () => { + return Math.floor(Math.random() * 100000) + } + + const getRandomAmount = () => { + return Math.floor(Math.random() * 1000) + } + + const getRandomCurrency = () => { + return currencies[Math.floor(Math.random() * currencies.length)] + } + + const getRandomEmail = () => { + return `${Math.floor(Math.random() * 100000)}@gmail.com` + } + + // Create x random orders and resolve them after 1 second + const orders = Array.from({ length: x }, () => ({ + id: getRandomId(), + displayId: getRandomDisplayId(), + customer: getRandomName(), + email: getRandomEmail(), + amount: getRandomAmount(), + currency: getRandomCurrency(), + })) + + return orders +} + +type UseFakeOrdersProps = { + limit: number + offset: number +} + +const useFakeOrders = ({ offset, limit }: UseFakeOrdersProps) => { + const COUNT = 1000 + + const [orders, setOrders] = React.useState(makeDate(limit)) + const [offsetState, setOffsetState] = React.useState(0) + const [isLoading, setIsLoading] = React.useState(false) + + // Fake API call + React.useEffect(() => { + const fetchOrders = async () => { + if (offset === offsetState) { + return + } + + await new Promise((resolve) => setTimeout(resolve, 500)) + + if (offset > COUNT) { + return + } + + const newOrders = makeDate(limit) + + setOrders(newOrders) + + setOffsetState(offset) + } + + setIsLoading(true) + + fetchOrders().then(() => { + setIsLoading(false) + }) + }, [offset, limit, orders, offsetState]) + + return { + orders, + isLoading, + count: COUNT, + } +} + +const fakeData = makeDate(10) + +console.log(JSON.stringify(fakeData, null, 2)) + +const formatCurrency = (amount: number, currency: string) => { + return new Intl.NumberFormat("en-US", { + style: "currency", + currency, + signDisplay: "always", + }).format(amount) +} + +export const Default: Story = { + render: () => { + return ( +
+ + + + # + Customer + Email + Amount + + + + + {fakeData.map((order) => { + return ( + + {order.displayId} + {order.customer} + {order.email} + + {formatCurrency(order.amount, order.currency)} + + + {order.currency} + + + ) + })} + +
+
+ ) + }, +} + +const PaginatedDemo = () => { + const [pageIndex, setPageIndex] = React.useState(0) + const pageSize = 10 + + const { orders, isLoading, count } = useFakeOrders({ + offset: pageIndex * pageSize, + limit: pageSize, + }) + + const pageCount = Math.ceil(count / pageSize) + + const canNextPage = pageIndex < pageCount - 1 && !isLoading + const canPreviousPage = pageIndex > 0 && !isLoading + + const nextPage = () => { + if (canNextPage) { + setPageIndex(pageIndex + 1) + } + } + + const previousPage = () => { + if (canPreviousPage) { + setPageIndex(pageIndex - 1) + } + } + + return ( +
+ + + + # + Customer + Email + Amount + + + + + {orders.map((order) => { + return ( + + {order.displayId} + {order.customer} + {order.email} + {order.amount} + + {order.currency} + + + ) + })} + +
+ +
+
+

Page Index: {pageIndex}

+

Page Count: {pageCount}

+

Count: {count}

+

Page Size: {pageSize}

+
+
+

Can Next Page: {canNextPage ? "true" : "false"}

+

Can Previous Page: {canPreviousPage ? "true" : "false"}

+

Is Loading: {isLoading ? "true" : "false"}

+
+
+
+ ) +} + +export const Paginated: Story = { + render: () => { + return + }, +} diff --git a/packages/design-system/ui/src/components/table/table.tsx b/packages/design-system/ui/src/components/table/table.tsx new file mode 100644 index 0000000000000..b0a05a6646939 --- /dev/null +++ b/packages/design-system/ui/src/components/table/table.tsx @@ -0,0 +1,163 @@ +import { Minus } from "@medusajs/icons" +import * as React from "react" + +import { Button } from "@/components/button" +import { clx } from "@/utils/clx" + +const Root = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +Root.displayName = "Table" + +const Row = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +Row.displayName = "Table.Row" + +const Cell = React.forwardRef< + HTMLTableCellElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +Header.displayName = "Table.Header" + +const HeaderCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +Body.displayName = "Table.Body" + +interface TablePaginationProps extends React.HTMLAttributes { + count: number + pageSize: number + pageIndex: number + pageCount: number + canPreviousPage: boolean + canNextPage: boolean + previousPage: () => void + nextPage: () => void +} + +const Pagination = React.forwardRef( + ( + { + className, + count, + pageSize, + pageCount, + pageIndex, + canPreviousPage, + canNextPage, + nextPage, + previousPage, + ...props + }, + ref + ) => { + const { from, to } = React.useMemo(() => { + const from = count === 0 ? count : pageIndex * pageSize + 1 + const to = Math.min(count, (pageIndex + 1) * pageSize) + + return { from, to } + }, [count, pageIndex, pageSize]) + + return ( +
+
+

{from}

+ +

{`${to} of ${count} results`}

+
+
+
+

+ {pageIndex + 1} of {Math.max(pageCount, 1)} +

+
+ + +
+
+ ) + } +) +Pagination.displayName = "Table.Pagination" + +const Table = Object.assign(Root, { + Row, + Cell, + Header, + HeaderCell, + Body, + Pagination, +}) + +export { Table } diff --git a/packages/design-system/ui/src/components/tabs/index.ts b/packages/design-system/ui/src/components/tabs/index.ts new file mode 100644 index 0000000000000..64d600ad4979c --- /dev/null +++ b/packages/design-system/ui/src/components/tabs/index.ts @@ -0,0 +1 @@ +export * from "./tabs" diff --git a/packages/design-system/ui/src/components/tabs/tabs.stories.tsx b/packages/design-system/ui/src/components/tabs/tabs.stories.tsx new file mode 100644 index 0000000000000..97d318f57faff --- /dev/null +++ b/packages/design-system/ui/src/components/tabs/tabs.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Container } from "../container" +import { Tabs } from "./tabs" + +const meta: Meta = { + title: "Components/Tabs", + component: Tabs, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +const Demo = () => { + return ( +
+ + + Tab 1 + Tab 2 + Tab 3 + + + Tab 1 content + Tab 2 content + Tab 3 content + + +
+ ) +} + +export const Default: Story = { + render: () => , +} diff --git a/packages/design-system/ui/src/components/tabs/tabs.tsx b/packages/design-system/ui/src/components/tabs/tabs.tsx new file mode 100644 index 0000000000000..363e59109fd73 --- /dev/null +++ b/packages/design-system/ui/src/components/tabs/tabs.tsx @@ -0,0 +1,65 @@ +"use client" + +import * as TabsPrimitives from "@radix-ui/react-tabs" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const TabsRoot = ( + props: React.ComponentPropsWithoutRef +) => { + return +} +TabsRoot.displayName = "Tabs" + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + +)) +TabsTrigger.displayName = "Tabs.Trigger" + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = "Tabs.List" + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = "Tabs.Content" + +const Tabs = Object.assign(TabsRoot, { + Trigger: TabsTrigger, + List: TabsList, + Content: TabsContent, +}) + +export { Tabs } diff --git a/packages/design-system/ui/src/components/text/index.ts b/packages/design-system/ui/src/components/text/index.ts new file mode 100644 index 0000000000000..6417a56d07f5b --- /dev/null +++ b/packages/design-system/ui/src/components/text/index.ts @@ -0,0 +1 @@ +export * from "./text" diff --git a/packages/design-system/ui/src/components/text/text.spec.tsx b/packages/design-system/ui/src/components/text/text.spec.tsx new file mode 100644 index 0000000000000..59011a8ee5574 --- /dev/null +++ b/packages/design-system/ui/src/components/text/text.spec.tsx @@ -0,0 +1,26 @@ +import { render, screen } from "@testing-library/react" +import * as React from "react" + +import { Text } from "./text" + +describe("Text", () => { + it("renders a text", () => { + render(I am a paragraph) + + const text = screen.getByText("I am a paragraph") + expect(text).toBeInTheDocument() + expect(text.tagName).toBe("P") + }) + + it("renders a text as a child", () => { + render( + + I am a span + + ) + + const text = screen.getByText("I am a span") + expect(text).toBeInTheDocument() + expect(text.tagName).toBe("SPAN") + }) +}) diff --git a/packages/design-system/ui/src/components/text/text.stories.tsx b/packages/design-system/ui/src/components/text/text.stories.tsx new file mode 100644 index 0000000000000..833b0557a2cc8 --- /dev/null +++ b/packages/design-system/ui/src/components/text/text.stories.tsx @@ -0,0 +1,144 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Text } from "./text" + +const meta: Meta = { + title: "Components/Text", + component: Text, + argTypes: { + size: { + control: { + type: "select", + }, + options: ["base", "large", "xlarge"], + }, + weight: { + control: { + type: "select", + }, + options: ["regular", "plus"], + }, + family: { + control: { + type: "select", + }, + options: ["sans", "mono"], + }, + }, + parameters: { + layout: "centered", + }, +} + +export default meta + +type Story = StoryObj + +export const BaseRegularSans: Story = { + args: { + size: "base", + weight: "regular", + family: "sans", + children: "I am a paragraph", + }, +} + +export const BasePlusSans: Story = { + args: { + size: "base", + weight: "plus", + family: "sans", + children: "I am a paragraph", + }, +} + +export const LargeRegularSans: Story = { + args: { + size: "large", + weight: "regular", + family: "sans", + children: "I am a paragraph", + }, +} + +export const LargePlusSans: Story = { + args: { + size: "large", + weight: "plus", + family: "sans", + children: "I am a paragraph", + }, +} + +export const XLargeRegularSans: Story = { + args: { + size: "xlarge", + weight: "regular", + family: "sans", + children: "I am a paragraph", + }, +} + +export const XLargePlusSans: Story = { + args: { + size: "xlarge", + weight: "plus", + family: "sans", + + children: "I am a paragraph", + }, +} + +export const BaseRegularMono: Story = { + args: { + size: "base", + weight: "regular", + family: "mono", + children: "I am a paragraph", + }, +} + +export const BasePlusMono: Story = { + args: { + size: "base", + weight: "plus", + family: "mono", + children: "I am a paragraph", + }, +} + +export const LargeRegularMono: Story = { + args: { + size: "large", + weight: "regular", + family: "mono", + children: "I am a paragraph", + }, +} + +export const LargePlusMono: Story = { + args: { + size: "large", + weight: "plus", + family: "mono", + children: "I am a paragraph", + }, +} + +export const XLargeRegularMono: Story = { + args: { + size: "xlarge", + weight: "regular", + family: "mono", + children: "I am a paragraph", + }, +} + +export const XLargePlusMono: Story = { + args: { + size: "xlarge", + weight: "plus", + family: "mono", + children: "I am a paragraph", + }, +} diff --git a/packages/design-system/ui/src/components/text/text.tsx b/packages/design-system/ui/src/components/text/text.tsx new file mode 100644 index 0000000000000..0f0baf0085f40 --- /dev/null +++ b/packages/design-system/ui/src/components/text/text.tsx @@ -0,0 +1,129 @@ +import { Slot } from "@radix-ui/react-slot" +import { VariantProps, cva } from "class-variance-authority" +import * as React from "react" + +import { clx } from "@/utils/clx" + +const textVariants = cva("", { + variants: { + size: { + xsmall: "", + small: "", + base: "", + large: "", + xlarge: "", + }, + weight: { + regular: "font-normal", + plus: "font-medium", + }, + family: { + sans: "font-sans", + mono: "font-mono", + }, + leading: { + normal: "", + compact: "", + }, + }, + defaultVariants: { + family: "sans", + size: "base", + weight: "regular", + leading: "normal", + }, + compoundVariants: [ + { + size: "xsmall", + leading: "normal", + className: "txt-xsmall", + }, + { + size: "xsmall", + leading: "compact", + className: "txt-compact-xsmall", + }, + { + size: "small", + leading: "normal", + className: "txt-small", + }, + { + size: "small", + leading: "compact", + className: "txt-compact-small", + }, + { + size: "base", + leading: "normal", + className: "txt-medium", + }, + { + size: "base", + leading: "compact", + className: "txt-compact-medium", + }, + { + size: "large", + leading: "normal", + className: "txt-large", + }, + { + size: "large", + leading: "compact", + className: "txt-compact-large", + }, + { + size: "xlarge", + leading: "normal", + className: "txt-xlarge", + }, + { + size: "xlarge", + leading: "compact", + className: "txt-compact-xlarge", + }, + ], +}) + +interface TextProps + extends React.ComponentPropsWithoutRef<"p">, + VariantProps { + asChild?: boolean + as?: "p" | "span" | "div" +} + +const Text = React.forwardRef( + ( + { + className, + asChild = false, + as = "p", + size = "base", + weight = "regular", + family = "sans", + leading = "normal", + children, + ...props + }, + ref + ) => { + const Component = asChild ? Slot : as + + return ( + + {children} + + ) + } +) +Text.displayName = "Text" + +export { Text } diff --git a/packages/design-system/ui/src/components/textarea/index.ts b/packages/design-system/ui/src/components/textarea/index.ts new file mode 100644 index 0000000000000..331b8c8442253 --- /dev/null +++ b/packages/design-system/ui/src/components/textarea/index.ts @@ -0,0 +1 @@ +export * from "./textarea" diff --git a/packages/design-system/ui/src/components/textarea/textarea.stories.tsx b/packages/design-system/ui/src/components/textarea/textarea.stories.tsx new file mode 100644 index 0000000000000..96bb5cae3b064 --- /dev/null +++ b/packages/design-system/ui/src/components/textarea/textarea.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from "@storybook/react" +import * as React from "react" + +import { Textarea } from "./textarea" + +const meta: Meta = { + title: "Components/Textarea", + component: Textarea, + parameters: { + layout: "centered", + }, + render: (args) => ( +
+
+)) +Cell.displayName = "Table.Cell" + +const Header = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +HeaderCell.displayName = "Table.HeaderCell" + +const Body = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +