diff --git a/package-lock.json b/package-lock.json index d80ad1b..10d8d76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,7 @@ "dependencies": { "react": "18.3.1", "react-dom": "18.3.1", - "react-is": "18.3.1", - "styled-components": "5.3.6" + "react-is": "18.3.1" }, "devDependencies": { "@babel/core": "^7.25.7", @@ -40,6 +39,7 @@ "@radix-ui/themes": "^3.1.4", "@storybook/addon-essentials": "8.3.4", "@storybook/addon-interactions": "^8.2.8", + "@storybook/addon-storysource": "^8.3.5", "@storybook/core-server": "8.3.4", "@storybook/jest": "^0.2.3", "@storybook/react-vite": "8.3.4", @@ -81,6 +81,7 @@ "react-router-dom": "^6.26.2", "remove": "^0.1.5", "storybook": "8.3.4", + "styled-components": "5.3.6", "ts-jest": "^29.1.0", "ts-node": "10.9.1", "tslib": "^2.3.0", @@ -115,6 +116,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.7.tgz", "integrity": "sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/highlight": "^7.25.7", @@ -169,6 +171,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.7.tgz", "integrity": "sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.25.7", @@ -184,6 +187,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.7.tgz", "integrity": "sha512-4xwU8StnqnlIhhioZf1tqnVWeQ9pvH/ujS8hRfw/WOza+/a+1qv69BWNy+oY231maTCWgKWhfBU7kDpsds6zAA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.25.7" @@ -298,6 +302,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.7.tgz", "integrity": "sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/traverse": "^7.25.7", @@ -343,6 +348,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.7.tgz", "integrity": "sha512-eaPZai0PiqCi09pPs3pAFfl/zYgGaE6IdXtYvmf0qlcDTd3WCtO7JWCcRd64e0EQrcYgiHibEZnOGsSY4QSgaw==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -416,6 +422,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz", "integrity": "sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -425,6 +432,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz", "integrity": "sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -473,6 +481,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.25.7.tgz", "integrity": "sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-validator-identifier": "^7.25.7", @@ -488,6 +497,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.7.tgz", "integrity": "sha512-aZn7ETtQsjjGG5HruveUK06cU3Hljuhd9Iojm4M8WWv3wLE6OkE5PWbDUkItmMgegmccaITudyuW5RPYrYlgWw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.25.7" @@ -773,6 +783,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.7.tgz", "integrity": "sha512-ruZOnKO+ajVL/MVx+PwNBPOkrnXTXoWMtte1MBpegfCArhqOe3Bj52avVj1huLLxNKYKXYaSxZ2F+woK1ekXfw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.25.7" @@ -2090,6 +2101,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.7.tgz", "integrity": "sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.25.7", @@ -2104,6 +2116,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.7.tgz", "integrity": "sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.25.7", @@ -2122,6 +2135,7 @@ "version": "7.25.7", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.7.tgz", "integrity": "sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.25.7", @@ -2205,6 +2219,7 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz", "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==", + "dev": true, "license": "MIT", "dependencies": { "@emotion/memoize": "^0.9.0" @@ -2214,18 +2229,21 @@ "version": "0.9.0", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "dev": true, "license": "MIT" }, "node_modules/@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", + "dev": true, "license": "MIT" }, "node_modules/@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", + "dev": true, "license": "MIT" }, "node_modules/@esbuild/aix-ppc64": { @@ -3736,6 +3754,7 @@ "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.2.1", @@ -3750,6 +3769,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -3759,6 +3779,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -3779,12 +3800,14 @@ "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", + "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -9370,6 +9393,25 @@ "storybook": "^8.3.4" } }, + "node_modules/@storybook/addon-storysource": { + "version": "8.3.5", + "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-8.3.5.tgz", + "integrity": "sha512-NdVVlBtVRLBeMNwaMNd+B/XDNbQGQ4yKjZOCNBzGsV0sf0fAm8BQ7D5HJFbL4/VoZmRxlYCeQRYHu+/iE2VJhg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/source-loader": "8.3.5", + "estraverse": "^5.2.0", + "tiny-invariant": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.5" + } + }, "node_modules/@storybook/addon-toolbars": { "version": "8.3.4", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.3.4.tgz", @@ -10175,6 +10217,26 @@ "node": ">=10" } }, + "node_modules/@storybook/source-loader": { + "version": "8.3.5", + "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-8.3.5.tgz", + "integrity": "sha512-rQRWMqsM2PROeQxBCX23sDKdTMpdkub3A2Q3+6JhVzYRQodQrQDbzVRULq3G7RGXdktTkE+huVO4pLKaDa7PDw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/csf": "^0.1.11", + "estraverse": "^5.2.0", + "lodash": "^4.17.21", + "prettier": "^3.1.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.5" + } + }, "node_modules/@storybook/test": { "version": "8.3.4", "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.3.4.tgz", @@ -12990,6 +13052,7 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, "license": "MIT", "dependencies": { "color-convert": "^1.9.0" @@ -13002,6 +13065,7 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, "license": "MIT", "dependencies": { "color-name": "1.1.3" @@ -13011,6 +13075,7 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true, "license": "MIT" }, "node_modules/anymatch": { @@ -14432,6 +14497,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "dev": true, "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" @@ -14505,6 +14571,7 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^3.2.1", @@ -15174,6 +15241,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "dev": true, "license": "ISC", "engines": { "node": ">=4" @@ -15366,6 +15434,7 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dev": true, "license": "MIT", "dependencies": { "camelize": "^1.0.0", @@ -15773,6 +15842,7 @@ "version": "4.3.7", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "dev": true, "license": "MIT", "dependencies": { "ms": "^2.1.3" @@ -16689,6 +16759,7 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.8.0" @@ -18896,6 +18967,7 @@ "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -19043,6 +19115,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -19225,6 +19298,7 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dev": true, "license": "BSD-3-Clause", "dependencies": { "react-is": "^16.7.0" @@ -19234,6 +19308,7 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true, "license": "MIT" }, "node_modules/homedir-polyfill": { @@ -23205,6 +23280,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz", "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==", + "dev": true, "license": "MIT", "bin": { "jsesc": "bin/jsesc" @@ -23733,6 +23809,7 @@ "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true, "license": "MIT" }, "node_modules/lodash.clonedeepwith": { @@ -24268,6 +24345,7 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, "license": "MIT" }, "node_modules/multicast-dns": { @@ -25510,12 +25588,14 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", + "dev": true, "license": "ISC" }, "node_modules/picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -26356,6 +26436,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, "license": "MIT" }, "node_modules/prelude-ls": { @@ -28021,6 +28102,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true, "license": "MIT" }, "node_modules/shebang-command": { @@ -28770,6 +28852,7 @@ "version": "5.3.6", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz", "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==", + "dev": true, "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -28801,6 +28884,7 @@ "version": "2.1.4", "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -28916,6 +29000,7 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, "license": "MIT", "dependencies": { "has-flag": "^3.0.0" @@ -29358,6 +29443,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, "license": "MIT", "engines": { "node": ">=4" diff --git a/package.json b/package.json index 000b37c..6b9f2d8 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,7 @@ "dependencies": { "react": "18.3.1", "react-dom": "18.3.1", - "react-is": "18.3.1", - "styled-components": "5.3.6" + "react-is": "18.3.1" }, "devDependencies": { "@babel/core": "^7.25.7", @@ -54,6 +53,7 @@ "@radix-ui/themes": "^3.1.4", "@storybook/addon-essentials": "8.3.4", "@storybook/addon-interactions": "^8.2.8", + "@storybook/addon-storysource": "^8.3.5", "@storybook/core-server": "8.3.4", "@storybook/jest": "^0.2.3", "@storybook/react-vite": "8.3.4", @@ -95,6 +95,7 @@ "react-router-dom": "^6.26.2", "remove": "^0.1.5", "storybook": "8.3.4", + "styled-components": "5.3.6", "ts-jest": "^29.1.0", "ts-node": "10.9.1", "tslib": "^2.3.0", diff --git a/shared-ui/.storybook/main.ts b/shared-ui/.storybook/main.ts index 78c4689..8de16cf 100644 --- a/shared-ui/.storybook/main.ts +++ b/shared-ui/.storybook/main.ts @@ -2,7 +2,11 @@ import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + addons: [ + '@storybook/addon-essentials', + '@storybook/addon-storysource', + '@storybook/addon-interactions', + ], framework: { name: '@storybook/react-vite', options: { @@ -11,6 +15,9 @@ const config: StorybookConfig = { }, }, }, + docs: { + autodocs: true, + }, }; export default config; diff --git a/shared-ui/.storybook/preview.ts b/shared-ui/.storybook/preview.ts deleted file mode 100644 index e69de29..0000000 diff --git a/shared-ui/.storybook/preview.tsx b/shared-ui/.storybook/preview.tsx new file mode 100644 index 0000000..bc243f5 --- /dev/null +++ b/shared-ui/.storybook/preview.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import type { Preview } from '@storybook/react'; +import { GlobalStyle } from '../src/lib/styles/GlobalStyle'; + +const withGlobalStyle = (storyFn: () => JSX.Element) => ( + <> + + {storyFn()} + +); + +const preview: Preview = { + globalTypes: { + theme: { + description: 'Global theme for components', + toolbar: { + // The label to show for this toolbar item + title: 'Theme', + icon: 'circlehollow', + // Array of plain string values or MenuItem shape (see below) + items: ['light', 'dark'], + // Change title based on selected value + dynamicTitle: true, + }, + }, + }, + initialGlobals: { + theme: 'light', + }, + decorators: [withGlobalStyle], +}; + +export default preview; diff --git a/shared-ui/src/index.ts b/shared-ui/src/index.ts index b566b0c..4db7a45 100644 --- a/shared-ui/src/index.ts +++ b/shared-ui/src/index.ts @@ -15,6 +15,7 @@ export * from './lib/Main/MainContent'; export * from './lib/Menu/index'; export * from './lib/Navigation/MenuItem/index'; export * from './lib/styles'; +export * from './lib/styles/utiles/index'; export * from './lib/Text/index'; export * from './lib/styles/styled.d'; export * from './lib/styles/GlobalStyle'; diff --git a/shared-ui/src/lib/Head/index.tsx b/shared-ui/src/lib/Head/index.tsx index 646cf89..3624b75 100644 --- a/shared-ui/src/lib/Head/index.tsx +++ b/shared-ui/src/lib/Head/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Helmet } from 'react-helmet'; +import { fontUrl } from '../styles'; interface HeadProps { title: string; description: string; @@ -11,10 +12,7 @@ export const Head = ({ title, description, keywords }: HeadProps) => { {title} - + ); }; diff --git a/shared-ui/src/lib/Icones/Icon.stories.tsx b/shared-ui/src/lib/Icones/Icon.stories.tsx new file mode 100644 index 0000000..31843bb --- /dev/null +++ b/shared-ui/src/lib/Icones/Icon.stories.tsx @@ -0,0 +1,88 @@ +import styled, { css } from 'styled-components'; +import { Icon, IconProps } from './Icon'; +import { icons } from './paths'; + +const Meta = styled.div` + color: #666; + font-size: 12px; +`; + +const Item = styled.li<{ minimal?: boolean }>` + display: inline-flex; + flex-direction: row; + align-items: center; + flex: 0 1 16%; + min-width: 120px; + margin: 16px; + + svg { + margin-right: 6px; + width: 14px; + height: 14px; + } + + ${(props) => + props.minimal && + css` + flex: none; + min-width: auto; + padding: 0; + background: #fff; + margin: 16px; + + svg { + display: block; + margin-right: 0; + width: 14px; + height: 14px; + } + `}; +`; + +const List = styled.ul` + display: flex; + flex-flow: row wrap; + list-style: none; + padding: 0; + margin: 0; +`; + +const Header = styled.h2` + font-size: 16px; + margin: 16px; +`; + +export default { + title: 'Icon', + component: Icon, +}; + +export const Basic = (args: IconProps) => ; +Basic.args = { icon: 'watch' }; + +export const Labels = () => ( + <> +
{Object.keys(icons).length} icons
+ + {Object.keys(icons).map((key) => ( + + + {key} + + ))} + + +); + +export const NoLabels = () => ( + <> +
{Object.keys(icons).length} icons
+ + {Object.keys(icons).map((key) => ( + + + + ))} + + +); diff --git a/shared-ui/src/lib/Icones/Icon.tsx b/shared-ui/src/lib/Icones/Icon.tsx new file mode 100644 index 0000000..802c9bc --- /dev/null +++ b/shared-ui/src/lib/Icones/Icon.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import styled from 'styled-components'; +import { icons } from './paths'; +export type IconType = keyof typeof icons; + +export interface IconProps { + icon: IconType; +} + +const Svg = styled.svg` + display: inline-block; + shape-rendering: inherit; + transform: translate3d(0, 0, 0); + vertical-align: middle; + + path { + fill: currentColor; + } +`; + +export const Icon: React.FC = ({ icon, ...props }: IconProps) => { + return ( + + {icons[icon]} + + ); +}; diff --git a/shared-ui/src/lib/Icones/paths.tsx b/shared-ui/src/lib/Icones/paths.tsx new file mode 100644 index 0000000..a0e8766 --- /dev/null +++ b/shared-ui/src/lib/Icones/paths.tsx @@ -0,0 +1,1215 @@ +import React from 'react'; + +// Icon paths +export const icons = { + user: ( + + ), + useralt: ( + + ), + useradd: ( + + ), + users: ( + <> + + + + ), + profile: ( + <> + + + + ), + facehappy: ( + <> + + + + ), + faceneutral: ( + <> + + + + ), + facesad: ( + <> + + + + ), + accessibility: ( + <> + + + + + ), + accessibilityalt: ( + + ), + arrowup: ( + + ), + arrowdown: ( + + ), + arrowleft: ( + + ), + arrowright: ( + + ), + arrowupalt: ( + + ), + arrowdownalt: ( + + ), + arrowleftalt: ( + + ), + arrowrightalt: ( + + ), + expandalt: ( + + ), + collapse: ( + + ), + expand: ( + + ), + unfold: ( + <> + + + + + ), + transfer: ( + + ), + redirect: ( + + ), + undo: ( + + ), + reply: ( + + ), + sync: ( + + ), + upload: ( + <> + + + + ), + download: ( + <> + + + + ), + back: ( + <> + + + + ), + proceed: ( + <> + + + + ), + refresh: ( + + ), + globe: ( + + ), + compass: ( + <> + + + + ), + location: ( + + ), + pin: ( + <> + + + + ), + time: ( + <> + + + + ), + dashboard: ( + <> + + + + ), + timer: ( + <> + + + + ), + home: ( + + ), + admin: ( + <> + + + + ), + info: ( + <> + + + + ), + question: ( + <> + + + + ), + support: ( + + ), + alert: ( + <> + + + + ), + email: ( + + ), + phone: ( + + ), + link: ( + <> + + + + ), + unlink: ( + + ), + bell: ( + + ), + rss: ( + <> + + + + + ), + sharealt: ( + <> + + + + ), + share: ( + <> + + + + ), + circlehollow: ( + + ), + circle: , + bookmarkhollow: ( + + ), + bookmark: ( + + ), + diamond: ( + + ), + hearthollow: ( + + ), + heart: ( + + ), + starhollow: ( + + ), + star: ( + + ), + certificate: ( + + ), + verified: ( + + ), + thumbsup: ( + + ), + shield: ( + + ), + basket: ( + <> + + + + + ), + beaker: ( + + ), + hourglass: ( + <> + + + + ), + flag: ( + + ), + cloudhollow: ( + + ), + cloud: ( + + ), + edit: ( + + ), + cog: ( + <> + + + + ), + nut: ( + <> + + + + ), + wrench: ( + + ), + ellipsis: ( + + ), + check: ( + + ), + form: ( + <> + + + + ), + batchdeny: ( + + ), + batchaccept: ( + + ), + controls: ( + + ), + plus: ( + + ), + closeAlt: ( + + ), + cross: ( + + ), + trash: ( + <> + + + + ), + pinalt: ( + + ), + unpin: ( + + ), + add: ( + <> + + + + ), + subtract: ( + <> + + + + ), + close: ( + <> + + + + ), + delete: ( + + ), + passed: ( + + ), + changed: ( + + ), + failed: ( + + ), + clear: ( + + ), + comment: ( + <> + + + + ), + commentadd: ( + <> + + + + ), + requestchange: ( + <> + + + + ), + comments: ( + <> + + + + ), + lock: ( + <> + + + + ), + unlock: ( + <> + + + + ), + key: ( + <> + + + + ), + outbox: ( + <> + + + + ), + credit: ( + <> + + + + ), + button: ( + <> + + + + ), + type: ( + <> + + + + ), + pointerdefault: ( + + ), + pointerhand: ( + + ), + browser: ( + + ), + tablet: ( + + ), + mobile: ( + + ), + watch: ( + + ), + sidebar: ( + <> + + + + ), + sidebaralt: ( + <> + + + + ), + sidebaralttoggle: ( + <> + + + + ), + sidebartoggle: ( + <> + + + + ), + bottombar: ( + <> + + + + ), + bottombartoggle: ( + <> + + + + ), + cpu: ( + <> + + + + ), + database: ( + + ), + memory: ( + <> + + + + ), + structure: ( + + ), + box: ( + + ), + power: ( + <> + + + + ), + photo: ( + <> + + + + ), + component: ( + + ), + grid: ( + + ), + outline: ( + + ), + photodrag: ( + <> + + + + + ), + search: ( + + ), + zoom: ( + <> + + + + ), + zoomout: ( + <> + + + + ), + zoomreset: ( + + ), + eye: ( + <> + + + + ), + eyeclose: ( + <> + + + + ), + lightning: ( + + ), + lightningoff: ( + + ), + contrast: ( + + ), + switchalt: ( + + ), + mirror: ( + + ), + grow: ( + <> + + + + + ), + paintbrush: ( + + ), + ruler: ( + <> + + + + ), + stop: ( + <> + + + + ), + camera: ( + <> + + + + ), + video: ( + <> + + + + ), + speaker: ( + <> + + + + + ), + play: ( + + ), + playback: ( + + ), + playnext: ( + + ), + rewind: ( + + ), + fastforward: ( + + ), + stopalt: ( + + ), + sidebyside: ( + + ), + stacked: ( + + ), + sun: ( + <> + + + + + ), + moon: ( + + ), + book: ( + + ), + document: ( + <> + + + + ), + copy: ( + + ), + category: ( + <> + + + + ), + folder: ( + + ), + print: ( + <> + + + + ), + graphline: ( + <> + + + + ), + calendar: ( + + ), + graphbar: ( + + ), + menu: ( + + ), + menualt: ( + + ), + filter: ( + + ), + docchart: ( + + ), + doclist: ( + <> + + + + ), + markup: ( + + ), + bold: ( + + ), + italic: , + paperclip: ( + + ), + listordered: ( + + ), + listunordered: ( + + ), + paragraph: ( + + ), + markdown: ( + <> + + + + ), + repository: ( + <> + + + + + + ), + commit: ( + + ), + branch: ( + + ), + pullrequest: ( + + ), + merge: ( + + ), + apple: ( + + ), + linux: ( + + ), + ubuntu: ( + + ), + windows: ( + + ), + storybook: ( + + ), + azuredevops: ( + + ), + bitbucket: ( + + ), + chrome: ( + + ), + chromatic: ( + + ), + componentdriven: ( + + ), + discord: ( + + ), + facebook: ( + + ), + figma: ( + + ), + gdrive: ( + + ), + github: ( + + ), + gitlab: ( + + ), + google: ( + + ), + graphql: ( + + ), + medium: ( + + ), + redux: ( + + ), + twitter: ( + + ), + youtube: ( + + ), + linkedin: ( + + ), + vscode: ( + + ), +} as const; diff --git a/shared-ui/src/lib/Menu/index.tsx b/shared-ui/src/lib/Menu/index.tsx index 7c59788..dcf7182 100644 --- a/shared-ui/src/lib/Menu/index.tsx +++ b/shared-ui/src/lib/Menu/index.tsx @@ -7,6 +7,7 @@ export const Menu = (): React.ReactNode => { Style Guide Login Form + {/* Product Card */} ); }; diff --git a/shared-ui/src/lib/styles/index.ts b/shared-ui/src/lib/styles/index.ts index ea07dee..af67fb9 100644 --- a/shared-ui/src/lib/styles/index.ts +++ b/shared-ui/src/lib/styles/index.ts @@ -40,6 +40,8 @@ export interface ButtonProps disabled?: boolean; role?: string; } +export const fontUrl = + 'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'; export const mediaQueries = { mobile: `@media (max-width: ${theme.breakpoints.mobile})`, tablet: `@media (max-width: ${theme.breakpoints.tablet})`, diff --git a/shared-ui/src/lib/styles/utiles/index.ts b/shared-ui/src/lib/styles/utiles/index.ts new file mode 100644 index 0000000..be1f0ec --- /dev/null +++ b/shared-ui/src/lib/styles/utiles/index.ts @@ -0,0 +1 @@ +export * from './loadFontsForStorybook'; diff --git a/shared-ui/src/lib/styles/utiles/loadFontsForStorybook.ts b/shared-ui/src/lib/styles/utiles/loadFontsForStorybook.ts new file mode 100644 index 0000000..2290fd5 --- /dev/null +++ b/shared-ui/src/lib/styles/utiles/loadFontsForStorybook.ts @@ -0,0 +1,16 @@ +import { fontUrl } from '../index'; + +// Load the font and avoid re-loading it when components change +const fontLinkId = 'storybook-font-link-tag'; + +export const loadFontsForStorybook = () => { + if (!document.getElementById(fontLinkId)) { + const fontLink = document.createElement('link'); + + fontLink.id = fontLinkId; + fontLink.href = fontUrl; + fontLink.rel = 'stylesheet'; + + document.head.appendChild(fontLink); + } +}; diff --git a/shared-ui/tsconfig.storybook.json b/shared-ui/tsconfig.storybook.json index a2551de..38fb30e 100644 --- a/shared-ui/tsconfig.storybook.json +++ b/shared-ui/tsconfig.storybook.json @@ -26,6 +26,7 @@ "src/**/*.stories.tsx", "src/**/*.stories.mdx", ".storybook/*.js", - ".storybook/*.ts" + ".storybook/*.ts", + ".storybook/preview.tsx" ] }