feat(v3): redesign styled system (#8312)

* refactor: move styled-system into main package * chore: initial system scaffold * fix: base condition * chore: define base preset using new api * feat: define new system api * chore: update tests to use system api * refactor: move generated stuff to dedicated folder * chore: add robust tests and conditions * feat: add color mix * chore: get first prototype working. woohoo! * chore: test color mix * fix: color palette * fix: color palette * chore: scaffold for system * chore(deps): update dependency tsx to v4.7.1 (#8321) * chore(deps): update dependency @types/node to v18.19.18 * chore(deps): update dependency tsx to v4.7.1 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * refactor(v3): remove usage of descendants (#8245) * feat: migrate accordion * feat: remove from menu * feat: migrate pin * feat: migrate tabs * fix: remove node * feat: removed descendant * fix: remove exports * fix: query selector issue * chore: fix tests * fix: refactor * chore: fix stories and tests * fix: escape value * fix: use menu item id if supplied * chore: update docs * chore: rewrite * fix: tab syltes * feat: include reset css in system * fix: dont generate reset always * chore: setup styled factory * feat: implement use recipe * chore(deps): update dependency @types/node to v18.19.19 (#8320) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix: assign static properties * feat: slot recipe * feat: expose identity functions * chore: add define system * refactor: theming -> config * chore: scaffold for new cli * refactor: redesign cli * chore: prune packages * chore: fix deps * chore: add preset * feat: add breakpoint * feat: support conditional variants * fix: codegen * docs: document new api * refactor: use new system in components * chore: update lock * refactor: component themes -> recipes * refactor: theme recipes * chore: rm extend theme * fix: token references * fix: token refernce in css * chore: rm props of * chore: rename foundations to tokens * refactor: phase 1 * refactor: optimize media query based on #7978 * chore: rm media query mod * refactor: redesign theme to use new convention * chore: cli emits to src * chore: simplify simplify * refactor: reorganize all things * chore: some more progress * fix: improve inference for For * refactor: redesign avatar * chore: goodbye to storybook addon * chore: phew * chore: update lockfile * refactor: revamp badge * refactor: move tweaks * refactor: redesign inputs and field * chore: cleanup input * chore: clean up card * refactor: tabs * refactor: dialog * refactor: prop getter naming * refactor: textarea * chore: textarea refactor * refactor: checkbox * refactor: radio group and progress * feat: add generic enter and exit keyframes * refactor: slider * refactor: popover * refactor: story groups * refactor: breadcrumb component and recipe * docs: update migration guide * refactor: accordion * chore: cleanup button stories * chore: cleanup button stories * chore: rm close button * refactor: badge and code * feat: add classic look for radio * feat: update kbd * refactor: link component * refactor: menu * refactor: menu * chore: wip menu * refactor: avatar and tag * chore: update menu * chore: rm clickable * chore: mv switch to slot recipe * refactor: revamp select * refactor: skeleton * refactor: skeleton theme * chore: cleanup stories * feat: account for empty badge * fix(components): suppress unnecessary re-renders of Checkbox and Radio component (#8349) * fix(components): suppress unnecessary re-renders of Checkbox and Radio component * fix(components): ensure global event listeners are set up * refactor: table * refactor: stat * refactor: stepper -> steps * refactor: blockquote * refactor: divider to separator * refactor: stories * refactor: cleanup layout components * refactor: layout component stories * refactor: drawer component * refactor: overlay -> backdrop * fix: hidefrom and hidebelow * fix: hidefrom and hidebelow * chore: sort stories * refactor: number input * refactor: pin input * chore: update cli * refactor: a lot of components * refactor: rm custom forward-ref * refactor: round 2 * refactor: round 3 * refactor: toasts * refactor: is props * fix: lint * chore: get build working * fix: build * fix: build * refactor: code * test: fix * fix: storybook build * test: fix * test: updates round 2 * test: updates round 3 * test: updates round 4 * test: updates round 5 * chore: update lockfile * test: fix * chore: update deps * refactor: docs and imports * chore: update eslint * refactor: docs * docs: update content * docs: round 2 * docs: update * docs: update tabs * docs: rename field * docs: rename * refactor: search meta * chore: update * feat: implement unstyled prop on root components * test: refactor * refactor: docs * chore: update stats * refactor: slider and range slider * chore: update breadcrumb * docs: card * docs: checkbox * docs: editable * refactor: link and docs * docs: update * chore: add missing transition * docs: update scripts --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Eelco Wiersma <eelco@appulse.nl> Co-authored-by: autologie <7351859+autologie@users.noreply.github.com>
chakra-ui · Mar 25, 2024 · 29322fc · 29322fc
1 parent f655866
commit 29322fc
Show file tree

Hide file tree

Showing 1,623 changed files with 48,800 additions and 88,219 deletions.
diff --git a/.changeset/blue-masks-tell.md b/.changeset/blue-masks-tell.md
@@ -1,5 +1,5 @@
 ---
-"@chakra-ui/theme": patch
+"@chakra-ui/react": patch
 ---
 
 Fix hard-coded z-index for Menu in favor of one defined from the theme
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -17,7 +17,6 @@
     "gatsby-starter-default",
     "chakra-next-app",
     "chakra-next-pages",
-    "chakra-storybook-addon",
     "vite-ts"
   ]
 }
