feat/create-gluestack-v2

packages/gluestack-cli/package.json

@@ -10,7 +10,7 @@
     "cli"
   ],
   "description": "A CLI tool for easily adding components from gluestack to your projects.",
-  "version": "0.7.13",
+  "version": "0.7.16-alpha.1",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [

packages/gluestack-cli/src/commands/add.ts

@@ -1,28 +1,31 @@
 import { Command } from 'commander';
 import { z } from 'zod';
+import os from 'os';
+import { join } from 'path';
 import { handleError } from '../util/handle-error';
 import { log } from '@clack/prompts';
-import { componentAdder, hookAdder, isHookFromConfig } from '../util/add';
+import { componentAdder } from '../util/add';
 import { config } from '../config';
 import {
   checkWritablePath,
+  cloneRepositoryAtRoot,
+  getPackageMangerFlag,
   isValidPath,
   projectRootPath,
-  cloneRepositoryAtRoot,
 } from '../util';
 import { checkIfInitialized, getComponentsPath } from '../util/config';
-import { join } from 'path';
-import os from 'os';
 
 const _homeDir = os.homedir();
 
 const addOptionsSchema = z.object({
-  components: z.string().optional(),
+  components: z.array(z.string()),
   all: z.boolean(),
   useNpm: z.boolean(),
   useYarn: z.boolean(),
   usePnpm: z.boolean(),
+  useBun: z.boolean(),
   path: z.string().optional(),
+  templateOnly: z.boolean(),
 });
 
 export const add = new Command()
@@ -33,22 +36,25 @@ export const add = new Command()
   .option('--use-npm ,useNpm', 'use npm to install dependencies', false)
   .option('--use-yarn, useYarn', 'use yarn to install dependencies', false)
   .option('--use-pnpm, usePnpm', 'use pnpm to install dependencies', false)
+  .option('--use-bun, useBun', 'use bun to install dependencies', false)
   .option('--path <path>', 'path to the components directory')
+  .option(
+    '--template-only templateOnly',
+    'Only install the template without installing dependencies',
+    false
+  )
   .action(async (components, opts, command) => {
     try {
-      if (command.args.length > 1) {
-        log.error(
-          '\x1b[31mOnly one component can be provided at a time, please provide the component name you want to add or --all.\x1b[0m'
-        );
-        process.exit(1);
-      }
       const options = addOptionsSchema.parse({
-        components: components ?? '',
+        components: command.args.length > 0 ? command.args : [],
         ...opts,
       });
+      const isTemplate = options.templateOnly;
+      !isTemplate && console.log('\n\x1b[1mWelcome to gluestack-ui!\x1b[0m\n');
+
       if (
-        options.all === false &&
-        (options.components === '' || options.components === undefined)
+        (!options.all && options.components?.length === 0) ||
+        (options.all && options.components?.length > 0)
       ) {
         log.error(
           '\x1b[31mInvalid arguement, please provide the component/hook name you want to add or --all.\x1b[0m'
@@ -62,7 +68,19 @@ export const add = new Command()
         );
         process.exit(1);
       }
-      await cloneRepositoryAtRoot(join(_homeDir, config.gluestackDir));
+      //if multiple package managers are used
+      if (
+        (options.useNpm && options.useYarn) ||
+        (options.useNpm && options.usePnpm) ||
+        (options.useYarn && options.usePnpm)
+      ) {
+        log.error(
+          `\x1b[31mMultiple package managers selected. Please select only one package manager.\x1b[0m`
+        );
+        process.exit(1);
+      }
+      //define package manager
+      getPackageMangerFlag(options);
       //function to get current path where GUIProvider is located
       const currWritablePath = await getComponentsPath(projectRootPath);
       if (currWritablePath) {
@@ -78,23 +96,17 @@ export const add = new Command()
         await checkWritablePath(options.path);
         config.writableComponentsPath = options.path;
       }
-      if (options.all) {
-        try {
-          await componentAdder({
-            requestedComponent: '--all',
-          });
-        } catch (err) {
-          log.error(`\x1b[31mError: ${(err as Error).message}\x1b[0m`);
-        }
-      } else if (await isHookFromConfig(options.components)) {
-        options.components &&
-          (await hookAdder({
-            requestedHook: options.components,
-          }));
-      } else {
-        await componentAdder({
-          requestedComponent: options.components?.toLowerCase(),
-        });
+      !isTemplate &&
+        (await cloneRepositoryAtRoot(join(_homeDir, config.gluestackDir)));
+      // define args based on --all or components
+      const args = options.all
+        ? { addAll: true }
+        : { componentArgs: options.components.map((c) => c.toLowerCase()) };
+
+      try {
+        await componentAdder(args);
+      } catch (err) {
+        log.error(`\x1b[31mError: ${(err as Error).message}\x1b[0m`);
       }
     } catch (err) {
       handleError(err);

packages/gluestack-cli/src/commands/init.ts

@@ -4,15 +4,23 @@ import { handleError } from '../util/handle-error';
 import { log } from '@clack/prompts';
 import { InitializeGlueStack } from '../util/init';
 import { config } from '../config';
-import { checkWritablePath, detectProjectType, isValidPath } from '../util';
+import {
+  checkWritablePath,
+  detectProjectType,
+  getPackageMangerFlag,
+  isValidPath,
+} from '../util';
 import path, { resolve } from 'path';
 import fs from 'fs';
 
 const initOptionsSchema = z.object({
   useNpm: z.boolean(),
   useYarn: z.boolean(),
   usePnpm: z.boolean(),
+  useBun: z.boolean(),
   path: z.string().optional(),
+  templateOnly: z.boolean(),
+  projectType: z.string(),
 });
 
 export const init = new Command()
@@ -21,13 +29,26 @@ export const init = new Command()
   .option('--use-npm ,useNpm', 'use npm to install dependencies', false)
   .option('--use-yarn, useYarn', 'use yarn to install dependencies', false)
   .option('--use-pnpm, usePnpm', 'use pnpm to install dependencies', false)
+  .option('--use-bun, useBun', 'use bun to install dependencies', false)
   .option(
     '--path <path>',
     'path to the components directory. defaults to components/ui'
   )
+  .option(
+    '--template-only templateOnly',
+    'Only install the template without installing dependencies',
+    false
+  )
+  .option(
+    '--projectType <projectType>',
+    'Type of project to initialize',
+    'library'
+  )
   .action(async (opts) => {
     try {
       const options = initOptionsSchema.parse({ ...opts });
+      const isTemplate = options.templateOnly;
+      console.log('\n\x1b[1mWelcome to gluestack-ui!\x1b[0m\n');
       const cwd = process.cwd();
       //if cwd doesn't have package.json file
       if (!fs.existsSync(path.join(cwd, 'package.json'))) {
@@ -36,6 +57,19 @@ export const init = new Command()
         );
         process.exit(1);
       }
+      //if multiple package managers are used
+      if (
+        (options.useNpm && options.useYarn) ||
+        (options.useNpm && options.usePnpm) ||
+        (options.useYarn && options.usePnpm)
+      ) {
+        log.error(
+          `\x1b[31mMultiple package managers selected. Please select only one package manager.\x1b[0m`
+        );
+        process.exit(1);
+      }
+      //define package manager
+      getPackageMangerFlag(options);
       //if path option is used
       if (options.path) {
         // Check if the string starts with "/" or "."
@@ -48,13 +82,15 @@ export const init = new Command()
         if (options.path !== config.writableComponentsPath) {
           await checkWritablePath(options.path);
           //check this change with all project types
-          config.writableComponentsPath = resolve(cwd, options.path);
+          config.writableComponentsPath = options.path;
         }
       }
       // Detect project type
-      const projectType = await detectProjectType(cwd);
+      const projectType = isTemplate
+        ? options.projectType
+        : await detectProjectType(cwd);
       // Initialize the gluestack
-      InitializeGlueStack({ projectType });
+      InitializeGlueStack({ projectType, isTemplate });
     } catch (err) {
       handleError(err);
     }

packages/gluestack-cli/src/config.ts

@@ -3,23 +3,22 @@ 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',
   codeModesDir: '../../../template/codemods',
+  packageManager: null as string | null,
 };
 
 export { config };