v0.3.1 added UnsupportedElement files and fixed Storybook minor version to 8.4

Author: danias

README.md

@@ -2,8 +2,8 @@
 
 The Bitloops Generator is used by the Bitloops Platform to setup your Bitloops projects.
 
-Nonetheless, you can use it independently to setup your next next.js project with TypeScript, Tailwind, Storybook and Cypress all ready to go!
+Nonetheless, you can use it independently to setup your next Next.js project with TypeScript, Tailwind, Storybook and Cypress all ready to go!
 
 ## How to run it
 
-`npx generator-bitloops setup --project="Your Project Name" --nextjs --typescript --tailwind --storybook --cypress`
+`npx -y generator-bitloops setup --project="Your Project Name" --nextjs --typescript --tailwind --storybook --cypress`

package.json

@@ -1,7 +1,7 @@
 {
   "name": "generator-bitloops",
-  "version": "0.2.0",
-  "description": "Bitloops Yeoman generator",
+  "version": "0.3.1",
+  "description": "Next.js with TypeScript, Tailwind, Storybook and Cypress generator by Bitloops",
   "license": "MIT",
   "author": "Bitloops S.A.",
   "repository": {
@@ -15,7 +15,7 @@
   "files": [
     "app",
     "setup",
-    "cli.js"
+    "cli.mjs"
   ],
   "keywords": [
     "bitloops",

setup/index.js

@@ -85,7 +85,9 @@ export default class extends Generator {
       }
 
       this.log("Installing Next.js...");
-      await new Promise((resolve, error) => {exec(`npx ${createNextAppCommand.join(' ')} && cd ${toKebabCase(this.options.project)} && npm install next@14 react@18 react-dom@18`).on('exit', (code) => {
+      const additionalPackages = 'react-tooltip';
+      const patchPackages = `next@14 react@18 react-dom@18 ${additionalPackages}`;
+      await new Promise((resolve, error) => {exec(`npx ${createNextAppCommand.join(' ')} && cd ${toKebabCase(this.options.project)} && npm install ${patchPackages}`).on('exit', (code) => {
         this.destinationRoot(this.destinationPath(toKebabCase(this.options.project)));
         resolve();
       });});
@@ -95,10 +97,11 @@ export default class extends Generator {
       // Conditionally initialize Storybook
       if (this.options.storybook) {
         this.log("Adding Storybook...");
-        this.spawnCommandSync('npx', ['-y', 'storybook@latest', 'init', '--no-dev']);
-        if (this.options.tailwind) {
-          this.spawnCommandSync('npx', ['storybook@latest', 'add', '@storybook/addon-styling-webpack']);
-        }
+        this.spawnCommandSync('npx', ['-y', 'storybook@7.4', 'init', '--no-dev']);
+        // if (this.options.tailwind) {
+        // Tailwind CSS specific setup if needed
+        //   this.spawnCommandSync('npx', ['storybook@latest', 'add', '@storybook/addon-styling-webpack']);
+        // }
       }
     }
 
@@ -115,14 +118,17 @@ export default class extends Generator {
         if (this.options.typescript) {
           this.log('Replace Next.js\' TypeScript configuration file with JS...');
           // Remove TypeScript configuration files given they require Next.js 15
-          fs.unlinkSync(this.destinationPath('next.config.ts'));
-          console.log('Template Path:', this.templatePath('next.config.js'));
-          console.log('Destination Path:', this.destinationPath('next.config.js'));
+          try {
+            fs.unlinkSync(this.destinationPath('next.config.ts'));
+            this.log(`Deleted next.config.ts`);
+          } catch (err) {
+            console.error('Error deleting next.config.ts:', err);
+          }
           this.fs.copyTpl(
             this.templatePath('next.config.js'),
             this.destinationPath('next.config.js'),
-          );  
-          this.log(`Deleted next.config.ts and created next.config.js instead`);
+          );
+          this.log(`Created next.config.js instead`);
         }
       }
 
@@ -178,6 +184,18 @@ export default class extends Generator {
         this.templatePath('globals.css'),
         this.destinationPath('src/app/globals.css'),
       ); 
+
+      this.log('Adding Bitloops support components...');
+      this.fs.copyTpl(
+        this.templatePath('src.components.bitloops.Unsupported.tsx'),
+        this.destinationPath('src/components/bitloops/Unsupported.tsx'),
+      ); 
+      if (this.options.storybook) {
+        this.fs.copyTpl(
+          this.templatePath('src.components.bitloops.Unsupported.stories.tsx'),
+          this.destinationPath('src/components/bitloops/Unsupported.stories.tsx'),
+        ); 
+      }
     }
   }
 

setup/templates/src.components.bitloops.Unsupported.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { UnsupportedElement, UnsupportedElementProps } from './Unsupported';
+
+const meta: Meta<typeof UnsupportedElement> = {
+  title: 'Bitloops/Unsupported',
+  component: UnsupportedElement,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const props: UnsupportedElementProps = {
+  type: 'VECTOR',
+  elementClassName: 'w-128 h-32',
+};
+
+type Story = StoryObj<typeof UnsupportedElement>;
+
+export const Default: Story = {
+  args: props,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};

setup/templates/src.components.bitloops.Unsupported.tsx

@@ -0,0 +1,33 @@
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+type UnsupportedType =
+  | 'VECTOR'
+  | 'GROUP'
+  | 'STAR'
+  | 'ELLIPSE'
+  | 'LINE'
+  | 'REGULAR_POLYGON'
+  | 'SLICE'
+  | 'IMAGE';
+
+export type UnsupportedElementProps = {
+  type: UnsupportedType;
+  elementClassName: string;
+};
+export function UnsupportedElement(props: UnsupportedElementProps) {
+  const { type, elementClassName } = props;
+  return (
+    <div
+      className={`${elementClassName} relative group border border-red-500 border-dashed`}
+      data-tooltip-id='tooltip'
+      data-tooltip-content={`Unsupported: ${type}`}
+    >
+      <Tooltip
+        id='tooltip'
+        place='top'
+        className='bg-black text-white p-2 rounded-[4px] text-xs whitespace-nowrap'
+      />
+    </div>
+  );
+}