mirror of
https://github.com/dzeiocom/components.git
synced 2025-04-22 10:52:16 +00:00
Update to v1-alpha
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
parent
000de60c42
commit
8b0c2f7ef1
5
.gitattributes
vendored
5
.gitattributes
vendored
@ -1 +1,4 @@
|
||||
* text=lf
|
||||
* text=auto eol=lf
|
||||
*.png binary
|
||||
*.jpg binary
|
||||
*.jpeg binary
|
||||
|
||||
176
package-lock.json
generated
176
package-lock.json
generated
@ -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"
|
||||
}
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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
|
||||
|
||||
26
src/dzeio/Box/Box.stories.tsx
Normal file
26
src/dzeio/Box/Box.stories.tsx
Normal file
@ -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) => (
|
||||
<Component {...args}><Text>Test</Text></Component>
|
||||
)
|
||||
|
||||
export const Complete = (args: any) => (
|
||||
<Component
|
||||
title="Test"
|
||||
icon={Lightbulb}
|
||||
rightHeader={<Text>Test</Text>}
|
||||
// {...args}
|
||||
><Text>Test</Text></Component>
|
||||
)
|
||||
@ -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<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className'>
|
||||
outline?: boolean
|
||||
/**
|
||||
* @deprecated use wrapperProps.onClick
|
||||
*/
|
||||
onClick?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>['onClick']
|
||||
className?: string
|
||||
interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, 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<Props> {
|
||||
public render = () => (
|
||||
<div
|
||||
{...this.props.wrapperProps}
|
||||
onClick={this.props.onClick}
|
||||
className={buildClassName(css.box, this.props.className, [css.outline, this.props.outline])}
|
||||
{...this.props}
|
||||
className={buildClassName(css.box, this.props?.className)}
|
||||
>
|
||||
{(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
|
||||
<div className={buildClassName(
|
||||
css.header
|
||||
)}>
|
||||
{(this.props.rightHeader || this.props.title || this.props.icon) && (
|
||||
<div className={css.header}>
|
||||
<Row nomargin justify="space-between">
|
||||
<Col>
|
||||
{this.props.title && (
|
||||
<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
|
||||
)}
|
||||
{this.props.subtitle && (
|
||||
<Text className={css.subtitle}>{this.props.subtitle}</Text>
|
||||
)}
|
||||
<Text className={css.title}>
|
||||
{this.props.icon && (
|
||||
<span className={css.icon}>
|
||||
<this.props.icon strokeWidth="2" fontWeight="800" size="20" color="white" />
|
||||
</span>
|
||||
)}
|
||||
{this.props.title ? this.props.title : undefined}
|
||||
</Text>
|
||||
</Col>
|
||||
{this.props.children && (
|
||||
{this.props.rightHeader && (
|
||||
<Col nogrow>
|
||||
<Row justify="flex-end">
|
||||
{this.props.headerButtons}
|
||||
</Row>
|
||||
{this.props.rightHeader}
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
@ -64,7 +48,7 @@ export default class Box extends React.Component<Props> {
|
||||
{this.props.children && (
|
||||
<div className={buildClassName([css.body, !this.props.noPadding])}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.code
|
||||
font-family 'source code pro', monospace
|
||||
background #E8EAF6
|
||||
padding 4px 8px
|
||||
padding 4px
|
||||
border-radius 8px
|
||||
|
||||
.pre
|
||||
|
||||
@ -1,2 +1,5 @@
|
||||
.container
|
||||
padding 16px
|
||||
margin 48px auto
|
||||
padding 0 16px
|
||||
width 100%
|
||||
max-width 1312px
|
||||
|
||||
@ -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) => (
|
||||
<Component {...args}><Input label="Test" /></Component>
|
||||
<Component {...args}><Text>Test</Text></Component>
|
||||
)
|
||||
@ -11,9 +11,9 @@ interface Props {
|
||||
export default class Container extends React.Component<Props> {
|
||||
|
||||
public render = () => (
|
||||
<div className={buildClassName(css.container, this.props.className)}>
|
||||
<main className={buildClassName(css.container, this.props.className)}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
@ -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
|
||||
@ -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<Props> {
|
||||
|
||||
public render = () => (
|
||||
<fieldset className={css.fieldset}>
|
||||
{this.props.title && (
|
||||
<legend>{this.props.title}</legend>
|
||||
)}
|
||||
{this.props.children}
|
||||
</fieldset>
|
||||
)
|
||||
|
||||
}
|
||||
@ -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%
|
||||
|
||||
@ -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<any> = (args: any) => <Component {...args} />
|
||||
|
||||
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<any> = (args: any) => <Component {...args} />
|
||||
|
||||
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
|
||||
|
||||
@ -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<LucideProps> | string
|
||||
}>
|
||||
}
|
||||
|
||||
export default class Footer extends React.Component<Props> {
|
||||
public render = () => (
|
||||
<footer className={css.footer}>
|
||||
{this.props.text ? (
|
||||
<Text align="center">{this.props.text}</Text>
|
||||
) : (
|
||||
<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
|
||||
)}
|
||||
{this.props.links && (
|
||||
<ul>{this.props.links.map((l, index) => (
|
||||
<li key={l.path}><Text>{index !== 0 && (<> - </>)}<Link href={l.path}>{l.name}</Link></Text></li>
|
||||
))}</ul>
|
||||
)}
|
||||
{this.props.socials && (
|
||||
<ul className={css.socials}>{this.props.socials.map((l, index) => (
|
||||
<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
|
||||
{typeof l.icon === 'string' ? (
|
||||
<Image width={24} height={24} src={l.icon} />
|
||||
) : (
|
||||
<l.icon size={24} />
|
||||
)}
|
||||
</Link></Text></li>
|
||||
))}</ul>
|
||||
)}
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
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<Props> {
|
||||
public render = () => (
|
||||
<footer className={css.footer}>
|
||||
{this.props.text ? (
|
||||
<Text align="center">{this.props.text}</Text>
|
||||
) : (
|
||||
<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
|
||||
)}
|
||||
{this.props.links && (
|
||||
<ul>{this.props.links.map((l, index) => (
|
||||
<li key={l.path}><Text>{index !== 0 && (<> - </>)}<Link href={l.path}>{l.name}</Link></Text></li>
|
||||
))}</ul>
|
||||
)}
|
||||
{this.props.socials && (
|
||||
<ul className={css.socials}>{this.props.socials.map((l, index) => (
|
||||
<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
|
||||
{typeof l.icon === 'string' ? (
|
||||
<Image width={24} height={24} src={l.icon} />
|
||||
) : (
|
||||
<l.icon size={24} />
|
||||
)}
|
||||
</Link></Text></li>
|
||||
))}</ul>
|
||||
)}
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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%
|
||||
|
||||
@ -12,7 +12,6 @@ interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLIn
|
||||
icon?: FC<IconProps>
|
||||
iconRight?: FC<IconProps>
|
||||
helper?: string
|
||||
characterCount?: boolean
|
||||
inputRef?: React.RefObject<HTMLInputElement>
|
||||
selectRef?: React.RefObject<HTMLSelectElement>
|
||||
type?: 'color' | 'text' | 'date' | 'datetime-local' |
|
||||
@ -21,15 +20,10 @@ interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLIn
|
||||
// Custom Types
|
||||
'select' | 'textarea'
|
||||
autocomplete?: Array<string>
|
||||
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<Props, States> {
|
||||
private parentRef: React.RefObject<HTMLDivElement> = 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<Props, States> {
|
||||
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<React.InputHTMLAttributes<HTMLInputElement>, 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<HTMLInputElement>) => ev.preventDefault(),
|
||||
}
|
||||
@ -105,7 +89,6 @@ export default class Input extends React.Component<Props, States> {
|
||||
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<Props, States> {
|
||||
return (
|
||||
<div
|
||||
className={buildClassName(
|
||||
[css.parent],
|
||||
[css.block, this.props.block]
|
||||
css.parent
|
||||
)}
|
||||
onChangeCapture={this.onChange}
|
||||
ref={this.parentRef}
|
||||
>
|
||||
{input}
|
||||
|
||||
{/* Process Icon */}
|
||||
{/* Left Icon */}
|
||||
{this.props.icon && (
|
||||
<this.props.icon className={css.left} />
|
||||
<this.props.icon size="18" className={css.left} />
|
||||
)}
|
||||
|
||||
{/* Right Icon */}
|
||||
{this.props.iconRight ? (
|
||||
<this.props.iconRight className={css.right} />
|
||||
<this.props.iconRight size="18" className={css.right} />
|
||||
) : ((this.props.type === 'select' || this.props.autocomplete) && !this.props.disabled) && (
|
||||
<ChevronDown className={buildClassName(css.right, css.rotate)} />
|
||||
<ChevronDown size="18" className={buildClassName(css.right, css.rotate)} />
|
||||
)}
|
||||
|
||||
{/* Input Label */}
|
||||
{this.props.label && (
|
||||
<label className={css.label} htmlFor={this.props.id}>{this.props.label}</label>
|
||||
)}
|
||||
{(this.props.helper || this.props.characterCount) && (
|
||||
<div>
|
||||
<Text type="span">{this.props.helper}</Text>
|
||||
{this.props.characterCount && (
|
||||
<Text type="span">{this.state?.charCount}</Text>
|
||||
)}
|
||||
</div>
|
||||
{/* Helper text */}
|
||||
{(this.props.helper) && (
|
||||
<Text>{this.props.helper}</Text>
|
||||
)}
|
||||
|
||||
{/* List when this is an autocomplete */}
|
||||
{this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value ?? this.props.value?.toString() ?? '') === -1 && (
|
||||
<ul className={buildClassName(css.autocomplete, [css.reverse, !this.state.isInFirstPartOfScreen])}>
|
||||
{this.props.autocomplete.filter((item) => item.toLowerCase().includes(this.state?.value?.toLowerCase() ?? this.props.value?.toString().toLowerCase() ?? '')).map((item) => (<li key={item} onClick={this.onAutoCompleteClick(item)}><Text>{item}</Text></li>))}
|
||||
@ -187,6 +163,9 @@ export default class Input extends React.Component<Props, States> {
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 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<Props, States> {
|
||||
}
|
||||
|
||||
private onChange = async (event?: React.FormEvent<HTMLDivElement>) => {
|
||||
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 })
|
||||
}
|
||||
|
||||
21
src/dzeio/Loader/Loader.stories.tsx
Normal file
21
src/dzeio/Loader/Loader.stories.tsx
Normal file
@ -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<any> = (args: any) => <Component {...args} />
|
||||
|
||||
let tmp = Basic.bind({})
|
||||
tmp.args = {
|
||||
auto: {interval : [10, 100], increment: [0, 5]}
|
||||
}
|
||||
|
||||
export const Auto = tmp
|
||||
@ -135,11 +135,8 @@ export default class NotificationManager extends React.Component<Props, State> {
|
||||
>
|
||||
<Box
|
||||
title={el.message}
|
||||
titleClassName={css.title}
|
||||
headerButtons={(
|
||||
<Col nogrow>
|
||||
<Text><X onClick={() => NotificationManager.removeNotification(index)} /></Text>
|
||||
</Col>
|
||||
rightHeader={(
|
||||
<Text><X onClick={() => NotificationManager.removeNotification(index)} /></Text>
|
||||
)}
|
||||
>
|
||||
{el.actions && (
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
$height = 45px
|
||||
|
||||
.top
|
||||
height $height
|
||||
.bottom
|
||||
margin-top - $height
|
||||
@ -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<Props> {
|
||||
|
||||
public render = () => (
|
||||
<div className={buildClassName(
|
||||
[css.bottom, this.props.bottom],
|
||||
[css.top, this.props.top]
|
||||
)}></div>
|
||||
)
|
||||
|
||||
}
|
||||
@ -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<Props> {
|
||||
|
||||
public render = () => (
|
||||
<Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}>
|
||||
<Box {...this.props.header} className={css.popupChild} onClick={(ev) => ev.stopPropagation()} headerButtons={(<Text><X onClick={this.props.onClose} className={css.exit} /></Text>)}>
|
||||
{this.props.children}
|
||||
</Box>
|
||||
</Row>
|
||||
)
|
||||
|
||||
private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
|
||||
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<Props> {
|
||||
|
||||
public render = () => (
|
||||
<Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}>
|
||||
<Box
|
||||
//{...this.props.header as any}
|
||||
className={css.popupChild}
|
||||
onClick={(ev) => ev.stopPropagation()}
|
||||
rightHeader={
|
||||
(<Text><X onClick={this.props.onClose} className={css.exit} /></Text>)
|
||||
}
|
||||
>
|
||||
{this.props.children}
|
||||
</Box>
|
||||
</Row>
|
||||
)
|
||||
|
||||
private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
|
||||
const target = ev.currentTarget
|
||||
if (target.classList.contains(css.popup) && this.props.onClose) {
|
||||
this.props.onClose()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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
|
||||
overflow-x auto
|
||||
|
||||
49
src/dzeio/Table/Table.stories.tsx
Normal file
49
src/dzeio/Table/Table.stories.tsx
Normal file
@ -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) => (
|
||||
<Box icon={Settings} title="Storage">
|
||||
<Component {...args}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>item1</th>
|
||||
<th>item1</th>
|
||||
<th>item1</th>
|
||||
<th>item1</th>
|
||||
<th>item1</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
<td>item1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Component>
|
||||
</Box>
|
||||
)
|
||||
@ -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'
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user