feat/upgrades

packages/gluestack-cli/package.json

@@ -46,7 +46,7 @@
     "@antfu/ni": "^0.21.12",
     "@clack/prompts": "^0.6.3",
     "@gluestack/ui-project-detector": "^0.1.1",
-    "chalk": "^5.3.0",
+    "chalk": "4.1.2",
     "commander": "^12.0.0",
     "fast-glob": "^3.3.2",
     "find-package-json": "^1.2.0",

packages/gluestack-cli/src/dependencies.ts

@@ -1,11 +1,15 @@
 export interface Dependency {
   [key: string]: string;
 }
+export interface ComponentConfig {
+  dependencies: Dependency;
+  devDependencies?: Dependency;
+  additionalComponents?: string[];
+  hooks?: string[];
+}
+
 export interface Dependencies {
-  [key: string]: {
-    dependencies: Dependency;
-    devDependencies?: Dependency;
-  };
+  [key: string]: ComponentConfig;
 }
 
 const projectBasedDependencies: Dependencies = {
@@ -42,6 +46,7 @@ const dependenciesConfig: Dependencies = {
       '@gluestack-ui/toast': 'latest',
       '@gluestack-ui/nativewind-utils': 'latest',
       'react-native-svg': '13.4.0',
+      nativewind: '4.1.10',
     },
     devDependencies: {
       jscodeshift: '0.15.2',
@@ -229,6 +234,35 @@ const dependenciesConfig: Dependencies = {
   view: { dependencies: {} },
   'virtualized-list': { dependencies: {} },
   vstack: { dependencies: {} },
+  grid: {
+    dependencies: {},
+    hooks: ['useBreakpointValue'],
+  },
 };
 
-export { dependenciesConfig, projectBasedDependencies };
+// Ignore components that are in development or not in supported list
+const IgnoredComponents = ['bottomsheet'];
+
+const getComponentDependencies = (componentName: string): ComponentConfig => {
+  const config = dependenciesConfig[componentName];
+  if (!config) {
+    return {
+      dependencies: {},
+      devDependencies: {},
+      additionalComponents: [],
+      hooks: [],
+    };
+  }
+  return {
+    dependencies: config.dependencies || {},
+    devDependencies: config.devDependencies || {},
+    additionalComponents: config.additionalComponents || [],
+    hooks: config.hooks || [],
+  };
+};
+export {
+  dependenciesConfig,
+  projectBasedDependencies,
+  IgnoredComponents,
+  getComponentDependencies,
+};

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

@@ -4,6 +4,7 @@ import { basename, join, parse } from 'path';
 import { log, confirm } from '@clack/prompts';
 import { config } from '../../config';
 import {
+  checkAdditionalDependencies,
   cloneRepositoryAtRoot,
   getAllComponents,
   installDependencies,
@@ -21,13 +22,14 @@ const componentAdder = async ({
   try {
     console.log(`\n\x1b[1mAdding new component...\x1b[0m\n`);
     await cloneRepositoryAtRoot(join(_homeDir, config.gluestackDir));
+    let hooksToAdd: string[] = [];
     if (
       requestedComponent &&
       requestedComponent !== '--all' &&
       !(await checkIfComponentIsValid(requestedComponent))
     ) {
       log.error(
-        `\x1b[31mThe ${requestedComponent} does not exist. Kindly choose a valid component name.\x1b[0m `
+        `The ${requestedComponent} does not exist. Kindly choose a valid component name.`
       );
       return;
     }
@@ -36,6 +38,9 @@ const componentAdder = async ({
         ? getAllComponents()
         : [requestedComponent];
 
+    const { hooks } = checkAdditionalDependencies(requestedComponents);
+    hooksToAdd = Array.from(hooks);
+
     const updatedComponents =
       !existingComponentsChecked && showWarning && requestedComponent
         ? await isComponentInConfig(requestedComponents)
@@ -49,6 +54,7 @@ const componentAdder = async ({
         );
 
         await writeComponent(component, targetPath);
+        await hookAdder({ requestedHook: hooksToAdd });
       })
     )
       .then(async () => {
@@ -158,7 +164,11 @@ const confirmOverride = async (
   return shouldContinue;
 };
 
-const hookAdder = async ({ requestedHook }: { requestedHook: string }) => {
+const hookAdder = async ({
+  requestedHook,
+}: {
+  requestedHook: string | string[];
+}) => {
   try {
     console.log(`\n\x1b[1mAdding new hook...\x1b[0m\n`);
     await cloneRepositoryAtRoot(join(_homeDir, config.gluestackDir));
@@ -192,32 +202,35 @@ const hookFileName = async (hook: string): Promise<string> => {
   });
   return fileName;
 };
-const writeHook = async (hook: string) => {
-  const fileName = await hookFileName(hook);
-  const utilsPath = join(
-    projectRootPath,
-    config.writableComponentsPath,
-    'utils',
-    fileName
-  );
-  const sourceFilePath = join(
-    _homeDir,
-    config.gluestackDir,
-    config.hooksResourcePath,
-    fileName
-  );
-  if (fs.existsSync(utilsPath)) {
-    const confirm = await confirmHookOverride(hook);
-    if (confirm === false) {
-      processTerminate('Installation aborted');
+const writeHook = async (hooks: string | string[]) => {
+  const hooksArray = Array.isArray(hooks) ? hooks : [hooks];
+  for (const hook of hooksArray) {
+    const fileName = await hookFileName(hook);
+    const utilsPath = join(
+      projectRootPath,
+      config.writableComponentsPath,
+      'utils',
+      fileName
+    );
+    const sourceFilePath = join(
+      _homeDir,
+      config.gluestackDir,
+      config.hooksResourcePath,
+      fileName
+    );
+    if (fs.existsSync(utilsPath)) {
+      const shouldOverride = await confirmHookOverride(hook);
+      if (!shouldOverride) {
+        processTerminate('Installation aborted');
+      }
     }
-  }
 
-  try {
-    await fs.ensureFile(utilsPath);
-    fs.copyFileSync(sourceFilePath, utilsPath);
-  } catch (error) {
-    log.error(`\x1b[31mError: ${(error as Error).message}\x1b[0m`);
+    try {
+      await fs.ensureFile(utilsPath);
+      await fs.copy(sourceFilePath, utilsPath);
+    } catch (error) {
+      log.error(`Error adding hook ${hook}: ${(error as Error).message}`);
+    }
   }
 };
 

packages/gluestack-cli/src/util/config/expo-config-helper.ts

@@ -124,7 +124,7 @@ async function initNatiwindExpoApp(
       } --cssPath='${cssPath}' --config='${JSON.stringify(resolvedConfig)}'`
     );
     execSync(
-      `npx jscodeshift -t ${BabeltransformerPath}  ${resolvedConfig.config.babelConfig} --isSDK50='${resolvedConfig.app.sdk50}'`
+      `npx jscodeshift -t ${BabeltransformerPath}  ${resolvedConfig.config.babelConfig} --config='${JSON.stringify(resolvedConfig)}'`
     );
     execSync(
       `npx jscodeshift -t ${addProviderTransformerPath}  ${resolvedConfig.app.entry} --cssImportPath='${cssImportPath}' --componentsPath='${config.writableComponentsPath}'`

packages/gluestack-cli/src/util/config/next-config-helper.ts

@@ -96,7 +96,7 @@ async function initNatiwindNextApp(
     ) {
       // if app router add registry file to root
       const registryContent = await readFile(
-        join(__dirname, `${config.templatesDir}/common/registry.tsx`),
+        join(__dirname, config.templatesDir, 'common', 'registry.tsx'),
         'utf8'
       );
       await writeFile(resolvedConfig.app.registry, registryContent, 'utf8');

packages/gluestack-cli/src/util/config/react-native-config-helper.ts

@@ -66,7 +66,7 @@ async function initNatiwindRNApp(
     );
 
     execSync(
-      `npx jscodeshift -t ${BabelTransformerPath}  ${resolvedConfig.config.babelConfig}`
+      `npx jscodeshift -t ${BabelTransformerPath}  ${resolvedConfig.config.babelConfig} --config='${JSON.stringify(resolvedConfig)}'`
     );
     execSync(
       `npx jscodeshift -t ${metroTransformerPath}  ${resolvedConfig.config.metroConfig}`

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

@@ -16,10 +16,11 @@ import {
 import {
   Dependencies,
   Dependency,
+  IgnoredComponents,
   dependenciesConfig,
+  getComponentDependencies,
   projectBasedDependencies,
 } from '../dependencies';
-import { installNativeWind } from './init';
 
 const homeDir = os.homedir();
 const currDir = process.cwd();
@@ -46,11 +47,43 @@ const getAllComponents = (): string[] => {
       (file) =>
         !['.tsx', '.ts', '.jsx', '.js', '.json'].includes(
           extname(file).toLowerCase()
-        ) && file !== config.providerComponent
+        ) &&
+        file !== config.providerComponent &&
+        !IgnoredComponents.includes(file)
     );
   return componentList;
 };
 
+interface AdditionalDependencies {
+  components: string[];
+  hooks: string[];
+}
+
+function checkAdditionalDependencies(
+  components: string[]
+): AdditionalDependencies {
+  const additionalDependencies: AdditionalDependencies = {
+    components: [],
+    hooks: [],
+  };
+
+  components.forEach((component) => {
+    const config = getComponentDependencies(component);
+
+    // Add additional components
+    config.additionalComponents?.forEach((additionalComponent) => {
+      additionalDependencies.components.push(additionalComponent);
+    });
+
+    // Add hooks
+    config.hooks?.forEach((hook) => {
+      additionalDependencies.hooks.push(hook);
+    });
+  });
+
+  return additionalDependencies;
+}
+
 const cloneRepositoryAtRoot = async (rootPath: string) => {
   try {
     const clonedRepoExists = await checkIfFolderExists(rootPath);
@@ -285,7 +318,6 @@ const installDependencies = async (
     );
 
     try {
-      await installNativeWind(versionManager);
       let depResult;
       let devDepResult;
 
@@ -572,4 +604,5 @@ export {
   removeHyphen,
   getRelativePath,
   ensureFilesPromise,
+  checkAdditionalDependencies,
 };