generator-bitloops 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Bitloops
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# generator-bitloops
+
+The Yeoman 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!
+
+## How to run it
+
+`npx yo bitloops:setup --project="Your Project Name" --nextjs --typescript --tailwind --storybook --cypress`

package/app/index.js

@@ -0,0 +1,20 @@
+import Generator from 'yeoman-generator';
+
+export default class extends Generator {
+  constructor(args, opts) {
+    // Calling the super constructor is important so our generator is correctly set up
+    super(args, opts);
+
+    // Next, add your custom code
+    this.option('next'); // This method adds support for a `--next` flag
+    this.option('typescript'); // This method adds support for a `--typescript` flag
+    this.option('tailwind'); // This method adds support for a `--tailwind` flag
+    this.option('storybook'); // This method adds support for a `--storybook` flag
+    this.option('cypress'); // This method adds support for a `--cypress` flag
+  }
+
+  message() {
+    this.log('You need to select a sub-method. E.g. `npx yo bitloops:setup`');
+  }
+
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "generator-bitloops",
+  "version": "0.1.0",
+  "description": "Bitloops Yeoman generator",
+  "license": "MIT",
+  "author": "Bitloops S.A.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bitloops/generator-bitloops"
+  },
+  "type": "module",
+  "files": [
+    "app",
+    "setup"
+  ],
+  "keywords": [
+    "bitloops",
+    "nextjs",
+    "tailwindcss",
+    "typescript",
+    "storybook",
+    "cypress",
+    "yeoman-generator"
+  ],
+  "dependencies": {
+    "yeoman-generator": "^7.3.3"
+  }
+}

package/setup/index.js

