From ecc7dd91cc43e41f6e0086ffc4bd44072dcb2bc0 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Fri, 23 Aug 2024 15:31:37 +0200 Subject: [PATCH 1/2] Add page component --- .eslintrc.cjs | 18 + .storybook/preview-head.html | 4 - package-lock.json | 976 +++++++++++++++++- package.json | 6 + src/components/Alert/Alert.tsx | 6 +- src/components/AppBar/AppBar.tsx | 23 + src/components/AppBar/appBar.css | 32 + .../EmptyPlaceholder/EmptyPlaceholder.tsx | 2 +- src/components/Failure/Failure.tsx | 2 +- src/components/Logo/LogoInverse.tsx | 28 + src/components/Menu/Menu.tsx | 80 ++ src/components/Menu/menu.css | 72 ++ .../NetworkIndicator/NetworkIndicator.tsx | 22 + .../NetworkIndicator/networkIndicator.css | 35 + src/components/Page/Page.tsx | 110 ++ src/components/Page/page.css | 7 + src/components/Stepper/Stepper.tsx | 11 - src/components/Toast/Toast.tsx | 2 +- src/components/Upload/Upload.tsx | 2 +- src/components/Upload/UploadFile.tsx | 38 +- stories/AppBar.stories.tsx | 24 + stories/Card.stories.ts | 4 +- stories/Menu.stories.css | 14 + stories/Menu.stories.tsx | 134 +++ stories/NetworkIndicator.stories.ts | 29 + stories/Page.stories.css | 7 + stories/Page.stories.tsx | 24 + stories/Stepper.stories.tsx | 4 +- stories/Toast.stories.tsx | 7 +- stories/Upload.stories.css | 3 + stories/Upload.stories.tsx | 3 +- vite.config.ts | 2 +- 32 files changed, 1683 insertions(+), 48 deletions(-) create mode 100644 .eslintrc.cjs create mode 100644 src/components/AppBar/AppBar.tsx create mode 100644 src/components/AppBar/appBar.css create mode 100644 src/components/Logo/LogoInverse.tsx create mode 100644 src/components/Menu/Menu.tsx create mode 100644 src/components/Menu/menu.css create mode 100644 src/components/NetworkIndicator/NetworkIndicator.tsx create mode 100644 src/components/NetworkIndicator/networkIndicator.css create mode 100644 src/components/Page/Page.tsx create mode 100644 src/components/Page/page.css create mode 100644 stories/AppBar.stories.tsx create mode 100644 stories/Menu.stories.css create mode 100644 stories/Menu.stories.tsx create mode 100644 stories/NetworkIndicator.stories.ts create mode 100644 stories/Page.stories.css create mode 100644 stories/Page.stories.tsx create mode 100644 stories/Upload.stories.css diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..d6c9537 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,18 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parser: '@typescript-eslint/parser', + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index c17da87..a60d103 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -36,8 +36,4 @@ font-size: var(--codex-font-size); color-scheme: dark; } - - p { - margin: 0; - } diff --git a/package-lock.json b/package-lock.json index 67620e4..a028f61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,12 @@ "@storybook/react-vite": "^8.2.9", "@storybook/test": "^8.2.9", "@tanstack/react-query": "^5.51.24", + "@typescript-eslint/eslint-plugin": "^7.15.0", + "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", + "eslint": "^8.57.0", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-react-refresh": "^0.4.7", "glob": "^7.2.3", "prettier": "^3.3.3", "react": "^18.3.1", @@ -39,7 +44,6 @@ }, "peerDependencies": { "@codex/sdk-js": "@codex/sdk-js#master", - "@tanstack/react-query": "^5.51.24", "react": "^18.3.1", "react-dom": "^18.3.1" } @@ -2542,6 +2546,146 @@ "node": ">=12" } }, + "node_modules/@eslint-community/eslint-utils": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", + "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" + } + }, + "node_modules/@eslint-community/regexpp": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz", + "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==", + "dev": true, + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } + }, + "node_modules/@eslint/eslintrc": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz", + "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==", + "dev": true, + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^9.6.0", + "globals": "^13.19.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint/eslintrc/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/@eslint/eslintrc/node_modules/globals": { + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "node_modules/@eslint/eslintrc/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@eslint/js": { + "version": "8.57.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz", + "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/@humanwhocodes/config-array": { + "version": "0.11.14", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", + "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==", + "deprecated": "Use @eslint/config-array instead", + "dev": true, + "dependencies": { + "@humanwhocodes/object-schema": "^2.0.2", + "debug": "^4.3.1", + "minimatch": "^3.0.5" + }, + "engines": { + "node": ">=10.10.0" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/object-schema": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz", + "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", + "deprecated": "Use @eslint/object-schema instead", + "dev": true + }, "node_modules/@jest/schemas": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz", @@ -4328,6 +4472,256 @@ "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==", "dev": true }, + "node_modules/@typescript-eslint/eslint-plugin": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz", + "integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==", + "dev": true, + "dependencies": { + "@eslint-community/regexpp": "^4.10.0", + "@typescript-eslint/scope-manager": "7.18.0", + "@typescript-eslint/type-utils": "7.18.0", + "@typescript-eslint/utils": "7.18.0", + "@typescript-eslint/visitor-keys": "7.18.0", + "graphemer": "^1.4.0", + "ignore": "^5.3.1", + "natural-compare": "^1.4.0", + "ts-api-utils": "^1.3.0" + }, + "engines": { + "node": "^18.18.0 || >=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^7.0.0", + "eslint": "^8.56.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/parser": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz", + "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==", + "dev": true, + "dependencies": { + "@typescript-eslint/scope-manager": "7.18.0", + "@typescript-eslint/types": "7.18.0", + "@typescript-eslint/typescript-estree": "7.18.0", + "@typescript-eslint/visitor-keys": "7.18.0", + "debug": "^4.3.4" + }, + "engines": { + "node": "^18.18.0 || >=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.56.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/scope-manager": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz", + "integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "7.18.0", + "@typescript-eslint/visitor-keys": "7.18.0" + }, + "engines": { + "node": "^18.18.0 || >=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/type-utils": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz", + "integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==", + "dev": true, + "dependencies": { + "@typescript-eslint/typescript-estree": "7.18.0", + "@typescript-eslint/utils": "7.18.0", + "debug": "^4.3.4", + "ts-api-utils": "^1.3.0" + }, + "engines": { + "node": "^18.18.0 || >=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.56.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/types": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz", + "integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==", + "dev": true, + "engines": { + "node": "^18.18.0 || >=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/typescript-estree": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz", + "integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "7.18.0", + "@typescript-eslint/visitor-keys": "7.18.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "minimatch": "^9.0.4", + "semver": "^7.6.0", + "ts-api-utils": "^1.3.0" + }, + "engines": { + "node": "^18.18.0 || >=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@typescript-eslint/utils": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz", + "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.4.0", + "@typescript-eslint/scope-manager": "7.18.0", + "@typescript-eslint/types": "7.18.0", + "@typescript-eslint/typescript-estree": "7.18.0" + }, + "engines": { + "node": "^18.18.0 || >=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^8.56.0" + } + }, + "node_modules/@typescript-eslint/visitor-keys": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz", + "integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "7.18.0", + "eslint-visitor-keys": "^3.4.3" + }, + "engines": { + "node": "^18.18.0 || >=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -4743,6 +5137,15 @@ "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", "dev": true }, + "node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/assertion-error": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz", @@ -5039,6 +5442,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001651", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz", @@ -5436,6 +5848,12 @@ "node": ">=6" } }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true + }, "node_modules/defaults": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz", @@ -5517,6 +5935,27 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "dependencies": { + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/dir-glob/node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -5702,6 +6141,276 @@ "source-map": "~0.6.1" } }, + "node_modules/eslint": { + "version": "8.57.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", + "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "@eslint-community/regexpp": "^4.6.1", + "@eslint/eslintrc": "^2.1.4", + "@eslint/js": "8.57.0", + "@humanwhocodes/config-array": "^0.11.14", + "@humanwhocodes/module-importer": "^1.0.1", + "@nodelib/fs.walk": "^1.2.8", + "@ungap/structured-clone": "^1.2.0", + "ajv": "^6.12.4", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "doctrine": "^3.0.0", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^7.2.2", + "eslint-visitor-keys": "^3.4.3", + "espree": "^9.6.1", + "esquery": "^1.4.2", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "globals": "^13.19.0", + "graphemer": "^1.4.0", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "is-path-inside": "^3.0.3", + "js-yaml": "^4.1.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3", + "strip-ansi": "^6.0.1", + "text-table": "^0.2.0" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-plugin-react-hooks": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz", + "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" + } + }, + "node_modules/eslint-plugin-react-refresh": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.11.tgz", + "integrity": "sha512-wrAKxMbVr8qhXTtIKfXqAn5SAtRZt0aXxe5P23Fh4pUAdC6XEsybGLB8P0PI4j1yYqOgUEUlzKAGDfo7rJOjcw==", + "dev": true, + "peerDependencies": { + "eslint": ">=7" + } + }, + "node_modules/eslint-scope": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz", + "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/eslint/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==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/eslint/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "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/eslint/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/eslint/node_modules/globals": { + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/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==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "node_modules/eslint/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/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==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/espree": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "dev": true, + "dependencies": { + "acorn": "^8.9.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/espree/node_modules/acorn": { + "version": "8.12.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", + "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -5715,6 +6424,30 @@ "node": ">=4" } }, + "node_modules/esquery": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz", + "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==", + "dev": true, + "dependencies": { + "estraverse": "^5.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, "node_modules/estraverse": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", @@ -5850,6 +6583,18 @@ "node": ">=8.6.0" } }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true + }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", + "dev": true + }, "node_modules/fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", @@ -5868,6 +6613,18 @@ "walk-up-path": "^3.0.1" } }, + "node_modules/file-entry-cache": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", + "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "dev": true, + "dependencies": { + "flat-cache": "^3.0.4" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, "node_modules/filesize": { "version": "10.1.4", "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.4.tgz", @@ -5955,6 +6712,42 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/flat-cache": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", + "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", + "dev": true, + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.3", + "rimraf": "^3.0.2" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/flat-cache/node_modules/rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "deprecated": "Rimraf versions prior to v4 are no longer supported", + "dev": true, + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/flatted": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", + "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", + "dev": true + }, "node_modules/flow-parser": { "version": "0.243.0", "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.243.0.tgz", @@ -6237,6 +7030,12 @@ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "dev": true }, + "node_modules/graphemer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", + "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", + "dev": true + }, "node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -6435,6 +7234,22 @@ "node": ">= 4" } }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/import-lazy": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz", @@ -6609,6 +7424,15 @@ "node": ">=0.12.0" } }, + "node_modules/is-path-inside": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", + "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/is-plain-object": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", @@ -6683,6 +7507,24 @@ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, + "node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/js-yaml/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, "node_modules/jscodeshift": { "version": "0.15.2", "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.15.2.tgz", @@ -6786,12 +7628,24 @@ "node": ">=4" } }, + "node_modules/json-buffer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", + "dev": true + }, "node_modules/json-schema-traverse": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "dev": true }, + "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", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -6816,6 +7670,15 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/keyv": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", + "dev": true, + "dependencies": { + "json-buffer": "3.0.1" + } + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -6849,6 +7712,19 @@ "node": ">=6" } }, + "node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/local-pkg": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz", @@ -6892,6 +7768,12 @@ "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "dev": true }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "node_modules/log-symbols": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", @@ -7288,6 +8170,12 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", + "dev": true + }, "node_modules/negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", @@ -7565,6 +8453,23 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/optionator": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", + "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==", + "dev": true, + "dependencies": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/ora": { "version": "5.4.1", "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz", @@ -7691,6 +8596,18 @@ "node": ">=6" } }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/parse-ms": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz", @@ -7944,6 +8861,15 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/prettier": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", @@ -8439,6 +9365,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/restore-cursor": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz", @@ -9102,6 +10037,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/text-table": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", + "dev": true + }, "node_modules/tiny-invariant": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", @@ -9147,6 +10088,18 @@ "node": ">=0.6" } }, + "node_modules/ts-api-utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", + "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==", + "dev": true, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "typescript": ">=4.2.0" + } + }, "node_modules/ts-dedent": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz", @@ -9182,6 +10135,18 @@ "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==", "dev": true }, + "node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/type-detect": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.1.0.tgz", @@ -9687,6 +10652,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/word-wrap": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index dc8a412..718f823 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ }, "peerDependencies": { "@codex/sdk-js": "@codex/sdk-js#master", + "@tanstack/react-query": "^5.51.24", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -53,6 +54,11 @@ "@storybook/test": "^8.2.9", "@tanstack/react-query": "^5.51.24", "@vitejs/plugin-react": "^4.3.1", + "@typescript-eslint/eslint-plugin": "^7.15.0", + "@typescript-eslint/parser": "^7.15.0", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-react-refresh": "^0.4.7", + "eslint": "^8.57.0", "glob": "^7.2.3", "prettier": "^3.3.3", "react": "^18.3.1", diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index b95def7..cd46a05 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -38,10 +38,8 @@ export function Alert({ style={style} {...rest} > -

