build: refactor all package build setup (#7154)

Co-authored-by: Yuku Kotani <yukukotani@gmail.com>

.changeset/popular-moles-speak.md

@@ -0,0 +1,102 @@
+---
+"@chakra-ui/accordion": patch
+"@chakra-ui/alert": patch
+"@chakra-ui/anatomy": patch
+"@chakra-ui/avatar": patch
+"@chakra-ui/breadcrumb": patch
+"@chakra-ui/button": patch
+"@chakra-ui/card": patch
+"@chakra-ui/checkbox": patch
+"@chakra-ui/clickable": patch
+"@chakra-ui/close-button": patch
+"@chakra-ui/color-mode": patch
+"@chakra-ui/control-box": patch
+"@chakra-ui/counter": patch
+"@chakra-ui/css-reset": patch
+"@chakra-ui/descendant": patch
+"@chakra-ui/editable": patch
+"@chakra-ui/react-env": patch
+"@chakra-ui/focus-lock": patch
+"@chakra-ui/form-control": patch
+"@chakra-ui/icon": patch
+"@chakra-ui/icons": patch
+"@chakra-ui/image": patch
+"@chakra-ui/input": patch
+"@chakra-ui/layout": patch
+"@chakra-ui/live-region": patch
+"@chakra-ui/media-query": patch
+"@chakra-ui/menu": patch
+"@chakra-ui/modal": patch
+"@chakra-ui/number-input": patch
+"@chakra-ui/pin-input": patch
+"@chakra-ui/popover": patch
+"@chakra-ui/popper": patch
+"@chakra-ui/portal": patch
+"@chakra-ui/progress": patch
+"@chakra-ui/provider": patch
+"@chakra-ui/radio": patch
+"@chakra-ui/react": patch
+"@chakra-ui/select": patch
+"@chakra-ui/skeleton": patch
+"@chakra-ui/skip-nav": patch
+"@chakra-ui/slider": patch
+"@chakra-ui/spinner": patch
+"@chakra-ui/stat": patch
+"@chakra-ui/switch": patch
+"@chakra-ui/table": patch
+"@chakra-ui/tabs": patch
+"@chakra-ui/tag": patch
+"@chakra-ui/textarea": patch
+"@chakra-ui/theme": patch
+"@chakra-ui/theme-tools": patch
+"@chakra-ui/toast": patch
+"@chakra-ui/tooltip": patch
+"@chakra-ui/transition": patch
+"@chakra-ui/visually-hidden": patch
+"@chakra-ui/styled-system": patch
+"@chakra-ui/system": patch
+"@chakra-ui/react-context": patch
+"@chakra-ui/react-use-animation-state": patch
+"@chakra-ui/react-use-callback-ref": patch
+"@chakra-ui/react-use-controllable-state": patch
+"@chakra-ui/react-use-disclosure": patch
+"@chakra-ui/react-use-event-listener": patch
+"@chakra-ui/react-use-focus-effect": patch
+"@chakra-ui/react-use-focus-on-pointer-down": patch
+"@chakra-ui/react-use-interval": patch
+"@chakra-ui/react-use-latest-ref": patch
+"@chakra-ui/react-use-merge-refs": patch
+"@chakra-ui/react-use-outside-click": patch
+"@chakra-ui/react-use-pan-event": patch
+"@chakra-ui/react-use-previous": patch
+"@chakra-ui/react-use-safe-layout-effect": patch
+"@chakra-ui/react-use-size": patch
+"@chakra-ui/react-use-timeout": patch
+"@chakra-ui/react-use-update-effect": patch
+"@chakra-ui/hooks": patch
+"@chakra-ui/react-utils": patch
+"@chakra-ui/utils": patch
+"@chakra-ui/breakpoint-utils": patch
+"@chakra-ui/dom-utils": patch
+"@chakra-ui/event-utils": patch
+"@chakra-ui/lazy-utils": patch
+"@chakra-ui/merge-utils": patch
+"@chakra-ui/number-utils": patch
+"@chakra-ui/object-utils": patch
+"@chakra-ui/react-children-utils": patch
+"@chakra-ui/react-types": patch
+"@chakra-ui/shared-utils": patch
+"@chakra-ui/theme-utils": patch
+"@chakra-ui/storybook-addon": patch
+---
+
+## All components
+
+Improved the bundling setup for all components.
+
+- Switched to the `.mjs` file extension for correct ESM behavior
+- Switched to the latest `tsup` will uses automatic JSX runtime detection
+  removing the need for manually inject classic `React` import
+- Moved `tsup` config to `package.json` since it's very minimal
+- Removed `clean-package.config.json` in favor of the `package.json` property
+- Fixed issue where Storybook addon (dark mode and RTL) was not working

clean-package.config.json

@@ -0,0 +1,15 @@
+{
+  "replace": {
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.mjs",
+        "require": "./dist/index.js"
+      },
+      "./package.json": "./package.json"
+    }
+  }
+}

package.json

@@ -24,6 +24,7 @@
     "format:check": "prettier --check packages/**/**/src --cache",
     "format:write": "prettier --write packages/**/**/src --cache",
     "build:addon": "cd tooling/storybook-addon && pnpm build:fast",
