Skip to content

T
Todo-Storybook
Commit 35b98601 by Madhankumar
Options

todo component with storybook

parent 4c9e49e7
Showing with 1247 additions and 175 deletions
todo-storybook/.storybook/preview.js
/** @type { import('@storybook/react').Preview } */
import "../src/index.css";
const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
......
todo-storybook/db.json 0 → 100644
{
"task": [
{
"title": "go to office",
"checked": false,
"id": 4
},
{
"title": "meeting in office",
"checked": true,
"id": 5
}
]
}
\ No newline at end of file
todo-storybook/package-lock.json
......@@ -11,8 +11,10 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"json-server": "^0.17.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
......@@ -9956,6 +9958,22 @@
}
]
},
"node_modules/basic-auth": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
"dependencies": {
"safe-buffer": "5.1.2"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/basic-auth/node_modules/safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
},
"node_modules/batch": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
......@@ -10239,6 +10257,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/builtins": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
"dependencies": {
"semver": "^7.0.0"
}
},
"node_modules/bytes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
......@@ -10786,6 +10812,14 @@
"node": ">=0.8"
}
},
"node_modules/connect-pause": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/connect-pause/-/connect-pause-0.1.1.tgz",
"integrity": "sha512-a1gSWQBQD73krFXdUEYJom2RTFrWUL3YvXDCRkyv//GVXc79cdW9MngtRuN9ih4FDKBtfJAJId+BbDuX+1rh2w==",
"engines": {
"node": "*"
}
},
"node_modules/constants-browserify": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
......@@ -10866,6 +10900,18 @@
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
},
"node_modules/cors": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
"dependencies": {
"object-assign": "^4",
"vary": "^1"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/cosmiconfig": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
......@@ -11932,6 +11978,18 @@
"stackframe": "^1.3.4"
}
},
"node_modules/errorhandler": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.5.1.tgz",
"integrity": "sha512-rcOwbfvP1WTViVoUjcfZicVzjhjTuhSMntHh6mW3IrEiyE6mJyXvsToJUJGlGlw/2xU9P5whlWNGlIDVeCiT4A==",
"dependencies": {
"accepts": "~1.3.7",
"escape-html": "~1.0.3"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/es-abstract": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
......@@ -12262,6 +12320,57 @@
"eslint": "^8.0.0"
}
},
"node_modules/eslint-config-standard": {
"version": "17.1.0",
"resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz",
"integrity": "sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"engines": {
"node": ">=12.0.0"
},
"peerDependencies": {
"eslint": "^8.0.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
"eslint-plugin-promise": "^6.0.0"
}
},
"node_modules/eslint-config-standard-jsx": {
"version": "11.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-standard-jsx/-/eslint-config-standard-jsx-11.0.0.tgz",
"integrity": "sha512-+1EV/R0JxEK1L0NGolAr8Iktm3Rgotx3BKwgaX+eAuSX8D952LULKtjgZD3F+e6SvibONnhLwoTi9DPxN5LvvQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"peerDependencies": {
"eslint": "^8.8.0",
"eslint-plugin-react": "^7.28.0"
}
},
"node_modules/eslint-import-resolver-node": {
"version": "0.3.9",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
......@@ -12304,6 +12413,46 @@
"ms": "^2.1.1"
}
},
"node_modules/eslint-plugin-es": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-4.1.0.tgz",
"integrity": "sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==",
"dependencies": {
"eslint-utils": "^2.0.0",
"regexpp": "^3.0.0"
},
"engines": {
"node": ">=8.10.0"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
},
"peerDependencies": {
"eslint": ">=4.19.1"
}
},
"node_modules/eslint-plugin-es/node_modules/eslint-utils": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
"integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
"dependencies": {
"eslint-visitor-keys": "^1.1.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
}
},
"node_modules/eslint-plugin-es/node_modules/eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"engines": {
"node": ">=4"
}
},
"node_modules/eslint-plugin-flowtype": {
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz",
......@@ -12438,6 +12587,41 @@
"semver": "bin/semver.js"
}
},
"node_modules/eslint-plugin-n": {
"version": "15.7.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-15.7.0.tgz",
"integrity": "sha512-jDex9s7D/Qial8AGVIHq4W7NswpUD5DPDL2RH8Lzd9EloWUuvUkHfv4FRLMipH5q2UtyurorBkPeNi1wVWNh3Q==",
"dependencies": {
"builtins": "^5.0.1",
"eslint-plugin-es": "^4.1.0",
"eslint-utils": "^3.0.0",
"ignore": "^5.1.1",
"is-core-module": "^2.11.0",
"minimatch": "^3.1.2",
"resolve": "^1.22.1",
"semver": "^7.3.8"
},
"engines": {
"node": ">=12.22.0"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
},
"peerDependencies": {
"eslint": ">=7.0.0"
}
},
"node_modules/eslint-plugin-promise": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz",
"integrity": "sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==",
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"peerDependencies": {
"eslint": "^7.0.0 || ^8.0.0"
}
},
"node_modules/eslint-plugin-react": {
"version": "7.33.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz",
......@@ -12570,6 +12754,31 @@
"url": "https://opencollective.com/eslint"
}
},
"node_modules/eslint-utils": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
"integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
"dependencies": {
"eslint-visitor-keys": "^2.0.0"
},
"engines": {
"node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
},
"peerDependencies": {
"eslint": ">=5"
}
},
"node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
"integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
"engines": {
"node": ">=10"
}
},
"node_modules/eslint-visitor-keys": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
......@@ -12995,6 +13204,28 @@
"node": ">= 0.10.0"
}
},
"node_modules/express-urlrewrite": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/express-urlrewrite/-/express-urlrewrite-1.4.0.tgz",
"integrity": "sha512-PI5h8JuzoweS26vFizwQl6UTF25CAHSggNv0J25Dn/IKZscJHWZzPrI5z2Y2jgOzIaw2qh8l6+/jUcig23Z2SA==",
"dependencies": {
"debug": "*",
"path-to-regexp": "^1.0.3"
}
},
"node_modules/express-urlrewrite/node_modules/isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
},
"node_modules/express-urlrewrite/node_modules/path-to-regexp": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
"dependencies": {
"isarray": "0.0.1"
}
},
"node_modules/express/node_modules/array-flatten": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
......@@ -13738,6 +13969,17 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/get-stdin": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
"integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/get-stream": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
......@@ -14853,6 +15095,11 @@
"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
},
"node_modules/is-promise": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
},
"node_modules/is-regex": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
......@@ -17139,6 +17386,11 @@
"jiti": "bin/jiti.js"
}
},
"node_modules/jju": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
"integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA=="
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
......@@ -17367,11 +17619,24 @@
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
},
"node_modules/json-parse-better-errors": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
"integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
},
"node_modules/json-parse-even-better-errors": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
},
"node_modules/json-parse-helpfulerror": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/json-parse-helpfulerror/-/json-parse-helpfulerror-1.0.3.tgz",
"integrity": "sha512-XgP0FGR77+QhUxjXkwOMkC94k3WtqEBfcnjWqhRd82qTat4SWKRE+9kUnynz/shm3I4ea2+qISvTIeGTNU7kJg==",
"dependencies": {
"jju": "^1.1.0"
}
},
"node_modules/json-schema": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
......@@ -17382,6 +17647,141 @@
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
},
"node_modules/json-server": {
"version": "0.17.3",
"resolved": "https://registry.npmjs.org/json-server/-/json-server-0.17.3.tgz",
"integrity": "sha512-LDNOvleTv3rPAcefzXZpXMDZshV0FtSzWo8ZjnTOhKm4OCiUvsYGrGrfz4iHXIFd+UbRgFHm6gcOHI/BSZ/3fw==",
"dependencies": {
"body-parser": "^1.19.0",
"chalk": "^4.1.2",
"compression": "^1.7.4",
"connect-pause": "^0.1.1",
"cors": "^2.8.5",
"errorhandler": "^1.5.1",
"express": "^4.17.1",
"express-urlrewrite": "^1.4.0",
"json-parse-helpfulerror": "^1.0.3",
"lodash": "^4.17.21",
"lodash-id": "^0.14.1",
"lowdb": "^1.0.0",
"method-override": "^3.0.0",
"morgan": "^1.10.0",
"nanoid": "^3.1.23",
"please-upgrade-node": "^3.2.0",
"pluralize": "^8.0.0",
"server-destroy": "^1.0.1",
"standard": "^17.0.0",
"yargs": "^17.0.1"
},
"bin": {
"json-server": "lib/cli/bin.js"
},
"engines": {
"node": ">=12"
}
},
"node_modules/json-server/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/json-server/node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/json-server/node_modules/cliui": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.1",
"wrap-ansi": "^7.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/json-server/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/json-server/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"node_modules/json-server/node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"engines": {
"node": ">=8"
}
},
"node_modules/json-server/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/json-server/node_modules/yargs": {
"version": "17.7.2",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
"dependencies": {
"cliui": "^8.0.1",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.3",
"y18n": "^5.0.5",
"yargs-parser": "^21.1.1"
},
"engines": {
"node": ">=12"
}
},
"node_modules/json-server/node_modules/yargs-parser": {
"version": "21.1.1",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
"engines": {
"node": ">=12"
}
},
"node_modules/json-stable-stringify-without-jsonify": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
......@@ -17553,6 +17953,57 @@
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"node_modules/load-json-file": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz",
"integrity": "sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==",
"dependencies": {
"graceful-fs": "^4.1.15",
"parse-json": "^4.0.0",
"pify": "^4.0.1",
"strip-bom": "^3.0.0",
"type-fest": "^0.3.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/load-json-file/node_modules/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
"dependencies": {
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
},
"engines": {
"node": ">=4"
}
},
"node_modules/load-json-file/node_modules/pify": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
"engines": {
"node": ">=6"
}
},
"node_modules/load-json-file/node_modules/strip-bom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
"engines": {
"node": ">=4"
}
},
"node_modules/load-json-file/node_modules/type-fest": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
"integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
"engines": {
"node": ">=6"
}
},
"node_modules/loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
......@@ -17593,6 +18044,14 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash-id": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/lodash-id/-/lodash-id-0.14.1.tgz",
"integrity": "sha512-ikQPBTiq/d5m6dfKQlFdIXFzvThPi2Be9/AHxktOnDSfSxE1j9ICbBT5Elk1ke7HSTgM38LHTpmJovo9/klnLg==",
"engines": {
"node": ">= 4"
}
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
......@@ -17715,6 +18174,29 @@
"loose-envify": "cli.js"
}
},
"node_modules/lowdb": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/lowdb/-/lowdb-1.0.0.tgz",
"integrity": "sha512-2+x8esE/Wb9SQ1F9IHaYWfsC9FIecLOPrK4g17FGEayjUWH172H6nwicRovGvSE2CPZouc2MCIqCI7h9d+GftQ==",
"dependencies": {
"graceful-fs": "^4.1.3",
"is-promise": "^2.1.0",
"lodash": "4",
"pify": "^3.0.0",
"steno": "^0.4.1"
},
"engines": {
"node": ">=4"
}
},
"node_modules/lowdb/node_modules/pify": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
"engines": {
"node": ">=4"
}
},
"node_modules/lower-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
......@@ -17869,6 +18351,33 @@
"node": ">= 8"
}
},
"node_modules/method-override": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/method-override/-/method-override-3.0.0.tgz",
"integrity": "sha512-IJ2NNN/mSl9w3kzWB92rcdHpz+HjkxhDJWNDBqSlas+zQdP8wBiJzITPg08M/k2uVvMow7Sk41atndNtt/PHSA==",
"dependencies": {
"debug": "3.1.0",
"methods": "~1.1.2",
"parseurl": "~1.3.2",
"vary": "~1.1.2"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/method-override/node_modules/debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dependencies": {
"ms": "2.0.0"
}
},
"node_modules/method-override/node_modules/ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
},
"node_modules/methods": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
......@@ -18083,6 +18592,45 @@
"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
"dev": true
},
"node_modules/morgan": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
"integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
"dependencies": {
"basic-auth": "~2.0.1",
"debug": "2.6.9",
"depd": "~2.0.0",
"on-finished": "~2.3.0",
"on-headers": "~1.0.2"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/morgan/node_modules/debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dependencies": {
"ms": "2.0.0"
}
},
"node_modules/morgan/node_modules/ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
},
"node_modules/morgan/node_modules/on-finished": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
"integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
"dependencies": {
"ee-first": "1.1.1"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/mri": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
......@@ -18915,6 +19463,74 @@
"node": ">= 6"
}
},
"node_modules/pkg-conf": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/pkg-conf/-/pkg-conf-3.1.0.tgz",
"integrity": "sha512-m0OTbR/5VPNPqO1ph6Fqbj7Hv6QU7gR/tQW40ZqrL1rjgCU85W6C1bJn0BItuJqnR98PWzw7Z8hHeChD1WrgdQ==",
"dependencies": {
"find-up": "^3.0.0",
"load-json-file": "^5.2.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/pkg-conf/node_modules/find-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
"dependencies": {
"locate-path": "^3.0.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/pkg-conf/node_modules/locate-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
"dependencies": {
"p-locate": "^3.0.0",
"path-exists": "^3.0.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/pkg-conf/node_modules/p-limit": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
"dependencies": {
"p-try": "^2.0.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/pkg-conf/node_modules/p-locate": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
"dependencies": {
"p-limit": "^2.0.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/pkg-conf/node_modules/path-exists": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
"integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
"engines": {
"node": ">=4"
}
},
"node_modules/pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
......@@ -19041,6 +19657,22 @@
"node": ">=4"
}
},
"node_modules/please-upgrade-node": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
"integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
"dependencies": {
"semver-compare": "^1.0.0"
}
},
"node_modules/pluralize": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
"integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
"engines": {
"node": ">=4"
}
},
"node_modules/pnp-webpack-plugin": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz",
......@@ -20889,6 +21521,14 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-icons": {
"version": "4.10.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
"integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-inspector": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz",
......@@ -21316,6 +21956,17 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/regexpp": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
"integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
}
},
"node_modules/regexpu-core": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
......@@ -21834,6 +22485,11 @@
"node": ">=10"
}
},
"node_modules/semver-compare": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
"integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
},
"node_modules/semver/node_modules/lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
......@@ -22011,6 +22667,11 @@
"node": ">= 0.8.0"
}
},
"node_modules/server-destroy": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/server-destroy/-/server-destroy-1.0.1.tgz",
"integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
},
"node_modules/setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
......@@ -22277,6 +22938,70 @@
"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
"integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
},
"node_modules/standard": {
"version": "17.1.0",
"resolved": "https://registry.npmjs.org/standard/-/standard-17.1.0.tgz",
"integrity": "sha512-jaDqlNSzLtWYW4lvQmU0EnxWMUGQiwHasZl5ZEIwx3S/ijZDjZOzs1y1QqKwKs5vqnFpGtizo4NOYX2s0Voq/g==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"dependencies": {
"eslint": "^8.41.0",
"eslint-config-standard": "17.1.0",
"eslint-config-standard-jsx": "^11.0.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-n": "^15.7.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.32.2",
"standard-engine": "^15.0.0",
"version-guard": "^1.1.1"
},
"bin": {
"standard": "bin/cmd.cjs"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/standard-engine": {
"version": "15.1.0",
"resolved": "https://registry.npmjs.org/standard-engine/-/standard-engine-15.1.0.tgz",
"integrity": "sha512-VHysfoyxFu/ukT+9v49d4BRXIokFRZuH3z1VRxzFArZdjSCFpro6rEIU3ji7e4AoAtuSfKBkiOmsrDqKW5ZSRw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"dependencies": {
"get-stdin": "^8.0.0",
"minimist": "^1.2.6",
"pkg-conf": "^3.1.0",
"xdg-basedir": "^4.0.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/statuses": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
......@@ -22285,6 +23010,14 @@
"node": ">= 0.8"
}
},
"node_modules/steno": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/steno/-/steno-0.4.4.tgz",
"integrity": "sha512-EEHMVYHNXFHfGtgjNITnka0aHhiAlo93F7z2/Pwd+g0teG9CnM3JIINM7hVVB5/rhw9voufD7Wukwgtw2uqh6w==",
"dependencies": {
"graceful-fs": "^4.1.3"
}
},
"node_modules/stop-iteration-iterator": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
......@@ -23780,6 +24513,14 @@
"node": ">= 0.8"
}
},
"node_modules/version-guard": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/version-guard/-/version-guard-1.1.1.tgz",
"integrity": "sha512-MGQLX89UxmYHgDvcXyjBI0cbmoW+t/dANDppNPrno64rYr8nH4SHSuElQuSYdXGEs0mUzdQe1BY+FhVPNsAmJQ==",
"engines": {
"node": ">=0.10.48"
}
},
"node_modules/w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
......@@ -24757,6 +25498,14 @@
}
}
},
"node_modules/xdg-basedir": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
"integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
"engines": {
"node": ">=8"
}
},
"node_modules/xml-name-validator": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
......
todo-storybook/package.json
......@@ -6,8 +6,10 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"json-server": "^0.17.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
......@@ -17,7 +19,8 @@
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
"build-storybook": "storybook build",
"server": "json-server --watch db.json --port 5000 --host 192.168.1.91"
},
"eslintConfig": {
"extends": [
......
todo-storybook/src/App.css
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
todo-storybook/src/App.js
import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from "react";
import "./App.css";
import Layout from "./Components/Base/Layout";
import Tasks from "./Components/TopLevel/Tasks";
import Form from "./Todo/Form";
function App() {
const [task, setTask] = useState([]);
const addTask = async (data) => {
const res = await fetch(`http://192.168.1.91:5000/task`, {
method: "POST",
headers: { "Content-type": "application/json" },
body: JSON.stringify(data),
});
const result = await res.json();
setTask([...task, result]);
};
const getTask = async () => {
const taskData = await fetch("http://192.168.1.91:5000/task");
const response = await taskData.json();
setTask(response);
};
const getTaskById = async (id) => {
const tasktracker = await fetch(`http://192.168.1.91:5000/task/${id}`);
const response = await tasktracker.json();
return response;
};
const remainder = async (datas) => {
const toogle = await getTaskById(datas.id);
const result = { ...toogle, checked: !toogle.checked };
const res = await fetch(`http://192.168.1.91:5000/task/${datas.id}`, {
method: "PUT",
headers: { "Content-type": "application/json" },
body: JSON.stringify(result),
});
const data = await res.json();
setTask(
task.map((e) => (e.id === data.id ? { ...e, checked: data.checked } : e))
);
};
const deleteTask = async (data) => {
var result = window.confirm("Want to delete?");
if (result) {
//Logic to delete the item
await fetch(`http://192.168.1.91:5000/task/${data.id}`, {
method: "DELETE",
});
setTask(task.filter((e) => e.id !== data.id));
}
};
useEffect(() => {
getTask();
}, []);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Layout count={task.filter((e) => !e.checked).length}>
{task.length > 0 && (
<Tasks
tasksData={task}
handleClick={remainder}
handleCloses={deleteTask}
/>
)}
<Form bottom={true} addtask={addTask} />
</Layout>
</div>
);
}
......
todo-storybook/src/Components/Base/Button/button.css
.btn{
font-size:18px;
outline:none;
color:black;
border: 1px solid #ccc;
border-radius: 5px;
}
.btn-sm{
padding: 14px 18px;
}
.btn-md {
padding: 16px 20px;
}
.btn-lg {
padding: 18px 25px;
}
todo-storybook/src/Components/Base/Button/index.js
import React from 'react'
import React from "react";
import PropTypes from "prop-types";
import "../Button/button.css";
function Button() {
function Button({ label, backgroundColor, handleClick, size }) {
const style = {
backgroundColor,
};
return (
<div>
<button className={`btn btn-${size}`} style={style} onClick={handleClick}>
{label}
</button>
</div>
)
);
}
export default Button
Button.propTypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
handleClick: PropTypes.func,
};
Button.defaultProps = {
label: "Submit",
backgroundColor: "white",
};
export default Button;
todo-storybook/src/Components/Base/Checkbox/checkbox.css
input[type="checkbox"]{
height:20px;
width:25px;
cursor: pointer;
}
label{
position: absolute;
top: 2.2em;
user-select: none;
}
.chk-bg{
padding: 1rem;
background: white;
}
\ No newline at end of file
todo-storybook/src/Components/Base/Checkbox/index.js
import React from 'react'
import React from "react";
import "../Checkbox/checkbox.css";
function Checkbox() {
function Checkbox({ handleClick, ...args }) {
const handleChange = () => {
args.checked = !args.checked;
let val = args.checked;
console.log(val);
//args.checked = !args.checked;
const result = val ? "checked" : "unChecked";
// console.log(result);
handleClick(result);
};
return (
<div>
<h1>checkbox</h1>
<div className="chk-bg">
<input
className="chkBox"
type="checkbox"
name="checkbox"
{...args}
onChange={handleChange}
/>
</div>
)
);
}
export default Checkbox
export default Checkbox;
todo-storybook/src/Components/Base/Input/index.js
import React from 'react'
import React from "react";
import "../Input/input.css";
function Input() {
function Input({ changeInput, inputValue }) {
const handleChange = (e) => {
e.preventDefault();
changeInput(e.target.value);
};
return (
<div>
<h1>input</h1>
</div>
)
<>
<input
type="text"
required
placeholder="Enter Item"
value={inputValue}
onChange={handleChange}
></input>
</>
);
}
export default Input
export default Input;
todo-storybook/src/Components/Base/Input/input.css
input[type="text"]{
width:100%;
padding:1rem 1.5rem;
box-sizing: border-box;
border: 1px solid #ccc;
font-size:18px;
outline: none;
box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px inset;
border-radius: 5px;
}
\ No newline at end of file
todo-storybook/src/Components/Base/Layout/index.js
import React from 'react'
function Layout() {
import "../Layout/layout.css";
function Layout({ count, ...props }) {
return (
<div>
<h1>layout</h1>
<div className="container">
<h2 className="header">You have {count || 0} Todos</h2>
<div class="inner-section" {...props}></div>
</div>
)
);
}
export default Layout
export default Layout;
todo-storybook/src/Components/Base/Layout/layout.css
.container {
height: 300px;
min-height: 50vh;
width: min(100dvw - 5rem);
margin-inline: auto;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background: white;
position: relative;
}
.header {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border: 1px solid #ccc;
text-align: center;
padding: 1.3rem 0px;
margin: 0;
font-weight: 800px;
background: white;
}
@media screen and (min-width:1024px) {
.container {
width: 40dvw
}
}
todo-storybook/src/Components/TopLevel/Header/index.js deleted 100644 → 0
import React from 'react'
function Header() {
return (
<div>
<h1>header</h1>
</div>
)
}
export default Header
todo-storybook/src/Components/TopLevel/Task/index.js
import React from 'react'
function Task() {
import React from "react";
import { FaTimesCircle } from "react-icons/fa";
import CheckBox from "../../Base/Checkbox";
import "./task.css";
function Task({ handleClose, handleClicks, task }) {
return (
<div>
<h1>task</h1>
</div>
)
<>
<div className="task-section">
<div className="task">
<div className="task-title">
<CheckBox handleClick={handleClicks} checked={task.checked} />
<p className={`${task.checked ? "strike-through" : ""}`}>
{task.title}
</p>
</div>
<div className="task-close">
<FaTimesCircle className="fa-close" onClick={handleClose} />
</div>
</div>
</div>
</>
);
}
export default Task
export default Task;
todo-storybook/src/Components/TopLevel/Task/task.css
.task-section {
background: white;
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
clip-path: inset(0 -100vmax);
}
.task-section .task,
.task-title {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.2rem 0.8rem;
align-items: center;
}
.fa-close{
color:#ccc;
font-size:25px
}
.task-section .task,
.task-title>p{
color:#9e9b9b;
}
.strike-through{
text-decoration: line-through;
}
\ No newline at end of file
todo-storybook/src/Components/TopLevel/TaskList/index.js deleted 100644 → 0
import React from 'react'
function Tasklist() {
return (
<div>
<h1>tasklist</h1>
</div>
)
}
export default Tasklist
todo-storybook/src/Components/TopLevel/Tasks/index.js 0 → 100644
import React from "react";
import "./tasks.css";
import Task from "../../TopLevel/Task";
function Tasks({ handleClick, tasksData, handleCloses }) {
return (
<>
<div className="tasklist">
{tasksData.length > 0
? tasksData.map((tasks) => (
<Task
task={tasks}
handleClicks={() => handleClick(tasks)}
handleClose={() => handleCloses(tasks)}
/>
// <div className="tasks">
// <div className="task-section">
// <div className="task">
// <CheckBox handleClick={handleClicks} />
// <p>{e.title} </p>
// </div>
// <FaTimes
// className="fa-close"
// style={{ color: "red" }}
// onClick={handleClose}
// />
// </div>
// </div>
))
: "No task"}
</div>
</>
);
}
export default Tasks;
todo-storybook/src/Components/TopLevel/Tasks/tasks.css 0 → 100644
.tasks{
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
background: white;
padding: 1rem;
}
.tasks .task-section{
margin:0.20rem;
box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}
.fa-close{
cursor: pointer;
}
.tasklist{
overflow:auto;
height: 240px;
}
\ No newline at end of file
todo-storybook/src/Todo/Form/form.css 0 → 100644
.form-container{
display: flex;
gap:1rem;
width: calc(100% - 2.5rem);
padding: 1rem;
}
.form-container form{
flex:1;
overflow: auto;
}
.form-bottom{
position:absolute;
bottom: 0;
}
\ No newline at end of file
todo-storybook/src/Todo/Form/index.js 0 → 100644
import React, { useState } from "react";
import Button from "../../Components/Base/Button";
import Input from "../../Components/Base/Input";
import "../Form/form.css";
function Form({ addtask, bottom }) {
const [input, setInput] = useState("");
const submitdata = (e) => {
e.preventDefault();
setInput("");
addtask({ title: input, checked: false });
};
const handleInput = (e) => {
setInput(e);
};
return (
<>
<form onSubmit={submitdata}>
<div className={`form-container ${bottom ? "form-bottom" : ""}`}>
<Input
required={true}
changeInput={(e) => handleInput(e)}
inputValue={input}
/>
<Button size={"md"} />
</div>
</form>
</>
);
}
export default Form;
todo-storybook/src/db.json 0 → 100644
{
"task":[
]
}
\ No newline at end of file
todo-storybook/src/index.css
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@600&family=Poppins:wght@600&display=swap');
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
font-family: "PT Sans", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
background-image: -webkit-linear-gradient(
-90deg,
transparent 0%,
transparent 50%,
white 50%,
white 100%
),
-webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, white
50%, white 100%);
background-size: 0.2em 0.2em;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
todo-storybook/src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
// <React.StrictMode>
<App />
// </React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
......
todo-storybook/src/stories/button.stories.js
import Button from "../Components/Base/Button";
import {action} from '@storybook/addon-actions';
export default{
title:"Base/Button",
component:Button
}
export const button=() => (
<Button onClick={action('selected')} />
);
export default {
title: "Base/Button",
component: Button,
argTypes: { handleClick: { action: "Clicked" } },
};
const Template = (args) => <Button {...args} />;
export const button = Template.bind({});
button.args = {
label: "Submit",
backgroundColor: "white",
size: "sm",
};
todo-storybook/src/stories/checkbox.stories.js
import Checkbox from "../Components/Base/Checkbox";
export default{
title:"Base/Checkbox",
component:Checkbox
}
export default {
title: "Base/Checkbox",
component: Checkbox,
argTypes: { handleClick: { action: "clicked" } },
};
export const checkbox = {};
\ No newline at end of file
const Template = (args) => <Checkbox {...args} />;
export const checkbox = Template.bind({});
checkbox.args = {
checked: false,
};
todo-storybook/src/stories/form.stories.js 0 → 100644
import Form from "../Todo/Form";
export default {
title: "Form",
component: Form,
argTypes: { handleSubmit: { action: "Submit" } },
};
const Template = (args) => <Form {...args} />;
export const form = Template.bind({});
form.args = {};
todo-storybook/src/stories/header.stories.js deleted 100644 → 0
import Header from "../Components/TopLevel/Header";
export default{
title:"TopLevel/Header",
component:Header
}
export const header = {};
\ No newline at end of file
todo-storybook/src/stories/input.stories.js
import Input from "../Components/Base/Input";
export default{
title:"Base/Input",
component:Input
}
export default {
title: "Base/Input",
component: Input,
};
export const input = {};
\ No newline at end of file
const Template = (args) => <Input {...args} />;
export const input = Template.bind({});
input.args = {
changeInput: () => {},
};
todo-storybook/src/stories/layout.stories.js
import Layout from "../Components/Base/Layout";
export default{
title:"Base/Layout",
component:Layout
}
export default {
title: "Base/Layout",
component: Layout,
};
export const layout = {};
\ No newline at end of file
const Template = (args) => <Layout {...args} />;
export const layout = Template.bind({});
layout.args = {};
todo-storybook/src/stories/task.stories.js
import Task from "../Components/TopLevel/Task";
export default{
title:"TopLevel/Task",
component:Task
}
export default {
title: "TopLevel/Task",
component: Task,
argTypes: {
handleClose: { action: "Deleted" },
handleClicks: { action: "checked" },
},
};
export const task = {};
\ No newline at end of file
const taskData = {
id: "1",
title: "Test Task",
checked: false,
};
const Template = (args) => <Task task={{ ...taskData }} {...args} />;
export const task = Template.bind({});
task.args = {};
todo-storybook/src/stories/tasklist.stories.js deleted 100644 → 0
import Tasklist from "../Components/TopLevel/TaskList";
export default{
title:"TopLevel/TaskList",
component:Tasklist
}
export const tasklist = {};
\ No newline at end of file
todo-storybook/src/stories/tasks.stories.js 0 → 100644
import Tasks from "../Components/TopLevel/Tasks";
import { taskData } from "../Components/TopLevel/Task";
export default {
title: "TopLevel/Tasks",
component: Tasks,
argTypes: {
handleCloses: { action: "Deleted" },
handleClick: { action: "checked" },
},
};
const defaultTasksData = [
{ ...taskData, id: "1", title: "Task 1", checked: false },
{ ...taskData, id: "2", title: "Task 2", checked: true },
{ ...taskData, id: "3", title: "Task 3", checked: true },
];
const Template = (args) => <Tasks tasksData={defaultTasksData} {...args} />;
export const tasks = Template.bind({});
tasks.args = {};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment