mta-design-system 0.1.0

package/README.md

@@ -0,0 +1,198 @@
+# MTA Design System
+
+A comprehensive React component library with multiple brand themes (ClaimMind, Owlexa, BPJS). Built with TypeScript, Tailwind CSS, and Radix UI primitives.
+
+## Installation
+
+```bash
+npm install mta-design-system
+# or
+yarn add mta-design-system
+# or
+pnpm add mta-design-system
+```
+
+## Quick Start
+
+### 1. Import the CSS
+
+```tsx
+import 'mta-design-system/styles.css';
+```
+
+### 2. Import Components
+
+```tsx
+import { Button, Card, Input } from 'mta-design-system';
+
+function App() {
+  return (
+    <Button variant="primary">Click me</Button>
+  );
+}
+```
+
+## CLI Usage
+
+Use the CLI to initialize your project or add individual components (shadcn-style):
+
+```bash
+# Initialize MTA Design System in your project
+npx mta-ds init
+
+# List all available components
+npx mta-ds list
+
+# Show component details
+npx mta-ds show Button
+
+# Add a component to your project (copies source)
+npx mta-ds add Button -o ./src/components/ui
+```
+
+### CLI Commands
+
+| Command | Description |
+|---------|-------------|
+| `init` | Initialize MTA Design System in your project |
+| `list` | List all available components |
+| `show <component>` | Show detailed component information |
+| `add <component>` | Copy component source to your project |
+
+### CLI Options
+
+```bash
+npx mta-ds add <component> [options]
+
+Options:
+  -o, --output <path>    Output directory (default: "./src/components/ui")
+  -t, --theme <theme>    Theme variant (Default, Owlexa, BPJS)
+  --overwrite            Overwrite existing files
+  -a, --alias <alias>    Import alias to use (default: "@/")
+```
+
+## MCP Server (AI Integration)
+
+MTA Design System includes a Model Context Protocol (MCP) server for AI assistants like Claude.
+
+### Using with Claude Desktop
+
+Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
+
+```json
+{
+  "mcpServers": {
+    "mta-design-system": {
+      "command": "npx",
+      "args": ["-y", "mta-design-system", "mcp"]
+    }
+  }
+}
+```
+
+Or using the dedicated MCP binary:
+
+```json
+{
+  "mcpServers": {
+    "mta-design-system": {
+      "command": "npx",
+      "args": ["-y", "mta-mcp"]
+    }
+  }
+}
+```
+
+### Running MCP Directly
+
+```bash
+npx mta-mcp
+```
+
+### MCP Resources
+
+The MCP server provides these resources:
+
+| URI | Description |
+|-----|-------------|
+| `mta://components` | List all components |
+| `mta://components/{name}` | Get component details |
+| `mta://themes` | List all themes |
+| `mta://themes/{name}` | Get theme tokens |
+| `mta://examples` | List all examples |
+| `mta://examples/{name}` | Get component examples |
+
+### MCP Tools
+
+| Tool | Description |
+|------|-------------|
+| `search-components` | Search components by name, description, or props |
+| `get-component-props` | Get TypeScript props interface for a component |
+| `generate-code` | Generate usage code snippet for a component |
+| `get-theme-variables` | Get CSS custom properties for a theme |
+
+## Themes
+
+The design system supports three brand themes:
+
+- **Default** - Base MTA theme
+- **Owlexa** - Owlexa brand colors and styling
+- **BPJS** - BPJS brand colors and styling
+
+### Applying Themes
+
+Wrap your app with the theme provider:
+
+```tsx
+import { ThemeProvider } from 'mta-design-system';
+
+function App() {
+  return (
+    <ThemeProvider theme="Owlexa">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Peer Dependencies
+
+Make sure you have these installed:
+
+```json
+{
+  "react": ">=18.0.0",
+  "react-dom": ">=18.0.0",
+  "next": ">=14.0.0"
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build the library
+npm run build:lib
+
+# Start Storybook
+npm run storybook
+```
+
+## Publishing
+
+```bash
+# Build before publishing
+npm run build:lib
+
+# Publish to npm
+npm publish --access public
+```
+
+## License
+
+MIT © MTA