create-tigra 1.1.0 → 2.0.1

package/template/.claude/rules/client-01-project-structure.md

@@ -1,327 +0,0 @@
----
-trigger: always_on
-globs: "client/**/*"
----
-
-> **SCOPE**: These rules apply specifically to the **client** directory.
-
-# Project Structure & File Naming
-
-## Folder Structure
-
-```
-src/
-├── app/                    # App configuration
-│   ├── App.tsx
-│   ├── router.tsx
-│   └── providers.tsx
-├── components/
-│   ├── layout/            # Header, Footer, MainLayout
-│   │   ├── Header.tsx
-│   │   ├── Footer.tsx
-│   │   ├── Sidebar.tsx
-│   │   └── MainLayout.tsx
-│   └── common/            # Shared components
-│       ├── LoadingSpinner.tsx
-│       ├── ErrorBoundary.tsx
-│       ├── ProtectedRoute.tsx
-│       ├── Pagination.tsx
-│       └── EmptyState.tsx
-├── features/              # Feature modules (domain-driven)
-│   ├── auth/
-│   │   ├── components/    # LoginForm, RegisterForm
-│   │   ├── hooks/         # useAuth, useLogin, useRegister
-│   │   ├── pages/         # LoginPage, RegisterPage
-│   │   ├── services/      # auth.service.ts
-│   │   ├── store/         # authSlice.ts (Redux)
-│   │   ├── types/         # auth.types.ts
-│   │   └── utils/         # auth.utils.ts
-│   ├── resources/         # Example feature
-│   │   ├── components/
-│   │   ├── hooks/
-│   │   ├── pages/
-│   │   ├── services/
-│   │   ├── types/
-│   │   └── utils/
-│   └── users/
-├── hooks/                 # Global custom hooks
-│   ├── useDebounce.ts
-│   ├── useLocalStorage.ts
-│   └── useMediaQuery.ts
-├── lib/
-│   ├── api/
-│   │   ├── axios.config.ts
-│   │   └── api.types.ts
-│   ├── constants/
-│   │   ├── routes.ts
-│   │   ├── api-endpoints.ts
-│   │   └── app.constants.ts
-│   └── utils/
-│       ├── format.ts
-│       ├── validation.ts
-│       └── error.ts
-├── store/                 # Redux store
-│   ├── index.ts
-│   └── hooks.ts
-├── types/                 # Global types
-│   ├── index.ts
-│   └── api.types.ts
-└── styles/
-    ├── globals.css        # Global CSS
-    └── theme.css          # Ant Design custom theme (if needed)
-```
-
-## File Naming Rules
-
-### Components
-- **PascalCase**: `ResourceCard.tsx`, `LoginForm.tsx`
-- **Pattern**: `<ComponentName>.tsx`
-- **CSS**: If using CSS Modules, name as `<ComponentName>.module.css`
-
-### Pages
-- **PascalCase + Page suffix**: `ResourcesPage.tsx`, `LoginPage.tsx`
-- **Pattern**: `<FeatureName>Page.tsx`
-
-### Hooks
-- **camelCase + use prefix**: `useAuth.ts`, `useResources.ts`
-- **Pattern**: `use<HookName>.ts`
-
-### Services
-- **camelCase + .service suffix**: `auth.service.ts`, `resource.service.ts`
-- **Pattern**: `<domain>.service.ts`
-
-### Types
-- **camelCase + .types suffix**: `auth.types.ts`, `resource.types.ts`
-- **Pattern**: `<domain>.types.ts`
-
-### Store (Redux)
-- **camelCase + Slice suffix**: `authSlice.ts`, `resourceSlice.ts`
-- **Pattern**: `<domain>Slice.ts`
-
-### Utils
-- **camelCase + .utils suffix**: `auth.utils.ts`, `date.utils.ts`
-- **Pattern**: `<purpose>.utils.ts`
-
-### Constants
-- **camelCase**: `routes.ts`, `api-endpoints.ts`, `app.constants.ts`
-
-## Module Structure Pattern
-
-Every feature module follows this pattern:
-
-```
-features/<domain>/
-├── components/         # Feature-specific components
-├── hooks/             # Feature-specific hooks
-├── pages/             # Feature pages (routes)
-├── services/          # API service
-├── store/             # Redux slice (if needed)
-├── types/             # TypeScript types
-└── utils/             # Feature utilities
-```
-
-## Import Path Aliases
-
-```json
-// tsconfig.json & vite.config.ts
-{
-  "paths": {
-    "@/*": ["./src/*"],
-    "@/components/*": ["./src/components/*"],
-    "@/features/*": ["./src/features/*"],
-    "@/lib/*": ["./src/lib/*"],
-    "@/hooks/*": ["./src/hooks/*"],
-    "@/store/*": ["./src/store/*"],
-    "@/types/*": ["./src/types/*"],
-    "@/styles/*": ["./src/styles/*"]
-  }
-}
-```
-
-## Import Order
-
-```tsx
-// 1. React and framework
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-// 2. Third-party libraries (Ant Design first)
-import { Button, Card, Input } from 'antd';
-import { useQuery } from '@tanstack/react-query';
-
-// 3. Styles
-import './ResourceCard.css'; // or .module.css
-
-// 4. Local components
-import { ResourceCard } from '../components/ResourceCard';
-
-// 5. Hooks
-import { useAuth } from '@/features/auth/hooks/useAuth';
-import { useResources } from '../hooks/useResources';
-
-// 6. Services
-import { resourceService } from '../services/resource.service';
-
-// 7. Types (always use 'type' keyword)
-import type { Resource } from '../types/resource.types';
-
-// 8. Utils
-import { formatDate } from '@/lib/utils/format';
-```
-
-## Constants Structure
-
-### API Endpoints
-
-```tsx
-// lib/constants/api-endpoints.ts
-export const API_ENDPOINTS = {
-  AUTH: {
-    REGISTER: '/auth/register',
-    LOGIN: '/auth/login',
-    LOGOUT: '/auth/logout',
-    REFRESH: '/auth/refresh',
-    ME: '/auth/me',
-    VERIFY_EMAIL: '/auth/verify-email',
-    RESEND_VERIFICATION: '/auth/resend-verification',
-    REQUEST_PASSWORD_RESET: '/auth/request-password-reset',
-    RESET_PASSWORD: '/auth/reset-password',
-  },
-  USERS: {
-    ME: '/users/me',
-    UPDATE_ME: '/users/me',
-    DELETE_ME: '/users/me',
-  },
-  RESOURCES: {
-    LIST: '/resources',
-    MY_RESOURCES: '/resources/my',
-    CREATE: '/resources',
-    GET: (id: string) => `/resources/${id}`,
-    UPDATE: (id: string) => `/resources/${id}`,
-    DELETE: (id: string) => `/resources/${id}`,
-  },
-} as const;
-```
-
-### Routes
-
-```tsx
-// lib/constants/routes.ts
-export const ROUTES = {
-  HOME: '/',
-  LOGIN: '/login',
-  REGISTER: '/register',
-  VERIFY_EMAIL: '/verify-email',
-  RESET_PASSWORD: '/reset-password',
-  DASHBOARD: '/dashboard',
-  PROFILE: '/profile',
-  RESOURCES: {
-    LIST: '/resources',
-    DETAILS: (id: string) => `/resources/${id}`,
-    MY_RESOURCES: '/my-resources',
-    CREATE: '/resources/create',
-    EDIT: (id: string) => `/resources/${id}/edit`,
-  },
-} as const;
-```
-
-### App Constants
-
-```tsx
-// lib/constants/app.constants.ts
-export const APP_NAME = 'My Application';
-
-export const PAGINATION = {
-  DEFAULT_PAGE: 1,
-  DEFAULT_LIMIT: 10,
-  MAX_LIMIT: 100,
-} as const;
-
-export const USER_ROLES = {
-  USER: 'USER',
-  ORG: 'ORGANIZATION',
-  ADMIN: 'ADMIN',
-} as const;
-
-export const CURRENCIES = {
-  GEL: 'GEL',
-  USD: 'USD',
-  EUR: 'EUR',
-} as const;
-```
-
-## Naming Conventions
-
-### Variables
-- **camelCase**: `userName`, `resourceList`, `isLoading`
-
-### Functions
-- **camelCase**: `getUserData()`, `handleSubmit()`, `formatPrice()`
-
-### Constants
-- **UPPER_SNAKE_CASE**: `API_BASE_URL`, `MAX_FILE_SIZE`
-
-### Types/Interfaces
-- **PascalCase**: `User`, `Resource`, `ResourceFilters`
-- **Interface prefix**: `IUser`, `IResource` (optional, be consistent)
-
-### Enums/Type Unions
-- **PascalCase**: `UserRole`, `ResourceStatus`
-
-## Export Patterns
-
-### Named Exports (Preferred)
-```tsx
-// ✅ GOOD
-export const ResourceCard = () => {};
-export const ResourceList = () => {};
-
-// Import
-import { ResourceCard, ResourceList } from './components';
-```
-
-### Default Export (Only for app.ts)
-```tsx
-// ❌ AVOID for components
-export default ResourceCard;
-
-// ✅ OK for App
-export default App;
-```
-
-### Barrel Exports
-```tsx
-// features/resources/index.ts
-export { ResourceCard } from './components/ResourceCard';
-export { ResourceList } from './components/ResourceList';
-export { useResources } from './hooks/useResources';
-export { resourceService } from './services/resource.service';
-export type * from './types/resource.types';
-
-// Usage
-import { ResourceCard, useResources, resourceService } from '@/features/resources';
-```
-
-## Environment Variables
-
-```env
-# .env.development
-VITE_API_BASE_URL=http://localhost:3000/api/v1
-VITE_APP_NAME=My Application
-
-# .env.production
-VITE_API_BASE_URL=https://api.myapplication.com/api/v1
-VITE_APP_NAME=My Application
-```
-
-**Rules:**
-- Prefix with `VITE_` to expose to client
-- Never commit `.env` files
-- Always provide `.env.example`
-
-```tsx
-// Accessing env variables
-const apiUrl = import.meta.env.VITE_API_BASE_URL;
-const isDev = import.meta.env.DEV;
-const isProd = import.meta.env.PROD;
-```

