@machinemetrics/mm-react-components 0.2.3-1 → 0.2.3-11

package/scripts/README.md

@@ -1,171 +0,0 @@
-# Scripts Directory
-
-This directory contains scripts for maintaining shadcn/ui components and visual regression tests.
-
-## Component Creation Script
-
-### Create New Component
-
-```bash
-npm run create-component <component-name>
-```
-
-Creates a new shadcn/ui component with automatic linting, formatting, and preview generation.
-
-**Options:**
-
-- `--skip-preview` - Skip generating preview component
-- `--skip-lint` - Skip running ESLint fixes
-- `--skip-format` - Skip running Prettier formatting
-- `--skip-tests` - Skip generating Playwright tests
-- `--help` - Show help message
-
-**Examples:**
-
-```bash
-npm run create-component card
-npm run create-component dialog --skip-preview
-npm run create-component select --skip-lint --skip-format
-npm run create-component button --skip-tests
-```
-
-**Workflow:**
-
-1. Add component using shadcn CLI
-2. Apply ESLint fixes (unless --skip-lint)
-3. Apply Prettier formatting (unless --skip-format)
-4. Generate preview component (unless --skip-preview)
-5. Generate Playwright tests (unless --skip-tests)
-6. Update main index.ts exports
-
-## Component Update Scripts
-
-### TypeScript Version
-
-```bash
-npm run update-components
-```
-
-### Bash Version
-
-```bash
-npm run update-components:bash
-```
-
-## Visual Test Generation Scripts
-
-### Generate Missing Tests (Default)
-
-```bash
-npm run generate-visual-tests
-```
-
-Only generates tests for components that don't have test files yet. Existing tests are preserved.
-
-### Generate All Tests (Overwrite)
-
-```bash
-npm run generate-visual-tests:overwrite
-```
-
-Regenerates all test files, overwriting existing ones. Useful after template changes or major updates.
-
-## What the Component Update Scripts Do
-
-Both component update scripts will:
-
-1. **Scan** `src/components/ui/` for all installed components
-2. **Filter** out custom components (like `theme-toggle`)
-3. **Update** each remaining component using `npx shadcn@latest add <component> --yes --overwrite`
-4. **Report** a summary of what was updated, skipped, or failed
-
-The scripts automatically discover components from your folder - no need to maintain a hardcoded list!
-
-## What the Visual Test Generation Scripts Do
-
-The visual test generation script will:
-
-1. **Scan** all preview routes in `src/App.tsx` for component previews
-2. **Check** existing test files in `tests/visual/`
-3. **Generate** Playwright test files using TypeScript templates from `scripts/templates/`
-4. **Smart Wait Logic**: Automatically adds table-specific wait conditions for data table components
-5. **Skip or Overwrite**: Either skip existing tests (default) or overwrite them (with `--overwrite`)
-6. **Report** a summary of generated, skipped, and total test files
-
-### Generated Test Types
-
-Each component gets tests for:
-
-- **Main Component Screenshot**: Captures the component in its default state
-- **Mobile Responsive Screenshot**: Tests the component at mobile viewport (375x667)
-
-## Features
-
-### Component Creation Script
-
-- ✅ **Smart Component Detection**: Automatically detects component structure and exports
-- ✅ **Intelligent Preview Generation**: Creates appropriate preview components based on component type
-- ✅ **Special Component Handling**: Custom preview templates for complex components (card, dialog, etc.)
-- ✅ **Automatic Linting**: Applies ESLint fixes after component creation
-- ✅ **Automatic Formatting**: Applies Prettier formatting for consistent code style
-- ✅ **Playwright Test Generation**: Automatically generates visual regression tests
-- ✅ **Export Management**: Automatically updates index.ts with new component exports
-- ✅ **Error Handling**: Comprehensive error handling with detailed progress reporting
-- ✅ **Flexible Options**: Skip any step with command-line flags
-- ✅ **Help Documentation**: Built-in help with usage examples
-
-### Component Update Scripts
-
-- ✅ **Auto-Discovery**: Automatically finds all components in your `ui/` folder
-- ✅ **Smart Filtering**: Skips custom components automatically
-- ✅ **CLI Validation**: Let shadcn CLI determine if components are valid/updatable
-- ✅ **Detailed Progress**: Shows real-time updates and comprehensive summary
-- ✅ **Error Handling**: Reports failures and continues with other components
-- ✅ **Overwrite**: Uses `--overwrite` flag to ensure components are properly updated
-
-### Visual Test Generation Scripts
-
-- ✅ **TypeScript Templates**: Uses proper `.ts` template files for full linting and type-checking
-- ✅ **Smart Generation**: Only generates missing tests by default, preserves existing customizations
-- ✅ **Overwrite Mode**: `--overwrite` flag regenerates all tests when needed
-- ✅ **Dynamic Wait Logic**: Automatically adapts wait conditions for data tables vs regular components
-- ✅ **Mobile Testing**: Includes responsive testing at mobile viewport sizes
-- ✅ **Route Auto-Discovery**: Automatically finds all component preview routes
-
-## Custom Components
-
-Components listed in `CUSTOM_COMPONENTS` will be skipped during updates:
-
-- `theme-toggle` - Custom component, not from shadcn/ui
-
-To add more custom components to skip, edit the `CUSTOM_COMPONENTS` array in either script.
-
-## Requirements
-
-### TypeScript Version
-
-- `tsx` package (included in devDependencies)
-- Node.js
-
-### Bash Version
-
-- Bash shell
-- `npx` command available
-
-## Help
-
-Both scripts support `--help` flag:
-
-```bash
-npm run update-components -- --help
-./scripts/update-components.sh --help
-```
-
-## Troubleshooting
-
-If updates fail:
-
-1. Ensure you have internet connection
-2. Make sure `npx` can access the shadcn CLI
-3. Check that `src/components/ui/` directory exists
-4. Verify you're in the project root directory

