chore(ui,icons,ui-preset,toolbox): Move design system packages to mon…

…orepo (#5470)

.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

.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"],

.gitignore

@@ -20,4 +20,5 @@ www/**/.yarn/*
 .idea
 .turbo
 build/**
-**/dist
+**/dist
+**/stats

.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<Component extends (...args: any) => any> = Omit<OmitUndefined<Parameters<Component>[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> = T extends undefined ? never : T;
++type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
++
++export type VariantProps<Component extends (...args: any) => any> = Omit<
++  OmitUndefined<Parameters<Component>[0]>,
++  "class" | "className"
++>;
+ export type CxOptions = Parameters<typeof clsx>;
+ export type CxReturn = ReturnType<typeof clsx>;
+ export declare const cx: typeof clsx;
+ type ConfigSchema = Record<string, Record<string, ClassValue>>;
+ type ConfigVariants<T extends ConfigSchema> = {
+-    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
++  [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
+ };
+ type ConfigVariantsMulti<T extends ConfigSchema> = {
+-    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
++  [Variant in keyof T]?:
++    | StringToBoolean<keyof T[Variant]>
++    | StringToBoolean<keyof T[Variant]>[]
++    | undefined;
+ };
+-type Config<T> = T extends ConfigSchema ? {
+-    variants?: T;
+-    defaultVariants?: ConfigVariants<T>;
+-    compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
+-} : never;
+-type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
+-export declare const cva: <T>(base?: ClassValue, config?: Config<T> | undefined) => (props?: Props<T> | undefined) => string;
++type Config<T> = T extends ConfigSchema
++  ? {
++      variants?: T;
++      defaultVariants?: ConfigVariants<T>;
++      compoundVariants?: (T extends ConfigSchema
++        ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp
++        : ClassProp)[];
++    }
++  : never;
++type Props<T> = T extends ConfigSchema
++  ? ConfigVariants<T> & ClassProp
++  : ClassProp;
++export declare const cva: <T>(
++  base?: ClassValue,
++  config?: Config<T> | undefined
++) => (props?: Props<T> | undefined) => string;
+ export {};

CODEOWNERS

@@ -2,3 +2,4 @@
 *                                               @medusajs/core
 /docs/                                          @medusajs/docs
 /www/                                           @medusajs/docs
+/packages/design-system/                        @medusajs/ui

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"
   }
 }

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",

packages/design-system/icons/.env.template

@@ -0,0 +1,2 @@
+# Docs: https://www.figma.com/developers/api#access-tokens
+FIGMA_TOKEN=

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.

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.

packages/design-system/icons/README.md

@@ -0,0 +1,48 @@
+<p align="center">
+  <a href="https://www.medusajs.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/59018053/229103275-b5e482bb-4601-46e6-8142-244f531cebdb.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/59018053/229103726-e5b529a3-9b3f-4970-8a1f-c6af37f087bf.svg">
+    <img alt="Medusa logo" src="https://user-images.githubusercontent.com/59018053/229103726-e5b529a3-9b3f-4970-8a1f-c6af37f087bf.svg">
+    </picture>
+  </a>
+</p>
+<h1 align="center">
+  Medusa Icons
+</h1>
+
+<h4 align="center">
+  <a href="https://docs.medusajs.com/ui">Documentation</a> |
+  <a href="https://www.medusajs.com">Website</a>
+</h4>
+
+<p align="center">
+  Icons used in Medusa's design system.
+</p>
+<p align="center">
+  <a href="https://github.com/medusajs/medusa/blob/develop/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Medusa is released under the MIT license." />
+  </a>
+  <a href="https://discord.gg/xpCwq3Kfn8">
+    <img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg" alt="Discord Chat" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=medusajs">
+    <img src="https://img.shields.io/twitter/follow/medusajs.svg?label=Follow%20@medusajs" alt="Follow @medusajs" />
+  </a>
+</p>
+
+## 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"
+```