From e4c53a7af601a58f8ebed5459a0704e2dc0cbd2d Mon Sep 17 00:00:00 2001 From: amorgunov Date: Sun, 28 Jul 2024 12:43:56 +0300 Subject: [PATCH 1/3] Add solidjs-with-modal-manager example --- README.md | 1 + .../.dependency-cruiser.js | 380 +++++ .../solidjs-with-modal-manager/.gitignore | 2 + examples/solidjs-with-modal-manager/README.md | 32 + .../dependency-graph-preview.svg | 540 +++++++ .../eslint.config.mjs | 13 + .../solidjs-with-modal-manager/index.html | 15 + .../solidjs-with-modal-manager/package.json | 34 + .../solidjs-with-modal-manager/pnpm-lock.yaml | 1357 +++++++++++++++++ .../public/favicon.png | Bin 0 -> 1064 bytes .../src/app/App.tsx | 19 + .../src/app/entry.css | 72 + .../src/app/entry.tsx | 15 + .../session/login/ui/LoginForm/LoginForm.tsx | 84 + .../src/pages/404.tsx | 15 + .../src/pages/about.tsx | 17 + .../src/pages/home.tsx | 46 + .../src/shared/lib/modalManager/context.tsx | 33 + .../shared/lib/modalManager/createModal.tsx | 16 + .../src/shared/lib/modalManager/getModalId.ts | 24 + .../src/shared/lib/modalManager/index.tsx | 5 + .../src/shared/lib/modalManager/modalsMap.ts | 11 + .../shared/lib/modalManager/registerModal.ts | 12 + .../src/shared/lib/modalManager/types.ts | 21 + .../lib/modalManager/unregisterModal.ts | 6 + .../src/shared/lib/modalManager/useModal.ts | 77 + .../src/shared/ui/AlertModal/AlertModal.tsx | 25 + .../shared/ui/ConfirmModal/ConfirmModal.tsx | 30 + .../src/shared/ui/Layout/Layout.module.css | 22 + .../src/shared/ui/Layout/Layout.tsx | 26 + .../src/shared/ui/Modal/Modal.module.css | 40 + .../src/shared/ui/Modal/Modal.tsx | 59 + .../src/shared/ui/index.ts | 4 + .../solidjs-with-modal-manager/tsconfig.json | 19 + .../vite.config.mts | 22 + pnpm-lock.yaml | 49 + 36 files changed, 3143 insertions(+) create mode 100644 examples/solidjs-with-modal-manager/.dependency-cruiser.js create mode 100644 examples/solidjs-with-modal-manager/.gitignore create mode 100644 examples/solidjs-with-modal-manager/README.md create mode 100644 examples/solidjs-with-modal-manager/dependency-graph-preview.svg create mode 100644 examples/solidjs-with-modal-manager/eslint.config.mjs create mode 100644 examples/solidjs-with-modal-manager/index.html create mode 100644 examples/solidjs-with-modal-manager/package.json create mode 100644 examples/solidjs-with-modal-manager/pnpm-lock.yaml create mode 100644 examples/solidjs-with-modal-manager/public/favicon.png create mode 100644 examples/solidjs-with-modal-manager/src/app/App.tsx create mode 100644 examples/solidjs-with-modal-manager/src/app/entry.css create mode 100644 examples/solidjs-with-modal-manager/src/app/entry.tsx create mode 100644 examples/solidjs-with-modal-manager/src/features/session/login/ui/LoginForm/LoginForm.tsx create mode 100644 examples/solidjs-with-modal-manager/src/pages/404.tsx create mode 100644 examples/solidjs-with-modal-manager/src/pages/about.tsx create mode 100644 examples/solidjs-with-modal-manager/src/pages/home.tsx create mode 100644 examples/solidjs-with-modal-manager/src/shared/lib/modalManager/context.tsx create mode 100644 examples/solidjs-with-modal-manager/src/shared/lib/modalManager/createModal.tsx create mode 100644 examples/solidjs-with-modal-manager/src/shared/lib/modalManager/getModalId.ts create mode 100644 examples/solidjs-with-modal-manager/src/shared/lib/modalManager/index.tsx create mode 100644 examples/solidjs-with-modal-manager/src/shared/lib/modalManager/modalsMap.ts create mode 100644 examples/solidjs-with-modal-manager/src/shared/lib/modalManager/registerModal.ts create mode 100644 examples/solidjs-with-modal-manager/src/shared/lib/modalManager/types.ts create mode 100644 examples/solidjs-with-modal-manager/src/shared/lib/modalManager/unregisterModal.ts create mode 100644 examples/solidjs-with-modal-manager/src/shared/lib/modalManager/useModal.ts create mode 100644 examples/solidjs-with-modal-manager/src/shared/ui/AlertModal/AlertModal.tsx create mode 100644 examples/solidjs-with-modal-manager/src/shared/ui/ConfirmModal/ConfirmModal.tsx create mode 100644 examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.module.css create mode 100644 examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.tsx create mode 100644 examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.module.css create mode 100644 examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.tsx create mode 100644 examples/solidjs-with-modal-manager/src/shared/ui/index.ts create mode 100644 examples/solidjs-with-modal-manager/tsconfig.json create mode 100644 examples/solidjs-with-modal-manager/vite.config.mts diff --git a/README.md b/README.md index 3af575e..71dfeda 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ A collection of Feature-Sliced Examples that show how you can build applications - **[examples/react-effector-todo-app](./todo-app)** [outdated] - **[examples/solidjs-with-layout](./examples/solidjs-with-layout)** - shows how works with layout +- **[examples/solidjs-with-modal-manager](./examples/solidjs-with-modal-manager)** - shows how to work with modal manager ## Community examples — full projects diff --git a/examples/solidjs-with-modal-manager/.dependency-cruiser.js b/examples/solidjs-with-modal-manager/.dependency-cruiser.js new file mode 100644 index 0000000..8e2197d --- /dev/null +++ b/examples/solidjs-with-modal-manager/.dependency-cruiser.js @@ -0,0 +1,380 @@ +/** @type {import('dependency-cruiser').IConfiguration} */ +module.exports = { + forbidden: [ + { + name: 'no-circular', + severity: 'warn', + comment: + 'This dependency is part of a circular relationship. You might want to revise ' + + 'your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ', + from: {}, + to: { + circular: true + } + }, + { + name: 'no-orphans', + comment: + "This is an orphan module - it's likely not used (anymore?). Either use it or " + + "remove it. If it's logical this module is an orphan (i.e. it's a config file), " + + "add an exception for it in your dependency-cruiser configuration. By default " + + "this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration " + + "files (.d.ts), tsconfig.json and some of the babel and webpack configs.", + severity: 'warn', + from: { + orphan: true, + pathNot: [ + '(^|/)[.][^/]+[.](?:js|cjs|mjs|ts|cts|mts|json)$', // dot files + '[.]d[.]ts$', // TypeScript declaration files + '(^|/)tsconfig[.]json$', // TypeScript config + '(^|/)(?:babel|webpack)[.]config[.](?:js|cjs|mjs|ts|cts|mts|json)$' // other configs + ] + }, + to: {}, + }, + { + name: 'no-deprecated-core', + comment: + 'A module depends on a node core module that has been deprecated. Find an alternative - these are ' + + "bound to exist - node doesn't deprecate lightly.", + severity: 'warn', + from: {}, + to: { + dependencyTypes: [ + 'core' + ], + path: [ + '^v8/tools/codemap$', + '^v8/tools/consarray$', + '^v8/tools/csvparser$', + '^v8/tools/logreader$', + '^v8/tools/profile_view$', + '^v8/tools/profile$', + '^v8/tools/SourceMap$', + '^v8/tools/splaytree$', + '^v8/tools/tickprocessor-driver$', + '^v8/tools/tickprocessor$', + '^node-inspect/lib/_inspect$', + '^node-inspect/lib/internal/inspect_client$', + '^node-inspect/lib/internal/inspect_repl$', + '^async_hooks$', + '^punycode$', + '^domain$', + '^constants$', + '^sys$', + '^_linklist$', + '^_stream_wrap$' + ], + } + }, + { + name: 'not-to-deprecated', + comment: + 'This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later ' + + 'version of that module, or find an alternative. Deprecated modules are a security risk.', + severity: 'warn', + from: {}, + to: { + dependencyTypes: [ + 'deprecated' + ] + } + }, + { + name: 'no-non-package-json', + severity: 'error', + comment: + "This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " + + "That's problematic as the package either (1) won't be available on live (2 - worse) will be " + + "available on live with an non-guaranteed version. Fix it by adding the package to the dependencies " + + "in your package.json.", + from: {}, + to: { + dependencyTypes: [ + 'npm-no-pkg', + 'npm-unknown' + ] + } + }, + { + name: 'not-to-unresolvable', + comment: + "This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " + + 'module: add it to your package.json. In all other cases you likely already know what to do.', + severity: 'error', + from: {}, + to: { + couldNotResolve: true + } + }, + { + name: 'no-duplicate-dep-types', + comment: + "Likely this module depends on an external ('npm') package that occurs more than once " + + "in your package.json i.e. bot as a devDependencies and in dependencies. This will cause " + + "maintenance problems later on.", + severity: 'warn', + from: {}, + to: { + moreThanOneDependencyType: true, + // as it's pretty common to have a type import be a type only import + // _and_ (e.g.) a devDependency - don't consider type-only dependency + // types for this rule + dependencyTypesNot: ["type-only"] + } + }, + + /* rules you might want to tweak for your specific situation: */ + + { + name: 'not-to-spec', + comment: + 'This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. ' + + "If there's something in a spec that's of use to other modules, it doesn't have that single " + + 'responsibility anymore. Factor it out into (e.g.) a separate utility/ helper or a mock.', + severity: 'error', + from: {}, + to: { + path: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$' + } + }, + { + name: 'not-to-dev-dep', + severity: 'error', + comment: + "This module depends on an npm package from the 'devDependencies' section of your " + + 'package.json. It looks like something that ships to production, though. To prevent problems ' + + "with npm packages that aren't there on production declare it (only!) in the 'dependencies'" + + 'section of your package.json. If this module is development only - add it to the ' + + 'from.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration', + from: { + path: '^(src)', + pathNot: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$' + }, + to: { + dependencyTypes: [ + 'npm-dev', + ], + // type only dependencies are not a problem as they don't end up in the + // production code or are ignored by the runtime. + dependencyTypesNot: [ + 'type-only' + ], + pathNot: [ + 'node_modules/@types/' + ] + } + }, + { + name: 'optional-deps-used', + severity: 'info', + comment: + "This module depends on an npm package that is declared as an optional dependency " + + "in your package.json. As this makes sense in limited situations only, it's flagged here. " + + "If you're using an optional dependency here by design - add an exception to your" + + "dependency-cruiser configuration.", + from: {}, + to: { + dependencyTypes: [ + 'npm-optional' + ] + } + }, + { + name: 'peer-deps-used', + comment: + "This module depends on an npm package that is declared as a peer dependency " + + "in your package.json. This makes sense if your package is e.g. a plugin, but in " + + "other cases - maybe not so much. If the use of a peer dependency is intentional " + + "add an exception to your dependency-cruiser configuration.", + severity: 'warn', + from: {}, + to: { + dependencyTypes: [ + 'npm-peer' + ] + } + } + ], + options: { + + /* Which modules not to follow further when encountered */ + doNotFollow: { + /* path: an array of regular expressions in strings to match against */ + path: ['node_modules'] + }, + + /* Which modules to exclude */ + // exclude : { + // /* path: an array of regular expressions in strings to match against */ + // path: '', + // }, + + /* Which modules to exclusively include (array of regular expressions in strings) + dependency-cruiser will skip everything not matching this pattern + */ + // includeOnly : [''], + + /* List of module systems to cruise. + When left out dependency-cruiser will fall back to the list of _all_ + module systems it knows of. It's the default because it's the safe option + It might come at a performance penalty, though. + moduleSystems: ['amd', 'cjs', 'es6', 'tsd'] + + As in practice only commonjs ('cjs') and ecmascript modules ('es6') + are widely used, you can limit the moduleSystems to those. + */ + + // moduleSystems: ['cjs', 'es6'], + + /* prefix for links in html and svg output (e.g. 'https://github.com/you/yourrepo/blob/main/' + to open it on your online repo or `vscode://file/${process.cwd()}/` to + open it in visual studio code), + */ + // prefix: `vscode://file/${process.cwd()}/`, + + /* false (the default): ignore dependencies that only exist before typescript-to-javascript compilation + true: also detect dependencies that only exist before typescript-to-javascript compilation + "specify": for each dependency identify whether it only exists before compilation or also after + */ + tsPreCompilationDeps: true, + + /* list of extensions to scan that aren't javascript or compile-to-javascript. + Empty by default. Only put extensions in here that you want to take into + account that are _not_ parsable. + */ + // extraExtensionsToScan: [".json", ".jpg", ".png", ".svg", ".webp"], + + /* if true combines the package.jsons found from the module up to the base + folder the cruise is initiated from. Useful for how (some) mono-repos + manage dependencies & dependency definitions. + */ + // combinedDependencies: false, + + /* if true leave symlinks untouched, otherwise use the realpath */ + // preserveSymlinks: false, + + /* TypeScript project file ('tsconfig.json') to use for + (1) compilation and + (2) resolution (e.g. with the paths property) + + The (optional) fileName attribute specifies which file to take (relative to + dependency-cruiser's current working directory). When not provided + defaults to './tsconfig.json'. + */ + tsConfig: { + fileName: 'tsconfig.json' + }, + + /* Webpack configuration to use to get resolve options from. + + The (optional) fileName attribute specifies which file to take (relative + to dependency-cruiser's current working directory. When not provided defaults + to './webpack.conf.js'. + + The (optional) `env` and `arguments` attributes contain the parameters + to be passed if your webpack config is a function and takes them (see + webpack documentation for details) + */ + // webpackConfig: { + // fileName: 'webpack.config.js', + // env: {}, + // arguments: {} + // }, + + /* Babel config ('.babelrc', '.babelrc.json', '.babelrc.json5', ...) to use + for compilation + */ + // babelConfig: { + // fileName: '.babelrc', + // }, + + /* List of strings you have in use in addition to cjs/ es6 requires + & imports to declare module dependencies. Use this e.g. if you've + re-declared require, use a require-wrapper or use window.require as + a hack. + */ + // exoticRequireStrings: [], + + /* options to pass on to enhanced-resolve, the package dependency-cruiser + uses to resolve module references to disk. The values below should be + suitable for most situations + + If you use webpack: you can also set these in webpack.conf.js. The set + there will override the ones specified here. + */ + enhancedResolveOptions: { + /* What to consider as an 'exports' field in package.jsons */ + exportsFields: ["exports"], + /* List of conditions to check for in the exports field. + Only works when the 'exportsFields' array is non-empty. + */ + conditionNames: ["import", "require", "node", "default", "types"], + /* + The extensions, by default are the same as the ones dependency-cruiser + can access (run `npx depcruise --info` to see which ones that are in + _your_ environment). If that list is larger than you need you can pass + the extensions you actually use (e.g. [".js", ".jsx"]). This can speed + up module resolution, which is the most expensive step. + */ + // extensions: [".js", ".jsx", ".ts", ".tsx", ".d.ts"], + /* What to consider a 'main' field in package.json */ + + // if you migrate to ESM (or are in an ESM environment already) you will want to + // have "module" in the list of mainFields, like so: + // mainFields: ["module", "main", "types", "typings"], + mainFields: ["main", "types", "typings"], + /* + A list of alias fields in package.jsons + See [this specification](https://github.com/defunctzombie/package-browser-field-spec) and + the webpack [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealiasfields) + documentation + + Defaults to an empty array (= don't use alias fields). + */ + // aliasFields: ["browser"], + }, + reporterOptions: { + dot: { + /* pattern of modules that can be consolidated in the detailed + graphical dependency graph. The default pattern in this configuration + collapses everything in node_modules to one folder deep so you see + the external modules, but their innards. + */ + collapsePattern: 'node_modules/(?:@[^/]+/[^/]+|[^/]+)', + + /* Options to tweak the appearance of your graph.See + https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#reporteroptions + for details and some examples. If you don't specify a theme + dependency-cruiser falls back to a built-in one. + */ + // theme: { + // graph: { + // /* splines: "ortho" gives straight lines, but is slow on big graphs + // splines: "true" gives bezier curves (fast, not as nice as ortho) + // */ + // splines: "true" + // }, + // } + }, + archi: { + /* pattern of modules that can be consolidated in the high level + graphical dependency graph. If you use the high level graphical + dependency graph reporter (`archi`) you probably want to tweak + this collapsePattern to your situation. + */ + collapsePattern: '^(?:packages|src|lib(s?)|app(s?)|bin|test(s?)|spec(s?))/[^/]+|node_modules/(?:@[^/]+/[^/]+|[^/]+)', + + /* Options to tweak the appearance of your graph. If you don't specify a + theme for 'archi' dependency-cruiser will use the one specified in the + dot section above and otherwise use the default one. + */ + // theme: { }, + }, + "text": { + "highlightFocused": true + }, + } + } +}; +// generated: dependency-cruiser@16.3.3 on 2024-06-23T18:11:29.143Z diff --git a/examples/solidjs-with-modal-manager/.gitignore b/examples/solidjs-with-modal-manager/.gitignore new file mode 100644 index 0000000..76add87 --- /dev/null +++ b/examples/solidjs-with-modal-manager/.gitignore @@ -0,0 +1,2 @@ +node_modules +dist \ No newline at end of file diff --git a/examples/solidjs-with-modal-manager/README.md b/examples/solidjs-with-modal-manager/README.md new file mode 100644 index 0000000..33a418d --- /dev/null +++ b/examples/solidjs-with-modal-manager/README.md @@ -0,0 +1,32 @@ +## solidjs-with-modal-manager + +This example shows how to work with a modal manager. Usually, a modal manager is not used, and either the modal component is rendered inside the component using it along with the `[isOpen, setIsOpen]` state, or all modals are rendered in the root component ([пример](https://github.com/falkomerr/falkchat/blob/master/src/app/_providers/modal-provider.tsx#L34-L47 +)). + +This works when we have a couple of modal. But as soon as the application grows, it leads to various issues (when different arguments need to be passed to the modal, when multiple modals need to be shown simultaneously, when the modal can be used in different parts of the application). + +If we consider the modal as a global representation (like a router), it is very convenient to work with it declaratively - register the modal in the DI container and use a special API for management. This way, modals will be declared near their intended place (they can be lazily loaded out of the box), collocated and there will be a single global state (just like with the application's routes), from where the modal will be managed. + +The modal component (dumb markup) is located in `@/shared/ui/Modal`. Based on it, three components are made in the example (two basic components and one for working with the user flow). + +- Confirm modal - `@/shared/ui/ConfirmModal` +- Alert modal - `@/shared/ui/AlertModal` +- Login modal - `@/features/session/login/ui/LoginModal` + +The entire manager mechanism is moved to the segment `@/shared/lib/modalManager/*` (this is a very basic version inspired by the library https://github.com/eBay/nice-modal-react). + +![Dependency Graph](./dependency-graph-preview.svg) + +### Live preview + +Preview live with [StackBlitz](https://stackblitz.com/github/feature-sliced/examples/tree/master/examples/solidjs-with-modal-manager?file=README.md). + +### How to use + +Install deps and then run with npm, Yarn or pnpm to startup the example: + +```bash +npm run dev +yarn dev +pnpm dev +``` diff --git a/examples/solidjs-with-modal-manager/dependency-graph-preview.svg b/examples/solidjs-with-modal-manager/dependency-graph-preview.svg new file mode 100644 index 0000000..2aaa03c --- /dev/null +++ b/examples/solidjs-with-modal-manager/dependency-graph-preview.svg @@ -0,0 +1,540 @@ + + + + + + +dependency-cruiser output + + +cluster_src + +src + + +cluster_src/app + +app + + +cluster_src/features + +features + + +cluster_src/features/session + +session + + +cluster_src/features/session/login + +login + + +cluster_src/features/session/login/ui + +ui + + +cluster_src/features/session/login/ui/LoginForm + +LoginForm + + +cluster_src/pages + +pages + + +cluster_src/shared + +shared + + +cluster_src/shared/lib + +lib + + +cluster_src/shared/lib/modalManager + +modalManager + + +cluster_src/shared/ui + +ui + + +cluster_src/shared/ui/AlertModal + +AlertModal + + +cluster_src/shared/ui/ConfirmModal + +ConfirmModal + + +cluster_src/shared/ui/Layout + +Layout + + +cluster_src/shared/ui/Modal + +Modal + + + +src/app/App.tsx + + +App.tsx + + + + + +src/pages/404.tsx + + +404.tsx + + + + + +src/app/App.tsx->src/pages/404.tsx + + + + + +src/pages/about.tsx + + +about.tsx + + + + + +src/app/App.tsx->src/pages/about.tsx + + + + + +src/pages/home.tsx + + +home.tsx + + + + + +src/app/App.tsx->src/pages/home.tsx + + + + + +src/shared/lib/modalManager/index.tsx + + +index.tsx + + + + + +src/app/App.tsx->src/shared/lib/modalManager/index.tsx + + + + + +src/shared/ui/index.ts + + +index.ts + + + + + +src/app/App.tsx->src/shared/ui/index.ts + + + + + +src/pages/home.tsx->src/shared/ui/index.ts + + + + + +src/features/session/login/ui/LoginForm/LoginForm.tsx + + +LoginForm.tsx + + + + + +src/pages/home.tsx->src/features/session/login/ui/LoginForm/LoginForm.tsx + + + + + +src/shared/lib/modalManager/context.tsx + + +context.tsx + + + + + +src/shared/lib/modalManager/index.tsx->src/shared/lib/modalManager/context.tsx + + + + + +src/shared/lib/modalManager/createModal.tsx + + +createModal.tsx + + + + + +src/shared/lib/modalManager/index.tsx->src/shared/lib/modalManager/createModal.tsx + + + + + +src/shared/lib/modalManager/modalsMap.ts + + +modalsMap.ts + + + + + +src/shared/lib/modalManager/index.tsx->src/shared/lib/modalManager/modalsMap.ts + + + + + +src/shared/lib/modalManager/registerModal.ts + + +registerModal.ts + + + + + +src/shared/lib/modalManager/index.tsx->src/shared/lib/modalManager/registerModal.ts + + + + + +src/shared/lib/modalManager/useModal.ts + + +useModal.ts + + + + + +src/shared/lib/modalManager/index.tsx->src/shared/lib/modalManager/useModal.ts + + + + + +src/shared/ui/AlertModal/AlertModal.tsx + + +AlertModal.tsx + + + + + +src/shared/ui/index.ts->src/shared/ui/AlertModal/AlertModal.tsx + + + + + +src/shared/ui/Modal/Modal.tsx + + +Modal.tsx + + + + + +src/shared/ui/index.ts->src/shared/ui/Modal/Modal.tsx + + + + + +src/shared/ui/ConfirmModal/ConfirmModal.tsx + + +ConfirmModal.tsx + + + + + +src/shared/ui/index.ts->src/shared/ui/ConfirmModal/ConfirmModal.tsx + + + + + +src/shared/ui/Layout/Layout.tsx + + +Layout.tsx + + + + + +src/shared/ui/index.ts->src/shared/ui/Layout/Layout.tsx + + + + + +src/app/entry.css + + +entry.css + + + + + +src/app/entry.tsx + + +entry.tsx + + + + + +src/app/entry.tsx->src/app/App.tsx + + + + + +src/app/entry.tsx->src/app/entry.css + + + + + +src/features/session/login/ui/LoginForm/LoginForm.tsx->src/shared/lib/modalManager/index.tsx + + + + + +src/features/session/login/ui/LoginForm/LoginForm.tsx->src/shared/ui/index.ts + + + + + +src/shared/lib/modalManager/types.ts + + +types.ts + + + + + +src/shared/lib/modalManager/context.tsx->src/shared/lib/modalManager/types.ts + + + + + +src/shared/lib/modalManager/createModal.tsx->src/shared/lib/modalManager/context.tsx + + + + + +src/shared/lib/modalManager/createModal.tsx->src/shared/lib/modalManager/types.ts + + + + + +src/shared/lib/modalManager/getModalId.ts + + +getModalId.ts + + + + + +src/shared/lib/modalManager/getModalId.ts->src/shared/lib/modalManager/types.ts + + + + + +src/shared/lib/modalManager/modalsMap.ts->src/shared/lib/modalManager/types.ts + + + + + +src/shared/lib/modalManager/registerModal.ts->src/shared/lib/modalManager/context.tsx + + + + + +src/shared/lib/modalManager/registerModal.ts->src/shared/lib/modalManager/types.ts + + + + + +src/shared/lib/modalManager/useModal.ts->src/shared/lib/modalManager/context.tsx + + + + + +src/shared/lib/modalManager/useModal.ts->src/shared/lib/modalManager/types.ts + + + + + +src/shared/lib/modalManager/useModal.ts->src/shared/lib/modalManager/getModalId.ts + + + + + +src/shared/lib/modalManager/useModal.ts->src/shared/lib/modalManager/registerModal.ts + + + + + +src/shared/lib/modalManager/unregisterModal.ts + + +unregisterModal.ts + + + + + +src/shared/lib/modalManager/unregisterModal.ts->src/shared/lib/modalManager/context.tsx + + + + + +src/shared/lib/modalManager/unregisterModal.ts->src/shared/lib/modalManager/types.ts + + + + + +src/shared/ui/AlertModal/AlertModal.tsx->src/shared/lib/modalManager/index.tsx + + + + + +src/shared/ui/AlertModal/AlertModal.tsx->src/shared/ui/Modal/Modal.tsx + + + + + +src/shared/ui/Modal/Modal.tsx->src/shared/lib/modalManager/index.tsx + + + + + +src/shared/ui/Modal/Modal.module.css + + +Modal.module.css + + + + + +src/shared/ui/Modal/Modal.tsx->src/shared/ui/Modal/Modal.module.css + + + + + +src/shared/ui/ConfirmModal/ConfirmModal.tsx->src/shared/lib/modalManager/index.tsx + + + + + +src/shared/ui/ConfirmModal/ConfirmModal.tsx->src/shared/ui/Modal/Modal.tsx + + + + + +src/shared/ui/Layout/Layout.module.css + + +Layout.module.css + + + + + +src/shared/ui/Layout/Layout.tsx->src/shared/ui/Layout/Layout.module.css + + + + + diff --git a/examples/solidjs-with-modal-manager/eslint.config.mjs b/examples/solidjs-with-modal-manager/eslint.config.mjs new file mode 100644 index 0000000..d886ce1 --- /dev/null +++ b/examples/solidjs-with-modal-manager/eslint.config.mjs @@ -0,0 +1,13 @@ +import antfu from '@antfu/eslint-config' + +export default antfu({ + solid: true, + formatters: { + css: true, + html: true, + }, +}, { + rules: { + '@typescript-eslint/consistent-type-definitions': ['error', 'type'], + }, +}) diff --git a/examples/solidjs-with-modal-manager/index.html b/examples/solidjs-with-modal-manager/index.html new file mode 100644 index 0000000..48a2511 --- /dev/null +++ b/examples/solidjs-with-modal-manager/index.html @@ -0,0 +1,15 @@ + + + + + + + + solidjs-with-layout + + + +
+ + + diff --git a/examples/solidjs-with-modal-manager/package.json b/examples/solidjs-with-modal-manager/package.json new file mode 100644 index 0000000..041c8d5 --- /dev/null +++ b/examples/solidjs-with-modal-manager/package.json @@ -0,0 +1,34 @@ +{ + "name": "solidjs-with-modal-manager", + "private": true, + "license": "MIT", + "scripts": { + "start": "vite", + "dev": "vite", + "build": "vite build", + "serve": "vite preview", + "lint": "eslint .", + "lint:fix": "eslint . --fix", + "lint:fsd": "steiger ./src", + "dep-cruiser:preview": "npx depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph-preview.svg" + }, + "dependencies": { + "@solid-primitives/keyboard": "^1.2.8", + "@solidjs/meta": "^0.29.4", + "@solidjs/router": "^0.13.6", + "solid-js": "^1.8.11" + }, + "devDependencies": { + "@antfu/eslint-config": "^2.21.1", + "dependency-cruiser": "^16.3.3", + "eslint": "^9.5.0", + "eslint-plugin-format": "^0.1.2", + "eslint-plugin-solid": "^0.14.0", + "solid-devtools": "^0.29.2", + "steiger": "^0.1.2", + "typescript": "^5.3.3", + "vite": "^5.0.11", + "vite-plugin-solid": "^2.8.2", + "vite-tsconfig-paths": "^4.3.2" + } +} diff --git a/examples/solidjs-with-modal-manager/pnpm-lock.yaml b/examples/solidjs-with-modal-manager/pnpm-lock.yaml new file mode 100644 index 0000000..6cfc02b --- /dev/null +++ b/examples/solidjs-with-modal-manager/pnpm-lock.yaml @@ -0,0 +1,1357 @@ +lockfileVersion: '6.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +dependencies: + solid-js: + specifier: ^1.8.11 + version: 1.8.11 + +devDependencies: + solid-devtools: + specifier: ^0.29.2 + version: 0.29.2(solid-js@1.8.11)(vite@5.0.11) + typescript: + specifier: ^5.3.3 + version: 5.3.3 + vite: + specifier: ^5.0.11 + version: 5.0.11 + vite-plugin-solid: + specifier: ^2.8.2 + version: 2.8.2(solid-js@1.8.11)(vite@5.0.11) + +packages: + + /@ampproject/remapping@2.2.1: + resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} + engines: {node: '>=6.0.0'} + dependencies: + '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/trace-mapping': 0.3.18 + dev: true + + /@babel/code-frame@7.23.5: + resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/highlight': 7.23.4 + chalk: 2.4.2 + dev: true + + /@babel/compat-data@7.23.5: + resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==} + engines: {node: '>=6.9.0'} + dev: true + + /@babel/core@7.23.7: + resolution: {integrity: sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==} + engines: {node: '>=6.9.0'} + dependencies: + '@ampproject/remapping': 2.2.1 + '@babel/code-frame': 7.23.5 + '@babel/generator': 7.23.6 + '@babel/helper-compilation-targets': 7.23.6 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7) + '@babel/helpers': 7.23.8 + '@babel/parser': 7.23.6 + '@babel/template': 7.22.15 + '@babel/traverse': 7.23.7 + '@babel/types': 7.23.6 + convert-source-map: 2.0.0 + debug: 4.3.4 + gensync: 1.0.0-beta.2 + json5: 2.2.3 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/generator@7.23.6: + resolution: {integrity: sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.6 + '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/trace-mapping': 0.3.18 + jsesc: 2.5.2 + dev: true + + /@babel/helper-annotate-as-pure@7.22.5: + resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@babel/helper-compilation-targets@7.23.6: + resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/compat-data': 7.23.5 + '@babel/helper-validator-option': 7.23.5 + browserslist: 4.22.2 + lru-cache: 5.1.1 + semver: 6.3.1 + dev: true + + /@babel/helper-create-class-features-plugin@7.23.7(@babel/core@7.23.7): + resolution: {integrity: sha512-xCoqR/8+BoNnXOY7RVSgv6X+o7pmT5q1d+gGcRlXYkI+9B31glE4jeejhKVpA04O1AtzOt7OSQ6VYKP5FcRl9g==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 + '@babel/helper-member-expression-to-functions': 7.23.0 + '@babel/helper-optimise-call-expression': 7.22.5 + '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.7) + '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + semver: 6.3.1 + dev: true + + /@babel/helper-environment-visitor@7.22.20: + resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==} + engines: {node: '>=6.9.0'} + dev: true + + /@babel/helper-function-name@7.23.0: + resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.22.15 + '@babel/types': 7.23.6 + dev: true + + /@babel/helper-hoist-variables@7.22.5: + resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.6 + dev: true + + /@babel/helper-member-expression-to-functions@7.23.0: + resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.6 + dev: true + + /@babel/helper-module-imports@7.18.6: + resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@babel/helper-module-imports@7.22.15: + resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.6 + dev: true + + /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.7): + resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-module-imports': 7.22.15 + '@babel/helper-simple-access': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + '@babel/helper-validator-identifier': 7.22.20 + dev: true + + /@babel/helper-optimise-call-expression@7.22.5: + resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@babel/helper-plugin-utils@7.22.5: + resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} + engines: {node: '>=6.9.0'} + dev: true + + /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.7): + resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-member-expression-to-functions': 7.23.0 + '@babel/helper-optimise-call-expression': 7.22.5 + dev: true + + /@babel/helper-simple-access@7.22.5: + resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@babel/helper-skip-transparent-expression-wrappers@7.22.5: + resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@babel/helper-split-export-declaration@7.22.6: + resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@babel/helper-string-parser@7.22.5: + resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==} + engines: {node: '>=6.9.0'} + dev: true + + /@babel/helper-string-parser@7.23.4: + resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==} + engines: {node: '>=6.9.0'} + dev: true + + /@babel/helper-validator-identifier@7.22.20: + resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} + engines: {node: '>=6.9.0'} + dev: true + + /@babel/helper-validator-identifier@7.22.5: + resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} + engines: {node: '>=6.9.0'} + dev: true + + /@babel/helper-validator-option@7.23.5: + resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==} + engines: {node: '>=6.9.0'} + dev: true + + /@babel/helpers@7.23.8: + resolution: {integrity: sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.22.15 + '@babel/traverse': 7.23.7 + '@babel/types': 7.23.6 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/highlight@7.23.4: + resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-validator-identifier': 7.22.20 + chalk: 2.4.2 + js-tokens: 4.0.0 + dev: true + + /@babel/parser@7.22.5: + resolution: {integrity: sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@babel/parser@7.23.6: + resolution: {integrity: sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.23.6 + dev: true + + /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.23.7): + resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-plugin-utils': 7.22.5 + dev: true + + /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.7): + resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-plugin-utils': 7.22.5 + dev: true + + /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.7): + resolution: {integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-plugin-utils': 7.22.5 + dev: true + + /@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.7): + resolution: {integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7) + '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-simple-access': 7.22.5 + dev: true + + /@babel/plugin-transform-typescript@7.23.6(@babel/core@7.23.7): + resolution: {integrity: sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-create-class-features-plugin': 7.23.7(@babel/core@7.23.7) + '@babel/helper-plugin-utils': 7.22.5 + '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.7) + dev: true + + /@babel/preset-typescript@7.23.3(@babel/core@7.23.7): + resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-validator-option': 7.23.5 + '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.7) + dev: true + + /@babel/template@7.22.15: + resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.23.5 + '@babel/parser': 7.23.6 + '@babel/types': 7.23.6 + dev: true + + /@babel/traverse@7.23.7: + resolution: {integrity: sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.23.5 + '@babel/generator': 7.23.6 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 + '@babel/helper-hoist-variables': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + '@babel/parser': 7.23.6 + '@babel/types': 7.23.6 + debug: 4.3.4 + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + dev: true + + /@babel/types@7.22.5: + resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.22.5 + '@babel/helper-validator-identifier': 7.22.5 + to-fast-properties: 2.0.0 + dev: true + + /@babel/types@7.23.6: + resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.23.4 + '@babel/helper-validator-identifier': 7.22.20 + to-fast-properties: 2.0.0 + dev: true + + /@esbuild/aix-ppc64@0.19.11: + resolution: {integrity: sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [aix] + requiresBuild: true + dev: true + optional: true + + /@esbuild/android-arm64@0.19.11: + resolution: {integrity: sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@esbuild/android-arm@0.19.11: + resolution: {integrity: sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@esbuild/android-x64@0.19.11: + resolution: {integrity: sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@esbuild/darwin-arm64@0.19.11: + resolution: {integrity: sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@esbuild/darwin-x64@0.19.11: + resolution: {integrity: sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@esbuild/freebsd-arm64@0.19.11: + resolution: {integrity: sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/freebsd-x64@0.19.11: + resolution: {integrity: sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-arm64@0.19.11: + resolution: {integrity: sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-arm@0.19.11: + resolution: {integrity: sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-ia32@0.19.11: + resolution: {integrity: sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-loong64@0.19.11: + resolution: {integrity: sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-mips64el@0.19.11: + resolution: {integrity: sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-ppc64@0.19.11: + resolution: {integrity: sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-riscv64@0.19.11: + resolution: {integrity: sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-s390x@0.19.11: + resolution: {integrity: sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-x64@0.19.11: + resolution: {integrity: sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/netbsd-x64@0.19.11: + resolution: {integrity: sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/openbsd-x64@0.19.11: + resolution: {integrity: sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/sunos-x64@0.19.11: + resolution: {integrity: sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-arm64@0.19.11: + resolution: {integrity: sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-ia32@0.19.11: + resolution: {integrity: sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-x64@0.19.11: + resolution: {integrity: sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@jridgewell/gen-mapping@0.3.3: + resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} + engines: {node: '>=6.0.0'} + dependencies: + '@jridgewell/set-array': 1.1.2 + '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/trace-mapping': 0.3.18 + dev: true + + /@jridgewell/resolve-uri@3.1.0: + resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==} + engines: {node: '>=6.0.0'} + dev: true + + /@jridgewell/set-array@1.1.2: + resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} + engines: {node: '>=6.0.0'} + dev: true + + /@jridgewell/sourcemap-codec@1.4.14: + resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==} + dev: true + + /@jridgewell/sourcemap-codec@1.4.15: + resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} + dev: true + + /@jridgewell/trace-mapping@0.3.18: + resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==} + dependencies: + '@jridgewell/resolve-uri': 3.1.0 + '@jridgewell/sourcemap-codec': 1.4.14 + dev: true + + /@nothing-but/utils@0.12.1: + resolution: {integrity: sha512-1qZU1Q5El0IjE7JT/ucvJNzdr2hL3W8Rm27xNf1p6gb3Nw8pGnZmxp6/GEW9h+I1k1cICxXNq25hBwknTQ7yhg==} + dev: true + + /@rollup/rollup-android-arm-eabi@4.9.5: + resolution: {integrity: sha512-idWaG8xeSRCfRq9KpRysDHJ/rEHBEXcHuJ82XY0yYFIWnLMjZv9vF/7DOq8djQ2n3Lk6+3qfSH8AqlmHlmi1MA==} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-android-arm64@4.9.5: + resolution: {integrity: sha512-f14d7uhAMtsCGjAYwZGv6TwuS3IFaM4ZnGMUn3aCBgkcHAYErhV1Ad97WzBvS2o0aaDv4mVz+syiN0ElMyfBPg==} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-darwin-arm64@4.9.5: + resolution: {integrity: sha512-ndoXeLx455FffL68OIUrVr89Xu1WLzAG4n65R8roDlCoYiQcGGg6MALvs2Ap9zs7AHg8mpHtMpwC8jBBjZrT/w==} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-darwin-x64@4.9.5: + resolution: {integrity: sha512-UmElV1OY2m/1KEEqTlIjieKfVwRg0Zwg4PLgNf0s3glAHXBN99KLpw5A5lrSYCa1Kp63czTpVll2MAqbZYIHoA==} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-linux-arm-gnueabihf@4.9.5: + resolution: {integrity: sha512-Q0LcU61v92tQB6ae+udZvOyZ0wfpGojtAKrrpAaIqmJ7+psq4cMIhT/9lfV6UQIpeItnq/2QDROhNLo00lOD1g==} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-linux-arm64-gnu@4.9.5: + resolution: {integrity: sha512-dkRscpM+RrR2Ee3eOQmRWFjmV/payHEOrjyq1VZegRUa5OrZJ2MAxBNs05bZuY0YCtpqETDy1Ix4i/hRqX98cA==} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-linux-arm64-musl@4.9.5: + resolution: {integrity: sha512-QaKFVOzzST2xzY4MAmiDmURagWLFh+zZtttuEnuNn19AiZ0T3fhPyjPPGwLNdiDT82ZE91hnfJsUiDwF9DClIQ==} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-linux-riscv64-gnu@4.9.5: + resolution: {integrity: sha512-HeGqmRJuyVg6/X6MpE2ur7GbymBPS8Np0S/vQFHDmocfORT+Zt76qu+69NUoxXzGqVP1pzaY6QIi0FJWLC3OPA==} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-linux-x64-gnu@4.9.5: + resolution: {integrity: sha512-Dq1bqBdLaZ1Gb/l2e5/+o3B18+8TI9ANlA1SkejZqDgdU/jK/ThYaMPMJpVMMXy2uRHvGKbkz9vheVGdq3cJfA==} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-linux-x64-musl@4.9.5: + resolution: {integrity: sha512-ezyFUOwldYpj7AbkwyW9AJ203peub81CaAIVvckdkyH8EvhEIoKzaMFJj0G4qYJ5sw3BpqhFrsCc30t54HV8vg==} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-win32-arm64-msvc@4.9.5: + resolution: {integrity: sha512-aHSsMnUw+0UETB0Hlv7B/ZHOGY5bQdwMKJSzGfDfvyhnpmVxLMGnQPGNE9wgqkLUs3+gbG1Qx02S2LLfJ5GaRQ==} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-win32-ia32-msvc@4.9.5: + resolution: {integrity: sha512-AiqiLkb9KSf7Lj/o1U3SEP9Zn+5NuVKgFdRIZkvd4N0+bYrTOovVd0+LmYCPQGbocT4kvFyK+LXCDiXPBF3fyA==} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-win32-x64-msvc@4.9.5: + resolution: {integrity: sha512-1q+mykKE3Vot1kaFJIDoUFv5TuW+QQVaf2FmTT9krg86pQrGStOSJJ0Zil7CFagyxDuouTepzt5Y5TVzyajOdQ==} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@solid-devtools/debugger@0.23.3(solid-js@1.8.11): + resolution: {integrity: sha512-VrgswTjb2FyHxQJp5y5u7OaJ2k1R14LYlAOX/1rDZrGHWKdGYCaWHGzxI7C8AExtMP+LS+WOxy0uXMPQpoAD2g==} + peerDependencies: + solid-js: ^1.8.0 + dependencies: + '@nothing-but/utils': 0.12.1 + '@solid-devtools/shared': 0.13.1(solid-js@1.8.11) + '@solid-primitives/bounds': 0.0.118(solid-js@1.8.11) + '@solid-primitives/cursor': 0.0.112(solid-js@1.8.11) + '@solid-primitives/event-bus': 1.0.9(solid-js@1.8.11) + '@solid-primitives/event-listener': 2.3.1(solid-js@1.8.11) + '@solid-primitives/keyboard': 1.2.6(solid-js@1.8.11) + '@solid-primitives/platform': 0.1.1(solid-js@1.8.11) + '@solid-primitives/rootless': 1.4.3(solid-js@1.8.11) + '@solid-primitives/scheduled': 1.4.2(solid-js@1.8.11) + '@solid-primitives/static-store': 0.0.5(solid-js@1.8.11) + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-devtools/shared@0.13.1(solid-js@1.8.11): + resolution: {integrity: sha512-qaAcZF47FFr4alVQSy5ooLy7mMt4MMDxSHw52heY1oCut8yfXDrnLcYDONabfoin2WYIwsQpjYhryHgjtB0uDg==} + peerDependencies: + solid-js: ^1.8.0 + dependencies: + '@solid-primitives/event-bus': 1.0.9(solid-js@1.8.11) + '@solid-primitives/event-listener': 2.3.1(solid-js@1.8.11) + '@solid-primitives/media': 2.2.6(solid-js@1.8.11) + '@solid-primitives/refs': 1.0.6(solid-js@1.8.11) + '@solid-primitives/rootless': 1.4.3(solid-js@1.8.11) + '@solid-primitives/scheduled': 1.4.2(solid-js@1.8.11) + '@solid-primitives/static-store': 0.0.5(solid-js@1.8.11) + '@solid-primitives/styles': 0.0.111(solid-js@1.8.11) + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/bounds@0.0.118(solid-js@1.8.11): + resolution: {integrity: sha512-Qj42w8LlnhJ3r/t+t0c0vrdwIvvQMPgjEFGmLiwREaA85ojLbgL9lSBq2tKvljeLCvRVkgj10KEUf+vc99VCIg==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/event-listener': 2.3.1(solid-js@1.8.11) + '@solid-primitives/resize-observer': 2.0.23(solid-js@1.8.11) + '@solid-primitives/static-store': 0.0.5(solid-js@1.8.11) + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/cursor@0.0.112(solid-js@1.8.11): + resolution: {integrity: sha512-TAtU7qD7ipSLSXHnq8FhhosAPVX+dnOCb/ITcGcLlj8e/C9YKcxDhgBHJ3R/d1xDRb5/vO/szJtEz6fnQD311Q==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/event-bus@1.0.9(solid-js@1.8.11): + resolution: {integrity: sha512-BI9dla3GQzINsufEzr/CV3B/9e0D1pyk7Ig6kPI6s4geUkiVgFadY5V8R95PEeHH1NagOny7AHpw+RaRIuBpkA==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/event-listener@2.3.1(solid-js@1.8.11): + resolution: {integrity: sha512-S1AfFYatOJ3g/ZUbGDoKplSGLTTfarQ3Mfd3F/fXb9SnzGtROtd+Y6yLkPVzK4AVw83r2wUSaS0GS6dg8izTEQ==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/keyboard@1.2.6(solid-js@1.8.11): + resolution: {integrity: sha512-ZbXkzAwFs+6hyaZ2hT9uQ38iPZzGTjV6kWvVvJ3BDfKASg0dDDuhEZRKmpkmpLfnqOabV58BUkASJWMAA4dZCg==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/event-listener': 2.3.1(solid-js@1.8.11) + '@solid-primitives/rootless': 1.4.3(solid-js@1.8.11) + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/media@2.2.6(solid-js@1.8.11): + resolution: {integrity: sha512-VopOSqoUZgmSFY4SNnwBzHYaoGG+7gQYcwX+RJ/qQtuZJgzOiC+PejZEwNJh+aBZ383HPwrypyd3zrYVm7EnpQ==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/event-listener': 2.3.1(solid-js@1.8.11) + '@solid-primitives/rootless': 1.4.3(solid-js@1.8.11) + '@solid-primitives/static-store': 0.0.6(solid-js@1.8.11) + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/platform@0.1.1(solid-js@1.8.11): + resolution: {integrity: sha512-Ln7dzHFjNDpjmhnKiMAUWBjObRZ01FQtj4ABkSmE51VjLI0i9JW54lbZhJImYjpCyoBjtxBEGWsCgYi9JyRXrA==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + solid-js: 1.8.11 + dev: true + + /@solid-primitives/refs@1.0.6(solid-js@1.8.11): + resolution: {integrity: sha512-ruh4YdVMxThEVnvqbpeLXKojW442vpFU8q7dSKtElGOTa31aKOAkRb9BTbdaTwVjN4BEq79fiiYIXozJNl4dSw==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/resize-observer@2.0.23(solid-js@1.8.11): + resolution: {integrity: sha512-SgKRzRfy1oFbPSapmtF5H9VQcN66foQaQK3QTyzh4cihIG2k/UiVNjbC+el1nEDnSeAP7zTO4Xsf2UW8dc+aBw==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/event-listener': 2.3.1(solid-js@1.8.11) + '@solid-primitives/rootless': 1.4.3(solid-js@1.8.11) + '@solid-primitives/static-store': 0.0.6(solid-js@1.8.11) + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/rootless@1.4.3(solid-js@1.8.11): + resolution: {integrity: sha512-IPsfUhKsqQOxLtRMQWK2EZAYbL9RKJMLBelLwpaXl9+oa1tl5aNvA6GHgrNrK+85oUhiYh7/OuogO18AuHepqQ==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/scheduled@1.4.2(solid-js@1.8.11): + resolution: {integrity: sha512-duKaugDQtPk0v6MnkBuEalWk66/vA2G7zzoimQEvmUdh2+K2o8t908HIfI2NdBfwakQMQBV4epE3TFeN2Vsveg==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + solid-js: 1.8.11 + dev: true + + /@solid-primitives/static-store@0.0.5(solid-js@1.8.11): + resolution: {integrity: sha512-ssQ+s/wrlFAEE4Zw8GV499yBfvWx7SMm+ZVc11wvao4T5xg9VfXCL9Oa+x4h+vPMvSV/Knv5LrsLiUa+wlJUXQ==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/static-store@0.0.6(solid-js@1.8.11): + resolution: {integrity: sha512-PtvkbbucbjT+9p95pksOciG9gOnCtJz4IUyAKX1Ld7YwI+QgtPTo0Wuxs8gNbNtLtoDv5PNv5t4YRzUyl0fwdg==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/styles@0.0.111(solid-js@1.8.11): + resolution: {integrity: sha512-1mBxOGAPXmfD5oYCvqjKBDN7SuNjz2qz7RdH7KtsuNLQh6lpuSKadtHnLvru0Y8Vz1InqTJisBIy/6P5kyDmPw==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/rootless': 1.4.3(solid-js@1.8.11) + '@solid-primitives/utils': 6.2.2(solid-js@1.8.11) + solid-js: 1.8.11 + dev: true + + /@solid-primitives/utils@6.2.2(solid-js@1.8.11): + resolution: {integrity: sha512-11ypVbp987XxETeRqY5Y3OmmTpm8/jZqJXRvo6AyqBthzkvvjEdReuUMU2yVb+pwWGxfZpWHZ6EUCcGXUMhfwg==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + solid-js: 1.8.11 + dev: true + + /@types/babel__core@7.20.5: + resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} + dependencies: + '@babel/parser': 7.22.5 + '@babel/types': 7.22.5 + '@types/babel__generator': 7.6.4 + '@types/babel__template': 7.4.1 + '@types/babel__traverse': 7.20.1 + dev: true + + /@types/babel__generator@7.6.4: + resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==} + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@types/babel__template@7.4.1: + resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} + dependencies: + '@babel/parser': 7.22.5 + '@babel/types': 7.22.5 + dev: true + + /@types/babel__traverse@7.20.1: + resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==} + dependencies: + '@babel/types': 7.22.5 + dev: true + + /@types/estree@1.0.5: + resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + dev: true + + /ansi-styles@3.2.1: + resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} + engines: {node: '>=4'} + dependencies: + color-convert: 1.9.3 + dev: true + + /babel-plugin-jsx-dom-expressions@0.37.13(@babel/core@7.23.7): + resolution: {integrity: sha512-oAEMMIgU0h1DmHn4ZDaBBFc08nsVJciLq9pF7g0ZdpeIDKfY4zXjXr8+/oBjKhXG8nyomhnTodPjeG+/ZXcWXQ==} + peerDependencies: + '@babel/core': ^7.20.12 + dependencies: + '@babel/core': 7.23.7 + '@babel/helper-module-imports': 7.18.6 + '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.23.7) + '@babel/types': 7.22.5 + html-entities: 2.3.3 + validate-html-nesting: 1.2.2 + dev: true + + /babel-preset-solid@1.8.9(@babel/core@7.23.7): + resolution: {integrity: sha512-1awR1QCoryXtAdnjsrx/eVBTYz+tpHUDOdBXqG9oVV7S0ojf2MV/woR0+8BG+LMXVzIr60oKYzCZ9UZGafxmpg==} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.23.7 + babel-plugin-jsx-dom-expressions: 0.37.13(@babel/core@7.23.7) + dev: true + + /browserslist@4.22.2: + resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + dependencies: + caniuse-lite: 1.0.30001579 + electron-to-chromium: 1.4.639 + node-releases: 2.0.14 + update-browserslist-db: 1.0.13(browserslist@4.22.2) + dev: true + + /caniuse-lite@1.0.30001579: + resolution: {integrity: sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==} + dev: true + + /chalk@2.4.2: + resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} + engines: {node: '>=4'} + dependencies: + ansi-styles: 3.2.1 + escape-string-regexp: 1.0.5 + supports-color: 5.5.0 + dev: true + + /color-convert@1.9.3: + resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} + dependencies: + color-name: 1.1.3 + dev: true + + /color-name@1.1.3: + resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==} + dev: true + + /convert-source-map@2.0.0: + resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + dev: true + + /csstype@3.1.2: + resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} + + /debug@4.3.4: + resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + dev: true + + /electron-to-chromium@1.4.639: + resolution: {integrity: sha512-CkKf3ZUVZchr+zDpAlNLEEy2NJJ9T64ULWaDgy3THXXlPVPkLu3VOs9Bac44nebVtdwl2geSj6AxTtGDOxoXhg==} + dev: true + + /esbuild@0.19.11: + resolution: {integrity: sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/aix-ppc64': 0.19.11 + '@esbuild/android-arm': 0.19.11 + '@esbuild/android-arm64': 0.19.11 + '@esbuild/android-x64': 0.19.11 + '@esbuild/darwin-arm64': 0.19.11 + '@esbuild/darwin-x64': 0.19.11 + '@esbuild/freebsd-arm64': 0.19.11 + '@esbuild/freebsd-x64': 0.19.11 + '@esbuild/linux-arm': 0.19.11 + '@esbuild/linux-arm64': 0.19.11 + '@esbuild/linux-ia32': 0.19.11 + '@esbuild/linux-loong64': 0.19.11 + '@esbuild/linux-mips64el': 0.19.11 + '@esbuild/linux-ppc64': 0.19.11 + '@esbuild/linux-riscv64': 0.19.11 + '@esbuild/linux-s390x': 0.19.11 + '@esbuild/linux-x64': 0.19.11 + '@esbuild/netbsd-x64': 0.19.11 + '@esbuild/openbsd-x64': 0.19.11 + '@esbuild/sunos-x64': 0.19.11 + '@esbuild/win32-arm64': 0.19.11 + '@esbuild/win32-ia32': 0.19.11 + '@esbuild/win32-x64': 0.19.11 + dev: true + + /escalade@3.1.1: + resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} + engines: {node: '>=6'} + dev: true + + /escape-string-regexp@1.0.5: + resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} + engines: {node: '>=0.8.0'} + dev: true + + /fsevents@2.3.3: + resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /gensync@1.0.0-beta.2: + resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} + engines: {node: '>=6.9.0'} + dev: true + + /globals@11.12.0: + resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} + engines: {node: '>=4'} + dev: true + + /has-flag@3.0.0: + resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==} + engines: {node: '>=4'} + dev: true + + /html-entities@2.3.3: + resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==} + dev: true + + /is-what@4.1.15: + resolution: {integrity: sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==} + engines: {node: '>=12.13'} + dev: true + + /js-tokens@4.0.0: + resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} + dev: true + + /jsesc@2.5.2: + resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==} + engines: {node: '>=4'} + hasBin: true + dev: true + + /json5@2.2.3: + resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} + engines: {node: '>=6'} + hasBin: true + dev: true + + /lru-cache@5.1.1: + resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + dependencies: + yallist: 3.1.1 + dev: true + + /merge-anything@5.1.7: + resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==} + engines: {node: '>=12.13'} + dependencies: + is-what: 4.1.15 + dev: true + + /ms@2.1.2: + resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} + dev: true + + /nanoid@3.3.7: + resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + dev: true + + /node-releases@2.0.14: + resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} + dev: true + + /picocolors@1.0.0: + resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} + dev: true + + /postcss@8.4.33: + resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.7 + picocolors: 1.0.0 + source-map-js: 1.0.2 + dev: true + + /rollup@4.9.5: + resolution: {integrity: sha512-E4vQW0H/mbNMw2yLSqJyjtkHY9dslf/p0zuT1xehNRqUTBOFMqEjguDvqhXr7N7r/4ttb2jr4T41d3dncmIgbQ==} + engines: {node: '>=18.0.0', npm: '>=8.0.0'} + hasBin: true + dependencies: + '@types/estree': 1.0.5 + optionalDependencies: + '@rollup/rollup-android-arm-eabi': 4.9.5 + '@rollup/rollup-android-arm64': 4.9.5 + '@rollup/rollup-darwin-arm64': 4.9.5 + '@rollup/rollup-darwin-x64': 4.9.5 + '@rollup/rollup-linux-arm-gnueabihf': 4.9.5 + '@rollup/rollup-linux-arm64-gnu': 4.9.5 + '@rollup/rollup-linux-arm64-musl': 4.9.5 + '@rollup/rollup-linux-riscv64-gnu': 4.9.5 + '@rollup/rollup-linux-x64-gnu': 4.9.5 + '@rollup/rollup-linux-x64-musl': 4.9.5 + '@rollup/rollup-win32-arm64-msvc': 4.9.5 + '@rollup/rollup-win32-ia32-msvc': 4.9.5 + '@rollup/rollup-win32-x64-msvc': 4.9.5 + fsevents: 2.3.3 + dev: true + + /semver@6.3.1: + resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} + hasBin: true + dev: true + + /seroval-plugins@1.0.4(seroval@1.0.4): + resolution: {integrity: sha512-DQ2IK6oQVvy8k+c2V5x5YCtUa/GGGsUwUBNN9UqohrZ0rWdUapBFpNMYP1bCyRHoxOJjdKGl+dieacFIpU/i1A==} + engines: {node: '>=10'} + peerDependencies: + seroval: ^1.0 + dependencies: + seroval: 1.0.4 + + /seroval@1.0.4: + resolution: {integrity: sha512-qQs/N+KfJu83rmszFQaTxcoJoPn6KNUruX4KmnmyD0oZkUoiNvJ1rpdYKDf4YHM05k+HOgCxa3yvf15QbVijGg==} + engines: {node: '>=10'} + + /solid-devtools@0.29.2(solid-js@1.8.11)(vite@5.0.11): + resolution: {integrity: sha512-sfGLBSIQ3E5dFha5UCE5wKnz+War99JNAOggfBbwhltXL8lbIG1PnKKB9N2pvloZuFzMtT/u1Qbb/ubqXnw2Sg==} + peerDependencies: + solid-js: ^1.8.0 + solid-start: ^0.3.0 + vite: ^2.2.3 || ^3.0.0 || ^4.0.0 + peerDependenciesMeta: + solid-start: + optional: true + vite: + optional: true + dependencies: + '@babel/core': 7.23.7 + '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.7) + '@babel/types': 7.23.6 + '@solid-devtools/debugger': 0.23.3(solid-js@1.8.11) + '@solid-devtools/shared': 0.13.1(solid-js@1.8.11) + solid-js: 1.8.11 + vite: 5.0.11 + transitivePeerDependencies: + - supports-color + dev: true + + /solid-js@1.8.11: + resolution: {integrity: sha512-WdwmER+TwBJiN4rVQTVBxocg+9pKlOs41KzPYntrC86xO5sek8TzBYozPEZPL1IRWDouf2lMrvSbIs3CanlPvQ==} + dependencies: + csstype: 3.1.2 + seroval: 1.0.4 + seroval-plugins: 1.0.4(seroval@1.0.4) + + /solid-refresh@0.6.3(solid-js@1.8.11): + resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==} + peerDependencies: + solid-js: ^1.3 + dependencies: + '@babel/generator': 7.23.6 + '@babel/helper-module-imports': 7.22.15 + '@babel/types': 7.23.6 + solid-js: 1.8.11 + dev: true + + /source-map-js@1.0.2: + resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} + engines: {node: '>=0.10.0'} + dev: true + + /supports-color@5.5.0: + resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} + engines: {node: '>=4'} + dependencies: + has-flag: 3.0.0 + dev: true + + /to-fast-properties@2.0.0: + resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} + engines: {node: '>=4'} + dev: true + + /typescript@5.3.3: + resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==} + engines: {node: '>=14.17'} + hasBin: true + dev: true + + /update-browserslist-db@1.0.13(browserslist@4.22.2): + resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + dependencies: + browserslist: 4.22.2 + escalade: 3.1.1 + picocolors: 1.0.0 + dev: true + + /validate-html-nesting@1.2.2: + resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==} + dev: true + + /vite-plugin-solid@2.8.2(solid-js@1.8.11)(vite@5.0.11): + resolution: {integrity: sha512-HcvMs6DTxBaO4kE3psnirPQBCUUdYeQkCNKuB2TpEkJsxb6BGP6/7qkbbCSMxn25PyNdjvzVi1WXi0ou8KPgHw==} + peerDependencies: + solid-js: ^1.7.2 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + dependencies: + '@babel/core': 7.23.7 + '@babel/preset-typescript': 7.23.3(@babel/core@7.23.7) + '@types/babel__core': 7.20.5 + babel-preset-solid: 1.8.9(@babel/core@7.23.7) + merge-anything: 5.1.7 + solid-js: 1.8.11 + solid-refresh: 0.6.3(solid-js@1.8.11) + vite: 5.0.11 + vitefu: 0.2.5(vite@5.0.11) + transitivePeerDependencies: + - supports-color + dev: true + + /vite@5.0.11: + resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || >=20.0.0 + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.19.11 + postcss: 8.4.33 + rollup: 4.9.5 + optionalDependencies: + fsevents: 2.3.3 + dev: true + + /vitefu@0.2.5(vite@5.0.11): + resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + peerDependenciesMeta: + vite: + optional: true + dependencies: + vite: 5.0.11 + dev: true + + /yallist@3.1.1: + resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} + dev: true diff --git a/examples/solidjs-with-modal-manager/public/favicon.png b/examples/solidjs-with-modal-manager/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..2a67071650041a0beebd43505d78080e91b2593f GIT binary patch literal 1064 zcmV+@1lRkCP)v)aWD3D&08)|l9@0wCI3z?Dlm zp*|o2fQY~~oyqavE)tpJSJ`e$nZ51I%8u2P6(6{rCy`hPG~s ze0{#Q8QMDMy%5i$5X29vc&%+=0H0~tz2hUifS-b_&(zeeu6Ieywc@h5+9Ya0z*u*M z`YNg%^4_xB4Vwn+_j>;bUEJ-9(z=+ahT?Wlfo0s?mpqvjdlg{QfI9L4DxO&8xHtC_ zhI=h9kkb8h>2mC5yF>E_UAA)&zQAS<)I6*uQYyD=5py+7InwVzmpA?XG`o>+$N`1S z0HQhIafdnX>JoD;I}B&{o0CPg5R+^1`#kPpJvO)7AqvAy17a-kJ}IqXX0f&NZuohH z>s!atfDsPr`x8iqcL*6W=8@qlzhC0|eggoe*tshm#}aY&IO+!D6!&|_S`rTWeYCTy zrZCmeQ!*z4Sk>qc_UET(c(?&JI=nl^YrVpI%x4%6pHF|1FJi0I`HaQ~kmo4948ymr zS^$;O^_3Z(HkPWYa& z-tmBhG0@e5YYv$CqR3_l6wU*Ua&#W|_}9n*DQ=nn$ef+$-3!vWUa}HK=w>ojei-ZX zrUCoE7TZ?eix>Q!>lZxV@jIo`HvBoxbLvVVSTjKL>!56S@;FL9oNh*$!{c7%M%TI` z;&l+I1noLkD1$hcwB&e84!~7I;fF^-iI^q_n5$(fRM_XpMW0~F==6+UM>aj6u^cK? z=K*)2X`gpNX6NcgIgKL5I z9|v`m@<8e8dIx}vt%IBYLoFz&uI~$j4ihi$C=Zw$`d;7T-}iLM^GtB}SZm7<3Yn8h(zV>2n1%*Xy-;Rb;Q9duT=s(q zJ-+d>7ErmnBUmw@4kC1HZCI-bF)SI�mTYclQH}DDL&;|HUA3;G(|wb$_hzh_U1W zs9p<<`=hn*LxNcg%=D+#`hM$J=5b;?dOw)|bhfygl+awO@3)R65h=E-W;bPDPu<@# i>7i*vv{K)19sdCAo+I_mcbb*}0000 + }>{props.children}}> + + + + + + ) +} diff --git a/examples/solidjs-with-modal-manager/src/app/entry.css b/examples/solidjs-with-modal-manager/src/app/entry.css new file mode 100644 index 0000000..2174dc7 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/app/entry.css @@ -0,0 +1,72 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +html, +body, +#root { + min-height: 100%; + min-height: 100vh; + padding: 0; + margin: 0; +} + +[data-fsd^='widget'] { + --fsd-color: #fa0ee9; +} + +[data-fsd^='feature'] { + --fsd-color: #14a200; +} + +[data-fsd^='entity'] { + --fsd-color: #2573e5; +} + +[data-fsd^='shared'] { + --fsd-color: #b6bc59; +} + +[data-fsd] { + outline: 2px solid var(--fsd-color); + position: relative; +} + +[data-fsd]::after { + content: attr(data-fsd); + pointer-events: none; + position: absolute; + top: 0; + right: 0; + box-sizing: border-box; + background: var(--fsd-color); + color: #fff; + font-size: 10px; + line-height: 1; + font-weight: bold; + padding: 0 2px; + font-family: sans-serif; +} + +[data-fsd]::before { + pointer-events: none; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: color-mix(in srgb, var(--fsd-color) 15%, transparent); + content: ''; + z-index: 1; + opacity: 0.8; +} diff --git a/examples/solidjs-with-modal-manager/src/app/entry.tsx b/examples/solidjs-with-modal-manager/src/app/entry.tsx new file mode 100644 index 0000000..75f9986 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/app/entry.tsx @@ -0,0 +1,15 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './entry.css' +import App from './App' + +const root = document.getElementById('root') + +if (import.meta.env.DEV && !(root instanceof HTMLElement)) { + throw new Error( + 'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?', + ) +} + +render(() => , root!) diff --git a/examples/solidjs-with-modal-manager/src/features/session/login/ui/LoginForm/LoginForm.tsx b/examples/solidjs-with-modal-manager/src/features/session/login/ui/LoginForm/LoginForm.tsx new file mode 100644 index 0000000..46b9227 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/features/session/login/ui/LoginForm/LoginForm.tsx @@ -0,0 +1,84 @@ +import { createModal, modalsMap, registerModal, useModal } from '@/shared/lib/modalManager' +import { Modal, useAlertModal } from '@/shared/ui' + +const TEST_USER = { + login: 'john', + password: '12345', +} + +function LoginFormPresenter() { + let loginInputRef: HTMLInputElement | undefined + let passwordInputRef: HTMLInputElement | undefined + const { show: showAlert, remove: removeAlert } = useAlertModal() + + const handleSubmit = (e: Event) => { + e.preventDefault() + + if (!loginInputRef || !passwordInputRef) { + return + } + + if (loginInputRef.value === TEST_USER.login && passwordInputRef.value === TEST_USER.password) { + showAlert({ + title: 'Connection error. Try later', + onButtonClick: removeAlert, + }) + + return + } + + showAlert({ + title: 'Not valid login or password', + onButtonClick: removeAlert, + }) + } + + return ( + +
+
+

