Merge pull request #16 from medusajs/feat/more-components

feat(ui): Add more components

babel.config.js

@@ -16,38 +16,22 @@ module.exports = function (api) {
     assumptions: {
       setPublicClassFields: true,
       privateFieldsAsProperties: true,
-      // nothing accesses `document.all`:
       noDocumentAll: true,
-      // nothing relies on class constructors invoked without `new` throwing:
       noClassCalls: true,
-      // nothing should be relying on tagged template strings being frozen:
       mutableTemplateObject: true,
-      // nothing is relying on Function.prototype.length:
       ignoreFunctionLength: true,
-      // nothing is relying on mutable re-exported bindings:
       constantReexports: true,
-      // don't bother marking Module records non-enumerable:
       enumerableModuleMeta: true,
-      // nothing uses [[Symbol.toPrimitive]]:
-      // (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)
       ignoreToPrimitiveHint: true,
-      // nothing relies on spread copying Symbol keys:  ({...{ [Symbol()]: 1 }})
       objectRestNoSymbols: true,
-      // nothing relies on `new (() => {})` throwing:
       noNewArrows: true,
-      // transpile object spread to assignment instead of defineProperty():
       setSpreadProperties: true,
-      // nothing should be using custom iterator protocol:
       skipForOfIteratorClosing: true,
-      // nothing inherits from a constructor function with explicit return value:
       superIsCallableConstructor: true,
-      // nothing relies on CJS-transpiled namespace imports having all properties prior to module execution completing:
       noIncompleteNsImportDetection: true,
     },
     babelrcRoots: [
       ".",
-      // Note: The following projects use rootMode: 'upward' to inherit
-      // and merge with this root level config.
       "./packages/ui",
       "./packages/ui-preset",
       "./packages/icons",

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "medusa-ui",
   "private": true,
   "scripts": {
     "test": "turbo run test",
@@ -23,15 +24,14 @@
     "@medusajs/eslint-config-ui": "*",
     "@medusajs/toolbox": "*",
     "babel-loader": "^9.1.2",
-    "eslint": "^7.32.0",
+    "eslint": "^8.44.0",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.3.0",
-    "turbo": "latest"
+    "turbo": "latest",
+    "typescript": "^5.1.6"
   },
-  "name": "medusa-ui",
   "packageManager": "[email protected]",
   "workspaces": [
-    "apps/*",
     "packages/*",
     "tools/*",
     "configs/*"

packages/ui-preset/src/plugin.ts

@@ -1,3 +1,4 @@
+import { fontFamily } from "tailwindcss/defaultTheme"
 import plugin from "tailwindcss/plugin"
 import { theme } from "./theme/extension/theme"
 import { colors } from "./theme/tokens/colors"
@@ -38,6 +39,14 @@ export default plugin(
     }
   },
   {
-    theme: theme,
+    theme: {
+      extend: {
+        ...theme.extend,
+        fontFamily: {
+          sans: ["Inter", ...fontFamily.sans],
+          mono: ["Roboto Mono", ...fontFamily.mono],
+        },
+      },
+    },
   }
 )

packages/ui-preset/src/theme/extension/theme.ts

@@ -298,7 +298,8 @@ export const theme = {
       "elevation-tooltip": "var(--elevation-tooltip)",
       "elevation-card-hover": "var(--elevation-card-hover)",
       "elevation-card-rest": "var(--elevation-card-rest)",
-      "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)"
+      "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)",
+      "borders-error": "var(--borders-error)"
     }
   }
 }

packages/ui-preset/src/theme/tokens/effects.ts

@@ -31,6 +31,7 @@ export const effects = {
     "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
     "--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-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)",
-    "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)"
+    "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
+    "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.15)"
   }
 }

packages/ui-preset/tsup.config.ts

@@ -1,8 +1,10 @@
 import { defineConfig } from "tsup"
+import path from "path"
 
 export default defineConfig({
-  entry: ["./src/index.ts"],
+  entry: ["src/index.ts"],
   format: ["cjs", "esm"],
+  tsconfig: path.resolve(__dirname, "tsconfig.json"),
   dts: true,
   clean: true,
 })

packages/ui/.eslintrc.js

@@ -2,6 +2,6 @@
 module.exports = {
   extends: ["@medusajs/eslint-config-ui"],
   parserOptions: {
-    project: "./tsconfig.json",
+    project: "tsconfig.json",
   },
 }

packages/ui/.storybook/main.ts

@@ -1,10 +1,11 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from "@storybook/react-vite"
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-docs",
   ],
   framework: {
     name: "@storybook/react-vite",
@@ -13,5 +14,5 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
-};
-export default config;
+}
+export default config