generator-bitloops 0.3.23 → 0.3.26

package/README.md

@@ -6,4 +6,4 @@ Nonetheless, you can use it independently to setup your next Next.js project wit
 
 ## How to run it
 
-`npx -y generator-bitloops setup --project="Your Project Name" --nextjs --typescript --tailwind --storybook --cypress`
+`npx -y generator-bitloops setup --project="Your Project Name" --nextjs --i18n --typescript --tailwind --storybook --cypress`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-bitloops",
-  "version": "0.3.23",
+  "version": "0.3.26",
   "description": "Next.js with TypeScript, Tailwind, Storybook and Cypress generator by Bitloops",
   "license": "MIT",
   "author": "Bitloops S.A.",

package/setup/index.js

@@ -111,17 +111,24 @@ export default class extends Generator {
       default: false,
     });
 
+    this.option('i18n', {
+      type: Boolean,
+      description:
+        'Add i18n internationalization support (i18next, i18next-icu, react-i18next)',
+      default: false,
+    });
+
     this.installNextJS = async function () {
       // Clone Next.js template with Tailwind if specified, using the project name
-      const createNextAppCommand = ['-y', 'create-next-app@15.3.3'];
+      const createNextAppCommand = ['-y', 'create-next-app@latest'];
       createNextAppCommand.push(toKebabCase(this.options.project)); // Use the project name for the directory
+      createNextAppCommand.push('--yes');
       createNextAppCommand.push('--app');
       createNextAppCommand.push('--empty');
       createNextAppCommand.push('--src-dir');
-      createNextAppCommand.push('--turbopack'); // when we go to Next.js 15
       createNextAppCommand.push('--import-alias');
       createNextAppCommand.push('@/*');
-      createNextAppCommand.push('--use-npm');
+      createNextAppCommand.push('--use-pnpm');
       createNextAppCommand.push('--eslint');
 
       if (this.options.typescript) {
@@ -140,11 +147,11 @@ export default class extends Generator {
       await new Promise((resolve, error) => {
         exec(
           `npx ${createNextAppCommand.join(' ')} && cd ${toKebabCase(
-            this.options.project
-          )} && npm install ${additionalPackages}`
+            this.options.project,
+          )} && pnpm add ${additionalPackages}`,
         ).on('exit', (code) => {
           this.destinationRoot(
-            this.destinationPath(toKebabCase(this.options.project))
+            this.destinationPath(toKebabCase(this.options.project)),
           );
           resolve();
         });
@@ -160,33 +167,50 @@ export default class extends Generator {
         });
         const versions = JSON.parse(versionsRaw);
 
-        // Filter for stable 9.0.x versions (exclude alpha/beta)
+        // Filter for stable 10.x versions (exclude alpha/beta/rc)
         const stableVersions = versions
-          .filter(version => version.startsWith('9.0.'))
-          .filter(version => !version.includes('-')); // Exclude pre-releases like -alpha or -beta
+          .filter((version) => version.startsWith('10.'))
+          .filter((version) => !version.includes('-')); // Exclude pre-releases like -alpha or -beta
 
         // Sort descending and get the latest
-        const latest90 = stableVersions
-          .sort((a, b) => {
-            // Split version strings like '9.0.9' into [9, 0, 9]
-            const aParts = a.split(DOT).map(Number);
-            const bParts = b.split(DOT).map(Number);
-            // Compare major, then minor, then patch
-            if (aParts[0] !== bParts[0]) return bParts[0] - aParts[0];
-            if (aParts[1] !== bParts[1]) return bParts[1] - aParts[1];
-            return bParts[2] - aParts[2];
-          })[0];
-
-        if (!latest90) {
-          throw new Error('No stable 9.0.x versions found.'); 
+        const latest10 = stableVersions.sort((a, b) => {
+          // Split version strings like '10.0.9' into [10, 0, 9]
+          const aParts = a.split(DOT).map(Number);
+          const bParts = b.split(DOT).map(Number);
+          // Compare major, then minor, then patch
+          if (aParts[0] !== bParts[0]) return bParts[0] - aParts[0];
+          if (aParts[1] !== bParts[1]) return bParts[1] - aParts[1];
+          return bParts[2] - aParts[2];
+        })[0];
+
+        if (!latest10) {
+          throw new Error('No stable 10.x versions found.');
         }
 
-        this.log(`Latest stable 9.0 version: ${latest90}`);
-        //Initializing sb with nextjs+vite
-        spawnSync('npx', ['-y', 'storybook@latest', 'init', '--no-dev', '--yes', '--type', 'nextjs', '--builder', 'vite'], { stdio: 'inherit', cwd: this.destinationRoot() });
+        this.log(`Latest stable 10.x version: ${latest10}`);
+        // Initializing storybook with nextjs+vite
+        spawnSync(
+          'npx',
+          [
+            '-y',
+            `storybook@${latest10}`,
+            'init',
+            '--no-dev',
+            '--yes',
+            '--type',
+            'nextjs',
+            '--builder',
+            'vite',
+          ],
+          { stdio: 'inherit', cwd: this.destinationRoot() },
+        );
         this.log('Storybook installed!');
-        //Verifies the correct nextjs-vite framework is used
-        spawnSync('npm', ['install', '--save-dev', '@storybook/nextjs-vite@^9'], { stdio: 'inherit', cwd: this.destinationRoot() });
+        // Verifies the correct nextjs-vite framework is used
+        spawnSync(
+          'pnpm',
+          ['add', '-D', '@storybook/nextjs-vite@^10'],
+          { stdio: 'inherit', cwd: this.destinationRoot() },
+        );
         this.log('@storybook/nextjs-vite installed!');
       }
     };
@@ -195,44 +219,64 @@ export default class extends Generator {
       // Conditionally add Cypress
       if (this.options.cypress) {
         this.log('Installing Cypress...');
-        spawnSync('npm', ['install', '--save-dev', 'cypress'], { stdio: 'inherit', cwd: this.destinationRoot() });
+        spawnSync('pnpm', ['add', '-D', 'cypress'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
         this.log('Cypress installed!');
         if (this.options.bitloops) {
-          spawnSync('npm', [
-            'install',
-            '--save-dev',
-            'mochawesome',
-            'mochawesome-merge',
-            'mochawesome-report-generator',
-          ], { stdio: 'inherit', cwd: this.destinationRoot() });
+          spawnSync(
+            'pnpm',
+            [
+              'add',
+              '-D',
+              'mochawesome',
+              'mochawesome-merge',
+              'mochawesome-report-generator',
+            ],
+            { stdio: 'inherit', cwd: this.destinationRoot() },
+          );
         }
       }
     };
 
+    this.installI18n = function () {
+      // Conditionally add i18n packages
+      if (this.options.i18n) {
+        this.log('Installing i18n packages...');
+        spawnSync(
+          'pnpm',
+          ['add', 'i18next', 'i18next-icu', 'react-i18next'],
+          { stdio: 'inherit', cwd: this.destinationRoot() },
+        );
+        this.log('i18n packages installed!');
+      }
+    };
+
     this.installPrimitives = function () {
       // Conditionally add Primitives
       if (this.options.primitives) {
         this.log('Installing Primitives...');
-        
+
         const platformNextIndexPath = `${PLATFORM_NEXT_SRC_FOLDER}/index.ts`;
         deleteFileIfExists(this.destinationPath(platformNextIndexPath));
         this.fs.copyTpl(
           this.templatePath(platformNextIndexPath),
-          this.destinationPath(platformNextIndexPath)
+          this.destinationPath(platformNextIndexPath),
         );
 
         const platformNextImgPath = `${PLATFORM_NEXT_SRC_FOLDER}/Img.tsx`;
         deleteFileIfExists(this.destinationPath(platformNextImgPath));
         this.fs.copyTpl(
           this.templatePath(platformNextImgPath),
-          this.destinationPath(platformNextImgPath)
+          this.destinationPath(platformNextImgPath),
         );
 
         const platformNextTypesPath = `${PLATFORM_NEXT_SRC_FOLDER}/types.ts`;
         deleteFileIfExists(this.destinationPath(platformNextTypesPath));
         this.fs.copyTpl(
           this.templatePath(platformNextTypesPath),
-          this.destinationPath(platformNextTypesPath)
+          this.destinationPath(platformNextTypesPath),
         );
 
         this.log('Primitives installed!');
@@ -248,7 +292,7 @@ export default class extends Generator {
           this.log('Setting up Tailwind CSS with Storybook...');
           this.fs.copyTpl(
             this.templatePath('storybook.preview.ts'),
-            this.destinationPath('.storybook/preview.ts')
+            this.destinationPath('.storybook/preview.ts'),
           );
         }
         this.log('Removing default Storybook stories...');
@@ -267,58 +311,38 @@ export default class extends Generator {
         this.log('Adding Cypress config...');
         this.fs.copyTpl(
           this.templatePath('cypress.config.ts'),
-          this.destinationPath('cypress.config.ts')
+          this.destinationPath('cypress.config.ts'),
         );
       }
 
       deleteFileIfExists(this.destinationPath('src/app/page.tsx'));
       this.fs.copyTpl(
         this.templatePath('next.app.page.tsx'),
-        this.destinationPath('src/app/page.tsx')
+        this.destinationPath('src/app/page.tsx'),
       );
 
       deleteFileIfExists(this.destinationPath('src/app/layout.tsx'));
       this.fs.copyTpl(
         this.templatePath('next.app.layout.tsx'),
         this.destinationPath('src/app/layout.tsx'),
-        { projectName: this.options.project }
+        { projectName: this.options.project },
       );
 
       this.log('Adding Meyer reset in global.css...');
       deleteFileIfExists(this.destinationPath('src/app/globals.css'));
       this.fs.copyTpl(
         this.templatePath('globals.css'),
-        this.destinationPath('src/app/globals.css')
+        this.destinationPath('src/app/globals.css'),
       );
 
       if (this.options.typescript) {
-        this.log('Updating tsconfig.json paths...');
-        const tsconfigPath = this.destinationPath('tsconfig.json');
-        if (this.fs.exists(tsconfigPath)) {
-          const tsconfigContent = this.fs.read(tsconfigPath);
-          const tsconfig = JSON.parse(tsconfigContent);
-          
-          // Initialize compilerOptions if it doesn't exist
-          if (!tsconfig.compilerOptions) {
-            tsconfig.compilerOptions = {};
-          }
-          
-          // Initialize paths if it doesn't exist
-          if (!tsconfig.compilerOptions.paths) {
-            tsconfig.compilerOptions.paths = {};
-          }
-          
-          // Add or merge the path aliases
-          tsconfig.compilerOptions.paths = {
-            ...tsconfig.compilerOptions.paths,
-            "@/primitives": ["./platform-next/src"],
-            "@/assets": ["./src/assets"]
-          };
-          
-          deleteFileIfExists(tsconfigPath);
-          this.fs.write(tsconfigPath, JSON.stringify(tsconfig, null, 2) + '\n');
-          this.log('tsconfig.json paths updated!');
-        }
+        this.log('Replacing tsconfig.json with Bitloops template...');
+        deleteFileIfExists(this.destinationPath('tsconfig.json'));
+        this.fs.copyTpl(
+          this.templatePath('tsconfig.json'),
+          this.destinationPath('tsconfig.json'),
+        );
+        this.log('tsconfig.json updated!');
       }
 
       if (this.options.bitloops) {
@@ -327,36 +351,35 @@ export default class extends Generator {
           'src/components/bitloops/unsupported/Unsupported.tsx';
         this.fs.copyTpl(
           this.templatePath(unsupportedPath),
-          this.destinationPath(unsupportedPath)
+          this.destinationPath(unsupportedPath),
         );
         const buttonPath = 'src/components/bitloops/button/Button.tsx';
         this.fs.copyTpl(
           this.templatePath(buttonPath),
-          this.destinationPath(buttonPath)
+          this.destinationPath(buttonPath),
         );
         if (this.options.storybook) {
           const unsupportedPath =
             'src/components/bitloops/unsupported/Unsupported.stories.tsx';
           this.fs.copyTpl(
             this.templatePath(unsupportedPath),
-            this.destinationPath(unsupportedPath)
+            this.destinationPath(unsupportedPath),
           );
           const buttonPath =
             'src/components/bitloops/button/Button.stories.tsx';
           this.fs.copyTpl(
             this.templatePath(buttonPath),
-            this.destinationPath(buttonPath)
+            this.destinationPath(buttonPath),
           );
         }
         if (this.options.cypress) {
           const path = 'cypress/helpers/index.ts';
           this.fs.copyTpl(this.templatePath(path), this.destinationPath(path));
         }
-        spawnSync('npm', [
-          'install',
-          '--save-dev',
-          'react-aria-components',
-        ], { stdio: 'inherit', cwd: this.destinationRoot() });
+        spawnSync('pnpm', ['add', '-D', 'react-aria-components'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
       }
     };
 
@@ -365,8 +388,8 @@ export default class extends Generator {
       await new Promise((resolve) => {
         exec(
           `cd ${toKebabCase(
-            this.options.project
-          )} && git add . && git commit -m "Initial setup"`
+            this.options.project,
+          )} && git add . && git commit -m "Initial setup"`,
         ).on('exit', (code) => {
           if (code !== 0) {
             this.log('Error committing changes to git! ', code);
@@ -383,30 +406,31 @@ export default class extends Generator {
     // Check if the project name and --nextjs flag are provided
     if (!this.options.project) {
       this.log(
-        'Error: --project option is required to specify the project name.'
+        'Error: --project option is required to specify the project name.',
       );
       process.exit(1);
     }
 
     if (!this.options.nextjs) {
       this.log(
-        'Error: --nextjs option is currently required to scaffold a project.'
+        'Error: --nextjs option is currently required to scaffold a project.',
       );
       process.exit(1);
     }
 
     this.log(
       `Initializing project ${toKebabCase(
-        this.options.project
-      )} with the selected options...`
+        this.options.project,
+      )} with the selected options...`,
     );
   }
 
   async main() {
     await this.installNextJS();
-    this.installStorybook();
     this.installCypress();
+    this.installI18n();
     this.installPrimitives();
+    this.installStorybook();
     await this.patchFiles();
     if (this.options.git) {
       await this.commitChanges();
@@ -416,19 +440,19 @@ export default class extends Generator {
   end() {
     this.log(
       `Your Bitloops project '${toKebabCase(
-        this.options.project
-      )}' setup is complete! 🎉🎉🎉`
+        this.options.project,
+      )}' setup is complete! 🎉🎉🎉`,
     );
     this.log('');
     this.log('Use the following commands to start:');
-    this.log('- `npm run dev` to start the Next.js app.');
+    this.log('- `pnpm dev` to start the Next.js app.');
     if (this.options.storybook)
-      this.log('- `npm run storybook` to start Storybook.');
+      this.log('- `pnpm storybook` to start Storybook.');
     if (this.options.cypress)
       this.log('- `npx cypress open --e2e --browser chrome` to open Cypress.');
     if (this.options.cypress)
       this.log(
-        '- `npx cypress run --e2e --browser chrome` to run Cypress on the terminal.'
+        '- `npx cypress run --e2e --browser chrome` to run Cypress on the terminal.',
       );
   }
 }

package/setup/templates/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@/components/*": ["src/components/*"],
+      "@/assets/*": ["src/assets/*"],
+      "@/primitives": ["platform-next/src"],
+      "@/primitives/*": ["platform-next/src/*"],
+      "@/hooks/*": ["src/hooks/*"],
+      "@/lib/*": ["src/lib/*"],
+      "@/types/*": ["src/types/*"],
+      "@/utils/*": ["src/utils/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}