From cc8fd716892552ddd527869a603d1c8beed9f01c Mon Sep 17 00:00:00 2001 From: Arnaud Date: Wed, 6 Nov 2024 19:46:29 +0100 Subject: [PATCH] Apply multiple design changes --- package-lock.json | 618 +++++++++++++++++- package.json | 4 +- src/assets/icons/any-file.svg | 11 + src/assets/icons/audio-file.svg | 12 + src/assets/icons/doc-file.svg | 12 + src/assets/icons/excel-file.svg | 12 + src/assets/icons/image-file.svg | 12 + src/assets/icons/pdf-file.svg | 12 + src/assets/icons/video-file.svg | 12 + src/assets/icons/zip.svg | 22 + src/components/Button/button.css | 6 +- src/components/Collapse/Collapse.css | 30 - src/components/Collapse/Collapse.tsx | 57 -- src/components/Table/Table.tsx | 17 +- src/components/Upload/Upload.tsx | 8 +- src/components/Upload/UploadFile.tsx | 2 +- src/components/Upload/UploadIcon.tsx | 20 - src/components/WebFileIcon/AnyFileIcon.tsx | 20 - src/components/WebFileIcon/AudioIcon.tsx | 21 - src/components/WebFileIcon/DocIcon.tsx | 21 - src/components/WebFileIcon/ExcelIcon.tsx | 21 - src/components/WebFileIcon/ImageIcon.tsx | 21 - src/components/WebFileIcon/PdfIcon.tsx | 28 - src/components/WebFileIcon/VideoIcon.tsx | 21 - .../WebFileIcon/WebFileIcon.stories.ts | 64 -- src/components/WebFileIcon/WebFileIcon.tsx | 28 +- src/components/WebFileIcon/ZipIcon.tsx | 36 - src/components/vite-env.d.ts | 1 + src/index.ts | 3 - stories/Collapse.stories.css | 3 - stories/Collapse.stories.tsx | 24 - stories/Spinner.stories.tsx | 19 - vite-env.d.ts | 1 + vite.config.ts | 10 + 34 files changed, 766 insertions(+), 443 deletions(-) create mode 100644 src/assets/icons/any-file.svg create mode 100644 src/assets/icons/audio-file.svg create mode 100644 src/assets/icons/doc-file.svg create mode 100644 src/assets/icons/excel-file.svg create mode 100644 src/assets/icons/image-file.svg create mode 100644 src/assets/icons/pdf-file.svg create mode 100644 src/assets/icons/video-file.svg create mode 100644 src/assets/icons/zip.svg delete mode 100644 src/components/Collapse/Collapse.css delete mode 100644 src/components/Collapse/Collapse.tsx delete mode 100644 src/components/Upload/UploadIcon.tsx delete mode 100644 src/components/WebFileIcon/AnyFileIcon.tsx delete mode 100644 src/components/WebFileIcon/AudioIcon.tsx delete mode 100644 src/components/WebFileIcon/DocIcon.tsx delete mode 100644 src/components/WebFileIcon/ExcelIcon.tsx delete mode 100644 src/components/WebFileIcon/ImageIcon.tsx delete mode 100644 src/components/WebFileIcon/PdfIcon.tsx delete mode 100644 src/components/WebFileIcon/VideoIcon.tsx delete mode 100644 src/components/WebFileIcon/WebFileIcon.stories.ts delete mode 100644 src/components/WebFileIcon/ZipIcon.tsx delete mode 100644 stories/Collapse.stories.css delete mode 100644 stories/Collapse.stories.tsx delete mode 100644 stories/Spinner.stories.tsx diff --git a/package-lock.json b/package-lock.json index 93b3673..a934393 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@codex-storage/marketplace-ui-components", - "version": "0.0.36", + "version": "0.0.37", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@codex-storage/marketplace-ui-components", - "version": "0.0.36", + "version": "0.0.37", "license": "MIT", "dependencies": { "lucide-react": "^0.453.0" @@ -22,6 +22,7 @@ "@storybook/react": "^8.2.9", "@storybook/react-vite": "^8.2.9", "@storybook/test": "^8.2.9", + "@svgr/plugin-svgo": "^8.1.0", "@typescript-eslint/eslint-plugin": "^8.6.0", "@typescript-eslint/parser": "^8.0.0", "@vitejs/plugin-react": "^4.3.1", @@ -35,7 +36,8 @@ "storybook": "^8.2.9", "typescript": "5.5.2", "vite-plugin-dts": "^4.0.3", - "vite-plugin-lib-inject-css": "^2.1.1" + "vite-plugin-lib-inject-css": "^2.1.1", + "vite-plugin-svgr": "^4.3.0" }, "engines": { "node": ">=18" @@ -1559,14 +1561,14 @@ } }, "node_modules/@rollup/pluginutils": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz", - "integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz", + "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==", "dev": true, "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", - "picomatch": "^2.3.1" + "picomatch": "^4.0.2" }, "engines": { "node": ">=14.0.0" @@ -1586,6 +1588,18 @@ "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", "dev": true }, + "node_modules/@rollup/pluginutils/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.24.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz", @@ -2583,6 +2597,240 @@ "storybook": "^8.3.6" } }, + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-dynamic-title": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-em-dimensions": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-react-native-svg": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-svg-component": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-preset": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "dev": true, + "dependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", + "@svgr/babel-plugin-transform-svg-component": "8.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "camelcase": "^6.2.0", + "cosmiconfig": "^8.1.3", + "snake-case": "^3.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/hast-util-to-babel-ast": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "dev": true, + "dependencies": { + "@babel/types": "^7.21.3", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/plugin-jsx": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", + "dev": true, + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "@svgr/hast-util-to-babel-ast": "8.0.0", + "svg-parser": "^2.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, + "node_modules/@svgr/plugin-svgo": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz", + "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==", + "dev": true, + "dependencies": { + "cosmiconfig": "^8.1.3", + "deepmerge": "^4.3.1", + "svgo": "^3.0.2" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, "node_modules/@testing-library/dom": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", @@ -2654,6 +2902,15 @@ "@testing-library/dom": ">=7.21.4" } }, + "node_modules/@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "dev": true, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@types/argparse": { "version": "1.0.38", "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz", @@ -3526,6 +3783,12 @@ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "dev": true + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -3622,6 +3885,18 @@ "node": ">=6" } }, + "node_modules/camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001669", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz", @@ -3724,6 +3999,15 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, "node_modules/commondir": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", @@ -3796,6 +4080,32 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "dev": true }, + "node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dev": true, + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -3810,6 +4120,47 @@ "node": ">= 8" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "dev": true, + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "dev": true, + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", @@ -3828,6 +4179,39 @@ "node": ">=4" } }, + "node_modules/csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dev": true, + "dependencies": { + "css-tree": "~2.2.0" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dev": true, + "dependencies": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "dev": true + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -3872,6 +4256,15 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/define-data-property": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", @@ -3944,6 +4337,71 @@ "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dev": true, + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dev": true, + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dev": true, + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -3977,6 +4435,15 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, "node_modules/es-define-property": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", @@ -5054,6 +5521,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true + }, "node_modules/is-callable": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", @@ -5242,6 +5715,12 @@ "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", "dev": true }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -5306,6 +5785,12 @@ "node": ">= 0.8.0" } }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true + }, "node_modules/local-pkg": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz", @@ -5366,6 +5851,15 @@ "integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==", "dev": true }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -5443,6 +5937,12 @@ "react": ">= 0.14.0" } }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "dev": true + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -5645,12 +6145,34 @@ "node": ">= 0.6" } }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/node-releases": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", "dev": true }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dev": true, + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -5778,6 +6300,24 @@ "node": ">=6" } }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -5863,6 +6403,15 @@ "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", "dev": true }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/pathe": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz", @@ -6755,6 +7304,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -6911,6 +7470,37 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-parser": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "dev": true + }, + "node_modules/svgo": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", + "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", + "dev": true, + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^5.1.0", + "css-tree": "^2.3.1", + "css-what": "^6.1.0", + "csso": "^5.0.5", + "picocolors": "^1.0.0" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/svgo" + } + }, "node_modules/telejson": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz", @@ -7370,6 +7960,20 @@ "vite": "*" } }, + "node_modules/vite-plugin-svgr": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz", + "integrity": "sha512-Jy9qLB2/PyWklpYy0xk0UU3TlU0t2UMpJXZvf+hWII1lAmRHrOUKi11Uw8N3rxoNk7atZNYO3pR3vI1f7oi+6w==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.1.3", + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0" + }, + "peerDependencies": { + "vite": ">=2.6.0" + } + }, "node_modules/vite/node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", diff --git a/package.json b/package.json index e987bda..2cbf803 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "type": "git", "url": "https://github.com/codex-storage/codex-marketplace-ui-components" }, - "version": "0.0.36", + "version": "0.0.37", "type": "module", "scripts": { "prepack": "npm run build", @@ -41,6 +41,8 @@ "postcss-nesting": "^13.0.1" }, "devDependencies": { + "vite-plugin-svgr": "^4.3.0", + "@svgr/plugin-svgo": "^8.1.0", "@codex-storage/sdk-js": "^0.0.15", "@chromatic-com/storybook": "^2.0.2", "@storybook/addon-essentials": "^8.2.9", diff --git a/src/assets/icons/any-file.svg b/src/assets/icons/any-file.svg new file mode 100644 index 0000000..c8678f7 --- /dev/null +++ b/src/assets/icons/any-file.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/src/assets/icons/audio-file.svg b/src/assets/icons/audio-file.svg new file mode 100644 index 0000000..f635150 --- /dev/null +++ b/src/assets/icons/audio-file.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/src/assets/icons/doc-file.svg b/src/assets/icons/doc-file.svg new file mode 100644 index 0000000..b824141 --- /dev/null +++ b/src/assets/icons/doc-file.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/src/assets/icons/excel-file.svg b/src/assets/icons/excel-file.svg new file mode 100644 index 0000000..c14ad5c --- /dev/null +++ b/src/assets/icons/excel-file.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/src/assets/icons/image-file.svg b/src/assets/icons/image-file.svg new file mode 100644 index 0000000..7b1b236 --- /dev/null +++ b/src/assets/icons/image-file.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/src/assets/icons/pdf-file.svg b/src/assets/icons/pdf-file.svg new file mode 100644 index 0000000..ff2cc2a --- /dev/null +++ b/src/assets/icons/pdf-file.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/src/assets/icons/video-file.svg b/src/assets/icons/video-file.svg new file mode 100644 index 0000000..0a5d6f4 --- /dev/null +++ b/src/assets/icons/video-file.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/src/assets/icons/zip.svg b/src/assets/icons/zip.svg new file mode 100644 index 0000000..075c4bc --- /dev/null +++ b/src/assets/icons/zip.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/src/components/Button/button.css b/src/components/Button/button.css index 6f373ec..b75536b 100644 --- a/src/components/Button/button.css +++ b/src/components/Button/button.css @@ -13,7 +13,7 @@ padding: var(--codex-button-padding); display: flex; place-items: center; - gap: 2px; + gap: 8px; font-weight: 500; position: relative; border: none; @@ -101,8 +101,8 @@ } div { - width: 16px; - height: 16px; + width: 20px; + height: 20px; display: flex; place-items: center; } diff --git a/src/components/Collapse/Collapse.css b/src/components/Collapse/Collapse.css deleted file mode 100644 index 851851c..0000000 --- a/src/components/Collapse/Collapse.css +++ /dev/null @@ -1,30 +0,0 @@ -.collapse { - width: 100%; -} - -.collapse-summary { - color: var(--codex-color-primary); - font-weight: 600; - cursor: pointer; - display: flex; - align-items: center; - gap: 0.5rem; -} - -.collapse-summary:hover { - text-decoration: underline; - opacity: 0.7; - text-decoration-thickness: 2px; -} - -.collapse-details { - max-height: 0; - transition: max-height 0.2s; - overflow: hidden; - word-break: break-word; - color: var(--codex-color); -} - -.collapse-details[aria-expanded] { - max-height: 50px; -} diff --git a/src/components/Collapse/Collapse.tsx b/src/components/Collapse/Collapse.tsx deleted file mode 100644 index ae18277..0000000 --- a/src/components/Collapse/Collapse.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { useState } from "react"; -import "./Collapse.css"; -import { attributes } from "../utils/attributes"; - -type Props = { - /** - * Summary always displayed - */ - summary: string; - - /** - * Details to show after the component is collapsed - */ - details: string; - - /** - * Apply custom classname. - */ - className?: string; -}; - -export function Collapse({ summary, details, className = "" }: Props) { - const [expanded, setExpanded] = useState(false); - - const onClick = () => setExpanded(!expanded); - - return ( -
- - {summary} - - -
- {details} -
-
- ); -} - -const ArrowRight = () => ( - - - -); diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 27b3a90..eb964d3 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,9 +1,14 @@ import "./table.css"; -import { Search } from "lucide-react"; -import { Fragment, ReactElement, ReactNode, useEffect, useState } from "react"; +import { + ComponentType, + Fragment, + ReactElement, + ReactNode, + useEffect, + useState, +} from "react"; import { classnames } from "../utils/classnames"; import { attributes } from "../utils/attributes"; -import { SortIcon } from "./SortIcon"; export type TabSortState = "asc" | "desc" | null; @@ -24,6 +29,8 @@ type Props = { className?: string; rows: ReactElement[]; + + SortIcon: ComponentType; }; const nextState = (state: "asc" | "desc" | null) => @@ -32,6 +39,7 @@ const nextState = (state: "asc" | "desc" | null) => export function Table({ headers, rows, + SortIcon, defaultSortIndex = -1, className = "", }: Props) { @@ -112,8 +120,7 @@ export function Table({ {!rows.length && (
- -

No data.

+

No data available.

)} diff --git a/src/components/Upload/Upload.tsx b/src/components/Upload/Upload.tsx index 38096f0..713508e 100644 --- a/src/components/Upload/Upload.tsx +++ b/src/components/Upload/Upload.tsx @@ -1,11 +1,10 @@ -import { ChangeEvent, DragEventHandler, useRef } from "react"; +import { ChangeEvent, ComponentType, DragEventHandler, useRef } from "react"; import { attributes } from "../utils/attributes.ts"; import "./upload.css"; import { UploadFile } from "./UploadFile.tsx"; import { useUploadStategy } from "./useUploadStrategy.ts"; import { classnames } from "../utils/classnames.ts"; import { CodexData } from "@codex-storage/sdk-js"; -import { UploadIcon } from "./UploadIcon.tsx"; type Props = { /** @@ -61,6 +60,8 @@ type Props = { * Default: File uploaded successfully. */ successMessage?: string; + + Icon?: ComponentType; }; export function Upload({ @@ -68,6 +69,7 @@ export function Upload({ onMouseLeave, onClick, onFileChange, + Icon, multiple = true, editable = true, onDeleteItem, @@ -138,7 +140,7 @@ export function Upload({ - + {Icon && } - - - ); -} diff --git a/src/components/WebFileIcon/AnyFileIcon.tsx b/src/components/WebFileIcon/AnyFileIcon.tsx deleted file mode 100644 index 7fd9308..0000000 --- a/src/components/WebFileIcon/AnyFileIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -type Props = { - size?: number; -}; - -export const AnyFileIcon = ({ size }: Props) => ( - - - - - -); diff --git a/src/components/WebFileIcon/AudioIcon.tsx b/src/components/WebFileIcon/AudioIcon.tsx deleted file mode 100644 index bd1f07a..0000000 --- a/src/components/WebFileIcon/AudioIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -type Props = { - size?: number; -}; - -export const AudioIcon = ({ size = 24 }: Props) => ( - - - - - -); diff --git a/src/components/WebFileIcon/DocIcon.tsx b/src/components/WebFileIcon/DocIcon.tsx deleted file mode 100644 index af66b1f..0000000 --- a/src/components/WebFileIcon/DocIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -type Props = { - size?: number; -}; - -export const DocIcon = ({ size }: Props) => ( - - - - - -); diff --git a/src/components/WebFileIcon/ExcelIcon.tsx b/src/components/WebFileIcon/ExcelIcon.tsx deleted file mode 100644 index 3269cf4..0000000 --- a/src/components/WebFileIcon/ExcelIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -type Props = { - size?: number; -}; - -export const ExcelIcon = ({ size }: Props) => ( - - - - - -); diff --git a/src/components/WebFileIcon/ImageIcon.tsx b/src/components/WebFileIcon/ImageIcon.tsx deleted file mode 100644 index 32190ff..0000000 --- a/src/components/WebFileIcon/ImageIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -type Props = { - size?: number; -}; - -export const ImageIcon = ({ size = 24 }: Props) => ( - - - - - -); diff --git a/src/components/WebFileIcon/PdfIcon.tsx b/src/components/WebFileIcon/PdfIcon.tsx deleted file mode 100644 index 02d0bff..0000000 --- a/src/components/WebFileIcon/PdfIcon.tsx +++ /dev/null @@ -1,28 +0,0 @@ -type Props = { - size?: number; -}; - -export function PdfIcon({ size = 24 }: Props) { - return ( - - - - - - ); -} diff --git a/src/components/WebFileIcon/VideoIcon.tsx b/src/components/WebFileIcon/VideoIcon.tsx deleted file mode 100644 index 9a333fb..0000000 --- a/src/components/WebFileIcon/VideoIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -type Props = { - size?: number; -}; - -export const VideoIcon = ({ size = 24 }: Props) => ( - - - - - -); diff --git a/src/components/WebFileIcon/WebFileIcon.stories.ts b/src/components/WebFileIcon/WebFileIcon.stories.ts deleted file mode 100644 index 4269daa..0000000 --- a/src/components/WebFileIcon/WebFileIcon.stories.ts +++ /dev/null @@ -1,64 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import { WebFileIcon } from "./WebFileIcon"; - -const meta = { - title: "Example/WebFileIcon", - component: WebFileIcon, - parameters: { - layout: "centered", - }, - tags: ["autodocs"], - argTypes: {}, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Audio: Story = { - args: { - type: "audio/mp3", - }, -}; - -export const Image: Story = { - args: { - type: "image/jpeg", - }, -}; - -export const Video: Story = { - args: { - type: "video/mp4", - }, -}; - -export const Pdf: Story = { - args: { - type: "application/pdf", - }, -}; - -export const Excel: Story = { - args: { - type: "application/vnd.ms-excel", - }, -}; - -export const Doc: Story = { - args: { - type: "application/msdoc", - }, -}; - -export const Other: Story = { - args: { - type: "text/plain", - }, -}; - -export const CustomSize: Story = { - args: { - type: "image/jpeg", - size: 64, - }, -}; diff --git a/src/components/WebFileIcon/WebFileIcon.tsx b/src/components/WebFileIcon/WebFileIcon.tsx index 079959b..749b6d8 100644 --- a/src/components/WebFileIcon/WebFileIcon.tsx +++ b/src/components/WebFileIcon/WebFileIcon.tsx @@ -1,10 +1,10 @@ -import { AudioIcon } from "./AudioIcon"; -import { ImageIcon } from "./ImageIcon"; -import { VideoIcon } from "./VideoIcon"; -import { PdfIcon } from "./PdfIcon"; -import { ExcelIcon } from "./ExcelIcon"; -import { DocIcon } from "./DocIcon"; -import { AnyFileIcon } from "./AnyFileIcon"; +import AudioIcon from "../../assets/icons/audio-file.svg?react"; +import VideoIcon from "../../assets/icons/video-file.svg?react"; +import ImageIcon from "../../assets/icons/image-file.svg?react"; +import PdfIcon from "../../assets/icons/pdf-file.svg?react"; +import ExcelIcon from "../../assets/icons/excel-file.svg?react"; +import DocIcon from "../../assets/icons/doc-file.svg?react"; +import AnyFileIcon from "../../assets/icons/any-file.svg?react"; type Props = { type: string; @@ -13,33 +13,33 @@ type Props = { export function WebFileIcon({ type, size = 24 }: Props) { if (type.startsWith("audio")) { - return ; + return ; } if (type.startsWith("image")) { - return ; + return ; } if (type.startsWith("video")) { - return ; + return ; } switch (type) { case "application/pdf": { - return ; + return ; } case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": case "application/vnd.ms-excel": { - return ; + return ; } case "application/msdoc": { - return ; + return ; } default: { - return ; + return ; } } } diff --git a/src/components/WebFileIcon/ZipIcon.tsx b/src/components/WebFileIcon/ZipIcon.tsx deleted file mode 100644 index 37f8aaa..0000000 --- a/src/components/WebFileIcon/ZipIcon.tsx +++ /dev/null @@ -1,36 +0,0 @@ -export const ZipIcon = () => ( - - - - - - - -); diff --git a/src/components/vite-env.d.ts b/src/components/vite-env.d.ts index fd9deca..e89bfc3 100644 --- a/src/components/vite-env.d.ts +++ b/src/components/vite-env.d.ts @@ -1,4 +1,5 @@ /// +/// interface ImportMetaEnv { VITE_CODEX_API_URL: string; diff --git a/src/index.ts b/src/index.ts index bb380f9..09669cc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,6 @@ export { ButtonIcon } from "./components/ButtonIcon/ButtonIcon"; export { Input } from "./components/Input/Input"; export { InputGroup } from "./components/InputGroup/InputGroup"; export * from "./components/Upload/Upload"; -export { UploadIcon } from "./components/Upload/UploadIcon"; export { Card } from "./components/Card/Card"; export { Select } from "./components/Select/Select"; export { Toast } from "./components/Toast/Toast"; @@ -13,12 +12,10 @@ export { Dropdown, type DropdownOption } from "./components/Dropdown/Dropdown"; export { Failure } from "./components/Failure/Failure"; export { Alert } from "./components/Alert/Alert"; export { Spinner } from "./components/Spinner/Spinner"; -export { WebFileIcon } from "./components/WebFileIcon/WebFileIcon"; export { Stepper } from "./components/Stepper/Stepper"; export { Backdrop } from "./components/Backdrop/Backdrop"; export * from "./components/Table/Table"; export { Tooltip } from "./components/Tooltip/Tooltip"; -export { Collapse } from "./components/Collapse/Collapse"; export { Placeholder } from "./components/Placeholder/Placeholder"; export { Sheets } from "./components/Sheets/Sheets"; export { Tabs, type TabProps } from "./components/Tabs/Tabs"; diff --git a/stories/Collapse.stories.css b/stories/Collapse.stories.css deleted file mode 100644 index d4c11bd..0000000 --- a/stories/Collapse.stories.css +++ /dev/null @@ -1,3 +0,0 @@ -.collapse-demo { - min-width: 250px; -} diff --git a/stories/Collapse.stories.tsx b/stories/Collapse.stories.tsx deleted file mode 100644 index a2cd9e9..0000000 --- a/stories/Collapse.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import { Collapse } from "../src/components/Collapse/Collapse"; -import "./Collapse.stories.css"; - -const meta = { - title: "Components/Collapse", - component: Collapse, - parameters: { - layout: "centered", - }, - tags: ["autodocs"], - argTypes: {}, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - summary: "Read more", - details: "More details for collapse component", - className: "collapse-demo", - }, -}; diff --git a/stories/Spinner.stories.tsx b/stories/Spinner.stories.tsx deleted file mode 100644 index fad22e5..0000000 --- a/stories/Spinner.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import { Spinner } from "../src/components/Spinner/Spinner"; - -const meta = { - title: "Overlays/Spinner", - component: Spinner, - parameters: { - layout: "centered", - }, - tags: ["autodocs"], - argTypes: {}, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { width: "32" }, -}; diff --git a/vite-env.d.ts b/vite-env.d.ts index fd9deca..e89bfc3 100644 --- a/vite-env.d.ts +++ b/vite-env.d.ts @@ -1,4 +1,5 @@ /// +/// interface ImportMetaEnv { VITE_CODEX_API_URL: string; diff --git a/vite.config.ts b/vite.config.ts index f38c32d..e4618b1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,6 +6,7 @@ import { libInjectCss } from "vite-plugin-lib-inject-css"; import { extname, relative } from "path"; import { fileURLToPath } from "node:url"; import { globSync } from "glob"; +import svgr from "vite-plugin-svgr"; // https://vitejs.dev/config/ export default defineConfig({ @@ -26,6 +27,15 @@ export default defineConfig({ tsconfigPath: "./tsconfig.build.json", rollupTypes: true, }), + svgr({ + svgrOptions: { + plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"], + svgoConfig: { + floatPrecision: 2, + }, + }, + // ... + }) ], build: { lib: {