From 6a0c03d99a706f33593d13431d408a74ec2941b2 Mon Sep 17 00:00:00 2001 From: Anass Bouassaba Date: Wed, 6 Nov 2024 05:37:27 +0100 Subject: [PATCH] wip: various fixes --- .storybook/main.ts | 5 +- .storybook/storybook.css | 6 + package-lock.json | 305 +++++++++--------------- package.json | 4 +- rollup.config.js | 1 - src/components/account-menu.tsx | 54 +++-- src/components/app-bar.tsx | 33 ++- src/components/auxiliary-drawer.tsx | 2 +- src/components/data-table.tsx | 4 +- src/components/form.tsx | 23 +- src/components/icons.tsx | 6 +- src/components/logo/logo.tsx | 25 +- src/components/nav-bar.tsx | 34 +-- src/components/notification-badge.tsx | 11 +- src/components/number-tag.tsx | 2 +- src/components/page-pagination.tsx | 57 +++-- src/components/search-bar.tsx | 11 +- src/components/search-input.tsx | 4 +- src/components/section-error.tsx | 14 +- src/components/section-placeholder.tsx | 17 +- src/components/section-spinner.tsx | 8 +- src/components/shell.tsx | 45 +++- src/components/sidenav/sidenav-item.tsx | 46 ++-- src/components/sidenav/sidenav.tsx | 83 ++++--- src/components/switch-card.tsx | 52 ++-- src/components/text.tsx | 4 +- src/react-select.ts | 8 +- src/stories/common/list.tsx | 22 +- src/styles.css | 10 +- tailwind.config.ts | 4 +- tailwind.storybook.config.ts | 38 +++ tsconfig.common.json | 27 +++ tsconfig.json | 28 +-- tsconfig.rollup.json | 9 +- 34 files changed, 553 insertions(+), 449 deletions(-) create mode 100644 tailwind.storybook.config.ts create mode 100644 tsconfig.common.json diff --git a/.storybook/main.ts b/.storybook/main.ts index caa3123..61d497e 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -15,7 +15,10 @@ const config: StorybookConfig = { const newConfig = mergeConfig(config, { css: { postcss: { - plugins: [tailwindcss(), autoprefixer()], + plugins: [ + tailwindcss({ config: './tailwind.storybook.config.ts' }), + autoprefixer(), + ], }, }, build: { diff --git a/.storybook/storybook.css b/.storybook/storybook.css index e984168..03fdbd3 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -1,3 +1,9 @@ +html, +body, #storybook-root { height: 100%; } + +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/package-lock.json b/package-lock.json index d169266..958dce4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,11 @@ "license": "MIT", "dependencies": { "@chakra-ui/react": "2.10.3", - "@chakra-ui/system": "2.6.2", "@chakra-ui/theme-tools": "2.2.6", "@emotion/css": "11.13.4", "@emotion/react": "11.13.3", "@emotion/styled": "11.13.0", + "chakra-react-select": "5.0.2", "classnames": "2.5.1", "framer-motion": "11.11.11", "react": "18.3.1", @@ -404,18 +404,6 @@ "integrity": "sha512-fFIYN7L276gw0Q7/ikMMlZxP7mvnjRaWJ7f3Jsf9VtDOi6eAYIBRrhQe6+SZ0PGmoOkRaBc7gSE5oeIbgFFyrw==", "license": "MIT" }, - "node_modules/@chakra-ui/color-mode": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-2.2.0.tgz", - "integrity": "sha512-niTEA8PALtMWRI9wJ4LL0CSBDo8NBfLNp4GD6/0hstcm3IlbBHTVKxN6HwSaoNYfphDQLxCjT4yG+0BJA5tFpg==", - "license": "MIT", - "dependencies": { - "@chakra-ui/react-use-safe-layout-effect": "2.1.0" - }, - "peerDependencies": { - "react": ">=18" - } - }, "node_modules/@chakra-ui/hooks": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@chakra-ui/hooks/-/hooks-2.4.2.tgz", @@ -431,12 +419,6 @@ "react": ">=18" } }, - "node_modules/@chakra-ui/object-utils": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@chakra-ui/object-utils/-/object-utils-2.1.0.tgz", - "integrity": "sha512-tgIZOgLHaoti5PYGPTwK3t/cqtcycW0owaiOXoZOcpwwX/vlVb+H1jFsQyWiiwQVPt9RkoSLtxzXamx+aHH+bQ==", - "license": "MIT" - }, "node_modules/@chakra-ui/react": { "version": "2.10.3", "resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-2.10.3.tgz", @@ -462,54 +444,6 @@ "react-dom": ">=18" } }, - "node_modules/@chakra-ui/react-use-safe-layout-effect": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@chakra-ui/react-use-safe-layout-effect/-/react-use-safe-layout-effect-2.1.0.tgz", - "integrity": "sha512-Knbrrx/bcPwVS1TorFdzrK/zWA8yuU/eaXDkNj24IrKoRlQrSBFarcgAEzlCHtzuhufP3OULPkELTzz91b0tCw==", - "license": "MIT", - "peerDependencies": { - "react": ">=18" - } - }, - "node_modules/@chakra-ui/react-utils": { - "version": "2.0.12", - "resolved": "https://registry.npmjs.org/@chakra-ui/react-utils/-/react-utils-2.0.12.tgz", - "integrity": "sha512-GbSfVb283+YA3kA8w8xWmzbjNWk14uhNpntnipHCftBibl0lxtQ9YqMFQLwuFOO0U2gYVocszqqDWX+XNKq9hw==", - "license": "MIT", - "dependencies": { - "@chakra-ui/utils": "2.0.15" - }, - "peerDependencies": { - "react": ">=18" - } - }, - "node_modules/@chakra-ui/react-utils/node_modules/@chakra-ui/utils": { - "version": "2.0.15", - "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-2.0.15.tgz", - "integrity": "sha512-El4+jL0WSaYYs+rJbuYFDbjmfCcfGDmRY95GO4xwzit6YAPZBLcR65rOEwLps+XWluZTy1xdMrusg/hW0c1aAA==", - "license": "MIT", - "dependencies": { - "@types/lodash.mergewith": "4.6.7", - "css-box-model": "1.2.1", - "framesync": "6.1.2", - "lodash.mergewith": "4.6.2" - } - }, - "node_modules/@chakra-ui/react-utils/node_modules/@types/lodash.mergewith": { - "version": "4.6.7", - "resolved": "https://registry.npmjs.org/@types/lodash.mergewith/-/lodash.mergewith-4.6.7.tgz", - "integrity": "sha512-3m+lkO5CLRRYU0fhGRp7zbsGi6+BZj0uTVSwvcKU+nSlhjA9/QRNfuSGnD2mX6hQA7ZbmcCkzk5h4ZYGOtk14A==", - "license": "MIT", - "dependencies": { - "@types/lodash": "*" - } - }, - "node_modules/@chakra-ui/shared-utils": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@chakra-ui/shared-utils/-/shared-utils-2.0.5.tgz", - "integrity": "sha512-4/Wur0FqDov7Y0nCXl7HbHzCg4aq86h+SXdoUeuCMD3dSj7dpsVnStLYhng1vxvlbUnLpdF4oz5Myt3i/a7N3Q==", - "license": "MIT" - }, "node_modules/@chakra-ui/styled-system": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-2.12.0.tgz", @@ -520,58 +454,6 @@ "csstype": "^3.1.2" } }, - "node_modules/@chakra-ui/system": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-2.6.2.tgz", - "integrity": "sha512-EGtpoEjLrUu4W1fHD+a62XR+hzC5YfsWm+6lO0Kybcga3yYEij9beegO0jZgug27V+Rf7vns95VPVP6mFd/DEQ==", - "license": "MIT", - "dependencies": { - "@chakra-ui/color-mode": "2.2.0", - "@chakra-ui/object-utils": "2.1.0", - "@chakra-ui/react-utils": "2.0.12", - "@chakra-ui/styled-system": "2.9.2", - "@chakra-ui/theme-utils": "2.0.21", - "@chakra-ui/utils": "2.0.15", - "react-fast-compare": "3.2.2" - }, - "peerDependencies": { - "@emotion/react": "^11.0.0", - "@emotion/styled": "^11.0.0", - "react": ">=18" - } - }, - "node_modules/@chakra-ui/system/node_modules/@chakra-ui/styled-system": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-2.9.2.tgz", - "integrity": "sha512-To/Z92oHpIE+4nk11uVMWqo2GGRS86coeMmjxtpnErmWRdLcp1WVCVRAvn+ZwpLiNR+reWFr2FFqJRsREuZdAg==", - "license": "MIT", - "dependencies": { - "@chakra-ui/shared-utils": "2.0.5", - "csstype": "^3.1.2", - "lodash.mergewith": "4.6.2" - } - }, - "node_modules/@chakra-ui/system/node_modules/@chakra-ui/utils": { - "version": "2.0.15", - "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-2.0.15.tgz", - "integrity": "sha512-El4+jL0WSaYYs+rJbuYFDbjmfCcfGDmRY95GO4xwzit6YAPZBLcR65rOEwLps+XWluZTy1xdMrusg/hW0c1aAA==", - "license": "MIT", - "dependencies": { - "@types/lodash.mergewith": "4.6.7", - "css-box-model": "1.2.1", - "framesync": "6.1.2", - "lodash.mergewith": "4.6.2" - } - }, - "node_modules/@chakra-ui/system/node_modules/@types/lodash.mergewith": { - "version": "4.6.7", - "resolved": "https://registry.npmjs.org/@types/lodash.mergewith/-/lodash.mergewith-4.6.7.tgz", - "integrity": "sha512-3m+lkO5CLRRYU0fhGRp7zbsGi6+BZj0uTVSwvcKU+nSlhjA9/QRNfuSGnD2mX6hQA7ZbmcCkzk5h4ZYGOtk14A==", - "license": "MIT", - "dependencies": { - "@types/lodash": "*" - } - }, "node_modules/@chakra-ui/theme": { "version": "3.4.6", "resolved": "https://registry.npmjs.org/@chakra-ui/theme/-/theme-3.4.6.tgz", @@ -600,63 +482,6 @@ "@chakra-ui/styled-system": ">=2.0.0" } }, - "node_modules/@chakra-ui/theme-utils": { - "version": "2.0.21", - "resolved": "https://registry.npmjs.org/@chakra-ui/theme-utils/-/theme-utils-2.0.21.tgz", - "integrity": "sha512-FjH5LJbT794r0+VSCXB3lT4aubI24bLLRWB+CuRKHijRvsOg717bRdUN/N1fEmEpFnRVrbewttWh/OQs0EWpWw==", - "license": "MIT", - "dependencies": { - "@chakra-ui/shared-utils": "2.0.5", - "@chakra-ui/styled-system": "2.9.2", - "@chakra-ui/theme": "3.3.1", - "lodash.mergewith": "4.6.2" - } - }, - "node_modules/@chakra-ui/theme-utils/node_modules/@chakra-ui/anatomy": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@chakra-ui/anatomy/-/anatomy-2.2.2.tgz", - "integrity": "sha512-MV6D4VLRIHr4PkW4zMyqfrNS1mPlCTiCXwvYGtDFQYr+xHFfonhAuf9WjsSc0nyp2m0OdkSLnzmVKkZFLo25Tg==", - "license": "MIT" - }, - "node_modules/@chakra-ui/theme-utils/node_modules/@chakra-ui/styled-system": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-2.9.2.tgz", - "integrity": "sha512-To/Z92oHpIE+4nk11uVMWqo2GGRS86coeMmjxtpnErmWRdLcp1WVCVRAvn+ZwpLiNR+reWFr2FFqJRsREuZdAg==", - "license": "MIT", - "dependencies": { - "@chakra-ui/shared-utils": "2.0.5", - "csstype": "^3.1.2", - "lodash.mergewith": "4.6.2" - } - }, - "node_modules/@chakra-ui/theme-utils/node_modules/@chakra-ui/theme": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/@chakra-ui/theme/-/theme-3.3.1.tgz", - "integrity": "sha512-Hft/VaT8GYnItGCBbgWd75ICrIrIFrR7lVOhV/dQnqtfGqsVDlrztbSErvMkoPKt0UgAkd9/o44jmZ6X4U2nZQ==", - "license": "MIT", - "dependencies": { - "@chakra-ui/anatomy": "2.2.2", - "@chakra-ui/shared-utils": "2.0.5", - "@chakra-ui/theme-tools": "2.1.2" - }, - "peerDependencies": { - "@chakra-ui/styled-system": ">=2.8.0" - } - }, - "node_modules/@chakra-ui/theme-utils/node_modules/@chakra-ui/theme-tools": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@chakra-ui/theme-tools/-/theme-tools-2.1.2.tgz", - "integrity": "sha512-Qdj8ajF9kxY4gLrq7gA+Azp8CtFHGO9tWMN2wfF9aQNgG9AuMhPrUzMq9AMQ0MXiYcgNq/FD3eegB43nHVmXVA==", - "license": "MIT", - "dependencies": { - "@chakra-ui/anatomy": "2.2.2", - "@chakra-ui/shared-utils": "2.0.5", - "color2k": "^2.0.2" - }, - "peerDependencies": { - "@chakra-ui/styled-system": ">=2.0.0" - } - }, "node_modules/@chakra-ui/utils": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-2.2.2.tgz", @@ -1374,6 +1199,31 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.12", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", + "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "license": "MIT" + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -2907,14 +2757,12 @@ "version": "15.7.13", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", - "devOptional": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.3.12", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz", "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", - "devOptional": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -2931,6 +2779,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", + "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.20.2", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", @@ -3871,6 +3728,21 @@ "node": ">=12" } }, + "node_modules/chakra-react-select": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/chakra-react-select/-/chakra-react-select-5.0.2.tgz", + "integrity": "sha512-DI82ICGya/yu99Np8Uk8rW14o4NIt45i4qHDm/h0eRFVTHsRJqE+My99A9cPGJ72V5tM/WK1EeWxYUxWxhzxkA==", + "license": "MIT", + "dependencies": { + "react-select": "5.8.x" + }, + "peerDependencies": { + "@chakra-ui/react": "2.x", + "@emotion/react": "^11.8.1", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -4065,15 +3937,6 @@ "node": ">= 8" } }, - "node_modules/css-box-model": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", - "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", - "license": "MIT", - "dependencies": { - "tiny-invariant": "^1.0.6" - } - }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -4453,6 +4316,16 @@ "dev": true, "license": "MIT" }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -6624,6 +6497,12 @@ "dev": true, "license": "CC0-1.0" }, + "node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==", + "license": "MIT" + }, "node_modules/memoizerific": { "version": "1.11.3", "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz", @@ -8244,6 +8123,27 @@ "react-dom": ">=16.8" } }, + "node_modules/react-select": { + "version": "5.8.2", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.2.tgz", + "integrity": "sha512-a/LkOckoI62710gGPQSQqUp7A10fGbH/ya3/IR49qaq3XoBvwymgD5mJgtiHxBDsutyEQfdKNycWVh8Cg8UCjw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@floating-ui/dom": "^1.0.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^6.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0", + "use-isomorphic-layout-effect": "^1.1.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -8267,6 +8167,22 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "license": "BSD-3-Clause", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -9562,6 +9478,7 @@ "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", + "dev": true, "license": "MIT" }, "node_modules/tinyrainbow": { @@ -9930,6 +9847,20 @@ } } }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", diff --git a/package.json b/package.json index 785401e..203f3e2 100644 --- a/package.json +++ b/package.json @@ -24,11 +24,11 @@ }, "dependencies": { "@chakra-ui/react": "2.10.3", - "@chakra-ui/system": "2.6.2", "@chakra-ui/theme-tools": "2.2.6", "@emotion/css": "11.13.4", "@emotion/react": "11.13.3", "@emotion/styled": "11.13.0", + "chakra-react-select": "5.0.2", "classnames": "2.5.1", "framer-motion": "11.11.11", "react": "18.3.1", @@ -72,4 +72,4 @@ "typescript-eslint": "8.13.0", "vite": "5.4.10" } -} \ No newline at end of file +} diff --git a/rollup.config.js b/rollup.config.js index 4d8be6f..4fa5926 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -48,7 +48,6 @@ export default [ ], external: [ '@chakra-ui/react', - '@chakra-ui/system', '@chakra-ui/theme-tools', '@emotion/css', '@emotion/react', diff --git a/src/components/account-menu.tsx b/src/components/account-menu.tsx index f662d30..3e972f9 100644 --- a/src/components/account-menu.tsx +++ b/src/components/account-menu.tsx @@ -9,7 +9,7 @@ import { Portal, SkeletonCircle, } from '@chakra-ui/react' -import { forwardRef } from '@chakra-ui/system' +import { forwardRef } from '@chakra-ui/react' import cx from 'classnames' import { truncateEnd, truncateMiddle } from '../helpers' import { variables } from '../variables' @@ -48,11 +48,11 @@ export const AccountMenu = ({
-
+
{name ? ( {truncateEnd(name, 50)} ) : null} {email ? ( - + {truncateMiddle(email, 50)} ) : null} @@ -110,7 +112,7 @@ type ActiveCircleProps = { const ActiveCircle = ({ isActive, children }: ActiveCircleProps) => ( {children} @@ -126,16 +128,22 @@ type AvatarButtonProps = { const AvatarButton = forwardRef( ({ name, picture, isActive, hasBadge, ...props }, ref) => ( -
+
diff --git a/src/components/app-bar.tsx b/src/components/app-bar.tsx index 5f3c683..c6b809b 100644 --- a/src/components/app-bar.tsx +++ b/src/components/app-bar.tsx @@ -9,19 +9,34 @@ export type AppBarProps = { export const AppBar = ({ bar, buttons }: AppBarProps) => (
-
+
{bar}
-
+
{buttons}
diff --git a/src/components/auxiliary-drawer.tsx b/src/components/auxiliary-drawer.tsx index fdc2570..883bba8 100644 --- a/src/components/auxiliary-drawer.tsx +++ b/src/components/auxiliary-drawer.tsx @@ -55,7 +55,7 @@ export const AuxiliaryDrawer = ({ {header} - {body} + {body} {footer} diff --git a/src/components/data-table.tsx b/src/components/data-table.tsx index c329b1f..1652c6c 100644 --- a/src/components/data-table.tsx +++ b/src/components/data-table.tsx @@ -54,7 +54,7 @@ export function DataTable({ items, columns, actions }: DataTableProps) { ))} {actions ? ( - + ({ items, columns, actions }: DataTableProps) { key={`row-${itemIndex}-action-${actionIndex}`} icon={action.icon} className={cx({ - 'text-red-500': action.isDestructive, + 'koupr-text-red-500': action.isDestructive, })} isDisabled={action.isDisabled} onClick={() => action.onClick?.(item)} diff --git a/src/components/form.tsx b/src/components/form.tsx index fab97a3..4da4a38 100644 --- a/src/components/form.tsx +++ b/src/components/form.tsx @@ -17,20 +17,27 @@ export type FormRow = { } export const Form = ({ sections }: FormProps) => ( -
+
{sections?.map((section, sectionIndex) => ( -
- {section.title} +
+ {section.title} {section.rows?.map((row, rowIndex) => (
{row.label} diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 0585f44..997b6e0 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -454,9 +454,9 @@ type GetClassNameOptions = { function getClassName({ filled, className }: GetClassNameOptions) { return cx( - 'material-symbols-rounded', - { 'material-symbols-rounded__filled': filled }, - 'text-[16px]', + 'koupr-material-symbols-rounded', + { 'koupr-material-symbols-rounded__filled': filled }, + 'koupr-text-[16px]', className, ) } diff --git a/src/components/logo/logo.tsx b/src/components/logo/logo.tsx index 744ee30..a717b97 100644 --- a/src/components/logo/logo.tsx +++ b/src/components/logo/logo.tsx @@ -36,16 +36,21 @@ export const Logo = ({ type, size, isGlossy = false }: LogoProps) => { return (
) diff --git a/src/components/nav-bar.tsx b/src/components/nav-bar.tsx index 43c1146..3bea745 100644 --- a/src/components/nav-bar.tsx +++ b/src/components/nav-bar.tsx @@ -15,7 +15,7 @@ export type NavItem = { export const NavBar = ({ items, pathnameFn, navigateFn }: NavBarProps) => { return ( -
+
{items?.map((item, index) => ( { navigateFn?.(href)} diff --git a/src/components/notification-badge.tsx b/src/components/notification-badge.tsx index 53512f1..6397a24 100644 --- a/src/components/notification-badge.tsx +++ b/src/components/notification-badge.tsx @@ -12,8 +12,15 @@ export const NotificationBadge = ({ children, }: NotificationBadgeProps) => { return ( -
-
+
+
{children} {hasBadge ? ( diff --git a/src/components/number-tag.tsx b/src/components/number-tag.tsx index dba1f09..ebfd2d6 100644 --- a/src/components/number-tag.tsx +++ b/src/components/number-tag.tsx @@ -42,7 +42,7 @@ export const NumberTag = ({ isActive, className, children }: TabTagProps) => { }, [isActive, colorMode]) return ( - + {children} ) diff --git a/src/components/page-pagination.tsx b/src/components/page-pagination.tsx index 5dcdfbe..272f48a 100644 --- a/src/components/page-pagination.tsx +++ b/src/components/page-pagination.tsx @@ -46,33 +46,40 @@ export const PagePagination = ({ ) return ( -
+ <> {!hasPageSwitcher && !hasSizeSelector ? null : ( -
- {hasPageSwitcher ? ( - - ) : null} - {hasSizeSelector ? ( - - ) : null} +
+
+ {hasPageSwitcher ? ( + + ) : null} + {hasSizeSelector ? ( + + ) : null} +
)} -
+ ) } diff --git a/src/components/search-bar.tsx b/src/components/search-bar.tsx index 7f28ddd..6409d12 100644 --- a/src/components/search-bar.tsx +++ b/src/components/search-bar.tsx @@ -75,10 +75,17 @@ export const SearchBar = ({ }, []) return ( -
+
- + - - + + (
-
- - {text} +
+ + {text}
) diff --git a/src/components/section-placeholder.tsx b/src/components/section-placeholder.tsx index 72e711c..fab07fd 100644 --- a/src/components/section-placeholder.tsx +++ b/src/components/section-placeholder.tsx @@ -13,10 +13,23 @@ export const SectionPlaceholder = ({ height = '300px', }: SectionPlaceholderProps) => (
-
+
{text} {content}
diff --git a/src/components/section-spinner.tsx b/src/components/section-spinner.tsx index 5c1ae34..b6c6159 100644 --- a/src/components/section-spinner.tsx +++ b/src/components/section-spinner.tsx @@ -7,7 +7,13 @@ export type SectionSpinnerProps = { export const SectionSpinner = ({ height = '300px' }: SectionSpinnerProps) => (
diff --git a/src/components/shell.tsx b/src/components/shell.tsx index 647fe86..d1b0706 100644 --- a/src/components/shell.tsx +++ b/src/components/shell.tsx @@ -6,6 +6,7 @@ import { Sidenav, SidenavItem } from './sidenav' export type ShellProps = { storage?: StorageOptions logo?: ReactElement + homeHref?: string topBar?: ReactElement items?: ShellItem[] children?: ReactElement @@ -23,6 +24,7 @@ export type ShellItem = { export const Shell = ({ logo, + homeHref, topBar, items, storage, @@ -31,8 +33,21 @@ export const Shell = ({ pathnameFn, navigateFn, }: ShellProps) => ( -
- +
+ {items?.map((item, index) => (
{topBar}
{children} diff --git a/src/components/sidenav/sidenav-item.tsx b/src/components/sidenav/sidenav-item.tsx index 401f916..cd846ac 100644 --- a/src/components/sidenav/sidenav-item.tsx +++ b/src/components/sidenav/sidenav-item.tsx @@ -38,43 +38,43 @@ export const SidenavItem = ({ return ( navigateFn?.(href)} >
@@ -83,8 +83,8 @@ export const SidenavItem = ({ {!isCollapsed ? ( {primaryText} diff --git a/src/components/sidenav/sidenav.tsx b/src/components/sidenav/sidenav.tsx index 9325403..2147e47 100644 --- a/src/components/sidenav/sidenav.tsx +++ b/src/components/sidenav/sidenav.tsx @@ -56,29 +56,34 @@ export const Sidenav = ({ >
{logo ? (
navigateFn?.(homeHref ?? '/')}> -
+
{logo} @@ -89,34 +94,38 @@ export const Sidenav = ({ ) : null}
{children}
-
+
{ setIsCollapsed(!isCollapsed) diff --git a/src/components/switch-card.tsx b/src/components/switch-card.tsx index 834c4f5..6200c0f 100644 --- a/src/components/switch-card.tsx +++ b/src/components/switch-card.tsx @@ -71,7 +71,7 @@ export const SwitchCard = ({ if (isCollapsed) { return ( -
+
@@ -79,7 +79,12 @@ export const SwitchCard = ({ @@ -94,36 +99,45 @@ export const SwitchCard = ({ ) } else { return ( -
+
{icon} - {label} + {label}
{isActive ? ( -
{children}
+
+ {children} +
) : null}
diff --git a/src/components/text.tsx b/src/components/text.tsx index 9ff444f..f5e208d 100644 --- a/src/components/text.tsx +++ b/src/components/text.tsx @@ -33,9 +33,9 @@ export const Text: React.FC = ({ WebkitLineClamp: noOfLines, }} className={cx( - { 'whitespace-nowrap': maxCharacters !== undefined }, + { 'koupr-whitespace-nowrap': maxCharacters !== undefined }, { - 'overflow-hidden': + 'koupr-overflow-hidden': noOfLines !== undefined || maxCharacters !== undefined, }, className, diff --git a/src/react-select.ts b/src/react-select.ts index 4377b13..5ea2a66 100644 --- a/src/react-select.ts +++ b/src/react-select.ts @@ -1,11 +1,13 @@ -import { ColorMode, SystemStyleObject } from '@chakra-ui/system' +import { ColorMode, SystemStyleObject } from '@chakra-ui/react' +import { ChakraStylesConfig } from 'chakra-react-select' export type ReactSelectStylesOptions = { colorMode?: ColorMode } -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export function reactSelectStyles(options?: ReactSelectStylesOptions): any { +export function reactSelectStyles( + options?: ReactSelectStylesOptions, +): ChakraStylesConfig { let bg = 'transparent' if (options?.colorMode === 'light') { bg = 'white' diff --git a/src/stories/common/list.tsx b/src/stories/common/list.tsx index 67d7b72..5611db6 100644 --- a/src/stories/common/list.tsx +++ b/src/stories/common/list.tsx @@ -20,7 +20,7 @@ export const List = () => { }) return ( -
+
{ }, ]} /> - +
+ +
) } diff --git a/src/styles.css b/src/styles.css index a1ced12..d19aa68 100644 --- a/src/styles.css +++ b/src/styles.css @@ -6,13 +6,7 @@ @tailwind components; @tailwind utilities; -html, -body, -#root { - height: 100%; -} - -.material-symbols-rounded { +.koupr-material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-variation-settings: 'FILL' 0, @@ -21,7 +15,7 @@ body, 'opsz' 24; } -.material-symbols-rounded__filled { +.koupr-material-symbols-rounded__filled { font-family: 'Material Symbols Rounded'; font-variation-settings: 'FILL' 1, diff --git a/tailwind.config.ts b/tailwind.config.ts index 2bf91b5..aff83b6 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,8 @@ +import { Config } from 'tailwindcss' import { variables } from './src/variables' export default { + prefix: 'koupr-', important: true, darkMode: 'class', content: ['./src/**/*.{js,ts,jsx,tsx}'], @@ -34,4 +36,4 @@ export default { }, }, plugins: [], -} +} as Config diff --git a/tailwind.storybook.config.ts b/tailwind.storybook.config.ts new file mode 100644 index 0000000..54cb4b4 --- /dev/null +++ b/tailwind.storybook.config.ts @@ -0,0 +1,38 @@ +import { Config } from 'tailwindcss' +import { variables } from './src/variables' + +export default { + important: true, + darkMode: 'class', + content: ['./src/**/*.{js,ts,jsx,tsx}'], + theme: { + extend: { + fontFamily: { + display: [variables.headingFontFamily], + body: [variables.bodyFontFamily], + }, + fontSize: { + 'base': variables.bodyFontSize, + 'heading': variables.headingFontSize, + }, + borderRadius: { + 'DEFAULT': variables.borderRadius, + 'sm': variables.borderRadiusXs, + 'md': variables.borderRadiusSm, + 'lg': variables.borderRadius, + 'xl': variables.borderRadiusMd, + }, + spacing: { + 'DEFAULT': variables.spacing, + '0.5': variables.spacingXs, + '1': variables.spacingSm, + '1.5': variables.spacing, + '2': variables.spacingMd, + '2.5': variables.spacingLg, + '3': variables.spacingXl, + '3.5': variables.spacing2Xl, + }, + }, + }, + plugins: [], +} as Config diff --git a/tsconfig.common.json b/tsconfig.common.json new file mode 100644 index 0000000..1618431 --- /dev/null +++ b/tsconfig.common.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@koupr/ui": ["dist/types.d.ts"] + }, + "outDir": "./dist", + "declaration": true, + "emitDeclarationOnly": true, + "preserveSymlinks": true, + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + } +} diff --git a/tsconfig.json b/tsconfig.json index a2d7681..1346d38 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,28 +1,4 @@ { - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@koupr/ui": ["dist/types.d.ts"] - }, - "outDir": "./dist", - "declaration": true, - "emitDeclarationOnly": true, - "preserveSymlinks": true, - "target": "ESNext", - "useDefineForClassFields": true, - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "allowJs": false, - "skipLibCheck": true, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "Node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": ["src", "custom.d.ts"] + "extends": "./tsconfig.common.json", + "include": [".storybook/**/*", "src/**/*"] } diff --git a/tsconfig.rollup.json b/tsconfig.rollup.json index b808d90..d6cc738 100644 --- a/tsconfig.rollup.json +++ b/tsconfig.rollup.json @@ -1,6 +1,5 @@ { - "extends": "./tsconfig.json", - "exclude": [ - "src/stories" - ] -} \ No newline at end of file + "extends": "./tsconfig.common.json", + "include": ["src/**/*"], + "exclude": ["src/stories"] +}