feat: using JSON from gluestack-ui

packages/gluestack-cli/src/config.ts

@@ -3,19 +3,17 @@ const config = {
   gluestackDir: '.gluestack/cache/gluestack-ui',
   componentsResourcePath: 'example/storybook-nativewind/src/core-components',
   hooksResourcePath: 'example/storybook-nativewind/src/core-components/hooks',
-  gluestackStyleRootPath: 'themed',
+  dependencyConfigPath:
+    'example/storybook-nativewind/src/core-components/nativewind/dependencies.json',
   nativeWindRootPath: 'nativewind',
   expoProject: 'expo',
   nextJsProject: 'nextjs',
   reactNativeCLIProject: 'react-native-cli',
   tailwindConfigRootPath: 'example/storybook-nativewind/src/tailwind.config.js',
-  UIconfigPath: 'gluestack-ui-provider/config.ts',
   writableComponentsPath: 'components/ui',
   branchName: 'patch',
-  tagName: '@gluestack-ui/[email protected]',
   style: 'nativewind',
   providerComponent: 'gluestack-ui-provider',
-  configFileName: 'config.ts',
   nativewindUtilPattern: '@gluestack-ui/nativewind-utils/',
   gluestackUIPattern: '@gluestack-ui/',
   templatesDir: '../../../template',

packages/gluestack-cli/src/dependencies.ts

@@ -1,3 +1,11 @@
+import { join } from 'path';
+import { config } from './config';
+import { log } from '@clack/prompts';
+import fs from 'fs-extra';
+import os from 'os';
+
+const __homeDir = os.homedir();
+
 export interface Dependency {
   [key: string]: string;
 }
@@ -12,6 +20,11 @@ export interface Dependencies {
   [key: string]: ComponentConfig;
 }
 
+interface UIConfigJSON {
+  components: Dependencies;
+  IgnoredComponents: string[];
+}
+
 const projectBasedDependencies: Dependencies = {
   nextjs: {
     dependencies: {
@@ -38,213 +51,59 @@ const projectBasedDependencies: Dependencies = {
     },
   },
 };
-const dependenciesConfig: Dependencies = {
-  'gluestack-ui-provider': {
-    dependencies: {
-      tailwindcss: '',
-      '@gluestack-ui/overlay': 'latest',
-      '@gluestack-ui/toast': 'latest',
-      '@gluestack-ui/nativewind-utils': 'latest',
-      'react-native-svg': '13.4.0',
-      nativewind: '4.1.10',
-    },
-    devDependencies: {
-      jscodeshift: '0.15.2',
-      prettier: '',
-    },
-  },
-  accordion: {
-    dependencies: {
-      '@gluestack-ui/accordion': 'latest',
-      '@expo/html-elements': '0.4.2',
-    },
-  },
-  actionsheet: {
-    dependencies: {
-      '@legendapp/motion': 'latest',
-      '@gluestack-ui/actionsheet': 'latest',
-    },
-  },
-  alert: {
-    dependencies: {
-      '@gluestack-ui/alert': 'latest',
-    },
-  },
-  'alert-dialog': {
-    dependencies: {
-      '@gluestack-ui/alert-dialog': 'latest',
-      '@legendapp/motion': 'latest',
-    },
-  },
-  avatar: {
-    dependencies: {
-      '@gluestack-ui/avatar': 'latest',
-    },
-  },
-  badge: { dependencies: {} },
-  box: { dependencies: {} },
-  button: {
-    dependencies: {
-      '@gluestack-ui/button': 'latest',
-    },
-  },
-  card: { dependencies: {} },
-  center: { dependencies: {} },
-  checkbox: {
-    dependencies: {
-      '@gluestack-ui/checkbox': 'latest',
-    },
-  },
-  divider: {
-    dependencies: {
-      '@gluestack-ui/divider': 'latest',
-    },
-  },
-  fab: {
-    dependencies: {
-      '@gluestack-ui/fab': 'latest',
-    },
-  },
-  'flat-list': {
-    dependencies: {},
-  },
-  'form-control': {
-    dependencies: {
-      '@gluestack-ui/form-control': 'latest',
-    },
-  },
-  heading: {
-    dependencies: {
-      '@expo/html-elements': '0.4.2',
-    },
-  },
-  hstack: {
-    dependencies: {},
-  },
-  icon: {
-    dependencies: {
-      '@gluestack-ui/icon': 'latest',
-    },
-  },
-  image: {
-    dependencies: {
-      '@gluestack-ui/image': 'latest',
-    },
-  },
-  'image-background': {
-    dependencies: {},
-  },
-  input: {
-    dependencies: {
-      '@gluestack-ui/input': 'latest',
-    },
-  },
-  'input-accessory-view': {
-    dependencies: {},
-  },
-  'keyboard-avoiding-view': {
-    dependencies: {},
-  },
-  link: {
-    dependencies: {
-      '@gluestack-ui/link': 'latest',
-    },
-  },
-  menu: {
-    dependencies: {
-      '@gluestack-ui/menu': 'latest',
-      '@legendapp/motion': 'latest',
-    },
-  },
-  modal: {
-    dependencies: {
-      '@gluestack-ui/modal': 'latest',
-      '@legendapp/motion': 'latest',
-    },
-  },
-  popover: {
-    dependencies: {
-      '@gluestack-ui/popover': 'latest',
-      '@legendapp/motion': 'latest',
-    },
-  },
-  pressable: {
-    dependencies: {
-      '@gluestack-ui/pressable': 'latest',
-    },
-  },
-  progress: {
-    dependencies: {
-      '@gluestack-ui/progress': 'latest',
-    },
-  },
-  radio: {
-    dependencies: {
-      '@gluestack-ui/radio': 'latest',
-    },
-  },
-  'refresh-control': { dependencies: {} },
-  'safe-area-view': { dependencies: {} },
-  'scroll-view': { dependencies: {} },
-  'section-list': {
-    dependencies: {},
-  },
-  select: {
-    dependencies: {
-      '@gluestack-ui/select': 'latest',
-      '@gluestack-ui/actionsheet': 'latest',
-      '@legendapp/motion': 'latest',
-      '@expo/html-elements': '0.4.2',
-    },
-  },
-  slider: {
-    dependencies: {
-      '@gluestack-ui/slider': 'latest',
-    },
-  },
-  spinner: {
-    dependencies: {
-      '@gluestack-ui/spinner': 'latest',
-    },
-  },
-  'status-bar': { dependencies: {} },
-  switch: {
-    dependencies: {
-      '@gluestack-ui/switch': 'latest',
-    },
-  },
-  text: { dependencies: {} },
-  textarea: {
-    dependencies: {
-      '@gluestack-ui/textarea': 'latest',
-    },
-  },
-  toast: {
-    dependencies: {
-      '@gluestack-ui/toast': 'latest',
-      '@legendapp/motion': 'latest',
-    },
-  },
-  tooltip: {
-    dependencies: {
-      '@gluestack-ui/tooltip': 'latest',
-      '@legendapp/motion': 'latest',
-    },
-  },
-  view: { dependencies: {} },
-  'virtualized-list': { dependencies: {} },
-  vstack: { dependencies: {} },
-  grid: {
-    dependencies: {},
-    hooks: ['useBreakpointValue'],
-  },
-};
+
+// Get dependency JSON
+async function getDependencyJSON(): Promise<UIConfigJSON> {
+  const dependencyJSONPath = join(
+    __homeDir,
+    config.gluestackDir,
+    config.dependencyConfigPath
+  );
+  if (!fs.existsSync(dependencyJSONPath)) {
+    log.error(
+      `\x1b[31mError: Dependency JSON file not found at ${dependencyJSONPath}\x1b[0m`
+    );
+    process.exit;
+  }
+  const dependencyJSON = await fs.readJSON(dependencyJSONPath);
+  return dependencyJSON;
+}
+
+// Get project based dependencies
+async function getProjectBasedDependencies(
+  projectType: string | undefined,
+  style: string
+) {
+  try {
+    if (
+      style === config.nativeWindRootPath &&
+      projectType &&
+      projectType !== 'library'
+    ) {
+      return {
+        dependencies: projectBasedDependencies[projectType].dependencies,
+        devDependencies:
+          projectBasedDependencies[projectType]?.devDependencies || {},
+      };
+    }
+    return { dependencies: {}, devDependencies: {} };
+  } catch (error) {
+    log.error(`\x1b[31mError: ${(error as Error).message}\x1b[0m`);
+  }
+}
 
 // Ignore components that are in development or not in supported list
-const IgnoredComponents = ['bottomsheet'];
+const getIgnoredComponents = async (): Promise<string[]> => {
+  const dependencyJSON = await getDependencyJSON();
+  return dependencyJSON.IgnoredComponents;
+};
 
-const getComponentDependencies = (componentName: string): ComponentConfig => {
-  const config = dependenciesConfig[componentName];
+// Get dependencies for a component
+const getComponentDependencies = async (
+  componentName: string
+): Promise<ComponentConfig> => {
+  const dependencyJSON = await getDependencyJSON();
+  const config = dependencyJSON.components[componentName];
   if (!config) {
     return {
       dependencies: {},
@@ -260,9 +119,9 @@ const getComponentDependencies = (componentName: string): ComponentConfig => {
     hooks: config.hooks || [],
   };
 };
+
 export {
-  dependenciesConfig,
-  projectBasedDependencies,
-  IgnoredComponents,
+  getIgnoredComponents,
   getComponentDependencies,
+  getProjectBasedDependencies,
 };

packages/gluestack-cli/src/util/add/index.ts

@@ -5,7 +5,6 @@ import { log, confirm } from '@clack/prompts';
 import { config } from '../../config';
 import {
   checkComponentDependencies,
-  cloneRepositoryAtRoot,
   getAllComponents,
   installDependencies,
   projectRootPath,
@@ -34,10 +33,10 @@ const componentAdder = async ({
     }
     let requestedComponents =
       requestedComponent === '--all'
-        ? getAllComponents()
+        ? await getAllComponents()
         : [requestedComponent];
 
-    const { hooks } = checkComponentDependencies(requestedComponents);
+    const { hooks } = await checkComponentDependencies(requestedComponents);
     hooksToAdd = Array.from(hooks);
 
     const updatedComponents =
@@ -123,7 +122,7 @@ const processTerminate = (message: string) => {
 };
 
 const checkIfComponentIsValid = async (component: string): Promise<boolean> => {
-  const componentList = getAllComponents();
+  const componentList = await getAllComponents();
   if (componentList.includes(component) || componentList.includes(component))
     return true;
   else return false;