🚀 React Component Generator

Uma CLI poderosa para gerar componentes React e projetos completos com Vite, shadcn/ui, React Query, Zustand, Axios e muito mais!

✨ Características

🎨 Geração de Componentes

🎯 Modo Interativo: Interface guiada com perguntas intuitivas
⚛️ Componentes React: JSX/TSX com estrutura completa
🏪 Zustand Stores: Gerenciamento de estado com actions pré-definidas
🎯 Context API: Provider, hooks e reducers completos
💅 Styled Components: Templates com styled-components
😊 Emotion: Suporte completo ao Emotion styled
🎨 CSS Tradicional: Arquivos CSS com classes organizadas
🔷 TypeScript: Suporte completo com tipagem
🧪 Testes: Arquivos de teste com React Testing Library
📁 Caminhos Customizados: Crie em qualquer diretório

🚀 Criação de Projetos Completos

📦 React + Vite: Setup completo e otimizado
🎨 shadcn/ui: Componentes UI modernos com Tailwind CSS
🔄 React Query: Gerenciamento de estado do servidor com exemplos
🏪 Zustand: Stores com persist e devtools
🌐 Axios: Services configurados com interceptors
✅ Zod: Validação de schemas e tipos
📚 Exemplos Práticos: Código funcional e documentado
🎯 Estrutura Organizada: Pastas e arquivos bem estruturados

⚡ Clone de Boilerplate Next.js

🎯 Clone Automático: Clone do boilerplate Next.js completo
📝 Personalização: Nome do projeto customizável
🗑️ Limpeza Git: Remove histórico original (opcional)
📦 Auto Install: Instala dependências automaticamente
🆚 VS Code: Abre no VS Code após criação
📚 Git Novo: Inicializa repositório limpo
⚡ Pronto para Usar: Estrutura profissional completa

🎯 Modos de Uso

1. Modo Interativo - Componentes

O modo interativo guia você através de todas as opções:

create-react-component --interactive
# ou
crc -i

O que você pode criar:

⚛️ Componente React - Componente completo com estilos e testes
🏪 Store Zustand - Store com actions e tipagem completa
🎯 Context API - Provider, reducer e hooks customizados

2. Modo Projeto - Criar Projeto Completo

Crie um projeto React + Vite completo com todas as configurações:

create-react-component --project
# ou
crc --project

O que é criado:

✅ React + Vite configurado
✅ TypeScript (opcional)
✅ shadcn/ui + Tailwind CSS (opcional)
✅ Componentes shadcn selecionados
✅ Pacotes adicionais (Zustand, React Query, Axios, Zod, React Router)
✅ Estrutura de pastas organizada (components, pages, hooks, stores, services, etc)
✅ Exemplos práticos dos pacotes selecionados
✅ Configuração de path aliases (@/)
✅ Git inicializado (opcional)

Exemplos automáticos criados:

📦 Zustand: Stores com persist e devtools
🌐 Axios: Services com interceptors e tratamento de erros
🔄 React Query: Hooks customizados com cache
✅ Zod: Schemas de validação
📄 Página de exemplos: Componente funcional mostrando tudo

3. Modo Boilerplate Next.js - Clone Completo

Clone um boilerplate Next.js profissional pronto para produção:

create-react-component --nextjs
# ou
crc --nextjs

Boilerplate incluído:

✅ Next.js 14+ com App Router
✅ TypeScript configurado
✅ Tailwind CSS + shadcn/ui
✅ ESLint + Prettier
✅ Estrutura profissional organizada
✅ Configurações de produção
✅ Componentes pré-construídos
✅ Pronto para deploy

📦 Instalação

Uso Global (Recomendado)

# Instalar globalmente
npm install -g mizi-react-component-generator

# Usar diretamente
create-react-component --interactive
# ou
crc --interactive

# Criar projeto completo
crc --project

Uso com npx (Sem Instalação)

# Modo interativo
npx mizi-react-component-generator --interactive

# Criar projeto
npx mizi-react-component-generator --project

