@machinemetrics/mm-react-components 0.2.3-3 → 0.2.3-31

package/dist/scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json

@@ -0,0 +1,577 @@
+{
+  "dependenciesToRemove": [
+    "@chakra-ui/react",
+    "@chakra-ui/icons",
+    "@chakra-ui/system",
+    "@emotion/react",
+    "@emotion/styled"
+  ],
+  "dependenciesToAdd": {
+    "@machinemetrics/mm-react-components": "*",
+    "lucide-react": "^0.263.1"
+  },
+  "devDependenciesToAdd": {},
+  "providerInstructions": [
+    "Remove <ChakraProvider> wrapper from your app root (usually in src/index.tsx or src/main.tsx).",
+    "Import the pre-compiled CSS: import '@machinemetrics/mm-react-components/styles' in your main CSS file (e.g., src/index.css).",
+    "Add the Carbide theme class to your app root element: document.documentElement.classList.add('carbide')",
+    "For dark mode support, add both classes: document.documentElement.classList.add('carbide', 'dark')",
+    "Remove Chakra-specific theme files and configurations.",
+    "No build tools (Tailwind/PostCSS) required - everything is pre-compiled!",
+    "Install lucide-react for icons: npm install lucide-react",
+    "Replace Chakra <Icon> components with lucide-react icons directly (e.g., import { Search } from 'lucide-react')",
+    "Replace useDisclosure hook with useState: const [isOpen, setIsOpen] = useState(false)"
+  ],
+  "manualMigrationComponents": {
+    "layoutComponents": [
+      "Box → Replace with <div> element and add appropriate Tailwind classes",
+      "Flex → Replace with <div className='flex'> and add flex-related Tailwind classes",
+      "VStack → Replace with <div className='flex flex-col gap-4'> and adjust spacing as needed",
+      "HStack → Replace with <div className='flex flex-row gap-4'> and adjust spacing as needed",
+      "Stack → Replace with <div className='flex flex-col gap-4'> and adjust direction/spacing as needed",
+      "Container → Replace with <div className='container mx-auto px-4'> and adjust max-width as needed",
+      "Center → Replace with <div className='flex items-center justify-center'>",
+      "SimpleGrid → Replace with <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'> and adjust columns as needed"
+    ],
+    "typographyComponents": [
+      "Heading → Replace with semantic heading elements (h1, h2, h3, etc.) and add Tailwind typography classes",
+      "Text → Replace with semantic text elements (p, span, etc.) and add Tailwind typography classes"
+    ],
+    "formComponents": [
+      "Field → Replace with <div> wrapper and use shadcn/ui form components for inputs",
+      "NumberInput → Replace with <input type='number'> and add Tailwind classes, or use shadcn/ui Input component",
+      "Slider → Replace with <input type='range'> and add Tailwind classes, or use shadcn/ui Slider component",
+      "NativeSelect → Replace with <select> and add Tailwind classes, or use shadcn/ui Select component"
+    ],
+    "uiComponents": [
+      "IconButton → Replace with Button component (size='icon' variant) or <button> with icon + Tailwind classes",
+      "Portal → Replace with <div> and use React Portal (React.createPortal)",
+      "Icon → Replace with Lucide React icons directly (no wrapper needed)"
+    ],
+    "note": "Most UI components are now available in mm-react-components: Alert, Avatar, Breadcrumb, Calendar, Card, DateRangePicker, Form, Textarea, Toaster, AlertDialog, Chart, Dropzone, SearchInput, Separator, Progress - these will be automatically mapped by the migration script"
+  },
+  "migrationInstructions": {
+    "layoutComponents": [
+      "Layout components (Box, Flex, VStack, HStack, Stack, Container, Center, SimpleGrid) are replaced with generic JSX elements and Tailwind CSS classes.",
+      "Box → <div> with appropriate Tailwind classes",
+      "Flex → <div className='flex'> with flex-related Tailwind classes",
+      "VStack → <div className='flex flex-col gap-4'> (adjust spacing as needed)",
+      "HStack → <div className='flex flex-row gap-4'> (adjust spacing as needed)",
+      "Stack → <div className='flex flex-col gap-4'> (adjust direction/spacing as needed)",
+      "Container → <div className='container mx-auto px-4'> (adjust max-width as needed)",
+      "Center → <div className='flex items-center justify-center'>",
+      "SimpleGrid → <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'> (adjust columns as needed)"
+    ],
+    "typographyComponents": [
+      "Typography components (Heading, Text) are replaced with semantic HTML elements and Tailwind typography classes.",
+      "Heading → <h1>, <h2>, <h3>, etc. with appropriate Tailwind typography classes",
+      "Text → <p>, <span>, etc. with appropriate Tailwind typography classes",
+      "Use Tailwind's typography scale (text-sm, text-base, text-lg, etc.) for sizing"
+    ],
+    "formComponents": [
+      "Form components (Field, NumberInput, NativeSelect) have simple replacements:",
+      "Field → <div> wrapper with space-y-2, or use FormItem from mm-react-components",
+      "NumberInput → <input type='number'> with styling, or use Input component",
+      "NativeSelect → <select> with styling, or use Select component from mm-react-components"
+    ],
+    "uiComponents": [
+      "Most UI components are now available in mm-react-components and will be automatically mapped:",
+      "✅ Alert, Avatar, Breadcrumb, Calendar, Card, DateRangePicker, Form, Textarea, Toaster, AlertDialog",
+      "✅ Chart, Dropzone, SearchInput, Separator, Progress, Slider, Accordion, Popover",
+      "Only these require manual handling:",
+      "IconButton → Use Button component with size='icon' variant",
+      "Portal → Use React.createPortal",
+      "Icon → Use lucide-react icons directly (no wrapper needed)",
+      "Spinner → Use Loader2 from lucide-react or div with animate-spin"
+    ]
+  },
+  "moduleMappings": {
+    "@chakra-ui/react": {
+      "jsxSpecifiers": {
+        "Box": { "tag": "div", "class": "" },
+        "Flex": { "tag": "div", "class": "flex" },
+        "VStack": { "tag": "div", "class": "flex flex-col gap-4" },
+        "HStack": { "tag": "div", "class": "flex flex-row gap-4" },
+        "Stack": { "tag": "div", "class": "flex flex-col gap-4" },
+        "Container": { "tag": "div", "class": "container mx-auto px-4" },
+        "Center": { "tag": "div", "class": "flex items-center justify-center" },
+        "SimpleGrid": { "tag": "div", "class": "grid gap-4" },
+        "Heading": { "tag": "h2", "class": "font-semibold" },
+        "Text": { "tag": "p", "class": "" },
+        "Portal": { "tag": "div", "class": "" },
+        "Separator": { "tag": "hr", "class": "border-t" },
+        "IconButton": {
+          "tag": "button",
+          "class": "inline-flex items-center justify-center"
+        },
+        "Spinner": {
+          "tag": "div",
+          "class": "animate-spin rounded-full h-6 w-6 border-2 border-current border-t-transparent",
+          "note": "Replace with Loader2 from lucide-react for better icon"
+        },
+        "NumberInput": {
+          "tag": "input",
+          "class": "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+          "attributes": { "type": "number" }
+        },
+        "NativeSelect": {
+          "tag": "select",
+          "class": "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+        },
+        "Field": {
+          "tag": "div",
+          "class": "space-y-2"
+        }
+      },
+      "specifiers": {
+        "Badge": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Badge"
+        },
+        "Button": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Button"
+        },
+        "Modal": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Dialog"
+        },
+        "Input": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Input"
+        },
+        "Menu": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DropdownMenu"
+        },
+        "Select": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Select"
+        },
+        "Table": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Table"
+        },
+        "Tabs": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Tabs"
+        },
+        "Tooltip": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Tooltip"
+        },
+        "Drawer": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Drawer"
+        },
+        "Switch": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Switch"
+        },
+        "Checkbox": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Checkbox"
+        },
+        "Radio": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "RadioGroupItem"
+        },
+        "RadioGroup": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "RadioGroup"
+        },
+        "Label": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Label"
+        },
+        "FormLabel": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Label"
+        },
+        "Sheet": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Sheet"
+        },
+        "Skeleton": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Skeleton"
+        },
+        "Collapse": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Collapsible"
+        },
+        "Collapsible": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Collapsible"
+        },
+        "Accordion": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Accordion"
+        },
+        "DataTable": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DataTable"
+        },
+        "Progress": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Progress"
+        },
+        "Slider": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Slider"
+        },
+        "Popover": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Popover"
+        },
+        "PopoverTrigger": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "PopoverTrigger"
+        },
+        "PopoverContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "PopoverContent"
+        },
+        "PopoverAnchor": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "PopoverAnchor"
+        },
+        "ModalOverlay": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogOverlay"
+        },
+        "ModalContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogContent"
+        },
+        "ModalHeader": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogHeader"
+        },
+        "ModalFooter": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogFooter"
+        },
+        "ModalBody": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DialogContent"
+        },
+        "DrawerOverlay": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerOverlay"
+        },
+        "DrawerContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerContent"
+        },
+        "DrawerHeader": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerHeader"
+        },
+        "DrawerFooter": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerFooter"
+        },
+        "DrawerCloseButton": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DrawerClose"
+        },
+        "AccordionItem": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AccordionItem"
+        },
+        "AccordionButton": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AccordionTrigger"
+        },
+        "AccordionPanel": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AccordionContent"
+        },
+        "Alert": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Alert"
+        },
+        "AlertTitle": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertTitle"
+        },
+        "AlertDescription": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDescription"
+        },
+        "AlertDialog": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialog"
+        },
+        "AlertDialogOverlay": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogOverlay"
+        },
+        "AlertDialogContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogContent"
+        },
+        "AlertDialogHeader": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogHeader"
+        },
+        "AlertDialogFooter": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogFooter"
+        },
+        "AlertDialogBody": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AlertDialogContent"
+        },
+        "Avatar": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Avatar"
+        },
+        "AvatarImage": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AvatarImage"
+        },
+        "AvatarFallback": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "AvatarFallback"
+        },
+        "Breadcrumb": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Breadcrumb"
+        },
+        "BreadcrumbItem": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "BreadcrumbItem"
+        },
+        "BreadcrumbLink": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "BreadcrumbLink"
+        },
+        "Calendar": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Calendar"
+        },
+        "Card": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Card"
+        },
+        "CardHeader": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "CardHeader"
+        },
+        "CardBody": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "CardContent"
+        },
+        "CardFooter": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "CardFooter"
+        },
+        "Separator": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Separator"
+        },
+        "Divider": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Separator"
+        },
+        "Textarea": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Textarea"
+        },
+        "Toast": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Toaster"
+        },
+        "DateRangePicker": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DateRangePicker"
+        },
+        "Form": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Form"
+        },
+        "FormField": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "FormField"
+        },
+        "FormItem": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "FormItem"
+        },
+        "FormControl": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "FormControl"
+        },
+        "FormDescription": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "FormDescription"
+        },
+        "FormMessage": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "FormMessage"
+        },
+        "ChartContainer": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartContainer"
+        },
+        "ChartTooltip": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartTooltip"
+        },
+        "ChartTooltipContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartTooltipContent"
+        },
+        "ChartLegend": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartLegend"
+        },
+        "ChartLegendContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartLegendContent"
+        },
+        "ChartStyle": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "ChartStyle"
+        },
+        "Dropzone": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "Dropzone"
+        },
+        "DropzoneContent": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DropzoneContent"
+        },
+        "DropzoneEmptyState": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "DropzoneEmptyState"
+        },
+        "SearchInput": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "SearchInput"
+        },
+        "LabeledSlider": {
+          "module": "@machinemetrics/mm-react-components",
+          "import": "LabeledSlider"
+        }
+      },
+      "compoundComponents": {
+        "Alert.Root": { "tag": "div", "class": "rounded-md border p-4" },
+        "Alert.Indicator": { "remove": true },
+        "Alert.Content": { "tag": "div", "class": "flex-1" },
+        "Alert.Title": { "tag": "h5", "class": "font-medium mb-1" },
+        "Alert.Description": { "tag": "div", "class": "text-sm" },
+        "Modal": { "component": "Dialog" },
+        "Dialog.Root": { "component": "Dialog" },
+        "Dialog.Backdrop": { "remove": true },
+        "Dialog.Positioner": { "unwrap": true },
+        "Dialog.Content": { "component": "DialogContent" },
+        "Dialog.Header": { "component": "DialogHeader" },
+        "Dialog.Title": { "component": "DialogTitle" },
+        "Dialog.Description": { "component": "DialogDescription" },
+        "Dialog.Body": { "unwrap": true },
+        "Dialog.Footer": { "component": "DialogFooter" },
+        "Dialog.CloseTrigger": { "component": "DialogClose" },
+        "Drawer.Root": { "component": "Drawer" },
+        "Drawer.Trigger": { "component": "DrawerTrigger" },
+        "Drawer.CloseTrigger": { "component": "DrawerClose" },
+        "Drawer.Portal": { "component": "DrawerPortal" },
+        "Drawer.Overlay": { "component": "DrawerOverlay" },
+        "Drawer.Content": { "component": "DrawerContent" },
+        "Drawer.Header": { "component": "DrawerHeader" },
+        "Drawer.Footer": { "component": "DrawerFooter" },
+        "Drawer.Title": { "component": "DrawerTitle" },
+        "Drawer.Description": { "component": "DrawerDescription" },
+        "Drawer.Handle": { "component": "DrawerHandle" },
+        "Collapse": { "component": "Collapsible" },
+        "Accordion.Root": { "component": "Accordion" },
+        "Accordion.Item": { "component": "AccordionItem" },
+        "Accordion.Trigger": { "component": "AccordionTrigger" },
+        "Accordion.Content": { "component": "AccordionContent" },
+        "Tabs.Root": { "component": "Tabs" },
+        "Tabs.List": { "component": "TabsList" },
+        "Tabs.Trigger": { "component": "TabsTrigger" },
+        "Tabs.Content": { "component": "TabsContent" },
+        "Tabs.Indicator": { "remove": true },
+        "Table.Root": { "component": "Table" },
+        "Table.Header": { "component": "TableHeader" },
+        "Table.Body": { "component": "TableBody" },
+        "Table.Row": { "component": "TableRow" },
+        "Table.ColumnHeader": { "component": "TableHead" },
+        "Table.Cell": { "component": "TableCell" },
+        "Table.Footer": { "component": "TableFooter" },
+        "Menu.Root": { "component": "DropdownMenu" },
+        "Menu.Trigger": { "component": "DropdownMenuTrigger" },
+        "Menu.Content": { "component": "DropdownMenuContent" },
+        "Menu.Item": { "component": "DropdownMenuItem" },
+        "Menu.Separator": { "component": "DropdownMenuSeparator" },
+        "Menu.ItemGroup": { "unwrap": true },
+        "Menu.ItemGroupLabel": { "component": "DropdownMenuLabel" },
+        "Popover.Root": { "component": "Popover" },
+        "Popover.Trigger": { "component": "PopoverTrigger" },
+        "Popover.Content": { "component": "PopoverContent" },
+        "Popover.Anchor": { "component": "PopoverAnchor" },
+        "AlertDialog.Root": { "component": "AlertDialog" },
+        "AlertDialog.Trigger": { "component": "AlertDialogTrigger" },
+        "AlertDialog.Content": { "component": "AlertDialogContent" },
+        "AlertDialog.Header": { "component": "AlertDialogHeader" },
+        "AlertDialog.Footer": { "component": "AlertDialogFooter" },
+        "AlertDialog.Title": { "component": "AlertDialogTitle" },
+        "AlertDialog.Description": { "component": "AlertDialogDescription" },
+        "AlertDialog.Action": { "component": "AlertDialogAction" },
+        "AlertDialog.Cancel": { "component": "AlertDialogCancel" },
+        "AlertDialog.Overlay": { "component": "AlertDialogOverlay" },
+        "AlertDialog.Portal": { "component": "AlertDialogPortal" },
+        "Avatar.Root": { "component": "Avatar" },
+        "Avatar.Image": { "component": "AvatarImage" },
+        "Avatar.Fallback": { "component": "AvatarFallback" },
+        "Breadcrumb.Root": { "component": "Breadcrumb" },
+        "Breadcrumb.List": { "component": "BreadcrumbList" },
+        "Breadcrumb.Item": { "component": "BreadcrumbItem" },
+        "Breadcrumb.Link": { "component": "BreadcrumbLink" },
+        "Breadcrumb.Page": { "component": "BreadcrumbPage" },
+        "Breadcrumb.Separator": { "component": "BreadcrumbSeparator" },
+        "Breadcrumb.Ellipsis": { "component": "BreadcrumbEllipsis" },
+        "Card.Root": { "component": "Card" },
+        "Card.Header": { "component": "CardHeader" },
+        "Card.Title": { "component": "CardTitle" },
+        "Card.Description": { "component": "CardDescription" },
+        "Card.Content": { "component": "CardContent" },
+        "Card.Footer": { "component": "CardFooter" },
+        "Form.Root": { "component": "Form" },
+        "Form.Field": { "component": "FormField" },
+        "Form.Item": { "component": "FormItem" },
+        "Form.Label": { "component": "FormLabel" },
+        "Form.Control": { "component": "FormControl" },
+        "Form.Description": { "component": "FormDescription" },
+        "Form.Message": { "component": "FormMessage" }
+      }
+    },
+    "@chakra-ui/icons": {
+      "default": {
+        "module": "lucide-react"
+      }
+    }
+  },
+  "postSteps": [
+    "Run npm install to install @machinemetrics/mm-react-components and lucide-react.",
+    "MIGRATION NOTES:",
+    "  - ChakraProvider has been removed - no provider needed with mm-react-components",
+    "  - Chakra Icon components replaced with lucide-react icons",
+    "  - useDisclosure hook replaced with useState(false)",
+    "  - Spinner → div with animation or lucide-react Loader2 icon",
+    "  - NumberInput → input type='number'",
+    "  - NativeSelect → select element",
+    "  - Field → div wrapper (or use FormItem from mm-react-components)",
+    "MANUAL MIGRATION REQUIRED for layout/typography components:",
+    "  - Layout: Box, Flex, VStack, HStack, Stack, Container, Center, SimpleGrid → use div with Tailwind classes",
+    "  - Typography: Heading, Text → use semantic HTML (h1-h6, p, span) with Tailwind classes",
+    "  - IconButton → Button component with icon variant or button element",
+    "See the manualMigrationComponents section in the config for specific replacement instructions.",
+    "Test all migrated components to ensure proper styling and functionality.",
+    "Run npm run lint && npm run test to verify the migration.",
+    "💡 Zero-config reminder: No Tailwind setup needed - everything is pre-compiled!"
+  ]
+}

