metabinaries 1.0.0

package/src/templates/layout.js

@@ -0,0 +1,279 @@
+// Layout & Shared Components Templates
+export const layoutTemplates = {
+  'components/footer.tsx': `export default function Footer() {
+  return <footer className="py-8 text-center text-gray-400">© 2025 MetaBinaries</footer>;
+}`,
+
+  'components/layout/LanguageSwitcher.tsx': `'use client';
+
+import { Globe } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useParams } from 'next/navigation';
+import { useRouter, usePathname } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
+
+export function LanguageSwitcher() {
+  const params = useParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const locale = params?.locale as string;
+  const currentLocale = (locale as 'en' | 'ar') || 'en';
+
+  const handleLocaleChange = (newLocale: 'en' | 'ar') => {
+    if (newLocale === currentLocale) return;
+
+    // Base path removed
+    const BASE_PATH = '';
+
+    // Get current pathname from browser
+    const currentPath = window.location.pathname;
+
+    // Remove base path if present (e.g., "/workspace/en/admin" -> "/en/admin")
+    const pathWithoutBase = currentPath.startsWith(BASE_PATH)
+      ? currentPath.slice(BASE_PATH.length)
+      : currentPath;
+
+    // Split by current locale to get the path without locale
+    // e.g., "/en/admin/users" -> ["", "admin/users"]
+    const pathParts = pathWithoutBase.split(\`/\${currentLocale}\`);
+    const pathWithoutLocale =
+      pathParts.length > 1
+        ? pathParts[1] || '/'
+        : pathWithoutBase.startsWith('/')
+          ? pathWithoutBase.slice(1)
+          : pathWithoutBase;
+
+    // Ensure the path starts with / and normalize it
+    const normalizedPath = pathWithoutLocale.startsWith('/')
+      ? pathWithoutLocale
+      : \`/\${pathWithoutLocale}\`;
+
+    // Construct the new path with base path and new locale
+    const newPath =
+      normalizedPath === '/'
+        ? \`\${BASE_PATH}/\${newLocale}\`
+        : \`\${BASE_PATH}/\${newLocale}\${normalizedPath}\`;
+
+    // Preserve query parameters and hash if any
+    const searchParams = window.location.search;
+    const hash = window.location.hash;
+    const newUrl = \`\${newPath}\${searchParams}\${hash}\`;
+
+    // Navigate to the new locale path using window.location for reliability
+    window.location.href = newUrl;
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant='ghost'
+          size='sm'
+          className='text-setup-text hover:text-setup-text hover:bg-setup-primary/20'
+          title='Change Language'
+        >
+          <Globe className='h-4 w-4' />
+          <span className='ml-2 text-xs uppercase'>{currentLocale}</span>
+          <span className='sr-only'>Change Language</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align='end'
+        className='bg-setup-primary border-setup-secondary/30'
+      >
+        <DropdownMenuItem
+          onClick={() => handleLocaleChange('en')}
+          className={cn(
+            'text-setup-text hover:text-setup-text hover:bg-setup-secondary/20',
+            currentLocale === 'en' && 'bg-setup-secondary/10'
+          )}
+        >
+          <span className='mr-2'>🇬🇧</span>
+          English
+          {currentLocale === 'en' && (
+            <span className='ml-auto text-setup-secondary'>✓</span>
+          )}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => handleLocaleChange('ar')}
+          className={cn(
+            'text-setup-text hover:text-setup-text hover:bg-setup-secondary/20',
+            currentLocale === 'ar' && 'bg-setup-secondary/10'
+          )}
+        >
+          <span className='mr-2'>🇸🇦</span>
+          العربية
+          {currentLocale === 'ar' && (
+            <span className='ml-auto text-setup-secondary'>✓</span>
+          )}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}`,
+
+  'components/layout/providers.tsx': `'use client';
+
+import { ThemeProvider as NextThemeProvider } from 'next-themes';
+import { Provider as ReduxProvider } from 'react-redux';
+import { ReactNode } from 'react';
+import { store } from '@/lib/shared/store';
+import { NotificationProvider } from '@/lib/features/notifications/NotificationContext';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <ReduxProvider store={store}>
+      <NotificationProvider>
+        <NextThemeProvider
+          attribute='class'
+          defaultTheme='system'
+          enableSystem
+          disableTransitionOnChange
+          themes={['light', 'dark', 'system']}
+        >
+          {children}
+        </NextThemeProvider>
+      </NotificationProvider>
+    </ReduxProvider>
+  );
+}`,
+
+  'components/shared/ConfirmationDialog.tsx': `'use client';
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import type { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from '@/components/ui/button';
+
+interface ConfirmationDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  onCancel?: () => void;
+  title?: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmVariant?: VariantProps<typeof buttonVariants>['variant'];
+  isLoading?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  /**
+   * When true, shows the footer buttons even when children are provided.
+   * When false (default), children completely replace the default content.
+   */
+  showFooterWithChildren?: boolean;
+}
+
+export function ConfirmationDialog({
+  isOpen,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+  title = 'Confirm Action',
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  confirmVariant = 'destructive',
+  isLoading = false,
+  disabled = false,
+  children,
+  showFooterWithChildren = false,
+}: ConfirmationDialogProps) {
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    } else {
+      onOpenChange(false);
+    }
+  };
+
+  const handleConfirm = () => {
+    onConfirm();
+  };
+
+  const footerButtons = (
+    <DialogFooter>
+      <Button
+        variant='outline'
+        onClick={handleCancel}
+        disabled={isLoading || disabled}
+      >
+        {cancelLabel}
+      </Button>
+      <Button
+        variant={confirmVariant}
+        onClick={handleConfirm}
+        disabled={isLoading || disabled}
+      >
+        {isLoading ? 'Processing...' : confirmLabel}
+      </Button>
+    </DialogFooter>
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent>
+        {children ? (
+          <>
+            {children}
+            {showFooterWithChildren && footerButtons}
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>{title}</DialogTitle>
+              {description && (
+                <DialogDescription>{description}</DialogDescription>
+              )}
+            </DialogHeader>
+            {footerButtons}
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}`,
+
+  'hooks/use-mobile.tsx': `import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(\`(max-width: \${MOBILE_BREAKPOINT - 1}px)\`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}`,
+
+  'hooks/use-mobile.ts': `export function useIsMobile() { return false; }`,
+};