@@ -0,0 +1,209 @@
+import fs from 'fs';
+import { exec } from 'child_process';
+import Generator from 'yeoman-generator';
+
+function toKebabCase(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase().replace(/\s+/g, '-');
+}
+
+export default class extends Generator {
+  constructor(args, opts) {
+    super(args, opts);
+
+    // Define options
+    this.option('project', {
+      type: String,
+      description: 'Project name (used to create the project folder)',
+      required: true,
+    });
+
+    this.option('nextjs', {
+      type: Boolean,
+      description: 'Install Next.js',
+      required: true, // Make Next.js mandatory
+      default: false,
+    });
+
+    this.option('typescript', {
+      type: Boolean,
+      description: 'Add TypeScript support',
+      default: false,
+    });
+
+    this.option('tailwind', {
+      type: Boolean,
+      description: 'Add Tailwind CSS',
+      default: false,
+    });
+
+    this.option('storybook', {
+      type: Boolean,
+      description: 'Add Storybook',
+      default: false,
+    });
+
+    this.option('cypress', {
+      type: Boolean,
+      description: 'Add Cypress for testing',
+      default: false,
+    });
+
+    this.installNextJS = async function() {
+      // Clone Next.js template with Tailwind if specified, using the project name
+      const createNextAppCommand = ['-y', 'create-next-app@latest'];
+      createNextAppCommand.push(toKebabCase(this.options.project)); // Use the project name for the directory
+      createNextAppCommand.push('--app');
+      createNextAppCommand.push('--empty');
+      createNextAppCommand.push('--src-dir');
+      if (this.options.storybook) {
+        // Disable TurboPack for Storybook compatibility given the Next.js downgrade that will follow
+        createNextAppCommand.push('--no-turbopack');
+      } else {
+        createNextAppCommand.push('--turbopack'); 
+      }
+      createNextAppCommand.push('--import-alias');
+      createNextAppCommand.push('@/*');
+      createNextAppCommand.push('--use-npm');
+      createNextAppCommand.push('--eslint');
+      
+      if (this.options.typescript) {
+        createNextAppCommand.push('--typescript'); // This will avoid the TypeScript prompt
+      } else {
+        createNextAppCommand.push('--js');
+      }
+      
+      if (this.options.tailwind) {
+        createNextAppCommand.push('--tailwind');
+      }
+      
+      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) => {
+        this.destinationRoot(this.destinationPath(toKebabCase(this.options.project)));
+        resolve();
+      });});
+    }
+
+    this.installStorybook = function() {    
+      // 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.installCypress = function() {    
+      // Conditionally add Cypress
+      if (this.options.cypress) {
+        this.log("Adding Cypress...");
+        this.spawnCommandSync('npm', ['install', '--save-dev', 'cypress']);
+      }
+    }
+  
+    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'));
+          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`);
+        }
+      }
+  
+      // Conditionally initialize Storybook
+      if (this.options.storybook) {
+        this.log("Making Storybook changes...");
+        if (this.options.tailwind) {
+          fs.unlinkSync(this.destinationPath('.storybook/preview.ts'));
+          this.log('Setting up Tailwind CSS with Storybook...');
+          this.fs.copyTpl(
+            this.templatePath('storybook.preview.ts'),
+            this.destinationPath('.storybook/preview.ts'),
+          );  
+        }
+        this.log('Removing default Storybook stories...');
+        try {
+          fs.rmSync(this.destinationPath('src/stories'), { recursive: true, force: true });
+          console.log('Sample stories directory deleted successfully!');
+        } catch (err) {
+            console.error('Error deleting sample stories directory:', err);
+        }
+        fs.unlinkSync(this.destinationPath('tailwind.config.ts'));
+        this.fs.copyTpl(
+          this.templatePath('tailwind.config.ts'),
+          this.destinationPath('tailwind.config.ts'),
+        );
+      }
+  
+      if (this.options.cypress) {
+        this.log("Adding Cypress config...");
+        this.fs.copyTpl(
+          this.templatePath('cypress.config.ts'),
+          this.destinationPath('cypress.config.ts'),
+        ); 
+      }
+  
+      fs.unlinkSync(this.destinationPath('src/app/page.tsx'));
+      this.fs.copyTpl(
+        this.templatePath('next.app.page.tsx'),
+        this.destinationPath('src/app/page.tsx'),
+      ); 
+  
+      fs.unlinkSync(this.destinationPath('src/app/layout.tsx'));
+      this.fs.copyTpl(
+        this.templatePath('next.app.layout.tsx'),
+        this.destinationPath('src/app/layout.tsx'),
+        { projectName: this.options.project },
+      );
+      
+      this.log('Adding Meyer reset in global.css...');
+      fs.unlinkSync(this.destinationPath('src/app/globals.css'));
+      this.fs.copyTpl(
+        this.templatePath('globals.css'),
+        this.destinationPath('src/app/globals.css'),
+      ); 
+    }
+  }
+
+  initializing() {
+    // Check if the project name and --nextjs flag are provided
+    if (!this.options.project) {
+      this.log("Error: --project option is required to specify the project name.");
+      process.exit(1);
+    }
+
+    if (!this.options.nextjs) {
+      this.log("Error: --nextjs option is currently required to scaffold a project.");
+      process.exit(1);
+    }
+
+    this.log(`Initializing project ${toKebabCase(this.options.project)} with the selected options...`);
+  }  
+
+  async main() {
+    await this.installNextJS();
+    this.log('Installing Storybook');
+    this.installStorybook();
+    this.log('Installing Cypress');
+    this.installCypress();
+    this.log('Patching files');
+    await this.patchFiles();
+  }
+
+  end() {
+    this.log(`Your Bitloops project '${toKebabCase(this.options.project)}' setup is complete! 🎉🎉🎉`); 
+    this.log('');
+    this.log('Use the following commands to start:');
+    this.log("- `npm run dev` to start the Next.js app.");
+    if (this.options.storybook) this.log("- `npm run storybook` to start Storybook.");
+    if (this.options.cypress) this.log("- `npx cypress open --e2e --browser chrome` to open Cypress.");
+    if (this.options.cypress) this.log("- `npx cypress run --e2e --browser chrome` to run Cypress on the terminal.");
+  }
+};

package/setup/templates/cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress';
+   
+export default defineConfig({
+  e2e: {
+    specPattern: "**/*.cy.{ts,tsx}",
+    supportFile: false,
+  },
+});

package/setup/templates/globals.css

@@ -0,0 +1,137 @@
+/* Tailwind CSS */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* MEYER */
+
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border-width: 0px;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/** END MEYER */

package/setup/templates/meyer.css

@@ -0,0 +1,133 @@
+
+/* MEYER */
+
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border-width: 0px;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/** END MEYER */

package/setup/templates/next.app.layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "<%= projectName %>",
+  description: "Generated by Bitloops",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/setup/templates/next.app.page.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <main>
+      <>{/* Add your content here */}</>
+    </main>
+  );
+}

package/setup/templates/next.config.js

@@ -0,0 +1,6 @@
+const nextConfig = {
+  /* config options here */
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

package/setup/templates/storybook.preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import "../src/app/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/setup/templates/tailwind.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from "tailwindcss";
+  
+const config: Config = {
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  theme: {},
+  plugins: [],
+};
+
+export default config;