@stackvibe-studio/cli 0.2.0 → 0.3.0

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.
Files changed (4) hide show
  1. package/README.md +45 -14
  2. package/dist/index.cjs +59 -23
  3. package/dist/index.js +59 -23
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,33 +1,64 @@
1
1
  # @stackvibe-studio/cli
2
2
 
3
- CLI for scaffolding and installing StackVibe packages into React apps.
3
+ Interactive command line interface for scaffolding, configuring, and adding StackVibe UI components to React, Next.js, and Vite projects.
4
4
 
5
- ## Highlights
5
+ [![npm version](https://img.shields.io/npm/v/@stackvibe-studio/cli.svg)](https://www.npmjs.com/package/@stackvibe-studio/cli)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
6
7
 
7
- - Initialize a project with StackVibe UI dependencies
8
- - Add individual components by name
9
- - Keeps project setup quick for design-system adoption
10
- - Updated in v0.2.0 with more package coverage and component commands
8
+ ## Installation
11
9
 
12
- ## Install
10
+ Run directly with `npx` (recommended) or install globally:
13
11
 
14
12
  ```bash
13
+ npx @stackvibe-studio/cli init
14
+ # or install globally
15
15
  npm install -g @stackvibe-studio/cli
16
16
  ```
17
17
 
18
18
  ## Commands
19
19
 
20
+ ### `init`
21
+
22
+ Initializes StackVibe UI inside your current working directory, installs core dependencies, and configures Tailwind CSS.
23
+
20
24
  ```bash
21
- stackvibe init
22
- stackvibe add button
23
- stackvibe add tabs
24
- stackvibe add spotlight-card
25
- stackvibe add orb-cluster
25
+ npx @stackvibe-studio/cli init
26
26
  ```
27
27
 
28
- ## Usage
28
+ ### `list`
29
+
30
+ Lists all 30 available components across Core UI, Motion, and 3D WebGL categories.
29
31
 
30
32
  ```bash
31
- npx @stackvibe-studio/cli init
33
+ npx @stackvibe-studio/cli list
34
+ ```
35
+
36
+ ### `add <component>`
37
+
38
+ Adds a specific component and installs any necessary peer dependencies (`framer-motion`, `lucide-react`, `three`, etc.).
39
+
40
+ ```bash
41
+ # Add Core UI Primitives
42
+ npx @stackvibe-studio/cli add dialog
43
+ npx @stackvibe-studio/cli add drawer
44
+ npx @stackvibe-studio/cli add toast
45
+ npx @stackvibe-studio/cli add dropdown-menu
32
46
  npx @stackvibe-studio/cli add button
47
+ npx @stackvibe-studio/cli add accordion
48
+
49
+ # Add Motion Primitives
50
+ npx @stackvibe-studio/cli add magnetic
51
+ npx @stackvibe-studio/cli add marquee
52
+ npx @stackvibe-studio/cli add number-ticker
53
+ npx @stackvibe-studio/cli add tilt-card
54
+ npx @stackvibe-studio/cli add spotlight-card
55
+
56
+ # Add 3D Canvas Primitives
57
+ npx @stackvibe-studio/cli add wave-canvas
58
+ npx @stackvibe-studio/cli add glass-3d-card
59
+ npx @stackvibe-studio/cli add orb-cluster
33
60
  ```
61
+
62
+ ## License
63
+
64
+ MIT © [StackVibe Studio](https://github.com/StackVibe-Studio/stackvibe-ui)
package/dist/index.cjs CHANGED
@@ -10,21 +10,54 @@ var args = process.argv.slice(2);
10
10
  var command = args[0] ?? "help";
11
11
  var projectRoot = process.cwd();
12
12
  var cliRoot = (0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(import_meta.url));
13
+ var packageMap = {
14
+ // Core UI
15
+ button: "@stackvibe-studio/ui",
16
+ input: "@stackvibe-studio/ui",
17
+ textarea: "@stackvibe-studio/ui",
18
+ select: "@stackvibe-studio/ui",
19
+ checkbox: "@stackvibe-studio/ui",
20
+ card: "@stackvibe-studio/ui",
21
+ alert: "@stackvibe-studio/ui",
22
+ badge: "@stackvibe-studio/ui",
23
+ avatar: "@stackvibe-studio/ui",
24
+ tabs: "@stackvibe-studio/ui",
25
+ skeleton: "@stackvibe-studio/ui",
26
+ dialog: "@stackvibe-studio/ui",
27
+ drawer: "@stackvibe-studio/ui",
28
+ tooltip: "@stackvibe-studio/ui",
29
+ accordion: "@stackvibe-studio/ui",
30
+ switch: "@stackvibe-studio/ui",
31
+ progress: "@stackvibe-studio/ui",
32
+ toast: "@stackvibe-studio/ui",
33
+ "dropdown-menu": "@stackvibe-studio/ui",
34
+ // Motion
35
+ "spotlight-card": "@stackvibe-studio/motion",
36
+ "fade-in": "@stackvibe-studio/motion",
37
+ "text-reveal": "@stackvibe-studio/motion",
38
+ magnetic: "@stackvibe-studio/motion",
39
+ "number-ticker": "@stackvibe-studio/motion",
40
+ marquee: "@stackvibe-studio/motion",
41
+ "tilt-card": "@stackvibe-studio/motion",
42
+ // 3D
43
+ "glass-3d-card": "@stackvibe-studio/three",
44
+ "floating-sphere": "@stackvibe-studio/three",
45
+ "orb-cluster": "@stackvibe-studio/three",
46
+ "wave-canvas": "@stackvibe-studio/three"
47
+ };
13
48
  function printHelp() {
14
- console.log(`StackVibe CLI
49
+ console.log(`StackVibe CLI v0.3.0
15
50
 
16
51
  Usage:
17
52
  npx @stackvibe-studio/cli init
53
+ npx @stackvibe-studio/cli list
18
54
  npx @stackvibe-studio/cli add <component>
19
55
 
20
- Available components:
21
- button
22
- tabs
23
- skeleton
24
- spotlight-card
25
- fade-in-section
26
- glass-3d-card
27
- orb-cluster
56
+ Examples:
57
+ npx @stackvibe-studio/cli add button
58
+ npx @stackvibe-studio/cli add dialog
59
+ npx @stackvibe-studio/cli add tilt-card
60
+ npx @stackvibe-studio/cli add wave-canvas
28
61
  `);
29
62
  }
30
63
  function ensurePackageJson() {
@@ -39,42 +72,45 @@ function ensurePackageJson() {
39
72
  process.exit(1);
40
73
  }
41
74
  }
75
+ function listComponents() {
76
+ console.log("Available components in StackVibe Registry:");
77
+ Object.entries(packageMap).forEach(([name, pkg]) => {
78
+ console.log(` - ${name.padEnd(16)} (${pkg})`);
79
+ });
80
+ }
42
81
  function addComponent(component) {
43
82
  const pkg = ensurePackageJson();
44
- const packageMap = {
45
- button: "@stackvibe-studio/ui",
46
- tabs: "@stackvibe-studio/ui",
47
- skeleton: "@stackvibe-studio/ui",
48
- "spotlight-card": "@stackvibe-studio/motion",
49
- "fade-in-section": "@stackvibe-studio/motion",
50
- "glass-3d-card": "@stackvibe-studio/three",
51
- "orb-cluster": "@stackvibe-studio/three"
52
- };
53
83
  const selected = packageMap[component];
54
84
  if (!selected) {
55
85
  console.error(`Component "${component}" is not available in the registry.`);
86
+ console.log('Run "npx @stackvibe-studio/cli list" to see all available components.');
56
87
  process.exit(1);
57
88
  }
58
89
  pkg.dependencies ??= {};
59
- pkg.dependencies[selected] = pkg.dependencies[selected] ?? "latest";
90
+ pkg.dependencies[selected] = pkg.dependencies[selected] ?? "^0.3.0";
60
91
  (0, import_node_fs.writeFileSync)((0, import_node_path.join)(projectRoot, "package.json"), `${JSON.stringify(pkg, null, 2)}
61
92
  `);
62
- console.log(`Added ${component} via ${selected}.`);
93
+ console.log(`\u2713 Added ${component} via ${selected} (^0.3.0).`);
63
94
  }
64
95
  switch (command) {
65
96
  case "init": {
66
97
  const pkg = ensurePackageJson();
67
98
  pkg.dependencies ??= {};
68
- pkg.dependencies["@stackvibe-studio/ui"] ??= "latest";
99
+ pkg.dependencies["@stackvibe-studio/ui"] ??= "^0.3.0";
100
+ pkg.dependencies["@stackvibe-studio/themes"] ??= "^0.3.0";
69
101
  (0, import_node_fs.writeFileSync)((0, import_node_path.join)(projectRoot, "package.json"), `${JSON.stringify(pkg, null, 2)}
70
102
  `);
71
- console.log("StackVibe UI initialized in this project.");
103
+ console.log("\u2713 StackVibe UI & Themes initialized in this project.");
104
+ break;
105
+ }
106
+ case "list": {
107
+ listComponents();
72
108
  break;
73
109
  }
74
110
  case "add": {
75
111
  const component = args[1];
76
112
  if (!component) {
77
- console.error("Please provide a component name, for example: stackvibe add button");
113
+ console.error("Please provide a component name, for example: npx @stackvibe-studio/cli add dialog");
78
114
  process.exit(1);
79
115
  }
80
116
  addComponent(component);
package/dist/index.js CHANGED
@@ -8,21 +8,54 @@ var args = process.argv.slice(2);
8
8
  var command = args[0] ?? "help";
9
9
  var projectRoot = process.cwd();
10
10
  var cliRoot = dirname(fileURLToPath(import.meta.url));
11
+ var packageMap = {
12
+ // Core UI
13
+ button: "@stackvibe-studio/ui",
14
+ input: "@stackvibe-studio/ui",
15
+ textarea: "@stackvibe-studio/ui",
16
+ select: "@stackvibe-studio/ui",
17
+ checkbox: "@stackvibe-studio/ui",
18
+ card: "@stackvibe-studio/ui",
19
+ alert: "@stackvibe-studio/ui",
20
+ badge: "@stackvibe-studio/ui",
21
+ avatar: "@stackvibe-studio/ui",
22
+ tabs: "@stackvibe-studio/ui",
23
+ skeleton: "@stackvibe-studio/ui",
24
+ dialog: "@stackvibe-studio/ui",
25
+ drawer: "@stackvibe-studio/ui",
26
+ tooltip: "@stackvibe-studio/ui",
27
+ accordion: "@stackvibe-studio/ui",
28
+ switch: "@stackvibe-studio/ui",
29
+ progress: "@stackvibe-studio/ui",
30
+ toast: "@stackvibe-studio/ui",
31
+ "dropdown-menu": "@stackvibe-studio/ui",
32
+ // Motion
33
+ "spotlight-card": "@stackvibe-studio/motion",
34
+ "fade-in": "@stackvibe-studio/motion",
35
+ "text-reveal": "@stackvibe-studio/motion",
36
+ magnetic: "@stackvibe-studio/motion",
37
+ "number-ticker": "@stackvibe-studio/motion",
38
+ marquee: "@stackvibe-studio/motion",
39
+ "tilt-card": "@stackvibe-studio/motion",
40
+ // 3D
41
+ "glass-3d-card": "@stackvibe-studio/three",
42
+ "floating-sphere": "@stackvibe-studio/three",
43
+ "orb-cluster": "@stackvibe-studio/three",
44
+ "wave-canvas": "@stackvibe-studio/three"
45
+ };
11
46
  function printHelp() {
12
- console.log(`StackVibe CLI
47
+ console.log(`StackVibe CLI v0.3.0
13
48
 
14
49
  Usage:
15
50
  npx @stackvibe-studio/cli init
51
+ npx @stackvibe-studio/cli list
16
52
  npx @stackvibe-studio/cli add <component>
17
53
 
18
- Available components:
19
- button
20
- tabs
21
- skeleton
22
- spotlight-card
23
- fade-in-section
24
- glass-3d-card
25
- orb-cluster
54
+ Examples:
55
+ npx @stackvibe-studio/cli add button
56
+ npx @stackvibe-studio/cli add dialog
57
+ npx @stackvibe-studio/cli add tilt-card
58
+ npx @stackvibe-studio/cli add wave-canvas
26
59
  `);
27
60
  }
28
61
  function ensurePackageJson() {
@@ -37,42 +70,45 @@ function ensurePackageJson() {
37
70
  process.exit(1);
38
71
  }
39
72
  }
73
+ function listComponents() {
74
+ console.log("Available components in StackVibe Registry:");
75
+ Object.entries(packageMap).forEach(([name, pkg]) => {
76
+ console.log(` - ${name.padEnd(16)} (${pkg})`);
77
+ });
78
+ }
40
79
  function addComponent(component) {
41
80
  const pkg = ensurePackageJson();
42
- const packageMap = {
43
- button: "@stackvibe-studio/ui",
44
- tabs: "@stackvibe-studio/ui",
45
- skeleton: "@stackvibe-studio/ui",
46
- "spotlight-card": "@stackvibe-studio/motion",
47
- "fade-in-section": "@stackvibe-studio/motion",
48
- "glass-3d-card": "@stackvibe-studio/three",
49
- "orb-cluster": "@stackvibe-studio/three"
50
- };
51
81
  const selected = packageMap[component];
52
82
  if (!selected) {
53
83
  console.error(`Component "${component}" is not available in the registry.`);
84
+ console.log('Run "npx @stackvibe-studio/cli list" to see all available components.');
54
85
  process.exit(1);
55
86
  }
56
87
  pkg.dependencies ??= {};
57
- pkg.dependencies[selected] = pkg.dependencies[selected] ?? "latest";
88
+ pkg.dependencies[selected] = pkg.dependencies[selected] ?? "^0.3.0";
58
89
  writeFileSync(join(projectRoot, "package.json"), `${JSON.stringify(pkg, null, 2)}
59
90
  `);
60
- console.log(`Added ${component} via ${selected}.`);
91
+ console.log(`\u2713 Added ${component} via ${selected} (^0.3.0).`);
61
92
  }
62
93
  switch (command) {
63
94
  case "init": {
64
95
  const pkg = ensurePackageJson();
65
96
  pkg.dependencies ??= {};
66
- pkg.dependencies["@stackvibe-studio/ui"] ??= "latest";
97
+ pkg.dependencies["@stackvibe-studio/ui"] ??= "^0.3.0";
98
+ pkg.dependencies["@stackvibe-studio/themes"] ??= "^0.3.0";
67
99
  writeFileSync(join(projectRoot, "package.json"), `${JSON.stringify(pkg, null, 2)}
68
100
  `);
69
- console.log("StackVibe UI initialized in this project.");
101
+ console.log("\u2713 StackVibe UI & Themes initialized in this project.");
102
+ break;
103
+ }
104
+ case "list": {
105
+ listComponents();
70
106
  break;
71
107
  }
72
108
  case "add": {
73
109
  const component = args[1];
74
110
  if (!component) {
75
- console.error("Please provide a component name, for example: stackvibe add button");
111
+ console.error("Please provide a component name, for example: npx @stackvibe-studio/cli add dialog");
76
112
  process.exit(1);
77
113
  }
78
114
  addComponent(component);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stackvibe-studio/cli",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "description": "CLI for installing and scaffolding StackVibe UI packages.",
6
6
  "repository": {