From 6cb179aefee1d17a02ed6e54794532f3416e8019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ernesto=20Garc=C3=ADa?= Date: Tue, 13 Aug 2024 09:21:59 -0400 Subject: [PATCH] BREAKING: New stable version v25.0.0 (#837) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Frankie Yan Co-authored-by: Henning Muszynski Co-authored-by: Ricardo Amaral Co-authored-by: Ernesto García Co-authored-by: Seva Zaikov Co-authored-by: Paweł Grimm Co-authored-by: Pedro Alves Co-authored-by: Natalie Mclaren --- CHANGELOG.md | 68 ++ README.md | 51 +- package-lock.json | 553 ++++++------ package.json | 26 +- src/avatar/avatar.tsx | 4 +- src/banner/banner.stories.mdx | 6 +- src/banner/banner.tsx | 9 +- src/base-button/base-button.stories.mdx | 54 -- src/base-button/base-button.tsx | 180 ---- src/base-button/index.ts | 1 - src/box/box.tsx | 179 ++-- src/button-link/button-link-story-wrapper.tsx | 19 - src/button-link/button-link.stories.mdx | 796 ------------------ src/button-link/button-link.test.tsx | 385 --------- src/button-link/button-link.tsx | 45 - src/button-link/index.ts | 1 - .../button.module.css} | 0 src/button/button.stories.mdx | 471 +++++------ src/button/button.test.tsx | 351 ++++++-- src/button/button.tsx | 285 ++++++- src/button/icon-button.stories.mdx | 569 +++++++++++++ src/checkbox-field/checkbox-field.stories.mdx | 4 +- src/checkbox-field/checkbox-field.tsx | 66 +- src/checkbox-field/use-fork-ref.ts | 38 + .../deprecated-dropdown/dropdown.tsx | 2 +- src/components/deprecated-input/input.tsx | 19 +- src/components/time/time.test.tsx | 53 +- src/heading/heading.tsx | 15 +- src/index.ts | 1 - src/inline/inline.stories.tsx | 3 +- src/loading/loading.tsx | 29 +- src/menu/menu.stories.mdx | 39 +- src/menu/menu.test.tsx | 61 +- src/menu/menu.tsx | 251 +++--- src/modal/modal-examples.stories.tsx | 12 +- src/modal/modal.tsx | 124 +-- src/password-field/password-field.tsx | 13 +- src/prose/prose.tsx | 8 +- src/select-field/select-field.tsx | 3 +- src/stack/stack.stories.tsx | 5 +- src/switch-field/switch-field.tsx | 36 +- src/tabs/tabs.stories.mdx | 26 +- src/tabs/tabs.test.tsx | 67 +- src/tabs/tabs.tsx | 157 ++-- src/text-area/text-area.tsx | 40 +- src/text-field/text-field.tsx | 13 +- src/toast/static-toast.tsx | 4 +- src/toast/toast.stories.tsx | 6 +- src/toast/use-toasts.tsx | 2 +- src/tooltip/tooltip.test.tsx | 151 ++-- src/tooltip/tooltip.tsx | 150 +--- src/utils/common-types.ts | 20 + src/utils/polymorphism.ts | 27 +- src/utils/test-helpers.tsx | 17 +- tsconfig.dist.json | 8 +- tsconfig.json | 3 +- 56 files changed, 2559 insertions(+), 2967 deletions(-) delete mode 100644 src/base-button/base-button.stories.mdx delete mode 100644 src/base-button/base-button.tsx delete mode 100644 src/base-button/index.ts delete mode 100644 src/button-link/button-link-story-wrapper.tsx delete mode 100644 src/button-link/button-link.stories.mdx delete mode 100644 src/button-link/button-link.test.tsx delete mode 100644 src/button-link/button-link.tsx delete mode 100644 src/button-link/index.ts rename src/{base-button/base-button.module.css => button/button.module.css} (100%) create mode 100644 src/button/icon-button.stories.mdx create mode 100644 src/checkbox-field/use-fork-ref.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 7603f97ae..33655f34b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,74 @@ Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it. +# v25.0.0 + +- [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react +- [BREAKING] Remove unsupported `onPointerEnterCapture` and `onPointerLeaveCapture` props from `heading`-, `input`-, and `textarea`-based components. +- [BREAKING] Removed the `ButtonLink` component. +- [BREAKING] `Button` no longer accepts props that render it as an icon-only button. +- [BREAKING] Use an explicit `render` prop for composition, instead of the `as` prop (in the menu, modal, tabs, toasts and tooltip components). +- [BREAKING] `TabPanel`'s prop `render` is renamed to `renderMode`. +- [Feat] Introduce a new `IconButton` component. +- [Feat] The `Button` and `IconButton` component can be rendered as a link using the `render={} prop. + +# v25.0.0-beta.3 + +- [Fix] Allow more props to be forwarded to the `Tab` component. +- [Fix] Properly fix CSS build in tsdx config. +- [Chore] Upgrade to `@ariakit/react@0.4.5`. + +# v25.0.0-beta.2 + +- [Fix] Pass `onClick` to the `Tab` component. + +# v25.0.0-beta.1 + +- [BREAKING] Use an explicit `render` prop for composition, instead of the `as` prop (in the menu, modal, tabs, toasts and tooltip components). +- [BREAKING] `TabPanel`'s prop `render` is renamed to `renderMode`. + +# v25.0.0-beta + +- [BREAKING] Removed the `ButtonLink` component. +- [BREAKING] `Button` no longer accepts props that render it as an icon-only button. +- [Feat] Introduce a new `IconButton` component. +- [Feat] The `Button` and `IconButton` component can be rendered as a link using the `render={} prop. + +# v24.2.0-beta + +- [Fix] Include changes from [v23.3.0](#v2330) in the beta release + +# v24.1.5-beta + +- [Fix] Include changes from [v23.2.2](#v2322) in the beta release + +# v24.1.4-beta + +- [Fix] Include changes from [v23.2.1](#v2321) in the beta release + +# v24.1.3-beta + +- [Fix] Remove unsupported `onPointerEnterCapture` and `onPointerLeaveCapture` props from `heading`-, `input`-, and `textarea`-based components. +- Normally, this would be considered a breaking change, but the v24 version is still pre-release and already contains breaking changes. + +# v24.1.2-beta + +- [Fix] Reset anchor rect after context menu is closed. +- [Fix] Revert earlier attempt to auto-close menus when they lose focus. + +# v24.1.1-beta + +- [Fix] It was possible to leave a tooltip in a state in which it remained visible all the time. This release fixes the issue. +- [Fix] Auto-close menus when they lose focus to elements other than their own content or their sub-menus. + +# v24.1.0-beta + +- [Feat] Include changes from [v23.2.0](#v2320) in the beta release + +# v24.0.0-beta + +- [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react + # v23.3.0 - [Feat] Add `warning` as a `tone` option for `Badge`. diff --git a/README.md b/README.md index 9244b79d7..a4d4a66c9 100644 --- a/README.md +++ b/README.md @@ -88,36 +88,55 @@ This boots up a development server with hot reloading on http://localhost:6006. ## Inside your application -For the second development mode you can leverage `npm link`. First run: +For the second development mode you can leverage `npm start:yalc`. First, make sure you have `yalc` installed globally: + +```shell +npm install -g yalc +``` + +Then, in the reactist repository run: ```sh -npm run start +npm run start:yalc ``` -this will update the build artifacts whenever you change something. +this will publish Reactist to `yalc` and watch for changes. -In your real application you need to first delete the current _@doist/reactist_ dependency and then link to your local one. +In your host application you can then link to your local Reactist version: ```sh cd ~/your-app -# delete current reactist dependency -rm -rf ./node_modules/@doist/reactist - -# link local reactist version -npm link ../reactist +yalc add @doist/reactist ``` -The relative path to reactist may need to be changed to match your local environment. - -To undo the changes and switch back to the reactist version from npm do the following: +To undo the changes and switch back to the reactist version from npm, do the following: ```sh cd ~/your-app -# first remove linked reactist dependency -rm -rf ./node_modules/@doist/reactist +# restore the original reactist version +yalc remove @doist/reactist +# re-install reactist from npm +npm install +``` + +For convenience, you can add a `dev:reactist` script in your host application to automate the process of adding and removing the local Reactist version: + +```json5 +{ + // ... + scripts: { + // ... + 'predev:reactist': 'yalc add @doist/reactist', + 'dev:reactist': 'npm run dev', // or whatever your development script is + 'postdev:reactist': 'yalc remove @doist/reactist && npm i', + }, +} +``` -# re-install reactist from npm (-E avoids updating the version / package-lock.json) -npm install -E @doist/reactist +Then, to develop against Reactist, just run: + +```sh +npm run dev:reactist ``` ## Development tips and tricks diff --git a/package-lock.json b/package-lock.json index c6f6f0888..2184d5ec6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,19 +1,17 @@ { "name": "@doist/reactist", - "version": "23.3.0", + "version": "25.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@doist/reactist", - "version": "23.3.0", + "version": "25.0.0", "hasInstallScript": true, "license": "MIT", "dependencies": { + "@ariakit/react": "0.4.5", "aria-hidden": "^1.2.1", - "ariakit": "2.0.0-next.43", - "ariakit-react-utils": "0.17.0-next.27", - "ariakit-utils": "0.17.0-next.27", "dayjs": "^1.8.10", "patch-package": "^6.4.6", "react-focus-lock": "^2.9.1", @@ -37,6 +35,7 @@ "@doist/prettier-config": "^3.0.5", "@doist/tsconfig": "^1.0.0", "@geometricpanda/storybook-addon-badges": "^0.2.2", + "@rollup/plugin-typescript": "11.1.6", "@storybook/addon-actions": "^6.5.3", "@storybook/addon-controls": "^6.5.3", "@storybook/addon-docs": "^6.5.3", @@ -57,8 +56,8 @@ "@types/jest": "28.1.8", "@types/jest-axe": "^3.5.3", "@types/marked": "^4.0.8", - "@types/react": "^17.0.45", - "@types/react-dom": "^17.0.17", + "@types/react": "18.3.1", + "@types/react-dom": "18.3.0", "@typescript-eslint/eslint-plugin": "^5.25.0", "@typescript-eslint/parser": "^5.25.0", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7", @@ -99,12 +98,13 @@ "react-svg-loader": "^3.0.3", "react-test-renderer": "^17.0.2", "rimraf": "^3.0.2", - "rollup-plugin-postcss": "^3.1.1", + "rollup": "2.79.1", + "rollup-plugin-postcss": "3.1.8", "rollup-plugin-styles": "^3.14.1", "style-loader": "^0.23.1", "svg-url-loader": "^6.0.0", "ts-loader": "^8.0.2", - "tsdx": "^0.14.1", + "tsdx": "0.14.1", "tslib": "^2.0.0", "typescript": "^4.6.4", "webpack": "^4.43.0" @@ -126,6 +126,41 @@ "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==", "dev": true }, + "node_modules/@ariakit/core": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.5.tgz", + "integrity": "sha512-e294+bEcyzt/H/kO4fS5/czLAlkF7PY+Kul3q2z54VY+GGay8NlVs9UezAB7L4jUBlYRAXwp7/1Sq3R7b+MZ7w==" + }, + "node_modules/@ariakit/react": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.5.tgz", + "integrity": "sha512-GUHxaOY1JZrJUHkuV20IY4NWcgknhqTQM0qCQcVZDCi+pJiWchUjTG+UyIr/Of02hU569qnQ7yovskCf+V3tNg==", + "dependencies": { + "@ariakit/react-core": "0.4.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/ariakit" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@ariakit/react-core": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.5.tgz", + "integrity": "sha512-ciTYPwpj/+mdA+EstveEnoygbx5e4PXQJxfkLKy4lkTkDJJUS9GcbYhdnIFJVUta6P1YFvzkIKo+/y9mcbMKJg==", + "dependencies": { + "@ariakit/core": "0.4.5", + "@floating-ui/dom": "^1.0.0", + "use-sync-external-store": "^1.2.0" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", @@ -2425,18 +2460,27 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.1.0.tgz", - "integrity": "sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ==" + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz", + "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", + "dependencies": { + "@floating-ui/utils": "^0.2.7" + } }, "node_modules/@floating-ui/dom": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz", - "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==", + "version": "1.6.10", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz", + "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", "dependencies": { - "@floating-ui/core": "^1.0.5" + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.7" } }, + "node_modules/@floating-ui/utils": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -4153,6 +4197,66 @@ "rollup": "^1.20.0 || ^2.0.0" } }, + "node_modules/@rollup/plugin-typescript": { + "version": "11.1.6", + "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.1.6.tgz", + "integrity": "sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.1.0", + "resolve": "^1.22.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^2.14.0||^3.0.0||^4.0.0", + "tslib": "*", + "typescript": ">=3.7.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + }, + "tslib": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-typescript/node_modules/@rollup/pluginutils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-typescript/node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/@rollup/plugin-typescript/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "node_modules/@rollup/pluginutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", @@ -9318,22 +9422,21 @@ "dev": true }, "node_modules/@types/react": { - "version": "17.0.45", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz", - "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", + "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", "dependencies": { "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, "node_modules/@types/react-dom": { - "version": "17.0.17", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz", - "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==", + "version": "18.3.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", + "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", "dev": true, "dependencies": { - "@types/react": "^17" + "@types/react": "*" } }, "node_modules/@types/react-syntax-highlighter": { @@ -9358,11 +9461,6 @@ "@types/node": "*" } }, - "node_modules/@types/scheduler": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" - }, "node_modules/@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -10615,41 +10713,6 @@ "node": ">=6.0" } }, - "node_modules/ariakit": { - "version": "2.0.0-next.43", - "resolved": "https://registry.npmjs.org/ariakit/-/ariakit-2.0.0-next.43.tgz", - "integrity": "sha512-CatNgIMyurefYTEvp8aF3aQQGR5m9bZxYQXuqyw/MKwxJ/aJ295SSSY5pXyTHbbsgDI28GOKFYa5pfUBvkd7cQ==", - "dependencies": { - "@floating-ui/dom": "^1.0.0", - "ariakit-react-utils": "0.17.0-next.27", - "ariakit-utils": "0.17.0-next.27" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/ariakit" - }, - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - } - }, - "node_modules/ariakit-react-utils": { - "version": "0.17.0-next.27", - "resolved": "https://registry.npmjs.org/ariakit-react-utils/-/ariakit-react-utils-0.17.0-next.27.tgz", - "integrity": "sha512-YyL3sEowwaw6r8wRjENB9S4Hjz/ppyv5nJNeFkb6xaEX/QYUYmqL+lQch50LW04vj9oa8RGHlY2SmyQX3d7g3w==", - "dependencies": { - "ariakit-utils": "0.17.0-next.27" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" - } - }, - "node_modules/ariakit-utils": { - "version": "0.17.0-next.27", - "resolved": "https://registry.npmjs.org/ariakit-utils/-/ariakit-utils-0.17.0-next.27.tgz", - "integrity": "sha512-IcjtuHl7FZP5mGrpvTSXqPUj+jRuIuBHlJAlxr3y4pxRgYpsYVpyZOClU3yrOoG7KUVApfmJjPOGWy00y+Gi+Q==" - }, "node_modules/arr-diff": { "version": "4.0.0", "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=", @@ -12860,14 +12923,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/cli-truncate/node_modules/ansi-regex": { - "version": "5.0.0", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", - "dev": true, - "engines": { - "node": ">=8" - } - }, "node_modules/cli-truncate/node_modules/ansi-styles": { "version": "4.3.0", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", @@ -12919,30 +12974,6 @@ "node": ">=8" } }, - "node_modules/cli-truncate/node_modules/string-width": { - "version": "4.2.0", - "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==", - "dev": true, - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/cli-truncate/node_modules/strip-ansi": { - "version": "6.0.0", - "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", - "dev": true, - "dependencies": { - "ansi-regex": "^5.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/cli-width": { "version": "2.2.1", "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==", @@ -17663,9 +17694,9 @@ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "dev": true, "hasInstallScript": true, "optional": true, @@ -17677,9 +17708,13 @@ } }, "node_modules/function-bind": { - "version": "1.1.1", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/function.prototype.name": { "version": "1.1.5", @@ -18326,6 +18361,18 @@ "minimalistic-assert": "^1.0.1" } }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/hast-to-hyperscript": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz", @@ -19268,19 +19315,6 @@ "node": ">=8" } }, - "node_modules/inquirer/node_modules/string-width": { - "version": "4.2.0", - "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==", - "dev": true, - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/inquirer/node_modules/strip-ansi": { "version": "6.0.0", "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", @@ -19513,12 +19547,15 @@ } }, "node_modules/is-core-module": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz", - "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==", + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz", + "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==", "dev": true, "dependencies": { - "has": "^1.0.3" + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -30941,12 +30978,12 @@ "dev": true }, "node_modules/resolve": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", - "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==", + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", "dev": true, "dependencies": { - "is-core-module": "^2.8.1", + "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, @@ -31069,11 +31106,10 @@ } }, "node_modules/rollup": { - "version": "2.74.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.74.1.tgz", - "integrity": "sha512-K2zW7kV8Voua5eGkbnBtWYfMIhYhT9Pel2uhBk2WO5eMee161nPze/XRfvEQPFYz7KgrCCnmh2Wy0AMFLGGmMA==", + "version": "2.79.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", + "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "dev": true, - "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -31085,8 +31121,9 @@ } }, "node_modules/rollup-plugin-postcss": { - "version": "3.1.6", - "integrity": "sha512-lkKMTXhPyaNgELFFf7mAGLqFTr13Lswak1YkP+b9rfl6YNVHxs3PYgZFAGLOyLvOtSuCVRq6BryXs1EgyC+nHQ==", + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.8.tgz", + "integrity": "sha512-JHnGfW8quNc6ePxEkZ05HEZ1YiRxDgY9RKEetMfsrwxR2kh/d90OVScTc6b1c2Q17Cs/5TRYL+1uddG21lQe3w==", "dev": true, "dependencies": { "chalk": "^4.0.0", @@ -36169,20 +36206,6 @@ "node": ">=6.5.0" } }, - "node_modules/tsdx/node_modules/rollup": { - "version": "1.32.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz", - "integrity": "sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==", - "dev": true, - "dependencies": { - "@types/estree": "*", - "@types/node": "*", - "acorn": "^7.1.0" - }, - "bin": { - "rollup": "dist/bin/rollup" - } - }, "node_modules/tsdx/node_modules/saxes": { "version": "3.1.11", "resolved": "https://registry.npmjs.org/saxes/-/saxes-3.1.11.tgz", @@ -36561,9 +36584,9 @@ } }, "node_modules/typescript": { - "version": "4.6.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz", - "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -37073,6 +37096,14 @@ } } }, + "node_modules/use-sync-external-store": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util": { "version": "0.11.1", "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==", @@ -38012,6 +38043,29 @@ "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==", "dev": true }, + "@ariakit/core": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.5.tgz", + "integrity": "sha512-e294+bEcyzt/H/kO4fS5/czLAlkF7PY+Kul3q2z54VY+GGay8NlVs9UezAB7L4jUBlYRAXwp7/1Sq3R7b+MZ7w==" + }, + "@ariakit/react": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.5.tgz", + "integrity": "sha512-GUHxaOY1JZrJUHkuV20IY4NWcgknhqTQM0qCQcVZDCi+pJiWchUjTG+UyIr/Of02hU569qnQ7yovskCf+V3tNg==", + "requires": { + "@ariakit/react-core": "0.4.5" + } + }, + "@ariakit/react-core": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.5.tgz", + "integrity": "sha512-ciTYPwpj/+mdA+EstveEnoygbx5e4PXQJxfkLKy4lkTkDJJUS9GcbYhdnIFJVUta6P1YFvzkIKo+/y9mcbMKJg==", + "requires": { + "@ariakit/core": "0.4.5", + "@floating-ui/dom": "^1.0.0", + "use-sync-external-store": "^1.2.0" + } + }, "@babel/code-frame": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", @@ -39672,18 +39726,27 @@ } }, "@floating-ui/core": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.1.0.tgz", - "integrity": "sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ==" + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz", + "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", + "requires": { + "@floating-ui/utils": "^0.2.7" + } }, "@floating-ui/dom": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz", - "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==", + "version": "1.6.10", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz", + "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", "requires": { - "@floating-ui/core": "^1.0.5" + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.7" } }, + "@floating-ui/utils": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -40997,6 +41060,41 @@ "magic-string": "^0.25.5" } }, + "@rollup/plugin-typescript": { + "version": "11.1.6", + "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.1.6.tgz", + "integrity": "sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==", + "dev": true, + "requires": { + "@rollup/pluginutils": "^5.1.0", + "resolve": "^1.22.1" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", + "dev": true, + "requires": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + } + }, + "@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + } + } + }, "@rollup/pluginutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", @@ -44799,12 +44897,11 @@ "dev": true }, "@types/react": { - "version": "17.0.45", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz", - "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz", + "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==", "requires": { "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" }, "dependencies": { @@ -44815,12 +44912,12 @@ } }, "@types/react-dom": { - "version": "17.0.17", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz", - "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==", + "version": "18.3.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", + "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", "dev": true, "requires": { - "@types/react": "^17" + "@types/react": "*" } }, "@types/react-syntax-highlighter": { @@ -44841,11 +44938,6 @@ "@types/node": "*" } }, - "@types/scheduler": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" - }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -45775,29 +45867,6 @@ "@babel/runtime-corejs3": "^7.10.2" } }, - "ariakit": { - "version": "2.0.0-next.43", - "resolved": "https://registry.npmjs.org/ariakit/-/ariakit-2.0.0-next.43.tgz", - "integrity": "sha512-CatNgIMyurefYTEvp8aF3aQQGR5m9bZxYQXuqyw/MKwxJ/aJ295SSSY5pXyTHbbsgDI28GOKFYa5pfUBvkd7cQ==", - "requires": { - "@floating-ui/dom": "^1.0.0", - "ariakit-react-utils": "0.17.0-next.27", - "ariakit-utils": "0.17.0-next.27" - } - }, - "ariakit-react-utils": { - "version": "0.17.0-next.27", - "resolved": "https://registry.npmjs.org/ariakit-react-utils/-/ariakit-react-utils-0.17.0-next.27.tgz", - "integrity": "sha512-YyL3sEowwaw6r8wRjENB9S4Hjz/ppyv5nJNeFkb6xaEX/QYUYmqL+lQch50LW04vj9oa8RGHlY2SmyQX3d7g3w==", - "requires": { - "ariakit-utils": "0.17.0-next.27" - } - }, - "ariakit-utils": { - "version": "0.17.0-next.27", - "resolved": "https://registry.npmjs.org/ariakit-utils/-/ariakit-utils-0.17.0-next.27.tgz", - "integrity": "sha512-IcjtuHl7FZP5mGrpvTSXqPUj+jRuIuBHlJAlxr3y4pxRgYpsYVpyZOClU3yrOoG7KUVApfmJjPOGWy00y+Gi+Q==" - }, "arr-diff": { "version": "4.0.0", "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=", @@ -47531,11 +47600,6 @@ "string-width": "^4.2.0" }, "dependencies": { - "ansi-regex": { - "version": "5.0.0", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", - "dev": true - }, "ansi-styles": { "version": "4.3.0", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", @@ -47571,24 +47635,6 @@ "astral-regex": "^2.0.0", "is-fullwidth-code-point": "^3.0.0" } - }, - "string-width": { - "version": "4.2.0", - "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==", - "dev": true, - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.0" - } - }, - "strip-ansi": { - "version": "6.0.0", - "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.0" - } } } }, @@ -51326,15 +51372,16 @@ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "dev": true, "optional": true }, "function-bind": { - "version": "1.1.1", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", "dev": true }, "function.prototype.name": { @@ -51824,6 +51871,15 @@ "minimalistic-assert": "^1.0.1" } }, + "hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "requires": { + "function-bind": "^1.1.2" + } + }, "hast-to-hyperscript": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz", @@ -52549,16 +52605,6 @@ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true }, - "string-width": { - "version": "4.2.0", - "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==", - "dev": true, - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.0" - } - }, "strip-ansi": { "version": "6.0.0", "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", @@ -52730,12 +52776,12 @@ } }, "is-core-module": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz", - "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==", + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz", + "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==", "dev": true, "requires": { - "has": "^1.0.3" + "hasown": "^2.0.2" } }, "is-data-descriptor": { @@ -61425,12 +61471,12 @@ "dev": true }, "resolve": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", - "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==", + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", "dev": true, "requires": { - "is-core-module": "^2.8.1", + "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" } @@ -61518,18 +61564,18 @@ } }, "rollup": { - "version": "2.74.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.74.1.tgz", - "integrity": "sha512-K2zW7kV8Voua5eGkbnBtWYfMIhYhT9Pel2uhBk2WO5eMee161nPze/XRfvEQPFYz7KgrCCnmh2Wy0AMFLGGmMA==", + "version": "2.79.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", + "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "dev": true, - "peer": true, "requires": { "fsevents": "~2.3.2" } }, "rollup-plugin-postcss": { - "version": "3.1.6", - "integrity": "sha512-lkKMTXhPyaNgELFFf7mAGLqFTr13Lswak1YkP+b9rfl6YNVHxs3PYgZFAGLOyLvOtSuCVRq6BryXs1EgyC+nHQ==", + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.8.tgz", + "integrity": "sha512-JHnGfW8quNc6ePxEkZ05HEZ1YiRxDgY9RKEetMfsrwxR2kh/d90OVScTc6b1c2Q17Cs/5TRYL+1uddG21lQe3w==", "dev": true, "requires": { "chalk": "^4.0.0", @@ -63798,7 +63844,7 @@ "prettier": "^1.19.1", "progress-estimator": "^0.2.2", "regenerator-runtime": "^0.13.7", - "rollup": "^1.32.1", + "rollup": "2.79.1", "rollup-plugin-sourcemaps": "^0.6.2", "rollup-plugin-terser": "^5.1.2", "rollup-plugin-typescript2": "^0.27.3", @@ -65487,17 +65533,6 @@ "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==", "dev": true }, - "rollup": { - "version": "1.32.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz", - "integrity": "sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==", - "dev": true, - "requires": { - "@types/estree": "*", - "@types/node": "*", - "acorn": "^7.1.0" - } - }, "saxes": { "version": "3.1.11", "resolved": "https://registry.npmjs.org/saxes/-/saxes-3.1.11.tgz", @@ -65785,9 +65820,9 @@ } }, "typescript": { - "version": "4.6.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz", - "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "dev": true }, "uglify-js": { @@ -66137,6 +66172,12 @@ "tslib": "^2.0.0" } }, + "use-sync-external-store": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "requires": {} + }, "util": { "version": "0.11.1", "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==", diff --git a/package.json b/package.json index 443700697..6cd305b35 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "email": "henning@doist.com", "url": "http://doist.com" }, - "version": "23.3.0", + "version": "25.0.0", "license": "MIT", "homepage": "https://github.com/Doist/reactist#readme", "repository": { @@ -36,6 +36,10 @@ "setup": "npm install && npm run validate", "validate": "npm run lint && npm run type-check && npm run test", "start": "tsdx watch --onSuccess \"./scripts/organize-styles.sh\"", + "prestart:yalc": "npm run clean && yalc publish", + "start:yalc": "tsdx watch --tsconfig tsconfig.dist.json --onSuccess=\"npm run start:yalc:success\"", + "poststart:yalc": "yalc installations clean", + "start:yalc:success": "./scripts/organize-styles.sh && yalc push --sig", "build": "scripts/build.sh", "build:storybook": "build-storybook -o docs", "clean": "rimraf es lib styles dist", @@ -70,6 +74,7 @@ "@doist/prettier-config": "^3.0.5", "@doist/tsconfig": "^1.0.0", "@geometricpanda/storybook-addon-badges": "^0.2.2", + "@rollup/plugin-typescript": "11.1.6", "@storybook/addon-actions": "^6.5.3", "@storybook/addon-controls": "^6.5.3", "@storybook/addon-docs": "^6.5.3", @@ -90,8 +95,8 @@ "@types/jest": "28.1.8", "@types/jest-axe": "^3.5.3", "@types/marked": "^4.0.8", - "@types/react": "^17.0.45", - "@types/react-dom": "^17.0.17", + "@types/react": "18.3.1", + "@types/react-dom": "18.3.0", "@typescript-eslint/eslint-plugin": "^5.25.0", "@typescript-eslint/parser": "^5.25.0", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7", @@ -132,21 +137,20 @@ "react-svg-loader": "^3.0.3", "react-test-renderer": "^17.0.2", "rimraf": "^3.0.2", - "rollup-plugin-postcss": "^3.1.1", + "rollup": "2.79.1", + "rollup-plugin-postcss": "3.1.8", "rollup-plugin-styles": "^3.14.1", "style-loader": "^0.23.1", "svg-url-loader": "^6.0.0", "ts-loader": "^8.0.2", - "tsdx": "^0.14.1", + "tsdx": "0.14.1", "tslib": "^2.0.0", "typescript": "^4.6.4", "webpack": "^4.43.0" }, "dependencies": { + "@ariakit/react": "0.4.5", "aria-hidden": "^1.2.1", - "ariakit": "2.0.0-next.43", - "ariakit-react-utils": "0.17.0-next.27", - "ariakit-utils": "0.17.0-next.27", "dayjs": "^1.8.10", "patch-package": "^6.4.6", "react-focus-lock": "^2.9.1", @@ -155,9 +159,9 @@ "use-callback-ref": "^1.3.0" }, "overrides": { - "tsdx": { - "typescript": "^4.6.4" - } + "typescript": "^4.6.4", + "@rollup/plugin-typescript": "11.1.6", + "rollup": "2.79.1" }, "bugs": { "url": "https://github.com/Doist/reactist/issues" diff --git a/src/avatar/avatar.tsx b/src/avatar/avatar.tsx index f0081701c..c52f0a63f 100644 --- a/src/avatar/avatar.tsx +++ b/src/avatar/avatar.tsx @@ -5,6 +5,7 @@ import { getInitials, emailToIndex } from './utils' import { getClassNames, ResponsiveProp } from '../utils/responsive-props' import styles from './avatar.module.css' import { Box } from '../box' +import type { ObfuscatedClassName } from '../utils/common-types' const AVATAR_COLORS = [ '#fcc652', @@ -29,10 +30,9 @@ const AVATAR_COLORS = [ type AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' -type Props = { +type Props = ObfuscatedClassName & { /** @deprecated Please use `exceptionallySetClassName` */ className?: string - exceptionallySetClassName?: string /** @deprecated */ colorList?: string[] size?: ResponsiveProp diff --git a/src/banner/banner.stories.mdx b/src/banner/banner.stories.mdx index cd43f1ecd..a1bac33ef 100644 --- a/src/banner/banner.stories.mdx +++ b/src/banner/banner.stories.mdx @@ -3,7 +3,7 @@ import { Box } from '../box' import { Text } from '../text' import { Stack } from '../stack' import { Banner } from './banner' -import { ButtonLink } from '../button-link' +import { Button } from '../button' + ) } diff --git a/src/banner/banner.tsx b/src/banner/banner.tsx index 1a4c29d12..dd67ce052 100644 --- a/src/banner/banner.tsx +++ b/src/banner/banner.tsx @@ -9,26 +9,31 @@ export type BannerTone = 'info' | 'promotion' type BannerProps = { id?: string + /** * The tone of the Banner. Affects the background color and the outline. */ tone: BannerTone + /** * The icon that should be added inside the Banner. */ - icon: React.ReactChild + icon: React.ReactElement | string | number + /** * The title to be displayed at the top of the Banner. */ title: React.ReactNode + /** * An optional description to be displayed inside the Banner. */ description?: React.ReactNode + /** * An optional action to displayed inside the Banner. */ - action?: React.ReactChild + action?: React.ReactElement | string | number } const Banner = React.forwardRef(function Banner( diff --git a/src/base-button/base-button.stories.mdx b/src/base-button/base-button.stories.mdx deleted file mode 100644 index 2602fc77a..000000000 --- a/src/base-button/base-button.stories.mdx +++ /dev/null @@ -1,54 +0,0 @@ -import { Meta, ArgsTable, Description } from '@storybook/addon-docs' -import { BaseButton } from '../base-button' - - - -# BaseButton - -The component that powers `Button` and `ButtonLink`, where the button styling logic and some common -functionality resides. This component is internal to Reactist. - -## `` - - - - -## Colors - -The following CSS custom properties are available to customize the button-like element appearance. - -``` ---reactist-actionable-primary-idle-tint ---reactist-actionable-primary-idle-fill ---reactist-actionable-primary-hover-tint ---reactist-actionable-primary-hover-fill ---reactist-actionable-primary-disabled-tint ---reactist-actionable-primary-disabled-fill - ---reactist-actionable-secondary-idle-tint ---reactist-actionable-secondary-idle-fill ---reactist-actionable-secondary-hover-tint ---reactist-actionable-secondary-hover-fill ---reactist-actionable-secondary-disabled-tint ---reactist-actionable-secondary-disabled-fill - ---reactist-actionable-tertiary-idle-tint ---reactist-actionable-tertiary-idle-fill ---reactist-actionable-tertiary-hover-tint ---reactist-actionable-tertiary-hover-fill ---reactist-actionable-tertiary-disabled-tint ---reactist-actionable-tertiary-disabled-fill - ---reactist-actionable-destructive-idle-tint ---reactist-actionable-destructive-idle-fill ---reactist-actionable-destructive-hover-tint ---reactist-actionable-destructive-hover-fill ---reactist-actionable-destructive-disabled-tint ---reactist-actionable-destructive-disabled-fill -``` diff --git a/src/base-button/base-button.tsx b/src/base-button/base-button.tsx deleted file mode 100644 index d6d48df80..000000000 --- a/src/base-button/base-button.tsx +++ /dev/null @@ -1,180 +0,0 @@ -import * as React from 'react' -import { Tooltip, TooltipProps } from '../tooltip' -import { polymorphicComponent } from '../utils/polymorphism' -import { Box } from '../box' -import { Spinner } from '../spinner' -import styles from './base-button.module.css' - -function preventDefault(event: React.SyntheticEvent) { - event.preventDefault() -} - -type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary' -type ButtonTone = 'normal' | 'destructive' -type ButtonSize = 'small' | 'normal' | 'large' -type IconElement = React.ReactChild - -type CommonProps = { - /** - * The button's variant. - */ - variant: ButtonVariant - - /** - * The button's tone. - * @default 'normal' - */ - tone?: ButtonTone - - /** - * The button's size. - * @default 'normal' - */ - size?: ButtonSize - - /** - * Controls the shape of the button. Specifically, it allows to make it have slightly curved - * corners (the default) vs. having them fully curved to the point that they are as round as - * possible. In icon-only buttons this allows to have the button be circular. - * @default 'normal' - */ - shape?: 'normal' | 'rounded' - - /** - * Whether the button is disabled or not. - * @default false - */ - disabled?: boolean - - /** - * Whether the button is busy/loading. - * - * A button in this state is functionally and semantically disabled. Visually is does not look - * dimmed (as disabled buttons normally do), but it shows a loading spinner instead. - * - * @default false - */ - loading?: boolean - - /** - * A tooltip linked to the button element. - */ - tooltip?: TooltipProps['content'] -} - -type AlignmentProps = { - width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full' - align?: 'start' | 'center' | 'end' -} - -type AutoWidthProps = { - width?: 'auto' - align?: never -} - -type IconButtonProps = { - icon: IconElement - 'aria-label': string - children?: never - startIcon?: never - endIcon?: never - width?: never - align?: never -} - -type LabelledButtonProps = { - children: NonNullable - startIcon?: IconElement - endIcon?: IconElement - icon?: never -} & (AutoWidthProps | AlignmentProps) - -export type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps) - -/** - * The component that powers `Button` and `ButtonLink`, where the button styling logic and some - * common functionality resides. This component is internal to Reactist. - * - * @see Button - * @see ButtonLink - */ -export const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton( - { - as = 'div', - variant, - tone = 'normal', - size = 'normal', - shape = 'normal', - disabled = false, - loading = false, - tooltip, - onClick, - exceptionallySetClassName, - children, - startIcon, - endIcon, - icon, - width = 'auto', - align = 'center', - ...props - }, - ref, -) { - const isDisabled = loading || disabled - const buttonElement = ( - - {icon ? ( - (loading && ) || icon - ) : ( - <> - {startIcon ? ( - - {loading && !endIcon ? : startIcon} - - ) : null} - {children ? ( - - {children} - - ) : null} - {endIcon || (loading && !startIcon) ? ( - - {loading ? : endIcon} - - ) : null} - - )} - - ) - - // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided - const tooltipContent = icon && tooltip === undefined ? props['aria-label'] : tooltip - return tooltipContent ? ( - {buttonElement} - ) : ( - buttonElement - ) -}) diff --git a/src/base-button/index.ts b/src/base-button/index.ts deleted file mode 100644 index 83434c611..000000000 --- a/src/base-button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './base-button' diff --git a/src/box/box.tsx b/src/box/box.tsx index 6458a35e6..14613c12b 100644 --- a/src/box/box.tsx +++ b/src/box/box.tsx @@ -89,6 +89,92 @@ interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginPro textAlign?: ResponsiveProp } +function getBoxClassNames({ + position = 'static', + display, + flexDirection = 'row', + flexWrap, + flexGrow, + flexShrink, + gap, + alignItems, + justifyContent, + alignSelf, + overflow, + width, + height, + background, + border, + borderRadius, + minWidth, + maxWidth, + textAlign, + padding, + paddingY, + paddingX, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + margin, + marginY, + marginX, + marginTop, + marginRight, + marginBottom, + marginLeft, + className, +}: BoxProps) { + const resolvedPaddingTop = paddingTop ?? paddingY ?? padding + const resolvedPaddingRight = paddingRight ?? paddingX ?? padding + const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding + const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding + + const resolvedMarginTop = marginTop ?? marginY ?? margin + const resolvedMarginRight = marginRight ?? marginX ?? margin + const resolvedMarginBottom = marginBottom ?? marginY ?? margin + const resolvedMarginLeft = marginLeft ?? marginX ?? margin + + const omitFlex = + !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex') + + return classNames( + className, + styles.box, + display ? getClassNames(styles, 'display', display) : null, + position !== 'static' ? getClassNames(styles, 'position', position) : null, + minWidth != null ? getClassNames(widthStyles, 'minWidth', String(minWidth)) : null, + getClassNames(widthStyles, 'maxWidth', maxWidth), + getClassNames(styles, 'textAlign', textAlign), + // padding + getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop), + getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight), + getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom), + getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft), + // margin + getClassNames(marginStyles, 'marginTop', resolvedMarginTop), + getClassNames(marginStyles, 'marginRight', resolvedMarginRight), + getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom), + getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft), + // flex props + omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection), + omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap), + omitFlex ? null : getClassNames(styles, 'alignItems', alignItems), + omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent), + alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null, + flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null, + flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null, + gap ? getClassNames(gapStyles, 'gap', gap) : null, + // other props + getClassNames(styles, 'overflow', overflow), + width != null ? getClassNames(widthStyles, 'width', String(width)) : null, + getClassNames(styles, 'height', height), + getClassNames(styles, 'bg', background), + borderRadius !== 'none' ? getClassNames(styles, 'borderRadius', borderRadius) : null, + border !== 'none' ? getClassNames(styles, 'border', border) : null, + ) +} + const Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box( { as: component = 'div', @@ -131,65 +217,46 @@ const Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box( }, ref, ) { - const resolvedPaddingTop = paddingTop ?? paddingY ?? padding - const resolvedPaddingRight = paddingRight ?? paddingX ?? padding - const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding - const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding - - const resolvedMarginTop = marginTop ?? marginY ?? margin - const resolvedMarginRight = marginRight ?? marginX ?? margin - const resolvedMarginBottom = marginBottom ?? marginY ?? margin - const resolvedMarginLeft = marginLeft ?? marginX ?? margin - - const omitFlex = - !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex') - return React.createElement( component, { ...props, - className: - classNames( - className, - styles.box, - display ? getClassNames(styles, 'display', display) : null, - position !== 'static' ? getClassNames(styles, 'position', position) : null, - minWidth != null - ? getClassNames(widthStyles, 'minWidth', String(minWidth)) - : null, - getClassNames(widthStyles, 'maxWidth', maxWidth), - getClassNames(styles, 'textAlign', textAlign), - // padding - getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop), - getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight), - getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom), - getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft), - // margin - getClassNames(marginStyles, 'marginTop', resolvedMarginTop), - getClassNames(marginStyles, 'marginRight', resolvedMarginRight), - getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom), - getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft), - // flex props - omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection), - omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap), - omitFlex ? null : getClassNames(styles, 'alignItems', alignItems), - omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent), - alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null, - flexShrink != null - ? getClassNames(styles, 'flexShrink', String(flexShrink)) - : null, - flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null, - gap ? getClassNames(gapStyles, 'gap', gap) : null, - // other props - getClassNames(styles, 'overflow', overflow), - width != null ? getClassNames(widthStyles, 'width', String(width)) : null, - getClassNames(styles, 'height', height), - getClassNames(styles, 'bg', background), - borderRadius !== 'none' - ? getClassNames(styles, 'borderRadius', borderRadius) - : null, - border !== 'none' ? getClassNames(styles, 'border', border) : null, - ) || undefined, + className: getBoxClassNames({ + position, + display, + flexDirection, + flexWrap, + flexGrow, + flexShrink, + gap, + alignItems, + justifyContent, + alignSelf, + overflow, + width, + height, + background, + border, + borderRadius, + minWidth, + maxWidth, + textAlign, + padding, + paddingY, + paddingX, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + margin, + marginY, + marginX, + marginTop, + marginRight, + marginBottom, + marginLeft, + className, + }), ref, }, children, @@ -215,4 +282,4 @@ export type { BoxBorderRadius, } -export { Box } +export { Box, getBoxClassNames } diff --git a/src/button-link/button-link-story-wrapper.tsx b/src/button-link/button-link-story-wrapper.tsx deleted file mode 100644 index 6a754c69c..000000000 --- a/src/button-link/button-link-story-wrapper.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react' -import { ButtonLink, ButtonLinkProps } from './button-link' - -function ButtonLinkStoryWrapper(props: ButtonLinkProps) { - return ( - { - event.preventDefault() - props.onClick?.(event) - }} - href="https://doist.com" - /> - ) -} - -ButtonLinkStoryWrapper.displayName = 'ButtonLink' - -export { ButtonLinkStoryWrapper as ButtonLink } diff --git a/src/button-link/button-link.stories.mdx b/src/button-link/button-link.stories.mdx deleted file mode 100644 index ec1321182..000000000 --- a/src/button-link/button-link.stories.mdx +++ /dev/null @@ -1,796 +0,0 @@ -import { useEffect, useState } from 'react' -import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/addon-docs' -import { Box } from '../box' -import { Inline } from '../inline' -import { Stack } from '../stack' -import { Text } from '../text' -import { Heading } from '../heading' -import * as ButtonLinkModule from './button-link' -import { ButtonLink } from './button-link-story-wrapper' - - - -export function Icon() { - return ( - - - - ) -} - -# ButtonLink - -'A semantic link that looks like a button, exactly matching the `ButtonLink` component in all visual -aspects.' - - - - - - 
tone="normal"
- - - Primary - - - Secondary - - - Tertiary - - - Quaternary - - - - - - Primary - - - - - Secondary - - - - - Tertiary - - - - - Quaternary - - - - - - 
tone="destructive"
- - - - Primary - - - - - Secondary - - - - - Tertiary - - - - - Quaternary - - - - - - - Primary - - - - - Secondary - - - - - Tertiary - - - - - Quaternary - - - - - - - - -## `` - - - - -## Style customization - -Check out `BaseButton` for documentation about how to customize it visually. - -## Stories - -### With label and icon - -To have icons rendered before or after the label, you can use the `startIcon` or `endIcon` prop for -this purpose. - -Nothing prevents you from passing both a `startIcon` and an `endIcon` at the same time. However, -this is discouraged, and not guaranteed to be supported in the future. - - - - - - Icon before the label - - - }> - Primary - - - - }> - Secondary - - - - }> - Tertiary - - - - }> - Quaternary - - - - - - Icon after the label - - - }> - Primary - - - - }> - Secondary - - - - }> - Tertiary - - - - }> - Quaternary - - - - - - - - -## Icon-only buttons - -Alternatively, you can render an icon-only `ButtonLink`. To do so use the `icon` prop. - -Icon-only buttons do not support receiving the `children` prop, or any of the `startIcon` or -`endIcon` props. They also force you to pass a `aria-label` prop. The `aria-label` will also be used -as a tooltip if no tooltip is provided. - - - - - - - } /> - - - } /> - - - } /> - - - } /> - - - - - } disabled /> - - - } - disabled - /> - - - } disabled /> - - - } - disabled - /> - - - - - - -### With different size - -Buttons have a default `normal` size, but they can also be larger or smaller. Use the `size` prop -for this purpose. - - - - - - 
size="small"
- - - - Primary - - - - - Secondary - - - - - Tertiary - - - - - Quaternary - - - - - - - Primary - - - - - Secondary - - - - - Tertiary - - - - - Quaternary - - - - - - 
size="normal"
- - - - Primary - - - - - Secondary - - - - - Tertiary - - - - - Quaternary - - - - - - - Primary - - - - - Secondary - - - - - Tertiary - - - - - Quaternary - - - - - - 
size="large"
- - - - Primary - - - - - Secondary - - - - - Tertiary - - - - - Quaternary - - - - - - - Primary - - - - - Secondary - - - - - Tertiary - - - - - Quaternary - - - - - - - - -### Customized colors - -Though probably not the final official way to do it, this is a way to achieve one-off alternative -styles for buttons. - -```jsx - - Click me - -``` - -And here's how that look like: - - - - - - - Enabled - - - - - Disabled - - - - - - -export function LoadingButtonLink(props) { - const [loading, setLoading] = useState(false) - useEffect(() => { - if (!loading) return undefined - const timeout = setTimeout(() => setLoading(false), 3000) - return () => clearTimeout(timeout) - }, [loading]) - return setLoading(true)} /> -} - -### Full-width - -export function FullWidthTemplate({ label, ...otherProps }) { - if (label === 'Click me now') { - label = ( - <> - Click me now - - ) - } - const props = { - ...otherProps, - startIcon: , - endIcon: , - } - return ( - - Full-width buttons and label alignment - - When buttons have `width` other than the default `auto` they can also customize how - the label is aligned horizontally. - - - - - {label} - - - {label} - - - {label} - - - - - ) -} - - - now', - 'If you click me now, youʼll take away the biggest part of me', - ], - defaultValue: 'Submit', - }, - variant: { - options: ['primary', 'secondary', 'tertiary', 'quaternary'], - control: { type: 'select' }, - defaultValue: 'primary', - }, - tone: { - options: ['normal', 'destructive'], - control: { type: 'inline-radio' }, - defaultValue: 'normal', - }, - size: { - options: ['small', 'normal', 'large'], - control: { type: 'inline-radio' }, - defaultValue: 'normal', - }, - shape: { - options: ['normal', 'rounded'], - control: { type: 'inline-radio' }, - defaultValue: 'normal', - }, - width: { - options: ['none', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'full'], - control: { type: 'select' }, - defaultValue: 'full', - }, - align: { control: false }, - disabled: { control: false }, - startIcon: { control: false }, - endIcon: { control: false }, - icon: { control: false }, - tooltip: { control: false }, - exceptionallySetClassName: { control: false }, - }} - name="Full-width" - > - {FullWidthTemplate.bind({})} - - - -### Playground - -export function Template({ label, ...props }) { - let textLabel = label - if (label === 'Click me now') { - label = ( - <> - Click me now - - ) - textLabel = 'Click me now' - } - return ( - - Click on the buttons to see the loading state - - - - {label} - - - - {label} - - - - - - }> - {label} - - - - } disabled> - {label} - - - - - - }> - {label} - - - - } disabled> - {label} - - - - - - } - /> - - - } - disabled - /> - - - - - ) -} - - - now', - 'If you click me now, youʼll take away the biggest part of me', - ], - defaultValue: 'Submit', - }, - variant: { - options: ['primary', 'secondary', 'tertiary', 'quaternary'], - control: { type: 'select' }, - defaultValue: 'primary', - }, - tone: { - options: ['normal', 'destructive'], - control: { type: 'inline-radio' }, - defaultValue: 'normal', - }, - size: { - options: ['small', 'normal', 'large'], - control: { type: 'inline-radio' }, - defaultValue: 'normal', - }, - shape: { - options: ['normal', 'rounded'], - control: { type: 'inline-radio' }, - defaultValue: 'normal', - }, - disabled: { control: false }, - startIcon: { control: false }, - endIcon: { control: false }, - icon: { control: false }, - tooltip: { control: false }, - openInNewTab: { control: false }, - target: { control: false }, - rel: { control: false }, - as: { control: false }, - exceptionallySetClassName: { control: false }, - }} - name="Playground" - > - {Template.bind({})} - - - -### Dark mode - -export function DarkModeTemplate(props) { - return ( - -