Getting Started

Type-Scaf is a development tool designed to help you quickly generate form components and Storybook stories based on JavaScript classes. It aims to simplify building consistent UI components in your React projects, using a types-driven approach for automation.

Note: You do not need to set up a new Vite project to use Type-Scaf. It integrates seamlessly into any existing React project.

Features

• Automated Component Generation: Transform your JavaScript types into form components, saving time on boilerplate.

• Storybook Integration: Quickly visualize and interact with your components in Storybook.

Prerequisites

• React project, JavaScript only for now; TypeScript templates may be added in the future (thats not to say the default template can't be modified to produce Typescript).

Setup Instructions

1. Create a New React Project (Optional)

You can add Type-Scaf to any existing React project. If you need to start fresh, you can create a new project with Vite.

npm create vite@latest

Note: Type-Scaf currently only supports JavaScript, so avoid using TypeScript during setup.

2. Install Storybook (Optional)

Storybook is used to view and test the components generated by Type-Scaf.

npx storybook init

Clear Pending Changes (Optional)

If you are just starting or want a clean working state, you can initialize a Git repository and commit your changes:

git init

git add .

git commit -m "Ground zero"

3. Initialize Type-Scaf

To initialize Type-Scaf in your project, run:

npx github:leewinter/type-scaf init

This command will add the necessary dependencies and scripts to your project.

4. Configuration

After initialization, you should see a type-scaf/config folder and a package-types.ts file created in the root of your project. The package-types.ts file contains example classes that you can modify to suit your needs.

You should also have a type-scaf/templates folder with ejs templates used for generating the components and stories. The init command won't replace these files unless deleted so feel free to modify as required.

5. Generate Components

Run the following command to generate components using the example types:

npm run scaf-transform

This will generate React components and Storybook stories in your src directory.

6. View Your Components

npm run storybook

You should now be able to see and interact with the generated components in Storybook.

Notes

• Storybook Integration: Running Storybook is optional but highly recommended for visualizing and verifying the generated components.

Feedback and Contributions

If you encounter any issues or have suggestions for improvement, please feel free to open an issue or a pull request. Contributions are always welcome!