# Modo direto
npx mizi-react-component-generator Button --ts --styled

🛠️ Uso por Linha de Comando

Componentes React

# Componente básico
crc Button

# TypeScript + Styled Components + Testes
crc Modal --ts --styled --test

# Emotion + caminho customizado
crc Card --emotion --path ./src/components

# Componente completo
crc Dashboard --ts --styled --test --path ./src/pages

Zustand Stores

# Store JavaScript
crc UserStore --zustand

# Store TypeScript
crc AuthStore --zustand --ts --path ./src/stores

Context API

# Context JavaScript
crc ThemeContext --context

# Context TypeScript
crc UserContext --context --ts --path ./src/contexts

📚 Opções Disponíveis

Comandos Principais

Comando	Descrição
`--interactive` ou `-i`	Modo interativo para criar componentes
`--project`	Criar projeto React + Vite completo
`--help` ou `-h`	Mostrar ajuda

Opções para Componentes

Opção	Alias	Descrição
`--typescript`	`-t`	Gerar arquivos TypeScript
`--styled`	`-s`	Usar Styled Components
`--emotion`	`-e`	Usar Emotion
`--zustand`	`-z`	Criar Zustand store
`--context`	`-c`	Criar Context API
`--test`		Incluir arquivos de teste
`--path <caminho>`	`-p`	Caminho onde criar

🎨 Exemplos de Uso

Criar Projeto Completo

# Criar projeto completo
crc --project

# Clonar boilerplate Next.js
crc --nextjs

# Exemplo do que você pode configurar no projeto React:
# - Nome do projeto: my-app
# - TypeScript: Sim
# - shadcn/ui: Sim
# - Componentes: button, card, dialog
# - Pacotes: zustand, @tanstack/react-query, axios, zod
# - Git: Sim

# Exemplo do que você pode configurar no Next.js:
# - Nome do projeto: my-nextjs-app
# - Instalar deps: Sim
# - Abrir VS Code: Sim
# - Remover Git history: Sim

Resultado:

my-app/
├── src/
│   ├── components/
│   │   └── ui/           # Componentes shadcn
│   ├── pages/
│   │   └── ExampleUsage.tsx  # Exemplos práticos
│   ├── hooks/
│   │   └── useUsers.ts   # Hooks React Query
│   ├── stores/
│   │   ├── userStore.ts  # Store com persist
│   │   └── todoStore.ts  # Store com devtools
│   ├── services/
│   │   ├── api.ts        # Configuração Axios
│   │   └── userService.ts # Service com Zod
│   └── lib/
│       ├── utils.ts      # Utilidades
│       └── queryClient.ts # Config React Query
├── EXAMPLES.md           # Documentação dos exemplos
└── ...

📁 Estruturas Geradas

Projeto Completo

Ao criar um projeto com --project, você recebe:

my-project/
├── public/
├── src/
│   ├── components/
│   │   └── ui/              # Componentes shadcn/ui
│   ├── pages/
│   │   └── ExampleUsage.tsx # Exemplos de uso dos pacotes
│   ├── hooks/               # Custom hooks (React Query, etc)
│   ├── stores/              # Zustand stores
│   ├── services/            # Axios services
│   ├── contexts/            # React contexts
│   ├── types/               # TypeScript types
│   ├── utils/               # Utilidades
│   ├── lib/                 # Configurações e helpers
│   ├── assets/              # Imagens, fonts, etc
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── components.json          # Config shadcn/ui
├── tailwind.config.js
├── tsconfig.json
├── vite.config.ts
├── package.json
├── EXAMPLES.md              # 📚 Documentação dos exemplos
└── README.md

Componente React (CSS)

# Comando:
crc Button --test

Button/
├── Button.jsx
├── Button.css
├── index.js
└── Button.test.jsx

Componente React (Styled Components)

# Comando:
crc Modal --ts --styled

Modal/
├── Modal.tsx
├── styled.ts
├── index.ts
└── Modal.test.tsx

Zustand Store

# Comando:
crc UserStore --zustand --ts

