main 🧊 add test for use storage childs, rework add files registry

.gitignore

@@ -218,3 +218,7 @@ generated
 
 # Cursor
 .cursor
+
+# Reactuse
+
+**/registry.json

packages/cli/eslint.config.mjs

@@ -1,14 +1,14 @@
-import { eslint } from '@siberiacancode/eslint';
+import { eslint } from "@siberiacancode/eslint";
 
 export default eslint(
   {
-    typescript: true
+    typescript: true,
   },
   {
-    name: 'siberiacancode/cli/rewrite',
+    name: "siberiacancode/cli/rewrite",
     rules: {
-      'node/prefer-global/process': 'off',
-      'node/prefer-global/buffer': 'off'
-    }
+      "node/prefer-global/process": "off",
+      "node/prefer-global/buffer": "off",
+    },
   }
 );

packages/cli/src/add.ts

@@ -6,6 +6,7 @@ import fs from 'node:fs';
 import ora from 'ora';
 import prompts from 'prompts';
 import { createMatchPath, loadConfig } from 'tsconfig-paths';
+import path from 'node:path';
 
 import type { AddOptionsSchema, Registry } from '@/utils/types';
 
@@ -14,23 +15,26 @@ import { APP_PATH, REPO_URLS } from '@/utils/constants';
 import { addOptionsSchema } from '@/utils/types';
 
 
