GraftThis

A command-line tool for installing utility tools that work with the RWSDK (Redwood SDK).

Installation

npm install -g graftthis
# or for local development
npm link

Usage

Run the command-line tool to install utilities:

# Install all available tools
npx graftthis

# Install specific tools
npx graftthis routes
npx graftthis component
npx graftthis tailwind

# Show help
npx graftthis help

How It Works

This package provides a simple command-line interface to install utility tools for RWSDK projects. When you run a command, it:

1. Copies the necessary files to your project
2. Adds appropriate scripts to your package.json
3. Sets up everything so you can use the tools immediately

Available Tools

generateRoutes

The generateRoutes tool helps generate routes for your RWSDK project.

npx graftthis routes

This command:

1. Copies the generateRoutes.ts script to your project's src/scripts directory
2. Adds a routes script to your project's package.json file that runs: npx tsx src/scripts/generateRoutes.ts

After installation, you can generate routes by running:

npm run routes

componentGenerator

The component tool helps generate and restructure React components for your RWSDK project using Plop.

npx graftthis component

This command:

1. Copies the plopfile.mjs file to your project's root directory
2. Copies component templates to a plop-templates directory
3. Adds the following scripts to your project's package.json:
   • plop: Run the plop CLI
   • component: Generate a new component
   • restructure: Restructure an existing component
   • restructure-all: Restructure all components in a directory
4. Automatically installs plop as a dev dependency if it's not already installed

After installation, you can use the component generator by running:

# Generate a new component
npm run component

# Restructure an existing component
npm run restructure

# Restructure all components
npm run restructure-all

tailwindSetup

The tailwind tool sets up Tailwind CSS for your RWSDK project.

npx graftthis tailwind

This command:

1. Creates a src/app/styles.css file with the Tailwind import
2. Updates the vite.config.mts file to:
   • Import the Tailwind plugin
   • Add the environments config if needed
   • Add Tailwind to the plugins array
3. Updates the src/app/Document.tsx file to:
   • Import the styles
   • Add a link tag to the head
4. Prompts you to install the required dependencies

The command will automatically install the required dependencies for you:

pnpm install tailwindcss @tailwindcss/vite

shadcnSetup

The shadcn tool sets up shadcn UI components for your RWSDK project.

npx graftthis shadcn

This command:

1. Copies a pre-configured components.json file to your project's root directory
2. Installs all necessary dependencies for shadcn UI:
   • class-variance-authority
   • clsx
   • tailwind-merge
   • lucide-react
   • @radix-ui/react-slot
   • tw-animate-css
3. Sets up the required configuration:
   • Updates tsconfig.json with the baseUrl setting
   • Adds path aliases to vite.config.ts for the "@" import
4. Creates the necessary files:
   • Adds a src/app/lib/utils.ts file with the cn utility function
   • Sets up src/app/styles.css with shadcn theme variables
5. Updates the src/app/Document.tsx file to:
   • Import the styles
   • Add a link tag to the head

After installation, you can add shadcn components to your project by installing the specific Radix UI components you need and copying the component code from the shadcn website.

Requirements

• Node.js 14+
• RWSDK