generator-bitloops 0.3.26 → 0.3.28

package/package.json

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

package/setup/index.js

@@ -12,6 +12,8 @@ const __dirname = path.dirname(__filename);
 const DOT = '.';
 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
@@ -118,6 +120,60 @@ export default class extends Generator {
       default: false,
     });
 
+    this.option('baseUi', {
+      type: Boolean,
+      description: 'Add Base UI React components (@base-ui/react)',
+      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'];
@@ -253,31 +309,196 @@ export default class extends Generator {
       }
     };
 
-    this.installPrimitives = function () {
-      // Conditionally add Primitives
-      if (this.options.primitives) {
-        this.log('Installing Primitives...');
+    this.installBaseUi = function () {
+      // 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!');
+      }
+    };
 
-        const platformNextIndexPath = `${PLATFORM_NEXT_SRC_FOLDER}/index.ts`;
-        deleteFileIfExists(this.destinationPath(platformNextIndexPath));
-        this.fs.copyTpl(
-          this.templatePath(platformNextIndexPath),
-          this.destinationPath(platformNextIndexPath),
+    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!');
+      }
+    };
 
-        const platformNextImgPath = `${PLATFORM_NEXT_SRC_FOLDER}/Img.tsx`;
-        deleteFileIfExists(this.destinationPath(platformNextImgPath));
-        this.fs.copyTpl(
-          this.templatePath(platformNextImgPath),
-          this.destinationPath(platformNextImgPath),
+    this.installVitest = function () {
+      // Conditionally add Vitest and related testing packages
+      if (this.options.vitest) {
+        this.log('Installing Vitest and testing packages...');
+        spawnSync(
+          'pnpm',
+          [
+            '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('Vitest and testing packages installed!');
+      }
+    };
 
-        const platformNextTypesPath = `${PLATFORM_NEXT_SRC_FOLDER}/types.ts`;
-        deleteFileIfExists(this.destinationPath(platformNextTypesPath));
-        this.fs.copyTpl(
-          this.templatePath(platformNextTypesPath),
-          this.destinationPath(platformNextTypesPath),
+    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!');
+      }
+    };
+
+    this.installPrimitives = function () {
+      // Conditionally add Primitives
+      if (this.options.primitives) {
+        this.log('Installing Primitives...');
+
+        // 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),
+          );
+        });
+
+        // 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!');
       }
@@ -383,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) => {
@@ -429,9 +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/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 };