+    "clean:storybook": "rm -rf node_modules/.cache/storybook",
     "storybook": "pnpm build:addon && start-storybook -p 6006",
     "build:storybook": "pnpm build:addon && build-storybook && sb extract",
     "serve:storybook": "pnpx serve storybook-static",
@@ -52,7 +53,7 @@
     "@babel/preset-env": "^7.18.9",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.18.9",
+    "@babel/runtime": "^7.20.7",
     "@chakra-ui/cli": "workspace:*",
     "@chakra-ui/storybook-addon": "workspace:*",
     "@chakra-ui/test-utils": "workspace:*",
@@ -63,14 +64,14 @@
     "@commitlint/cli": "14.1.0",
     "@commitlint/config-conventional": "14.1.0",
     "@octokit/rest": "^19.0.4",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-storysource": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/cli": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/theming": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-storysource": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
+    "@storybook/cli": "^6.5.15",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/react": "^6.5.15",
+    "@storybook/theming": "^6.5.15",
     "@swc-node/jest": "^1.5.2",
     "@swc/core": "^1.2.177",
     "@testing-library/jest-dom": "^5.16.4",
@@ -111,7 +112,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "3.0.2",
-    "tsup": "6.1.3",
+    "tsup": "^6.5.0",
     "tsx": "^3.8.1",
     "turbo": "1.3.4",
     "twitter-api-client": "^1.5.2",

packages/components/accordion/package.json

@@ -35,6 +35,7 @@
     "url": "https://github.com/chakra-ui/chakra-ui/issues"
   },
   "dependencies": {
+    "@chakra-ui/shared-utils": "workspace:*",
     "@chakra-ui/descendant": "workspace:*",
     "@chakra-ui/react-use-controllable-state": "workspace:*",
     "@chakra-ui/react-use-merge-refs": "workspace:*",
@@ -45,7 +46,6 @@
   "devDependencies": {
     "@chakra-ui/layout": "workspace:*",
     "@chakra-ui/button": "workspace:*",
-    "@chakra-ui/shared-utils": "workspace:*",
     "@chakra-ui/react-use-disclosure": "workspace:*",
     "@chakra-ui/system": "workspace:*",
     "@chakra-ui/modal": "workspace:*",
@@ -59,12 +59,21 @@
     "react": ">=18"
   },
   "scripts": {
-    "build": "JSX=1 tsup src/index.ts --dts",
-    "build:fast": "JSX=1 tsup src/index.ts",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
     "dev": "pnpm build:fast -- --watch",
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
     "prepack": "clean-package",
     "postpack": "clean-package restore"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
   }
 }

packages/components/accordion/src/index.ts

@@ -4,5 +4,16 @@ export { AccordionIcon } from "./accordion-icon"
 export { AccordionItem, type AccordionItemProps } from "./accordion-item"
 export { AccordionPanel, type AccordionPanelProps } from "./accordion-panel"
 export { Accordion, type AccordionProps } from "./accordion"
-export * from "./use-accordion"
+export {
+  AccordionProvider,
+  useAccordionItem,
+  useAccordionContext,
+  useAccordion,
+} from "./use-accordion"
+export type {
+  UseAccordionItemProps,
+  UseAccordionProps,
+  UseAccordionItemReturn,
+  UseAccordionReturn,
+} from "./use-accordion"
 export { useAccordionItemState } from "./use-accordion-item-state"

packages/components/alert/README.md

@@ -1,14 +1,35 @@
-# Alert
+# @chakra-ui/alert
 
-A React component used to alert users of a particular screen area that needs
-user action
+Alerts visually highlight important content for the user. They can contain a
+title, an icon and content. Each intent has a default icon associated with it.
 
 ## Installation
 
 ```sh
-npm i @chakra-ui/alert
+yarn add @chakra-ui/alert
 
 # or
 
-yarn add @chakra-ui/alert
+npm i @chakra-ui/alert
+```
+
+## Import components
+
+```jsx
+import {
+  Alert,
+  AlertTitle,
+  AlertIcon,
+  AlertDescription,
+} from "@chakra-ui/alert"
+```
+
+## Basic usage
+
+```jsx
+<Alert status="error" variant="solid" justifyContent="center">
+  <AlertIcon />
+  <AlertTitle>Your browser is outdated!</AlertTitle>
+  <AlertDescription>Your Chakra experience may be degraded.</AlertDescription>
+</Alert>
 ```

packages/components/alert/package.json

@@ -32,12 +32,12 @@
   "dependencies": {
     "@chakra-ui/icon": "workspace:*",
     "@chakra-ui/react-context": "workspace:*",
+    "@chakra-ui/shared-utils": "workspace:*",
     "@chakra-ui/spinner": "workspace:*"
   },
   "devDependencies": {
     "@chakra-ui/system": "workspace:*",
     "@chakra-ui/layout": "workspace:*",
-    "@chakra-ui/shared-utils": "workspace:*",
     "react": "^18.0.0",
     "clean-package": "2.1.1"
   },
@@ -46,12 +46,21 @@
     "react": ">=18"
   },
   "scripts": {
-    "build": "JSX=1 tsup src/index.ts --dts",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
     "dev": "pnpm build:fast -- --watch",
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
-    "build:fast": "JSX=1 tsup src/index.ts",
     "prepack": "clean-package",
     "postpack": "clean-package restore"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
   }
 }