@spaced-out/ui-design-system 0.5.18 → 0.5.19

package/lib/components/TemplateCard/TemplateCard.module.css

@@ -0,0 +1,170 @@
+@value (
+  colorBorderPrimary,
+  colorBackgroundTertiary,
+  colorNeutralLightest,
+  colorNeutral,
+  colorInformationLightest,
+  colorInformation,
+  colorSuccessLightest,
+  colorSuccess,
+  colorDangerLightest,
+  colorDanger,
+  colorWarningLightest,
+  colorWarning
+) from '../../styles/variables/_color.css';
+
+@value (
+  size58,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceSmall,
+  spaceMedium,
+  spaceLarge
+) from '../../styles/variables/_space.css';
+
+@value (
+  borderRadiusSmall,
+  borderRadiusCircle,
+  borderWidthPrimary,
+  borderWidthSecondary
+) from '../../styles/variables/_border.css';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: sizeFluid;
+  background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusSmall;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  overflow: hidden;
+}
+
+.header {
+  position: relative;
+  width: sizeFluid;
+  height: 49px;
+  display: flex;
+  align-items: flex-start;
+}
+
+/* Header background colors for each state */
+.header.neutral {
+  background-color: colorNeutralLightest;
+}
+
+.header.information {
+  background-color: colorInformationLightest;
+}
+
+.header.success {
+  background-color: colorSuccessLightest;
+}
+
+.header.warning {
+  background-color: colorWarningLightest;
+}
+
+.header.error {
+  background-color: colorDangerLightest;
+}
+
+.header.pending {
+  background-color: colorWarningLightest;
+}
+
+.iconContainer {
+  position: absolute;
+  left: spaceSmall;
+  top: spaceSmall;
+  width: size58;
+  height: size58;
+  min-width: size58;
+  min-height: size58;
+  border-radius: borderRadiusCircle;
+  border: borderWidthSecondary solid colorBackgroundTertiary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Icon container background colors for each state */
+.iconContainer.neutral {
+  background-color: colorNeutralLightest;
+}
+
+.iconContainer.information {
+  background-color: colorInformationLightest;
+}
+
+.iconContainer.success {
+  background-color: colorSuccessLightest;
+}
+
+.iconContainer.warning {
+  background-color: colorWarningLightest;
+}
+
+.iconContainer.error {
+  background-color: colorDangerLightest;
+}
+
+.iconContainer.pending {
+  background-color: colorWarningLightest;
+}
+
+/* Icon colors using descendant selectors */
+.iconContainer .neutral {
+  color: colorNeutral;
+}
+
+.iconContainer .information {
+  color: colorInformation;
+}
+
+.iconContainer .success {
+  color: colorSuccess;
+}
+
+.iconContainer .warning {
+  color: colorWarning;
+}
+
+.iconContainer .error {
+  color: colorDanger;
+}
+
+.iconContainer .pending {
+  color: colorWarning;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  background-color: colorBackgroundTertiary;
+  padding: spaceSmall spaceMedium;
+  padding-top: spaceLarge;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  background-color: colorBackgroundTertiary;
+  padding: spaceSmall spaceMedium;
+  padding-top: 0;
+  gap: spaceSmall;
+}
+
+.footerSeparator {
+  width: sizeFluid;
+  height: 0;
+  composes: borderTopPrimary from '../../styles/border.module.css';
+}
+
+.footerContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: sizeFluid;
+}

package/lib/components/TemplateCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../components/TemplateCard/TemplateCard';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/TemplateCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TemplateCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}

package/lib/components/TemplateCard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TemplateCard = require("./TemplateCard");
+Object.keys(_TemplateCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TemplateCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TemplateCard[key];
+    }
+  });
+});

package/lib/components/index.d.ts

@@ -63,6 +63,7 @@ export * from '../components/StickyBar';
 export * from '../components/SubMenu';
 export * from '../components/Table';
 export * from '../components/Tabs';
+export * from '../components/TemplateCard';
 export * from '../components/Text';
 export * from '../components/Textarea';
 export * from '../components/TextTile';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mDAAmD,CAAC;AAClE,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mDAAmD,CAAC;AAClE,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}

package/lib/components/index.js

@@ -718,6 +718,17 @@ Object.keys(_Tabs).forEach(function (key) {
     }
   });
 });