+ Use test account: + {' '} + {TEST_USER.login} +  /  + {TEST_USER.password} +

+
+ +
+
+ +
+ +
+
+ + ) +} + +const LoginForm = createModal(LoginFormPresenter) + +/** + * First approach, export hook to manage modal + * + * @example + * const { show: showLoginForm } = useLoginForm() + * const openLoginForm = () => showLoginForm({}) + */ +export function useLoginForm() { + return useModal(LoginForm) +} + +/** + * Second approach, register modal by global id + * + * @example + * const { show: showLoginForm } = useModal(modalsMap.Login) + * const openLoginForm = () => showLoginForm({}) + */ +registerModal(modalsMap.Login, LoginForm) diff --git a/examples/solidjs-with-modal-manager/src/pages/404.tsx b/examples/solidjs-with-modal-manager/src/pages/404.tsx new file mode 100644 index 0000000..db688ce --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/pages/404.tsx @@ -0,0 +1,15 @@ +import { Title } from '@solidjs/meta' +import { A } from '@solidjs/router' + +export function NotFound() { + return ( +
+ Not Found +

Page Not Found

+

+ Page not found. + Return to main page +

+
+ ) +} diff --git a/examples/solidjs-with-modal-manager/src/pages/about.tsx b/examples/solidjs-with-modal-manager/src/pages/about.tsx new file mode 100644 index 0000000..29b1441 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/pages/about.tsx @@ -0,0 +1,17 @@ +import { Title } from '@solidjs/meta' + +export function AboutPage() { + return ( +
+ About +

About

+

+ Visit + {' '} + feature-sliced/examples + {' '} + to see more examples. +

+
+ ) +} diff --git a/examples/solidjs-with-modal-manager/src/pages/home.tsx b/examples/solidjs-with-modal-manager/src/pages/home.tsx new file mode 100644 index 0000000..c130272 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/pages/home.tsx @@ -0,0 +1,46 @@ +import { Title } from '@solidjs/meta' +import { useConfirmModal } from '@/shared/ui' +import { useLoginForm } from '@/features/session/login/ui/LoginForm/LoginForm' + +export function HomePage() { + const { show: showConfirm, remove: removeConfirm } = useConfirmModal() + const { show: showLoginFormModal } = useLoginForm() + + const handleLogout = () => { + showConfirm({ + title: 'Logout', + onConfirm: () => { + // eslint-disable-next-line no-alert + alert('Logout success') + removeConfirm() + }, + onCancel: removeConfirm, + confirmText: 'Logout', + cancelText: 'Stay in system', + }) + } + + return ( +
+ Home +

examples/solidjs-with-modal-manager

+

+ Dumb layout can be placed in the shared layer, smart - in the app layer. +

+

Logout button

+

+ Open alert modal + +

+

+ + {' '} + (feature modal) +

+
+ ) +} diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/context.tsx b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/context.tsx new file mode 100644 index 0000000..da6b104 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/context.tsx @@ -0,0 +1,33 @@ +import type { ParentComponent } from 'solid-js' +import { For, createContext } from 'solid-js' +import { type SetStoreFunction, createStore } from 'solid-js/store' +import type { ModalId, ModalState } from './types' + +export const MODAL_REGISTRY: { [modalId: ModalId]: any } = {} + +type Store = { + modals: Array +} + +export const ModalManagerServiceContext = createContext<{ store: Store, setStore: SetStoreFunction }>() + +export const ModalIdContext = createContext() + +export const ModalManagerService: ParentComponent = (props) => { + const [store, setStoreOrigin] = createStore({ modals: [] as Array }) + const modals = () => store.modals.flatMap(modal => MODAL_REGISTRY[modal.id] ? { ...modal, ...MODAL_REGISTRY[modal.id] } : []) + + // TODO + // visible={() => modal.visible} + + return ( + + + {(modal) => { + return ( modal.id} {...modal.args} />) + }} + + {props.children} + + ) +} diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/createModal.tsx b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/createModal.tsx new file mode 100644 index 0000000..bf97146 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/createModal.tsx @@ -0,0 +1,16 @@ +import type { ParentComponent } from 'solid-js' +import { splitProps } from 'solid-js' +import type { ModalComponentProps } from './types' +import { ModalIdContext } from './context' + +export function createModal

(Component: ParentComponent

) { + return (props: ModalComponentProps

) => { + const [localProps, othersProps] = splitProps(props, ['id']) + + return ( + + + + ) + } +} diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/getModalId.ts b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/getModalId.ts new file mode 100644 index 0000000..731f45d --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/getModalId.ts @@ -0,0 +1,24 @@ +import type { JSX } from 'solid-js' +import type { ModalId } from './types' + +export const symModalId = Symbol('MODAL_ID') + +export type ModalComponent = { + (props: any): JSX.Element + [symModalId]: string +} + +let uidSeed = 0 +const getUuid = () => `_modal_manager_${uidSeed++}` + +export function getModalId(modalOrId: ModalId | ModalComponent) { + if (typeof modalOrId === 'string') { + return modalOrId as ModalId + } + + if (!modalOrId[symModalId]) { + modalOrId[symModalId] = getUuid() + } + + return modalOrId[symModalId] +} diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/index.tsx b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/index.tsx new file mode 100644 index 0000000..583bad0 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/index.tsx @@ -0,0 +1,5 @@ +export { useModal } from './useModal' +export { createModal } from './createModal' +export { modalsMap } from './modalsMap' +export { registerModal } from './registerModal' +export { ModalManagerService } from './context' diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/modalsMap.ts b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/modalsMap.ts new file mode 100644 index 0000000..f40c458 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/modalsMap.ts @@ -0,0 +1,11 @@ +import type { ModalId } from './types' + +export const modalsMap: Record = { + Login: 'login-modal' as ModalId, + // ... +} as const + +export type ModalsProps = { + Login: Record + // ... +} diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/registerModal.ts b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/registerModal.ts new file mode 100644 index 0000000..1045a68 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/registerModal.ts @@ -0,0 +1,12 @@ +import type { ParentComponent } from 'solid-js' +import { MODAL_REGISTRY } from './context' +import type { ModalId } from './types' + +export function registerModal

(id: ModalId, comp: ParentComponent

, props?: Partial

) { + if (!MODAL_REGISTRY[id]) { + MODAL_REGISTRY[id] = { comp, props } + } + else { + MODAL_REGISTRY[id].props = props + } +} diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/types.ts b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/types.ts new file mode 100644 index 0000000..13cd47a --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/types.ts @@ -0,0 +1,21 @@ +import type { Accessor } from 'solid-js' + +export type ModalId = string & { __brand: 'ModalId' } + +export type ModalState = { + id: ModalId + args?: Record + visible?: boolean +} + +export type ModalHandler> = { + id: Accessor + visible: boolean + show: (args?: Props) => Promise + hide: () => Promise + remove: () => void +} + +type InternalModalComponentProps = { id: Accessor } + +export type ModalComponentProps

= P & InternalModalComponentProps diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/unregisterModal.ts b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/unregisterModal.ts new file mode 100644 index 0000000..e69d1a2 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/unregisterModal.ts @@ -0,0 +1,6 @@ +import { MODAL_REGISTRY } from './context' +import type { ModalId } from './types' + +export function unregisterModal(id: ModalId) { + delete MODAL_REGISTRY[id] +} diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/useModal.ts b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/useModal.ts new file mode 100644 index 0000000..5078e17 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/useModal.ts @@ -0,0 +1,77 @@ +import type { Accessor, Component, ComponentProps } from 'solid-js' +import { createEffect, createSignal, useContext } from 'solid-js' +import type { ModalHandler, ModalId, ModalState } from './types' +import { MODAL_REGISTRY, ModalIdContext, ModalManagerServiceContext } from './context' +import { getModalId } from './getModalId' +import { registerModal } from './registerModal' + +export function useModal(): ModalHandler +export function useModal(modalId: ModalId): ModalHandler +export function useModal>(modal: C,): Omit & { + show: (args?: Omit, 'id'>) => Promise +} + +export function useModal(modalOrId?: any): any { + const modalProviderId = useContext(ModalIdContext) + const context = useContext(ModalManagerServiceContext) + + if (!context) { + throw new Error('Provide your app in ModalManagerService context provider') + } + + const useAsComponent = modalOrId && typeof modalOrId !== 'string' + + const [modalId] = createSignal(modalOrId ? getModalId(modalOrId) : modalProviderId) + + if (!modalId) { + throw new Error('modalId is not provided') + } + + const modal = context.store.modals.find(modal => modal.id === modalId())! + + const hide = () => { + context?.setStore('modals', modals => ([ + ...modals.map((modal) => { + if (modal.id !== modalId()) { + return modal + } + + return { + id: modalId(), + visible: false, + args: modal.args, + } + }), + ] as ModalState[])) + } + + const remove = () => { + context?.setStore('modals', modals => ([ + ...modals.filter(modal => modal.id !== modalId()), + ] as ModalState[])) + } + + createEffect(() => { + const id = modalId() as ModalId | undefined + if (useAsComponent && id && !MODAL_REGISTRY[id]) { + registerModal(id, modalOrId) + } + }) + + return { + id: modalId as Accessor, + visible: Boolean(modal?.visible), + show: (args: any) => { + context?.setStore('modals', (modals: ModalState[]) => ([ + ...modals.filter(modal => modal.id !== modalId()), + { + id: modalId(), + visible: true, + args, + }, + ] as ModalState[])) + }, + hide, + remove, + } +} diff --git a/examples/solidjs-with-modal-manager/src/shared/ui/AlertModal/AlertModal.tsx b/examples/solidjs-with-modal-manager/src/shared/ui/AlertModal/AlertModal.tsx new file mode 100644 index 0000000..5360110 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/ui/AlertModal/AlertModal.tsx @@ -0,0 +1,25 @@ +import { Modal } from '../Modal/Modal' +import { createModal, useModal } from '@/shared/lib/modalManager' + +type Props = { + title: string + onButtonClick: () => void + buttonText?: string +} + +function AlertModalPresenter(props: Props) { + return ( + +

{props.title}

+ + + ) +} + +const AlertModal = createModal(AlertModalPresenter) + +export function useAlertModal() { + return useModal(AlertModal) +} diff --git a/examples/solidjs-with-modal-manager/src/shared/ui/ConfirmModal/ConfirmModal.tsx b/examples/solidjs-with-modal-manager/src/shared/ui/ConfirmModal/ConfirmModal.tsx new file mode 100644 index 0000000..e789aa5 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/ui/ConfirmModal/ConfirmModal.tsx @@ -0,0 +1,30 @@ +import { Modal } from '../Modal/Modal' +import { createModal, useModal } from '@/shared/lib/modalManager' + +type Props = { + title: string + onConfirm: () => void + onCancel: () => void + confirmText?: string + cancelText?: string +} + +function ConfirmModalPresenter(props: Props) { + return ( + +

{props.title}

+ + + + ) +} + +const ConfirmModal = createModal(ConfirmModalPresenter) + +export function useConfirmModal() { + return useModal(ConfirmModal) +} diff --git a/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.module.css b/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.module.css new file mode 100644 index 0000000..7a3ee89 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.module.css @@ -0,0 +1,22 @@ +.root { + display: flex; + flex-direction: column; + max-width: 1024px; + width: calc(100% - 8px); + margin: 4px auto; + min-height: calc(100vh - 8px); + gap: 12px; +} + +.header { + padding: 24px; +} + +.footer { + padding: 24px; +} + +.main { + padding: 24px; + flex-grow: 1; +} diff --git a/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.tsx b/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.tsx new file mode 100644 index 0000000..0687291 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.tsx @@ -0,0 +1,26 @@ +import { MetaProvider, Title } from '@solidjs/meta' +import type { JSXElement } from 'solid-js' +import { Suspense } from 'solid-js' +import css from './Layout.module.css' + +type Props = { + headerSlot: JSXElement + children: JSXElement +} + +export function Layout(props: Props) { + return ( + +
+ solidjs-with-layout +
+ {props.headerSlot} +
+
+ {props.children} +
+
Footer
+
+ + ) +} diff --git a/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.module.css b/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.module.css new file mode 100644 index 0000000..9f25771 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.module.css @@ -0,0 +1,40 @@ +:global(body.modalIsOpened) { + overflow: hidden; +} + +.overlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #0007; + z-index: 100; +} + +.modal { + min-height: 160px; + min-width: 320px; + text-align: center; + padding: 20px 30px; + position: fixed; + top: 50%; + right: 50%; + transform: translate(50%, -50%); + background: #fff; + box-shadow: 0 2px 8px #223c5066; + color: #000; + z-index: 101; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 16px; +} + +.closeButton { + position: absolute; + top: 20px; + right: 12px; + cursor: pointer; +} diff --git a/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.tsx b/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.tsx new file mode 100644 index 0000000..76bc726 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.tsx @@ -0,0 +1,59 @@ +import { type JSXElement, createEffect, onCleanup } from 'solid-js' +import { useKeyDownEvent } from '@solid-primitives/keyboard' +import css from './Modal.module.css' +import { useModal } from '@/shared/lib/modalManager' + +type Props = { + children: JSXElement +} + +const BODY_MODAL_IS_OPENED_CLASS = 'modalIsOpened' + +// TODO: Add CSS styles for animation +const ANIMATION_DELAY_MS = 1000 + +export function Modal(props: Props) { + const { id, hide, remove, visible } = useModal() + const event = useKeyDownEvent() + + const handleClose = () => { + hide() + + setTimeout(() => { + remove() + }, ANIMATION_DELAY_MS) + } + + createEffect(() => { + const e = event() + + if (e && e.key === 'Escape' && visible) { + e.preventDefault() + handleClose() + } + }) + + createEffect(() => { + document.body.classList.add(BODY_MODAL_IS_OPENED_CLASS) + }) + + onCleanup(() => { + document.body.classList.remove(BODY_MODAL_IS_OPENED_CLASS) + }) + + return ( +
+
+ visible= + {visible ? '1' : '0'} +
+ + + + +
+ {props.children} +
+
+ ) +} diff --git a/examples/solidjs-with-modal-manager/src/shared/ui/index.ts b/examples/solidjs-with-modal-manager/src/shared/ui/index.ts new file mode 100644 index 0000000..c4a1a55 --- /dev/null +++ b/examples/solidjs-with-modal-manager/src/shared/ui/index.ts @@ -0,0 +1,4 @@ +export { Layout } from './Layout/Layout' +export { Modal } from './Modal/Modal' +export { useAlertModal } from './AlertModal/AlertModal' +export { useConfirmModal } from './ConfirmModal/ConfirmModal' diff --git a/examples/solidjs-with-modal-manager/tsconfig.json b/examples/solidjs-with-modal-manager/tsconfig.json new file mode 100644 index 0000000..c988aa8 --- /dev/null +++ b/examples/solidjs-with-modal-manager/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "ESNext", + "jsx": "preserve", + "jsxImportSource": "solid-js", + "baseUrl": "./src", + "module": "ESNext", + "moduleResolution": "node", + "paths": { + "@/*": ["*"] + }, + "types": ["vite/client"], + "strict": true, + "noEmit": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "isolatedModules": true + } +} diff --git a/examples/solidjs-with-modal-manager/vite.config.mts b/examples/solidjs-with-modal-manager/vite.config.mts new file mode 100644 index 0000000..602e121 --- /dev/null +++ b/examples/solidjs-with-modal-manager/vite.config.mts @@ -0,0 +1,22 @@ +import { defineConfig } from 'vite' +import solidPlugin from 'vite-plugin-solid' +import tsconfigPaths from 'vite-tsconfig-paths' +// import devtools from 'solid-devtools/vite'; + +export default defineConfig({ + plugins: [ + /* + Uncomment the following line to enable solid-devtools. + For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme + */ + // devtools(), + solidPlugin(), + tsconfigPaths(), + ], + server: { + port: 3000, + }, + build: { + target: 'esnext', + }, +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dc3bf64..9bb2b70 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -142,6 +142,55 @@ importers: specifier: ^4.3.2 version: 4.3.2(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(sass@1.34.1)(terser@5.31.1)) + examples/solidjs-with-modal-manager: + dependencies: + '@solid-primitives/keyboard': + specifier: ^1.2.8 + version: 1.2.8(solid-js@1.8.17) + '@solidjs/meta': + specifier: ^0.29.4 + version: 0.29.4(solid-js@1.8.17) + '@solidjs/router': + specifier: ^0.13.6 + version: 0.13.6(solid-js@1.8.17) + solid-js: + specifier: ^1.8.11 + version: 1.8.17 + devDependencies: + '@antfu/eslint-config': + specifier: ^2.21.1 + version: 2.21.1(@vue/compiler-sfc@3.4.29)(eslint-plugin-format@0.1.2(eslint@9.5.0))(eslint-plugin-react-hooks@4.6.2(eslint@9.5.0))(eslint-plugin-solid@0.14.1(eslint@9.5.0)(typescript@5.5.2))(eslint@9.5.0)(typescript@5.5.2) + dependency-cruiser: + specifier: ^16.3.3 + version: 16.3.3 + eslint: + specifier: ^9.5.0 + version: 9.5.0 + eslint-plugin-format: + specifier: ^0.1.2 + version: 0.1.2(eslint@9.5.0) + eslint-plugin-solid: + specifier: ^0.14.0 + version: 0.14.1(eslint@9.5.0)(typescript@5.5.2) + solid-devtools: + specifier: ^0.29.2 + version: 0.29.3(solid-js@1.8.17)(vite@5.3.1(@types/node@20.14.7)(sass@1.34.1)(terser@5.31.1)) + steiger: + specifier: ^0.1.2 + version: 0.1.2(typescript@5.5.2) + typescript: + specifier: ^5.3.3 + version: 5.5.2 + vite: + specifier: ^5.0.11 + version: 5.3.1(@types/node@20.14.7)(sass@1.34.1)(terser@5.31.1) + vite-plugin-solid: + specifier: ^2.8.2 + version: 2.10.2(@testing-library/jest-dom@5.17.0)(solid-js@1.8.17)(vite@5.3.1(@types/node@20.14.7)(sass@1.34.1)(terser@5.31.1)) + vite-tsconfig-paths: + specifier: ^4.3.2 + version: 4.3.2(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(sass@1.34.1)(terser@5.31.1)) + packages: '@adobe/css-tools@4.4.0': From f0bfc08dba98201890c34bf7c4d8c0a19036ec68 Mon Sep 17 00:00:00 2001 From: amorgunov Date: Sun, 28 Jul 2024 12:49:55 +0300 Subject: [PATCH 2/3] Fix --- examples/solidjs-with-modal-manager/.gitignore | 2 +- examples/solidjs-with-modal-manager/index.html | 2 +- .../src/shared/lib/modalManager/context.tsx | 3 --- .../solidjs-with-modal-manager/src/shared/ui/Layout/Layout.tsx | 2 +- 4 files changed, 3 insertions(+), 6 deletions(-) diff --git a/examples/solidjs-with-modal-manager/.gitignore b/examples/solidjs-with-modal-manager/.gitignore index 76add87..f06235c 100644 --- a/examples/solidjs-with-modal-manager/.gitignore +++ b/examples/solidjs-with-modal-manager/.gitignore @@ -1,2 +1,2 @@ node_modules -dist \ No newline at end of file +dist diff --git a/examples/solidjs-with-modal-manager/index.html b/examples/solidjs-with-modal-manager/index.html index 48a2511..e98e9fa 100644 --- a/examples/solidjs-with-modal-manager/index.html +++ b/examples/solidjs-with-modal-manager/index.html @@ -5,7 +5,7 @@ - solidjs-with-layout + solidjs-with-modal-manager diff --git a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/context.tsx b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/context.tsx index da6b104..195bd65 100644 --- a/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/context.tsx +++ b/examples/solidjs-with-modal-manager/src/shared/lib/modalManager/context.tsx @@ -17,9 +17,6 @@ export const ModalManagerService: ParentComponent = (props) => { const [store, setStoreOrigin] = createStore({ modals: [] as Array }) const modals = () => store.modals.flatMap(modal => MODAL_REGISTRY[modal.id] ? { ...modal, ...MODAL_REGISTRY[modal.id] } : []) - // TODO - // visible={() => modal.visible} - return ( diff --git a/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.tsx b/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.tsx index 0687291..a730944 100644 --- a/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.tsx +++ b/examples/solidjs-with-modal-manager/src/shared/ui/Layout/Layout.tsx @@ -12,7 +12,7 @@ export function Layout(props: Props) { return (
- solidjs-with-layout + solidjs-with-modal-manager
{props.headerSlot}
From d6c9b3d0ccbf21464e4bd15c8a111a3a97630837 Mon Sep 17 00:00:00 2001 From: amorgunov Date: Sun, 28 Jul 2024 13:11:50 +0300 Subject: [PATCH 3/3] Update index.html sandbox --- .../solidjs-with-modal-manager/src/pages/home.tsx | 12 +++++------- .../src/shared/ui/Modal/Modal.tsx | 8 +++++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/examples/solidjs-with-modal-manager/src/pages/home.tsx b/examples/solidjs-with-modal-manager/src/pages/home.tsx index c130272..ce7d068 100644 --- a/examples/solidjs-with-modal-manager/src/pages/home.tsx +++ b/examples/solidjs-with-modal-manager/src/pages/home.tsx @@ -25,21 +25,19 @@ export function HomePage() { Home

examples/solidjs-with-modal-manager

- Dumb layout can be placed in the shared layer, smart - in the app layer. + This example shows how to work with a modal manager in declarative way.

-

Logout button

+

Open alert modal

- Open alert modal

+

Open custom usecases modal

- {' '} - (feature modal)

) diff --git a/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.tsx b/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.tsx index 76bc726..f5fadd1 100644 --- a/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.tsx +++ b/examples/solidjs-with-modal-manager/src/shared/ui/Modal/Modal.tsx @@ -26,10 +26,12 @@ export function Modal(props: Props) { createEffect(() => { const e = event() - - if (e && e.key === 'Escape' && visible) { + if (e && e.key === 'Escape') { e.preventDefault() - handleClose() + + if (visible) { + handleClose() + } } })