generator-bitloops 0.3.27 → 0.3.29

package/package.json

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

package/setup/index.js

@@ -10,8 +10,11 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const DOT = '.';
+const STORYBOOK_FOLDER = '.storybook';
 const PLATFORM_NEXT_FOLDER = 'platform-next';
 const PLATFORM_NEXT_SRC_FOLDER = `${PLATFORM_NEXT_FOLDER}/src`;
+const PLATFORM_VITE_FOLDER = 'platform-vite';
+const PLATFORM_VITE_SRC_FOLDER = `${PLATFORM_VITE_FOLDER}/src`;
 
 function isKebabCase(str) {
   // Check if the string is empty
@@ -124,6 +127,54 @@ export default class extends Generator {
       default: false,
     });
 
+    this.option('redux', {
+      type: Boolean,
+      description: 'Add Redux Toolkit and React Redux for state management',
+      default: false,
+    });
+
+    this.option('vitest', {
+      type: Boolean,
+      description: 'Add Vitest testing framework with coverage and UI',
+      default: false,
+    });
+
+    this.option('webVitals', {
+      type: Boolean,
+      description: 'Add web-vitals for performance monitoring',
+      default: false,
+    });
+
+    this.option('zod', {
+      type: Boolean,
+      description: 'Add Zod for schema validation',
+      default: false,
+    });
+
+    this.option('bundleAnalyzer', {
+      type: Boolean,
+      description: 'Add @next/bundle-analyzer for bundle analysis',
+      default: false,
+    });
+
+    this.option('reactIcons', {
+      type: Boolean,
+      description: 'Add react-icons library',
+      default: false,
+    });
+
+    this.option('msw', {
+      type: Boolean,
+      description: 'Add Mock Service Worker (MSW) for API mocking',
+      default: false,
+    });
+
+    this.option('reactCompiler', {
+      type: Boolean,
+      description: 'Add babel-plugin-react-compiler',
+      default: false,
+    });
+
     this.installNextJS = async function () {
       // Clone Next.js template with Tailwind if specified, using the project name
       const createNextAppCommand = ['-y', 'create-next-app@latest'];
@@ -212,11 +263,10 @@ export default class extends Generator {
         );
         this.log('Storybook installed!');
         // Verifies the correct nextjs-vite framework is used
-        spawnSync(
-          'pnpm',
-          ['add', '-D', '@storybook/nextjs-vite@^10'],
-          { stdio: 'inherit', cwd: this.destinationRoot() },
-        );
+        spawnSync('pnpm', ['add', '-D', '@storybook/nextjs-vite@^10'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
         this.log('@storybook/nextjs-vite installed!');
       }
     };
@@ -250,11 +300,10 @@ export default class extends Generator {
       // 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() },
-        );
+        spawnSync('pnpm', ['add', 'i18next', 'i18next-icu', 'react-i18next'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
         this.log('i18n packages installed!');
       }
     };
@@ -263,12 +312,139 @@ export default class extends Generator {
       // Conditionally add Base UI
       if (this.options.baseUi) {
         this.log('Installing Base UI...');
+        spawnSync('pnpm', ['add', '@base-ui/react@^1.1.0'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        this.log('Base UI installed!');
+      }
+    };
+
+    this.installRedux = function () {
+      // Conditionally add Redux Toolkit and React Redux
+      if (this.options.redux) {
+        this.log('Installing Redux Toolkit and React Redux...');
+        spawnSync('pnpm', ['add', '@reduxjs/toolkit', 'react-redux'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        this.log('Redux Toolkit and React Redux installed!');
+      }
+    };
+
+    this.installVitest = function () {
+      // Conditionally add Vitest and related testing packages
+      if (this.options.vitest) {
+        this.log('Installing Vitest and testing packages...');
         spawnSync(
           'pnpm',
-          ['add', '@base-ui/react@^1.1.0'],
+          [
+            'add',
+            '-D',
+            'vitest',
+            '@vitest/ui',
+            '@vitest/coverage-v8',
+            '@vitest/browser-playwright',
+            '@testing-library/react',
+            '@testing-library/jest-dom',
+            '@testing-library/user-event',
+            '@vitejs/plugin-react',
+            'vite',
+            'jsdom',
+            'playwright',
+          ],
           { stdio: 'inherit', cwd: this.destinationRoot() },
         );
-        this.log('Base UI installed!');
+        this.log('Vitest and testing packages installed!');
+      }
+    };
+
+    this.installWebVitals = function () {
+      // Conditionally add web-vitals
+      if (this.options.webVitals) {
+        this.log('Installing web-vitals...');
+        spawnSync('pnpm', ['add', 'web-vitals'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        this.log('web-vitals installed!');
+      }
+    };
+
+    this.installZod = function () {
+      // Conditionally add Zod
+      if (this.options.zod) {
+        this.log('Installing Zod...');
+        spawnSync('pnpm', ['add', 'zod'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        this.log('Zod installed!');
+      }
+    };
+
+    this.installBundleAnalyzer = function () {
+      // Conditionally add @next/bundle-analyzer
+      if (this.options.bundleAnalyzer) {
+        this.log('Installing @next/bundle-analyzer...');
+        spawnSync('pnpm', ['add', '-D', '@next/bundle-analyzer'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        this.log('@next/bundle-analyzer installed!');
+      }
+    };
+
+    this.installReactIcons = function () {
+      // Conditionally add react-icons
+      if (this.options.reactIcons) {
+        this.log('Installing react-icons...');
+        spawnSync('pnpm', ['add', 'react-icons'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        this.log('react-icons installed!');
+      }
+    };
+
+    this.installMsw = function () {
+      // Conditionally add Mock Service Worker
+      if (this.options.msw) {
+        this.log('Installing Mock Service Worker (MSW)...');
+        spawnSync('pnpm', ['add', '-D', 'msw'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        // Initialize MSW
+        spawnSync('npx', ['msw', 'init', 'public/', '--save'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        this.log('MSW installed!');
+      }
+    };
+
+    this.installReactCompiler = function () {
+      // Conditionally add babel-plugin-react-compiler
+      if (this.options.reactCompiler) {
+        this.log('Installing babel-plugin-react-compiler...');
+        spawnSync('pnpm', ['add', '-D', 'babel-plugin-react-compiler'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        this.log('babel-plugin-react-compiler installed!');
+      }
+    };
+
+    this.installIntlMessageFormat = function () {
+      // Add intl-messageformat when i18n is enabled
+      if (this.options.i18n) {
+        this.log('Installing intl-messageformat...');
+        spawnSync('pnpm', ['add', 'intl-messageformat'], {
+          stdio: 'inherit',
+          cwd: this.destinationRoot(),
+        });
+        this.log('intl-messageformat installed!');
       }
     };
 
@@ -277,26 +453,41 @@ export default class extends Generator {
       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),
-        );
-
-        const platformNextImgPath = `${PLATFORM_NEXT_SRC_FOLDER}/Img.tsx`;
-        deleteFileIfExists(this.destinationPath(platformNextImgPath));
-        this.fs.copyTpl(
-          this.templatePath(platformNextImgPath),
-          this.destinationPath(platformNextImgPath),
-        );
+        // Platform Next files
+        const platformNextFiles = [
+          `${PLATFORM_NEXT_SRC_FOLDER}/index.ts`,
+          `${PLATFORM_NEXT_SRC_FOLDER}/Img.tsx`,
+          `${PLATFORM_NEXT_SRC_FOLDER}/Link.tsx`,
+          `${PLATFORM_NEXT_SRC_FOLDER}/setup.ts`,
+          `${PLATFORM_NEXT_SRC_FOLDER}/router/index.ts`,
+          `${PLATFORM_NEXT_SRC_FOLDER}/router/useNextRouter.ts`,
+        ];
+
+        platformNextFiles.forEach((filePath) => {
+          deleteFileIfExists(this.destinationPath(filePath));
+          this.fs.copyTpl(
+            this.templatePath(filePath),
+            this.destinationPath(filePath),
+          );
+        });
 
-        const platformNextTypesPath = `${PLATFORM_NEXT_SRC_FOLDER}/types.ts`;
-        deleteFileIfExists(this.destinationPath(platformNextTypesPath));
-        this.fs.copyTpl(
-          this.templatePath(platformNextTypesPath),
-          this.destinationPath(platformNextTypesPath),
-        );
+        // Platform Vite files
+        const platformViteFiles = [
+          `${PLATFORM_VITE_SRC_FOLDER}/index.ts`,
+          `${PLATFORM_VITE_SRC_FOLDER}/Img.tsx`,
+          `${PLATFORM_VITE_SRC_FOLDER}/Link.tsx`,
+          `${PLATFORM_VITE_SRC_FOLDER}/setup.ts`,
+          `${PLATFORM_VITE_SRC_FOLDER}/router/index.ts`,
+          `${PLATFORM_VITE_SRC_FOLDER}/router/useViteRouter.ts`,
+        ];
+
+        platformViteFiles.forEach((filePath) => {
+          deleteFileIfExists(this.destinationPath(filePath));
+          this.fs.copyTpl(
+            this.templatePath(filePath),
+            this.destinationPath(filePath),
+          );
+        });
 
         this.log('Primitives installed!');
       }
@@ -306,14 +497,25 @@ export default class extends Generator {
       // Conditionally initialize Storybook
       if (this.options.storybook) {
         this.log('Making Storybook changes...');
-        if (this.options.tailwind) {
-          deleteFileIfExists(this.destinationPath('.storybook/preview.ts'));
-          this.log('Setting up Tailwind CSS with Storybook...');
+
+        // Copy .storybook template files
+        const storybookFiles = [
+          `${STORYBOOK_FOLDER}/main.ts`,
+          `${STORYBOOK_FOLDER}/preview.tsx`,
+          `${STORYBOOK_FOLDER}/vitest.setup.ts`,
+        ];
+
+        // Delete .storybook/preview.ts if it exists (generated by storybook init)
+        deleteFileIfExists(this.destinationPath(`${STORYBOOK_FOLDER}/preview.ts`));
+
+        storybookFiles.forEach((filePath) => {
+          deleteFileIfExists(this.destinationPath(filePath));
           this.fs.copyTpl(
-            this.templatePath('storybook.preview.ts'),
-            this.destinationPath('.storybook/preview.ts'),
+            this.templatePath(filePath),
+            this.destinationPath(filePath),
           );
-        }
+        });
+
         this.log('Removing default Storybook stories...');
         try {
           fs.rmSync(this.destinationPath('src/stories'), {
@@ -402,6 +604,39 @@ export default class extends Generator {
       }
     };
 
+    this.patchPackageJsonScripts = async function () {
+      this.log('Patching package.json scripts...');
+      const packageJsonPath = this.destinationPath('package.json');
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+
+      // Add vitest scripts if vitest is enabled
+      if (this.options.vitest) {
+        packageJson.scripts.test = 'vitest';
+        packageJson.scripts['test:ui'] = 'vitest --ui';
+        packageJson.scripts['test:coverage'] = 'vitest run --coverage';
+      }
+
+      // Add type-check script if typescript is enabled
+      if (this.options.typescript) {
+        packageJson.scripts['type-check'] = 'tsc --noEmit';
+      }
+
+      // Add analyze script if bundleAnalyzer is enabled
+      if (this.options.bundleAnalyzer) {
+        packageJson.scripts.analyze = 'ANALYZE=true next build';
+      }
+
+      // Add msw configuration if msw is enabled
+      if (this.options.msw) {
+        packageJson.msw = {
+          workerDirectory: ['public'],
+        };
+      }
+
+      fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+      this.log('package.json scripts patched!');
+    };
+
     this.commitChanges = async function () {
       this.log('Committing changes to git...');
       await new Promise((resolve) => {
@@ -448,10 +683,20 @@ export default class extends Generator {
     await this.installNextJS();
     this.installCypress();
     this.installI18n();
+    this.installIntlMessageFormat();
     this.installBaseUi();
+    this.installRedux();
+    this.installVitest();
+    this.installWebVitals();
+    this.installZod();
+    this.installBundleAnalyzer();
+    this.installReactIcons();
+    this.installMsw();
+    this.installReactCompiler();
     this.installPrimitives();
     this.installStorybook();
     await this.patchFiles();
+    await this.patchPackageJsonScripts();
     if (this.options.git) {
       await this.commitChanges();
     }

package/setup/templates/.storybook/main.ts

@@ -0,0 +1,32 @@
+import type { StorybookConfig } from '@storybook/nextjs-vite';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs"
+  ],
+  "framework": "@storybook/nextjs-vite",
+  "staticDirs": [
+    "../public"
+  ],
+  async viteFinal(config) {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@/primitives': path.resolve(__dirname, '../platform-vite/src'),
+      };
+    }
+    return config;
+  }
+};
+export default config;

package/setup/templates/.storybook/preview.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import type { Preview } from "@storybook/nextjs-vite";
+import {
+  fontConfig,
+  generateGoogleFontsUrl,
+} from "../src/lib/fonts/fonts.config";
+import "../platform-vite/src/setup";
+import "../src/app/globals.css";
+import "../src/i18n";
+import { worker } from "../src/mocks/browser";
+import { Provider } from "react-redux";
+import { store } from "../src/store";
+
+await worker.start({ onUnhandledRequest: "bypass" });
+
+// Inject Google Fonts stylesheet and CSS variables
+if (typeof document !== "undefined") {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = generateGoogleFontsUrl();
+  document.head.appendChild(link);
+
+  // Set CSS variables
+  const style = document.createElement("style");
+  style.textContent = `
+    :root {
+      ${fontConfig.montserrat.variable}: '${fontConfig.montserrat.family}', system-ui, sans-serif;
+      ${fontConfig.roboto.variable}: '${fontConfig.roboto.family}', system-ui, sans-serif;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    ),
+  ],
+};
+
+export default preview;

package/setup/templates/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/setup/templates/platform-next/src/Img.tsx

@@ -1,7 +1,8 @@
-'use client';
-import NextImage from 'next/image';
-import type { ImgProps } from './types';
+"use client";
+import NextImage from "next/image";
+import type { ImgProps } from "../../src/lib/types/primitives.types";
+
 export function Img(props: ImgProps) {
-  const { responsive, ...rest } = props;
+  const { ...rest } = props;
   return <NextImage {...rest} />;
-}
+}

package/setup/templates/platform-next/src/Link.tsx

@@ -0,0 +1,6 @@
+"use client";
+import NextLink from "next/link";
+import type { LinkProps } from "../../src/lib/types/primitives.types";
+export function Link(props: LinkProps) {
+  return <NextLink {...props} />;
+}

package/setup/templates/platform-next/src/index.ts

@@ -1,2 +1,3 @@
-export * from './types';
-export * from './Img';
+export * from "../../src/lib/types/primitives.types";
+export * from "./Img";
+export * from "./Link";

package/setup/templates/platform-next/src/router/index.ts

@@ -0,0 +1 @@
+export { useNextRouter } from './useNextRouter';

package/setup/templates/platform-next/src/router/useNextRouter.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import { useRouter as useNextNavigationRouter } from 'next/navigation';
+import type { Router } from '@/lib/router/types';
+
+export function useNextRouter(): Router {
+  const nextRouter = useNextNavigationRouter();
+
+  return {
+    push: (url: string) => nextRouter.push(url),
+    replace: (url: string) => nextRouter.replace(url),
+    back: () => nextRouter.back(),
+  };
+}

package/setup/templates/platform-next/src/setup.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import { setRouterImplementation } from '@/lib/router/useRouter';
+import { useNextRouter } from './router/useNextRouter';
+
+// Set up Next.js router implementation
+setRouterImplementation(useNextRouter);

package/setup/templates/platform-vite/src/Img.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable @next/next/no-img-element */
+import type { ImgProps } from "../../src/lib/types/primitives.types";
+
+export function Img(props: ImgProps) {
+  const { src, alt, className, style, loading, decoding } =
+    props;
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={className}
+      style={style}
+      loading={loading}
+      decoding={decoding}
+    />
+  );
+}

package/setup/templates/platform-vite/src/Link.tsx

@@ -0,0 +1,19 @@
+import type { LinkProps } from "../../src/lib/types/primitives.types";
+
+export function Link(props: LinkProps) {
+  const { href, children, target, rel, className, style, onClick } = props;
+
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={rel}
+      className={className}
+      style={style}
+      onClick={onClick}
+      aria-label={props["aria-label"]}
+    >
+      {children}
+    </a>
+  );
+}

package/setup/templates/platform-vite/src/index.ts

@@ -0,0 +1,3 @@
+export * from "../../src/lib/types/primitives.types";
+export * from "./Img";
+export * from "./Link";

package/setup/templates/platform-vite/src/router/index.ts

@@ -0,0 +1 @@
+export { useViteRouter } from "./useViteRouter";

package/setup/templates/platform-vite/src/router/useViteRouter.ts

@@ -0,0 +1,17 @@
+import type { Router } from "@/lib/router/types";
+
+export function useViteRouter(): Router {
+  return {
+    push: (url: string) => {
+      console.log("[Storybook Router] Push to:", url);
+      // In Storybook, we don't actually navigate
+      // This could be enhanced with Storybook actions addon
+    },
+    replace: (url: string) => {
+      console.log("[Storybook Router] Replace with:", url);
+    },
+    back: () => {
+      console.log("[Storybook Router] Go back");
+    },
+  };
+}

package/setup/templates/platform-vite/src/setup.ts

@@ -0,0 +1,5 @@
+import { setRouterImplementation } from "@/lib/router/useRouter";
+import { useViteRouter } from "./router/useViteRouter";
+
+// Set up Vite/Storybook router implementation
+setRouterImplementation(useViteRouter);

package/setup/templates/platform-next/src/types.ts

@@ -1,28 +0,0 @@
-export type ImgProps = {
-  src: string; alt: string;
-  width?: number; height?: number; fill?: boolean;
-  sizes?: string; priority?: boolean; quality?: number;
-  className?: string; style?: React.CSSProperties;
-  loading?: 'eager'|'lazy'; decoding?: 'auto'|'sync'|'async';
-  responsive?: { sources: Array<{ media: string; srcSet: string }> }; // optional <picture>
-};
-
-export type LinkProps = {
-  href: string; children: React.ReactNode;
-  prefetch?: boolean; replace?: boolean; scroll?: boolean;
-  target?: React.HTMLAttributeAnchorTarget; rel?: string;
-  className?: string; style?: React.CSSProperties; 'aria-label'?: string;
-};
-
-export type MetaProps = {
-  title?: string;
-  description?: string;
-  lang?: string;
-  openGraph?: { title?: string; description?: string; image?: string; url?: string; type?: string };
-  twitter?: { card?: string; title?: string; description?: string; image?: string };
-  icons?: { icon?: string; apple?: string };
-};
-
-export type FontSpec =
-  | { kind: 'next'; fonts: Array<{ variable: string; loader: () => any }> } // Next native loaders
-  | { kind: 'css'; hrefs: string[]; className?: string }; 

package/setup/templates/storybook.preview.ts

@@ -1,15 +0,0 @@
-import type { Preview } from "@storybook/react";
-import "../src/app/globals.css";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;