UserStore/
├── store.ts
└── index.ts

Context API

# Comando:
crc ThemeContext --context --ts

ThemeContext/
├── context.tsx
└── index.tsx

💡 Exemplos Automáticos nos Projetos

Quando você seleciona pacotes como Zustand, React Query, Axios ou Zod, o CLI automaticamente cria arquivos de exemplo funcionais!

🏪 Zustand Store

Arquivo: src/stores/userStore.ts

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface User {
  id: string;
  name: string;
  email: string;
}

interface UserState {
  user: User | null;
  isAuthenticated: boolean;
  theme: 'light' | 'dark';
  
  setUser: (user: User) => void;
  logout: () => void;
  toggleTheme: () => void;
}

export const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      user: null,
      isAuthenticated: false,
      theme: 'light',

      setUser: (user) => set({ user, isAuthenticated: true }),
      logout: () => set({ user: null, isAuthenticated: false }),
      toggleTheme: () =>
        set((state) => ({
          theme: state.theme === 'light' ? 'dark' : 'light',
        })),
    }),
    { name: 'user-storage' }
  )
);

🌐 Axios Service

Arquivo: src/services/userService.ts

import { api } from './api';
import { z } from 'zod';

// Schema Zod para validação
export const userSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(3),
  email: z.string().email(),
});

export type User = z.infer<typeof userSchema>;

export const userService = {
  getAll: async (): Promise<User[]> => {
    const response = await api.get<User[]>('/users');
    return response.data;
  },

  getById: async (id: string): Promise<User> => {
    const response = await api.get<User>(`/users/${id}`);
    return userSchema.parse(response.data);
  },

  create: async (data: CreateUserDto): Promise<User> => {
    const validatedData = createUserSchema.parse(data);
    const response = await api.post<User>('/users', validatedData);
    return userSchema.parse(response.data);
  },
};

🔄 React Query Hook

Arquivo: src/hooks/useUsers.ts

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { userService } from '@/services/userService';

export const userKeys = {
  all: ['users'] as const,
  lists: () => [...userKeys.all, 'list'] as const,
  detail: (id: string) => [...userKeys.all, 'detail', id] as const,
};

export function useUsers() {
  return useQuery({
    queryKey: userKeys.lists(),
    queryFn: userService.getAll,
    staleTime: 5 * 60 * 1000,
  });
}

export function useCreateUser() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: CreateUserDto) => userService.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: userKeys.lists() });
      console.log('✅ Usuário criado!');
    },
  });
}

📄 Página de Exemplos

Arquivo: src/pages/ExampleUsage.tsx

Uma página completa mostrando:

Como usar os Zustand stores
Como fazer queries com React Query
Como criar/atualizar/deletar dados
Integração entre todos os pacotes

Para ver os exemplos em ação:

// No seu App.tsx
import { ExampleUsage } from './pages/ExampleUsage';

function App() {
  return <ExampleUsage />;
}

🎯 Como Usar os Componentes Gerados

Importação Simples

import { Button } from './Button';
import { useUserStore } from './stores/userStore';
import { ThemeProvider, useThemeContext } from './contexts/ThemeContext';

Usando Zustand Store

function MyComponent() {
  const { user, setUser, logout } = useUserStore();
  
  return (
    <div>
      {user ? (
        <>
          <p>Olá, {user.name}!</p>
          <button onClick={logout}>Sair</button>
        </>
      ) : (
        <button onClick={() => setUser({ id: '1', name: 'João', email: 'joao@email.com' })}>
          Login
        </button>
      )}
    </div>
  );
}

Usando React Query

import { useUsers, useCreateUser } from '@/hooks/useUsers';

