generator-bitloops 0.3.32 → 0.3.34

package/package.json

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

package/setup/index.js

@@ -17,6 +17,8 @@ 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`;
+const LIB_TYPES_FOLDER = 'src/lib/types';
+const LIB_ROUTER_FOLDER = 'src/lib/router';
 
 function isKebabCase(str) {
   // Check if the string is empty
@@ -289,17 +291,21 @@ export default class extends Generator {
 
         this.log(`Latest stable 10.x version: ${latest10}`);
         // Initializing storybook with nextjs+vite
-        runSync('npx', [
-          '-y',
-          `storybook@${latest10}`,
-          'init',
-          '--no-dev',
-          '--yes',
-          '--type',
-          'nextjs',
-          '--builder',
-          'vite',
-        ], { cwd: this.destinationRoot() });
+        runSync(
+          'npx',
+          [
+            '-y',
+            `storybook@${latest10}`,
+            'init',
+            '--no-dev',
+            '--yes',
+            '--type',
+            'nextjs',
+            '--builder',
+            'vite',
+          ],
+          { cwd: this.destinationRoot() },
+        );
         this.log('Storybook installed!');
         // Verifies the correct nextjs-vite framework is used
         runSync('pnpm', ['add', '-D', '@storybook/nextjs-vite@^10'], {
@@ -318,13 +324,17 @@ export default class extends Generator {
         });
         this.log('Cypress installed!');
         if (this.options.bitloops) {
-          runSync('pnpm', [
-            'add',
-            '-D',
-            'mochawesome',
-            'mochawesome-merge',
-            'mochawesome-report-generator',
-          ], { cwd: this.destinationRoot() });
+          runSync(
+            'pnpm',
+            [
+              'add',
+              '-D',
+              'mochawesome',
+              'mochawesome-merge',
+              'mochawesome-report-generator',
+            ],
+            { cwd: this.destinationRoot() },
+          );
         }
       }
     };
@@ -366,21 +376,25 @@ export default class extends Generator {
       // Conditionally add Vitest and related testing packages
       if (this.options.vitest) {
         this.log('Installing Vitest and testing packages...');
-        runSync('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',
-        ], { cwd: this.destinationRoot() });
+        runSync(
+          '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',
+          ],
+          { cwd: this.destinationRoot() },
+        );
         this.log('Vitest and testing packages installed!');
       }
     };
@@ -507,6 +521,36 @@ export default class extends Generator {
           );
         });
 
+        // Lib types files
+        const libTypesFiles = [
+          `${LIB_TYPES_FOLDER}/primitives.types.ts`,
+          `${LIB_TYPES_FOLDER}/image.types.ts`,
+          `${LIB_TYPES_FOLDER}/types.d.ts`,
+        ];
+
+        libTypesFiles.forEach((filePath) => {
+          deleteFileIfExists(this.destinationPath(filePath));
+          this.fs.copyTpl(
+            this.templatePath(filePath),
+            this.destinationPath(filePath),
+          );
+        });
+
+        // Lib router files
+        const libRouterFiles = [
+          `${LIB_ROUTER_FOLDER}/index.ts`,
+          `${LIB_ROUTER_FOLDER}/types.ts`,
+          `${LIB_ROUTER_FOLDER}/useRouter.ts`,
+        ];
+
+        libRouterFiles.forEach((filePath) => {
+          deleteFileIfExists(this.destinationPath(filePath));
+          this.fs.copyTpl(
+            this.templatePath(filePath),
+            this.destinationPath(filePath),
+          );
+        });
+
         this.log('Primitives installed!');
       }
     };
@@ -517,10 +561,7 @@ export default class extends Generator {
         this.log('Making Storybook changes...');
 
         // Copy .storybook template files
-        const storybookFiles = [
-          `${STORYBOOK_FOLDER}/main.ts`,
-          `${STORYBOOK_FOLDER}/vitest.setup.ts`,
-        ];
+        const storybookFiles = [`${STORYBOOK_FOLDER}/main.ts`];
 
         // Delete .storybook/preview.ts if it exists (generated by storybook init)
         deleteFileIfExists(
@@ -724,7 +765,10 @@ export default class extends Generator {
     await this.withRetry(() => this.installNextJS(), 'Next.js install');
     await this.withRetry(() => this.installCypress(), 'Cypress');
     await this.withRetry(() => this.installI18n(), 'i18n');
-    await this.withRetry(() => this.installIntlMessageFormat(), 'intl-messageformat');
+    await this.withRetry(
+      () => this.installIntlMessageFormat(),
+      'intl-messageformat',
+    );
     await this.withRetry(() => this.installBaseUi(), 'Base UI');
     await this.withRetry(() => this.installRedux(), 'Redux');
     await this.withRetry(() => this.installVitest(), 'Vitest');
@@ -737,7 +781,10 @@ export default class extends Generator {
     await this.withRetry(() => this.installPrimitives(), 'Primitives');
     await this.withRetry(() => this.installStorybook(), 'Storybook');
     await this.withRetry(() => this.patchFiles(), 'Patch files');
-    await this.withRetry(() => this.patchPackageJsonScripts(), 'Patch package.json');
+    await this.withRetry(
+      () => this.patchPackageJsonScripts(),
+      'Patch package.json',
+    );
     if (this.options.git) {
       await this.withRetry(() => this.commitChanges(), 'Git commit');
     }

package/setup/templates/src/lib/router/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export { useRouter } from "./useRouter";

package/setup/templates/src/lib/router/types.ts

@@ -0,0 +1,5 @@
+export interface Router {
+  push: (url: string) => void;
+  replace: (url: string) => void;
+  back: () => void;
+}

package/setup/templates/src/lib/router/useRouter.ts

@@ -0,0 +1,18 @@
+import type { Router } from './types';
+
+// This will be implemented by platform-specific code
+// The implementation will be injected at build time
+let routerImplementation: (() => Router) | null = null;
+
+export function setRouterImplementation(implementation: () => Router) {
+  routerImplementation = implementation;
+}
+
+export function useRouter(): Router {
+  if (!routerImplementation) {
+    throw new Error(
+      'Router implementation not set. Make sure to call setRouterImplementation in your platform setup.'
+    );
+  }
+  return routerImplementation();
+}

package/setup/templates/src/lib/types/image.types.ts

@@ -0,0 +1,5 @@
+export interface ImageProperties {
+  src: string;
+  width: number;
+  height: number;
+}

package/setup/templates/src/lib/types/primitives.types.ts

@@ -0,0 +1,64 @@
+// shared types (export them from both adapters)
+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;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  "aria-label"?: string;
+};
+
+export type ButtonProps = {
+  children: React.ReactNode;
+  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  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: () => unknown }> } // Next native loaders
+  | { kind: "css"; hrefs: string[]; className?: string };

package/setup/templates/src/lib/types/types.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

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

@@ -1,7 +0,0 @@
-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]);