featslice

FeatSlice

A CLI tool for generating feature-based folder structures in React and Next.js projects.

Installation & Usage

You can use FeatSlice in two ways:

1. Using npx (Recommended - No Installation)

npx featslice auth login,register

2. Global Installation

npm install -g featslice
featslice auth login,register

Usage Details

Quick Start

featslice auth login,register,reset-password

Interactive Mode

Just run:

featslice

The CLI will guide you through:

• Feature name input
• First slice name
• Option to add more slices

Dry Run Mode

To preview the files and directories that will be created without actually modifying your filesystem, use the --dry-run or -d flag:

featslice auth login,register --dry-run

Adding Slices to Existing Features

If you already have a feature generated (e.g., auth) and want to add a new slice to it (e.g., logout), simply run the command again with the existing feature name and the new slice:

featslice auth logout

FeatSlice will intelligently add only the new slice without overwriting your existing files or shared directories.

Project Type Detection

FeatSlice automatically detects whether you're in a Next.js or React project by checking your package.json. You don't need to specify this manually.

Generated Structure

Here's what gets generated for a feature named "auth" with slices "login" and "register":

Next.js Project Output

auth/
├── components/          # Shared components
│   └── index.ts
├── hooks/              # Custom hooks
│   └── index.ts        # Contains useAuth hook
├── types/              # TypeScript types
│   └── index.ts        # Contains IAuthProps, IAuthState, TAuthResponse
├── utils/              # Utility functions
│   └── index.ts        # Contains authUtils
├── api/
│   └── services/       # API services
│       ├── index.ts
│       └── auth.service.ts  # CRUD operations
├── constants/          # Constants and configs
│   └── index.ts        # Contains AUTH_ROUTES, AUTH_CONFIG
├── login/             # Login slice
│   ├── components/     # Login-specific components
│   │   └── index.ts
│   └── page.tsx       # Main login page
├── register/          # Register slice
│   ├── components/     # Register-specific components
│   │   └── index.ts
│   └── page.tsx       # Main register page
└── layout.tsx         # Feature layout

React Project Output

Same structure but with index.tsx instead of page.tsx in slice folders.

Generated Files Examples

Service File (auth.service.ts)

import type { 
    TAuthResponse, 
    IAuthProps 
} from '../../types';

export const authService = {
    fetchAuth: async (): Promise<TAuthResponse> => {
        try {
            // Implement your service method
            throw new Error('Not implemented');
        } catch (error) {
            console.error('Error in fetchAuth:', error);
            throw error;
        }
    },

    createAuth: async (data: IAuthProps): Promise<TAuthResponse> => {
        // ... CRUD operations
    },
    // ... more methods
};

Types File (types/index.ts)

export interface IAuthProps {
    // Add your props here
}

export interface IAuthState {
    // Add your state here
}

export type TAuthResponse = {
    // Add your response type here
};

Next.js Slice Page (login/page.tsx)

export default function LoginPage() {
    return (
        <div className="container mx-auto p-4">
            <h1 className="text-2xl font-bold mb-4">Login</h1>
        </div>
    );
}

React Slice Page (login/index.tsx)

import React from 'react';

function LoginPage() {
    return (
        <div className="container mx-auto p-4">
            <h1 className="text-2xl font-bold mb-4">Login</h1>
        </div>
    );
}

export default LoginPage;

Best Practices

• Feature Naming

  • Use lowercase
  • Use kebab-case for multi-word features
  • Examples: auth, user-profile, order-management

• Slice Naming

  • Use descriptive names
  • Use kebab-case for multi-word slices
  • Examples: login, reset-password, user-settings

• File Organization

  • Keep slice-specific components in slice folders
  • Share common components in root components folder
  • Use the types directory for all interfaces and types
  • Keep API calls in services

Examples

Authentication Feature

featslice auth login,register,reset-password,verify-email

User Profile Feature

featslice user-profile personal-info,security,preferences,billing

Order Management Feature

featslice order-management order-list,order-details,create-order

Common Questions

Q: Where should I run this command?

A: Run it in your project's src directory, typically in src/features or src/modules.

Q: How do I add a new slice later?

A: Simply run the command again with the same feature name and the new slice name. FeatSlice will add the new slice to your existing feature structure without overwriting existing files!

Q: Can I customize the templates?

A: The templates are currently fixed, but future versions will support custom templates.

Contributing

Feel free to submit issues and PRs for:

• New features
• Bug fixes
• Documentation improvements
• Template enhancements

License

MIT