Move ui package to @convex-dev/design-system (#36398)

GitOrigin-RevId: dce92a2e95b61c5ca474fae13e8e2b7f804b50b1

Author: atrakh

npm-packages/ui/.eslintrc.cjs renamed to npm-packages/@convex-dev/design-system/.eslintrc.cjs

@@ -2,7 +2,7 @@ const path = require("path");
 
 module.exports = {
   root: true,
-  extends: [path.resolve(__dirname, "../dashboard-common/.eslintrc.cjs")],
+  extends: [path.resolve(__dirname, "../../dashboard-common/.eslintrc.cjs")],
   parserOptions: {
     project: true,
     tsconfigRootDir: __dirname,

npm-packages/@convex-dev/design-system/README.md

@@ -0,0 +1,4 @@
+# Convex Design System
+
+The Convex Design System is a collection of components that are used to build
+Convex UIs (dashboard, Chef, etc).

npm-packages/@convex-dev/design-system/package.json

@@ -0,0 +1,159 @@
+{
+  "name": "@convex-dev/design-system",
+  "version": "0.1.2",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "tsc && tsc-alias && mkdir -p dist/styles && cp src/styles/shared.css dist/styles/shared.css",
+    "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx --ignore-pattern '*.stories.tsx'",
+    "lint:fix": "eslint --fix ./src --ext .js,.jsx,.ts,.tsx --ignore-pattern '*.stories.tsx'"
+  },
+  "peerDependencies": {
+    "@radix-ui/react-icons": "~1.3.0",
+    "react": "^18.0.0",
+    "tailwindcss": "^3.0.0",
+    "tailwind-scrollbar": "^3.0.0",
+    "@tailwindcss/forms": "^0.5.6"
+  },
+  "dependencies": {
+    "clsx": "2.1.1",
+    "@headlessui/react": "1.7.19",
+    "@radix-ui/react-tooltip": "~1.1.0",
+    "classnames": "^2.3.2",
+    "fuzzy": "~0.1.3",
+    "lodash": "~4.17.21",
+    "react-dom": "^18.0.0",
+    "react-popper": "^2.3.0",
+    "react-use": "~17.6.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwind-variants": "~0.2.0"
+  },
+  "devDependencies": {
+    "@jest/types": "^29.6.0",
+    "@storybook/react": "^7.6.16",
+    "@tailwindcss/forms": "^0.5.6",
+    "@testing-library/dom": "~10.4.0",
+    "@testing-library/jest-dom": "~6.6.0",
+    "@testing-library/react": "~16.2.0",
+    "@testing-library/user-event": "~14.6.0",
+    "@types/jest": "^27.0.0",
+    "@types/lodash": "~4.17.0",
+    "@types/node": "^18.17.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/testing-library__jest-dom": "~5.14.5",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "eslint": "^8.29.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-next": "~13.4.16",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-prettier": "^4.1.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-tailwindcss": "~3.12.1",
+    "jest": "^29.6.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "postcss": "^8.4.19",
+    "prettier": "3.5.2",
+    "prettier-plugin-tailwindcss": "~0.3.0",
+    "tailwindcss": "^3.2.4",
+    "tailwind-scrollbar": "3.0.3",
+    "typescript": "~5.0.3",
+    "tsc-alias": "~1.8.15"
+  },
+  "exports": {
+    "./Button": {
+      "import": "./dist/Button.jsx",
+      "types": "./dist/Button.d.ts"
+    },
+    "./Callout": {
+      "import": "./dist/Callout.jsx",
+      "types": "./dist/Callout.d.ts"
+    },
+    "./Checkbox": {
+      "import": "./dist/Checkbox.jsx",
+      "types": "./dist/Checkbox.d.ts"
+    },
+    "./ConfirmationDialog": {
+      "import": "./dist/ConfirmationDialog.jsx",
+      "types": "./dist/ConfirmationDialog.d.ts"
+    },
+    "./ClosePanelButton": {
+      "import": "./dist/ClosePanelButton.jsx",
+      "types": "./dist/ClosePanelButton.d.ts"
+    },
+    "./Combobox": {
+      "import": "./dist/Combobox.jsx",
+      "types": "./dist/Combobox.d.ts"
+    },
+    "./KeyboardShortcut": {
+      "import": "./dist/KeyboardShortcut.jsx",
+      "types": "./dist/KeyboardShortcut.d.ts"
+    },
+    "./Loading": {
+      "import": "./dist/Loading.jsx",
+      "types": "./dist/Loading.d.ts"
+    },
+    "./Menu": {
+      "import": "./dist/Menu.jsx",
+      "types": "./dist/Menu.d.ts"
+    },
+    "./Modal": {
+      "import": "./dist/Modal.jsx",
+      "types": "./dist/Modal.d.ts"
+    },
+    "./MultiSelectCombobox": {
+      "import": "./dist/MultiSelectCombobox.jsx",
+      "types": "./dist/MultiSelectCombobox.d.ts"
+    },
+    "./Popover": {
+      "import": "./dist/Popover.jsx",
+      "types": "./dist/Popover.d.ts"
+    },
+    "./ProgressBar": {
+      "import": "./dist/ProgressBar.jsx",
+      "types": "./dist/ProgressBar.d.ts"
+    },
+    "./Sheet": {
+      "import": "./dist/Sheet.jsx",
+      "types": "./dist/Sheet.d.ts"
+    },
+    "./Spinner": {
+      "import": "./dist/Spinner.jsx",
+      "types": "./dist/Spinner.d.ts"
+    },
+    "./Tab": {
+      "import": "./dist/Tab.jsx",
+      "types": "./dist/Tab.d.ts"
+    },
+    "./TextInput": {
+      "import": "./dist/TextInput.jsx",
+      "types": "./dist/TextInput.d.ts"
+    },
+    "./Tooltip": {
+      "import": "./dist/Tooltip.jsx",
+      "types": "./dist/Tooltip.d.ts"
+    },
+    "./UIContext": {
+      "import": "./dist/UIContext.jsx",
+      "types": "./dist/UIContext.d.ts"
+    },
+    "./styles/shared.css": {
+      "import": "./dist/styles/shared.css",
+      "types": "./dist/styles/shared.css"
+    },
+    "./tailwind.config": {
+      "import": "./dist/tailwind.config.js",
+      "types": "./dist/tailwind.config.d.ts",
+      "default": "./dist/tailwind.config.js"
+    }
+  }
+}

npm-packages/ui/pages/README.md renamed to npm-packages/@convex-dev/design-system/pages/README.md

@@ -56,7 +56,7 @@ export function ConfirmationDialog({
           <>
             <div className="mt-4 text-sm">
               Type{" "}
-              <code className="bg-background-tertiary text-content-primary rounded p-1 text-sm">
+              <code className="rounded bg-background-tertiary p-1 text-sm text-content-primary">
                 {validationText}
               </code>{" "}
               in the box below to confirm.

npm-packages/ui/postcss.config.js renamed to npm-packages/@convex-dev/design-system/postcss.config.js

@@ -50,7 +50,7 @@ export function Menu({
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
-              className="bg-background-secondary z-50 flex max-h-[20rem] flex-col gap-1 overflow-auto whitespace-nowrap rounded-lg border py-2 text-sm shadow-md"
+              className="z-50 flex max-h-[20rem] flex-col gap-1 overflow-auto whitespace-nowrap rounded-lg border bg-background-secondary py-2 text-sm shadow-md"
             >
               {children}
             </HeadlessMenu.Items>
@@ -105,7 +105,7 @@ export function MenuItem({
           {shortcut && (
             <KeyboardShortcut
               value={shortcut}
-              className="text-content-tertiary ml-auto pl-6"
+              className="ml-auto pl-6 text-content-tertiary"
             />
           )}
         </Button>
@@ -148,7 +148,7 @@ export function MenuLink({
           {shortcut && (
             <KeyboardShortcut
               value={shortcut}
-              className="text-content-tertiary ml-auto pl-6"
+              className="ml-auto pl-6 text-content-tertiary"
             />
           )}
         </a>

npm-packages/ui/setupTests.ts renamed to npm-packages/@convex-dev/design-system/setupTests.ts

@@ -1,5 +1,6 @@
 import tailwindScrollbar from "tailwind-scrollbar";
 import tailwindForms from "@tailwindcss/forms";
+import { Config } from "tailwindcss";
 
 export const numberedColors = {
   red: {
@@ -157,12 +158,11 @@ export const utilColors = {
   },
 };
 
-// eslint-disable-next-line import/no-default-export
-export default {
+const config: Config = {
   darkMode: "class",
   content: [
-    "../ui/src/**/*.{js,ts,jsx,tsx}",
-    "../ui/src/*.{js,ts,jsx,tsx}",
+    "../@convex-dev/design-system/src/**/*.{js,ts,jsx,tsx}",
+    "../@convex-dev/design-system/src/*.{js,ts,jsx,tsx}",
     "../dashboard/src/**/*.{js,ts,jsx,tsx}",
     "../dashboard-common/src/**/*.{js,ts,jsx,tsx}",
     "../dashboard-self-hosted/src/**/*.{js,ts,jsx,tsx}",
@@ -188,16 +188,16 @@ export default {
         },
         blinkFill: {
           "0%": {
-            fillOpacity: 1,
-            opacity: 1,
+            fillOpacity: "1",
+            opacity: "1",
           },
           "50%": {
-            fillOpacity: 0.75,
-            opacity: 0.75,
+            fillOpacity: "0.75",
+            opacity: "0.75",
           },
           "100%": {
-            fillOpacity: 1,
-            opacity: 1,
+            fillOpacity: "1",
+            opacity: "1",
           },
         },
         shimmer: {
@@ -207,13 +207,13 @@ export default {
         },
         blink: {
           "0%": {
-            opacity: 1,
+            opacity: "1",
           },
           "50%": {
-            opacity: 0.5,
+            opacity: "0.5",
           },
           "100%": {
-            opacity: 1,
+            opacity: "1",
           },
         },
         vhs: {
@@ -251,10 +251,10 @@ export default {
         },
         fadeIn: {
           "0%": {
-            opacity: 0,
+            opacity: "0",
           },
           "100%": {
-            opacity: 1,
+            opacity: "1",
           },
         },
         indeterminateProgressBar: {
@@ -295,3 +295,6 @@ export default {
     tailwindForms({ strategy: "class" }),
   ],
 };
+
+// eslint-disable-next-line import/no-default-export
+export default config;

npm-packages/ui/src/Button.stories.tsx renamed to npm-packages/@convex-dev/design-system/src/Button.stories.tsx

@@ -14,14 +14,15 @@
     "downlevelIteration": true,
     "jsx": "preserve",
     "baseUrl": "./src",
+    "declaration": true,
+    "declarationMap": true,
     "rootDir": "./src",
     "isolatedModules": true,
-    "noEmit": true,
     "outDir": "./dist",
     "paths": {
       "@ui/*": ["*"]
     }
   },
   "include": ["src/**/*", "src/*"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "src/**/*.stories.tsx"]
 }