package/scripts/chakra-to-shadcn-migrator/README.md

@@ -1,107 +0,0 @@
-# chakra-to-shadcn-migrator
-
-A lightweight command-line helper that generates a step-by-step plan for migrating a React codebase from Chakra UI to a Shadcn-based component library. It can optionally apply safe, mechanical edits (dependency updates and import rewrites) whenever explicit mappings are provided.
-
-## Features
-
-- Prints a deterministic migration checklist that covers dependency changes, provider updates, and per-file component swaps.
-- Detects Chakra imports across the project and maps them to their Shadcn counterparts based on a configuration file.
-- Optional `--apply` flag will rewrite imports and package dependencies when all referenced Chakra components have a mapping.
-- Built to be reusable across applications – provide a new mapping config to reuse the workflow.
-
-## Installation
-
-Until the package is published, you can run it directly from the repository:
-
-```bash
-node ../chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js --project . --config chakra-to-shadcn.config.json
-```
-
-Or add an npm script to your project (see the knowledge-client example below).
-
-## Usage
-
-```bash
-chakra-to-shadcn --project <path-to-project> --config <config-file> [options]
-```
-
-### Options
-
-| Flag | Description |
-| --- | --- |
-| `-p, --project` | Root directory of the application you want to migrate. Defaults to the current working directory. |
-| `-c, --config` | Path to a `chakra-to-shadcn.config.json` file. If omitted, the tool will look for one in the project root. |
-| `--apply` | Apply safe automated edits (dependency updates + import rewrites). Without this flag the tool only prints the migration plan. |
-| `--source` | Comma separated list of directories/glob patterns to scan for Chakra imports (defaults to `src`). |
-| `--include-tests` | Include `__tests__`, `*.test.*`, `*.spec.*`, and `*.stories.*` files when scanning. |
-
-## Configuration format
-
-Place a `chakra-to-shadcn.config.json` file in your project (or supply one via `--config`). The file describes:
-
-- Packages to remove and add in `package.json`.
-- Human-readable provider instructions.
-- Module/Component mappings that tell the tool how to rewrite imports.
-- Post-migration reminders.
-
-```json
-{
-  "dependenciesToRemove": ["@chakra-ui/react", "@chakra-ui/icons"],
-  "dependenciesToAdd": {"@machinemetrics/ui-shadcn": "latest"},
-  "moduleMappings": {
-    "@chakra-ui/react": {
-      "default": { "module": "@machinemetrics/ui-shadcn" },
-      "specifiers": {
-        "Button": { "module": "@machinemetrics/ui-shadcn", "import": "Button" },
-        "Card": { "module": "@machinemetrics/ui-shadcn/card", "import": "Card" }
-      }
-    }
-  },
-  "providerInstructions": [
-    "Replace ChakraProvider with the UiProvider from @machinemetrics/ui-shadcn/providers in src/index.tsx."
-  ],
-  "postSteps": [
-    "Run npm install",
-    "Remove Chakra-specific theme utilities"
-  ]
-}
-```
-
-The `moduleMappings` section lists each Chakra package you wish to replace. For each import specifier the tool either:
-
-- Finds an explicit mapping under `specifiers`, or
-- Falls back to the `default` mapping.
-
-If a Chakra component has no mapping, the tool flags it as a manual follow-up instead of modifying the file.
-
-## Example: knowledge-client
-
-The `knowledge-client/app` project contains a `chakra-to-shadcn.config.json` tailored to its component usage. Add the following npm script to run the migration helper:
-
-```json
-{
-  "scripts": {
-    "migrate:chakra-to-shadcn": "node ../chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js --project . --config chakra-to-shadcn.config.json"
-  }
-}
-```
-
-From inside `knowledge-client/app` run:
-
-```bash
-npm run migrate:chakra-to-shadcn
-```
-
-Run with `--apply` when you are ready for the tool to make the safe edits.
-
-## Suggested workflow
-
-1. Run the tool in dry-run mode to generate the migration plan.
-2. Fix any manual follow-ups noted in the report or extend the configuration with more component mappings.
-3. Re-run with `--apply` to let the tool update dependencies and rewrite the mapped imports.
-4. Replace the Chakra provider/theme setup, copy any required Shadcn utility files, and execute the post-steps listed in the plan.
-5. Execute your usual test suite to verify the migration.
-
-## License
-
-MIT