diff --git a/.storybook/main.js b/.storybook/main.js index 44c557e..13ebbfa 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,6 +4,8 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', + '@storybook/addon-a11y', + 'storybook-addon-designs', { name: '@storybook/addon-postcss', options: { diff --git a/.storybook/preview.js b/.storybook/preview.js index f2926f8..019b875 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,5 +1,6 @@ import 'tailwindcss/tailwind.css'; import '../src/global.css'; +import { customViewports } from './viewports'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, @@ -9,4 +10,28 @@ export const parameters = { date: /Date$/, }, }, + backgrounds: { + default: 'background', + values: [ + { + name: 'surface', + value: '#ffffff', + }, + { + name: 'background', + value: '#f1f5f9', // bg-slate-100 + }, + ], + grid: { + disable: true, + }, + }, + viewport: { + viewports: customViewports, + }, + options: { + storySort: { + order: ['Foundation', 'Components'], + }, + }, }; diff --git a/.storybook/viewports.js b/.storybook/viewports.js new file mode 100644 index 0000000..8e25591 --- /dev/null +++ b/.storybook/viewports.js @@ -0,0 +1,37 @@ +export const customViewports = { + sm: { + name: 'sm', + styles: { + width: '640px', + height: '960px', + }, + }, + md: { + name: 'md', + styles: { + width: '768px', + height: '960px', + }, + }, + lg: { + name: 'lg', + styles: { + width: '1024px', + height: '960px', + }, + }, + xl: { + name: 'xl', + styles: { + width: '1280px', + height: '960px', + }, + }, + xxl: { + name: '2xl', + styles: { + width: '1536px', + height: '960px', + }, + }, +}; diff --git a/package-lock.json b/package-lock.json index eb0d2dd..533bdb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0-development", "devDependencies": { "@babel/core": "^7.20.2", + "@storybook/addon-a11y": "^6.5.13", "@storybook/addon-actions": "^6.5.13", "@storybook/addon-essentials": "^6.5.13", "@storybook/addon-interactions": "^6.5.13", @@ -36,6 +37,7 @@ "react": "^18.2.0", "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", + "storybook-addon-designs": "^6.3.1", "tailwindcss": "^3.2.4", "typescript": "^4.9.3" } @@ -2117,6 +2119,28 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/@figspec/components": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@figspec/components/-/components-1.0.1.tgz", + "integrity": "sha512-UvnEamPEAMh9HExViqpobWmX25g1+soA9kcJu+It3VerMa7CeVyaIbQydNf1Gys5v/rxJVdTDRgQ7OXW2zAAig==", + "dev": true, + "dependencies": { + "lit": "^2.1.3" + } + }, + "node_modules/@figspec/react": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@figspec/react/-/react-1.0.3.tgz", + "integrity": "sha512-r683qOko+5CbT48Ox280fMx2MNAtaFPgCNJvldOqN3YtmAzlcTT+YSxd3OahA+kjXGGrnzDbUgeTOX1cPLII+g==", + "dev": true, + "dependencies": { + "@figspec/components": "^1.0.1", + "@lit-labs/react": "^1.0.2" + }, + "peerDependencies": { + "react": "^16.14.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -2486,6 +2510,18 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "node_modules/@lit-labs/react": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.0.tgz", + "integrity": "sha512-uvdOtzACm1WzTySpKnqXth62iPL+4yDow7cSZH7m7jHbDr+tZVXn44DJ5IoJuMjEevORRe57lNrOywFW6d4Fyg==", + "dev": true + }, + "node_modules/@lit/reactive-element": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.2.tgz", + "integrity": "sha512-VMOxsWh/QDwrxPsgkSQnuZ+8mfNy1OTjzzUdLBvvZtpahwPTHTeVZ51RZRqO4xfKVrR+btIPA8D01IL3xeG66w==", + "dev": true + }, "node_modules/@mdx-js/mdx": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz", @@ -2773,6 +2809,46 @@ "node": ">= 8" } }, + "node_modules/@storybook/addon-a11y": { + "version": "6.5.13", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.13.tgz", + "integrity": "sha512-+Tcl/4LWRh3ygLUZFGvkjT42CF/tJcP+kgsIho7i2MxpgZyD6+BUhL9srPZusjbR+uHcHXJ/yxw/vxFQ+UCTLA==", + "dev": true, + "dependencies": { + "@storybook/addons": "6.5.13", + "@storybook/api": "6.5.13", + "@storybook/channels": "6.5.13", + "@storybook/client-logger": "6.5.13", + "@storybook/components": "6.5.13", + "@storybook/core-events": "6.5.13", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.13", + "axe-core": "^4.2.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "lodash": "^4.17.21", + "react-sizeme": "^3.0.1", + "regenerator-runtime": "^0.13.7", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/@storybook/addon-actions": { "version": "6.5.13", "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.13.tgz", @@ -5319,6 +5395,12 @@ "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==", "dev": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", + "dev": true + }, "node_modules/@types/uglify-js": { "version": "3.17.1", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.1.tgz", @@ -6399,6 +6481,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axe-core": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz", + "integrity": "sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/babel-loader": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz", @@ -6739,6 +6830,12 @@ } ] }, + "node_modules/batch-processor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", + "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==", + "dev": true + }, "node_modules/better-opn": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-2.1.1.tgz", @@ -9126,6 +9223,15 @@ "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", "dev": true }, + "node_modules/element-resize-detector": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz", + "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==", + "dev": true, + "dependencies": { + "batch-processor": "1.0.0" + } + }, "node_modules/elliptic": { "version": "6.5.4", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz", @@ -12137,6 +12243,15 @@ "node": ">= 0.10" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dev": true, + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ip": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", @@ -13354,6 +13469,36 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "node_modules/lit": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.4.1.tgz", + "integrity": "sha512-qohSgLiyN1cFnJG26dIiY03S4F49857A0AHQfnS0zYtnUVnD2MFvx+UT52rtXsIuNFQrnUupX+zyGSATlk1f/A==", + "dev": true, + "dependencies": { + "@lit/reactive-element": "^1.4.0", + "lit-element": "^3.2.0", + "lit-html": "^2.4.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz", + "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==", + "dev": true, + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-html": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz", + "integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==", + "dev": true, + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/load-json-file": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", @@ -16209,6 +16354,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-sizeme": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz", + "integrity": "sha512-xOIAOqqSSmKlKFJLO3inBQBdymzDuXx4iuwkNcJmC96jeiOg5ojByvL+g3MW9LPEsojLbC6pf68zOfobK8IPlw==", + "dev": true, + "dependencies": { + "element-resize-detector": "^1.2.2", + "invariant": "^2.2.4", + "shallowequal": "^1.1.0", + "throttle-debounce": "^3.0.1" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -17473,6 +17630,12 @@ "node": ">=8" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -18005,6 +18168,15 @@ "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==", "dev": true }, + "node_modules/storybook-addon-designs": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.3.1.tgz", + "integrity": "sha512-QCHZp4KuUikOq52MPiMfU8QifYTfhHar5vWlbcfkFDz1YrgGMy+QAEt5Y3Vdnffl4GKSK1lAsLuvTuzqTBRvnw==", + "dev": true, + "dependencies": { + "@figspec/react": "^1.0.0" + } + }, "node_modules/stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", @@ -18702,6 +18874,15 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/throttle-debounce": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz", + "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -22320,6 +22501,25 @@ } } }, + "@figspec/components": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@figspec/components/-/components-1.0.1.tgz", + "integrity": "sha512-UvnEamPEAMh9HExViqpobWmX25g1+soA9kcJu+It3VerMa7CeVyaIbQydNf1Gys5v/rxJVdTDRgQ7OXW2zAAig==", + "dev": true, + "requires": { + "lit": "^2.1.3" + } + }, + "@figspec/react": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@figspec/react/-/react-1.0.3.tgz", + "integrity": "sha512-r683qOko+5CbT48Ox280fMx2MNAtaFPgCNJvldOqN3YtmAzlcTT+YSxd3OahA+kjXGGrnzDbUgeTOX1cPLII+g==", + "dev": true, + "requires": { + "@figspec/components": "^1.0.1", + "@lit-labs/react": "^1.0.2" + } + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -22606,6 +22806,18 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "@lit-labs/react": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.0.tgz", + "integrity": "sha512-uvdOtzACm1WzTySpKnqXth62iPL+4yDow7cSZH7m7jHbDr+tZVXn44DJ5IoJuMjEevORRe57lNrOywFW6d4Fyg==", + "dev": true + }, + "@lit/reactive-element": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.2.tgz", + "integrity": "sha512-VMOxsWh/QDwrxPsgkSQnuZ+8mfNy1OTjzzUdLBvvZtpahwPTHTeVZ51RZRqO4xfKVrR+btIPA8D01IL3xeG66w==", + "dev": true + }, "@mdx-js/mdx": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz", @@ -22806,6 +23018,30 @@ } } }, + "@storybook/addon-a11y": { + "version": "6.5.13", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.13.tgz", + "integrity": "sha512-+Tcl/4LWRh3ygLUZFGvkjT42CF/tJcP+kgsIho7i2MxpgZyD6+BUhL9srPZusjbR+uHcHXJ/yxw/vxFQ+UCTLA==", + "dev": true, + "requires": { + "@storybook/addons": "6.5.13", + "@storybook/api": "6.5.13", + "@storybook/channels": "6.5.13", + "@storybook/client-logger": "6.5.13", + "@storybook/components": "6.5.13", + "@storybook/core-events": "6.5.13", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.13", + "axe-core": "^4.2.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "lodash": "^4.17.21", + "react-sizeme": "^3.0.1", + "regenerator-runtime": "^0.13.7", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, "@storybook/addon-actions": { "version": "6.5.13", "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.13.tgz", @@ -24619,6 +24855,12 @@ "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==", "dev": true }, + "@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", + "dev": true + }, "@types/uglify-js": { "version": "3.17.1", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.1.tgz", @@ -25449,6 +25691,12 @@ "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==", "dev": true }, + "axe-core": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz", + "integrity": "sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA==", + "dev": true + }, "babel-loader": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz", @@ -25701,6 +25949,12 @@ "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", "dev": true }, + "batch-processor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", + "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==", + "dev": true + }, "better-opn": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-2.1.1.tgz", @@ -27605,6 +27859,15 @@ "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", "dev": true }, + "element-resize-detector": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz", + "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==", + "dev": true, + "requires": { + "batch-processor": "1.0.0" + } + }, "elliptic": { "version": "6.5.4", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz", @@ -29968,6 +30231,15 @@ "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==", "dev": true }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dev": true, + "requires": { + "loose-envify": "^1.0.0" + } + }, "ip": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", @@ -30839,6 +31111,36 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "lit": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.4.1.tgz", + "integrity": "sha512-qohSgLiyN1cFnJG26dIiY03S4F49857A0AHQfnS0zYtnUVnD2MFvx+UT52rtXsIuNFQrnUupX+zyGSATlk1f/A==", + "dev": true, + "requires": { + "@lit/reactive-element": "^1.4.0", + "lit-element": "^3.2.0", + "lit-html": "^2.4.0" + } + }, + "lit-element": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz", + "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==", + "dev": true, + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "lit-html": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz", + "integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==", + "dev": true, + "requires": { + "@types/trusted-types": "^2.0.2" + } + }, "load-json-file": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", @@ -33057,6 +33359,18 @@ "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "dev": true }, + "react-sizeme": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz", + "integrity": "sha512-xOIAOqqSSmKlKFJLO3inBQBdymzDuXx4iuwkNcJmC96jeiOg5ojByvL+g3MW9LPEsojLbC6pf68zOfobK8IPlw==", + "dev": true, + "requires": { + "element-resize-detector": "^1.2.2", + "invariant": "^2.2.4", + "shallowequal": "^1.1.0", + "throttle-debounce": "^3.0.1" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -34066,6 +34380,12 @@ "kind-of": "^6.0.2" } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -34507,6 +34827,15 @@ "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==", "dev": true }, + "storybook-addon-designs": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.3.1.tgz", + "integrity": "sha512-QCHZp4KuUikOq52MPiMfU8QifYTfhHar5vWlbcfkFDz1YrgGMy+QAEt5Y3Vdnffl4GKSK1lAsLuvTuzqTBRvnw==", + "dev": true, + "requires": { + "@figspec/react": "^1.0.0" + } + }, "stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", @@ -35045,6 +35374,12 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "throttle-debounce": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz", + "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==", + "dev": true + }, "through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", diff --git a/package.json b/package.json index f859f14..06af064 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,8 @@ }, "scripts": { "build": "tsc", + "build-storybook": "build-storybook", + "storybook": "start-storybook -p 6006", "build-storybook-win": "set NODE_OPTIONS=\"--openssl-legacy-provider\" && build-storybook", "storybook-win": "set NODE_OPTIONS=\"--openssl-legacy-provider\" && start-storybook -p 6006", "format:check": "prettier --check src/**/*.{js,jsx,ts,tsx,css,md,json} --config ./.prettierrc", @@ -26,6 +28,7 @@ }, "devDependencies": { "@babel/core": "^7.20.2", + "@storybook/addon-a11y": "^6.5.13", "@storybook/addon-actions": "^6.5.13", "@storybook/addon-essentials": "^6.5.13", "@storybook/addon-interactions": "^6.5.13", @@ -53,6 +56,7 @@ "react": "^18.2.0", "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", + "storybook-addon-designs": "^6.3.1", "tailwindcss": "^3.2.4", "typescript": "^4.9.3" } diff --git a/src/components/button.stories.tsx b/src/components/button.stories.tsx index 5d0fa35..38b4a88 100644 --- a/src/components/button.stories.tsx +++ b/src/components/button.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Button, ButtonType } from './button'; export default { - title: 'Example/Button', + title: 'Components/Button', component: Button, argTypes: { type: { @@ -15,7 +15,13 @@ export default { const Template: ComponentStory = (args) => ; -export const ButtonComponent = Template.bind({}); -ButtonComponent.args = { +export const Default = Template.bind({}); +Default.args = { type: ButtonType.primary, }; +Default.parameters = { + design: { + type: 'figma', + url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File', + }, +}; diff --git a/src/components/button.tsx b/src/components/button.tsx index ae0ebb9..903f70a 100644 --- a/src/components/button.tsx +++ b/src/components/button.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode } from 'react'; -import { HeartFillIcon } from '../assets/icons' +import { HeartFillIcon } from '../assets/icons'; export enum ButtonType { primary = 'primary', @@ -12,7 +12,7 @@ export type ButtonProps = { }; export const Button: FC = ({ type, children }) => ( - diff --git a/src/foundation/branding.stories.mdx b/src/foundation/branding.stories.mdx new file mode 100644 index 0000000..b9439e7 --- /dev/null +++ b/src/foundation/branding.stories.mdx @@ -0,0 +1,7 @@ +import { Meta } from '@storybook/addon-docs'; + + + +Branding + +Logo \ No newline at end of file diff --git a/src/foundation/breakpoints.stories.mdx b/src/foundation/breakpoints.stories.mdx new file mode 100644 index 0000000..3738acb --- /dev/null +++ b/src/foundation/breakpoints.stories.mdx @@ -0,0 +1,5 @@ +import { Meta } from '@storybook/addon-docs'; + + + +Breakpoints \ No newline at end of file diff --git a/src/foundation/colors.stories.mdx b/src/foundation/colors.stories.mdx new file mode 100644 index 0000000..aaec060 --- /dev/null +++ b/src/foundation/colors.stories.mdx @@ -0,0 +1,5 @@ +import { Meta } from '@storybook/addon-docs'; + + + +Colors \ No newline at end of file diff --git a/src/foundation/foundation_todo.txt b/src/foundation/foundation_todo.txt new file mode 100644 index 0000000..fe6e9fe --- /dev/null +++ b/src/foundation/foundation_todo.txt @@ -0,0 +1,14 @@ +Weitere mögliche Themen: +- borders (radius und type) +- transisitons +- shadows +- elevations +- gradients +- zindex +- opacity + + +Variablen-Definition im Code bzw. gemäss TailwindConvention: +{prefix}-{category}-{subcategory}-{name} +x-color-status-warning +x-space-xxl diff --git a/src/foundation/iconography.stories.mdx b/src/foundation/iconography.stories.mdx new file mode 100644 index 0000000..d90e324 --- /dev/null +++ b/src/foundation/iconography.stories.mdx @@ -0,0 +1,5 @@ +import { Meta } from '@storybook/addon-docs'; + + + +Iconography \ No newline at end of file diff --git a/src/foundation/spacing.stories.mdx b/src/foundation/spacing.stories.mdx new file mode 100644 index 0000000..dfe04b7 --- /dev/null +++ b/src/foundation/spacing.stories.mdx @@ -0,0 +1,58 @@ +import { Meta } from '@storybook/addon-docs'; + + + + + +# Spacing + +The spacing scale is defined as follows: + + +| **Name** | **Size [Pixels]** | | +| :------------- | :----------------- | :---------------------------------------------------------------- | +| **xxs** | 4 |
| +| **xs** | 8 |
| +| **s** | 16 |
| +| **m** | 24 |
| +| **l** | 32 |
| +| **xl** | 48 |
| +| **xxl** | 64 |
| + + +The spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins of tailwind. \ No newline at end of file diff --git a/src/foundation/typography.stories.mdx b/src/foundation/typography.stories.mdx new file mode 100644 index 0000000..4039207 --- /dev/null +++ b/src/foundation/typography.stories.mdx @@ -0,0 +1,5 @@ +import { Meta } from '@storybook/addon-docs'; + + + +Typography \ No newline at end of file diff --git a/src/introduction.stories.mdx b/src/introduction.stories.mdx index b322196..6fe63a3 100644 --- a/src/introduction.stories.mdx +++ b/src/introduction.stories.mdx @@ -8,7 +8,7 @@ import Plugin from './assets/plugin.svg'; import Repo from './assets/repo.svg'; import StackAlt from './assets/stackalt.svg'; - + -# Welcome to Storybook +# Design System Component Library Team Ost + + +Our goal for the Design System Block: Create our Frontend Components (React) in Storybook and release them as a npm package. +In the Second Block, Your Components Will Become an App with Next.js +And Finally You'll Learn About Security and How to Run This Thing in the Cloud + Storybook helps you build UI components in isolation from your app's business logic, data, and context. That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. diff --git a/src/layout/.gitkeep b/src/layout/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tailwind.config.js b/tailwind.config.js index 0334453..3ede7a9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,7 +5,7 @@ module.exports = { theme: { extend: { fontFamily: { - 'poppins': ['Poppins', 'sans-serif'], + poppins: ['Poppins', 'sans-serif'], }, spacing: { xxs: '4px', @@ -14,10 +14,9 @@ module.exports = { m: '24px', l: '32px', xl: '48px', - xxl: '64px' - } + xxl: '64px', + }, }, }, - plugins: [ - ], + plugins: [], };