-const resolveDependencies = (registry: Registry, hook: string) => {
-  const hooks = new Set<string>();
-  const utils = new Set<string>();
+const resolveDependencies = (registry: Registry, hooks: string[]) => {
+  const files = new Map<string, { type: 'hook' | 'util' | 'local' | 'package', name: string, parent: string }>();
 
   const resolveDependency = (hook: string) => {
     const item = registry[hook]!;
-    hooks.add(hook);
-    if (item.utils.length) Array.from(item.utils).forEach((util) => utils.add(util));
+    files.set(hook, { type: 'hook', name: hook, parent: item.name });
+    if (item.utils.length) Array.from(item.utils).forEach((util) => files.set(util, { type: 'util', name: util, parent: item.name }));
+    if (item.local.length) Array.from(item.local).forEach((local) => files.set(local, { type: 'local', name: local, parent: item.name }));
+    if (item.packages.length) Array.from(item.packages).forEach((packag) => files.set(packag, { type: 'package', name: packag, parent: item.name }));
 
     for (const hook of item.hooks) {
       resolveDependency(hook);
     }
   };
 
-  resolveDependency(hook);
+  for (const hook of hooks) {
+    resolveDependency(hook);
+  }
 
-  return { hooks: Array.from(hooks), utils: Array.from(utils) };
+  return files;
 };
 
 export const add = {
@@ -128,64 +132,77 @@ export const add = {
       process.exit(1);
     }
 
-    const spinner = ora('Installing hooks...').start();
-    const files = selectedHooks.reduce<{ utils: string[]; hooks: string[] }>(
-      (acc, hook) => {
-        const item = registry[hook];
+    const dependencies = resolveDependencies(registry, selectedHooks);
+    const packages: string[] = [];
+    const files = Array.from(dependencies.values()).map((dependency) => {
+      if (dependency.type === 'hook') {
+        const filePath = `${dependency.name}/${dependency.name}`;
+        const directoryPath = `${pathToLoadHooks}/${filePath}.${language}`;
+        const registryPath = `${REPO_URLS[language.toUpperCase() as keyof typeof REPO_URLS]}/hooks/${filePath}.${language}`;
+        const indexPath = `${pathToLoadHooks}/index.${language}`;
+        return { name: dependency.name, directoryPath, registryPath, type: dependency.type, indexPath, filePath };
+      }
 
-        if (!item) {
-          spinner.fail(`Hook ${hook} not found in the registry`);
-          return acc;
-        }
+      if (dependency.type === 'util') {
+        const filePath = `${dependency.name}`;
+        const directoryPath = `${pathToLoadUtils}/${filePath}.${language}`;
+        const registryPath = `${REPO_URLS[language.toUpperCase() as keyof typeof REPO_URLS]}/utils/helpers/${filePath}.${language}`;
+        const indexPath = `${pathToLoadUtils}/index.${language}`;
+        return { name: dependency.name, directoryPath, registryPath, type: dependency.type, indexPath, filePath };
+      }
+
+      if (dependency.type === 'local') {
+        const filePath = `${dependency.name}`;
+        const directoryPath = `${pathToLoadHooks}/${dependency.parent}/helpers/${filePath}.${language}`;
+        const registryPath = `${REPO_URLS[language.toUpperCase() as keyof typeof REPO_URLS]}/hooks/${dependency.parent}/helpers/${filePath}.${language}`;
+        const indexPath = `${pathToLoadHooks}/${dependency.parent}/helpers/index.${language}`;
+        return { name: dependency.name, filePath, registryPath, type: dependency.type, indexPath, directoryPath };
+      }
 
-        const dependencies = resolveDependencies(registry, hook);
-        acc.utils.push(...dependencies.utils);
-        acc.hooks.push(...dependencies.hooks);
-        return acc;
-      },
-      { utils: [], hooks: [] }
-    );
+      if (dependency.type === 'package') {
+        packages.push(dependency.name);
+        return;
+      }
 
-    const utils = Array.from(new Set(files.utils));
-    const hooks = Array.from(new Set(files.hooks));
+      throw new Error(`Unknown dependency type: ${dependency.type}`);
+    }).filter(Boolean);
 
-    Promise.all([
-      ...hooks.map(async (hook) => {
-        const directory = `${pathToLoadHooks}/${hook}`;
-        const path = `${directory}/${hook}.${language}`;
 
-        if (!fs.existsSync(directory)) fs.mkdirSync(directory, { recursive: true });
+    const spinner = ora('Installing files...').start();
+    for (const file of files) {
+      const { directoryPath, registryPath, indexPath, filePath, name } = file!;
+      spinner.text = `Installing ${name}...`;
+      const directory = path.dirname(directoryPath);
 
-        const hookFileResponse = await fetches.get<Buffer>(
-          `${REPO_URLS[language.toUpperCase() as keyof typeof REPO_URLS]}/hooks/${hook}/${hook}.${language}`
-        );
-        const buffer = Buffer.from(hookFileResponse.data);
+      if (directory) {
+        spinner.stop()
+        const { overwrite } = await prompts({
+          type: "confirm",
+          name: "overwrite",
+          message: `File ${name} already exists. Would you like to overwrite?`,
+          initial: false,
+        });
 
-        await fs.writeFileSync(path, buffer);
-      }),
-      ...utils.map(async (util) => {
-        const directory = pathToLoadUtils;
-        const path = `${directory}/${util}.${language}`;
+        if (!overwrite) {
+          console.log(`Skipped ${name}. To overwrite, run with the ${chalk.green("--overwrite")} flag.`);
+          continue;
+        }
 
-        if (!fs.existsSync(directory)) fs.mkdirSync(directory, { recursive: true });
+        spinner.start(`Installing ${name}...`)
+      }
 
-        const utilFileResponse = await fetches.get<Buffer>(
-          `${REPO_URLS[language.toUpperCase() as keyof typeof REPO_URLS]}/utils/helpers/${util}.${language}`
-        );
-        const buffer = Buffer.from(utilFileResponse.data);
+      if (!fs.existsSync(directory)) fs.mkdirSync(directory, { recursive: true });
 
-        await fs.writeFileSync(path, buffer);
+      const fileResponse = await fetches.get<Buffer>(registryPath);
+      await fs.writeFileSync(directoryPath, fileResponse.data);
 
-        const indexPath = `${pathToLoadUtils}/index.${language}`;
-        const indexExist = fs.existsSync(indexPath);
-        const exportStatement = `export * from './${util}';\n`;
+      const exportStatement = `export * from './${filePath}';\n`;
 
-        if (!indexExist) fs.writeFileSync(indexPath, '');
-        const indexFileContent = fs.readFileSync(indexPath, 'utf-8');
-        if (!indexFileContent.includes(exportStatement))
-          fs.appendFileSync(indexPath, exportStatement, 'utf-8');
-      })
-    ]);
+      if (!fs.existsSync(indexPath)) fs.writeFileSync(indexPath, '');
+      const indexFileContent = fs.readFileSync(indexPath, 'utf-8');
+      if (!indexFileContent.includes(exportStatement))
+        fs.appendFileSync(indexPath, exportStatement, 'utf-8');
+    }
 
     spinner.succeed('Done.');
   }

packages/cli/src/registry/index.ts

@@ -16,7 +16,6 @@ export const REGISTRY_PATH = path.join(DOCS_PUBLIC_PATH, 'registry.json');
 export const registry = async () => {
   console.log('📦 Building registry');
 
-  console.log('@', fetches);
   const hooksResponse = await fetches.get<{ name: string }[]>(
     'https://api.github.com/repos/siberiacancode/reactuse/contents/packages/core/src/hooks'
   );

packages/cli/tsconfig.json

@@ -17,10 +17,10 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "preserveWatchOutput": true,
-
-    "isolatedModules": false,
-    "skipLibCheck": true
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "module": "ESNext"
   },
-  "include": ["src/**/*.ts", "scripts/**/*.ts"],
+  "include": ["src"],
   "exclude": ["node_modules"]
 }

