Merge branch 'main' into feat/use-disclosure

.changeset/blue-masks-tell.md

@@ -1,5 +1,23 @@
 ---
-"@chakra-ui/theme": patch
+"@chakra-ui/react": minor
 ---
 
-Fix hard-coded z-index for Menu in favor of one defined from the theme
+### Fixed
+
+- Fix hard-coded z-index for Menu in favor of one defined from the theme
+- Fix problem with leading and trailing spaces when getting initials for the
+  Avatar component
+- Suppress unnecessary re-renders of Checkbox and Radio component
+
+### Added
+
+- Add CSS `accentColor` property to style props
+- Add support for `asChild` in chakra factory
+- Export `toastStore` from `toast` component
+- Upgrade `framer-motion` to allow for skipAnimations
+- Add component namespace to reduce imports and provide better composition
+- Modal, Drawer: Add default `preserveScrollBarGap`
+
+### Changed
+
+Redesign the component themes and anatomy

.changeset/config.json

@@ -12,12 +12,5 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   },
-  "ignore": [
-    "create-react-app-ts",
-    "gatsby-starter-default",
-    "chakra-next-app",
-    "chakra-next-pages",
-    "chakra-storybook-addon",
-    "vite-ts"
-  ]
+  "ignore": ["chakra-next-app", "chakra-next-pages", "vite-ts"]
 }

.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`

.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

.eslintrc

@@ -2,25 +2,26 @@
   "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 10
+    "ecmaVersion": 10,
+    "project": "./tsconfig.build.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"]
-      }
-    }
-  ]
 }

.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"]
+}

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

.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

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api"
+import theme from "./storybook-theme"
+
+addons.setConfig({
+  theme,
+})

.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