+var _TemplateCard = require("./TemplateCard");
+Object.keys(_TemplateCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TemplateCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TemplateCard[key];
+    }
+  });
+});
 var _Text = require("./Text");
 Object.keys(_Text).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/mcp/README.md

@@ -0,0 +1,306 @@
+# Genesis UI Design System MCP Server
+
+A Model Context Protocol (MCP) server that provides AI assistants (Claude, Cursor, etc.) with access to the Genesis UI Design System.
+
+## ✨ Features
+
+- 📦 **Component Discovery**: List and search all available components
+- 🎨 **Design Tokens**: Access colors, spacing, typography, shadows, and more
+- 📚 **Documentation**: Browse component stories and TypeScript definitions
+- 🔍 **Dependency Analysis**: Understand component dependencies
+- 🚀 **Onboarding Templates**: Get starter templates for new components
+- 🪝 **Hooks Information**: Query available React hooks
+
+## 🎯 No Local Dependencies Required!
+
+Unlike traditional MCP servers that require a local copy of the design system, this server **bundles all data at build time**. Users only need to run `npx` - no cloning, no environment variables!
+
+## 📦 Installation for Users
+
+### With Cursor
+
+Add to your Cursor MCP settings:
+
+```json
+{
+  "mcpServers": {
+    "genesis-design-system": {
+      "command": "npx",
+      "args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
+    }
+  }
+}
+```
+
+### With Claude Desktop
+
+Add to your Claude config file:
+
+**macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`  
+**Windows**: `%APPDATA%\Claude\claude_desktop_config.json`  
+**Linux**: `~/.config/Claude/claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "genesis-design-system": {
+      "command": "npx",
+      "args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
+    }
+  }
+}
+```
+
+Then restart Cursor or Claude Desktop.
+
+## 💬 Usage Examples
+
+Once configured, you can ask:
+
+**Component Discovery:**
+
+```
+"List all components in Genesis"
+"Search for dropdown components"
+"Show me the Button component implementation"
+"What types does the Icon component export?"
+"Show me the Icon component with its exported types"
+```
+
+**Design Tokens:**
+
+```
+"Show me all color tokens"
+"What spacing tokens are available?"
+"List all shadow/elevation tokens"
+```
+
+**Component Onboarding:**
+
+```
+"I want to create a new Toast component, show me the template"
+"Help me onboard an Alert component"
+"What's the standard structure for a Genesis component?"
+```
+
+**Design Token Imports:**
+
+```
+"How do I import design tokens in CSS Module files?"
+"Show me the correct way to import color and spacing tokens"
+"What token files are available and how do I import them?"
+```
+
+**CSS Module Guidelines:**
+
+```
+"Show me CSS Module styling guidelines for Genesis"
+"What are the class naming conventions for CSS Modules?"
+"How should I style child elements in CSS Modules?"
+"What's the correct pattern for state-based styling in CSS?"
+"Show me common CSS mistakes to avoid"
+"How do I apply colors to child elements like text, icons, or buttons?"
+```
+
+**Dependencies:**
+
+```
+"What components does Modal depend on?"
+"Show me the dependencies of Dropdown"
+"What hooks does the Table component use?"
+```
+
+## 🔧 Development
+
+### Building the Data
+
+This server extracts design system metadata at build time. To build:
+
+```bash
+# Install dependencies
+yarn install
+
+# Build the data bundle
+yarn build
+```
+
+This creates `data/design-system.json` with all component, hook, and token information.
+
+### Testing Locally
+
+```bash
+# After building, test the server
+node index.js
+```
+
+Or test with MCP Inspector:
+
+```bash
+npx @modelcontextprotocol/inspector node index.js
+```
+
+### Publishing
+
+```bash
+# The prepublishOnly script runs yarn build automatically
+yarn publish
+```
+
+## 📊 How It Works
+
+### Build Time (CI/CD)
+
+1. `build-mcp-data.js` scans the design system:
+
+   - Reads all components from `src/components/`
+   - Reads all hooks from `src/hooks/`
+   - Reads all design tokens from `design-tokens/`
+
+2. Extracts file contents and metadata
+
+3. Bundles everything into `data/design-system.json`
+
+4. Package is published to npm with bundled data
+
+### Runtime (User's Machine)
+
+1. User runs `npx @spaced-out/genesis-mcp-server`
+
+2. Server loads pre-bundled `data/design-system.json`
+
+3. Serves data via MCP protocol (stdio)
+
+4. AI assistant queries the server for design system info
+
+**Result:** No local design system needed! ✨
+
+## 🏗️ Architecture
+
+```
+ui-design-system/
+├── src/
+│   ├── components/          # Source components
+│   └── hooks/               # Source hooks
+├── design-tokens/           # Source tokens
+└── mcp/                     # 👈 MCP Server
+    ├── index.js             # MCP server (reads from data/)
+    ├── build-mcp-data.js    # Build script (extracts from ../)
+    ├── data/
+    │   └── design-system.json  # Bundled data (git-ignored)
+    ├── package.json
+    └── README.md
+```
+
+## 📝 Available Tools
+
+The MCP server provides these tools to AI assistants:
+
+- `list_components` - List all available components
+- `get_component` - Get detailed component information **including exported types** (e.g., IconType, IconSize from Icon component)
+- `search_components` - Search components by name
+- `list_hooks` - List all available hooks
+- `get_hook` - Get detailed hook information
+- `get_design_tokens` - Get all or filtered design tokens
+- `get_component_template` - Get template for new components
+- `get_design_token_import_guidelines` - Get guidelines for importing design tokens in CSS Module files with correct paths and examples
+- `get_css_module_guidelines` - **NEW!** Get comprehensive CSS Module styling guidelines including class naming conventions (BEM patterns), token usage, icon color patterns, and common mistakes to avoid
+- `analyze_component_dependencies` - Analyze component dependencies
+
+## 🔄 CI/CD Integration
+
+### Automatic Publishing
+
+The MCP server is automatically published to npm via GitHub Actions (`.github/workflows/publish-mcp.yml`).
+
+**Triggers:**
+
+- Push to `master` branch when files change in:
+  - `src/**` (component/hook changes)
+  - `design-tokens/**` (token changes)
+  - `mcp/**` (MCP server changes)
+- Manual workflow dispatch
+
+**Process:**
+
+1. **Auto-version bump**: If `src/` or `design-tokens/` changed, automatically bumps patch version
+2. **Build**: Generates fresh MCP data bundle with latest design system changes
+3. **Commit**: Pushes version bump back to master (with `[skip ci]` to avoid loops)
+4. **Publish**: Publishes new version to npm
+
+**What this means for you:**
+
+✅ Update a component → Merge to master → New MCP version automatically published!
+
+No need to manually bump versions when changing design system files. The workflow handles it for you.
+
+### Version Management
+
+**Automatic (recommended):**
+
+- Changes to `src/` or `design-tokens/` → patch version bumped automatically
+- E.g., `1.0.5` → `1.0.6`
+
+**Manual (for major/minor releases):**
+
+```bash
+cd mcp
+yarn version --minor  # or --major
+git push --follow-tags
+```
+
+**Manual MCP-only changes:**
+
+- If you only change files in `mcp/`, manually bump the version to publish
+
+## 📈 Data Size
+
+The bundled JSON includes:
+
+- Full TypeScript component implementations
+- Storybook stories
+- CSS modules
+- Design tokens
+- Hook implementations
+
+Typical size: 5-15 MB (cached by npm, so only downloaded once)
+
+## 🔐 Private Packages
+
+If publishing to a private npm registry:
+
+```json
+{
+  "publishConfig": {
+    "registry": "https://your-private-registry.com"
+  }
+}
+```
+
+Users configure their registry:
+
+```bash
+npm config set @spaced-out:registry https://your-private-registry.com
+# or with yarn
+yarn config set registry https://your-private-registry.com
+```
+
+## 🤝 Contributing
+
+When updating the design system:
+
+1. Changes to components/hooks/tokens are automatically detected
+2. CI/CD runs `npm run build` to regenerate data
+3. New version is published to npm
+4. Users get updates on next `npx` run (or immediately with `@latest`)
+
+## 📚 Additional Resources
+
+- [MCP Documentation](https://modelcontextprotocol.io)
+
+## 📄 License
+
+UNLICENSED - Internal use only
+
+---
+
+**Built with ❤️ by the Central UI team**