diff --git a/.changeset/lucky-donuts-burn.md b/.changeset/lucky-donuts-burn.md
diff --git a/.changeset/nasty-pens-marry.md b/.changeset/nasty-pens-marry.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react": minor
+---
+
+Redesign the component themes and anatomy
diff --git a/.changeset/pretty-cougars-cough.md b/.changeset/pretty-cougars-cough.md
@@ -1,7 +1,5 @@
 ---
-"@chakra-ui/styled-system": minor
 "@chakra-ui/react": minor
-"@chakra-ui/theme": minor
 ---
 
 Add support for custom theme conditions or pseudo props via `theme.conditions`

diff --git a/.changeset/smart-maps-repair.md b/.changeset/smart-maps-repair.md
@@ -1,8 +1,5 @@
 ---
-"@chakra-ui/styled-system": minor
 "@chakra-ui/react": minor
-"@chakra-ui/anatomy": minor
-"@chakra-ui/theme": minor
 "@chakra-ui/utils": minor
 "@chakra-ui/docs": minor
 ---

diff --git a/.changeset/tasty-scissors-watch.md b/.changeset/tasty-scissors-watch.md
@@ -1,5 +1,5 @@
 ---
-"@chakra-ui/styled-system": minor
+"@chakra-ui/react": minor
 ---
 
 Add support for `_open` and `_closed` pseudo props for styling their respective

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
diff --git a/.eslintrc b/.eslintrc
@@ -2,25 +2,26 @@
   "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 10
+    "ecmaVersion": 10,
+    "project": "./tsconfig.json",
   },
   "extends": [
     "plugin:import/recommended",
     "plugin:import/typescript",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "airbnb-typescript",
-    "prettier"
+    "prettier",
   ],
   "env": {
     "es6": true,
     "browser": true,
-    "node": true
+    "node": true,
   },
   "settings": {
     "react": {
-      "version": "detect"
-    }
+      "version": "detect",
+    },
   },
   "plugins": ["@typescript-eslint/eslint-plugin", "testing-library"],
   "rules": {
@@ -59,7 +60,7 @@
     "no-alert": "off",
     "react/jsx-filename-extension": [
       "error",
-      { "extensions": [".js", ".tsx"] }
+      { "extensions": [".js", ".tsx"] },
     ],
     "react/jsx-props-no-spreading": "off",
     "react/no-array-index-key": "off",
@@ -71,25 +72,6 @@
     "import/no-named-as-default": "off",
     "prefer-object-spread": "off",
     "arrow-body-style": "off",
-    "react/sort-comp": "off"
+    "react/sort-comp": "off",
   },
-  "overrides": [
-    {
-      "files": [
-        "packages/**/*.ts",
-        "packages/**/*.tsx",
-        "tooling/**/*/*.ts",
-        "scripts/**/*.ts"
-      ],
-      "parserOptions": {
-        "project": ["tsconfig.json"]
-      }
-    },
-    {
-      "files": ["scripts/**/*.ts"],
-      "parserOptions": {
-        "project": ["scripts/tsconfig.json"]
-      }
-    }
-  ]
 }
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -1,8 +1,3 @@
 {
-  "**/*.{ts,tsx,js,jsx}": [
-    "prettier --write"
-  ],
-  "**/*.{md,mdx,yml,json,babelrc,eslintrc,prettierrc}": [
-    "prettier --write"
-  ]
-}
+  "**/*.{ts,tsx,js,jsx,md,mdx}": ["prettier --write"]
+}
diff --git a/.prettierrc b/.prettierrc
@@ -6,5 +6,8 @@
   "semi": false,
   "singleQuote": false,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "importOrder": ["<THIRD_PARTY_MODULES>, ^@/(.*)$", "^[./]"],
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }
diff --git a/.storybook/.babelrc.json b/.storybook/.babelrc.json
diff --git a/.storybook/main.mjs b/.storybook/main.mjs
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,25 @@
+import { StorybookConfig } from "@storybook/react-vite"
+
+const config: StorybookConfig = {
+  stories: ["../packages/react/__stories__/*.stories.tsx"],
+  addons: [
+    "@storybook/addon-a11y",
+    "@storybook/addon-essentials",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  features: {
+    buildStoriesJson: true,
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  typescript: {
+    reactDocgen: false,
+  },
+}
+
+export default config
diff --git a/.storybook/manager.mjs b/.storybook/manager.mjs
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api"
+import theme from "./storybook-theme"
+
+addons.setConfig({
+  theme,
+})
diff --git a/.storybook/preview.mjs b/.storybook/preview.mjs
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -0,0 +1,30 @@
+import { withThemeByClassName } from "@storybook/addon-themes"
+import { Preview, ReactRenderer } from "@storybook/react"
+import React from "react"
+import { ChakraProvider, defaultSystem } from "../packages/react/src"
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        method: "alphabetical",
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      defaultTheme: "light",
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+    }),
+    (Story) => (
+      <ChakraProvider value={defaultSystem}>
+        <Story />
+      </ChakraProvider>
+    ),
+  ],
+}
+
+export default preview
diff --git a/.storybook/storybook-theme.mjs b/.storybook/storybook-theme.mjs
diff --git a/.storybook/storybook-theme.ts b/.storybook/storybook-theme.ts
@@ -0,0 +1,10 @@
+import { create } from "@storybook/theming"
+// @ts-expect-error
+import brandImage from "./storybook-logo.svg"
+
+export default create({
+  base: "light",
+  brandTitle: "Chakra UI",
+  brandUrl: "https://chakra-ui.com",
+  brandImage,
+})