Merge pull request #15 from eruptionjs/feat/add-react-lib

feat: add react-lib as new option

.github/workflows/release.yml

@@ -1,130 +1,43 @@
-name: Release to NPM
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
+name: Release
 
 on:
  push:
  branches:
  - main
 
-jobs:
- install-deps:
- name: Install dependencies
- if: github.repository == 'eruptionjs/create-eruption' && github.event_name != 'pull_request'
- runs-on: ubuntu-latest
- steps:
- - name: Checkout Repository
- uses: actions/checkout@v3
+permissions:
+ contents: write
+ pull-requests: write
+ packages: write
 
- - name: Install PNPM
- uses: pnpm/[email protected]
- with:
- version: 7
-
- - name: Cache node_modules
- uses: actions/cache@v3
- id: pnpm-cache
- with:
- path: '**/node_modules'
- key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
- restore-keys: |
- ${{ runner.os }}-node-
- - name: Setup Node and install project dependencies
- uses: actions/setup-node@v3
- with:
- node-version: '16'
- check-latest: true
- cache: 'pnpm'
-
- if: steps.pnpm-cache.outputs.cache-hit != 'true'
- - run: pnpm install --prefer-offline
+# Automatically cancel in-progress actions on the same branch
+concurrency:
+ group: ${{ github.workflow }}-${{ github.event_name == 'pull_request_target' && github.head_ref || github.ref }}
+ cancel-in-progress: true
 
+jobs:
  build:
- name: Build package
- runs-on: ubuntu-latest
- needs: install-deps
- steps:
- - name: Checkout Repository
- uses: actions/checkout@v3
-
- - name: Install PNPM
- uses: pnpm/[email protected]
- with:
- version: 7
-
- - name: Setup Node
- uses: actions/setup-node@v3
- with:
- node-version: '16'
- check-latest: true
- cache: 'pnpm'
-
- - name: Install dependencies
- if: steps.pnpm-cache.outputs.cache-hit != 'true'
- run: pnpm install --prefer-offline
-
- - name: Build package
- run: pnpm run build
-
- - name: Check for errors
- run: pnpm run lint
-
- # - name: Run tests
- # run: pnpm run test # The process to run the tests needs the build step.
-
- release:
- name: Release to NPM
- if: github.event.inputs.forceGPR != 'true'
+ name: Build Packages
  runs-on: ubuntu-latest
- needs: build
- outputs:
- published: ${{ steps.changesets.outputs.published }}
  steps:
- - name: Checkout Repository
- uses: actions/checkout@v3
- with:
- fetch-depth: 0 # Fetch the entire Git history.
-
- - name: Install PNPM
- uses: pnpm/[email protected]
+ - uses: actions/checkout@v3
+ - uses: pnpm/action-setup@v2
  with:
- version: 7
-
- - name: Load node_modules
- uses: actions/cache@v3
+ version: 8
+ - uses: actions/setup-node@v3
  with:
- path: '**/node_modules'
- key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
-
- - name: Load build files
- uses: actions/cache@v3
- with:
- path: '**/dist'
- key: ${{ runner.os }}-build-${{ hashFiles('**/pnpm-lock.yaml') }}
-
- - name: Setup Node for NPM
- uses: actions/setup-node@v3
- with:
- node-version: '16.14.2'
- check-latest: true
+ node-version: 18
  cache: 'pnpm'
- registry-url: 'https://registry.npmjs.org'
-
- - name: Set git user
- run: |
- git config --global user.email "[email protected]"
- git config --global user.name "Raí Siqueira"
- - name: Create Changesets Pull Request or Publish to NPM
- id: changesets
- uses: changesets/action@v1
- with:
- setupGitUser: false
- title: 'chore(changesets): bump package version'
- commit: 'chore: bump package version'
- version: node .github/changeset-version.js
- publish: pnpm run release
- cwd: './lib'
+ - if: ${{ steps.cache-node.outputs.cache-hit != 'true' }}
+ run: pnpm install
+ - run: pnpm run build
+ - uses: changesets/action@v1
+ if: ${{ github.event_name != 'pull_request' }}
+ with:
+ version: pnpm run ci:version
+ publish: pnpm run ci:publish
+ commit: '[ci] release'
+ title: '[ci] release'
  env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