packages/core/eslint.config.mjs

@@ -1,25 +1,26 @@
-import { eslint } from '@siberiacancode/eslint';
+import { eslint } from "@siberiacancode/eslint";
 
 export default eslint(
   {
     typescript: true,
     javascript: true,
     react: true,
     jsx: true,
-    vue: true
+    vue: true,
   },
   {
-    name: 'siberiacancode/core/hooks',
-    files: ['**/hooks/**/*.ts'],
+    name: "siberiacancode/core/hooks",
+    files: ["**/hooks/**/*.ts"],
     rules: {
-      'jsdoc/no-defaults': 'off'
-    }
+      "jsdoc/no-defaults": "off",
+      "react-hooks/rules-of-hooks": "warn",
+    },
   },
   {
-    name: 'siberiacancode/core/demo',
-    files: ['**/*.demo.tsx'],
+    name: "siberiacancode/core/demo",
+    files: ["**/*.demo.tsx"],
     rules: {
-      'no-alert': 'off'
-    }
+      "no-alert": "off",
+    },
   }
 );

packages/core/src/bundle/hooks/useBreakpoints/helpers/breakpoints.js

@@ -0,0 +1,80 @@
+/** Breakpoints from Material UI */
+export const BREAKPOINTS_MATERIAL_UI = {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536
+};
+/** Breakpoints from Mantine */
+export const BREAKPOINTS_MANTINE = {
+    xs: 576,
+    sm: 768,
+    md: 992,
+    lg: 1200,
+    xl: 1408
+};
+/** Breakpoints from Tailwind */
+export const BREAKPOINTS_TAILWIND = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536
+};
+/**  Breakpoints from Bootstrap V5 */
+export const BREAKPOINTS_BOOTSTRAP_V5 = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1400
+};
+/** Breakpoints from Ant Design */
+export const BREAKPOINTS_ANT_DESIGN = {
+    xs: 480,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1600
+};
+/** Breakpoints from Quasar V2 */
+export const BREAKPOINTS_QUASAR_V2 = {
+    xs: 0,
+    sm: 600,
+    md: 1024,
+    lg: 1440,
+    xl: 1920
+};
+/** Sematic Breakpoints */
+export const BREAKPOINTS_SEMANTIC = {
+    mobileS: 320,
+    mobileM: 375,
+    mobileL: 425,
+    tablet: 768,
+    laptop: 1024,
+    laptopL: 1440,
+    desktop4K: 2560
+};
+/**  Breakpoints from Master CSS  */
+export const BREAKPOINTS_MASTER_CSS = {
+    '3xs': 360,
+    '2xs': 480,
+    xs: 600,
+    sm: 768,
+    md: 1024,
+    lg: 1280,
+    xl: 1440,
+    '2xl': 1600,
+    '3xl': 1920,
+    '4xl': 2560
+};
+/** Breakpoints from PrimeFlex */
+export const BREAKPOINTS_PRIME_FLEX = {
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200
+};

packages/core/src/bundle/hooks/useBreakpoints/helpers/index.js

@@ -0,0 +1 @@
+export * from './breakpoints';

packages/core/src/bundle/hooks/useBreakpoints/useBreakpoints.js

@@ -62,4 +62,4 @@ export const useBreakpoints = (breakpoints, strategy = 'mobile-first') => {
         ...breakpointsKeys
     };
 };
-export * from './constants/breakpoints';
+export * from './helpers';

packages/core/src/bundle/hooks/useGamepad/helpers/index.js

@@ -0,0 +1 @@
+export * from './mapGamepadToXbox360Controller';