Skip to content

scaffolding-tool.mdx

Latest commit

 

History

History
163 lines (127 loc) · 5.15 KB

scaffolding-tool.mdx

File metadata and controls

163 lines (127 loc) · 5.15 KB
title Scaffolding Tool
sidebar_position 2
description Generate feature packages and shared packages with Create CLI tool

Scaffolding Tool

Create (@thunderid/create) is a CLI scaffolding tool that automates the creation of feature packages and shared packages in the frontend workspace. The tool generates complete, production-ready package structures with pre-configured build tools, testing infrastructure, and best practices.

Overview

Create provides:

  • Full TypeScript support with type definitions
  • Pre-configured test setup with Vitest and React Testing Library
  • React components with Oxygen UI and Material-UI integration
  • Build tools: ESLint, Prettier, and Rolldown
  • Workspace dependencies and npm scripts
  • Optional automatic dependency installation and build

Prerequisites

Before using Create:

  • Run the tool from within the monorepo
  • Ensure pnpm is installed for package management
  • Execute from the frontend directory or any subdirectory

:::info Time Estimate Package creation and build typically completes in approximately 5 minutes. :::

Usage

Linking the Package

Since we haven't published @thunderid/create to npm yet, link it locally:

cd frontend/packages/create
pnpm link --global

Running the Package

Execute from anywhere in the workspace:

create-thunderid

Creating Feature Packages

Feature packages are domain-specific modules containing business logic, UI components, and API integrations with a structured CRUD pattern.

To create a feature package, follow the interactive prompts:

create-thunderid feature

Step 1: Select Feature Type

Choose the feature type:

◆  Feature type:
│  ● Configuration feature (configure-xxx)
│  ○ Gateway feature (gateway-xxx)
└
  • Configuration feature: Features related to system configuration
  • Gateway feature: Features related to authentication and registration

Step 2: Provide Feature Name

Enter a descriptive name using kebab-case:

◆  Feature name:
│  user-management
└

:::info Naming Requirements

  • Use lowercase with hyphens (e.g., user-management, oauth2-integration)
  • Use singular nouns where applicable (e.g., application, role)
  • Start with a letter
  • Contain only letters, numbers, underscores, and hyphens
  • Maximum 50 characters :::

Step 3: Install Dependencies

Choose whether to install dependencies and build:

◆  Would you like to install dependencies and
build the feature now?
│  ● Yes, install and build
│  ○ No, I will do it later
└
  • Yes: Executes pnpm install && pnpm build automatically
  • No: Displays manual setup instructions

Generated Package Structure

The tool generates a feature package (e.g., configure-user-management) with the following structure:

configure-user-management/
├── package.json                 # Package manifest
├── tsconfig.json               # Base TypeScript configuration
├── tsconfig.lib.json           # Library build configuration
├── tsconfig.spec.json          # Test configuration
├── eslint.config.js            # Linting rules
├── vitest.config.ts            # Test runner configuration
├── rolldown.config.js          # Bundler configuration
├── prettier.config.js          # Code formatting rules
├── .editorconfig               # Editor configuration
├── .gitignore                  # Git ignore patterns
├── .prettierignore             # Prettier ignore patterns
└── src/
    ├── index.ts                # Main entry point
    ├── api/                    # API integration layer
    │   ├── useGetUserManagement.ts
    │   ├── useGetUserManagements.ts
    │   └── __tests__/
    ├── components/             # React components
    │   ├── UserManagementList.tsx
    │   └── __tests__/
    ├── config/                 # Feature configuration
    │   ├── UserManagementConfig.ts
    │   └── __tests__/
    ├── constants/              # Constants and query keys
    │   ├── user-management-query-keys.ts
    │   └── __tests__/
    ├── contexts/               # React context providers
    │   └── UserManagementContext/
    │       ├── UserManagementContext.tsx
    │       ├── UserManagementProvider.tsx
    │       ├── useUserManagement.tsx
    │       └── __tests__/
    ├── data/                   # Static data and fixtures
    │   └── .gitkeep
    ├── hooks/                  # Custom React hooks
    │   ├── useUserManagementSearch.ts
    │   └── __tests__/
    ├── models/                 # TypeScript interfaces and types
    │   ├── user-management.ts
    │   └── __tests__/
    ├── pages/                  # Page-level components
    │   ├── UserManagementListPage.tsx
    │   └── __tests__/
    └── utils/                  # Utility functions
        ├── userManagementUtils.ts
        └── __tests__/