package/dist/scripts/chakra-to-shadcn-migrator/lib/args.js

@@ -0,0 +1,63 @@
+import process from 'process';
+import { colorize } from './colors.js';
+
+export function parseArgs(argv) {
+  const args = { project: '.', apply: false, includeTests: false, source: [] };
+  const tokens = [...argv];
+  while (tokens.length) {
+    const token = tokens.shift();
+    switch (token) {
+      case '--project':
+      case '-p':
+        args.project = tokens.shift() ?? args.project;
+        break;
+      case '--config':
+      case '-c':
+        args.config = tokens.shift();
+        break;
+      case '--apply':
+        args.apply = true;
+        break;
+      case '--include-tests':
+        args.includeTests = true;
+        break;
+      case '--source': {
+        const next = tokens.shift();
+        if (!next) {
+          throw new Error(
+            '--source requires a comma separated list of directories or glob patterns.',
+          );
+        }
+        args.source = next
+          .split(',')
+          .map((segment) => segment.trim())
+          .filter(Boolean);
+        break;
+      }
+      case '--help':
+      case '-h':
+        printHelp();
+        process.exit(0);
+        break;
+      default:
+        if (token.startsWith('--')) {
+          console.warn(colorize(`Warning: unknown option ${token}`, 'yellow'));
+        }
+        break;
+    }
+  }
+  return args;
+}
+
+export function printHelp() {
+  console.log(
+    `chakra-to-shadcn [options]\n\n` +
+      `Options:\n` +
+      `  -p, --project <path>    Project root (defaults to current directory)\n` +
+      `  -c, --config <path>     Path to chakra-to-shadcn.config.json\n` +
+      `      --apply            Apply safe automated edits\n` +
+      `      --include-tests    Include __tests__/ and *.test.* files while scanning\n` +
+      `      --source <globs>   Comma separated list of folders/globs to scan\n` +
+      `  -h, --help             Show this message\n`,
+  );
+}

package/dist/scripts/chakra-to-shadcn-migrator/lib/colors.js

@@ -0,0 +1,14 @@
+export const colors = {
+  reset: '\u001b[0m',
+  cyan: '\u001b[36m',
+  green: '\u001b[32m',
+  yellow: '\u001b[33m',
+  red: '\u001b[31m',
+  bold: '\u001b[1m',
+  gray: '\u001b[90m',
+};
+
+export const colorize = (value, color) =>
+  `${colors[color] ?? ''}${value}${colors.reset}`;
+
+export const bold = (value) => `${colors.bold}${value}${colors.reset}`;

package/dist/scripts/chakra-to-shadcn-migrator/lib/config.js

@@ -0,0 +1,15 @@
+import fs from 'fs';
+import path from 'path';
+
+export function resolveConfig(projectRoot, override) {
+  if (override) {
+    const explicit = path.resolve(process.cwd(), override);
+    return fs.existsSync(explicit) ? explicit : undefined;
+  }
+  const defaultPath = path.join(projectRoot, 'chakra-to-shadcn.config.json');
+  return fs.existsSync(defaultPath) ? defaultPath : undefined;
+}
+
+export function loadJson(file) {
+  return JSON.parse(fs.readFileSync(file, 'utf8'));
+}