- {variant} ! -

-

{message}

+ {variant} ! +
{message}
); } diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx new file mode 100644 index 0000000..fad7f08 --- /dev/null +++ b/src/components/AppBar/AppBar.tsx @@ -0,0 +1,23 @@ +import { Menu } from "lucide-react"; +import "./appBar.css"; +import { ReactNode } from "react"; + +type Props = { + onExpand: () => void; + + Right: ReactNode; +}; + +export function AppBar({ onExpand, Right }: Props) { + return ( +
+
+ + + + Home +
+
{Right}
+
+ ); +} diff --git a/src/components/AppBar/appBar.css b/src/components/AppBar/appBar.css new file mode 100644 index 0000000..f2be905 --- /dev/null +++ b/src/components/AppBar/appBar.css @@ -0,0 +1,32 @@ +.appBar { + height: 40px; + justify-content: space-between; + border-bottom: 1px solid var(--codex-border-color); + view-transition-name: main-header; + display: flex; + padding: 0.75rem 1.5rem; +} + +.appBar-burger { + cursor: pointer; + color: var(--codex-color); + display: flex; +} + +.appBar, +.appBar-left, +.appBar-right { + display: flex; + align-items: center; +} + +.appBar-left, +.appBar-right { + gap: 0.75rem; +} + +@media (min-width: 1000px) { + .appBar-burger { + display: none; + } +} diff --git a/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx b/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx index a049c91..f5f82ac 100644 --- a/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx +++ b/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx @@ -13,7 +13,7 @@ export function EmptyPlaceholder({ title, message, onRetry }: Props) {
{title} -

{message}

+
{message}
{onRetry && (
); diff --git a/src/components/Logo/LogoInverse.tsx b/src/components/Logo/LogoInverse.tsx new file mode 100644 index 0000000..f6cd391 --- /dev/null +++ b/src/components/Logo/LogoInverse.tsx @@ -0,0 +1,28 @@ +type Props = { + width?: number; +}; + +export function LogoInverse({ width = 40 }: Props) { + return ( + + + + + + + + + + + ); +} diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx new file mode 100644 index 0000000..a92a202 --- /dev/null +++ b/src/components/Menu/Menu.tsx @@ -0,0 +1,80 @@ +import { attributes } from "../../utils/attributes"; +import "./menu.css"; +import { LogoInverse } from "../Logo/LogoInverse"; +import { ComponentType, useEffect } from "react"; +import { Backdrop } from "../Backdrop/Backdrop"; + +export type MenuItemComponentProps = { + onClick: () => void; + className: string; +}; + +export type MenuItem = + | { + type: "separator"; + } + | { + type: "menu-item"; + Component: ComponentType; + } + | { + type: "menu-title"; + title: string; + }; + +type Props = { + expanded: boolean; + + onClose: () => void; + + onOpen?: () => void; + + items: MenuItem[]; + + className?: string; +}; + +export function Menu({ expanded, onClose, onOpen, items, className }: Props) { + useEffect(() => { + if (expanded && onOpen) { + onOpen(); + } + }, [expanded, onOpen]); + + const renderItem = (i: MenuItem, index: number) => { + switch (i.type) { + case "separator": + return
; + case "menu-title": + return ( + + {i.title} + + ); + case "menu-item": + return ( + + ); + } + }; + + return ( + <> + + + + + ); +} diff --git a/src/components/Menu/menu.css b/src/components/Menu/menu.css new file mode 100644 index 0000000..e29517f --- /dev/null +++ b/src/components/Menu/menu.css @@ -0,0 +1,72 @@ +.menu { + display: flex; + flex-direction: column; + background-color: var(--codex-background-secondary); + border-radius: var(--codex-border-radius); + transform: translatex(-500px); + transition: transform 0.25s; + position: fixed; + min-width: 200px; + z-index: 1; + view-transition-name: main-menu; + height: 100%; + top: 0; + left: 0; +} + +.menu-container { + padding: 0.75rem; +} + +.menu-backdrop { + display: none; +} + +.menu[aria-expanded] { + transform: translatex(0); + min-width: 200px; +} + +.menu-header { + margin-bottom: 0.75rem; +} + +.menu-item, +.menu-header { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.menu-item { + padding: 0.75rem; + color: var(--codex-color); + margin-bottom: 0.75rem; + text-decoration: none; +} + +.menu-item:hover, +.menu-item.active { + background-color: var(--codex-background-light); +} + +.menu-title { + text-transform: uppercase; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 0.75rem; + display: inline-block; + font-weight: 500; +} + +.menu-item-separator { + border: 0.1px solid var(--codex-border-color); + width: 100%; +} + +@media (min-width: 1000px) { + .menu { + transform: translatex(0px); + position: inherit; + } +} diff --git a/src/components/NetworkIndicator/NetworkIndicator.tsx b/src/components/NetworkIndicator/NetworkIndicator.tsx new file mode 100644 index 0000000..8e270fd --- /dev/null +++ b/src/components/NetworkIndicator/NetworkIndicator.tsx @@ -0,0 +1,22 @@ +import { classnames } from "../../utils/classnames"; +import "./networkIndicator.css"; + +type Props = { + online: boolean; + text: string; +}; + +export function NetworkIndicator({ online, text }: Props) { + return ( +
+
+ {text} +
+ ); +} diff --git a/src/components/NetworkIndicator/networkIndicator.css b/src/components/NetworkIndicator/networkIndicator.css new file mode 100644 index 0000000..46fc428 --- /dev/null +++ b/src/components/NetworkIndicator/networkIndicator.css @@ -0,0 +1,35 @@ +.networkIndicator { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.networkIndicator-point { + width: 12px; + height: 12px; + border-radius: 50%; + animation-duration: 3s; + animation-name: flash; + animation-iteration-count: infinite; + transition: none; +} + +.networkIndicator-point--online { + background-color: var(--codex-color-primary); +} + +.networkIndicator-point--offline { + background-color: rgb(217, 53, 38); +} + +@keyframes flash { + 0% { + opacity: 1; + } + 40% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx new file mode 100644 index 0000000..0284560 --- /dev/null +++ b/src/components/Page/Page.tsx @@ -0,0 +1,110 @@ +import { ReactNode, useState } from "react"; +import { Menu, MenuItem, MenuItemComponentProps } from "../Menu/Menu"; +import { AppBar } from "../AppBar/AppBar"; +import { NetworkIndicator } from "../NetworkIndicator/NetworkIndicator"; +import "./page.css"; +import { + Home, + Star, + ShoppingBag, + Server, + Settings, + HelpCircle, +} from "lucide-react"; + +type Props = { + children: ReactNode; +}; + +export function Page({ children }: Props) { + const [open, setOpen] = useState(false); + + const onClose = () => { + setOpen(false); + }; + + const onExpand = () => { + setOpen(true); + }; + + const Right = ; + + const items = [ + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Dashboard + + ), + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Favorties + + ), + }, + { + type: "separator", + }, + { + type: "menu-title", + title: "rent", + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Purchases + + ), + }, + { + type: "separator", + }, + { + type: "menu-title", + title: "host", + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Availabilities + + ), + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Settings + + ), + }, + { + type: "separator", + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Help + + ), + }, + ] satisfies MenuItem[]; + + return ( +
+ + +
+ + {children} +
+
+ ); +} diff --git a/src/components/Page/page.css b/src/components/Page/page.css new file mode 100644 index 0000000..c59cc35 --- /dev/null +++ b/src/components/Page/page.css @@ -0,0 +1,7 @@ +.page { + display: flex; +} + +.page-main { + flex: 1; +} diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx index 41e0419..579ae8d 100644 --- a/src/components/Stepper/Stepper.tsx +++ b/src/components/Stepper/Stepper.tsx @@ -118,14 +118,3 @@ export function Stepper({ ); } - -//
-//
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx index a9c15d4..974ec08 100644 --- a/src/components/Toast/Toast.tsx +++ b/src/components/Toast/Toast.tsx @@ -72,7 +72,7 @@ export function Toast({ if (message) { timeout.current = window.setTimeout(() => setMsg(""), duration); } - }, [message, time]); + }, [message, time, duration]); const onClose = () => { if (timeout.current) { diff --git a/src/components/Upload/Upload.tsx b/src/components/Upload/Upload.tsx index a01d5a1..cd333bd 100644 --- a/src/components/Upload/Upload.tsx +++ b/src/components/Upload/Upload.tsx @@ -89,7 +89,7 @@ const defaultProvider = () => return Promise.resolve({ abort: () => {}, result: Promise.resolve({ - error: false as false, + error: false, data: Date.now().toString(), }), } satisfies UploadResponse); diff --git a/src/components/Upload/UploadFile.tsx b/src/components/Upload/UploadFile.tsx index feb4fbe..aad9116 100644 --- a/src/components/Upload/UploadFile.tsx +++ b/src/components/Upload/UploadFile.tsx @@ -1,4 +1,11 @@ -import { useRef, useState, useReducer, Reducer, useEffect } from "react"; +import { + useRef, + useState, + useReducer, + Reducer, + useEffect, + useCallback, +} from "react"; import { attributes } from "../utils/attributes"; import { PrettyBytes } from "../utils/bytes"; import { Toast } from "../Toast/Toast"; @@ -161,20 +168,23 @@ export function UploadFile({ }); const init = useRef(false); - const onInternalSuccess = (cid: string) => { - worker.current?.terminate(); + const onInternalSuccess = useCallback( + (cid: string) => { + worker.current?.terminate(); - queryClient.invalidateQueries({ - queryKey: ["cids"], - }); + queryClient.invalidateQueries({ + queryKey: ["cids"], + }); - if (onSuccess) { - onSuccess(cid); - dispatch({ type: "reset" }); - } else { - dispatch({ type: "completed", cid }); - } - }; + if (onSuccess) { + onSuccess(cid); + dispatch({ type: "reset" }); + } else { + dispatch({ type: "completed", cid }); + } + }, + [onSuccess, dispatch, queryClient] + ); const onProgress = (loaded: number, total: number) => { dispatch({ @@ -238,7 +248,7 @@ export function UploadFile({ console.info("running file !!"); mutateAsync(file); } - }, []); + }, [file, mutateAsync, onInternalSuccess, useWorker, provider]); const onCancel = () => { if (worker.current) { diff --git a/stories/AppBar.stories.tsx b/stories/AppBar.stories.tsx new file mode 100644 index 0000000..e1b5777 --- /dev/null +++ b/stories/AppBar.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { AppBar } from "../src/components/AppBar/AppBar"; +import { fn } from "@storybook/test"; +import { NetworkIndicator } from "../src/components/NetworkIndicator/NetworkIndicator"; + +const meta = { + title: "Components/AppBar", + component: AppBar, + parameters: { + layout: "fullwidth", + }, + tags: ["autodocs"], + argTypes: {}, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + onExpand: fn(), + Right: , + }, +}; diff --git a/stories/Card.stories.ts b/stories/Card.stories.ts index cb1a441..a57fc22 100644 --- a/stories/Card.stories.ts +++ b/stories/Card.stories.ts @@ -18,14 +18,14 @@ type Story = StoryObj; export const Default: Story = { args: { title: "Hello", - children: React.createElement("p", {}, "Hello World !"), + children: React.createElement("div", {}, "Hello World !"), }, }; export const CustomStyle: Story = { args: { title: "Hello", - children: React.createElement("p", {}, "Hello World !"), + children: React.createElement("div", {}, "Hello World !"), style: { "--codex-border-radius": "0px" }, }, }; diff --git a/stories/Menu.stories.css b/stories/Menu.stories.css new file mode 100644 index 0000000..cb728e8 --- /dev/null +++ b/stories/Menu.stories.css @@ -0,0 +1,14 @@ +.menu-story { + min-height: 500px; +} + +@media (min-width: 1000px) { + .menu-noSticky { + transform: translatex(-500px) !important; + position: fixed; + } +} + +.menu-noSticky[aria-expanded] { + transform: translatex(0) !important; +} diff --git a/stories/Menu.stories.tsx b/stories/Menu.stories.tsx new file mode 100644 index 0000000..d5d5810 --- /dev/null +++ b/stories/Menu.stories.tsx @@ -0,0 +1,134 @@ +import type { Meta } from "@storybook/react"; +import { + Menu, + MenuItem, + MenuItemComponentProps, +} from "../src/components/Menu/Menu"; +import { useState } from "react"; +import { fn } from "@storybook/test"; +import { + HelpCircle, + Home, + Server, + Settings, + ShoppingBag, + Star, +} from "lucide-react"; +import "./Menu.stories.css"; + +const meta = { + title: "Overlays/Menu", + component: Menu, + parameters: { + layout: "centered", + }, + tags: ["autodocs"], + argTypes: {}, + args: { + onClose: fn(), + onOpen: fn(), + }, +} satisfies Meta; + +export default meta; + +type Props = { + onClose: () => void; + onOpen: () => void; +}; + +const Template = (p: Props) => { + const [open, setOpen] = useState(false); + + const onClose = () => { + p.onClose(); + setOpen(false); + }; + + const onOpen = () => { + setOpen(true); + }; + + const items = [ + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Dashboard + + ), + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Favorties + + ), + }, + { + type: "separator", + }, + { + type: "menu-title", + title: "rent", + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Purchases + + ), + }, + { + type: "separator", + }, + { + type: "menu-title", + title: "host", + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Availabilities + + ), + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Settings + + ), + }, + { + type: "separator", + }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + Help + + ), + }, + ] satisfies MenuItem[]; + + return ( +
+ + +
+ ); +}; + +export const Default = Template; diff --git a/stories/NetworkIndicator.stories.ts b/stories/NetworkIndicator.stories.ts new file mode 100644 index 0000000..4fd41ad --- /dev/null +++ b/stories/NetworkIndicator.stories.ts @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { NetworkIndicator } from "../src/components/NetworkIndicator/NetworkIndicator"; + +const meta = { + title: "Components/NetworkIndicator", + component: NetworkIndicator, + parameters: { + layout: "centered", + }, + tags: ["autodocs"], + argTypes: {}, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Online: Story = { + args: { + online: true, + text: "Online", + }, +}; + +export const Offline: Story = { + args: { + online: false, + text: "Offline", + }, +}; diff --git a/stories/Page.stories.css b/stories/Page.stories.css new file mode 100644 index 0000000..c6ca154 --- /dev/null +++ b/stories/Page.stories.css @@ -0,0 +1,7 @@ +body { + margin: 0; +} + +.page { + height: 100vh; +} diff --git a/stories/Page.stories.tsx b/stories/Page.stories.tsx new file mode 100644 index 0000000..c3fc5df --- /dev/null +++ b/stories/Page.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Page } from "../src/components/Page/Page"; +import "./Page.stories.css"; + +const meta = { + title: "Layouts/Page", + component: Page, + parameters: { + layout: "fullwidth", + }, + tags: ["autodocs"], + argTypes: {}, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + children: ( + Hello World + ), + }, +}; diff --git a/stories/Stepper.stories.tsx b/stories/Stepper.stories.tsx index d7e203e..4f62286 100644 --- a/stories/Stepper.stories.tsx +++ b/stories/Stepper.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import { Stepper } from "../src/components/Stepper/Stepper"; import React, { useState } from "react"; import { fn } from "@storybook/test"; @@ -41,7 +41,7 @@ const Template = (p: Props) => { return ( React.createElement("p", {}, title)} + Body={() => React.createElement("div", {}, title)} titles={titles} onChangeStep={onChangeStep} progress={progress} diff --git a/stories/Toast.stories.tsx b/stories/Toast.stories.tsx index 2f8ee59..b15f250 100644 --- a/stories/Toast.stories.tsx +++ b/stories/Toast.stories.tsx @@ -1,7 +1,7 @@ -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import { CircleCheck } from "lucide-react"; import { Toast } from "../src/components/Toast/Toast"; -import { MouseEvent, useState } from "react"; +import { useState } from "react"; const meta = { title: "Overlays/Toast", @@ -17,12 +17,11 @@ const meta = { } satisfies Meta; export default meta; -type Story = StoryObj; const Template = () => { const [time, setTime] = useState(0); - const onClick = (_: MouseEvent) => setTime(Date.now()); + const onClick = () => setTime(Date.now()); return (
diff --git a/stories/Upload.stories.css b/stories/Upload.stories.css new file mode 100644 index 0000000..f00811f --- /dev/null +++ b/stories/Upload.stories.css @@ -0,0 +1,3 @@ +.upload { + min-width: 400px; +} diff --git a/stories/Upload.stories.tsx b/stories/Upload.stories.tsx index eb2c88c..7c7ac7b 100644 --- a/stories/Upload.stories.tsx +++ b/stories/Upload.stories.tsx @@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { UploadResponse } from "@codex/sdk-js"; import { Upload } from "../src/components/Upload/Upload"; import { fn } from "@storybook/test"; +import "./Upload.stories.css"; const meta = { title: "Advanced/Upload", @@ -69,7 +70,7 @@ const slowProvider = () => window.clearInterval(timeout); resolve({ - error: false as false, + error: false, data: Date.now().toString(), }); } diff --git a/vite.config.ts b/vite.config.ts index 33111ca..17ff1c7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -12,7 +12,7 @@ const { glob } = pkg; export default defineConfig({ worker: { rollupOptions: { - external: ["@codex/sdk-js"], + external: ["@codex/sdk-js", "@tanstack/react-query"], output: { globals: { "@codex/sdk-js": "codex-sdk-js", From f981e094926cbf5734fba12ec7dbfcfb09073c95 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Fri, 23 Aug 2024 15:39:50 +0200 Subject: [PATCH 2/2] Fix layout style --- stories/Menu.stories.css | 8 +++----- stories/Menu.stories.tsx | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/stories/Menu.stories.css b/stories/Menu.stories.css index cb728e8..19ac489 100644 --- a/stories/Menu.stories.css +++ b/stories/Menu.stories.css @@ -2,11 +2,9 @@ min-height: 500px; } -@media (min-width: 1000px) { - .menu-noSticky { - transform: translatex(-500px) !important; - position: fixed; - } +.menu-noSticky { + transform: translatex(-1000px) !important; + position: fixed; } .menu-noSticky[aria-expanded] { diff --git a/stories/Menu.stories.tsx b/stories/Menu.stories.tsx index d5d5810..78c822a 100644 --- a/stories/Menu.stories.tsx +++ b/stories/Menu.stories.tsx @@ -20,7 +20,7 @@ const meta = { title: "Overlays/Menu", component: Menu, parameters: { - layout: "centered", + layout: "fullscreen", }, tags: ["autodocs"], argTypes: {},