package/src/templates/misc.js

@@ -0,0 +1,277 @@
+export const miscTemplates = {
+  'docs/EXPLAIN_METABINARIES_FILE_STRUCTURE.md': `# MetaBinaries: Advanced CRM Architecture Guide
+
+This project is built using the **MetaBinaries Feature-Based Internal Architecture**. It is designed for maximum scalability, maintainability, and enterprise-grade performance.
+
+## 🏗️ Core Philosophy
+
+The structure follows a **Feature-Driven Development (FDD)** approach. Instead of grouping files by type (e.g., all slices in one folder), we group them by **Domain/Feature**. This minimizes "folder jumping" and keeps related logic together.
+
+---
+
+## 📁 Detailed File Structure Explained
+
+### 🌍 Application Root (\`app/[locale]\`)
+Next.js 15 App Router with dynamic locale segments.
+- **\`layout.tsx\`**: The global entry point. Handles fonts, base providers, and internationalization context.
+- **\`globals.css\`**: Tailwind CSS base styles and design system variables (HSL).
+- **\`(auth)/\`**: Grouped routes for authentication.
+  - \`login/\`, \`sign-up/\`, \`forgot-password/\`: Stateless pages for user entry.
+- **\`(workspace)/\`**: The internal CRM area (Protected).
+  - \`(home)/\`: Grouped route for the main dashboard.
+    - \`page.tsx\`: The main Dashboard page.
+  - \`_Components/\`: **Flat structure** for layout-specific components (Sidebar, Header, Search).
+
+### 🧪 Business Logic (\`lib/features/NAME\`)
+This is where the "Brain" of your feature lives. For every new feature (e.g., "leads"), you should create:
+- **\`NAME.api.ts\`**: Defines API endpoints using Axios.
+- **\`NAME.service.ts\`**: Data transformation and business logic (Layer between API and State).
+- **\`NAME.slice.ts\`**: Redux Toolkit slice for state management.
+- **\`NAME.types.ts\`**: TypeScript interfaces/types specific to this feature.
+- **\`NAME.utils.ts\`**: Helper functions used only within this feature.
+- **\`useNAME.ts\`**: A custom React hook for easy access to state and actions from components.
+
+### ⚙️ Shared Logic (\`lib/shared\`)
+- **\`axios.ts\`**: Pre-configured Axios instance with base URL and interceptors.
+- **\`store.ts\`**: Centralized Redux store configuration.
+- **\`utils/validation/\`**: Zod schemas for forms and API validation.
+  - \`common-rules.ts\`: Reusable rules (Email, Password strength).
+  - \`NAME.validation.ts\`: Feature-specific form schemas.
+
+### 🍱 UI Components (\`components/\`)
+- **\`ui/\`**: Atomic components (Buttons, Inputs, Dialogs) from Shadcn UI. **Do not put business logic here.**
+- **\`shared/\`**: Reusable higher-order components (Table wrappers, Confirmation dialogs).
+- **\`layout/\`**: App-wide structural logic (AuthGuard, LanguageSwitcher, Providers).
+
+### 🌐 Internationalization (\`i18n/\`)
+- **\`routing.ts\`**: Configuration for supported locales (\`en\`, \`ar\`) and default locale.
+- **\`navigation.ts\`**: Type-safe navigation wrappers (\`Link\`, \`useRouter\`, \`usePathname\`).
+- **\`request.ts\`**: Server-side logic to load the correct JSON messages.
+
+---
+
+## 🛠️ Usage Guides
+
+### How to add a new Locale?
+1. Open \`i18n/routing.ts\` and add the locale code to \`locales\`.
+2. Create a new JSON file in \`messages/[code].json\`.
+3. Update the matching in \`middleware.ts\`.
+
+### How to create a new Feature?
+1. Create a folder in \`lib/features/[featureName]\`.
+2. Add the 6 core files (api, service, slice, types, utils, hook).
+3. Register the new \`slice\` in \`lib/shared/store.ts\`.
+4. Create the UI for it in \`app/[locale]/(workspace)/[featureName]\`.
+
+---
+
+## 🛡️ Security & Quality
+- **Rate Limiting**: Use \`rateLimitMiddleware\` in \`middleware.ts\` for sensitive routes.
+- **Husky**: Automated checks ensure you never commit broken types or bad formatting.
+- **Conventional Commits**: Keeps a clean version history for easier debugging.
+
+---
+*Created by MetaBinaries CLI - Professional Next.js Scaffolding*`,
+
+  'README.md': projectName => `# ${projectName}
+
+Built with [MetaBinaries](https://metabinaries.com) - The advanced CLI for CRM-style Next.js applications.
+
+## 🚀 Features
+
+- **Next.js 15 (App Router)** - High-performance web architecture.
+- **Internationalization (i18n)** - Full support for English (LTR) and Arabic (RTL) using \`next-intl\`.
+- **Feature-Based Architecture** - Scalable organization under \`lib/features/\`.
+- **State Management** - Centralized store using **Redux Toolkit**.
+- **Modern UI System** - Powered by **Tailwind CSS**, **Shadcn UI**, and **Radix UI**.
+- **Developer Experience**:
+  - **Husky Hooks**: Automated pre-commit checks (Type-checking & Formatting).
+  - **Conventional Commits**: Standardized commit history.
+  - **Turbopack Build**: Optimized development and build speeds.
+- **Security & Utilities**:
+  - **Rate Limiting**: Built-in request limiting for protected routes.
+  - **Axios Configuration**: Centralized API client with interceptors.
+  - **Zod Validation**: Robust schema validation for forms and APIs.
+
+## 🛠️ Tech Stack
+
+- **Framework**: Next.js 15
+- **Styling**: Tailwind CSS
+- **State**: Redux Toolkit
+- **Internationalization**: next-intl
+- **Forms**: React Hook Form + Zod
+- **Icons**: Lucide React
+- **Notifications**: Sonner
+- **Themes**: next-themes
+- **Animations**: Framer Motion
+
+## 📁 Project Structure
+
+\`\`\`
+├─ app/[locale]           # Root of the application (i18n)
+│  ├─ (auth)               # Authentication routes (Login, SignUp)
+│  └─ (workspace)          # Protected CRM workspace routes
+│     └─ (home)            # Main dashboard area
+├─ components/
+│  ├─ ui/                  # Shadcn UI base components
+│  ├─ shared/              # Reusable common components
+│  └─ layout/              # AuthGuards, ThemeProviders, etc.
+├─ lib/
+│  ├─ features/            # Business logic grouped by feature
+│  ├─ shared/              # Centralized Axios, Redux Store
+│  └─ utils/               # Common helper functions
+├─ i18n/                   # Translation routing and configurations
+└─ messages/               # JSON translation files (en/ar)
+\`\`\`
+
+## 🏁 Getting Started
+
+### 1. Installation
+\`\`\`bash
+npm install
+\`\`\`
+
+### 2. Run Locally
+\`\`\`bash
+npm run dev
+\`\`\`
+
+### 3. Build & Production
+\`\`\`bash
+npm run build
+\`\`\`
+
+### 📝 Scripts
+
+- \`npm run dev\`: Start the development server.
+- \`npm run build\`: Clean build, format check, and Next.js build.
+- \`npm run format\`: Format entire codebase with Prettier.
+- \`npm run type-check\`: Run TypeScript compiler checks.
+
+## 🤝 Contributing
+
+This project follows **Conventional Commits**. Please make sure your commit messages match the required format:
+\`type(scope): subject\` (e.g., \`feat(auth): add google sign-in\`).
+
+---
+Generated by **MetaBinaries CLI**`,
+
+  '.husky/pre-commit': `echo "🔍 Running pre-commit checks..."
+echo ""
+
+# Step 1: Run type check first (fail fast if there are type errors)
+echo "🔎 Running TypeScript type check..."
+if ! npm run type-check; then
+  echo ""
+  echo "❌ Type check failed! Please fix type errors before committing."
+  echo ""
+  echo "To commit anyway (not recommended), use:"
+  echo "  git commit --no-verify"
+  echo ""
+  exit 1
+fi
+echo "✅ Type check passed!"
+echo ""
+
+# Step 2: Format code after type check passes
+echo "📝 Formatting code with Prettier..."
+if ! npm run format; then
+  echo ""
+  echo "❌ Formatting failed! Please fix formatting issues."
+  echo ""
+  exit 1
+fi
+echo "✅ Code formatted successfully!"
+echo ""
+
+echo "✅ All pre-commit checks passed! Proceeding with commit..."`,
+
+  '.husky/commit-msg': `# Validates commit message format
+
+# Conventional commit format: type(scope): subject
+# Note: Added optional ! for breaking changes (e.g., feat!: or fix!:)
+commit_regex='^(feat|fix|docs|style|refactor|test|chore|perf|ci|build|revert|hotfix|release)(!)?(\\(.+\\))?: .{1,}'
+
+if ! grep -qE "$commit_regex" "$1"; then
+  echo "❌ Invalid commit message format!"
+  echo ""
+  echo "Commit message must follow conventional commit format:"
+  echo "  type(scope): subject"
+  echo "  or type!: subject (for breaking changes)"
+  echo ""
+  echo "Types: feat, fix, docs, style, refactor, test, chore, perf, ci, build, revert, hotfix, release"
+  echo ""
+  echo "Examples:"
+  echo "  feat: add user authentication"
+  echo "  fix(api): resolve login bug"
+  echo "  feat!: change API response format (breaking change)"
+  echo "  docs: update README"
+  echo ""
+  exit 1
+fi
+
+echo "✅ Commit message format is valid!"`,
+
+  '.husky/pre-push': `echo "\ud83d\ude80 Running pre-push checks..."
+echo ""
+
+# Get current branch
+current_branch=$(git rev-parse --abbrev-ref HEAD)
+
+# Protect main/master branches from direct pushes
+protected_branches="^(main|master|production)$"
+if echo "$current_branch" | grep -qE "$protected_branches"; then
+  echo "❌ Direct pushes to $current_branch are not allowed!"
+  echo ""
+  echo "Please create a feature branch and open a pull request:"
+  echo "  git checkout -b feature/your-feature-name"
+  echo "  git push origin feature/your-feature-name"
+  echo ""
+  echo "Or if you really need to push directly, use:"
+  echo "  git push --no-verify"
+  echo ""
+  exit 1
+fi
+
+# Run tests if test script exists
+if npm run --silent 2>&1 | grep -q "\\"test\\""; then
+  echo "🧪 Running tests..."
+  if ! npm test; then
+    echo ""
+    echo "❌ Tests failed! Please fix failing tests before pushing."
+    echo ""
+    echo "To push anyway (not recommended), use:"
+    echo "  git push --no-verify"
+    echo ""
+    exit 1
+  fi
+  echo "✅ All tests passed!"
+  echo ""
+fi
+
+echo "✅ All pre-push checks passed! Proceeding with push..."`,
+
+  '.husky/prepare-commit-msg': `# Add branch name to commit message automatically
+COMMIT_MSG_FILE=$1
+COMMIT_SOURCE=$2
+
+# Only add branch name for regular commits (not merge, squash, etc.)
+if [ -z "$COMMIT_SOURCE" ]; then
+  BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD 2>/dev/null)
+  
+  # Skip if on main/master or if branch name already in message
+  if ! echo "$BRANCH_NAME" | grep -qE "^(main|master|HEAD)$"; then
+    COMMIT_MSG=$(cat "$COMMIT_MSG_FILE")
+    
+    # Only add if not already present
+    if ! echo "$COMMIT_MSG" | grep -q "$BRANCH_NAME"; then
+      # Extract ticket number from branch name (e.g., feature/PROJ-123-description -> PROJ-123)
+      TICKET=$(echo "$BRANCH_NAME" | grep -oE "[A-Z]+-[0-9]+" | head -1)
+      
+      if [ -n "$TICKET" ]; then
+        echo "$COMMIT_MSG" | sed "1s/$/ [$TICKET]/" > "$COMMIT_MSG_FILE"
+      fi
+    fi
+  fi
+fi`,
+};