function UsersList() {
  const { data: users, isLoading, error } = useUsers();
  const createUser = useCreateUser();
  
  if (isLoading) return <div>Carregando...</div>;
  if (error) return <div>Erro: {error.message}</div>;
  
  return (
    <div>
      {users?.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
      <button 
        onClick={() => createUser.mutate({ 
          name: 'Maria', 
          email: 'maria@email.com',
          password: '123456'
        })}
      >
        Adicionar Usuário
      </button>
    </div>
  );
}

Usando Context API

function App() {
  return (
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
}

function MyComponent() {
  const { state, dispatch } = useThemeContext();
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </div>
  );
}

🚀 Começando Rapidamente

1. Criar um Projeto Completo

# Instalar CLI globalmente
npm install -g mizi-react-component-generator

# Criar projeto React + Vite
crc --project

# Responder as perguntas interativas:
# - Nome: my-awesome-app
# - TypeScript: Sim
# - shadcn/ui: Sim
# - Componentes: button, card, input
# - Pacotes: zustand, @tanstack/react-query, axios, zod, react-router-dom
# - Git: Sim

# Navegar e iniciar
cd my-awesome-app
npm run dev

2. Clonar Boilerplate Next.js

# Clonar boilerplate profissional
crc --nextjs

# Responder as perguntas:
# - Nome: my-nextjs-project
# - Instalar deps: Sim
# - Abrir VS Code: Sim
# - Remover Git history: Sim

# Navegar e iniciar
cd my-nextjs-project
npm run dev

3. Ver os Exemplos (React + Vite)

// Edite src/App.tsx
import { ExampleUsage } from './pages/ExampleUsage';

function App() {
  return <ExampleUsage />;
}

export default App;

4. Criar Componentes Adicionais

# Criar um novo componente
crc ProductCard --ts --styled --test

# Criar um novo store
crc CartStore --zustand --ts --path ./src/stores

# Criar um novo context
crc AuthContext --context --ts

📖 Documentação Adicional

Após criar um projeto, você terá acesso a:

EXAMPLES.md: Documentação completa dos exemplos criados
README.md: Instruções do projeto
Exemplos funcionais em src/pages/ExampleUsage.tsx
Código comentado e bem estruturado

⚙️ Requisitos

Node.js >= 14.0.0
npm ou yarn

🤝 Contribuindo

Contribuições são bem-vindas! Por favor, leia o guia de contribuição antes de submeter PRs.

📄 Licença

Este projeto está licenciado sob a Licença MIT.

🔗 Links

Feito com ❤️ por Thiago Miziara

⭐ Se este projeto te ajudou, considere dar uma estrela!

Name		Name	Last commit message	Last commit date
Latest commit History 22 Commits
node_modules		node_modules
src		src
.npmignore		.npmignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
NEXTJS_FEATURE_SUMMARY.md		NEXTJS_FEATURE_SUMMARY.md
README.md		README.md
index.js		index.js
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

🚀 React Component Generator

✨ Características

🎨 Geração de Componentes

🚀 Criação de Projetos Completos

⚡ Clone de Boilerplate Next.js

🎯 Modos de Uso

1. Modo Interativo - Componentes

2. Modo Projeto - Criar Projeto Completo

3. Modo Boilerplate Next.js - Clone Completo

📦 Instalação

Uso Global (Recomendado)

Uso com npx (Sem Instalação)

🛠️ Uso por Linha de Comando

Componentes React

Zustand Stores

Context API

📚 Opções Disponíveis

Comandos Principais

Opções para Componentes

🎨 Exemplos de Uso

Criar Projeto Completo

📁 Estruturas Geradas

Projeto Completo

Componente React (CSS)

Componente React (Styled Components)

Zustand Store

Context API

💡 Exemplos Automáticos nos Projetos

🏪 Zustand Store

🌐 Axios Service

🔄 React Query Hook

📄 Página de Exemplos

🎯 Como Usar os Componentes Gerados

Importação Simples

Usando Zustand Store

Usando React Query

Usando Context API

🚀 Começando Rapidamente

1. Criar um Projeto Completo

2. Clonar Boilerplate Next.js

3. Ver os Exemplos (React + Vite)

4. Criar Componentes Adicionais

📖 Documentação Adicional

⚙️ Requisitos

🤝 Contribuindo

📄 Licença

🔗 Links

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages