@spaced-out/ui-design-system 0.5.19 → 0.5.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/lib/components/Checklist/Checklist.d.ts +2 -1
- package/lib/components/Checklist/Checklist.d.ts.map +1 -1
- package/lib/components/Checklist/Checklist.js +4 -3
- package/lib/components/Input/Input.d.ts +2 -0
- package/lib/components/Input/Input.d.ts.map +1 -1
- package/lib/components/Input/Input.js +37 -16
- package/lib/components/Input/Input.module.css +19 -0
- package/mcp/README.md +278 -58
- package/mcp/package.json +1 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.5.21](https://github.com/spaced-out/ui-design-system/compare/v0.5.20...v0.5.21) (2025-11-12)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add figma section to mcp documentation in storybook ([#429](https://github.com/spaced-out/ui-design-system/issues/429)) ([7a45eaf](https://github.com/spaced-out/ui-design-system/commit/7a45eaf4504541009f450b2f43adb169be40c0e7))
|
|
11
|
+
* add mcp documentation to storybook ([#428](https://github.com/spaced-out/ui-design-system/issues/428)) ([4f9af69](https://github.com/spaced-out/ui-design-system/commit/4f9af692a9a110e3b00aab0e17946db52d459e0b))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* hide footer conditionally for checklist component ([#430](https://github.com/spaced-out/ui-design-system/issues/430)) ([2d76761](https://github.com/spaced-out/ui-design-system/commit/2d76761fabceda767300e812787d63cbf1522b17))
|
|
17
|
+
|
|
18
|
+
### [0.5.20](https://github.com/spaced-out/ui-design-system/compare/v0.5.19...v0.5.20) (2025-11-11)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
* non editable prefix text in Input component ([#427](https://github.com/spaced-out/ui-design-system/issues/427)) ([d9b3830](https://github.com/spaced-out/ui-design-system/commit/d9b3830fbef230895f457ecc33b04355707b2654))
|
|
24
|
+
|
|
5
25
|
### [0.5.19](https://github.com/spaced-out/ui-design-system/compare/v0.5.18...v0.5.19) (2025-11-11)
|
|
6
26
|
|
|
7
27
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { ColorTypes } from '../../types/typography';
|
|
3
|
-
import type { IconType } from '../../components/Icon';
|
|
3
|
+
import type { IconSize, IconType } from '../../components/Icon';
|
|
4
4
|
type ClassNames = Readonly<{
|
|
5
5
|
header?: string;
|
|
6
6
|
wrapper?: string;
|
|
@@ -14,6 +14,7 @@ export interface ChecklistItem {
|
|
|
14
14
|
iconLeftName?: string;
|
|
15
15
|
iconLeftType?: IconType;
|
|
16
16
|
iconLeftColor?: ColorTypes;
|
|
17
|
+
iconLeftSize?: IconSize;
|
|
17
18
|
disabled?: boolean;
|
|
18
19
|
rightSlot?: React.ReactNode;
|
|
19
20
|
onExpand?: (item: ChecklistItem) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checklist.d.ts","sourceRoot":"","sources":["../../../src/components/Checklist/Checklist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Checklist.d.ts","sourceRoot":"","sources":["../../../src/components/Checklist/Checklist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAS5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAChC,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC;AAED,MAAM,WAAW,yBAAyB;IACxC,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB,kGAiB/B,CAAC;AAEH,eAAO,MAAM,SAAS,uFAyHrB,CAAC"}
|
|
@@ -113,7 +113,8 @@ const Checklist = exports.Checklist = /*#__PURE__*/React.forwardRef((_ref2, ref)
|
|
|
113
113
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
|
|
114
114
|
name: item.iconLeftName || '',
|
|
115
115
|
type: item.iconLeftType,
|
|
116
|
-
color: item.iconLeftColor || 'tertiary'
|
|
116
|
+
color: item.iconLeftColor || 'tertiary',
|
|
117
|
+
size: item.iconLeftSize || 'small'
|
|
117
118
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMedium, {
|
|
118
119
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
|
|
119
120
|
tooltip: {
|
|
@@ -136,9 +137,9 @@ const Checklist = exports.Checklist = /*#__PURE__*/React.forwardRef((_ref2, ref)
|
|
|
136
137
|
}) : null
|
|
137
138
|
})]
|
|
138
139
|
}))
|
|
139
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardFooter, {
|
|
140
|
+
}), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardFooter, {
|
|
140
141
|
children: footer
|
|
141
|
-
})]
|
|
142
|
+
}) : null]
|
|
142
143
|
})
|
|
143
144
|
})]
|
|
144
145
|
});
|
|
@@ -6,6 +6,7 @@ type ClassNames = Readonly<{
|
|
|
6
6
|
iconLeft?: string;
|
|
7
7
|
iconRight?: string;
|
|
8
8
|
wrapper?: string;
|
|
9
|
+
prefixText?: string;
|
|
9
10
|
}>;
|
|
10
11
|
export declare const EXPONENT_CHARACTER_LIST: string[];
|
|
11
12
|
export declare const INPUT_TYPES: Readonly<{
|
|
@@ -72,6 +73,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
|
|
|
72
73
|
hidePasswordToggleIcon?: boolean;
|
|
73
74
|
testId?: string;
|
|
74
75
|
disableWheelPropagation?: boolean;
|
|
76
|
+
prefix?: string;
|
|
75
77
|
}
|
|
76
78
|
export declare const Input: Flow.AbstractComponent<InputProps, HTMLInputElement>;
|
|
77
79
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.Input = exports.INPUT_TYPES = exports.EXPONENT_CHARACTER_LIST = void 0;
|
|
7
7
|
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
|
|
8
9
|
var _classify = require("../../utils/classify");
|
|
9
10
|
var _qa = require("../../utils/qa");
|
|
11
|
+
var _ConditionalWrapper = require("../ConditionalWrapper");
|
|
10
12
|
var _Icon = require("../Icon");
|
|
11
13
|
var _Text = require("../Text");
|
|
12
14
|
var _InputModule = _interopRequireDefault(require("./Input.module.css"));
|
|
@@ -61,6 +63,7 @@ const Input_ = (props, ref) => {
|
|
|
61
63
|
hidePasswordToggleIcon,
|
|
62
64
|
disableWheelPropagation = false,
|
|
63
65
|
testId,
|
|
66
|
+
prefix,
|
|
64
67
|
...inputProps
|
|
65
68
|
} = props;
|
|
66
69
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
@@ -159,23 +162,41 @@ const Input_ = (props, ref) => {
|
|
|
159
162
|
color: disabled ? 'disabled' : 'secondary',
|
|
160
163
|
size: "small",
|
|
161
164
|
type: iconLeftType
|
|
162
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
165
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
|
|
166
|
+
condition: !(0, _isEmpty.default)(prefix),
|
|
167
|
+
wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
168
|
+
className: _InputModule.default.prefixContainer,
|
|
169
|
+
"data-testid": (0, _qa.generateTestId)({
|
|
170
|
+
base: testId,
|
|
171
|
+
slot: 'prefixContainer'
|
|
172
|
+
}),
|
|
173
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
174
|
+
className: (0, _classify.classify)(_InputModule.default.prefixText, classNames?.prefixText),
|
|
175
|
+
"data-testid": (0, _qa.generateTestId)({
|
|
176
|
+
base: testId,
|
|
177
|
+
slot: 'prefixText'
|
|
178
|
+
}),
|
|
179
|
+
children: prefix
|
|
180
|
+
}), children]
|
|
167
181
|
}),
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
182
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
183
|
+
...inputProps,
|
|
184
|
+
"data-testid": (0, _qa.generateTestId)({
|
|
185
|
+
base: testId,
|
|
186
|
+
slot: 'input'
|
|
187
|
+
}),
|
|
188
|
+
disabled: locked || disabled,
|
|
189
|
+
name: name,
|
|
190
|
+
ref: inputRef,
|
|
191
|
+
placeholder: placeholder,
|
|
192
|
+
value: value,
|
|
193
|
+
onChange: onChange,
|
|
194
|
+
onFocus: onFocus,
|
|
195
|
+
onBlur: onBlur,
|
|
196
|
+
type: showPassword ? 'text' : type,
|
|
197
|
+
readOnly: readOnly,
|
|
198
|
+
onKeyDown: handleKeyDown
|
|
199
|
+
})
|
|
179
200
|
}), type === 'color' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
180
201
|
"data-testid": (0, _qa.generateTestId)({
|
|
181
202
|
base: testId,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@value (
|
|
2
|
+
size2,
|
|
2
3
|
size18,
|
|
3
4
|
size42,
|
|
4
5
|
size30,
|
|
@@ -184,3 +185,21 @@ input::placeholder {
|
|
|
184
185
|
appearance: textfield;
|
|
185
186
|
-moz-appearance: textfield;
|
|
186
187
|
}
|
|
188
|
+
|
|
189
|
+
.prefixContainer {
|
|
190
|
+
display: flex;
|
|
191
|
+
width: sizeFluid;
|
|
192
|
+
cursor: inherit;
|
|
193
|
+
padding-left: size2;
|
|
194
|
+
overflow-y: auto;
|
|
195
|
+
|
|
196
|
+
& .prefixText {
|
|
197
|
+
color: colorTextTertiary;
|
|
198
|
+
white-space: nowrap;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
& input {
|
|
202
|
+
padding-left: spaceNone;
|
|
203
|
+
min-width: size18;
|
|
204
|
+
}
|
|
205
|
+
}
|
package/mcp/README.md
CHANGED
|
@@ -19,96 +19,73 @@ Unlike traditional MCP servers that require a local copy of the design system, t
|
|
|
19
19
|
|
|
20
20
|
### With Cursor
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
⚠️ **macOS Users**: Cursor may not find `npx` in its PATH. Use the full path instead.
|
|
23
|
+
|
|
24
|
+
1. Find your `npx` path in terminal:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
which npx
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
2. Add to your Cursor MCP settings with the **full path**:
|
|
23
31
|
|
|
24
32
|
```json
|
|
25
33
|
{
|
|
26
34
|
"mcpServers": {
|
|
27
35
|
"genesis-design-system": {
|
|
28
|
-
"command": "npx",
|
|
36
|
+
"command": "/opt/homebrew/bin/npx",
|
|
29
37
|
"args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
|
|
30
38
|
}
|
|
31
39
|
}
|
|
32
40
|
}
|
|
33
41
|
```
|
|
34
42
|
|
|
43
|
+
**Common npx locations:**
|
|
44
|
+
|
|
45
|
+
- Apple Silicon Mac (Homebrew): `/opt/homebrew/bin/npx`
|
|
46
|
+
- Intel Mac (Homebrew): `/usr/local/bin/npx`
|
|
47
|
+
- nvm users: `/Users/YOUR_USERNAME/.nvm/versions/node/vX.X.X/bin/npx`
|
|
48
|
+
|
|
49
|
+
**Windows/Linux users** can typically use `"command": "npx"` directly.
|
|
50
|
+
|
|
35
51
|
### With Claude Desktop
|
|
36
52
|
|
|
53
|
+
⚠️ **macOS Users**: Claude Desktop may not find `npx` in its PATH. Use the full path instead.
|
|
54
|
+
|
|
37
55
|
Add to your Claude config file:
|
|
38
56
|
|
|
39
57
|
**macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
|
|
40
58
|
**Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
|
|
41
59
|
**Linux**: `~/.config/Claude/claude_desktop_config.json`
|
|
42
60
|
|
|
61
|
+
1. Find your `npx` path in terminal:
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
which npx
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
2. Use the **full path** in your config:
|
|
68
|
+
|
|
43
69
|
```json
|
|
44
70
|
{
|
|
45
71
|
"mcpServers": {
|
|
46
72
|
"genesis-design-system": {
|
|
47
|
-
"command": "npx",
|
|
73
|
+
"command": "/opt/homebrew/bin/npx",
|
|
48
74
|
"args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
|
|
49
75
|
}
|
|
50
76
|
}
|
|
51
77
|
}
|
|
52
78
|
```
|
|
53
79
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
## 💬 Usage Examples
|
|
57
|
-
|
|
58
|
-
Once configured, you can ask:
|
|
59
|
-
|
|
60
|
-
**Component Discovery:**
|
|
61
|
-
|
|
62
|
-
```
|
|
63
|
-
"List all components in Genesis"
|
|
64
|
-
"Search for dropdown components"
|
|
65
|
-
"Show me the Button component implementation"
|
|
66
|
-
"What types does the Icon component export?"
|
|
67
|
-
"Show me the Icon component with its exported types"
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
**Design Tokens:**
|
|
71
|
-
|
|
72
|
-
```
|
|
73
|
-
"Show me all color tokens"
|
|
74
|
-
"What spacing tokens are available?"
|
|
75
|
-
"List all shadow/elevation tokens"
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
**Component Onboarding:**
|
|
80
|
+
**Common npx locations:**
|
|
79
81
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
"What's the standard structure for a Genesis component?"
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
**Design Token Imports:**
|
|
87
|
-
|
|
88
|
-
```
|
|
89
|
-
"How do I import design tokens in CSS Module files?"
|
|
90
|
-
"Show me the correct way to import color and spacing tokens"
|
|
91
|
-
"What token files are available and how do I import them?"
|
|
92
|
-
```
|
|
82
|
+
- Apple Silicon Mac (Homebrew): `/opt/homebrew/bin/npx`
|
|
83
|
+
- Intel Mac (Homebrew): `/usr/local/bin/npx`
|
|
84
|
+
- nvm users: `/Users/YOUR_USERNAME/.nvm/versions/node/vX.X.X/bin/npx`
|
|
93
85
|
|
|
94
|
-
**
|
|
86
|
+
**Windows/Linux users** can typically use `"command": "npx"` directly.
|
|
95
87
|
|
|
96
|
-
|
|
97
|
-
"Show me CSS Module styling guidelines for Genesis"
|
|
98
|
-
"What are the class naming conventions for CSS Modules?"
|
|
99
|
-
"How should I style child elements in CSS Modules?"
|
|
100
|
-
"What's the correct pattern for state-based styling in CSS?"
|
|
101
|
-
"Show me common CSS mistakes to avoid"
|
|
102
|
-
"How do I apply colors to child elements like text, icons, or buttons?"
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
**Dependencies:**
|
|
106
|
-
|
|
107
|
-
```
|
|
108
|
-
"What components does Modal depend on?"
|
|
109
|
-
"Show me the dependencies of Dropdown"
|
|
110
|
-
"What hooks does the Table component use?"
|
|
111
|
-
```
|
|
88
|
+
Then restart Cursor or Claude Desktop.
|
|
112
89
|
|
|
113
90
|
## 🔧 Development
|
|
114
91
|
|
|
@@ -284,6 +261,153 @@ npm config set @spaced-out:registry https://your-private-registry.com
|
|
|
284
261
|
yarn config set registry https://your-private-registry.com
|
|
285
262
|
```
|
|
286
263
|
|
|
264
|
+
## 🐛 Troubleshooting
|
|
265
|
+
|
|
266
|
+
### "spawn npx ENOENT" Error (macOS/Windows)
|
|
267
|
+
|
|
268
|
+
**Symptoms:**
|
|
269
|
+
|
|
270
|
+
- Cursor or Claude Desktop logs show `spawn npx ENOENT` error
|
|
271
|
+
- MCP server fails to start with connection errors
|
|
272
|
+
- Error message: `Server transport closed unexpectedly`
|
|
273
|
+
|
|
274
|
+
**Cause:**
|
|
275
|
+
GUI applications on macOS and Windows don't inherit your terminal's PATH environment variables, so they cannot find the `npx` command.
|
|
276
|
+
|
|
277
|
+
**Solution:**
|
|
278
|
+
|
|
279
|
+
1. Find your `npx` path in terminal:
|
|
280
|
+
|
|
281
|
+
**macOS/Linux:**
|
|
282
|
+
|
|
283
|
+
```bash
|
|
284
|
+
which npx
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
**Windows (PowerShell):**
|
|
288
|
+
|
|
289
|
+
```powershell
|
|
290
|
+
where.exe npx
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
2. Use the **full path** in your MCP configuration instead of just `"command": "npx"`:
|
|
294
|
+
|
|
295
|
+
**Example (macOS):**
|
|
296
|
+
|
|
297
|
+
```json
|
|
298
|
+
{
|
|
299
|
+
"mcpServers": {
|
|
300
|
+
"genesis-design-system": {
|
|
301
|
+
"command": "/opt/homebrew/bin/npx",
|
|
302
|
+
"args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
**Example (Windows):**
|
|
309
|
+
|
|
310
|
+
```json
|
|
311
|
+
{
|
|
312
|
+
"mcpServers": {
|
|
313
|
+
"genesis-design-system": {
|
|
314
|
+
"command": "C:\\Program Files\\nodejs\\npx.cmd",
|
|
315
|
+
"args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
**Common npx locations:**
|
|
322
|
+
|
|
323
|
+
**macOS:**
|
|
324
|
+
|
|
325
|
+
- Homebrew (Apple Silicon): `/opt/homebrew/bin/npx`
|
|
326
|
+
- Homebrew (Intel): `/usr/local/bin/npx`
|
|
327
|
+
- nvm: `/Users/YOUR_USERNAME/.nvm/versions/node/vX.X.X/bin/npx`
|
|
328
|
+
|
|
329
|
+
**Windows:**
|
|
330
|
+
|
|
331
|
+
- Default Node.js: `C:\Program Files\nodejs\npx.cmd`
|
|
332
|
+
- nvm-windows: `C:\Users\YOUR_USERNAME\AppData\Roaming\nvm\vX.X.X\npx.cmd`
|
|
333
|
+
|
|
334
|
+
**Linux:**
|
|
335
|
+
|
|
336
|
+
- Most distributions: `/usr/bin/npx` or `/usr/local/bin/npx`
|
|
337
|
+
|
|
338
|
+
3. Restart your AI assistant (Cursor or Claude Desktop)
|
|
339
|
+
|
|
340
|
+
**Verify the fix:**
|
|
341
|
+
After restarting, check the application logs. You should see successful initialization:
|
|
342
|
+
|
|
343
|
+
```
|
|
344
|
+
✅ Loaded Genesis design system data
|
|
345
|
+
Version: X.X.X
|
|
346
|
+
Components: XX
|
|
347
|
+
Hooks: XX
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
Instead of `ENOENT` errors.
|
|
351
|
+
|
|
352
|
+
### MCP Inspector (Advanced Debugging)
|
|
353
|
+
|
|
354
|
+
If you're still having issues, use the MCP Inspector to debug:
|
|
355
|
+
|
|
356
|
+
```bash
|
|
357
|
+
npx @modelcontextprotocol/inspector
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
Navigate to `http://127.0.0.1:6274` and configure:
|
|
361
|
+
|
|
362
|
+
- **Transport type:** Stdio
|
|
363
|
+
- **Command:** Your full npx path (e.g., `/opt/homebrew/bin/npx`)
|
|
364
|
+
- **Arguments:** `-y @spaced-out/genesis-mcp-server@latest`
|
|
365
|
+
|
|
366
|
+
Click **Connect** to test the connection. If it fails, check the terminal logs for detailed error messages.
|
|
367
|
+
|
|
368
|
+
### Test the Server Directly
|
|
369
|
+
|
|
370
|
+
Test if the server runs correctly in your terminal:
|
|
371
|
+
|
|
372
|
+
```bash
|
|
373
|
+
npx -y @spaced-out/genesis-mcp-server@latest
|
|
374
|
+
```
|
|
375
|
+
|
|
376
|
+
You should see:
|
|
377
|
+
|
|
378
|
+
```
|
|
379
|
+
✅ Loaded Genesis design system data
|
|
380
|
+
Version: X.X.X
|
|
381
|
+
Components: XX
|
|
382
|
+
Hooks: XX
|
|
383
|
+
Built: YYYY-MM-DD
|
|
384
|
+
```
|
|
385
|
+
|
|
386
|
+
If this fails, there may be an issue with the published package.
|
|
387
|
+
|
|
388
|
+
### Package Not Found
|
|
389
|
+
|
|
390
|
+
**Error:** `npm ERR! 404 '@spaced-out/genesis-mcp-server@latest' is not in this registry`
|
|
391
|
+
|
|
392
|
+
**Solution:**
|
|
393
|
+
|
|
394
|
+
- Verify the package is published: `npm view @spaced-out/genesis-mcp-server`
|
|
395
|
+
- If using a private registry, ensure you're authenticated
|
|
396
|
+
- Check your npm registry configuration: `npm config get registry`
|
|
397
|
+
|
|
398
|
+
### Node.js Version
|
|
399
|
+
|
|
400
|
+
**Error:** `The engine "node" is incompatible with this module`
|
|
401
|
+
|
|
402
|
+
**Solution:**
|
|
403
|
+
This server requires Node.js >= 18.0.0. Update your Node.js installation:
|
|
404
|
+
|
|
405
|
+
```bash
|
|
406
|
+
node --version # Check current version
|
|
407
|
+
```
|
|
408
|
+
|
|
409
|
+
Use [nvm](https://github.com/nvm-sh/nvm) or download from [nodejs.org](https://nodejs.org/).
|
|
410
|
+
|
|
287
411
|
## 🤝 Contributing
|
|
288
412
|
|
|
289
413
|
When updating the design system:
|
|
@@ -293,9 +417,105 @@ When updating the design system:
|
|
|
293
417
|
3. New version is published to npm
|
|
294
418
|
4. Users get updates on next `npx` run (or immediately with `@latest`)
|
|
295
419
|
|
|
420
|
+
## 🎨 Integration with Figma MCP
|
|
421
|
+
|
|
422
|
+
The Genesis MCP server works seamlessly alongside the Figma MCP server, enabling a powerful design-to-code workflow. By using both servers together, you can bridge design and implementation.
|
|
423
|
+
|
|
424
|
+
### Why Use Both?
|
|
425
|
+
|
|
426
|
+
**Figma MCP** provides:
|
|
427
|
+
|
|
428
|
+
- Design screenshots and visual context
|
|
429
|
+
- Component properties and variants from Figma
|
|
430
|
+
- Design tokens and variables from Figma files
|
|
431
|
+
- Layout measurements and spacing
|
|
432
|
+
|
|
433
|
+
**Genesis MCP** provides:
|
|
434
|
+
|
|
435
|
+
- Actual React component implementations
|
|
436
|
+
- Design system tokens and guidelines
|
|
437
|
+
- TypeScript types and APIs
|
|
438
|
+
- CSS Module styling patterns
|
|
439
|
+
|
|
440
|
+
Together, they create a complete workflow: **Design in Figma → Implement with Genesis**
|
|
441
|
+
|
|
442
|
+
### Configuration Examples
|
|
443
|
+
|
|
444
|
+
You can run multiple MCP servers simultaneously:
|
|
445
|
+
|
|
446
|
+
**VS Code/Cursor:**
|
|
447
|
+
|
|
448
|
+
```json
|
|
449
|
+
{
|
|
450
|
+
"mcpServers": {
|
|
451
|
+
"genesis-design-system": {
|
|
452
|
+
"command": "/opt/homebrew/bin/npx",
|
|
453
|
+
"args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
|
|
454
|
+
},
|
|
455
|
+
"figma-desktop": {
|
|
456
|
+
"command": "/opt/homebrew/bin/npx",
|
|
457
|
+
"args": ["-y", "@modelcontextprotocol/server-figma"]
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
**Claude Desktop:**
|
|
464
|
+
|
|
465
|
+
```json
|
|
466
|
+
{
|
|
467
|
+
"mcpServers": {
|
|
468
|
+
"genesis-design-system": {
|
|
469
|
+
"command": "/opt/homebrew/bin/npx",
|
|
470
|
+
"args": ["-y", "@spaced-out/genesis-mcp-server@latest"]
|
|
471
|
+
},
|
|
472
|
+
"figma-desktop": {
|
|
473
|
+
"command": "/opt/homebrew/bin/npx",
|
|
474
|
+
"args": ["-y", "@modelcontextprotocol/server-figma"]
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
```
|
|
479
|
+
|
|
480
|
+
### Workflow Examples
|
|
481
|
+
|
|
482
|
+
**Design-to-Code:**
|
|
483
|
+
|
|
484
|
+
```
|
|
485
|
+
"Show me the current Figma selection"
|
|
486
|
+
"Find the matching Genesis component for this design"
|
|
487
|
+
"Implement this Figma button using Genesis Button component"
|
|
488
|
+
```
|
|
489
|
+
|
|
490
|
+
**Token Mapping:**
|
|
491
|
+
|
|
492
|
+
```
|
|
493
|
+
"Compare Figma colors with Genesis color tokens"
|
|
494
|
+
"What Genesis spacing token matches this 16px gap?"
|
|
495
|
+
"Map this Figma shadow to Genesis elevation tokens"
|
|
496
|
+
```
|
|
497
|
+
|
|
498
|
+
**Validation:**
|
|
499
|
+
|
|
500
|
+
```
|
|
501
|
+
"Does Genesis have a component matching this Figma design?"
|
|
502
|
+
"Are these Figma colors available in Genesis palette?"
|
|
503
|
+
"What Genesis components would I need for this Figma screen?"
|
|
504
|
+
```
|
|
505
|
+
|
|
506
|
+
### Requirements
|
|
507
|
+
|
|
508
|
+
- **Figma MCP**: Figma Desktop app running with design files open
|
|
509
|
+
- **Genesis MCP**: Node.js >= 18.0.0
|
|
510
|
+
|
|
511
|
+
See [Figma MCP documentation](https://modelcontextprotocol.io/docs/tools/figma) for Figma setup details.
|
|
512
|
+
|
|
296
513
|
## 📚 Additional Resources
|
|
297
514
|
|
|
298
515
|
- [MCP Documentation](https://modelcontextprotocol.io)
|
|
516
|
+
- [Figma MCP Documentation](https://modelcontextprotocol.io/docs/tools/figma)
|
|
517
|
+
- [MCP Inspector](https://github.com/modelcontextprotocol/inspector)
|
|
518
|
+
- [Genesis Storybook MCP Guide](https://your-storybook-url.com/?path=/docs/model-context-protocol--docs)
|
|
299
519
|
|
|
300
520
|
## 📄 License
|
|
301
521
|
|
package/mcp/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spaced-out/genesis-mcp-server",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.js",
|
|
@@ -41,4 +41,3 @@
|
|
|
41
41
|
"node": ">=18.0.0"
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
-
|