generator-bitloops 0.3.0 → 0.3.2

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 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/package.json

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

package/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 react-tooltip`).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@8.4', 'init', '--no-dev']);
+        // if (this.options.tailwind) {
+        // Tailwind CSS specific setup if needed
+        //   this.spawnCommandSync('npx', ['storybook@latest', 'add', '@storybook/addon-styling-webpack']);
+        // }
       }
     }
   
@@ -187,6 +190,12 @@ export default class extends Generator {
         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'),
+        ); 
+      }
     }
   }
 

package/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',
+  },
+};

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

@@ -3,6 +3,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 
 type UnsupportedType =
   | 'VECTOR'
+  | 'GROUP'
   | 'STAR'
   | 'ELLIPSE'
   | 'LINE'
@@ -25,14 +26,7 @@ export function UnsupportedElement(props: UnsupportedElementProps) {
       <Tooltip
         id='tooltip'
         place='top'
-        style={{
-          backgroundColor: 'black',
-          color: 'white',
-          padding: '8px',
-          borderRadius: '4px',
-          fontSize: '0.75rem',
-          whiteSpace: 'nowrap',
-        }}
+        className='bg-black text-white p-2 rounded-[4px] text-xs whitespace-nowrap'
       />
     </div>
   );