@duestel/react-scaffold

A lightning-fast CLI tool to generate boilerplate React components, forms, modals, charts, sheets, and data tables with smart naming conventions to minimize imports.

Features

• 🚀 Component Generator - Create well-structured React components with proper file organization
• 📝 Form Generator - Generate form components with built-in validation structure
• 🔔 Modal Generator - Create accessible modal components ready for your content
• 📊 Chart Generator - Scaffold data visualization components for your analytics needs
• 📑 Sheet Generator - Build slide-in/out sheet components for your UI
• 📋 Data Table Generator - Create table components for displaying structured data
• 🎭 Smart Naming Convention - Uses namespaced exports to reduce import statements in your code
• 🔄 Path Support - Create components in any directory structure with automatic path handling

Installation

# Install globally
npm install -g @duestel/react-scaffold

# Or use with npx (recommended)
npx @duestel/react-scaffold generate

Usage

# Using the globally installed CLI tool
drsf generate

# Or with npx
npx @duestel/react-scaffold generate

# Short alias
drsf g

Interactive CLI

When you run the generator, you'll be presented with an interactive prompt:

1. First, select the type of component you want to generate:

   ? Please choose a generator.
   > component - Create a new component
     form - Create a new form
     modal - Create a new modal
     chart - Create a new chart
     sheet - Create a new sheet
     data-table - Create a new data-table

2. Then, follow the prompts specific to your selection:

   • For components: component name (can include path, e.g., ui/common/hello-world)
   • For other generators: Resource name (e.g., user, product)

Output Structure

The tool generates components with a consistent structure and naming convention that helps minimize import statements in your code.

Example: Modal Generator

If you create a modal for "product" resource:

? Please choose a generator. modal - Create a new modal
? Resource name (e.g., user, product): product

The generator will create:

src/components/modals/
└── products/
    ├── index.js               # Exports all modals as ProductsModals namespace
    ├── CreateProductModal.jsx # Create modal component
    ├── EditProductModal.jsx   # Edit modal component
    ├── DeleteProductModal.jsx # Delete modal component
    └── ViewProductModal.jsx   # View modal component

Usage in Your Code

Instead of importing each modal separately, you can use the namespace pattern:

import { ProductsModals } from "components/modals/products";

function App() {
  return (
    <div>
      <ProductsModals.CreateProductModal />
      <ProductsModals.EditProductModal />
    </div>
  );
}

Similar patterns are provided for all generators (forms, charts, sheets, data-tables).

Generator Details

Component Generator

Creates a single React component with appropriate structure.

Form Generator

Creates form components for a specific resource with validation structure:

• CreateProductForm
• EditProductForm

Modal Generator

Creates a suite of modal components for a resource:

• CreateProductModal
• EditProductModal
• DeleteProductModal
• ViewProductModal

Chart Generator

Creates chart components for displaying data visualizations:

• ProductsBarChart
• ProductsLineChart
• ProductsPieChart

Sheet Generator

Creates side-panel sheet components:

• ProductsFilterSheet
• ProductsDetailsSheet

Data Table Generator

Creates components for displaying tabular data:

• ProductsTable
• ProductsTableActions
• ProductsTableFilters

License

MIT © duestel

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.