@tanishraj/ui-kit 1.0.3

package/readme.md

@@ -0,0 +1,238 @@
+# @tanishraj/ui-kit
+
+## About
+
+@tanishraj/ui-kit is an industry-style React component library with built-in tooling for publishing, documentation, and testing.
+
+## Features
+
+- **Vite** - Fast bundling and development
+- **React & TypeScript** - Strict type safety for better development
+- **Tailwind CSS** - Utility-first styling approach
+- **Tailwind Merge & CVA** - Class name manipulation
+- **CLSX** - Conditional class name handling
+- **ESLint & Prettier** - Code linting and formatting
+- **Vitest & React Testing Library** - Unit testing setup
+- **Storybook** - Interactive documentation for components
+
+## Getting Started
+
+### Installation
+
+Clone the repository and install dependencies:
+
+```sh
+git clone https://github.com/tanishraj/ui-kit.git
+cd ui-kit
+npm install
+```
+
+### Running Storybook
+
+To start Storybook for interactive component documentation:
+
+```sh
+npm run storybook
+```
+
+## Automated UI Component Generation
+
+You can now generate a new component from a Figma node and existing local code patterns:
+
+```sh
+npm run generate:component -- \
+  --name MyNewComponent \
+  --figma-url "https://www.figma.com/file/<FILE_KEY>/<NAME>?node-id=<NODE_ID>" \
+  --openai-key "$OPENAI_API_KEY" \
+  --figma-token "$FIGMA_API_TOKEN" \
+  --stories \
+  --tests
+```
+
+Alternative arguments:
+
+- `--figma-file-key` and `--node-id` if you prefer separate args.
+- `--skip-ai` to only scaffold fallback files without OpenAI.
+- `--pattern-limit` to control how many local component examples are used.
+- `--overwrite` to replace existing files.
+
+Required environment variables:
+
+- `OPENAI_API_KEY`
+- `FIGMA_API_TOKEN`
+
+### GitHub Actions (Manual trigger)
+
+There is a workflow at [.github/workflows/generate-ui-component.yml](.github/workflows/generate-ui-component.yml) that can generate components and open a PR for review.
+
+Dispatch inputs:
+
+- `component_name`: component name.
+- `figma_url`: full Figma URL containing `node-id`.
+- `stories`: generate story file.
+- `tests`: generate test file.
+- `overwrite`: overwrite existing files.
+- `pattern_limit`: how many existing components to include in AI context.
+- `skip_ai`: scaffold fallback only.
+
+Set repository secrets:
+
+- `OPENAI_API_KEY`
+- `FIGMA_API_TOKEN`
+
+### VS Code / Codex MCP setup (Figma)
+
+This repository includes a workspace MCP config at [.vscode/mcp.json](.vscode/mcp.json) for Figma.
+
+If you're using Codex in VS Code (GitHub Copilot Agent mode), ensure:
+
+- GitHub Copilot is enabled.
+- Agent mode is turned on.
+- Figma authentication completes in the MCP prompt flow.
+
+The configured server is:
+
+- `https://mcp.figma.com/mcp`
+
+If the server does not appear, restart VS Code and reopen Copilot Chat in Agent mode, then check MCP tools.
+
+### Cleanup temporary generated components
+
+Use cleanup after local smoke tests so temporary components are not committed:
+
+```sh
+npm run cleanup:component -- --prefix AutoGenerated --force
+```
+
+Preview only (no delete):
+
+```sh
+npm run cleanup:component -- --prefix AutoGenerated --dry-run
+```
+
+You can also target a specific component:
+
+```sh
+npm run cleanup:component -- --name AutoGeneratedSmoke --force
+```
+
+### Building the Library
+
+Build the component library for distribution:
+
+```sh
+npm run build
+```
+ 
+> Note:
+> `vite build` may print non-blocking warnings:
+> - `Unknown at rule: @theme`
+> - `Unknown at rule: @utility`
+>
+> These are expected with the current Tailwind CSS v4 setup and do not fail the build.
+
+### Running Tests
+
+Run unit tests with Vitest:
+
+```sh
+npm test
+```
+
+To watch tests:
+
+```sh
+npm run test:watch
+```
+
+### Linting & Formatting
+
+Lint and format code using ESLint and Prettier:
+
+```sh
+npm run lint
+npm run format
+```
+
+### Cleaning the Project
+
+To remove generated files:
+
+```sh
+npm run clean
+```
+
+## Folder Structure
+
+```
+├── src/                # Component source code
+│   ├── components/     # React components
+│   ├── hooks/         # Custom hooks (if any)
+│   ├── utils/         # Utility functions
+│   ├── index.ts       # Library entry point
+├── .storybook/         # Storybook configuration
+├── tests/             # Unit tests
+├── dist/              # Compiled library output
+├── package.json       # Project metadata and scripts
+└── README.md          # Documentation
+```
+
+## Publishing / Deployment to NPM
+
+This project ships with an automated GitHub Actions publish pipeline at:
+
+- [`.github/workflows/npm-publish.yml`](.github/workflows/npm-publish.yml)
+- [release.md](release.md)
+
+The workflow runs:
+
+1. `npm run lint`
+2. `npm run type-check`
+3. `npm run test -- --run`
+4. `npm run build`
+5. `npm publish` with the correct dist-tag
+
+### Required setup
+
+Add this repository secret in GitHub:
+
+- `NPM_TOKEN` (npm automation token with publish permissions)
+
+### Deployment flow (recommended)
+
+1. Update version locally:
+
+```sh
+npm version patch   # or minor / major
+```
+
+2. Push commit and tag:
+
+```sh
+git push
+git push --tags
+```
+
+3. GitHub Actions triggers on `v*` tags and publishes automatically.
+
+### Manual deployment
+
+From the Actions tab, run the **Publish to npm** workflow manually.
+
+- Optionally pass `distTag` (`latest`, `next`, `beta`, `canary`, etc.) for manual run.
+- Prerelease tags (like `v1.2.3-beta.0`) auto-publish with `next` by default.
+
+### Optional local publish (bypasses CI)
+
+For quick local validation:
+
+```sh
+npm run build
+npm view @tanishraj/ui-kit version
+```
+
+Use this only when you already handle release checks outside GitHub Actions.
+
+## License
+
+This project is licensed under the MIT License.