diff --git a/package.json b/package.json index a8ea22a..9bb5c6d 100644 --- a/package.json +++ b/package.json @@ -31,16 +31,16 @@ "@chromatic-com/storybook": "^2.0.2", "@eslint/js": "^9.11.1", "@fontsource/dm-mono": "^5.1.0", - "@storybook/addon-a11y": "^8.3.5", - "@storybook/addon-essentials": "^8.3.5", - "@storybook/addon-interactions": "^8.3.5", - "@storybook/addon-links": "^8.3.5", - "@storybook/addon-themes": "^8.3.5", - "@storybook/blocks": "^8.3.5", - "@storybook/builder-vite": "^8.3.6", - "@storybook/react": "^8.3.5", - "@storybook/react-vite": "^8.3.5", - "@storybook/test": "^8.3.5", + "@storybook/addon-a11y": "8.3.5", + "@storybook/addon-essentials": "8.3.5", + "@storybook/addon-interactions": "8.3.5", + "@storybook/addon-links": "8.3.5", + "@storybook/addon-themes": "8.3.5", + "@storybook/blocks": "8.3.5", + "@storybook/builder-vite": "8.3.5", + "@storybook/react": "8.3.5", + "@storybook/react-vite": "8.3.5", + "@storybook/test": "8.3.5", "@storybook/test-runner": "^0.19.1", "@types/react": "^18.3.10", "@types/react-dom": "^18.3.0", @@ -70,7 +70,7 @@ "prettier-plugin-tailwindcss": "^0.6.8", "react": "^18.3.1", "react-dom": "^18.3.1", - "storybook": "^8.3.5", + "storybook": "8.3.5", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", @@ -138,6 +138,7 @@ "sonner": "^1.5.0", "ts-pattern": "^5.5.0", "vaul": "^1.1.0", + "vite-plugin-svgr": "^4.2.0", "zod": "^3.23.8" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e67a1bc..186b6d5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -134,6 +134,9 @@ importers: vaul: specifier: ^1.1.0 version: 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + vite-plugin-svgr: + specifier: ^4.2.0 + version: 4.2.0(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.6)) zod: specifier: ^3.23.8 version: 3.23.8 @@ -148,34 +151,34 @@ importers: specifier: ^5.1.0 version: 5.1.0 '@storybook/addon-a11y': - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5(storybook@8.3.5) '@storybook/addon-essentials': - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5(storybook@8.3.5) '@storybook/addon-interactions': - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5(storybook@8.3.5) '@storybook/addon-links': - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5(react@18.3.1)(storybook@8.3.5) '@storybook/addon-themes': - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5(storybook@8.3.5) '@storybook/blocks': - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.5) '@storybook/builder-vite': - specifier: ^8.3.6 - version: 8.3.6(storybook@8.3.5)(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.6)) + specifier: 8.3.5 + version: 8.3.5(storybook@8.3.5)(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.6)) '@storybook/react': - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5(@storybook/test@8.3.5(storybook@8.3.5))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.5)(typescript@5.6.3) '@storybook/react-vite': - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5(@storybook/test@8.3.5(storybook@8.3.5))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.24.0)(storybook@8.3.5)(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.6)) '@storybook/test': - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5(storybook@8.3.5) '@storybook/test-runner': specifier: ^0.19.1 @@ -265,7 +268,7 @@ importers: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) storybook: - specifier: ^8.3.5 + specifier: 8.3.5 version: 8.3.5 tailwind-merge: specifier: ^2.5.4 @@ -2070,22 +2073,6 @@ packages: vite-plugin-glimmerx: optional: true - '@storybook/builder-vite@8.3.6': - resolution: {integrity: sha512-AF4+oFe1mvIHrLvaYsv8B0YSlXQtSlKTKwrXnUbcAbeGRwMmFKA1t3VyAcXV0yB9MtZ8YJsA/uKRkgGEaN7wJQ==} - peerDependencies: - '@preact/preset-vite': '*' - storybook: ^8.3.6 - typescript: '>= 4.3.x' - vite: ^4.0.0 || ^5.0.0 - vite-plugin-glimmerx: '*' - peerDependenciesMeta: - '@preact/preset-vite': - optional: true - typescript: - optional: true - vite-plugin-glimmerx: - optional: true - '@storybook/components@8.3.5': resolution: {integrity: sha512-Rq28YogakD3FO4F8KwAtGpo1g3t4V/gfCLqTQ8B6oQUFoxLqegkWk/DlwCzvoJndXuQJfdSyM6+r1JcA4Nql5A==} peerDependencies: @@ -2104,11 +2091,6 @@ packages: peerDependencies: storybook: ^8.3.5 - '@storybook/csf-plugin@8.3.6': - resolution: {integrity: sha512-TJyJPFejO6Gyr3+bXqE/+LomQbivvfHEbee/GwtlRj0XF4KQlqnvuEdEdcK25JbD0NXT8AbyncEUmjoxE7ojQw==} - peerDependencies: - storybook: ^8.3.6 - '@storybook/csf-tools@8.3.5': resolution: {integrity: sha512-vx+8FYwrSNbaotHVbKTO7aKjtQ5ghvMRXNYYoYve2YZ/vm7Os4hbfmEjR90+XcJR5LgOQ4adlhiPWCf+pU8sEg==} peerDependencies: @@ -2188,6 +2170,74 @@ packages: peerDependencies: storybook: ^8.3.5 + '@svgr/babel-plugin-add-jsx-attribute@8.0.0': + resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-remove-jsx-attribute@8.0.0': + resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0': + resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0': + resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-svg-dynamic-title@8.0.0': + resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-svg-em-dimensions@8.0.0': + resolution: {integrity: sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-transform-react-native-svg@8.1.0': + resolution: {integrity: sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-transform-svg-component@8.0.0': + resolution: {integrity: sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==} + engines: {node: '>=12'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-preset@8.1.0': + resolution: {integrity: sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/core@8.1.0': + resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==} + engines: {node: '>=14'} + + '@svgr/hast-util-to-babel-ast@8.0.0': + resolution: {integrity: sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==} + engines: {node: '>=14'} + + '@svgr/plugin-jsx@8.1.0': + resolution: {integrity: sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==} + engines: {node: '>=14'} + peerDependencies: + '@svgr/core': '*' + '@swc/core-darwin-arm64@1.7.36': resolution: {integrity: sha512-8vDczXzCgv3ceTPhEivlpGprN44YlrCK1nbfU9g2TrhV/Aiqi09W/eM5zLesdoM1Z3mJl492gc/8nlTkpDdusw==} engines: {node: '>=10'} @@ -3064,6 +3114,15 @@ packages: resolution: {integrity: sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==} engines: {node: '>= 0.4.0'} + cosmiconfig@8.3.6: + resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==} + engines: {node: '>=14'} + peerDependencies: + typescript: '>=4.9.5' + peerDependenciesMeta: + typescript: + optional: true + create-jest@29.7.0: resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -3265,6 +3324,9 @@ packages: domutils@1.7.0: resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==} + dot-case@3.0.4: + resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==} + eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} @@ -4304,6 +4366,9 @@ packages: loupe@3.1.2: resolution: {integrity: sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==} + lower-case@2.0.2: + resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} + lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} @@ -4486,6 +4551,9 @@ packages: react: ^16.8 || ^17 || ^18 react-dom: ^16.8 || ^17 || ^18 + no-case@3.0.4: + resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} + node-int64@0.4.0: resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==} @@ -4646,6 +4714,10 @@ packages: path-to-regexp@6.3.0: resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==} + path-type@4.0.0: + resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} + engines: {node: '>=8'} + pathe@1.1.2: resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==} @@ -5192,6 +5264,9 @@ packages: resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==} engines: {node: '>=18'} + snake-case@3.0.4: + resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==} + sonner@1.5.0: resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==} peerDependencies: @@ -5331,6 +5406,9 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + svg-parser@2.0.4: + resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} + tailwind-merge@2.5.4: resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==} @@ -5618,6 +5696,11 @@ packages: vite: optional: true + vite-plugin-svgr@4.2.0: + resolution: {integrity: sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==} + peerDependencies: + vite: ^2.6.0 || 3 || 4 || 5 + vite@5.4.9: resolution: {integrity: sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==} engines: {node: ^18.0.0 || >=20.0.0} @@ -7708,25 +7791,6 @@ snapshots: - supports-color - webpack-sources - '@storybook/builder-vite@8.3.6(storybook@8.3.5)(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.6))': - dependencies: - '@storybook/csf-plugin': 8.3.6(storybook@8.3.5) - '@types/find-cache-dir': 3.2.1 - browser-assert: 1.2.1 - es-module-lexer: 1.5.4 - express: 4.21.1 - find-cache-dir: 3.3.2 - fs-extra: 11.2.0 - magic-string: 0.30.12 - storybook: 8.3.5 - ts-dedent: 2.2.0 - vite: 5.4.9(@types/node@22.7.6) - optionalDependencies: - typescript: 5.6.3 - transitivePeerDependencies: - - supports-color - - webpack-sources - '@storybook/components@8.3.5(storybook@8.3.5)': dependencies: storybook: 8.3.5 @@ -7762,13 +7826,6 @@ snapshots: transitivePeerDependencies: - webpack-sources - '@storybook/csf-plugin@8.3.6(storybook@8.3.5)': - dependencies: - storybook: 8.3.5 - unplugin: 1.14.1 - transitivePeerDependencies: - - webpack-sources - '@storybook/csf-tools@8.3.5(storybook@8.3.5)': dependencies: storybook: 8.3.5 @@ -7909,6 +7966,76 @@ snapshots: dependencies: storybook: 8.3.5 + '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.25.8)': + dependencies: + '@babel/core': 7.25.8 + + '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.25.8)': + dependencies: + '@babel/core': 7.25.8 + + '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.25.8)': + dependencies: + '@babel/core': 7.25.8 + + '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.25.8)': + dependencies: + '@babel/core': 7.25.8 + + '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.25.8)': + dependencies: + '@babel/core': 7.25.8 + + '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.25.8)': + dependencies: + '@babel/core': 7.25.8 + + '@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.25.8)': + dependencies: + '@babel/core': 7.25.8 + + '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.25.8)': + dependencies: + '@babel/core': 7.25.8 + + '@svgr/babel-preset@8.1.0(@babel/core@7.25.8)': + dependencies: + '@babel/core': 7.25.8 + '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.25.8) + '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.25.8) + '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.25.8) + '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.25.8) + '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.25.8) + '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.25.8) + '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.25.8) + '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.25.8) + + '@svgr/core@8.1.0(typescript@5.6.3)': + dependencies: + '@babel/core': 7.25.8 + '@svgr/babel-preset': 8.1.0(@babel/core@7.25.8) + camelcase: 6.3.0 + cosmiconfig: 8.3.6(typescript@5.6.3) + snake-case: 3.0.4 + transitivePeerDependencies: + - supports-color + - typescript + + '@svgr/hast-util-to-babel-ast@8.0.0': + dependencies: + '@babel/types': 7.25.8 + entities: 4.5.0 + + '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.6.3))': + dependencies: + '@babel/core': 7.25.8 + '@svgr/babel-preset': 8.1.0(@babel/core@7.25.8) + '@svgr/core': 8.1.0(typescript@5.6.3) + '@svgr/hast-util-to-babel-ast': 8.0.0 + svg-parser: 2.0.4 + transitivePeerDependencies: + - supports-color + '@swc/core-darwin-arm64@1.7.36': optional: true @@ -8859,6 +8986,15 @@ snapshots: corser@2.0.1: {} + cosmiconfig@8.3.6(typescript@5.6.3): + dependencies: + import-fresh: 3.3.0 + js-yaml: 4.1.0 + parse-json: 5.2.0 + path-type: 4.0.0 + optionalDependencies: + typescript: 5.6.3 + create-jest@29.7.0(@types/node@22.7.6): dependencies: '@jest/types': 29.6.3 @@ -9022,6 +9158,11 @@ snapshots: dom-serializer: 0.2.2 domelementtype: 1.3.1 + dot-case@3.0.4: + dependencies: + no-case: 3.0.4 + tslib: 2.8.0 + eastasianwidth@0.2.0: {} ee-first@1.1.1: {} @@ -10341,6 +10482,10 @@ snapshots: loupe@3.1.2: {} + lower-case@2.0.2: + dependencies: + tslib: 2.8.0 + lru-cache@10.4.3: {} lru-cache@5.1.1: @@ -10501,6 +10646,11 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + no-case@3.0.4: + dependencies: + lower-case: 2.0.2 + tslib: 2.8.0 + node-int64@0.4.0: {} node-preload@0.2.1: @@ -10667,6 +10817,8 @@ snapshots: path-to-regexp@6.3.0: {} + path-type@4.0.0: {} + pathe@1.1.2: {} pathval@2.0.0: {} @@ -11184,6 +11336,11 @@ snapshots: ansi-styles: 6.2.1 is-fullwidth-code-point: 5.0.0 + snake-case@3.0.4: + dependencies: + dot-case: 3.0.4 + tslib: 2.8.0 + sonner@1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: react: 18.3.1 @@ -11328,6 +11485,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + svg-parser@2.0.4: {} + tailwind-merge@2.5.4: {} tailwindcss-animate@1.0.7(tailwindcss@3.4.14): @@ -11630,6 +11789,17 @@ snapshots: - rollup - supports-color + vite-plugin-svgr@4.2.0(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.6)): + dependencies: + '@rollup/pluginutils': 5.1.2(rollup@4.24.0) + '@svgr/core': 8.1.0(typescript@5.6.3) + '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.6.3)) + vite: 5.4.9(@types/node@22.7.6) + transitivePeerDependencies: + - rollup + - supports-color + - typescript + vite@5.4.9(@types/node@22.7.6): dependencies: esbuild: 0.21.5 diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg new file mode 100644 index 0000000..575886a --- /dev/null +++ b/src/assets/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/clock.svg b/src/assets/icons/clock.svg new file mode 100644 index 0000000..d32ea80 --- /dev/null +++ b/src/assets/icons/clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/exclamationCircle.svg b/src/assets/icons/exclamationCircle.svg new file mode 100644 index 0000000..2f8641a --- /dev/null +++ b/src/assets/icons/exclamationCircle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts new file mode 100644 index 0000000..9d28aa8 --- /dev/null +++ b/src/assets/icons/index.ts @@ -0,0 +1,5 @@ +export { default as CheckIcon } from "./check.svg?react"; +export { default as ClockIcon } from "./clock.svg?react"; +export { default as ExclamationCircleIcon } from "./exclamationCircle.svg?react"; +export { default as SparklesIcon } from "./sparkles.svg?react"; +export { default as XIcon } from "./x.svg?react"; diff --git a/src/assets/icons/sparkles.svg b/src/assets/icons/sparkles.svg new file mode 100644 index 0000000..531f085 --- /dev/null +++ b/src/assets/icons/sparkles.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/x.svg b/src/assets/icons/x.svg new file mode 100644 index 0000000..7bcd39c --- /dev/null +++ b/src/assets/icons/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/examples/icon/icon.tsx b/src/examples/icon/icon.tsx deleted file mode 100644 index 38cddd9..0000000 --- a/src/examples/icon/icon.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { - type LucideIcon, - AlertTriangle, - Bug, - Check, - CheckCircle2, - ChevronDown, - Clipboard, - ExternalLink, - Flame, - Hash, - Heart, - HelpCircle, - Info, - Link, - List, - Pencil, - Plus, - Quote, - Skull, - Star, - X, - Zap, -} from "lucide-react"; -import React, { ComponentProps } from "react"; - -export type IconProps = ComponentProps & { - type: - | "bug" - | "check" - | "chevron" - | "clipboard" - | "external" - | "flame" - | "hash" - | "heart" - | "help" - | "info" - | "link" - | "list" - | "pencil" - | "plus" - | "quote" - | "skull" - | "star" - | "success" - | "warning" - | "x" - | "zap"; -}; - -const iconComponents: Record = { - bug: Bug, - check: Check, - chevron: ChevronDown, - clipboard: Clipboard, - external: ExternalLink, - flame: Flame, - hash: Hash, - heart: Heart, - help: HelpCircle, - info: Info, - link: Link, - list: List, - pencil: Pencil, - plus: Plus, - quote: Quote, - skull: Skull, - star: Star, - success: CheckCircle2, - warning: AlertTriangle, - x: X, - zap: Zap, -}; - -export const Icon = ({ type, ...props }: IconProps) => { - const IconComponent = iconComponents[type]; - return ; -}; - -export const icons = Object.keys(iconComponents) as IconProps["type"][]; diff --git a/src/examples/icon/index.tsx b/src/examples/icon/index.tsx deleted file mode 100644 index b975409..0000000 --- a/src/examples/icon/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from "./icon"; diff --git a/src/primitives/Icon/Icon.mdx b/src/primitives/Icon/Icon.mdx new file mode 100644 index 0000000..40dbd11 --- /dev/null +++ b/src/primitives/Icon/Icon.mdx @@ -0,0 +1,23 @@ +import { Meta, Title, Primary, Stories, Controls, Story } from "@storybook/blocks"; +import * as IconStories from "./Icon.stories"; +import { Icon } from "./Icon"; + +# Icon + + + +The Icon component abstracts away the SVG rendering of icons accepting props for the `type` and `className`. + +# Example + +## Default + + + +# Controls + + + +# Other variations + + diff --git a/src/primitives/Icon/Icon.stories.tsx b/src/primitives/Icon/Icon.stories.tsx new file mode 100644 index 0000000..11f45c3 --- /dev/null +++ b/src/primitives/Icon/Icon.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Icon, IconType } from "./Icon"; + +const meta = { + title: "Primitives/Icon", + component: Icon, + args: { + type: "check", + }, + argTypes: { + type: { + control: "select", + options: Object.values(IconType), + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const WithThemeColor: Story = { + args: { + className: "ui-fill-grey-400", + }, +}; + +export const WithCustomColor: Story = { + args: { + className: "ui-fill-[#ff00ff]", + }, +}; + +export const WithCustomSize: Story = { + args: { + className: "ui-size-[40px]", + }, +}; diff --git a/src/primitives/Icon/Icon.tsx b/src/primitives/Icon/Icon.tsx new file mode 100644 index 0000000..4a2490f --- /dev/null +++ b/src/primitives/Icon/Icon.tsx @@ -0,0 +1,29 @@ +import { CheckIcon, ClockIcon, ExclamationCircleIcon, SparklesIcon, XIcon } from "@/assets/icons"; +import { cn } from "@/lib/utils"; + +export enum IconType { + CHECK = "check", + CLOCK = "clock", + EXCLAMATION_CIRCLE = "exclamation-circle", + SPARKLES = "sparkles", + X = "x", +} + +export type IconProps = React.SVGProps & { + type: IconType; +}; + +const iconComponents: Record>> = { + check: CheckIcon, + clock: ClockIcon, + "exclamation-circle": ExclamationCircleIcon, + sparkles: SparklesIcon, + x: XIcon, +}; + +export const Icon: React.FC = ({ type, className, ...props }) => { + const IconComponent = iconComponents[type]; + return ; +}; + +export const icons = Object.keys(iconComponents) as IconProps["type"][]; diff --git a/src/primitives/Icon/index.ts b/src/primitives/Icon/index.ts new file mode 100644 index 0000000..998237c --- /dev/null +++ b/src/primitives/Icon/index.ts @@ -0,0 +1 @@ +export * from "./Icon"; diff --git a/src/colors.mdx b/src/tokens/colors.mdx similarity index 87% rename from src/colors.mdx rename to src/tokens/colors.mdx index 87648f1..41c4be6 100644 --- a/src/colors.mdx +++ b/src/tokens/colors.mdx @@ -1,5 +1,5 @@ import { Meta, ColorPalette, ColorItem, Title } from "@storybook/blocks"; -import { colors } from "./tokens/colors"; +import { colors } from "./colors"; diff --git a/src/icons.mdx b/src/tokens/icons.mdx similarity index 88% rename from src/icons.mdx rename to src/tokens/icons.mdx index 33890fc..c0d2973 100644 --- a/src/icons.mdx +++ b/src/tokens/icons.mdx @@ -1,5 +1,5 @@ import { Meta, Title, IconGallery, IconItem } from "@storybook/blocks"; -import { icons, Icon } from "./examples/icon"; +import { icons, Icon } from "@/primitives/Icon"; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..2cb2c98 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,7 @@ /// + +declare module "*.svg?react" { + import { FunctionComponent, SVGAttributes } from "react"; + const content: FunctionComponent>; + export default content; +} diff --git a/tsconfig.json b/tsconfig.json index 45ec5ae..a964a1e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,6 +26,6 @@ }, "outDir": "./dist" }, - "include": ["src"], + "include": ["src", "src/vite-env.d.ts"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/vite.config.ts b/vite.config.ts index b404685..58c016b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,6 +4,7 @@ import dts from "vite-plugin-dts"; import tailwindcss from "tailwindcss"; import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; import path, { resolve } from "path"; +import svgr from "vite-plugin-svgr"; // https://vitejs.dev/config/ export default defineConfig({ @@ -32,7 +33,7 @@ export default defineConfig({ emptyOutDir: true, minify: false, }, - plugins: [react(), dts({ rollupTypes: true }), cssInjectedByJsPlugin()], + plugins: [react(), svgr(), dts({ rollupTypes: true }), cssInjectedByJsPlugin()], resolve: { alias: { "@": path.resolve(__dirname, "./src"),