@ryndesign/cli 0.2.3 → 0.2.5
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/LICENSE +21 -0
- package/components/avatar.component.json +25 -0
- package/components/badge.component.json +26 -0
- package/components/button.component.json +31 -0
- package/components/card.component.json +27 -0
- package/components/checkbox.component.json +30 -0
- package/components/input.component.json +36 -0
- package/components/toggle.component.json +29 -0
- package/dist/bin.cjs +130 -74
- package/dist/bin.cjs.map +1 -1
- package/dist/bin.js +2 -2
- package/dist/{init-IF35F2N7.js → init-7MH56KZN.js} +91 -44
- package/dist/init-7MH56KZN.js.map +1 -0
- package/dist/{preview-EOO6TMLY.js → preview-5IWH7EKA.js} +14 -5
- package/dist/preview-5IWH7EKA.js.map +1 -0
- package/package.json +15 -13
- package/templates/dark.tokens.json +20 -0
- package/templates/full.tokens.json +186 -0
- package/templates/minimal.tokens.json +72 -0
- package/dist/init-IF35F2N7.js.map +0 -1
- package/dist/preview-EOO6TMLY.js.map +0 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 RynDesign
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://ryndesign.dev/schemas/component.json",
|
|
3
|
+
"name": "Avatar",
|
|
4
|
+
"category": "data-display",
|
|
5
|
+
"props": {
|
|
6
|
+
"src": { "type": "string" },
|
|
7
|
+
"alt": { "type": "string" },
|
|
8
|
+
"name": { "type": "string" }
|
|
9
|
+
},
|
|
10
|
+
"variants": {
|
|
11
|
+
"size": { "values": ["xs", "sm", "md", "lg", "xl"], "default": "md" },
|
|
12
|
+
"shape": { "values": ["circle", "square"], "default": "circle" }
|
|
13
|
+
},
|
|
14
|
+
"slots": {
|
|
15
|
+
"badge": { "optional": true }
|
|
16
|
+
},
|
|
17
|
+
"tokenMapping": {
|
|
18
|
+
"size": "component.avatar.{size}.size",
|
|
19
|
+
"fontSize": "component.avatar.{size}.fontSize",
|
|
20
|
+
"background": "component.avatar.fallback.background",
|
|
21
|
+
"textColor": "component.avatar.fallback.text",
|
|
22
|
+
"borderRadius": "component.avatar.{shape}.borderRadius"
|
|
23
|
+
},
|
|
24
|
+
"states": {}
|
|
25
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://ryndesign.dev/schemas/component.json",
|
|
3
|
+
"name": "Badge",
|
|
4
|
+
"category": "data-display",
|
|
5
|
+
"props": {
|
|
6
|
+
"label": { "type": "string", "required": true }
|
|
7
|
+
},
|
|
8
|
+
"variants": {
|
|
9
|
+
"variant": { "values": ["solid", "subtle", "outline"], "default": "subtle" },
|
|
10
|
+
"color": { "values": ["default", "primary", "success", "warning", "error"], "default": "default" },
|
|
11
|
+
"size": { "values": ["sm", "md", "lg"], "default": "md" }
|
|
12
|
+
},
|
|
13
|
+
"slots": {
|
|
14
|
+
"leadingIcon": { "optional": true }
|
|
15
|
+
},
|
|
16
|
+
"tokenMapping": {
|
|
17
|
+
"background": "component.badge.{variant}.{color}.background",
|
|
18
|
+
"textColor": "component.badge.{variant}.{color}.text",
|
|
19
|
+
"borderColor": "component.badge.{variant}.{color}.border",
|
|
20
|
+
"borderRadius": "component.badge.borderRadius",
|
|
21
|
+
"paddingX": "component.badge.{size}.paddingX",
|
|
22
|
+
"paddingY": "component.badge.{size}.paddingY",
|
|
23
|
+
"fontSize": "component.badge.{size}.fontSize"
|
|
24
|
+
},
|
|
25
|
+
"states": {}
|
|
26
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://ryndesign.dev/schemas/component.json",
|
|
3
|
+
"name": "Button",
|
|
4
|
+
"category": "actions",
|
|
5
|
+
"props": {
|
|
6
|
+
"label": { "type": "string", "required": true },
|
|
7
|
+
"disabled": { "type": "boolean", "default": false },
|
|
8
|
+
"onPress": { "type": "callback" }
|
|
9
|
+
},
|
|
10
|
+
"variants": {
|
|
11
|
+
"variant": { "values": ["primary", "secondary", "outline", "ghost"], "default": "primary" },
|
|
12
|
+
"size": { "values": ["sm", "md", "lg"], "default": "md" }
|
|
13
|
+
},
|
|
14
|
+
"slots": {
|
|
15
|
+
"leadingIcon": { "optional": true },
|
|
16
|
+
"trailingIcon": { "optional": true }
|
|
17
|
+
},
|
|
18
|
+
"tokenMapping": {
|
|
19
|
+
"background": "component.button.{variant}.background",
|
|
20
|
+
"textColor": "component.button.{variant}.text",
|
|
21
|
+
"borderRadius": "component.button.borderRadius",
|
|
22
|
+
"paddingX": "component.button.{size}.paddingX",
|
|
23
|
+
"paddingY": "component.button.{size}.paddingY",
|
|
24
|
+
"fontSize": "component.button.{size}.fontSize"
|
|
25
|
+
},
|
|
26
|
+
"states": {
|
|
27
|
+
"hover": { "tokenOverrides": { "background": "component.button.{variant}.hover.background" } },
|
|
28
|
+
"pressed": { "tokenOverrides": { "background": "component.button.{variant}.pressed.background" } },
|
|
29
|
+
"disabled": { "tokenOverrides": { "background": "component.button.disabled.background" } }
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://ryndesign.dev/schemas/component.json",
|
|
3
|
+
"name": "Card",
|
|
4
|
+
"category": "layout",
|
|
5
|
+
"props": {
|
|
6
|
+
"children": { "type": "node", "required": true }
|
|
7
|
+
},
|
|
8
|
+
"variants": {
|
|
9
|
+
"variant": { "values": ["elevated", "outlined", "filled"], "default": "elevated" },
|
|
10
|
+
"padding": { "values": ["none", "sm", "md", "lg"], "default": "md" }
|
|
11
|
+
},
|
|
12
|
+
"slots": {
|
|
13
|
+
"header": { "optional": true },
|
|
14
|
+
"footer": { "optional": true },
|
|
15
|
+
"media": { "optional": true }
|
|
16
|
+
},
|
|
17
|
+
"tokenMapping": {
|
|
18
|
+
"background": "component.card.{variant}.background",
|
|
19
|
+
"borderColor": "component.card.{variant}.border",
|
|
20
|
+
"borderRadius": "component.card.borderRadius",
|
|
21
|
+
"shadow": "component.card.{variant}.shadow",
|
|
22
|
+
"padding": "component.card.{padding}.padding"
|
|
23
|
+
},
|
|
24
|
+
"states": {
|
|
25
|
+
"hover": { "tokenOverrides": { "shadow": "component.card.{variant}.hover.shadow" } }
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://ryndesign.dev/schemas/component.json",
|
|
3
|
+
"name": "Checkbox",
|
|
4
|
+
"category": "forms",
|
|
5
|
+
"props": {
|
|
6
|
+
"checked": { "type": "boolean", "required": true },
|
|
7
|
+
"label": { "type": "string" },
|
|
8
|
+
"disabled": { "type": "boolean", "default": false },
|
|
9
|
+
"indeterminate": { "type": "boolean", "default": false },
|
|
10
|
+
"onChange": { "type": "callback" }
|
|
11
|
+
},
|
|
12
|
+
"variants": {
|
|
13
|
+
"size": { "values": ["sm", "md", "lg"], "default": "md" }
|
|
14
|
+
},
|
|
15
|
+
"slots": {},
|
|
16
|
+
"tokenMapping": {
|
|
17
|
+
"borderColor": "component.checkbox.border",
|
|
18
|
+
"checkedBackground": "component.checkbox.checked.background",
|
|
19
|
+
"checkmarkColor": "component.checkbox.checkmark",
|
|
20
|
+
"borderRadius": "component.checkbox.borderRadius",
|
|
21
|
+
"size": "component.checkbox.{size}.size",
|
|
22
|
+
"labelFontSize": "component.checkbox.{size}.labelFontSize",
|
|
23
|
+
"gap": "component.checkbox.gap"
|
|
24
|
+
},
|
|
25
|
+
"states": {
|
|
26
|
+
"hover": { "tokenOverrides": { "borderColor": "component.checkbox.hover.border" } },
|
|
27
|
+
"focus": { "tokenOverrides": { "borderColor": "component.checkbox.focus.border" } },
|
|
28
|
+
"disabled": { "tokenOverrides": { "borderColor": "component.checkbox.disabled.border" } }
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://ryndesign.dev/schemas/component.json",
|
|
3
|
+
"name": "Input",
|
|
4
|
+
"category": "forms",
|
|
5
|
+
"props": {
|
|
6
|
+
"value": { "type": "string", "required": true },
|
|
7
|
+
"placeholder": { "type": "string" },
|
|
8
|
+
"disabled": { "type": "boolean", "default": false },
|
|
9
|
+
"readOnly": { "type": "boolean", "default": false },
|
|
10
|
+
"onChange": { "type": "callback" },
|
|
11
|
+
"onFocus": { "type": "callback" },
|
|
12
|
+
"onBlur": { "type": "callback" }
|
|
13
|
+
},
|
|
14
|
+
"variants": {
|
|
15
|
+
"variant": { "values": ["default", "filled", "unstyled"], "default": "default" },
|
|
16
|
+
"size": { "values": ["sm", "md", "lg"], "default": "md" }
|
|
17
|
+
},
|
|
18
|
+
"slots": {
|
|
19
|
+
"leadingIcon": { "optional": true },
|
|
20
|
+
"trailingIcon": { "optional": true }
|
|
21
|
+
},
|
|
22
|
+
"tokenMapping": {
|
|
23
|
+
"background": "component.input.{variant}.background",
|
|
24
|
+
"textColor": "component.input.text",
|
|
25
|
+
"borderColor": "component.input.{variant}.border",
|
|
26
|
+
"borderRadius": "component.input.borderRadius",
|
|
27
|
+
"paddingX": "component.input.{size}.paddingX",
|
|
28
|
+
"paddingY": "component.input.{size}.paddingY",
|
|
29
|
+
"fontSize": "component.input.{size}.fontSize"
|
|
30
|
+
},
|
|
31
|
+
"states": {
|
|
32
|
+
"focus": { "tokenOverrides": { "borderColor": "component.input.focus.border" } },
|
|
33
|
+
"error": { "tokenOverrides": { "borderColor": "component.input.error.border" } },
|
|
34
|
+
"disabled": { "tokenOverrides": { "background": "component.input.disabled.background" } }
|
|
35
|
+
}
|
|
36
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://ryndesign.dev/schemas/component.json",
|
|
3
|
+
"name": "Toggle",
|
|
4
|
+
"category": "forms",
|
|
5
|
+
"props": {
|
|
6
|
+
"checked": { "type": "boolean", "required": true },
|
|
7
|
+
"label": { "type": "string" },
|
|
8
|
+
"disabled": { "type": "boolean", "default": false },
|
|
9
|
+
"onChange": { "type": "callback" }
|
|
10
|
+
},
|
|
11
|
+
"variants": {
|
|
12
|
+
"size": { "values": ["sm", "md", "lg"], "default": "md" }
|
|
13
|
+
},
|
|
14
|
+
"slots": {},
|
|
15
|
+
"tokenMapping": {
|
|
16
|
+
"trackBackground": "component.toggle.track.background",
|
|
17
|
+
"trackCheckedBackground": "component.toggle.track.checked.background",
|
|
18
|
+
"thumbBackground": "component.toggle.thumb.background",
|
|
19
|
+
"trackWidth": "component.toggle.{size}.trackWidth",
|
|
20
|
+
"trackHeight": "component.toggle.{size}.trackHeight",
|
|
21
|
+
"thumbSize": "component.toggle.{size}.thumbSize",
|
|
22
|
+
"borderRadius": "component.toggle.borderRadius",
|
|
23
|
+
"duration": "component.toggle.duration"
|
|
24
|
+
},
|
|
25
|
+
"states": {
|
|
26
|
+
"hover": { "tokenOverrides": { "trackBackground": "component.toggle.track.hover.background" } },
|
|
27
|
+
"disabled": { "tokenOverrides": { "trackBackground": "component.toggle.track.disabled.background" } }
|
|
28
|
+
}
|
|
29
|
+
}
|
package/dist/bin.cjs
CHANGED
|
@@ -35,6 +35,12 @@ var init_exports = {};
|
|
|
35
35
|
__export(init_exports, {
|
|
36
36
|
default: () => init_default
|
|
37
37
|
});
|
|
38
|
+
function getPackageRoot() {
|
|
39
|
+
if (typeof __dirname !== "undefined") {
|
|
40
|
+
return import_node_path.default.resolve(__dirname, "..");
|
|
41
|
+
}
|
|
42
|
+
return import_node_path.default.resolve(import_node_path.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)), "..");
|
|
43
|
+
}
|
|
38
44
|
function generateConfig(platforms, darkMode) {
|
|
39
45
|
const imports = [];
|
|
40
46
|
const generators = [];
|
|
@@ -141,7 +147,7 @@ function detectPackageManager(cwd) {
|
|
|
141
147
|
if ((0, import_node_fs.existsSync)(import_node_path.default.join(cwd, "bun.lockb"))) return "bun";
|
|
142
148
|
return "npm";
|
|
143
149
|
}
|
|
144
|
-
var import_citty, p, import_picocolors, import_promises, import_node_fs, import_node_path, import_node_child_process, import_meta, init_default;
|
|
150
|
+
var import_citty, p, import_picocolors, import_promises, import_node_fs, import_node_path, import_node_child_process, import_node_url, import_meta, init_default;
|
|
145
151
|
var init_init = __esm({
|
|
146
152
|
"src/commands/init.ts"() {
|
|
147
153
|
"use strict";
|
|
@@ -152,6 +158,7 @@ var init_init = __esm({
|
|
|
152
158
|
import_node_fs = require("fs");
|
|
153
159
|
import_node_path = __toESM(require("path"), 1);
|
|
154
160
|
import_node_child_process = require("child_process");
|
|
161
|
+
import_node_url = require("url");
|
|
155
162
|
import_meta = {};
|
|
156
163
|
init_default = (0, import_citty.defineCommand)({
|
|
157
164
|
meta: {
|
|
@@ -162,27 +169,34 @@ var init_init = __esm({
|
|
|
162
169
|
template: {
|
|
163
170
|
type: "string",
|
|
164
171
|
description: "Template to use (minimal or full)",
|
|
165
|
-
default: "
|
|
172
|
+
default: "full"
|
|
166
173
|
},
|
|
167
174
|
platforms: {
|
|
168
175
|
type: "string",
|
|
169
176
|
description: "Comma-separated list of target platforms"
|
|
177
|
+
},
|
|
178
|
+
"dark-mode": {
|
|
179
|
+
type: "boolean",
|
|
180
|
+
description: "Enable dark mode support"
|
|
170
181
|
}
|
|
171
182
|
},
|
|
172
183
|
async run({ args }) {
|
|
173
|
-
|
|
174
|
-
|
|
184
|
+
const isInteractive = !args.platforms || args["dark-mode"] === void 0;
|
|
185
|
+
if (isInteractive) {
|
|
186
|
+
p.intro(import_picocolors.default.bgCyan(import_picocolors.default.black(" RynDesign Init ")));
|
|
187
|
+
}
|
|
188
|
+
const template = args.template || (isInteractive ? await p.select({
|
|
175
189
|
message: "Choose a template:",
|
|
176
190
|
options: [
|
|
177
191
|
{ value: "minimal", label: "Minimal", hint: "Basic color, spacing, typography tokens" },
|
|
178
192
|
{ value: "full", label: "Full", hint: "Complete token set with shadows, borders, gradients" }
|
|
179
193
|
]
|
|
180
|
-
});
|
|
194
|
+
}) : "full");
|
|
181
195
|
if (p.isCancel(template)) {
|
|
182
196
|
p.cancel("Operation cancelled.");
|
|
183
197
|
process.exit(0);
|
|
184
198
|
}
|
|
185
|
-
const platformsInput = args.platforms || await p.multiselect({
|
|
199
|
+
const platformsInput = args.platforms || (isInteractive ? await p.multiselect({
|
|
186
200
|
message: "Select target platforms:",
|
|
187
201
|
initialValues: ["react", "swiftui"],
|
|
188
202
|
options: [
|
|
@@ -196,29 +210,38 @@ var init_init = __esm({
|
|
|
196
210
|
{ value: "android-view", label: "Android View" }
|
|
197
211
|
],
|
|
198
212
|
required: true
|
|
199
|
-
});
|
|
213
|
+
}) : ["react"]);
|
|
200
214
|
if (p.isCancel(platformsInput)) {
|
|
201
215
|
p.cancel("Operation cancelled.");
|
|
202
216
|
process.exit(0);
|
|
203
217
|
}
|
|
204
|
-
const platforms = Array.isArray(platformsInput) ? platformsInput : platformsInput.split(",").map((
|
|
205
|
-
const darkMode = await p.confirm({
|
|
218
|
+
const platforms = Array.isArray(platformsInput) ? platformsInput : platformsInput.split(",").map((s) => s.trim());
|
|
219
|
+
const darkMode = args["dark-mode"] !== void 0 ? args["dark-mode"] : isInteractive ? await p.confirm({
|
|
206
220
|
message: "Enable dark mode support?",
|
|
207
221
|
initialValue: true
|
|
208
|
-
});
|
|
222
|
+
}) : true;
|
|
209
223
|
if (p.isCancel(darkMode)) {
|
|
210
224
|
p.cancel("Operation cancelled.");
|
|
211
225
|
process.exit(0);
|
|
212
226
|
}
|
|
213
|
-
const
|
|
214
|
-
|
|
227
|
+
const log = (msg) => {
|
|
228
|
+
if (isInteractive) return;
|
|
229
|
+
console.log(msg);
|
|
230
|
+
};
|
|
231
|
+
let spinner3;
|
|
232
|
+
if (isInteractive) {
|
|
233
|
+
spinner3 = p.spinner();
|
|
234
|
+
spinner3.start("Creating project files...");
|
|
235
|
+
} else {
|
|
236
|
+
log("Creating project files...");
|
|
237
|
+
}
|
|
215
238
|
const cwd = process.cwd();
|
|
239
|
+
const pkgRoot = getPackageRoot();
|
|
240
|
+
const templateDir = import_node_path.default.join(pkgRoot, "templates");
|
|
241
|
+
const componentsDir = import_node_path.default.join(pkgRoot, "components");
|
|
216
242
|
await import_promises.default.mkdir(import_node_path.default.join(cwd, "tokens"), { recursive: true });
|
|
217
243
|
await import_promises.default.mkdir(import_node_path.default.join(cwd, "components"), { recursive: true });
|
|
218
244
|
await import_promises.default.mkdir(import_node_path.default.join(cwd, "generated"), { recursive: true });
|
|
219
|
-
const templateDir = import_node_path.default.resolve(
|
|
220
|
-
typeof __dirname !== "undefined" ? import_node_path.default.resolve(__dirname, "../../templates") : import_node_path.default.resolve(new URL(".", import_meta.url).pathname, "../../templates")
|
|
221
|
-
);
|
|
222
245
|
const templateFile = template === "full" ? "full.tokens.json" : "minimal.tokens.json";
|
|
223
246
|
try {
|
|
224
247
|
const templateContent = await import_promises.default.readFile(
|
|
@@ -258,16 +281,19 @@ var init_init = __esm({
|
|
|
258
281
|
}
|
|
259
282
|
const configContent = generateConfig(platforms, darkMode);
|
|
260
283
|
await import_promises.default.writeFile(import_node_path.default.join(cwd, "ryndesign.config.ts"), configContent);
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
284
|
+
const componentsToCopy = template === "full" ? ["button", "input", "card", "checkbox", "toggle", "badge", "avatar"] : ["button"];
|
|
285
|
+
for (const comp of componentsToCopy) {
|
|
286
|
+
try {
|
|
287
|
+
const content = await import_promises.default.readFile(
|
|
288
|
+
import_node_path.default.join(componentsDir, `${comp}.component.json`),
|
|
289
|
+
"utf-8"
|
|
290
|
+
);
|
|
291
|
+
await import_promises.default.writeFile(
|
|
292
|
+
import_node_path.default.join(cwd, "components", `${comp}.component.json`),
|
|
293
|
+
content
|
|
294
|
+
);
|
|
295
|
+
} catch {
|
|
296
|
+
}
|
|
271
297
|
}
|
|
272
298
|
const gitignorePath = import_node_path.default.join(cwd, ".gitignore");
|
|
273
299
|
try {
|
|
@@ -303,30 +329,51 @@ var init_init = __esm({
|
|
|
303
329
|
if (!pkg.devDependencies || typeof pkg.devDependencies !== "object") pkg.devDependencies = {};
|
|
304
330
|
const devDeps = pkg.devDependencies;
|
|
305
331
|
devDeps["@ryndesign/cli"] = "latest";
|
|
332
|
+
devDeps["@ryndesign/preview"] = "latest";
|
|
306
333
|
for (const platform of platforms) {
|
|
307
334
|
devDeps[`@ryndesign/generator-${platform}`] = "latest";
|
|
308
335
|
}
|
|
309
336
|
await import_promises.default.writeFile(pkgJsonPath, JSON.stringify(pkg, null, 2) + "\n");
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
installSpinner.
|
|
317
|
-
|
|
318
|
-
|
|
337
|
+
if (spinner3) {
|
|
338
|
+
spinner3.stop("Project files created!");
|
|
339
|
+
} else {
|
|
340
|
+
log("Project files created!");
|
|
341
|
+
}
|
|
342
|
+
if (isInteractive) {
|
|
343
|
+
const installSpinner = p.spinner();
|
|
344
|
+
installSpinner.start("Installing dependencies...");
|
|
345
|
+
try {
|
|
346
|
+
const pm = detectPackageManager(cwd);
|
|
347
|
+
(0, import_node_child_process.execSync)(`${pm} install`, { cwd, stdio: "pipe" });
|
|
348
|
+
installSpinner.stop("Dependencies installed!");
|
|
349
|
+
} catch {
|
|
350
|
+
installSpinner.stop(import_picocolors.default.yellow("Could not auto-install. Run `npm install` manually."));
|
|
351
|
+
}
|
|
352
|
+
} else {
|
|
353
|
+
log("Installing dependencies...");
|
|
354
|
+
try {
|
|
355
|
+
const pm = detectPackageManager(cwd);
|
|
356
|
+
(0, import_node_child_process.execSync)(`${pm} install`, { cwd, stdio: "pipe" });
|
|
357
|
+
log("Dependencies installed!");
|
|
358
|
+
} catch {
|
|
359
|
+
log("Could not auto-install. Run `npm install` manually.");
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
if (isInteractive) {
|
|
363
|
+
p.note(
|
|
364
|
+
[
|
|
365
|
+
`${import_picocolors.default.green("tokens/")} - Your design tokens`,
|
|
366
|
+
`${import_picocolors.default.green("components/")} - Component definitions`,
|
|
367
|
+
`${import_picocolors.default.green("generated/")} - Generated output (gitignored)`,
|
|
368
|
+
`${import_picocolors.default.green("ryndesign.config.ts")} - Configuration`
|
|
369
|
+
].join("\n"),
|
|
370
|
+
"Project structure"
|
|
371
|
+
);
|
|
372
|
+
p.outro(import_picocolors.default.green("Run `ryndesign generate` to generate your design system!"));
|
|
373
|
+
} else {
|
|
374
|
+
log("\nProject initialized successfully!");
|
|
375
|
+
log("Run `ryndesign generate` to generate your design system!");
|
|
319
376
|
}
|
|
320
|
-
p.note(
|
|
321
|
-
[
|
|
322
|
-
`${import_picocolors.default.green("tokens/")} - Your design tokens`,
|
|
323
|
-
`${import_picocolors.default.green("components/")} - Component definitions`,
|
|
324
|
-
`${import_picocolors.default.green("generated/")} - Generated output (gitignored)`,
|
|
325
|
-
`${import_picocolors.default.green("ryndesign.config.ts")} - Configuration`
|
|
326
|
-
].join("\n"),
|
|
327
|
-
"Project structure"
|
|
328
|
-
);
|
|
329
|
-
p.outro(import_picocolors.default.green("Run `ryndesign generate` to generate your design system!"));
|
|
330
377
|
}
|
|
331
378
|
});
|
|
332
379
|
}
|
|
@@ -743,12 +790,15 @@ var preview_exports = {};
|
|
|
743
790
|
__export(preview_exports, {
|
|
744
791
|
default: () => preview_default
|
|
745
792
|
});
|
|
746
|
-
var import_citty4, import_picocolors4, preview_default;
|
|
793
|
+
var import_citty4, import_picocolors4, import_node_module2, import_node_url2, import_node_path4, preview_default;
|
|
747
794
|
var init_preview = __esm({
|
|
748
795
|
"src/commands/preview.ts"() {
|
|
749
796
|
"use strict";
|
|
750
797
|
import_citty4 = require("citty");
|
|
751
798
|
import_picocolors4 = __toESM(require("picocolors"), 1);
|
|
799
|
+
import_node_module2 = require("module");
|
|
800
|
+
import_node_url2 = require("url");
|
|
801
|
+
import_node_path4 = __toESM(require("path"), 1);
|
|
752
802
|
init_config();
|
|
753
803
|
preview_default = (0, import_citty4.defineCommand)({
|
|
754
804
|
meta: {
|
|
@@ -778,11 +828,17 @@ var init_preview = __esm({
|
|
|
778
828
|
const port = args.port ? parseInt(args.port, 10) : config?.preview?.port ?? 4400;
|
|
779
829
|
let previewModule;
|
|
780
830
|
try {
|
|
781
|
-
|
|
831
|
+
const localRequire = (0, import_node_module2.createRequire)(import_node_path4.default.resolve(process.cwd(), "package.json"));
|
|
832
|
+
const previewPath = localRequire.resolve("@ryndesign/preview");
|
|
833
|
+
previewModule = await import((0, import_node_url2.pathToFileURL)(previewPath).href);
|
|
782
834
|
} catch {
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
835
|
+
try {
|
|
836
|
+
previewModule = await import("@ryndesign/preview");
|
|
837
|
+
} catch {
|
|
838
|
+
console.log(import_picocolors4.default.yellow("Preview package not found. Install @ryndesign/preview"));
|
|
839
|
+
console.log(import_picocolors4.default.gray(" npm install @ryndesign/preview"));
|
|
840
|
+
return;
|
|
841
|
+
}
|
|
786
842
|
}
|
|
787
843
|
await previewModule.startPreviewServer({
|
|
788
844
|
port,
|
|
@@ -798,7 +854,7 @@ var add_exports = {};
|
|
|
798
854
|
__export(add_exports, {
|
|
799
855
|
default: () => add_default
|
|
800
856
|
});
|
|
801
|
-
var import_citty5, p2, import_picocolors5, import_promises4,
|
|
857
|
+
var import_citty5, p2, import_picocolors5, import_promises4, import_node_path5, import_meta3, AVAILABLE_COMPONENTS, COMPONENT_TOKENS, add_default;
|
|
802
858
|
var init_add = __esm({
|
|
803
859
|
"src/commands/add.ts"() {
|
|
804
860
|
"use strict";
|
|
@@ -806,7 +862,7 @@ var init_add = __esm({
|
|
|
806
862
|
p2 = __toESM(require("@clack/prompts"), 1);
|
|
807
863
|
import_picocolors5 = __toESM(require("picocolors"), 1);
|
|
808
864
|
import_promises4 = __toESM(require("fs/promises"), 1);
|
|
809
|
-
|
|
865
|
+
import_node_path5 = __toESM(require("path"), 1);
|
|
810
866
|
import_meta3 = {};
|
|
811
867
|
AVAILABLE_COMPONENTS = ["button", "input", "card", "checkbox", "toggle", "badge", "avatar"];
|
|
812
868
|
COMPONENT_TOKENS = {
|
|
@@ -861,9 +917,9 @@ var init_add = __esm({
|
|
|
861
917
|
process.exit(0);
|
|
862
918
|
}
|
|
863
919
|
const cwd = process.cwd();
|
|
864
|
-
const componentsDir =
|
|
920
|
+
const componentsDir = import_node_path5.default.join(cwd, "components");
|
|
865
921
|
await import_promises4.default.mkdir(componentsDir, { recursive: true });
|
|
866
|
-
const destPath =
|
|
922
|
+
const destPath = import_node_path5.default.join(componentsDir, `${name}.component.json`);
|
|
867
923
|
try {
|
|
868
924
|
await import_promises4.default.access(destPath);
|
|
869
925
|
console.log(import_picocolors5.default.yellow(`Component ${name} already exists at ${destPath}`));
|
|
@@ -872,9 +928,9 @@ var init_add = __esm({
|
|
|
872
928
|
}
|
|
873
929
|
let copied = false;
|
|
874
930
|
const searchPaths = [
|
|
875
|
-
|
|
931
|
+
import_node_path5.default.resolve(__dirname, `../../components/${name}.component.json`),
|
|
876
932
|
// ESM fallback
|
|
877
|
-
typeof __dirname !== "undefined" ?
|
|
933
|
+
typeof __dirname !== "undefined" ? import_node_path5.default.resolve(__dirname, `../../components/${name}.component.json`) : import_node_path5.default.resolve(new URL(".", import_meta3.url).pathname, `../../components/${name}.component.json`)
|
|
878
934
|
];
|
|
879
935
|
for (const srcPath of searchPaths) {
|
|
880
936
|
try {
|
|
@@ -894,9 +950,9 @@ var init_add = __esm({
|
|
|
894
950
|
}
|
|
895
951
|
const withTokens = args["with-tokens"];
|
|
896
952
|
if (withTokens && COMPONENT_TOKENS[name]) {
|
|
897
|
-
const tokensDir =
|
|
953
|
+
const tokensDir = import_node_path5.default.join(cwd, "tokens");
|
|
898
954
|
await import_promises4.default.mkdir(tokensDir, { recursive: true });
|
|
899
|
-
const tokenFile =
|
|
955
|
+
const tokenFile = import_node_path5.default.join(tokensDir, `${name}.tokens.json`);
|
|
900
956
|
try {
|
|
901
957
|
await import_promises4.default.access(tokenFile);
|
|
902
958
|
console.log(import_picocolors5.default.yellow(` Token file already exists: ${tokenFile}`));
|
|
@@ -923,14 +979,14 @@ async function readJsonSafe(absolutePath) {
|
|
|
923
979
|
return null;
|
|
924
980
|
}
|
|
925
981
|
}
|
|
926
|
-
var import_citty6, import_picocolors6, import_promises5,
|
|
982
|
+
var import_citty6, import_picocolors6, import_promises5, import_node_path6, figma_pull_default;
|
|
927
983
|
var init_figma_pull = __esm({
|
|
928
984
|
"src/commands/figma-pull.ts"() {
|
|
929
985
|
"use strict";
|
|
930
986
|
import_citty6 = require("citty");
|
|
931
987
|
import_picocolors6 = __toESM(require("picocolors"), 1);
|
|
932
988
|
import_promises5 = __toESM(require("fs/promises"), 1);
|
|
933
|
-
|
|
989
|
+
import_node_path6 = __toESM(require("path"), 1);
|
|
934
990
|
init_config();
|
|
935
991
|
figma_pull_default = (0, import_citty6.defineCommand)({
|
|
936
992
|
meta: {
|
|
@@ -1002,8 +1058,8 @@ var init_figma_pull = __esm({
|
|
|
1002
1058
|
if (modeMapping) {
|
|
1003
1059
|
const modeFiles = resolveFigmaModes(variables, modeMapping);
|
|
1004
1060
|
for (const [filePath, tree] of Object.entries(modeFiles)) {
|
|
1005
|
-
const absolutePath =
|
|
1006
|
-
await import_promises5.default.mkdir(
|
|
1061
|
+
const absolutePath = import_node_path6.default.resolve(cwd, filePath);
|
|
1062
|
+
await import_promises5.default.mkdir(import_node_path6.default.dirname(absolutePath), { recursive: true });
|
|
1007
1063
|
if (shouldMerge) {
|
|
1008
1064
|
const existing = await readJsonSafe(absolutePath);
|
|
1009
1065
|
if (existing) {
|
|
@@ -1021,8 +1077,8 @@ var init_figma_pull = __esm({
|
|
|
1021
1077
|
console.log(import_picocolors6.default.green(` \u2713 Written ${filePath}`));
|
|
1022
1078
|
}
|
|
1023
1079
|
} else {
|
|
1024
|
-
const outPath =
|
|
1025
|
-
await import_promises5.default.mkdir(
|
|
1080
|
+
const outPath = import_node_path6.default.resolve(cwd, args.output);
|
|
1081
|
+
await import_promises5.default.mkdir(import_node_path6.default.dirname(outPath), { recursive: true });
|
|
1026
1082
|
if (shouldMerge) {
|
|
1027
1083
|
const existing = await readJsonSafe(outPath);
|
|
1028
1084
|
if (existing) {
|
|
@@ -1229,13 +1285,13 @@ var figma_exports = {};
|
|
|
1229
1285
|
__export(figma_exports, {
|
|
1230
1286
|
default: () => figma_default
|
|
1231
1287
|
});
|
|
1232
|
-
var import_citty9, import_picocolors9,
|
|
1288
|
+
var import_citty9, import_picocolors9, import_node_path7, import_promises6, figma_default;
|
|
1233
1289
|
var init_figma = __esm({
|
|
1234
1290
|
"src/commands/figma.ts"() {
|
|
1235
1291
|
"use strict";
|
|
1236
1292
|
import_citty9 = require("citty");
|
|
1237
1293
|
import_picocolors9 = require("picocolors");
|
|
1238
|
-
|
|
1294
|
+
import_node_path7 = require("path");
|
|
1239
1295
|
import_promises6 = require("fs/promises");
|
|
1240
1296
|
init_config();
|
|
1241
1297
|
figma_default = (0, import_citty9.defineCommand)({
|
|
@@ -1261,8 +1317,8 @@ async function copyDir(src, dest) {
|
|
|
1261
1317
|
await import_promises7.default.mkdir(dest, { recursive: true });
|
|
1262
1318
|
const entries = await import_promises7.default.readdir(src, { withFileTypes: true });
|
|
1263
1319
|
for (const entry of entries) {
|
|
1264
|
-
const srcPath =
|
|
1265
|
-
const destPath =
|
|
1320
|
+
const srcPath = import_node_path8.default.join(src, entry.name);
|
|
1321
|
+
const destPath = import_node_path8.default.join(dest, entry.name);
|
|
1266
1322
|
if (entry.isDirectory()) {
|
|
1267
1323
|
await copyDir(srcPath, destPath);
|
|
1268
1324
|
} else {
|
|
@@ -1293,9 +1349,9 @@ export default function ${name.replace(/-/g, "")}Generator(options = {}): Genera
|
|
|
1293
1349
|
};
|
|
1294
1350
|
}
|
|
1295
1351
|
`;
|
|
1296
|
-
await import_promises7.default.writeFile(
|
|
1352
|
+
await import_promises7.default.writeFile(import_node_path8.default.join(dir, "index.ts"), indexContent, "utf-8");
|
|
1297
1353
|
}
|
|
1298
|
-
var import_citty10, p3, import_picocolors10, import_promises7,
|
|
1354
|
+
var import_citty10, p3, import_picocolors10, import_promises7, import_node_path8, GENERATORS, eject_default;
|
|
1299
1355
|
var init_eject = __esm({
|
|
1300
1356
|
"src/commands/eject.ts"() {
|
|
1301
1357
|
"use strict";
|
|
@@ -1303,7 +1359,7 @@ var init_eject = __esm({
|
|
|
1303
1359
|
p3 = __toESM(require("@clack/prompts"), 1);
|
|
1304
1360
|
import_picocolors10 = __toESM(require("picocolors"), 1);
|
|
1305
1361
|
import_promises7 = __toESM(require("fs/promises"), 1);
|
|
1306
|
-
|
|
1362
|
+
import_node_path8 = __toESM(require("path"), 1);
|
|
1307
1363
|
GENERATORS = ["react", "vue", "svelte", "rails", "swiftui", "uikit", "compose", "android-view"];
|
|
1308
1364
|
eject_default = (0, import_citty10.defineCommand)({
|
|
1309
1365
|
meta: {
|
|
@@ -1333,7 +1389,7 @@ var init_eject = __esm({
|
|
|
1333
1389
|
process.exit(1);
|
|
1334
1390
|
}
|
|
1335
1391
|
const cwd = process.cwd();
|
|
1336
|
-
const destDir =
|
|
1392
|
+
const destDir = import_node_path8.default.join(cwd, "generators", name);
|
|
1337
1393
|
try {
|
|
1338
1394
|
await import_promises7.default.access(destDir);
|
|
1339
1395
|
console.error(import_picocolors10.default.yellow(`Generator "${name}" already ejected at generators/${name}/`));
|
|
@@ -1354,14 +1410,14 @@ var init_eject = __esm({
|
|
|
1354
1410
|
const pkgPath = require.resolve(`@ryndesign/generator-${name}/package.json`, {
|
|
1355
1411
|
paths: [cwd]
|
|
1356
1412
|
});
|
|
1357
|
-
const pkgDir =
|
|
1358
|
-
const srcDir =
|
|
1413
|
+
const pkgDir = import_node_path8.default.dirname(pkgPath);
|
|
1414
|
+
const srcDir = import_node_path8.default.join(pkgDir, "src");
|
|
1359
1415
|
let sourceDir;
|
|
1360
1416
|
try {
|
|
1361
1417
|
await import_promises7.default.access(srcDir);
|
|
1362
1418
|
sourceDir = srcDir;
|
|
1363
1419
|
} catch {
|
|
1364
|
-
sourceDir =
|
|
1420
|
+
sourceDir = import_node_path8.default.join(pkgDir, "dist");
|
|
1365
1421
|
}
|
|
1366
1422
|
await import_promises7.default.mkdir(destDir, { recursive: true });
|
|
1367
1423
|
await copyDir(sourceDir, destDir);
|