package/template/.claude/rules/client-02-component-patterns.md

@@ -1,250 +0,0 @@
----
-trigger: always_on
-globs: "client/**/*"
----
-
-> **SCOPE**: These rules apply specifically to the **client** directory.
-
-# Component Patterns & Rules
-
-## Component Structure Template
-
-```tsx
-// 1. IMPORTS (grouped and ordered)
-import { useState, useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Button, Card } from 'antd'; // Ant Design
-import { useResources } from '../hooks/useResources';
-import type { Resource } from '../types/resource.types';
-
-// Import CSS (Vanilla or Module)
-import './ResourceCard.css';
-
-// 2. TYPES (component-specific only)
-interface ResourceCardProps {
-  resource: Resource;
-  onEdit?: (id: string) => void;
-  className?: string; // Standard className prop for custom styles
-}
-
-// 3. COMPONENT
-export const ResourceCard = ({ resource, onEdit, className }: ResourceCardProps) => {
-  // 3a. HOOKS (router → Redux → React Query → state → custom)
-  const navigate = useNavigate();
-  const [isHovered, setIsHovered] = useState(false);
-  
-  // 3b. EVENT HANDLERS
-  const handleClick = useCallback(() => {
-    navigate(`/resources/${resource.id}`);
-  }, [navigate, resource.id]);
-  
-  // 3c. EFFECTS
-  useEffect(() => {
-    // Side effects
-  }, []);
-  
-  // 3d. EARLY RETURNS
-  if (!resource) return null;
-  
-  // 3e. RENDER
-  return (
-    <Card 
-      className={`resource-card ${className || ''}`} 
-      onClick={handleClick}
-      hoverable
-    >
-      <h3>{resource.title}</h3>
-      {/* JSX */}
-    </Card>
-  );
-};
-```
-
-## Component Types
-
-### 1. Presentational Components
-**Location**: `components/common/` or `features/*/components/`
-
-**Rules**:
-- NO business logic
-- NO API calls
-- NO Redux/Context (except theme)
-- Receive ALL data via props
-- Focus ONLY on UI
-
-```tsx
-// ✅ GOOD - Pure presentation
-interface ResourceCardProps {
-  resource: Resource;
-  onClick: (id: string) => void;
-}
-
-export const ResourceCard = ({ resource, onClick }: ResourceCardProps) => {
-  return (
-    <div className="card-container" onClick={() => onClick(resource.id)}>
-      <h3>{resource.title}</h3>
-      <p>{resource.price}</p>
-    </div>
-  );
-};
-```
-
-### 2. Container Components
-**Location**: `features/*/pages/` or `features/*/components/`
-
-**Rules**:
-- Contains business logic
-- Makes API calls via hooks
-- Manages state
-- Passes data to presentational components
-
-```tsx
-// ✅ GOOD - Container component
-export const ResourcesPage = () => {
-  const [filters, setFilters] = useState<ResourceFilters>({});
-  const { resources, isLoading } = useResources(filters);
-  const navigate = useNavigate();
-  
-  const handleResourceClick = (id: string) => {
-    navigate(`/resources/${id}`);
-  };
-  
-  if (isLoading) return <LoadingSpinner />;
-  
-  return (
-    <div className="page-container">
-      <ResourceFilters value={filters} onChange={setFilters} />
-      <div className="resource-list">
-        {resources.map(res => (
-          <ResourceCard key={res.id} resource={res} onClick={handleResourceClick} />
-        ))}
-      </div>
-    </div>
-  );
-};
-```
-
-## Styling Rules
-
-### CSS Architecture
-Instead of Tailwind, use Vanilla CSS or CSS Modules.
-
-**Vanilla CSS Pattern**:
-```css
-/* ResourceCard.css */
-.resource-card {
-  padding: 16px;
-  border: 1px solid var(--border-color);
-  transition: all 0.3s ease;
-}
-
-.resource-card:hover {
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-```
-
-**CSS Modules Pattern**:
-```tsx
-import styles from './ResourceCard.module.css';
-
-<div className={styles.cardContainer}>...</div>
-```
-
-**Rules**:
-1. **NO Inline styles**: Avoid `<div style={{...}}>`.
-2. **Use Variables**: Use CSS variables for theme colors (defined in `globals.css`).
-3. **Consistency**: Use Ant Design's built-in props for standard spacing and layout where possible.
-4. **Responsive**: Use media queries in CSS files.
-
-```css
-/* ✅ GOOD - Responsive in CSS */
-.page-container {
-  padding: 20px;
-}
-
-@media (min-width: 768px) {
-  .page-container {
-    padding: 40px;
-  }
-}
-```
-
-## Component Size Rules
-
-### Limits
-- **Max 250 lines** per component
-- **Max 5 props** (use object if more)
-- **Max 3 levels** of JSX nesting
-
-### When to Split
-Split when:
-1. Component exceeds 250 lines
-2. JSX nesting exceeds 3 levels
-3. Multiple responsibilities
-4. Part is reusable elsewhere
-
-## Props Rules
-
-### Props Interface
-```tsx
-// ✅ GOOD - Group related props
-interface ResourceCardProps {
-  resource: Resource;
-  actions?: ResourceActions;
-  className?: string;
-}
-```
-
-### Children Prop
-```tsx
-interface LayoutProps {
-  children: React.ReactNode;
-  headerContent?: React.ReactNode;
-}
-
-export const Layout = ({ children, headerContent }: LayoutProps) => {
-  return (
-    <div className="layout">
-      {headerContent && <div className="header">{headerContent}</div>}
-      {children}
-    </div>
-  );
-};
-```
-
-## Performance Optimization
-
-### React.memo
-```tsx
-// ✅ Use for components in lists
-export const ResourceCard = React.memo(({ resource }: ResourceCardProps) => {
-  return <div>{resource.title}</div>;
-});
-
-ResourceCard.displayName = 'ResourceCard';
-```
-
-### useCallback
-```tsx
-// ✅ For handlers passed to children
-const handleClick = useCallback((id: string) => {
-  navigate(`/resources/${id}`);
-}, [navigate]);
-
-<ResourceCard resource={resource} onClick={handleClick} />
-```
-
-## Accessibility Rules
-- Use semantic HTML tags.
-- Use `aria-*` attributes when standard elements aren't enough.
-- Ensure Ant Design components are used with proper labels.
-
-## Component Checklist
-- [ ] Under 250 lines
-- [ ] Props interface defined (max 5)
-- [ ] Event handlers use useCallback
-- [ ] Expensive computations use useMemo
-- [ ] Early returns for error/loading
-- [ ] CSS files used (no inline styles, no Tailwind)
-- [ ] Accessibility attributes
-- [ ] Named export (not default)