lib/__tests__/index.test.ts

@@ -1,12 +1,12 @@
-import { render } from 'cli-testing-library';
+import { render, waitFor } from 'cli-testing-library';
 import { resolve } from 'path';
 import { describe, it, expect } from 'vitest';
 
 import { CLIUserEvents } from '../src/testUtils';
 
 describe('eruption-cli', () => {
  const cliPath = resolve(__dirname, '../eruption-cli.mjs');
- it('should render the cli prompts (without CLI flags)', async () => {
+ it('should render the cli prompts to create a Eruption application', async () => {
  const { findByText, userEvent } = await render('node', [cliPath]);
  const projectName = await findByText(/What is the name of your project/i);
 
@@ -16,6 +16,10 @@ describe('eruption-cli', () => {
  userEvent.keyboard(`my-project${CLIUserEvents.Enter}`);
  expect(await findByText(/my-project/i)).toBeTruthy();
 
+ const flavor = await findByText(/Select your Eruption flavor/i);
+ expect(flavor).toBeTruthy();
+ userEvent.keyboard(`${CLIUserEvents.Enter}`);
+
  const kit = await findByText(/Select your Eruption kit/i);
  expect(kit).toBeTruthy();
 
@@ -43,9 +47,56 @@ describe('eruption-cli', () => {
  expect(confirm).toBeTruthy();
 
  // Here we are confirming the cli prompts.
+ userEvent.keyboard(`${CLIUserEvents.Enter}`);
+
+ expect(await findByText(/starting the project/i)).toBeTruthy();
+ await waitFor(() => expect(findByText(/Done/i)).toBeTruthy());
+ });
+
+ it.skip('should render the cli prompts to create a Eruption library', async () => {
+ const { findByText, userEvent } = await render('node', [cliPath]);
+ const projectName = await findByText(/What is the name of your project/i);
+
+ expect(projectName).toBeTruthy();
+
+ // Simulate the project name being entered and the enter key being pressed.
+ userEvent.keyboard(`my-project${CLIUserEvents.Enter}`);
+ expect(await findByText(/my-project/i)).toBeTruthy();
+
+ const flavor = await findByText(/Select your Eruption flavor/i);
+ expect(flavor).toBeTruthy();
+ userEvent.keyboard(`${CLIUserEvents.ArrowLeft}${CLIUserEvents.Enter}`);
+
+ const kit = await findByText(/Select your Eruption kit/i);
+ expect(kit).toBeTruthy();
+
+ // Simulate the user pressing the down arrow key and then the enter key. (For now, we are selecting the core kit)
  userEvent.keyboard(`${CLIUserEvents.ArrowDown}${CLIUserEvents.Enter}`);
+ expect(await findByText('React + TypeScript')).toBeTruthy();
+
+ const vscode = await findByText(/Do you want to include .vscode folder?/i);
+ expect(vscode).toBeTruthy();
+ // Simulate the user pressing the down arrow key and then the enter key. (We're removing vscode folder)
+ userEvent.keyboard(`${CLIUserEvents.ArrowDown}${CLIUserEvents.Enter}`);
+
+ const docker = await findByText(/Do you want to include Docker support?/i);
+ expect(docker).toBeTruthy();
+ // Simulate the user pressing the enter key. By default we aren't including docker support.
+ userEvent.keyboard(`${CLIUserEvents.Enter}`);
+
+ const packageManager = await findByText(/Select your package manager/i);
+ expect(packageManager).toBeTruthy();
+ // Simulate the user pressing the down arrow key and then the enter key. (For now, we are selecting yarn)
+ userEvent.keyboard(`${CLIUserEvents.ArrowDown}${CLIUserEvents.Enter}`);
+
+ // Simulate the user pressing the down arrow key and then the enter key. (For now, we are selecting the core kit)
+ const confirm = await findByText(/Do you want to continue/i);
+ expect(confirm).toBeTruthy();
+
+ // Here we are confirming the cli prompts.
+ userEvent.keyboard(`${CLIUserEvents.Enter}`);
 
  expect(await findByText(/starting the project/i)).toBeTruthy();
- expect(await findByText(/Done/i)).toBeTruthy();
+ await waitFor(() => expect(findByText(/Done/i)).toBeTruthy());
  });
 });

lib/package.json

@@ -1,6 +1,6 @@
 {
  "name": "create-eruption",
- "version": "0.4.0",
+ "version": "0.5.0",
  "description": "The Eruption CLI 🌋",
  "license": "MIT",
  "author": "Raí Siqueira <[email protected]>",
@@ -28,7 +28,9 @@
  "dev": "tsup src --watch",
  "test": "vitest",
  "test:watch": "vitest watch",
- "coverage": "vitest run --coverage"
+ "coverage": "vitest run --coverage",
+ "ci:version": "changeset version",
+ "ci:publish": "changeset publish"
  },
  "keywords": [
  "cli",
@@ -40,7 +42,7 @@
  "vitest"
  ],
  "devDependencies": {
- "@clack/prompts": "^0.5.0",
+ "@clack/prompts": "^0.7.0",
  "@tsconfig/node16": "^1.0.3",
  "@types/yargs-parser": "^21.0.0",
  "@vitest/coverage-c8": "^0.24.5",

lib/src/constants.ts

@@ -1,11 +1,24 @@
 import type { Kit } from './types';
 /**
- * The available kits.
+ * The available kits to create a new project.
  * @returns returns a list of available kits.
  */
 export const AVAILABLE_KITS: Kit[] = [
  {
  label: 'Eruption Core (React, Vite and Vitest)',
  value: 'core',
+ hint: 'The core kit for Eruption',
+ },
+];
+
+/**
+ * The available libraries to create a new library project.
+ * @returns returns a list of available libraries.
+ */
+export const AVAILABLE_LIBRARIES: Kit[] = [
+ {
+ label: 'React + TypeScript',
+ value: 'react-lib',
+ hint: 'Create a React library with TypeScript',
  },
 ];

lib/src/index.ts

@@ -4,7 +4,7 @@ import { setTimeout } from 'node:timers/promises';
 import path from 'path';
 import parser from 'yargs-parser';
 
-import { AVAILABLE_KITS } from './constants';
+import { AVAILABLE_KITS, AVAILABLE_LIBRARIES } from './constants';
 import { PackageManagers } from './types';
 import {
  handleCancelation,
@@ -43,11 +43,27 @@ export async function main() {
 
  handleCancelation(projectName);
 
+ const flavor = args.flavor
+ ? args.flavor
+ : await select({
+ message: 'Select your Eruption flavor',
+ options: [
+ {
+ value: 'application',
+ label: 'Create an Application',
+ },
+ {
+ value: 'library',
+ label: 'Create a Library (e.g: a design system)',
+ },
+ ],
+ });
+
  const kit = args.kit
  ? args.kit
  : await select({
  message: 'Select your Eruption kit',
- options: AVAILABLE_KITS,
+ options: flavor === 'application' ? AVAILABLE_KITS : AVAILABLE_LIBRARIES,
  });
 
  handleCancelation(kit);
@@ -72,13 +88,16 @@ export async function main() {
 
  handleCancelation(useVscode);
 
- const dockerSupport =
- 'docker' in args
- ? args.vscode
- : await confirm({
- message: 'Do you want to include Docker support?',
- initialValue: false,
- });
+ let dockerSupport = false;
+ if (flavor === 'application') {
+ dockerSupport =
+ 'docker' in args
+ ? args.vscode
+ : await confirm({
+ message: 'Do you want to include Docker support?',
+ initialValue: false,
+ });
+ }
 
  // NPM will be the default package manager.
  const packageManager: PackageManagers = args.pm
@@ -110,7 +129,7 @@ export async function main() {
  ? args.yes
  : await confirm({
  message: 'Do you want to continue?',
- initialValue: false,
+ initialValue: true,
  });
 
  handleCancelation(install);