generator-bitloops 0.1.0 → 0.3.0

package/README.md

@@ -1,9 +1,9 @@
 # generator-bitloops
 
-The Yeoman Bitloops Generator is used by the Bitloops Platform to setup your Bitloops projects.
+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 yo bitloops:setup --project="Your Project Name" --nextjs --typescript --tailwind --storybook --cypress`
+`npx generator-bitloops setup --project="Your Project Name" --nextjs --typescript --tailwind --storybook --cypress`

package/cli.mjs

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+import { createEnv } from 'yeoman-environment';
+import npm from './package.json' assert { type: 'json' };
+
+console.log(`generator-bitloops v${npm.version}`);
+
+// Capture the subgenerator and additional arguments
+const [, , subgenerator, ...args] = process.argv;
+
+if (!subgenerator) {
+  console.error('Please specify a subgenerator (e.g., "setup" or "init")');
+  process.exit(1);
+}
+
+// Initialize Yeoman environment
+const env = createEnv();
+
+(async () => {
+  // Dynamically import the subgenerator path
+  const generatorPath = await import(`./${subgenerator}/index.js`);
+  
+  // Register your generator
+  env.register(generatorPath.default, `bitloops:${subgenerator}`);
+
+  // Convert arguments into a format suitable for Yeoman
+  const options = args.reduce((acc, arg) => {
+    const [key, value] = arg.split('=');
+    acc[key.replace('--', '')] = value || true;
+    return acc;
+  }, {});
+
+  // Run the generator with the specified subgenerator and options
+  env.run(`bitloops:${subgenerator}`, options, (err) => {
+    if (err) {
+      console.error('Error running generator:', err);
+      process.exit(1);
+    }
+  });
+})();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "generator-bitloops",
-  "version": "0.1.0",
-  "description": "Bitloops Yeoman generator",
+  "version": "0.3.0",
+  "description": "Next.js with TypeScript, Tailwind, Storybook and Cypress generator by Bitloops",
   "license": "MIT",
   "author": "Bitloops S.A.",
   "repository": {
@@ -9,9 +9,13 @@
     "url": "https://github.com/bitloops/generator-bitloops"
   },
   "type": "module",
+  "bin": {
+    "bitloops-generator": "./cli.mjs"
+  },
   "files": [
     "app",
-    "setup"
+    "setup",
+    "cli.mjs"
   ],
   "keywords": [
     "bitloops",
@@ -23,6 +27,7 @@
     "yeoman-generator"
   ],
   "dependencies": {
+    "yeoman-environment": "^4.4.3",
     "yeoman-generator": "^7.3.3"
   }
 }

package/setup/index.js

@@ -1,6 +1,13 @@
 import fs from 'fs';
 import { exec } from 'child_process';
 import Generator from 'yeoman-generator';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Convert `import.meta.url` to a path
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 
 function toKebabCase(str) {
   return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase().replace(/\s+/g, '-');
@@ -9,6 +16,7 @@ function toKebabCase(str) {
 export default class extends Generator {
   constructor(args, opts) {
     super(args, opts);
+    this.sourceRoot(path.join(__dirname, 'templates'));
 
     // Define options
     this.option('project', {
@@ -77,7 +85,7 @@ 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) => {
+      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) => {
         this.destinationRoot(this.destinationPath(toKebabCase(this.options.project)));
         resolve();
       });});
@@ -103,17 +111,21 @@ export default class extends Generator {
     }
   
     this.patchFiles = async function() {
-      // await new Promise((resolve, reject) => this.fs.commit((err) => (err ? reject(err) : resolve())));
       if (this.options.storybook) {
         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'));
+          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`);
         }
       }
   
@@ -169,6 +181,12 @@ 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'),
+      ); 
     }
   }
 

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

@@ -0,0 +1,39 @@
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+
+type UnsupportedType =
+  | 'VECTOR'
+  | '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'
+        style={{
+          backgroundColor: 'black',
+          color: 'white',
+          padding: '8px',
+          borderRadius: '4px',
+          fontSize: '0.75rem',
+          whiteSpace: 'nowrap',
+        }}
+      />
+    </div>
+  );
+}