package/src/templates/packages.js

@@ -0,0 +1,42 @@
+export const dependencies = [
+  '@reduxjs/toolkit',
+  'react-redux',
+  'next-intl',
+  'axios',
+  'clsx',
+  'tailwind-merge',
+  'zod',
+  'react-hook-form',
+  '@hookform/resolvers',
+  'date-fns',
+  'lucide-react',
+  'sonner',
+  'next-themes',
+  'tailwindcss-animate',
+  'class-variance-authority',
+  '@radix-ui/react-avatar',
+  '@radix-ui/react-collapsible',
+  '@radix-ui/react-dialog',
+  '@radix-ui/react-dropdown-menu',
+  '@radix-ui/react-label',
+  '@radix-ui/react-navigation-menu',
+  '@radix-ui/react-popover',
+  '@radix-ui/react-scroll-area',
+  '@radix-ui/react-separator',
+  '@radix-ui/react-slot',
+  '@radix-ui/react-switch',
+  '@radix-ui/react-tooltip',
+  'framer-motion',
+  'input-otp',
+  'cmdk',
+  'vaul',
+];
+
+export const devDependencies = [
+  '@types/node',
+  'prettier',
+  'prettier-plugin-tailwindcss',
+  'husky',
+  'lint-staged',
+  'rimraf',
+];