generator-bitloops 0.2.0 → 0.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 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
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "generator-bitloops",
-  "version": "0.2.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": {
@@ -15,7 +15,7 @@
   "files": [
     "app",
     "setup",
-    "cli.js"
+    "cli.mjs"
   ],
   "keywords": [
     "bitloops",

package/setup/index.js

@@ -85,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();
       });});
@@ -115,14 +115,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 +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>
+  );
+}