fix: test fixes

Author: vaibhk20

packages/gluestack-cli/src/dependencies.ts

@@ -17,6 +17,7 @@ const projectBasedDependencies: Dependency = {
       autoprefixer: 'latest',
       'react-native-web': 'latest',
       '@gluestack/ui-next-adapter': 'latest',
+      '@types/react-native': '^0.73.0',
     },
   },
   expo: {
@@ -42,6 +43,7 @@ const dependenciesConfig: Dependencies = {
     },
     devDependencies: {
       jscodeshift: '0.15.2',
+      prettier: '^3.3.2',
     },
   },
   accordion: {

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

@@ -2,29 +2,26 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { config } from '../../config';
 import { projectRootPath } from '..';
-import { cosmiconfig } from 'cosmiconfig';
 import fg from 'fast-glob';
-import {
-  RawConfig,
-  RawConfigSchema,
-  PROJECT_SHARED_IGNORE,
-} from './config-types';
+import { RawConfig, PROJECT_SHARED_IGNORE } from './config-types';
 
 const fileExtensions = ['.tsx', '.jsx', '.ts', '.js'];
 const possibleIndexFiles = ['_app', 'index', 'App'];
 const possibleDirectories = ['src', 'pages', 'app', 'components'];
 
-const explorer = cosmiconfig('gluestack-ui', {
-  searchPlaces: ['gluestack-ui.json'],
-});
+function findDirectory(rootDir: string, relativePaths: string[]) {
+  for (const relPath of relativePaths) {
+    const dirPath = path.join(rootDir, relPath);
+    if (fs.existsSync(dirPath) && fs.statSync(dirPath).isDirectory()) {
+      return dirPath.replace(`${rootDir}/`, '');
+    }
+  }
+  return '';
+}
 
 async function checkIfInitialized(cwd: string): Promise<boolean> {
   try {
-    const initializeStatus = await fg.glob('gluestack-ui.config.json', {
-      cwd,
-      deep: 8,
-      ignore: PROJECT_SHARED_IGNORE,
-    });
+    const initializeStatus = await getComponentsPath();
     if (initializeStatus.length) {
       return true;
     }
@@ -55,18 +52,6 @@ async function getComponentsPath(): Promise<string> {
   return resolvedComponentsPath;
 }
 
-async function checkConfigSchema(cwd: string): Promise<RawConfig | null> {
-  try {
-    const configResult = await explorer.search(cwd);
-    if (!configResult) {
-      return null;
-    }
-    return RawConfigSchema.parse(configResult.config);
-  } catch (error) {
-    throw new Error(`Invalid configuration found in ${cwd}/gluestack-ui.json.`);
-  }
-}
-
 function getEntryPathAndComponentsPath(): {
   entryPath: string[];
 } {
@@ -119,9 +104,14 @@ async function generateConfig(resultConfig: RawConfig) {
 }
 
 async function generateGluestackConfig() {
+  const componentPath = path.resolve(
+    projectRootPath,
+    config.writableComponentsPath
+  );
+
   const gluestackConfig = {
     app: {
-      components: config.writableComponentsPath,
+      components: componentPath.replace(`${projectRootPath}/`, ''),
     },
   };
   const targetPath = path.resolve(projectRootPath, 'gluestack-ui.config.json');
@@ -139,4 +129,5 @@ export {
   getConfigPath,
   getComponentsPath,
   generateGluestackConfig,
+  findDirectory,
 };

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

@@ -6,9 +6,9 @@ import {
   NextResolvedConfig,
   PROJECT_SHARED_IGNORE,
 } from './config-types';
-import { generateConfig, getConfigPath } from '.';
+import { findDirectory, generateConfig, getConfigPath } from '.';
 import { config } from '../../config';
-import { findDirectory, projectRootPath } from '..';
+import { projectRootPath } from '..';
 
 //next project type initialization
 async function getNextProjectType(cwd: string): Promise<string | undefined> {

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

@@ -1,5 +1,5 @@
 import os from 'os';
-import path, { join, dirname, extname } from 'path';
+import { join, dirname, extname, resolve } from 'path';
 import fs, { stat } from 'fs-extra';
 import {
   log,
@@ -14,6 +14,7 @@ import finder from 'find-package-json';
 import simpleGit from 'simple-git';
 import { spawnSync } from 'child_process';
 import { config } from '../config';
+import prettier from 'prettier';
 import { dependenciesConfig, projectBasedDependencies } from '../dependencies';
 
 // const stat = util.promisify(fs.stat);
@@ -538,14 +539,29 @@ const checkIfFolderExists = async (path: string): Promise<boolean> => {
   }
 };
 
-function findDirectory(rootDir: string, relativePaths: string[]) {
-  for (const relPath of relativePaths) {
-    const dirPath = path.join(rootDir, relPath);
-    if (fs.existsSync(dirPath) && fs.statSync(dirPath).isDirectory()) {
-      return dirPath.replace(`${rootDir}/`, '');
+async function formatFileWithPrettier(filePath: string | undefined) {
+  try {
+    if (!filePath) {
+      log.error(
+        `\x1b[31mError formatting file: Invalid file path provided\x1b[0m`
+      );
+      return;
     }
+    const fileContent = fs.readFileSync(filePath, 'utf8');
+
+    // Get Prettier configuration (if any) from the project
+    const prettierConfig = await prettier.resolveConfig(filePath);
+
+    // Format the file content using Prettier
+    const formattedContent = await prettier.format(fileContent, {
+      ...prettierConfig,
+      filepath: filePath, // This ensures Prettier uses the correct parser based on the file extension
+    });
+
+    fs.writeFileSync(filePath, formattedContent, 'utf8');
+  } catch (err) {
+    log.error(`\x1b[Error formatting file : ${(err as Error).message}\x1b[0m`);
   }
-  return '';
 }
 
 export {
@@ -558,6 +574,6 @@ export {
   checkWritablePath,
   addDependencies,
   getExistingComponentStyle,
-  findDirectory,
+  formatFileWithPrettier,
   projectRootPath,
 };

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

@@ -23,6 +23,7 @@ import {
   getAdditionalDependencies,
   addDependencies,
   projectRootPath,
+  formatFileWithPrettier,
 } from '..';
 
 const _currDir = process.cwd();
@@ -61,13 +62,17 @@ const InitializeGlueStack = async ({
       projectType,
       config.style
     );
-    await generateProjectConfigAndInit(projectType, confirmOverride);
+    const resolvedConfig = await generateProjectConfigAndInit(
+      projectType,
+      confirmOverride
+    );
     await addProvider();
     await addDependencies(
       installationMethod,
       inputComponent,
       additionalDependencies
     );
+    await formatFileWithPrettier(resolvedConfig?.app.entry);
     log.step(
       'Please refer the above link for more details --> \x1b[33mhttps://gluestack.io/ui/nativewind/docs/overview/introduction \x1b[0m'
     );
@@ -111,7 +116,10 @@ async function addProvider() {
   }
 }
 
-async function updateTailwindConfig(resolvedConfig: RawConfig) {
+async function updateTailwindConfig(
+  resolvedConfig: RawConfig,
+  projectType: string
+) {
   try {
     const tailwindConfigRootPath = join(
       _homeDir,
@@ -128,7 +136,7 @@ async function updateTailwindConfig(resolvedConfig: RawConfig) {
       `${config.codeModesDir}/tailwind-config-transform.ts`
     );
     exec(
-      `npx jscodeshift -t ${transformerPath}  ${tailwindConfigPath} --paths='${allNewPaths}'`
+      `npx jscodeshift -t ${transformerPath}  ${tailwindConfigPath} --paths='${allNewPaths}' --projectType='${projectType}' `
     );
   } catch (err) {
     log.error(`\x1b[31mError: ${err as Error}\x1b[0m`);
@@ -201,7 +209,11 @@ async function updateGlobalCss(resolvedConfig: RawConfig): Promise<void> {
   }
 }
 
-async function commonInitialization(projectType: string, resolvedConfig: any) {
+async function commonInitialization(
+  projectType: string,
+  resolvedConfig: any,
+  permission: boolean | symbol
+) {
   try {
     const resolvedConfigValues = Object.values(resolvedConfig).flat(Infinity);
     const flattenedConfigValues = resolvedConfigValues.flatMap((value) =>
@@ -231,10 +243,32 @@ async function commonInitialization(projectType: string, resolvedConfig: any) {
       join(projectRootPath, 'nativewind-env.d.ts')
     );
 
-    //add or update all the above files
-    await updateTailwindConfig(resolvedConfig);
-    await updateTSConfig(projectType);
-    await updateGlobalCss(resolvedConfig);
+    permission && (await updateTSConfig(projectType));
+    permission && (await updateGlobalCss(resolvedConfig));
+    await updateTailwindConfig(resolvedConfig, projectType);
+
+    //function to update package.json script to implement darkMode in expo, will be removed later
+    if (projectType === config.expoProject) {
+      const packageJsonPath = join(projectRootPath, 'package.json');
+      const packageJson = JSON.parse(
+        await fs.readFile(packageJsonPath, 'utf8')
+      );
+      const devices = ['android', 'ios', 'web'];
+
+      //get existing value of scripts
+
+      devices.forEach((device) => {
+        const script = packageJson.scripts[device];
+        // packageJson.scripts[device] = `DARK_MODE=media expo start --${device}`;
+        packageJson.scripts[device] = `DARK_MODE=media `.concat(script);
+      });
+
+      await fs.writeFile(
+        packageJsonPath,
+        JSON.stringify(packageJson, null, 2),
+        'utf8'
+      );
+    }
   } catch (err) {
     log.error(`\x1b[31mError: ${err as Error}\x1b[0m`);
   }
@@ -383,30 +417,35 @@ async function generateProjectConfigAndInit(
   projectType: string,
   confirmOverride: boolean | symbol
 ) {
+  let permission;
+  if (confirmOverride === false || typeof confirmOverride === 'symbol') {
+    permission = false;
+  } else permission = true;
   let resolvedConfig; // Initialize with a default value
   if (projectType !== 'library') {
     switch (projectType) {
       case config.nextJsProject:
         resolvedConfig = await generateConfigNextApp();
-        confirmOverride && (await initNatiwindNextApp(resolvedConfig));
+        permission && (await initNatiwindNextApp(resolvedConfig));
         break;
       case config.expoProject:
         resolvedConfig = await generateConfigExpoApp();
-        confirmOverride && (await initNatiwindExpoApp(resolvedConfig));
+        permission && (await initNatiwindExpoApp(resolvedConfig));
         break;
       case config.reactNativeCLIProject:
         resolvedConfig = await generateConfigRNApp();
-        confirmOverride && (await initNatiwindRNApp(resolvedConfig));
+        permission && (await initNatiwindRNApp(resolvedConfig));
         break;
       default:
         break;
     }
 
-    await commonInitialization(projectType, resolvedConfig);
+    await commonInitialization(projectType, resolvedConfig, permission);
   } else {
     //write function to generate config for library
     await generateGluestackConfig();
   }
+  return resolvedConfig;
 }
 
 const filesToOverride = (projectType: string) => {
@@ -444,6 +483,9 @@ function getStringLengthWithoutAnsi(string: string) {
 }
 
 async function overrideWarning(files: string[]) {
+  if (files.length === 0) {
+    return true;
+  }
   const boxLength = 90;
   console.log(`\x1b[33m
   ┌${'─'.repeat(boxLength)}┐
@@ -477,4 +519,4 @@ ${files
   return confirmInput;
 }
 
-export { InitializeGlueStack, filesToOverride, overrideWarning };
+export { InitializeGlueStack };

packages/gluestack-cli/template/template-codemods/tailwind-config-transform.ts

@@ -40,7 +40,7 @@ const transform: Transform = (file, api, options) => {
     });
 
     // if important: true roperty not found, create it
-    if (!importantProperty.size()) {
+    if (!importantProperty.size() && options.projectType === 'nextjs') {
       // Find the 'presets' property index
       let presetsIndex = -1;
       const properties = tailwindConfig.get(0).node.right.properties;
@@ -56,14 +56,35 @@ const transform: Transform = (file, api, options) => {
         const importantPropertyNode = j.property(
           'init',
           j.identifier('important'),
-          j.literal(true)
+          j.literal('html')
         );
 
         // Insert the important property node after presets
         properties.splice(presetsIndex + 1, 0, importantPropertyNode);
       }
     }
 
+    // Find and modify the 'darkMode' property
+    const darkModeProperty = tailwindConfig.find(j.Property, {
+      key: { name: 'darkMode' },
+    });
+
+    const project = options.projectType;
+    const newDarkModeValue = project === 'nextjs' ? 'class' : 'media';
+
+    if (darkModeProperty.length) {
+      darkModeProperty.get(0).node.value = j.stringLiteral(newDarkModeValue);
+    } else {
+      // If darkMode property doesn't exist, add it
+      const properties = tailwindConfig.get(0).node.right.properties;
+      const darkModePropertyNode = j.property(
+        'init',
+        j.identifier('darkMode'),
+        j.stringLiteral(newDarkModeValue)
+      );
+      properties.push(darkModePropertyNode);
+    }
+
     return root.toSource();
   } catch (err) {
     console.log(`\x1b[31mError: ${err as Error}\x1b[0m`);