From 8b0c2f7ef11cd3df505cea9898bcd0ee930c47bb Mon Sep 17 00:00:00 2001 From: Avior Date: Thu, 23 Sep 2021 18:23:20 +0200 Subject: [PATCH 001/102] Update to v1-alpha Signed-off-by: Avior --- .gitattributes | 5 +- package-lock.json | 176 +++++++++--------- package.json | 8 +- src/dzeio/Box/Box.module.styl | 26 ++- src/dzeio/Box/Box.stories.tsx | 26 +++ src/dzeio/Box/index.tsx | 58 +++--- src/dzeio/Button/Button.stories.tsx | 2 - src/dzeio/Checkbox/Checkbox.module.styl | 52 ++++-- src/dzeio/Code/Code.module.styl | 3 +- src/dzeio/Container/Container.module.styl | 5 +- .../Container.stories.tsx} | 9 +- src/dzeio/Container/index.tsx | 4 +- src/dzeio/Fieldset/Fieldset.module.styl | 19 -- src/dzeio/Fieldset/index.tsx | 21 --- src/dzeio/Footer/Footer.module.styl | 7 +- src/dzeio/Footer/Footer.stories.tsx | 41 ++-- src/dzeio/Footer/index.tsx | 96 +++++----- src/dzeio/Input/Input.module.styl | 76 +++----- src/dzeio/Input/index.tsx | 60 ++---- src/dzeio/Loader/Loader.stories.tsx | 21 +++ src/dzeio/NotificationManager/index.tsx | 7 +- src/dzeio/Overflow/Overflow.module.styl | 6 - src/dzeio/Overflow/index.tsx | 20 -- src/dzeio/Popup/index.tsx | 71 +++---- src/dzeio/Table/Table.module.styl | 32 +++- src/dzeio/Table/Table.stories.tsx | 49 +++++ src/dzeio/Text/index.tsx | 2 +- src/dzeio/config.styl | 19 +- src/dzeio/general.styl | 7 +- src/dzeio/util.styl | 15 -- src/index.ts | 6 +- 31 files changed, 479 insertions(+), 470 deletions(-) create mode 100644 src/dzeio/Box/Box.stories.tsx rename src/dzeio/{Fieldset/Fieldset.stories.tsx => Container/Container.stories.tsx} (61%) delete mode 100644 src/dzeio/Fieldset/Fieldset.module.styl delete mode 100644 src/dzeio/Fieldset/index.tsx create mode 100644 src/dzeio/Loader/Loader.stories.tsx delete mode 100644 src/dzeio/Overflow/Overflow.module.styl delete mode 100644 src/dzeio/Overflow/index.tsx create mode 100644 src/dzeio/Table/Table.stories.tsx delete mode 100644 src/dzeio/util.styl diff --git a/.gitattributes b/.gitattributes index 7d07d70..362ddc7 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1 +1,4 @@ -* text=lf +* text=auto eol=lf +*.png binary +*.jpg binary +*.jpeg binary diff --git a/package-lock.json b/package-lock.json index 48bd4a7..1c643a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,23 +27,23 @@ "@types/react-dom": "^17.0.1", "babel-loader": "^8.2.2", "css-loader": "^5.0.2", - "lucide-react": "^0.15.19", + "lucide-react": "^0.16.0", "next": "^10.0.0", "react": "^16.0.0", "react-dom": "^16.0.0", "style-loader": "^2.0.0", - "stylus": "^0.54.8", + "stylus": "^0.55.0", "stylus-loader": "^4.3.3", "ts-loader": "^8.0.17", "typescript": "^4.2.3", "webpack": "^4.44.2" }, "peerDependencies": { - "lucide-react": "^0.15.19", + "lucide-react": "^0.16.0", "next": "^10.0.0 || ^11.0.0", "react": "^16.0.0 || ^17.0.0", "react-dom": "^16.0.0 || ^17.0.0", - "stylus": "^0.54.8", + "stylus": "^0.55.0", "typescript": "^4.0.0" } }, @@ -5170,9 +5170,9 @@ } }, "node_modules/@types/json-schema": { - "version": "7.0.7", - "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", - "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==", + "version": "7.0.9", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz", + "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==", "dev": true }, "node_modules/@types/markdown-to-jsx": { @@ -5443,12 +5443,6 @@ "@webassemblyjs/wast-parser": "1.9.0" } }, - "node_modules/@webassemblyjs/floating-point-hex-parser": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz", - "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==", - "dev": true - }, "node_modules/@webassemblyjs/helper-api-error": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz", @@ -5596,6 +5590,12 @@ "@xtuc/long": "4.2.2" } }, + "node_modules/@webassemblyjs/wast-parser/node_modules/@webassemblyjs/floating-point-hex-parser": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz", + "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==", + "dev": true + }, "node_modules/@webassemblyjs/wast-printer": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz", @@ -8531,15 +8531,14 @@ } }, "node_modules/css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", + "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", "dev": true, "dependencies": { - "inherits": "^2.0.3", + "inherits": "^2.0.4", "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" + "source-map-resolve": "^0.6.0" } }, "node_modules/css-color-names": { @@ -8641,15 +8640,6 @@ "node": ">=10" } }, - "node_modules/css-parse": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", - "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=", - "dev": true, - "dependencies": { - "css": "^2.0.0" - } - }, "node_modules/css-select": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz", @@ -8718,6 +8708,16 @@ "node": ">=0.10.0" } }, + "node_modules/css/node_modules/source-map-resolve": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz", + "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==", + "dev": true, + "dependencies": { + "atob": "^2.1.2", + "decode-uri-component": "^0.2.0" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -13690,13 +13690,13 @@ } }, "node_modules/lucide-react": { - "version": "0.15.25", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.15.25.tgz", - "integrity": "sha512-GR8NmrjVldj6OL5p1ediGMFqXP3fq72haUlWzjgeoDGom2gvbhro8DDhmtRJ2kWV/wUIAfskdgTpsdyXpvO4dg==", + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.16.0.tgz", + "integrity": "sha512-R5chQb550S+znoZPAJTHRqAOq6NiMCr4Pm8C0irPBNPEjx3Oarvqt+dbiFu4DWaSR2bMh2iOj0IgtOepoPDdaQ==", "dev": true, "peerDependencies": { "prop-types": "^15.7.2", - "react": "^16.5.1" + "react": "^16.5.1 || ^17.0.0" } }, "node_modules/make-dir": { @@ -14224,9 +14224,9 @@ "dev": true }, "node_modules/nan": { - "version": "2.14.2", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz", - "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==", + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", + "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==", "dev": true, "optional": true }, @@ -19112,9 +19112,9 @@ } }, "node_modules/source-map-support": { - "version": "0.5.19", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", - "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", + "version": "0.5.20", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz", + "integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==", "dev": true, "dependencies": { "buffer-from": "^1.0.0", @@ -19810,12 +19810,12 @@ } }, "node_modules/stylus": { - "version": "0.54.8", - "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz", - "integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==", + "version": "0.55.0", + "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.55.0.tgz", + "integrity": "sha512-MuzIIVRSbc8XxHH7FjkvWqkIcr1BvoMZoR/oFuAJDlh7VSaNJzrB4uJ38GRQa+mWjLXODAMzeDe0xi9GYbGwnw==", "dev": true, "dependencies": { - "css-parse": "~2.0.0", + "css": "^3.0.0", "debug": "~3.1.0", "glob": "^7.1.6", "mkdirp": "~1.0.4", @@ -19856,12 +19856,12 @@ } }, "node_modules/stylus-loader/node_modules/schema-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", - "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", "dev": true, "dependencies": { - "@types/json-schema": "^7.0.6", + "@types/json-schema": "^7.0.8", "ajv": "^6.12.5", "ajv-keywords": "^3.5.2" }, @@ -26510,9 +26510,9 @@ } }, "@types/json-schema": { - "version": "7.0.7", - "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", - "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==", + "version": "7.0.9", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz", + "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==", "dev": true }, "@types/markdown-to-jsx": { @@ -26782,12 +26782,6 @@ "@webassemblyjs/wast-parser": "1.9.0" } }, - "@webassemblyjs/floating-point-hex-parser": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz", - "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==", - "dev": true - }, "@webassemblyjs/helper-api-error": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz", @@ -26933,6 +26927,14 @@ "@webassemblyjs/helper-code-frame": "1.9.0", "@webassemblyjs/helper-fsm": "1.9.0", "@xtuc/long": "4.2.2" + }, + "dependencies": { + "@webassemblyjs/floating-point-hex-parser": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz", + "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==", + "dev": true + } } }, "@webassemblyjs/wast-printer": { @@ -29301,15 +29303,14 @@ "dev": true }, "css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", + "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", "dev": true, "requires": { - "inherits": "^2.0.3", + "inherits": "^2.0.4", "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" + "source-map-resolve": "^0.6.0" }, "dependencies": { "source-map": { @@ -29317,6 +29318,16 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true + }, + "source-map-resolve": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz", + "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==", + "dev": true, + "requires": { + "atob": "^2.1.2", + "decode-uri-component": "^0.2.0" + } } } }, @@ -29385,15 +29396,6 @@ } } }, - "css-parse": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", - "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=", - "dev": true, - "requires": { - "css": "^2.0.0" - } - }, "css-select": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz", @@ -33358,9 +33360,9 @@ } }, "lucide-react": { - "version": "0.15.25", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.15.25.tgz", - "integrity": "sha512-GR8NmrjVldj6OL5p1ediGMFqXP3fq72haUlWzjgeoDGom2gvbhro8DDhmtRJ2kWV/wUIAfskdgTpsdyXpvO4dg==", + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.16.0.tgz", + "integrity": "sha512-R5chQb550S+znoZPAJTHRqAOq6NiMCr4Pm8C0irPBNPEjx3Oarvqt+dbiFu4DWaSR2bMh2iOj0IgtOepoPDdaQ==", "dev": true, "requires": {} }, @@ -33791,9 +33793,9 @@ "dev": true }, "nan": { - "version": "2.14.2", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz", - "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==", + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", + "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==", "dev": true, "optional": true }, @@ -37700,9 +37702,9 @@ } }, "source-map-support": { - "version": "0.5.19", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", - "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", + "version": "0.5.20", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz", + "integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==", "dev": true, "requires": { "buffer-from": "^1.0.0", @@ -38267,12 +38269,12 @@ "requires": {} }, "stylus": { - "version": "0.54.8", - "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz", - "integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==", + "version": "0.55.0", + "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.55.0.tgz", + "integrity": "sha512-MuzIIVRSbc8XxHH7FjkvWqkIcr1BvoMZoR/oFuAJDlh7VSaNJzrB4uJ38GRQa+mWjLXODAMzeDe0xi9GYbGwnw==", "dev": true, "requires": { - "css-parse": "~2.0.0", + "css": "^3.0.0", "debug": "~3.1.0", "glob": "^7.1.6", "mkdirp": "~1.0.4", @@ -38325,12 +38327,12 @@ }, "dependencies": { "schema-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", - "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", "dev": true, "requires": { - "@types/json-schema": "^7.0.6", + "@types/json-schema": "^7.0.8", "ajv": "^6.12.5", "ajv-keywords": "^3.5.2" } diff --git a/package.json b/package.json index 2028f46..42ba7ee 100644 --- a/package.json +++ b/package.json @@ -16,23 +16,23 @@ "@types/react-dom": "^17.0.1", "babel-loader": "^8.2.2", "css-loader": "^5.0.2", - "lucide-react": "^0.15.19", + "lucide-react": "^0.16.0", "next": "^10.0.0", "react": "^16.0.0", "react-dom": "^16.0.0", "style-loader": "^2.0.0", - "stylus": "^0.54.8", + "stylus": "^0.55.0", "stylus-loader": "^4.3.3", "ts-loader": "^8.0.17", "typescript": "^4.2.3", "webpack": "^4.44.2" }, "peerDependencies": { - "lucide-react": "^0.15.19", + "lucide-react": "^0.16.0", "next": "^10.0.0 || ^11.0.0", "react": "^16.0.0 || ^17.0.0", "react-dom": "^16.0.0 || ^17.0.0", - "stylus": "^0.54.8", + "stylus": "^0.55.0", "typescript": "^4.0.0" }, "scripts": { diff --git a/src/dzeio/Box/Box.module.styl b/src/dzeio/Box/Box.module.styl index 233d11d..fa51342 100644 --- a/src/dzeio/Box/Box.module.styl +++ b/src/dzeio/Box/Box.module.styl @@ -4,13 +4,7 @@ background $foregroundLight @media (prefers-color-scheme dark) background $foregroundDark - border-radius 8px - -.outline - border 2px solid $grayDark - @media (prefers-color-scheme dark) - border-color $grayLight - + border-radius 16px .header padding 16px @@ -19,15 +13,19 @@ padding-top 0 .title - font-weight bold - font-size rem(18) - margin 0 0 8px - -.subtitle + font-weight 700 font-size rem(16) - margin 0 - + display inline-flex // BODY .body padding 16px + +.icon + padding 2px + width 24px + height 24px + display inline-block + background $main + border-radius 4px + margin-right 8px diff --git a/src/dzeio/Box/Box.stories.tsx b/src/dzeio/Box/Box.stories.tsx new file mode 100644 index 0000000..113bb86 --- /dev/null +++ b/src/dzeio/Box/Box.stories.tsx @@ -0,0 +1,26 @@ +import { Meta } from '@storybook/react/types-6-0' +import React from 'react' +import Component from '.' +import Text from '../Text' +import { Lightbulb } from 'lucide-react' + +export default { + title: 'DZEIO/Box', + component: Component, + parameters: { + layout: 'fullscreen' + } +} as Meta + +export const Basic = (args: any) => ( + Test +) + +export const Complete = (args: any) => ( + Test} + // {...args} + >Test +) diff --git a/src/dzeio/Box/index.tsx b/src/dzeio/Box/index.tsx index 72660f7..66d0821 100644 --- a/src/dzeio/Box/index.tsx +++ b/src/dzeio/Box/index.tsx @@ -6,56 +6,40 @@ import css from './Box.module.styl' import Row from '../Row' import Col from '../Col' import Text from '../Text' +import { Icon } from 'lucide-react' +import { ColorType } from '../interfaces' -interface Props { - - // Wrapper - wrapperProps?: Omit, HTMLDivElement>, 'className'> - outline?: boolean - /** - * @deprecated use wrapperProps.onClick - */ - onClick?: React.DetailedHTMLProps, HTMLDivElement>['onClick'] - className?: string +interface Props extends React.DetailedHTMLProps, HTMLDivElement> { + noPadding?: boolean // Header title?: string - titleColSize?: number - subtitle?: string - delimiter?: boolean - titleClassName?: string - - headerButtons?: React.ReactNode - - // Body - noPadding?: boolean + icon?: Icon + rightHeader?: React.ReactNode } export default class Box extends React.Component { public render = () => (
- {(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && ( -
+ {(this.props.rightHeader || this.props.title || this.props.icon) && ( +
- {this.props.title && ( - {this.props.title} - )} - {this.props.subtitle && ( - {this.props.subtitle} - )} + + {this.props.icon && ( + + + + )} + {this.props.title ? this.props.title : undefined} + - {this.props.children && ( + {this.props.rightHeader && ( - - {this.props.headerButtons} - + {this.props.rightHeader} )} @@ -64,7 +48,7 @@ export default class Box extends React.Component { {this.props.children && (
{this.props.children} -
+
)}
) diff --git a/src/dzeio/Button/Button.stories.tsx b/src/dzeio/Button/Button.stories.tsx index 107b8b2..cf76433 100644 --- a/src/dzeio/Button/Button.stories.tsx +++ b/src/dzeio/Button/Button.stories.tsx @@ -13,7 +13,6 @@ Basic.args = { nomargintop: true, icon: Zap, size: 'small', - href: '/pouet', block: true } @@ -22,7 +21,6 @@ WithImg.args = { nomargintop: true, icon: '/16-16.svg', size: 'small', - href: '/pouet', block: true } diff --git a/src/dzeio/Checkbox/Checkbox.module.styl b/src/dzeio/Checkbox/Checkbox.module.styl index dba7763..7995eec 100644 --- a/src/dzeio/Checkbox/Checkbox.module.styl +++ b/src/dzeio/Checkbox/Checkbox.module.styl @@ -12,7 +12,7 @@ $backColor = #757575 margin-top 8px p - margin-left 8px + margin-left 4px span top 0 @@ -20,12 +20,11 @@ $backColor = #757575 width 20px height @width position relative - box-shadow inset 0 0 0 2px $grayDark - border-radius 2px - transition all $transition - + box-shadow inset 0 0 0 2px $darkGrayLight @media (prefers-color-scheme dark) - box-shadow inset 0 0 0 2px $grayLight + box-shadow inset 0 0 0 2px $darkGrayDark + border-radius 4px + transition all $transition &::after border-radius 20px @@ -47,8 +46,11 @@ $backColor = #757575 opacity 0 &:checked + span - background rgba($main, .5) - box-shadow inset 0 0 0 2px $main + background $infoLight + box-shadow inset 0 0 0 2px $infoLight + @media (prefers-color-scheme dark) + box-shadow inset 0 0 0 2px $infoDark + background $infoDark svg color white @@ -57,9 +59,9 @@ $backColor = #757575 &:hover span - box-shadow inset 0 0 0 2px black + box-shadow inset 0 0 0 2px $infoLight @media (prefers-color-scheme dark) - box-shadow inset 0 0 0 2px white + box-shadow inset 0 0 0 2px $infoDark .radio span @@ -78,28 +80,35 @@ $backColor = #757575 background white .switch - padding 2px 0 2px 10px // 2px base padding 10px circle padding + padding 0 0 0 10px // 2px base padding 10px circle padding - &:hover span::after - background black + &:hover span + box-shadow none + &::after + background $darkGrayLight @media (prefers-color-scheme dark) - background white + background $darkGrayDark span - width 28px + width 24px height 14px border-radius 20px top 50% margin-right 10px box-shadow none - background rgba($backColor, .5) + background rgba($darkGrayLight, .3) + @media (prefers-color-scheme dark) + background rgba($darkGrayDark, .3) + &::after content " " top 50% transform translate(-50%, -50%) left 0 - background $backColor + background $darkGrayLight + @media (prefers-color-scheme dark) + background $darkGrayDark width 20px height @width @@ -108,10 +117,17 @@ $backColor = #757575 width 20px &:checked + span + + box-shadow none + background rgba($infoLight, .3) + @media (prefers-color-scheme dark) + background rgba($infoDark, .3) &::after left 100% transform translate(-50%, -50%) - background $main + background $infoLight + @media (prefers-color-scheme dark) + background $infoDark checkBox($color) input:checked + span diff --git a/src/dzeio/Code/Code.module.styl b/src/dzeio/Code/Code.module.styl index 6b014bc..53151c2 100644 --- a/src/dzeio/Code/Code.module.styl +++ b/src/dzeio/Code/Code.module.styl @@ -1,7 +1,6 @@ .code - font-family 'source code pro', monospace background #E8EAF6 - padding 4px 8px + padding 4px border-radius 8px .pre diff --git a/src/dzeio/Container/Container.module.styl b/src/dzeio/Container/Container.module.styl index d2ccd01..8f4d70f 100644 --- a/src/dzeio/Container/Container.module.styl +++ b/src/dzeio/Container/Container.module.styl @@ -1,2 +1,5 @@ .container - padding 16px + margin 48px auto + padding 0 16px + width 100% + max-width 1312px diff --git a/src/dzeio/Fieldset/Fieldset.stories.tsx b/src/dzeio/Container/Container.stories.tsx similarity index 61% rename from src/dzeio/Fieldset/Fieldset.stories.tsx rename to src/dzeio/Container/Container.stories.tsx index 537e67a..aafd3be 100644 --- a/src/dzeio/Fieldset/Fieldset.stories.tsx +++ b/src/dzeio/Container/Container.stories.tsx @@ -1,16 +1,19 @@ import { Meta } from '@storybook/react/types-6-0' import React from 'react' import Component from '.' -import Input from '../Input' +import Text from '../Text' export default { - title: 'DZEIO/Fieldset', + title: 'DZEIO/Container', component: Component, argTypes: { title: { control: 'text'} + }, + parameters: { + layout: 'fullscreen' } } as Meta export const Basic = (args: any) => ( - + Test ) diff --git a/src/dzeio/Container/index.tsx b/src/dzeio/Container/index.tsx index de793c8..647b9d3 100644 --- a/src/dzeio/Container/index.tsx +++ b/src/dzeio/Container/index.tsx @@ -11,9 +11,9 @@ interface Props { export default class Container extends React.Component { public render = () => ( -
+
{this.props.children} -
+ ) } diff --git a/src/dzeio/Fieldset/Fieldset.module.styl b/src/dzeio/Fieldset/Fieldset.module.styl deleted file mode 100644 index 3f0c7e6..0000000 --- a/src/dzeio/Fieldset/Fieldset.module.styl +++ /dev/null @@ -1,19 +0,0 @@ -@import '../config.styl' - -.fieldset - border-radius 4px - border 2px solid $grayDark - transition all $transition - margin 0 - - > legend - font-weight 600 - transition all $transition - padding 0 4px - @media (prefers-color-scheme dark) - color white - &:hover - border-color black - - @media (prefers-color-scheme dark) - border-color white diff --git a/src/dzeio/Fieldset/index.tsx b/src/dzeio/Fieldset/index.tsx deleted file mode 100644 index 5c54fe2..0000000 --- a/src/dzeio/Fieldset/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -import css from './Fieldset.module.styl' - -interface Props { - title?: string - children?: React.ReactNode -} - -export default class Fieldset extends React.Component { - - public render = () => ( -
- {this.props.title && ( - {this.props.title} - )} - {this.props.children} -
- ) - -} diff --git a/src/dzeio/Footer/Footer.module.styl b/src/dzeio/Footer/Footer.module.styl index 159cdd5..753fbbc 100644 --- a/src/dzeio/Footer/Footer.module.styl +++ b/src/dzeio/Footer/Footer.module.styl @@ -1,13 +1,15 @@ @import '../config.styl' .footer - padding 24px 16px + padding 16px background $foregroundLight @media (prefers-color-scheme dark) background $foregroundDark ul padding 0 + margin 0 + margin-top 12px display flex justify-content center li @@ -21,6 +23,9 @@ display inline-block vertical-align middle margin 0 2px + width 16px + height @width + vertical-align sub @keyframes grow 0% diff --git a/src/dzeio/Footer/Footer.stories.tsx b/src/dzeio/Footer/Footer.stories.tsx index 97248e4..954cb82 100644 --- a/src/dzeio/Footer/Footer.stories.tsx +++ b/src/dzeio/Footer/Footer.stories.tsx @@ -1,19 +1,22 @@ -import { Meta, Story } from '@storybook/react/types-6-0' -import React from 'react' -import { Zap } from 'lucide-react' -import Component from '.' - -export default { - title: 'DZEIO/Footer', - component: Component, -} as Meta - -export const Basic: Story = (args: any) => - -let tmp = Basic.bind({}) -tmp.args = { - links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}], - socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}] -} - -export const Normal = tmp +import { Meta, Story } from '@storybook/react/types-6-0' +import React from 'react' +import { Zap } from 'lucide-react' +import Component from '.' + +export default { + title: 'DZEIO/Footer', + component: Component, + parameters: { + layout: 'fullscreen' + } +} as Meta + +export const Basic: Story = (args: any) => + +let tmp = Basic.bind({}) +tmp.args = { + links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}], + socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}] +} + +export const Normal = tmp diff --git a/src/dzeio/Footer/index.tsx b/src/dzeio/Footer/index.tsx index b2d8560..3a7a4d2 100644 --- a/src/dzeio/Footer/index.tsx +++ b/src/dzeio/Footer/index.tsx @@ -1,48 +1,48 @@ -import React, { FC } from 'react' -import { Heart } from 'lucide-react' -import Link from '../Link' -import { LucideProps } from 'lucide-react' -import Text from '../Text' -import css from './Footer.module.styl' -import Image from 'next/image' - -interface Props { - text?: string - company?: string - links?: Array<{ - path: string - name: string - }> - socials?: Array<{ - href: string - icon: FC | string - }> -} - -export default class Footer extends React.Component { - public render = () => ( -
- {this.props.text ? ( - {this.props.text} - ) : ( - Made with by {this.props.company || 'Dzeio'} - )} - {this.props.links && ( -
    {this.props.links.map((l, index) => ( -
  • {index !== 0 && (<> - )}{l.name}
    • - ))}
- )} - {this.props.socials && ( -
    {this.props.socials.map((l, index) => ( -
  • - {typeof l.icon === 'string' ? ( - - ) : ( - - )} -
    • - ))}
- )} -
- ) -} \ No newline at end of file +import React, { FC } from 'react' +import { Heart } from 'lucide-react' +import Link from '../Link' +import { Icon } from 'lucide-react' +import Text from '../Text' +import css from './Footer.module.styl' +import Image from 'next/image' + +interface Props { + text?: string + company?: string + links?: Array<{ + path: string + name: string + }> + socials?: Array<{ + href: string + icon: Icon | string + }> +} + +export default class Footer extends React.Component { + public render = () => ( +
+ {this.props.text ? ( + {this.props.text} + ) : ( + Made with by {this.props.company || 'Dzeio'} + )} + {this.props.links && ( +
    {this.props.links.map((l, index) => ( +
  • {index !== 0 && (<> - )}{l.name}
    • + ))}
+ )} + {this.props.socials && ( +
    {this.props.socials.map((l, index) => ( +
  • + {typeof l.icon === 'string' ? ( + + ) : ( + + )} +
    • + ))}
+ )} +
+ ) +} diff --git a/src/dzeio/Input/Input.module.styl b/src/dzeio/Input/Input.module.styl index 9cb991a..c015eb6 100644 --- a/src/dzeio/Input/Input.module.styl +++ b/src/dzeio/Input/Input.module.styl @@ -2,31 +2,17 @@ .parent position relative - margin 16px 0 max-width 100% display inline-block &:not(.block) + .parent:not(.block) margin-left 16px - label - font-size 1rem - font-weight 600 - color black - display inline-block - margin-bottom .5rem - transition all $transition - position absolute - top 16px - pointer-events none - left 16px - - @media (prefers-color-scheme dark) - color white - svg position absolute - color #AAA + color $darkGrayLight + @media (prefers-color-scheme dark) + color $darkGrayDark transition color $transition pointer-events none top 14px @@ -78,15 +64,14 @@ left 0 width 100% z-index 100 - box-shadow 0 4px 8px rgba(black, .3) + box-shadow 0 2px 4px rgba(black, .3) margin 0 padding 0 - background darken($foregroundLight, 5%) + background $foregroundLight @media (prefers-color-scheme dark) - background lighten($foregroundDark, 5%) + background $foregroundDark - border-bottom-left-radius 4px - border-bottom-right-radius 4px + border-radius 8px max-height 25vh overflow-y auto @media (max-width $mobile) @@ -123,32 +108,29 @@ input select textarea - padding 14px 16px - height 56px - border 2px solid $grayDark - border-radius 4px + padding 12px + border-radius 8px max-width 100% - box-sizing border-box font-size .875rem outline none - background transparent + background $lightGrayLight transition all $transition + border 2px solid $darkGrayLight color black @media (prefers-color-scheme dark) - border-color $grayLight + background $lightGrayDark + border-color $darkGrayDark color white - &:not(:placeholder-shown) - &:focus - &:not([placeholder=" "]) - ~ label - top -8px - left 16px - 4px // .input/padding-left label/padding-left - background white - padding 0 4px + &::placeholder + font-weight 700 + font-size rem(16) + transition color $transition + opacity 1 + color $darkGrayLight + @media (prefers-color-scheme dark) + color $darkGrayDark - @media (prefers-color-scheme dark) - background #202020 &:disabled border-color #999 @@ -166,7 +148,8 @@ @media (prefers-color-scheme dark) border-color white - + svg + ~ svg + &::placeholder color black @media (prefers-color-scheme dark) @@ -178,6 +161,7 @@ color @border-color ~ svg + &::placeholder color @border-color &:invalid border-color $errorDark @@ -252,13 +236,13 @@ transform rotateX(0) transition $transition - &:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate + &:focus ~ svg.rotate + ~ .autocomplete:hover ~ svg.rotate transform rotateX(180deg) - div - display flex - justify-content space-between - padding 0 16px - font-size .9em + + p + padding 0 8px + font-size rem(14) &.block, &.block input, &.block select, &.block textarea width 100% diff --git a/src/dzeio/Input/index.tsx b/src/dzeio/Input/index.tsx index cfcb6c4..2f1c2d3 100644 --- a/src/dzeio/Input/index.tsx +++ b/src/dzeio/Input/index.tsx @@ -12,7 +12,6 @@ interface Props extends React.DetailedHTMLProps iconRight?: FC helper?: string - characterCount?: boolean inputRef?: React.RefObject selectRef?: React.RefObject type?: 'color' | 'text' | 'date' | 'datetime-local' | @@ -21,15 +20,10 @@ interface Props extends React.DetailedHTMLProps - infinityText?: string - filled?: boolean - opaque?: boolean - block?: boolean children?: React.ReactNode } interface States { - charCount?: string textAreaHeight?: number value?: string isInFirstPartOfScreen?: boolean @@ -44,9 +38,6 @@ export default class Input extends React.Component { private parentRef: React.RefObject = React.createRef() public componentDidMount() { - if (this.props.characterCount) { - this.onChange() - } if (this.props.type === 'textarea') { this.textareaHandler() } @@ -67,26 +58,19 @@ export default class Input extends React.Component { delete props.label delete props.children delete props.icon - delete props.opaque delete props.helper - delete props.infinityText delete props.autocomplete - delete props.filled delete props.iconRight delete props.inputRef delete props.selectRef - delete props.block delete props.color - delete props.characterCount const baseProps: React.DetailedHTMLProps, HTMLInputElement> = { - placeholder: this.props.placeholder || ' ', + placeholder: this.props.label || this.props.placeholder || ' ', ref: this.props.inputRef || this.inputRef, className: buildClassName( [css.iconLeft, this.props.icon], - [css.iconRight, this.props.iconRight || this.props.autocomplete], - [css.filled, this.props.filled], - [css.opaque, this.props.opaque] + [css.iconRight, this.props.iconRight || this.props.autocomplete] ), onInvalid: (ev: React.FormEvent) => ev.preventDefault(), } @@ -105,7 +89,6 @@ export default class Input extends React.Component { className={buildClassName( [css.iconLeft, this.props.icon], [css.iconRight, !this.props.disabled || this.props.iconRight], - [css.filled, this.props.filled], [css[this.props.color as string], this.props.color] )} > @@ -146,38 +129,31 @@ export default class Input extends React.Component { return (
{input} - {/* Process Icon */} + {/* Left Icon */} {this.props.icon && ( - + )} + {/* Right Icon */} {this.props.iconRight ? ( - + ) : ((this.props.type === 'select' || this.props.autocomplete) && !this.props.disabled) && ( - + )} - {/* Input Label */} - {this.props.label && ( - - )} - {(this.props.helper || this.props.characterCount) && ( -
- {this.props.helper} - {this.props.characterCount && ( - {this.state?.charCount} - )} -
+ {/* Helper text */} + {(this.props.helper) && ( + {this.props.helper} )} + {/* List when this is an autocomplete */} {this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value ?? this.props.value?.toString() ?? '') === -1 && (
    {this.props.autocomplete.filter((item) => item.toLowerCase().includes(this.state?.value?.toLowerCase() ?? this.props.value?.toString().toLowerCase() ?? '')).map((item) => (
  • {item}
    • ))} @@ -187,6 +163,9 @@ export default class Input extends React.Component { ) } + /** + * event for autocomplete to detect where on the screen it shoul display + */ private parentScroll = async () => { const div = this.parentRef.current if (!div) {return} @@ -230,15 +209,6 @@ export default class Input extends React.Component { } private onChange = async (event?: React.FormEvent) => { - if (this.props.characterCount) { - const max = this.props.maxLength || this.props.infinityText || 'Infinity' - const baseItem = this.props.value || this.props.defaultValue || '' - let currentCount = baseItem.toString().length - if (event) { - currentCount = (event.target as HTMLInputElement).value.length - } - this.setState({charCount: `${currentCount}/${max}`}) - } if (event) { this.setState({value: (event.target as HTMLInputElement).value }) } diff --git a/src/dzeio/Loader/Loader.stories.tsx b/src/dzeio/Loader/Loader.stories.tsx new file mode 100644 index 0000000..3d3d8a2 --- /dev/null +++ b/src/dzeio/Loader/Loader.stories.tsx @@ -0,0 +1,21 @@ +import { Meta, Story } from '@storybook/react/types-6-0' +import React from 'react' +import { Zap } from 'lucide-react' +import Component from '.' + +export default { + title: 'DZEIO/Loader', + component: Component, + parameters: { + layout: 'fullscreen' + } +} as Meta + +export const Basic: Story = (args: any) => + +let tmp = Basic.bind({}) +tmp.args = { + auto: {interval : [10, 100], increment: [0, 5]} +} + +export const Auto = tmp diff --git a/src/dzeio/NotificationManager/index.tsx b/src/dzeio/NotificationManager/index.tsx index 17bd210..95d6a2b 100644 --- a/src/dzeio/NotificationManager/index.tsx +++ b/src/dzeio/NotificationManager/index.tsx @@ -135,11 +135,8 @@ export default class NotificationManager extends React.Component { > - NotificationManager.removeNotification(index)} /> - + rightHeader={( + NotificationManager.removeNotification(index)} /> )} > {el.actions && ( diff --git a/src/dzeio/Overflow/Overflow.module.styl b/src/dzeio/Overflow/Overflow.module.styl deleted file mode 100644 index d50ef59..0000000 --- a/src/dzeio/Overflow/Overflow.module.styl +++ /dev/null @@ -1,6 +0,0 @@ -$height = 45px - -.top - height $height -.bottom - margin-top - $height diff --git a/src/dzeio/Overflow/index.tsx b/src/dzeio/Overflow/index.tsx deleted file mode 100644 index eff5f85..0000000 --- a/src/dzeio/Overflow/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' - -import { buildClassName } from '../Util' -import css from './Overflow.module.styl' - -interface Props { - bottom?: boolean - top?: boolean -} - -export default class Overflow extends React.Component { - - public render = () => ( -
    - ) - -} diff --git a/src/dzeio/Popup/index.tsx b/src/dzeio/Popup/index.tsx index 1ba451d..5e005f8 100644 --- a/src/dzeio/Popup/index.tsx +++ b/src/dzeio/Popup/index.tsx @@ -1,32 +1,39 @@ -import React from 'react' -import { X } from 'lucide-react' -import Text from '../Text' -import Box from '../Box' -import Row from '../Row' - -import css from './Popup.module.styl' - -interface Props { - children: React.ReactNode - onClose?: () => void - header?: Box['props'] -} - -export default class Popup extends React.Component { - - public render = () => ( - - ev.stopPropagation()} headerButtons={()}> - {this.props.children} - - - ) - - private parentClose = (ev: React.MouseEvent) => { - const target = ev.currentTarget - if (target.classList.contains(css.popup) && this.props.onClose) { - this.props.onClose() - } - } - -} +import React from 'react' +import { X } from 'lucide-react' +import Text from '../Text' +import Box from '../Box' +import Row from '../Row' + +import css from './Popup.module.styl' + +interface Props { + children: React.ReactNode + onClose?: () => void + header?: Box['props'] +} + +export default class Popup extends React.Component { + + public render = () => ( + + ev.stopPropagation()} + rightHeader={ + () + } + > + {this.props.children} + + + ) + + private parentClose = (ev: React.MouseEvent) => { + const target = ev.currentTarget + if (target.classList.contains(css.popup) && this.props.onClose) { + this.props.onClose() + } + } + +} diff --git a/src/dzeio/Table/Table.module.styl b/src/dzeio/Table/Table.module.styl index 8529f8b..626351d 100644 --- a/src/dzeio/Table/Table.module.styl +++ b/src/dzeio/Table/Table.module.styl @@ -2,21 +2,33 @@ .table border-spacing 0 - border 2px solid $grayDark - @media (prefers-color-scheme dark) - border-color $grayLight - border-radius 4px width 100% - td - border-top 1px solid $grayDark - @media (prefers-color-scheme dark) - border-color $grayLight + tr + $radius = 16px + td:first-child + th:first-child + border-top-left-radius $radius + border-bottom-left-radius $radius + + td:last-child + th:last-child + border-top-right-radius $radius + border-bottom-right-radius $radius th td - padding 8px + padding 16px text-align left + color black + @media (prefers-color-scheme dark) + color white + th + background $lightGrayLight + color $darkGrayLight + @media (prefers-color-scheme dark) + background $lightGrayDark + color $darkGrayDark .parent - overflow-x auto \ No newline at end of file + overflow-x auto diff --git a/src/dzeio/Table/Table.stories.tsx b/src/dzeio/Table/Table.stories.tsx new file mode 100644 index 0000000..ebc25a0 --- /dev/null +++ b/src/dzeio/Table/Table.stories.tsx @@ -0,0 +1,49 @@ +import { Meta } from '@storybook/react/types-6-0' +import { Copyright, Settings } from 'lucide-react' +import React from 'react' +import Component from '.' +import Box from '../Box' + +export default { + title: 'DZEIO/Table', + component: Component +} as Meta + +export const Basic = (args: any) => ( + + + + + item1 + item1 + item1 + item1 + item1 + + + + + item1 + item1 + item1 + item1 + item1 + + + item1 + item1 + item1 + item1 + item1 + + + item1 + item1 + item1 + item1 + item1 + + + + +) diff --git a/src/dzeio/Text/index.tsx b/src/dzeio/Text/index.tsx index 3e9926b..bffe8af 100644 --- a/src/dzeio/Text/index.tsx +++ b/src/dzeio/Text/index.tsx @@ -3,7 +3,7 @@ import { buildClassName } from '../Util' import css from './Text.module.styl' interface Props { color?: 'black' | 'white' - type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'span' + type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'span' | 'div' className?: string noDarkTheme?: boolean align?: 'left' | 'right' | 'center' diff --git a/src/dzeio/config.styl b/src/dzeio/config.styl index 6d9de7a..c915d99 100644 --- a/src/dzeio/config.styl +++ b/src/dzeio/config.styl @@ -14,14 +14,23 @@ $errorLight = #F44336 $warningDark = #C43E00 $warningLight = #FF9800 - -$backgroundDark = #161616 -$backgroundLight = #EEEEEE +// hsl($main) +$backgroundDark = darken($main, 92%) +$backgroundLight = lighten($main, 94%) $foregroundDark = #202020 $foregroundLight = #FFFFFF -$grayDark = #B0B0B0 -$grayLight = #E0E0E0 +// Light theme grays +$darkGrayLight = #777 +$lightGrayLight = #F4F4F4 + +// Dark theme grays +$darkGrayDark = #444 +$lightGrayDark = #AAA + +// @deprecated +$grayLight = $darkGrayLight +$grayDark = $lightGrayLight $transitionTime = .15s diff --git a/src/dzeio/general.styl b/src/dzeio/general.styl index dbe1e2b..7db7c58 100644 --- a/src/dzeio/general.styl +++ b/src/dzeio/general.styl @@ -5,7 +5,12 @@ *::before *::after box-sizing border-box - font-family Aileron, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif + font-family Aileron, -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif + +// Georgia,Cambria,"Times New Roman",Times,serif + +code, pre + font-family "Fira Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace; html body diff --git a/src/dzeio/util.styl b/src/dzeio/util.styl deleted file mode 100644 index 7925776..0000000 --- a/src/dzeio/util.styl +++ /dev/null @@ -1,15 +0,0 @@ -@import './config' - -.fullscreen - min-height 100vh - -.w100p - width 100% - -.hideMobile - @media (max-width $mobile) - display none - -.hideTablet - @media (max-width $tablet) - display none diff --git a/src/index.ts b/src/index.ts index 6036255..a66108b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,7 +12,6 @@ import Checkbox from './dzeio/Checkbox' import Code from './dzeio/Code' import Col from './dzeio/Col' import Container from './dzeio/Container' -import Fieldset from './dzeio/Fieldset' import Footer from './dzeio/Footer' import GradientBackground from './dzeio/GradientBackground' import Image from './dzeio/Image' @@ -21,7 +20,6 @@ import Link from './dzeio/Link' import Loader from './dzeio/Loader' import Navbar from './dzeio/Navbar' import NotificationManager from './dzeio/NotificationManager' -import Overflow from './dzeio/Overflow' import Popup from './dzeio/Popup' import Row from './dzeio/Row' import Table from './dzeio/Table' @@ -35,7 +33,6 @@ export { Code, Col, Container, - Fieldset, Footer, GradientBackground, Image, @@ -44,10 +41,9 @@ export { Loader, Navbar, NotificationManager, - Overflow, Popup, Row, Table, Text, Util -} \ No newline at end of file +} From 96cd64151fcaba5aaa295ed6eaabdb55cfcee492 Mon Sep 17 00:00:00 2001 From: Avior Date: Fri, 24 Sep 2021 17:30:38 +0200 Subject: [PATCH 002/102] Update Signed-off-by: Avior --- src/dzeio/Navbar/index.tsx | 547 +++++++++++++++++++------------------ 1 file changed, 274 insertions(+), 273 deletions(-) diff --git a/src/dzeio/Navbar/index.tsx b/src/dzeio/Navbar/index.tsx index 46a9c12..d366007 100644 --- a/src/dzeio/Navbar/index.tsx +++ b/src/dzeio/Navbar/index.tsx @@ -1,273 +1,274 @@ -import Router from 'next/router' - -import Image, { ImageProps } from 'next/image' -import React, { FC } from 'react' -import { ChevronDown, ChevronsRight, Menu, X } from 'lucide-react' -import Text from '../Text' -import Col from '../Col' -import Row from '../Row' -import Link from '../Link' -import { buildClassName } from '../Util' - -import css from './Navbar.module.styl' - -interface Props { - /** - * Type of Navbar - * _note: when in mobile it is not listened_ - */ - type: 'navbar' | 'sidebar' - - /** - * Logo to display - */ - logo?: ImageProps & {height: number, width: number} - /** - * Login URL - */ - loginUrl?: string - /** - * Login URL - */ - registerUrl?: string - /** - * User Informations if loggedin - */ - user?: { - /** - * Username - */ - name: string - /** - * User Short description - */ - description?: string - /** - * User Menu - */ - menu?: { - /** - * Menu links - */ - links: Array<{ - path: string - name: string - }> - /** - * Custom informations shown next to the links - */ - informations?: JSX.Element - } - } - /** - * Links to display - */ - items: Array<{ - path: string - icon?: FC - name: string - }> - /** - * Internal Use don't use it ! - */ - mobileMenu?: () => void -} - -interface State { - path?: string - short: boolean - isMobile: boolean - menuActive: boolean -} - -/** - * Navbar/Sidebar Component - * @version 1.0.3 - */ -export default class Navbar extends React.Component { - - public state: State = { - short: false, - isMobile: false, - menuActive: false - } - - public componentDidMount() { - this.setState({ - path: Router.asPath, - menuActive: !!this.props.mobileMenu - }) - Router.events.on('routeChangeComplete', () => { - this.setState({path: Router.asPath, menuActive: false}) - }) - Router.events.on('routeChangeError', () => { - this.setState({path: Router.asPath, menuActive: false}) - }) - if (!this.props.mobileMenu) { - window.addEventListener('resize', this.onResize) - this.onResize() - } - } - - public onResize = () => { - const isMobile = window.innerWidth <= 768 - if (this.state.isMobile !== isMobile) { - this.setState({isMobile}) - } - } - - public componentDidUpdate() { - if (!this.props.mobileMenu) { - if (this.state.short) { - document.body.classList.add(css.short) - } else { - document.body.classList.remove(css.short) - } - if (this.getType() === 'sidebar') { - document.body.classList.add(css['body-sidebar']) - document.body.classList.remove(css['body-navbar']) - } else { - document.body.classList.remove(css['body-sidebar']) - document.body.classList.add(css['body-navbar']) - } - } - - } - - public componentWillUnmount() { - if (!this.props.mobileMenu) { - document.body.classList.remove(css.short, css[`body-${this.getType()}`]) - window.removeEventListener('resize', this.onResize) - } - } - - public onSidebarButton = () => { - if (!this.props.mobileMenu) { - this.setState({short: !this.state.short, menuActive: false}) - } else { - this.props.mobileMenu() - } - } - - public menuCloseCallback = () => { - this.setState({menuActive: false}) - } - - public getType(): 'sidebar' | 'navbar' { - if (this.props.mobileMenu) { - return 'sidebar' - } - return this.state.isMobile ? 'navbar' : this.props.type - } - - public render = () => ( - <> - - - {!this.props.mobileMenu && this.state.isMobile && ( -
    - -
    - )} - - ) -} +import Router from 'next/router' + +import Image, { ImageProps } from 'next/image' +import React from 'react' +import { ChevronDown, ChevronsRight, Menu, X } from 'lucide-react' +import Text from '../Text' +import Col from '../Col' +import Row from '../Row' +import Link from '../Link' +import { buildClassName } from '../Util' + +import css from './Navbar.module.styl' +import { Icon } from '../interfaces' + +interface Props { + /** + * Type of Navbar + * _note: when in mobile it is not listened_ + */ + type: 'navbar' | 'sidebar' + + /** + * Logo to display + */ + logo?: ImageProps & {height: number, width: number} + /** + * Login URL + */ + loginUrl?: string + /** + * Login URL + */ + registerUrl?: string + /** + * User Informations if loggedin + */ + user?: { + /** + * Username + */ + name: string + /** + * User Short description + */ + description?: string + /** + * User Menu + */ + menu?: { + /** + * Menu links + */ + links: Array<{ + path: string + name: string + }> + /** + * Custom informations shown next to the links + */ + informations?: JSX.Element + } + } + /** + * Links to display + */ + items: Array<{ + path: string + icon?: Icon + name: string + }> + /** + * Internal Use don't use it ! + */ + mobileMenu?: () => void +} + +interface State { + path?: string + short: boolean + isMobile: boolean + menuActive: boolean +} + +/** + * Navbar/Sidebar Component + * @version 1.0.3 + */ +export default class Navbar extends React.Component { + + public state: State = { + short: false, + isMobile: false, + menuActive: false + } + + public componentDidMount() { + this.setState({ + path: Router.asPath, + menuActive: !!this.props.mobileMenu + }) + Router.events.on('routeChangeComplete', () => { + this.setState({path: Router.asPath, menuActive: false}) + }) + Router.events.on('routeChangeError', () => { + this.setState({path: Router.asPath, menuActive: false}) + }) + if (!this.props.mobileMenu) { + window.addEventListener('resize', this.onResize) + this.onResize() + } + } + + public onResize = () => { + const isMobile = window.innerWidth <= 768 + if (this.state.isMobile !== isMobile) { + this.setState({isMobile}) + } + } + + public componentDidUpdate() { + if (!this.props.mobileMenu) { + if (this.state.short) { + document.body.classList.add(css.short) + } else { + document.body.classList.remove(css.short) + } + if (this.getType() === 'sidebar') { + document.body.classList.add(css['body-sidebar']) + document.body.classList.remove(css['body-navbar']) + } else { + document.body.classList.remove(css['body-sidebar']) + document.body.classList.add(css['body-navbar']) + } + } + + } + + public componentWillUnmount() { + if (!this.props.mobileMenu) { + document.body.classList.remove(css.short, css[`body-${this.getType()}`]) + window.removeEventListener('resize', this.onResize) + } + } + + public onSidebarButton = () => { + if (!this.props.mobileMenu) { + this.setState({short: !this.state.short, menuActive: false}) + } else { + this.props.mobileMenu() + } + } + + public menuCloseCallback = () => { + this.setState({menuActive: false}) + } + + public getType(): 'sidebar' | 'navbar' { + if (this.props.mobileMenu) { + return 'sidebar' + } + return this.state.isMobile ? 'navbar' : this.props.type + } + + public render = () => ( + <> + + + {!this.props.mobileMenu && this.state.isMobile && ( +
    + +
    + )} + + ) +} From 9ab56544d9876e9c09cd6a69df3fdddd6f3d75cb Mon Sep 17 00:00:00 2001 From: Avior Date: Fri, 24 Sep 2021 17:30:58 +0200 Subject: [PATCH 003/102] Update Signed-off-by: Avior --- .gitignore | 10 +- package-lock.json | 600 +++++++++++-------- package.json | 17 +- src/dzeio/Box/index.tsx | 3 +- src/dzeio/Button/Button.module.styl | 62 +- src/dzeio/Button/Button.stories.tsx | 7 +- src/dzeio/Button/index.tsx | 14 +- src/dzeio/Code/Code.module.styl | 12 +- src/dzeio/Footer/index.tsx | 4 +- src/dzeio/Input/Input.module.styl | 7 +- src/dzeio/Input/index.tsx | 6 +- src/dzeio/Navbar/Navbar.module.styl | 5 +- src/dzeio/Navbar/Navbar.stories.tsx | 85 +-- src/dzeio/Popup/Popup.module.styl | 4 +- src/dzeio/Popup/Popup.stories.tsx | 13 + src/dzeio/Popup/index.tsx | 4 +- src/dzeio/Row/Row.module.styl | 2 + src/dzeio/Table/Table.module.styl | 8 +- src/dzeio/Table/Table.stories.tsx | 2 +- src/dzeio/Table/index.tsx | 14 +- src/dzeio/_aileron.styl | 3 + src/dzeio/config.styl | 13 +- src/dzeio/general.styl | 10 +- src/dzeio/{interfaces.ts => interfaces.d.ts} | 4 +- tsconfig.json | 4 +- 25 files changed, 528 insertions(+), 385 deletions(-) create mode 100644 src/dzeio/Popup/Popup.stories.tsx rename src/dzeio/{interfaces.ts => interfaces.d.ts} (69%) diff --git a/.gitignore b/.gitignore index f0fe357..11cce10 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,5 @@ -module/ node_modules/ -*.mjs -*.js -!src/dzeio/stylusUtils.js -*.d.ts types/ -!rollup.config.js -!src/stylus.d.ts -!.storybook/*.js + +index.js style.css diff --git a/package-lock.json b/package-lock.json index 1c643a0..f49d87d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { + "lucide-react": "^0.16.0", "rollup": "^2.44.0", "rollup-plugin-styles": "^3.14.1", "rollup-plugin-typescript2": "^0.30.0", @@ -27,10 +28,9 @@ "@types/react-dom": "^17.0.1", "babel-loader": "^8.2.2", "css-loader": "^5.0.2", - "lucide-react": "^0.16.0", - "next": "^10.0.0", - "react": "^16.0.0", - "react-dom": "^16.0.0", + "next": "^11.0.0", + "react": "^17.0.0", + "react-dom": "^17.0.0", "style-loader": "^2.0.0", "stylus": "^0.55.0", "stylus-loader": "^4.3.3", @@ -39,12 +39,9 @@ "webpack": "^4.44.2" }, "peerDependencies": { - "lucide-react": "^0.16.0", - "next": "^10.0.0 || ^11.0.0", - "react": "^16.0.0 || ^17.0.0", - "react-dom": "^16.0.0 || ^17.0.0", - "stylus": "^0.55.0", - "typescript": "^4.0.0" + "next": "^11.0.0", + "react": "^17.0.0", + "react-dom": "^17.0.0" } }, "node_modules/@babel/code-frame": { @@ -389,9 +386,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz", - "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==", + "version": "7.15.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", + "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==", "engines": { "node": ">=6.9.0" } @@ -1788,9 +1785,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz", - "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==", + "version": "7.15.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz", + "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==", "dev": true, "dependencies": { "regenerator-runtime": "^0.13.4" @@ -1834,12 +1831,12 @@ } }, "node_modules/@babel/types": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz", - "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==", + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz", + "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==", "dev": true, "dependencies": { - "@babel/helper-validator-identifier": "^7.14.5", + "@babel/helper-validator-identifier": "^7.14.9", "to-fast-properties": "^2.0.0" }, "engines": { @@ -2405,22 +2402,28 @@ "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=", "dev": true }, + "node_modules/@napi-rs/triples": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz", + "integrity": "sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==", + "dev": true + }, "node_modules/@next/env": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/env/-/env-10.2.3.tgz", - "integrity": "sha512-uBOjRBjsWC4C8X3DfmWWP6ekwLnf2JCCwQX9KVnJtJkqfDsv1yQPakdOEwvJzXQc3JC/v5KKffYPVmV2wHXCgQ==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/env/-/env-11.1.2.tgz", + "integrity": "sha512-+fteyVdQ7C/OoulfcF6vd1Yk0FEli4453gr8kSFbU8sKseNSizYq6df5MKz/AjwLptsxrUeIkgBdAzbziyJ3mA==", "dev": true }, "node_modules/@next/polyfill-module": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-10.2.3.tgz", - "integrity": "sha512-OkeY4cLhzfYbXxM4fd+6V4s5pTPuyfKSlavItfNRA6PpS7t1/R6YjO7S7rB8tu1pbTGuDHGIdE1ioDv15bAbDQ==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.1.2.tgz", + "integrity": "sha512-xZmixqADM3xxtqBV0TpAwSFzWJP0MOQzRfzItHXf1LdQHWb0yofHHC+7eOrPFic8+ZGz5y7BdPkkgR1S25OymA==", "dev": true }, "node_modules/@next/react-dev-overlay": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-10.2.3.tgz", - "integrity": "sha512-E6g2jws4YW94l0lMMopBVKIZK2mEHfSBvM0d9dmzKG9L/A/kEq6LZCB4SiwGJbNsAdlk2y3USDa0oNbpA+m5Kw==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-11.1.2.tgz", + "integrity": "sha512-rDF/mGY2NC69mMg2vDqzVpCOlWqnwPUXB2zkARhvknUHyS6QJphPYv9ozoPJuoT/QBs49JJd9KWaAzVBvq920A==", "dev": true, "dependencies": { "@babel/code-frame": "7.12.11", @@ -2436,8 +2439,8 @@ "strip-ansi": "6.0.0" }, "peerDependencies": { - "react": "^16.9.0 || ^17", - "react-dom": "^16.9.0 || ^17" + "react": "^17.0.2", + "react-dom": "^17.0.2" } }, "node_modules/@next/react-dev-overlay/node_modules/@babel/code-frame": { @@ -2514,9 +2517,9 @@ } }, "node_modules/@next/react-refresh-utils": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-10.2.3.tgz", - "integrity": "sha512-qtBF56vPC6d6a8p7LYd0iRjW89fhY80kAIzmj+VonvIGjK/nymBjcFUhbKiMFqlhsarCksnhwX+Zmn95Dw9qvA==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.1.2.tgz", + "integrity": "sha512-hsoJmPfhVqjZ8w4IFzoo8SyECVnN+8WMnImTbTKrRUHOVJcYMmKLL7xf7T0ft00tWwAl/3f3Q3poWIN2Ueql/Q==", "dev": true, "peerDependencies": { "react-refresh": "0.8.3", @@ -2528,6 +2531,79 @@ } } }, + "node_modules/@next/swc-darwin-arm64": { + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-11.1.2.tgz", + "integrity": "sha512-hZuwOlGOwBZADA8EyDYyjx3+4JGIGjSHDHWrmpI7g5rFmQNltjlbaefAbiU5Kk7j3BUSDwt30quJRFv3nyJQ0w==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-11.1.2.tgz", + "integrity": "sha512-PGOp0E1GisU+EJJlsmJVGE+aPYD0Uh7zqgsrpD3F/Y3766Ptfbe1lEPPWnRDl+OzSSrSrX1lkyM/Jlmh5OwNvA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-11.1.2.tgz", + "integrity": "sha512-YcDHTJjn/8RqvyJVB6pvEKXihDcdrOwga3GfMv/QtVeLphTouY4BIcEUfrG5+26Nf37MP1ywN3RRl1TxpurAsQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-11.1.2.tgz", + "integrity": "sha512-e/pIKVdB+tGQYa1cW3sAeHm8gzEri/HYLZHT4WZojrUxgWXqx8pk7S7Xs47uBcFTqBDRvK3EcQpPLf3XdVsDdg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@node-rs/helper": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@node-rs/helper/-/helper-1.2.1.tgz", + "integrity": "sha512-R5wEmm8nbuQU0YGGmYVjEc0OHtYsuXdpRG+Ut/3wZ9XAvQWyThN08bTh2cBJgoZxHQUPtvRfeQuxcAgLuiBISg==", + "dev": true, + "dependencies": { + "@napi-rs/triples": "^1.0.3" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2588,27 +2664,6 @@ "node": ">=10" } }, - "node_modules/@opentelemetry/api": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-0.14.0.tgz", - "integrity": "sha512-L7RMuZr5LzMmZiQSQDy9O1jo0q+DaLy6XpYJfIGfYSfoJA5qzYwUP3sP1uMIQ549DvxAgM3ng85EaPTM/hUHwQ==", - "dev": true, - "dependencies": { - "@opentelemetry/context-base": "^0.14.0" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/@opentelemetry/context-base": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.14.0.tgz", - "integrity": "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==", - "dev": true, - "engines": { - "node": ">=8.0.0" - } - }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz", @@ -8784,27 +8839,32 @@ } }, "node_modules/cssnano-preset-simple": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-2.0.0.tgz", - "integrity": "sha512-HkufSLkaBJbKBFx/7aj5HmCK9Ni/JedRQm0mT2qBzMG/dEuJOLnMt2lK6K1rwOOyV4j9aSY+knbW9WoS7BYpzg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz", + "integrity": "sha512-vxQPeoMRqUT3c/9f0vWeVa2nKQIHFpogtoBvFdW4GQ3IvEJ6uauCP6p3Y5zQDLFcI7/+40FTgX12o7XUL0Ko+w==", "dev": true, "dependencies": { "caniuse-lite": "^1.0.30001202" }, "peerDependencies": { - "postcss": "^8.2.1" + "postcss": "^8.2.15" } }, "node_modules/cssnano-simple": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/cssnano-simple/-/cssnano-simple-2.0.0.tgz", - "integrity": "sha512-0G3TXaFxlh/szPEG/o3VcmCwl0N3E60XNb9YZZijew5eIs6fLjJuOPxQd9yEBaX2p/YfJtt49i4vYi38iH6/6w==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssnano-simple/-/cssnano-simple-3.0.0.tgz", + "integrity": "sha512-oU3ueli5Dtwgh0DyeohcIEE00QVfbPR3HzyXdAl89SfnQG3y0/qcpfLVW+jPIh3/rgMZGwuW96rejZGaYE9eUg==", "dev": true, "dependencies": { - "cssnano-preset-simple": "^2.0.0" + "cssnano-preset-simple": "^3.0.0" }, "peerDependencies": { - "postcss": "^8.2.2" + "postcss": "^8.2.15" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + } } }, "node_modules/cssnano-util-get-arguments": { @@ -12131,6 +12191,21 @@ "node": ">= 4" } }, + "node_modules/image-size": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz", + "integrity": "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==", + "dev": true, + "dependencies": { + "queue": "6.0.2" + }, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/immer": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", @@ -13637,7 +13712,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -13693,7 +13767,6 @@ "version": "0.16.0", "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.16.0.tgz", "integrity": "sha512-R5chQb550S+znoZPAJTHRqAOq6NiMCr4Pm8C0irPBNPEjx3Oarvqt+dbiFu4DWaSR2bMh2iOj0IgtOepoPDdaQ==", - "dev": true, "peerDependencies": { "prop-types": "^15.7.2", "react": "^16.5.1 || ^17.0.0" @@ -14294,18 +14367,18 @@ "dev": true }, "node_modules/next": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/next/-/next-10.2.3.tgz", - "integrity": "sha512-dkM1mIfnORtGyzw/Yme8RdqNxlCMZyi4Lqj56F01/yHbe1ZtOaJ0cyqqRB4RGiPhjGGh0319f8ddjDyO1605Ow==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/next/-/next-11.1.2.tgz", + "integrity": "sha512-azEYL0L+wFjv8lstLru3bgvrzPvK0P7/bz6B/4EJ9sYkXeW8r5Bjh78D/Ol7VOg0EIPz0CXoe72hzAlSAXo9hw==", "dev": true, "dependencies": { - "@babel/runtime": "7.12.5", + "@babel/runtime": "7.15.3", "@hapi/accept": "5.0.2", - "@next/env": "10.2.3", - "@next/polyfill-module": "10.2.3", - "@next/react-dev-overlay": "10.2.3", - "@next/react-refresh-utils": "10.2.3", - "@opentelemetry/api": "0.14.0", + "@next/env": "11.1.2", + "@next/polyfill-module": "11.1.2", + "@next/react-dev-overlay": "11.1.2", + "@next/react-refresh-utils": "11.1.2", + "@node-rs/helper": "1.2.1", "assert": "2.0.0", "ast-types": "0.13.2", "browserify-zlib": "0.2.0", @@ -14316,13 +14389,14 @@ "chokidar": "3.5.1", "constants-browserify": "1.0.0", "crypto-browserify": "3.12.0", - "cssnano-simple": "2.0.0", + "cssnano-simple": "3.0.0", "domain-browser": "4.19.0", "encoding": "0.1.13", "etag": "1.8.1", "find-cache-dir": "3.3.1", "get-orientation": "1.1.2", "https-browserify": "1.0.0", + "image-size": "1.0.0", "jest-worker": "27.0.0-next.5", "native-url": "0.3.4", "node-fetch": "2.6.1", @@ -14332,21 +14406,20 @@ "p-limit": "3.1.0", "path-browserify": "1.0.1", "pnp-webpack-plugin": "1.6.4", - "postcss": "8.2.13", + "postcss": "8.2.15", "process": "0.11.10", - "prop-types": "15.7.2", "querystring-es3": "0.2.1", "raw-body": "2.4.1", - "react-is": "16.13.1", + "react-is": "17.0.2", "react-refresh": "0.8.3", "stream-browserify": "3.0.0", "stream-http": "3.1.1", "string_decoder": "1.3.0", - "styled-jsx": "3.3.2", + "styled-jsx": "4.0.1", "timers-browserify": "2.0.12", "tty-browserify": "0.0.1", "use-subscription": "1.5.1", - "util": "0.12.3", + "util": "0.12.4", "vm-browserify": "1.1.2", "watchpack": "2.1.1" }, @@ -14354,13 +14427,19 @@ "next": "dist/bin/next" }, "engines": { - "node": ">=10.13.0" + "node": ">=12.0.0" + }, + "optionalDependencies": { + "@next/swc-darwin-arm64": "11.1.2", + "@next/swc-darwin-x64": "11.1.2", + "@next/swc-linux-x64-gnu": "11.1.2", + "@next/swc-win32-x64-msvc": "11.1.2" }, "peerDependencies": { "fibers": ">= 3.1.0", "node-sass": "^4.0.0 || ^5.0.0", - "react": "^16.6.0 || ^17", - "react-dom": "^16.6.0 || ^17", + "react": "^17.0.2", + "react-dom": "^17.0.2", "sass": "^1.3.0" }, "peerDependenciesMeta": { @@ -14375,15 +14454,6 @@ } } }, - "node_modules/next/node_modules/@babel/runtime": { - "version": "7.12.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz", - "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==", - "dev": true, - "dependencies": { - "regenerator-runtime": "^0.13.4" - } - }, "node_modules/next/node_modules/ast-types": { "version": "0.13.2", "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.2.tgz", @@ -14547,13 +14617,13 @@ } }, "node_modules/next/node_modules/postcss": { - "version": "8.2.13", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz", - "integrity": "sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==", + "version": "8.2.15", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz", + "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==", "dev": true, "dependencies": { "colorette": "^1.2.2", - "nanoid": "^3.1.22", + "nanoid": "^3.1.23", "source-map": "^0.6.1" }, "engines": { @@ -14579,12 +14649,6 @@ "node": ">= 0.8" } }, - "node_modules/next/node_modules/react-is": { - "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 - }, "node_modules/next/node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -14943,7 +15007,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -16615,7 +16678,6 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -16625,8 +16687,7 @@ "node_modules/prop-types/node_modules/react-is": { "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 + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/property-information": { "version": "5.6.0", @@ -16827,6 +16888,15 @@ "node": ">=0.4.x" } }, + "node_modules/queue": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", + "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "dev": true, + "dependencies": { + "inherits": "~2.0.3" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -16968,14 +17038,12 @@ } }, "node_modules/react": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", - "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", - "dev": true, + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", + "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" + "object-assign": "^4.1.1" }, "engines": { "node": ">=0.10.0" @@ -17191,18 +17259,17 @@ "dev": true }, "node_modules/react-dom": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", - "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", + "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.19.1" + "scheduler": "^0.20.2" }, "peerDependencies": { - "react": "^16.14.0" + "react": "17.0.2" } }, "node_modules/react-draggable": { @@ -18526,9 +18593,9 @@ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" }, "node_modules/scheduler": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", - "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", "dev": true, "dependencies": { "loose-envify": "^1.1.0", @@ -19686,13 +19753,13 @@ } }, "node_modules/styled-jsx": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.3.2.tgz", - "integrity": "sha512-daAkGd5mqhbBhLd6jYAjYBa9LpxYCzsgo/f6qzPdFxVB8yoGbhxvzQgkC0pfmCVvW3JuAEBn0UzFLBfkHVZG1g==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-4.0.1.tgz", + "integrity": "sha512-Gcb49/dRB1k8B4hdK8vhW27Rlb2zujCk1fISrizCcToIs+55B4vmUM0N9Gi4nnVfFZWe55jRdWpAqH1ldAKWvQ==", "dev": true, "dependencies": { - "@babel/types": "7.8.3", - "babel-plugin-syntax-jsx": "6.18.0", + "@babel/plugin-syntax-jsx": "7.14.5", + "@babel/types": "7.15.0", "convert-source-map": "1.7.0", "loader-utils": "1.2.3", "source-map": "0.7.3", @@ -19700,19 +19767,16 @@ "stylis": "3.5.4", "stylis-rule-sheet": "0.0.10" }, + "engines": { + "node": ">= 12.0.0" + }, "peerDependencies": { - "react": "15.x.x || 16.x.x || 17.x.x" - } - }, - "node_modules/styled-jsx/node_modules/@babel/types": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.3.tgz", - "integrity": "sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==", - "dev": true, - "dependencies": { - "esutils": "^2.0.2", - "lodash": "^4.17.13", - "to-fast-properties": "^2.0.0" + "react": ">= 16.8.0 || 17.x.x || 18.x.x" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + } } }, "node_modules/styled-jsx/node_modules/convert-source-map": { @@ -21421,9 +21485,9 @@ } }, "node_modules/util": { - "version": "0.12.3", - "resolved": "https://registry.npmjs.org/util/-/util-0.12.3.tgz", - "integrity": "sha512-I8XkoQwE+fPQEhy9v012V+TSdH2kp9ts29i20TaaDUXsg7x/onePbhFJUExBfv/2ay1ZOp/Vsm3nDlmnFGSAog==", + "version": "0.12.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz", + "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==", "dev": true, "dependencies": { "inherits": "^2.0.3", @@ -23101,9 +23165,9 @@ } }, "@babel/helper-validator-identifier": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz", - "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==" + "version": "7.15.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", + "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==" }, "@babel/helper-validator-option": { "version": "7.14.5", @@ -24029,9 +24093,9 @@ } }, "@babel/runtime": { - "version": "7.14.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz", - "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==", + "version": "7.15.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz", + "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==", "dev": true, "requires": { "regenerator-runtime": "^0.13.4" @@ -24066,12 +24130,12 @@ } }, "@babel/types": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz", - "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==", + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz", + "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==", "dev": true, "requires": { - "@babel/helper-validator-identifier": "^7.14.5", + "@babel/helper-validator-identifier": "^7.14.9", "to-fast-properties": "^2.0.0" } }, @@ -24527,22 +24591,28 @@ } } }, + "@napi-rs/triples": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz", + "integrity": "sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==", + "dev": true + }, "@next/env": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/env/-/env-10.2.3.tgz", - "integrity": "sha512-uBOjRBjsWC4C8X3DfmWWP6ekwLnf2JCCwQX9KVnJtJkqfDsv1yQPakdOEwvJzXQc3JC/v5KKffYPVmV2wHXCgQ==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/env/-/env-11.1.2.tgz", + "integrity": "sha512-+fteyVdQ7C/OoulfcF6vd1Yk0FEli4453gr8kSFbU8sKseNSizYq6df5MKz/AjwLptsxrUeIkgBdAzbziyJ3mA==", "dev": true }, "@next/polyfill-module": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-10.2.3.tgz", - "integrity": "sha512-OkeY4cLhzfYbXxM4fd+6V4s5pTPuyfKSlavItfNRA6PpS7t1/R6YjO7S7rB8tu1pbTGuDHGIdE1ioDv15bAbDQ==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.1.2.tgz", + "integrity": "sha512-xZmixqADM3xxtqBV0TpAwSFzWJP0MOQzRfzItHXf1LdQHWb0yofHHC+7eOrPFic8+ZGz5y7BdPkkgR1S25OymA==", "dev": true }, "@next/react-dev-overlay": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-10.2.3.tgz", - "integrity": "sha512-E6g2jws4YW94l0lMMopBVKIZK2mEHfSBvM0d9dmzKG9L/A/kEq6LZCB4SiwGJbNsAdlk2y3USDa0oNbpA+m5Kw==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-11.1.2.tgz", + "integrity": "sha512-rDF/mGY2NC69mMg2vDqzVpCOlWqnwPUXB2zkARhvknUHyS6QJphPYv9ozoPJuoT/QBs49JJd9KWaAzVBvq920A==", "dev": true, "requires": { "@babel/code-frame": "7.12.11", @@ -24613,12 +24683,49 @@ } }, "@next/react-refresh-utils": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-10.2.3.tgz", - "integrity": "sha512-qtBF56vPC6d6a8p7LYd0iRjW89fhY80kAIzmj+VonvIGjK/nymBjcFUhbKiMFqlhsarCksnhwX+Zmn95Dw9qvA==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.1.2.tgz", + "integrity": "sha512-hsoJmPfhVqjZ8w4IFzoo8SyECVnN+8WMnImTbTKrRUHOVJcYMmKLL7xf7T0ft00tWwAl/3f3Q3poWIN2Ueql/Q==", "dev": true, "requires": {} }, + "@next/swc-darwin-arm64": { + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-11.1.2.tgz", + "integrity": "sha512-hZuwOlGOwBZADA8EyDYyjx3+4JGIGjSHDHWrmpI7g5rFmQNltjlbaefAbiU5Kk7j3BUSDwt30quJRFv3nyJQ0w==", + "dev": true, + "optional": true + }, + "@next/swc-darwin-x64": { + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-11.1.2.tgz", + "integrity": "sha512-PGOp0E1GisU+EJJlsmJVGE+aPYD0Uh7zqgsrpD3F/Y3766Ptfbe1lEPPWnRDl+OzSSrSrX1lkyM/Jlmh5OwNvA==", + "dev": true, + "optional": true + }, + "@next/swc-linux-x64-gnu": { + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-11.1.2.tgz", + "integrity": "sha512-YcDHTJjn/8RqvyJVB6pvEKXihDcdrOwga3GfMv/QtVeLphTouY4BIcEUfrG5+26Nf37MP1ywN3RRl1TxpurAsQ==", + "dev": true, + "optional": true + }, + "@next/swc-win32-x64-msvc": { + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-11.1.2.tgz", + "integrity": "sha512-e/pIKVdB+tGQYa1cW3sAeHm8gzEri/HYLZHT4WZojrUxgWXqx8pk7S7Xs47uBcFTqBDRvK3EcQpPLf3XdVsDdg==", + "dev": true, + "optional": true + }, + "@node-rs/helper": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@node-rs/helper/-/helper-1.2.1.tgz", + "integrity": "sha512-R5wEmm8nbuQU0YGGmYVjEc0OHtYsuXdpRG+Ut/3wZ9XAvQWyThN08bTh2cBJgoZxHQUPtvRfeQuxcAgLuiBISg==", + "dev": true, + "requires": { + "@napi-rs/triples": "^1.0.3" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -24663,21 +24770,6 @@ } } }, - "@opentelemetry/api": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-0.14.0.tgz", - "integrity": "sha512-L7RMuZr5LzMmZiQSQDy9O1jo0q+DaLy6XpYJfIGfYSfoJA5qzYwUP3sP1uMIQ549DvxAgM3ng85EaPTM/hUHwQ==", - "dev": true, - "requires": { - "@opentelemetry/context-base": "^0.14.0" - } - }, - "@opentelemetry/context-base": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.14.0.tgz", - "integrity": "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==", - "dev": true - }, "@pmmmwh/react-refresh-webpack-plugin": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz", @@ -29532,21 +29624,21 @@ } }, "cssnano-preset-simple": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-2.0.0.tgz", - "integrity": "sha512-HkufSLkaBJbKBFx/7aj5HmCK9Ni/JedRQm0mT2qBzMG/dEuJOLnMt2lK6K1rwOOyV4j9aSY+knbW9WoS7BYpzg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz", + "integrity": "sha512-vxQPeoMRqUT3c/9f0vWeVa2nKQIHFpogtoBvFdW4GQ3IvEJ6uauCP6p3Y5zQDLFcI7/+40FTgX12o7XUL0Ko+w==", "dev": true, "requires": { "caniuse-lite": "^1.0.30001202" } }, "cssnano-simple": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/cssnano-simple/-/cssnano-simple-2.0.0.tgz", - "integrity": "sha512-0G3TXaFxlh/szPEG/o3VcmCwl0N3E60XNb9YZZijew5eIs6fLjJuOPxQd9yEBaX2p/YfJtt49i4vYi38iH6/6w==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssnano-simple/-/cssnano-simple-3.0.0.tgz", + "integrity": "sha512-oU3ueli5Dtwgh0DyeohcIEE00QVfbPR3HzyXdAl89SfnQG3y0/qcpfLVW+jPIh3/rgMZGwuW96rejZGaYE9eUg==", "dev": true, "requires": { - "cssnano-preset-simple": "^2.0.0" + "cssnano-preset-simple": "^3.0.0" } }, "cssnano-util-get-arguments": { @@ -32207,6 +32299,15 @@ "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==", "dev": true }, + "image-size": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz", + "integrity": "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==", + "dev": true, + "requires": { + "queue": "6.0.2" + } + }, "immer": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", @@ -33320,7 +33421,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -33363,7 +33463,6 @@ "version": "0.16.0", "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.16.0.tgz", "integrity": "sha512-R5chQb550S+znoZPAJTHRqAOq6NiMCr4Pm8C0irPBNPEjx3Oarvqt+dbiFu4DWaSR2bMh2iOj0IgtOepoPDdaQ==", - "dev": true, "requires": {} }, "make-dir": { @@ -33851,18 +33950,22 @@ "dev": true }, "next": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/next/-/next-10.2.3.tgz", - "integrity": "sha512-dkM1mIfnORtGyzw/Yme8RdqNxlCMZyi4Lqj56F01/yHbe1ZtOaJ0cyqqRB4RGiPhjGGh0319f8ddjDyO1605Ow==", + "version": "11.1.2", + "resolved": "https://registry.npmjs.org/next/-/next-11.1.2.tgz", + "integrity": "sha512-azEYL0L+wFjv8lstLru3bgvrzPvK0P7/bz6B/4EJ9sYkXeW8r5Bjh78D/Ol7VOg0EIPz0CXoe72hzAlSAXo9hw==", "dev": true, "requires": { - "@babel/runtime": "7.12.5", + "@babel/runtime": "7.15.3", "@hapi/accept": "5.0.2", - "@next/env": "10.2.3", - "@next/polyfill-module": "10.2.3", - "@next/react-dev-overlay": "10.2.3", - "@next/react-refresh-utils": "10.2.3", - "@opentelemetry/api": "0.14.0", + "@next/env": "11.1.2", + "@next/polyfill-module": "11.1.2", + "@next/react-dev-overlay": "11.1.2", + "@next/react-refresh-utils": "11.1.2", + "@next/swc-darwin-arm64": "11.1.2", + "@next/swc-darwin-x64": "11.1.2", + "@next/swc-linux-x64-gnu": "11.1.2", + "@next/swc-win32-x64-msvc": "11.1.2", + "@node-rs/helper": "1.2.1", "assert": "2.0.0", "ast-types": "0.13.2", "browserify-zlib": "0.2.0", @@ -33873,13 +33976,14 @@ "chokidar": "3.5.1", "constants-browserify": "1.0.0", "crypto-browserify": "3.12.0", - "cssnano-simple": "2.0.0", + "cssnano-simple": "3.0.0", "domain-browser": "4.19.0", "encoding": "0.1.13", "etag": "1.8.1", "find-cache-dir": "3.3.1", "get-orientation": "1.1.2", "https-browserify": "1.0.0", + "image-size": "1.0.0", "jest-worker": "27.0.0-next.5", "native-url": "0.3.4", "node-fetch": "2.6.1", @@ -33889,34 +33993,24 @@ "p-limit": "3.1.0", "path-browserify": "1.0.1", "pnp-webpack-plugin": "1.6.4", - "postcss": "8.2.13", + "postcss": "8.2.15", "process": "0.11.10", - "prop-types": "15.7.2", "querystring-es3": "0.2.1", "raw-body": "2.4.1", - "react-is": "16.13.1", + "react-is": "17.0.2", "react-refresh": "0.8.3", "stream-browserify": "3.0.0", "stream-http": "3.1.1", "string_decoder": "1.3.0", - "styled-jsx": "3.3.2", + "styled-jsx": "4.0.1", "timers-browserify": "2.0.12", "tty-browserify": "0.0.1", "use-subscription": "1.5.1", - "util": "0.12.3", + "util": "0.12.4", "vm-browserify": "1.1.2", "watchpack": "2.1.1" }, "dependencies": { - "@babel/runtime": { - "version": "7.12.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz", - "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==", - "dev": true, - "requires": { - "regenerator-runtime": "^0.13.4" - } - }, "ast-types": { "version": "0.13.2", "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.2.tgz", @@ -34037,13 +34131,13 @@ } }, "postcss": { - "version": "8.2.13", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz", - "integrity": "sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==", + "version": "8.2.15", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz", + "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==", "dev": true, "requires": { "colorette": "^1.2.2", - "nanoid": "^3.1.22", + "nanoid": "^3.1.23", "source-map": "^0.6.1" } }, @@ -34059,12 +34153,6 @@ "unpipe": "1.0.0" } }, - "react-is": { - "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 - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -34386,8 +34474,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -35704,7 +35791,6 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -35714,8 +35800,7 @@ "react-is": { "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 + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" } } }, @@ -35886,6 +35971,15 @@ "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=", "dev": true }, + "queue": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", + "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "dev": true, + "requires": { + "inherits": "~2.0.3" + } + }, "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -35987,14 +36081,12 @@ } }, "react": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", - "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", - "dev": true, + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", + "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" + "object-assign": "^4.1.1" } }, "react-colorful": { @@ -36160,15 +36252,14 @@ "requires": {} }, "react-dom": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", - "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", + "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.19.1" + "scheduler": "^0.20.2" } }, "react-draggable": { @@ -37206,9 +37297,9 @@ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" }, "scheduler": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", - "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", "dev": true, "requires": { "loose-envify": "^1.1.0", @@ -38164,13 +38255,13 @@ } }, "styled-jsx": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.3.2.tgz", - "integrity": "sha512-daAkGd5mqhbBhLd6jYAjYBa9LpxYCzsgo/f6qzPdFxVB8yoGbhxvzQgkC0pfmCVvW3JuAEBn0UzFLBfkHVZG1g==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-4.0.1.tgz", + "integrity": "sha512-Gcb49/dRB1k8B4hdK8vhW27Rlb2zujCk1fISrizCcToIs+55B4vmUM0N9Gi4nnVfFZWe55jRdWpAqH1ldAKWvQ==", "dev": true, "requires": { - "@babel/types": "7.8.3", - "babel-plugin-syntax-jsx": "6.18.0", + "@babel/plugin-syntax-jsx": "7.14.5", + "@babel/types": "7.15.0", "convert-source-map": "1.7.0", "loader-utils": "1.2.3", "source-map": "0.7.3", @@ -38179,17 +38270,6 @@ "stylis-rule-sheet": "0.0.10" }, "dependencies": { - "@babel/types": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.3.tgz", - "integrity": "sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==", - "dev": true, - "requires": { - "esutils": "^2.0.2", - "lodash": "^4.17.13", - "to-fast-properties": "^2.0.0" - } - }, "convert-source-map": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", @@ -39481,9 +39561,9 @@ } }, "util": { - "version": "0.12.3", - "resolved": "https://registry.npmjs.org/util/-/util-0.12.3.tgz", - "integrity": "sha512-I8XkoQwE+fPQEhy9v012V+TSdH2kp9ts29i20TaaDUXsg7x/onePbhFJUExBfv/2ay1ZOp/Vsm3nDlmnFGSAog==", + "version": "0.12.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz", + "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==", "dev": true, "requires": { "inherits": "^2.0.3", diff --git a/package.json b/package.json index 42ba7ee..cf9d495 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,9 @@ "@types/react-dom": "^17.0.1", "babel-loader": "^8.2.2", "css-loader": "^5.0.2", - "lucide-react": "^0.16.0", - "next": "^10.0.0", - "react": "^16.0.0", - "react-dom": "^16.0.0", + "next": "^11.0.0", + "react": "^17.0.0", + "react-dom": "^17.0.0", "style-loader": "^2.0.0", "stylus": "^0.55.0", "stylus-loader": "^4.3.3", @@ -28,12 +27,9 @@ "webpack": "^4.44.2" }, "peerDependencies": { - "lucide-react": "^0.16.0", - "next": "^10.0.0 || ^11.0.0", - "react": "^16.0.0 || ^17.0.0", - "react-dom": "^16.0.0 || ^17.0.0", - "stylus": "^0.55.0", - "typescript": "^4.0.0" + "next": "^11.0.0", + "react": "^17.0.0", + "react-dom": "^17.0.0" }, "scripts": { "dev": "start-storybook -s ./.storybook/public -p 6006", @@ -42,6 +38,7 @@ "postinstall": "rollup --config" }, "dependencies": { + "lucide-react": "^0.16.0", "rollup": "^2.44.0", "rollup-plugin-styles": "^3.14.1", "rollup-plugin-typescript2": "^0.30.0", diff --git a/src/dzeio/Box/index.tsx b/src/dzeio/Box/index.tsx index 66d0821..712fe31 100644 --- a/src/dzeio/Box/index.tsx +++ b/src/dzeio/Box/index.tsx @@ -6,8 +6,7 @@ import css from './Box.module.styl' import Row from '../Row' import Col from '../Col' import Text from '../Text' -import { Icon } from 'lucide-react' -import { ColorType } from '../interfaces' +import { Icon } from '../interfaces' interface Props extends React.DetailedHTMLProps, HTMLDivElement> { noPadding?: boolean diff --git a/src/dzeio/Button/Button.module.styl b/src/dzeio/Button/Button.module.styl index f6cc76e..b1a61d9 100644 --- a/src/dzeio/Button/Button.module.styl +++ b/src/dzeio/Button/Button.module.styl @@ -31,20 +31,37 @@ background transparent color @background-color + &:not(:disabled) + &:hover + &:active + &:focus + color $textOnMain + &:hover + box-shadow none + + &.ghost + background transparent + color black + @media (prefers-color-scheme dark) + color white + + &:hover + box-shadow none + background-color rgba($main, .25) + &:active &:focus - color $textOnMain + background-color $main &:hover background-color @background-color - transform translateY(-2px) - box-shadow 0 4px 4px rgba(@background-color,.2) + box-shadow 0 0 0 4px rgba(@background-color,.2) &:active &:focus background-color darken(@background-color, 30%) - + &.block display flex width 100% @@ -69,20 +86,22 @@ margin-top 0 &:disabled - background $grayLight - color $grayDark + background $lightGrayLight + color $darkGrayLight transform none box-shadow none cursor initial + @media (prefers-color-scheme dark) + background $lightGrayDark + color $darkGrayDark + &.outline - border 2px solid @grayDark + border 2px solid @color background transparent - color @grayDark @media (prefers-color-scheme dark) - border 2px solid @grayLight - color @grayLight + border 2px solid $darkGrayDark &.loading color transparent @@ -101,7 +120,13 @@ border-radius 100% height 1em box-sizing inherit - animation ButtonLoading 1s infinite linear + animation ButtonLoading .75s infinite linear + + &:disabled::after + border-color transparent transparent $darkGrayLight $darkGrayLight + @media (prefers-color-scheme dark) + border-color transparent transparent $darkGrayDark $darkGrayDark + .textInner margin-left 8px @@ -137,6 +162,19 @@ btn($color, $theme) &:focus background-color darken(@color, 30%) + + &.ghost + background transparent + color $textColor + + &:hover + box-shadow none + background-color rgba($color, .25) + + &:active + &:focus + background-color $color + &:hover background-color @background-color box-shadow 0 4px 4px rgba(@background-color,.2) @@ -181,4 +219,4 @@ btn($color, $theme) transform rotate(365deg) .img - min-width 16px \ No newline at end of file + min-width 16px diff --git a/src/dzeio/Button/Button.stories.tsx b/src/dzeio/Button/Button.stories.tsx index cf76433..ddf0d11 100644 --- a/src/dzeio/Button/Button.stories.tsx +++ b/src/dzeio/Button/Button.stories.tsx @@ -1,6 +1,7 @@ import { Meta } from '@storybook/react/types-6-0' import React from 'react' import { Zap } from 'lucide-react' +import Box from '../Box' import Component from '.' export default { @@ -8,7 +9,7 @@ export default { component: Component } as Meta -export const Basic = (args: any) => Button +export const Basic = (args: any) => Button Basic.args = { nomargintop: true, icon: Zap, @@ -16,7 +17,7 @@ Basic.args = { block: true } -export const WithImg = (args: any) => Button +export const WithImg = (args: any) => Button WithImg.args = { nomargintop: true, icon: '/16-16.svg', @@ -24,7 +25,7 @@ WithImg.args = { block: true } -export const ExternalLinkButton = (args: any) => Button +export const ExternalLinkButton = (args: any) => Button ExternalLinkButton.args = { nomargintop: true, href: 'https://example.com', diff --git a/src/dzeio/Button/index.tsx b/src/dzeio/Button/index.tsx index 06b4446..b353182 100644 --- a/src/dzeio/Button/index.tsx +++ b/src/dzeio/Button/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react' import Link from '../Link' -import { ColorType, IconProps } from '../interfaces' +import { ColorType, Icon } from '../interfaces' import { buildClassName } from '../Util' import Image from '../Image' @@ -9,12 +9,12 @@ import css from './Button.module.styl' // MAKE OUTLINE use Fieldset instead of the current one xd interface Props { - outline?: boolean nomargintop?: boolean color?: ColorType children?: React.ReactNode - icon?: FC | string + icon?: Icon | string size?: 'large' | 'small' + type?: 'outline' | 'ghost' block?: boolean href?: string as?: string @@ -29,7 +29,7 @@ export default class Button extends React.Component { let inner: any = this.props.children - if (!this.props.loading && this.props.icon) { + if (this.props.icon) { const Icon = this.props.icon inner = ( <> @@ -48,16 +48,16 @@ export default class Button extends React.Component { const classes = buildClassName( [css.button], [css[this.props.color as string], this.props.color], - [css.outline, this.props.outline], + [css[this.props.type as string], this.props.type], [css.block, this.props.block], [css[this.props.size as string], this.props.size], [css.nomargintop, this.props.nomargintop], [css.loading, this.props.loading] ) - if (this.props.href) { + if (this.props.href && !this.props.disabled) { return ( - + {inner} ) diff --git a/src/dzeio/Code/Code.module.styl b/src/dzeio/Code/Code.module.styl index 53151c2..3addbe4 100644 --- a/src/dzeio/Code/Code.module.styl +++ b/src/dzeio/Code/Code.module.styl @@ -1,12 +1,14 @@ +@import "../config.styl" + .code - background #E8EAF6 - padding 4px +.pre + background $lightGrayLight + padding 4px 8px border-radius 8px + @media (prefers-color-scheme dark) + background $lightGrayDark .pre - border-radius 8px - padding 4px 8px - background #E8EAF6 display block .code padding 0 diff --git a/src/dzeio/Footer/index.tsx b/src/dzeio/Footer/index.tsx index 3a7a4d2..a3ac13a 100644 --- a/src/dzeio/Footer/index.tsx +++ b/src/dzeio/Footer/index.tsx @@ -1,10 +1,10 @@ -import React, { FC } from 'react' +import React from 'react' import { Heart } from 'lucide-react' import Link from '../Link' -import { Icon } from 'lucide-react' import Text from '../Text' import css from './Footer.module.styl' import Image from 'next/image' +import { Icon } from '../interfaces' interface Props { text?: string diff --git a/src/dzeio/Input/Input.module.styl b/src/dzeio/Input/Input.module.styl index c015eb6..a85a99c 100644 --- a/src/dzeio/Input/Input.module.styl +++ b/src/dzeio/Input/Input.module.styl @@ -161,8 +161,13 @@ color @border-color ~ svg - &::placeholder color @border-color + &::placeholder + color black + + @media (prefers-color-scheme dark) + color white + &:invalid border-color $errorDark diff --git a/src/dzeio/Input/index.tsx b/src/dzeio/Input/index.tsx index 2f1c2d3..534b8c5 100644 --- a/src/dzeio/Input/index.tsx +++ b/src/dzeio/Input/index.tsx @@ -2,15 +2,15 @@ import React, { FC } from 'react' import { ChevronDown } from 'lucide-react' import Text from '../Text' -import { IconProps } from '../interfaces' +import { Icon } from '../interfaces' import { buildClassName } from '../Util' import css from './Input.module.styl' interface Props extends React.DetailedHTMLProps, HTMLInputElement> { id?: string label?: string - icon?: FC - iconRight?: FC + icon?: Icon + iconRight?: Icon helper?: string inputRef?: React.RefObject selectRef?: React.RefObject diff --git a/src/dzeio/Navbar/Navbar.module.styl b/src/dzeio/Navbar/Navbar.module.styl index d065959..a871a84 100644 --- a/src/dzeio/Navbar/Navbar.module.styl +++ b/src/dzeio/Navbar/Navbar.module.styl @@ -153,7 +153,7 @@ max-height 100% &.short - width 56px + width 88px .header > div padding 0 .header .imgContainer @@ -209,7 +209,8 @@ padding-left 16px height inherit -.navbar, .sidebar +.navbar +.sidebar ul list-style none margin 0 diff --git a/src/dzeio/Navbar/Navbar.stories.tsx b/src/dzeio/Navbar/Navbar.stories.tsx index 9b541b4..c45dfc7 100644 --- a/src/dzeio/Navbar/Navbar.stories.tsx +++ b/src/dzeio/Navbar/Navbar.stories.tsx @@ -1,41 +1,44 @@ -import { Meta, Story } from '@storybook/react/types-6-0' -import React from 'react' -import { Zap, ZapOff } from 'lucide-react' -import Component from '.' -import Text from '../Text' - -export default { - title: 'DZEIO/Navbar', - component: Component -} as Meta - -export const Basic: Story = (args: any) => -Basic.args = { - type: 'navbar', - logo: {src: '/90-38.svg', width: 90, height: 38}, - loginUrl: '/login', - registerUrl: '/register', - user: { - name: 'Username', - description: 'User Description', - menu: { - links: [{ - path: '/logout', - name: 'Logout' - }, { - path: '/logout', - name: 'Logout' - }], - informations: (Testing :D) - } - }, - items: [{ - path: '/dashboard', - name: 'Dasboard', - icon: Zap - }, { - path: '/dashboard', - name: 'Dasboard', - icon: ZapOff - }], -} +import { Meta, Story } from '@storybook/react/types-6-0' +import React from 'react' +import { Zap, ZapOff } from 'lucide-react' +import Component from '.' +import Text from '../Text' + +export default { + title: 'DZEIO/Navbar', + component: Component, + parameters: { + layout: 'fullscreen' + } +} as Meta + +export const Basic: Story = (args: any) => +Basic.args = { + type: 'navbar', + logo: {src: '/90-38.svg', width: 90, height: 38}, + loginUrl: '/login', + registerUrl: '/register', + user: { + name: 'Username', + description: 'User Description', + menu: { + links: [{ + path: '/logout', + name: 'Logout' + }, { + path: '/logout', + name: 'Logout' + }], + informations: (Testing :D) + } + }, + items: [{ + path: '/dashboard', + name: 'Dasboard', + icon: Zap + }, { + path: '/dashboard', + name: 'Dasboard', + icon: ZapOff + }], +} diff --git a/src/dzeio/Popup/Popup.module.styl b/src/dzeio/Popup/Popup.module.styl index 1fef2c6..c6a1857 100644 --- a/src/dzeio/Popup/Popup.module.styl +++ b/src/dzeio/Popup/Popup.module.styl @@ -6,9 +6,9 @@ width 100% top 0 left 0 - background rgba($backgroundLight, .7) + background rgba($lightGrayLight, .7) @media (prefers-color-scheme dark) - background rgba($backgroundDark, .7) + background rgba($lightGrayDark, .7) cursor pointer z-index 200 animation fadeIn .3s ease-in-out 1 forwards diff --git a/src/dzeio/Popup/Popup.stories.tsx b/src/dzeio/Popup/Popup.stories.tsx new file mode 100644 index 0000000..aaf4ce1 --- /dev/null +++ b/src/dzeio/Popup/Popup.stories.tsx @@ -0,0 +1,13 @@ +import { Meta } from '@storybook/react/types-6-0' +import React from 'react' +import Component from '.' +import Text from '../Text' + +export default { + title: 'DZEIO/Popup', + component: Component +} as Meta + +export const Basic = (args: any) => ( + Test +) diff --git a/src/dzeio/Popup/index.tsx b/src/dzeio/Popup/index.tsx index 5e005f8..e33d4e9 100644 --- a/src/dzeio/Popup/index.tsx +++ b/src/dzeio/Popup/index.tsx @@ -9,7 +9,7 @@ import css from './Popup.module.styl' interface Props { children: React.ReactNode onClose?: () => void - header?: Box['props'] + title?: string } export default class Popup extends React.Component { @@ -17,7 +17,7 @@ export default class Popup extends React.Component { public render = () => ( ev.stopPropagation()} rightHeader={ diff --git a/src/dzeio/Row/Row.module.styl b/src/dzeio/Row/Row.module.styl index 77de991..c2e220b 100644 --- a/src/dzeio/Row/Row.module.styl +++ b/src/dzeio/Row/Row.module.styl @@ -14,7 +14,9 @@ flex-wrap nowrap .nogrow > * + max-width initial flex-grow 0 + flex-basis initial for dir in 'row-reverse' 'column' 'column-reverse' .direction-{dir} diff --git a/src/dzeio/Table/Table.module.styl b/src/dzeio/Table/Table.module.styl index 626351d..231f8ed 100644 --- a/src/dzeio/Table/Table.module.styl +++ b/src/dzeio/Table/Table.module.styl @@ -6,16 +6,20 @@ tr $radius = 16px - td:first-child th:first-child border-top-left-radius $radius border-bottom-left-radius $radius - td:last-child th:last-child border-top-right-radius $radius border-bottom-right-radius $radius + &.horizontalBorders tr:not(:last-child) td + border-bottom 1px solid $darkGrayLight + + &.verticalBorders tr td:not(:first-child) + border-left 1px solid $darkGrayLight + th td padding 16px diff --git a/src/dzeio/Table/Table.stories.tsx b/src/dzeio/Table/Table.stories.tsx index ebc25a0..b69c864 100644 --- a/src/dzeio/Table/Table.stories.tsx +++ b/src/dzeio/Table/Table.stories.tsx @@ -1,5 +1,5 @@ import { Meta } from '@storybook/react/types-6-0' -import { Copyright, Settings } from 'lucide-react' +import { Settings } from 'lucide-react' import React from 'react' import Component from '.' import Box from '../Box' diff --git a/src/dzeio/Table/index.tsx b/src/dzeio/Table/index.tsx index e69238f..7713b84 100644 --- a/src/dzeio/Table/index.tsx +++ b/src/dzeio/Table/index.tsx @@ -7,13 +7,23 @@ interface Props { children: React.ReactNode parentClassName?: string className?: string + horizontalBorders?: boolean + verticalBorders?: boolean } export default class Table extends React.Component { public render = () => ( -
    - {this.props.children}
    +
    + {this.props.children}
    ) diff --git a/src/dzeio/_aileron.styl b/src/dzeio/_aileron.styl index fde3e54..85b6440 100644 --- a/src/dzeio/_aileron.styl +++ b/src/dzeio/_aileron.styl @@ -1,3 +1,6 @@ +// not used anymore +// kept if it is used again + $path = "/assets/fonts/aileron" @font-face diff --git a/src/dzeio/config.styl b/src/dzeio/config.styl index c915d99..e59aca9 100644 --- a/src/dzeio/config.styl +++ b/src/dzeio/config.styl @@ -7,14 +7,14 @@ $infoDark = #01579B $infoLight = #29B6F6 $successDark = #1B5E20 -$successLight = #4CAF50 +$successLight = #7CB342 $errorDark = #7F0000 $errorLight = #F44336 $warningDark = #C43E00 $warningLight = #FF9800 -// hsl($main) + $backgroundDark = darken($main, 92%) $backgroundLight = lighten($main, 94%) $foregroundDark = #202020 @@ -28,11 +28,6 @@ $lightGrayLight = #F4F4F4 $darkGrayDark = #444 $lightGrayDark = #AAA -// @deprecated -$grayLight = $darkGrayLight -$grayDark = $lightGrayLight - - $transitionTime = .15s $transitionFunction = ease-in-out $transition = $transitionTime $transitionFunction @@ -53,10 +48,6 @@ $gapSize = 16px rem($a) ($a / 16)rem -// @deprecated colors -$default = $main - - // See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717 use('stylusUtils.js') diff --git a/src/dzeio/general.styl b/src/dzeio/general.styl index 7db7c58..294a1b3 100644 --- a/src/dzeio/general.styl +++ b/src/dzeio/general.styl @@ -1,16 +1,14 @@ -@import "_aileron" +//@import "_aileron" @import "config" -* -*::before -*::after +body box-sizing border-box - font-family Aileron, -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif + font-family: ui-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif // Georgia,Cambria,"Times New Roman",Times,serif code, pre - font-family "Fira Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace; + font-family ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace; html body diff --git a/src/dzeio/interfaces.ts b/src/dzeio/interfaces.d.ts similarity index 69% rename from src/dzeio/interfaces.ts rename to src/dzeio/interfaces.d.ts index 5b6b632..9cda89f 100644 --- a/src/dzeio/interfaces.ts +++ b/src/dzeio/interfaces.d.ts @@ -1,4 +1,4 @@ -import { SVGAttributes } from 'react' +import { FC, SVGAttributes } from 'react' export type ColorType = 'info' | 'success' | 'error' | 'warning' @@ -6,3 +6,5 @@ export interface IconProps extends SVGAttributes { color?: string size?: string | number } + +export type Icon = FC diff --git a/tsconfig.json b/tsconfig.json index ebaa3da..04d98da 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { /* Basic Options */ - "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ + "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ // "lib": [], /* Specify library files to be included in the compilation. */ // "allowJs": true, /* Allow javascript files to be compiled. */ @@ -67,4 +67,4 @@ "build", "src/**/*.stories.tsx" ] -} \ No newline at end of file +} From b403a94a2ef08176439090cf00da91f8af921e16 Mon Sep 17 00:00:00 2001 From: Avior Date: Mon, 27 Sep 2021 15:48:04 +0200 Subject: [PATCH 004/102] Update Signed-off-by: Avior --- .storybook/next.js | 13 ++ package-lock.json | 11 ++ package.json | 1 + src/dzeio/Container/Container.module.styl | 8 +- src/dzeio/Container/index.tsx | 7 +- src/dzeio/Footer/Footer.module.styl | 12 +- src/dzeio/Footer/index.tsx | 50 +++--- src/dzeio/Input/Input.module.styl | 107 +++--------- src/dzeio/Input/Input.stories.tsx | 66 +++---- src/dzeio/Input/index.tsx | 200 +++++++++++++--------- src/dzeio/Menu/Menu.module.styl | 38 ++++ src/dzeio/Menu/Menu.stories.tsx | 26 +++ src/dzeio/Menu/index.tsx | 31 ++++ src/dzeio/Util.ts | 2 +- src/dzeio/general.styl | 15 +- src/index.ts | 4 +- 16 files changed, 358 insertions(+), 233 deletions(-) create mode 100644 src/dzeio/Menu/Menu.module.styl create mode 100644 src/dzeio/Menu/Menu.stories.tsx create mode 100644 src/dzeio/Menu/index.tsx diff --git a/.storybook/next.js b/.storybook/next.js index 9fe10c6..e98b651 100644 --- a/.storybook/next.js +++ b/.storybook/next.js @@ -18,6 +18,19 @@ module.exports = { }); newConfig.resolve.extensions.push('.ts', '.tsx'); + // JavaScript + newConfig.module.rules.push({ + test: /\.(js|jsx)$/, + // include: [path.resolve(__dirname, '../src/client/components')], + use: [{ + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env', '@babel/preset-react'] + } + }] + }); + newConfig.resolve.extensions.push('.js', '.jsx'); + // Stylus newConfig.module.rules.push({ test: /\.styl$/, diff --git a/package-lock.json b/package-lock.json index f49d87d..3457829 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { + "@dzeio/object-util": "^1.3.0", "lucide-react": "^0.16.0", "rollup": "^2.44.0", "rollup-plugin-styles": "^3.14.1", @@ -1871,6 +1872,11 @@ "node": ">=0.1.95" } }, + "node_modules/@dzeio/object-util": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@dzeio/object-util/-/object-util-1.3.0.tgz", + "integrity": "sha512-9pI7BdaS88NIM1RVP3pQ+oJoAPBtYJyInnIzFw3wE+j8W5eyTfudSQvkNoQW6SYrjxND7+IQRCMFwTor+lN5lA==" + }, "node_modules/@emotion/cache": { "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", @@ -24161,6 +24167,11 @@ "minimist": "^1.2.0" } }, + "@dzeio/object-util": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@dzeio/object-util/-/object-util-1.3.0.tgz", + "integrity": "sha512-9pI7BdaS88NIM1RVP3pQ+oJoAPBtYJyInnIzFw3wE+j8W5eyTfudSQvkNoQW6SYrjxND7+IQRCMFwTor+lN5lA==" + }, "@emotion/cache": { "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", diff --git a/package.json b/package.json index cf9d495..742d335 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "postinstall": "rollup --config" }, "dependencies": { + "@dzeio/object-util": "^1.3.0", "lucide-react": "^0.16.0", "rollup": "^2.44.0", "rollup-plugin-styles": "^3.14.1", diff --git a/src/dzeio/Container/Container.module.styl b/src/dzeio/Container/Container.module.styl index 8f4d70f..455f861 100644 --- a/src/dzeio/Container/Container.module.styl +++ b/src/dzeio/Container/Container.module.styl @@ -1,5 +1,7 @@ .container - margin 48px auto - padding 0 16px + padding 0 32px width 100% - max-width 1312px + max-width 1280px + @padding[1] * 2 + margin auto auto + &.main + margin 48px auto diff --git a/src/dzeio/Container/index.tsx b/src/dzeio/Container/index.tsx index 647b9d3..d27e652 100644 --- a/src/dzeio/Container/index.tsx +++ b/src/dzeio/Container/index.tsx @@ -6,14 +6,11 @@ import css from './Container.module.styl' interface Props { children: React.ReactNode className?: string + mainContainer?: boolean } export default class Container extends React.Component { - public render = () => ( -
    - {this.props.children} -
    - ) + public render = () => React.createElement(this.props.mainContainer ? 'main' : 'div', {className: buildClassName(css.container, this.props.className, [css.main, this.props.mainContainer]), children: this.props.children}) } diff --git a/src/dzeio/Footer/Footer.module.styl b/src/dzeio/Footer/Footer.module.styl index 753fbbc..1e37d23 100644 --- a/src/dzeio/Footer/Footer.module.styl +++ b/src/dzeio/Footer/Footer.module.styl @@ -1,7 +1,7 @@ @import '../config.styl' .footer - padding 16px + padding 24px 0 background $foregroundLight @media (prefers-color-scheme dark) background $foregroundDark @@ -9,14 +9,16 @@ ul padding 0 margin 0 - margin-top 12px display flex - justify-content center + justify-content right li display inline-block + padding-left 24px + + .icon + padding-left 16px + &:not(.icon) + .icon + padding-left 48px - &.socials a - padding 0 8px .animation animation grow 1s linear infinite diff --git a/src/dzeio/Footer/index.tsx b/src/dzeio/Footer/index.tsx index a3ac13a..fab640b 100644 --- a/src/dzeio/Footer/index.tsx +++ b/src/dzeio/Footer/index.tsx @@ -5,6 +5,9 @@ import Text from '../Text' import css from './Footer.module.styl' import Image from 'next/image' import { Icon } from '../interfaces' +import Container from '../Container' +import Row from '../Row' +import Col from '../Col' interface Props { text?: string @@ -22,27 +25,34 @@ interface Props { export default class Footer extends React.Component { public render = () => (
    - {this.props.text ? ( - {this.props.text} - ) : ( - Made with by {this.props.company || 'Dzeio'} - )} - {this.props.links && ( -
      {this.props.links.map((l, index) => ( -
    • {index !== 0 && (<> - )}{l.name}
      • - ))}
    - )} - {this.props.socials && ( -
      {this.props.socials.map((l, index) => ( -
    • - {typeof l.icon === 'string' ? ( - + + + + {this.props.text ? ( + {this.props.text} ) : ( - - )} -
      • - ))}
    - )} + Made with by {this.props.company || 'Dzeio'} + )} + + +
      + {this.props.links && this.props.links.map((l, index) => ( +
    • {l.name}
      • + ))} + {this.props.socials && this.props.socials.map((l, index) => ( +
    • + {typeof l.icon === 'string' ? ( + + ) : ( + + )} +
      • + ))} +
    + + + +
    ) } diff --git a/src/dzeio/Input/Input.module.styl b/src/dzeio/Input/Input.module.styl index a85a99c..8540789 100644 --- a/src/dzeio/Input/Input.module.styl +++ b/src/dzeio/Input/Input.module.styl @@ -15,6 +15,9 @@ color $darkGrayDark transition color $transition pointer-events none + &.iconClickable + pointer-events all + cursor pointer top 14px &.left left 16px // input padding-left @@ -51,52 +54,25 @@ /* End */ .autocomplete - display flex opacity 0 transition all $transition overflow-x hidden pointer-events none - // display flex - flex-direction column - list-style none position absolute - top calc(100% - 4px) + top calc(100% + 16px) left 0 width 100% z-index 100 - box-shadow 0 2px 4px rgba(black, .3) - margin 0 - padding 0 - background $foregroundLight - @media (prefers-color-scheme dark) - background $foregroundDark - - border-radius 8px max-height 25vh overflow-y auto @media (max-width $mobile) max-height 50vh &.reverse - flex-direction column-reverse top initial - bottom 100% - box-shadow 0 -4px 8px rgba(black, .3) - border-radius 0 - border-top-left-radius 4px - border-top-right-radius 4px - li - transition all $transition - padding 8px - @media (max-width $mobile) - padding 24px - cursor pointer - &:hover - background darken(@background, 20%) - @media (prefers-color-scheme dark) - background lighten(lighten($foregroundDark, 5%), 20%) + bottom calc(100% + 16px) div + .autocomplete - top calc(100% - 4px - .9em) + top 100% input:focus ~ .autocomplete select:focus ~ .autocomplete @@ -127,9 +103,13 @@ font-size rem(16) transition color $transition opacity 1 - color $darkGrayLight + // color $darkGrayLight + // @media (prefers-color-scheme dark) + // color $darkGrayDark + + color black @media (prefers-color-scheme dark) - color $darkGrayDark + color white &:disabled @@ -162,14 +142,14 @@ ~ svg color @border-color - &::placeholder - color black + // &::placeholder + // color black - @media (prefers-color-scheme dark) - color white + // @media (prefers-color-scheme dark) + // color white &:invalid - border-color $errorDark + border-color $errorLight ~ label color @border-color @@ -177,7 +157,7 @@ ~ svg color @border-color @media (prefers-color-scheme dark) - border-color $errorLight + border-color $errorDark ~ label color @border-color @@ -190,53 +170,7 @@ padding-left 16px + 24px + 10px &.iconRight padding-right 16 + 24 + 10px - &.filled - border none - background rgba(gray, .1) - border-radius @border-radius @border-radius 0 0 - border-bottom 2px solid rgba(black,.4) - @media (prefers-color-scheme dark) - background rgba(white, .1) - border-bottom 2px solid rgba(white,.4) - - &.opaque - background white - - @media (prefers-color-scheme dark) - background #202020 - - &:hover:not(:disabled) - background rgba(gray, .2) - - @media (prefers-color-scheme dark) - background rgba(white, .2) - - &.opaque - background darken(white, 5%) - @media (prefers-color-scheme dark) - background #1c1c1c - &:focus - background rgba(gray, .3) - border-bottom 2px solid $main - - &.opaque - background white - - @media (prefers-color-scheme dark) - background #202020 - - &:not(:placeholder-shown) - &:focus - &:not([placeholder=" "]) - ~ label - top 3px - left 16px - 4px // .input/padding-left label/padding-left - background transparent - padding 0 - font-size .75rem - ~ svg.left ~ label - left 16px + 24px + 10px // .input/padding-left label/padding-left ~ svg.rotate transform rotateX(0) transition $transition @@ -249,6 +183,9 @@ padding 0 8px font-size rem(14) - &.block, &.block input, &.block select, &.block textarea + &.block + &.block input + &.block select + &.block textarea width 100% display block diff --git a/src/dzeio/Input/Input.stories.tsx b/src/dzeio/Input/Input.stories.tsx index ad5baf0..879757e 100644 --- a/src/dzeio/Input/Input.stories.tsx +++ b/src/dzeio/Input/Input.stories.tsx @@ -1,29 +1,37 @@ -import { Meta } from '@storybook/react/types-6-0' -import { Story } from "@storybook/react" -import React from 'react' -import Component from '.' -import { X } from 'lucide-react' - -export default { - title: 'DZEIO/Input', - component: Component -} as Meta - -export const Basic: Story = (args: any) => - -let tmp = Basic.bind({}) -tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, characterCount: true, icon: X} - -export const Normal = tmp - -tmp = Basic.bind({}) -tmp.args = {label: 'Label', filled:true, helper: 'Helper', autocomplete: ['a', 'b', 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc'], characterCount: true, icon: X} - -export const AutoComplete = tmp - -export const Select: Story = (args: any) => - - - - - \ No newline at end of file +import { Meta } from '@storybook/react/types-6-0' +import { Story } from "@storybook/react" +import React from 'react' +import Component from '.' +import { X } from 'lucide-react' + +export default { + title: 'DZEIO/Input', + component: Component +} as Meta + +export const Basic: Story = (args: any) => + +let tmp = Basic.bind({}) +tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, iconLeft: { + icon: X, + transformer: (v: string) => v + 1 +}} + +export const Normal = tmp + +tmp = Basic.bind({}) +tmp.args = {label: 'Label', filled:true, helper: 'Helper', choices: [ + 'a', + 'a', + 'a', + 'a', + 'a', + 'a', + 'a', + 'a', + 'b', + {value: 'd', display: 'D'}, + 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc' +], characterCount: true, iconLeft: X} + +export const AutoComplete = tmp diff --git a/src/dzeio/Input/index.tsx b/src/dzeio/Input/index.tsx index 534b8c5..452fd14 100644 --- a/src/dzeio/Input/index.tsx +++ b/src/dzeio/Input/index.tsx @@ -5,22 +5,28 @@ import Text from '../Text' import { Icon } from '../interfaces' import { buildClassName } from '../Util' import css from './Input.module.styl' +import Menu from '../Menu' +import { objectClone } from '@dzeio/object-util' interface Props extends React.DetailedHTMLProps, HTMLInputElement> { id?: string label?: string - icon?: Icon - iconRight?: Icon + iconLeft?: Icon | { + icon: Icon + transformer: (value: string) => string + } + iconRight?: Icon | { + icon: Icon + transformer: (value: string) => string + } helper?: string inputRef?: React.RefObject - selectRef?: React.RefObject type?: 'color' | 'text' | 'date' | 'datetime-local' | 'email' | 'file' | 'month' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'time' | 'url' | 'week' | // Custom Types - 'select' | 'textarea' - autocomplete?: Array - children?: React.ReactNode + 'textarea' + choices?: Array } interface States { @@ -29,100 +35,78 @@ interface States { isInFirstPartOfScreen?: boolean } -export default class Input extends React.Component { +export default class Input extends React.PureComponent { public state: States = {} // any because f*ck types - private inputRef: React.RefObject = React.createRef() + private inputRef: React.RefObject = React.createRef() private parentRef: React.RefObject = React.createRef() public componentDidMount() { if (this.props.type === 'textarea') { this.textareaHandler() } - if (this.props.autocomplete) { + if (this.props.choices) { window.addEventListener('scroll', this.parentScroll) this.parentScroll() } } + public componentDidUpdate() { + console.log(this.state) + } + public componentWillUnmount() { - if (this.props.autocomplete) { + if (this.props.choices) { window.removeEventListener('scroll', this.parentScroll) } } public render() { - const props: Props = Object.assign({}, this.props) + const props: Props = objectClone(this.props) delete props.label - delete props.children - delete props.icon - delete props.helper - delete props.autocomplete + delete props.iconLeft delete props.iconRight delete props.inputRef - delete props.selectRef - delete props.color + delete props.helper + delete props.choices const baseProps: React.DetailedHTMLProps, HTMLInputElement> = { placeholder: this.props.label || this.props.placeholder || ' ', ref: this.props.inputRef || this.inputRef, className: buildClassName( - [css.iconLeft, this.props.icon], - [css.iconRight, this.props.iconRight || this.props.autocomplete] + [css.iconLeft, this.props.iconLeft], + [css.iconRight, this.props.iconRight || this.props.choices] ), onInvalid: (ev: React.FormEvent) => ev.preventDefault(), } let input: React.DetailedHTMLProps, HTMLInputElement> - if (this.props.type === 'number') { - baseProps.onWheel = (ev: React.WheelEvent) => ev.currentTarget.blur() - } - - if (this.props.type === 'select' && !this.props.readOnly) { - input = ( - - ) - // select is readonly - } else if (this.props.type === 'select') { - input = ( - - ) - } else if (this.props.type === 'textarea') { - delete baseProps.ref - input = ( -