ui-thing 0.2.9 → 0.3.1

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 (38) hide show
  1. package/.claude/settings.local.json +5 -0
  2. package/.github/workflows/main.yml +7 -4
  3. package/.github/workflows/test.yml +7 -4
  4. package/.prettierrc +1 -1
  5. package/CHANGELOG.md +52 -0
  6. package/README.md +208 -21
  7. package/bun.lock +171 -134
  8. package/dist/index.js +28 -25
  9. package/dist/index.js.map +1 -1
  10. package/package.json +15 -14
  11. package/src/commands/add.ts +41 -12
  12. package/src/commands/block.ts +5 -3
  13. package/src/commands/list.ts +48 -0
  14. package/src/commands/prose.ts +7 -3
  15. package/src/commands/remove.ts +109 -0
  16. package/src/commands/theme.ts +5 -14
  17. package/src/commands/update.ts +81 -0
  18. package/src/index.ts +6 -0
  19. package/src/types.ts +12 -0
  20. package/src/utils/config.ts +9 -16
  21. package/src/utils/constants.ts +1 -0
  22. package/src/utils/fetchBlockCategories.ts +13 -11
  23. package/src/utils/fetchBlocks.ts +13 -11
  24. package/src/utils/fetchComponents.ts +13 -11
  25. package/src/utils/fetchProseComponents.ts +13 -11
  26. package/src/utils/installPackages.ts +30 -4
  27. package/src/utils/installValidator.ts +3 -3
  28. package/src/utils/logger.ts +9 -0
  29. package/src/utils/uiConfigPrompt.ts +3 -6
  30. package/tests/commands/add.test.ts +136 -0
  31. package/tests/commands/list.test.ts +111 -0
  32. package/tests/commands/remove.test.ts +151 -0
  33. package/tests/commands/update.test.ts +127 -0
  34. package/tests/utils/fetchBlockCategories.test.ts +14 -2
  35. package/tests/utils/fetchBlocks.test.ts +14 -2
  36. package/tests/utils/fetchComponents.test.ts +10 -4
  37. package/tests/utils/fetchProseComponents.test.ts +14 -2
  38. package/tests/utils/installPackages.test.ts +36 -3
@@ -0,0 +1,5 @@
1
+ {
2
+ "permissions": {
3
+ "allow": ["Bash(bun run *)", "Bash(git *)"]
4
+ }
5
+ }
@@ -8,12 +8,15 @@ on:
8
8
  jobs:
9
9
  build:
10
10
  runs-on: ubuntu-latest
11
+ strategy:
12
+ matrix:
13
+ node-version: ["20.x", "22.x", "lts/*"]
11
14
  steps:
12
- - uses: actions/checkout@v4
15
+ - uses: actions/checkout@v7
16
+ - uses: actions/setup-node@v6
17
+ with:
18
+ node-version: ${{ matrix.node-version }}
13
19
  - name: Install dependencies
14
20
  run: npm install
15
- - uses: actions/setup-node@v4
16
- with:
17
- node-version: "18.x"
18
21
  - name: Build
19
22
  run: npm run format && npm run build
@@ -6,13 +6,16 @@ on:
6
6
  - "**"
7
7
 
8
8
  jobs:
9
- build:
9
+ test:
10
10
  runs-on: ubuntu-latest
11
+ strategy:
12
+ matrix:
13
+ node-version: ["20.x", "22.x", "lts/*"]
11
14
  steps:
12
- - uses: actions/checkout@v4
13
- - uses: actions/setup-node@v4
15
+ - uses: actions/checkout@v7
16
+ - uses: actions/setup-node@v6
14
17
  with:
15
- node-version: "22.x"
18
+ node-version: ${{ matrix.node-version }}
16
19
  - name: Install dependencies
17
20
  run: npm install
18
21
  - name: Test
package/.prettierrc CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "arrowParens": "always",
3
3
  "endOfLine": "lf",
4
- "plugins": ["@ianvs/prettier-plugin-sort-imports"],
4
+ "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-packagejson"],
5
5
  "printWidth": 100,
6
6
  "semi": true,
7
7
  "singleQuote": false,
package/CHANGELOG.md CHANGED
@@ -1,5 +1,57 @@
1
1
  # Changelog
2
2
 
3
+ ## v0.3.1
4
+
5
+ [compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.3.0...v0.3.1)
6
+
7
+ ### 🚀 Enhancements
8
+
9
+ - **add:** Add --skip-config flag to install components without a config file ([70dcea2](https://github.com/BayBreezy/ui-thing-cli/commit/70dcea2))
10
+
11
+ ### 📖 Documentation
12
+
13
+ - **readme:** Rewrite with full command reference for v0.3.0 ([ce3c6ba](https://github.com/BayBreezy/ui-thing-cli/commit/ce3c6ba))
14
+
15
+ ### 🤖 CI
16
+
17
+ - Run test and build workflows across node 20, 22, and lts ([73e1c8d](https://github.com/BayBreezy/ui-thing-cli/commit/73e1c8d))
18
+
19
+ ### ❤️ Contributors
20
+
21
+ - Behon Baker ([@BayBreezy](https://github.com/BayBreezy))
22
+
23
+ ## v0.3.0
24
+
25
+ [compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.2.9...v0.3.0)
26
+
27
+ ### 🚀 Enhancements
28
+
29
+ - **Deno support:** Deno is now a valid package manager choice during `init`. The CLI uses `deno add npm:<pkg>` for dependencies, `--dev` instead of `-D` for dev dependencies, and `deno run -A npm:nuxt prepare` for the post-install step ([e94c67d](https://github.com/BayBreezy/ui-thing-cli/commit/e94c67d))
30
+ - **`list` command:** New `ui-thing list` command displays all available components. Pass `--installed` to filter to only components whose files are already present in your project ([fdf5784](https://github.com/BayBreezy/ui-thing-cli/commit/fdf5784))
31
+ - **`update` command:** New `ui-thing update [names...]` command re-fetches component files from the API and overwrites them in place. Omit names to pick from a list of installed components ([c1ee7ab](https://github.com/BayBreezy/ui-thing-cli/commit/c1ee7ab))
32
+ - **`remove` command:** New `ui-thing remove [names...]` command deletes installed component files (including utils and composables). Omit names to pick from a list of installed components. Prompts for confirmation before deleting ([653d897](https://github.com/BayBreezy/ui-thing-cli/commit/653d897))
33
+ - **Docs links after install:** After successfully installing a component via `add` or `prose`, the CLI now prints the documentation URL so you can jump straight to the component docs ([7f85822](https://github.com/BayBreezy/ui-thing-cli/commit/7f85822))
34
+
35
+ ### 🩹 Fixes
36
+
37
+ - **`bun` and `pnpm` add command:** Both package managers were incorrectly using `install` instead of `add` when installing component dependencies. This is now fixed ([e94c67d](https://github.com/BayBreezy/ui-thing-cli/commit/e94c67d))
38
+ - **Exit codes:** Error paths (missing config file, incomplete configuration) now correctly exit with code `1` instead of `0`, making the CLI usable in CI pipelines ([dfea222](https://github.com/BayBreezy/ui-thing-cli/commit/dfea222))
39
+ - **`spawnSync` exit status:** The `prose` and `block` commands now check `result.status !== 0` in addition to `result.error`, so a failed component installer script no longer silently passes ([a9e92ff](https://github.com/BayBreezy/ui-thing-cli/commit/a9e92ff))
40
+ - **API error handling:** All four fetch utilities (`fetchComponents`, `fetchProseComponents`, `fetchBlocks`, `fetchBlockCategories`) now catch network errors and print a clear message instead of crashing with an unhandled rejection ([78b1070](https://github.com/BayBreezy/ui-thing-cli/commit/78b1070))
41
+ - **`.npmrc` safe merge (pnpm):** When using pnpm, the CLI previously overwrote `.npmrc` entirely. It now reads the existing file and only appends the lines that are not already present ([9a6af69](https://github.com/BayBreezy/ui-thing-cli/commit/9a6af69))
42
+
43
+ ### 💅 Refactors
44
+
45
+ - **Centralized logger:** All ad-hoc `console.log(kleur...)` calls have been replaced with a new `logger` utility (`src/utils/logger.ts`) that wraps consola. This gives consistent formatting across every command and makes it easy to redirect output in the future ([748650b](https://github.com/BayBreezy/ui-thing-cli/commit/748650b))
46
+
47
+ ### 🏡 Chore
48
+
49
+ - Update all dependencies to latest versions ([8799650](https://github.com/BayBreezy/ui-thing-cli/commit/8799650))
50
+
51
+ ### ❤️ Contributors
52
+
53
+ - Behon Baker ([@BayBreezy](https://github.com/BayBreezy))
54
+
3
55
  ## v0.2.9
4
56
 
5
57
  [compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.2.8...v0.2.9)
package/README.md CHANGED
@@ -2,45 +2,64 @@
2
2
 
3
3
  ![Cover Image](https://uithing.com/cover.png)
4
4
 
5
+ A CLI for adding [UI Thing](https://uithing.com) components to your Nuxt project. Pick only the components you need — no bloat, no lock-in.
6
+
5
7
  ## Credits
6
8
 
7
- - shadcn/ui
8
- - Radiv-Vue
9
- - Reka UI
10
- - TailwindCSS
11
- - Nuxt
12
- - Nuxt UI
9
+ - [shadcn/ui](https://ui.shadcn.com) — design inspiration
10
+ - [Reka UI](https://reka-ui.com) — headless primitives
11
+ - [TailwindCSS](https://tailwindcss.com)
12
+ - [Nuxt](https://nuxt.com)
13
13
 
14
- Thanks to the maintainers of the other third party libraries used in this project.
14
+ Thanks to the maintainers of all third-party libraries used in this project.
15
15
 
16
- ## 💸 Support Me
16
+ ## 💸 Support
17
17
 
18
- If you can 😊
18
+ If you find this useful 😊
19
19
 
20
20
  <a href="https://buymeacoffee.com/llehXIrI8g" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important" ></a>
21
21
 
22
+ ---
23
+
22
24
  ## Getting Started
23
25
 
24
- - Create a Nuxt project
25
- - Install the dependencies
26
- - Run the init command
26
+ **1. Create a Nuxt project**
27
27
 
28
28
  ```bash
29
- npx ui-thing@latest init
29
+ npx nuxi@latest init my-app
30
+ cd my-app
30
31
  ```
31
32
 
32
- - Start the dev server
33
+ **2. Run the init command**
33
34
 
34
35
  ```bash
35
- npm run dev
36
+ npx ui-thing@latest init
36
37
  ```
37
38
 
38
- - Add components to your project with the `add` command
39
+ This sets up TailwindCSS, installs core dependencies, writes the theme CSS, and saves a `ui-thing.config.ts` to your project.
40
+
41
+ **3. Start adding components**
39
42
 
40
43
  ```bash
41
44
  npx ui-thing@latest add
42
45
  ```
43
46
 
47
+ ---
48
+
49
+ ## Package Manager Support
50
+
51
+ The CLI works with all major package managers. You will be asked to choose one during `init`.
52
+
53
+ | Manager | Supported |
54
+ |---------|-----------|
55
+ | npm | ✅ |
56
+ | yarn | ✅ |
57
+ | pnpm | ✅ |
58
+ | bun | ✅ |
59
+ | deno | ✅ |
60
+
61
+ ---
62
+
44
63
  ## Commands
45
64
 
46
65
  ### `init`
@@ -49,15 +68,147 @@ npx ui-thing@latest add
49
68
  npx ui-thing@latest init
50
69
  ```
51
70
 
52
- This command will install the dependencies and add the required configuration to your project. It will also add a `.prettierrc` file to your project.
71
+ Bootstraps your Nuxt project for UI Thing. This command:
72
+
73
+ - Installs all core dependencies (`reka-ui`, `tailwind-variants`, `@nuxt/fonts`, `@vueuse/nuxt`, etc.)
74
+ - Writes the Tailwind CSS theme file
75
+ - Registers required Nuxt modules
76
+ - Creates `ui-thing.config.ts` with your chosen paths and package manager
77
+
78
+ **Options**
79
+
80
+ | Flag | Description |
81
+ |------|-------------|
82
+ | `-y, --yes` | Skip all prompts and use defaults |
83
+
84
+ ---
53
85
 
54
86
  ### `add`
55
87
 
56
88
  ```bash
89
+ npx ui-thing@latest add [componentNames...]
90
+ ```
91
+
92
+ Adds one or more components to your project. If no names are passed, an interactive search lets you pick from the full library.
93
+
94
+ ```bash
95
+ # interactive selection
57
96
  npx ui-thing@latest add
97
+
98
+ # add specific components
99
+ npx ui-thing@latest add button input popover
100
+
101
+ # add every component at once
102
+ npx ui-thing@latest add --all
103
+ ```
104
+
105
+ After a component is added, the CLI prints a link to its documentation page.
106
+
107
+ **Options**
108
+
109
+ | Flag | Description |
110
+ |------|-------------|
111
+ | `-a, --all` | Add every available component in one shot |
112
+ | `--skip-config` | Add components without a `ui-thing.config.ts` file. Auto-detects the Nuxt version and uses its default paths |
113
+ | `--package-manager <pm>` | Set the package manager when using `--skip-config` (skips the PM prompt) |
114
+
115
+ **`--skip-config` example**
116
+
117
+ Useful when you just want the files without committing to the full config workflow:
118
+
119
+ ```bash
120
+ # prompts for package manager, uses Nuxt 4 defaults
121
+ npx ui-thing@latest add popover --skip-config
122
+
123
+ # fully non-interactive
124
+ npx ui-thing@latest add popover --skip-config --package-manager bun
58
125
  ```
59
126
 
60
- This command will add the components to your project.
127
+ > **Note:** Shared utility files installed by one component are also used by others. Removing them manually may break components that depend on them.
128
+
129
+ ---
130
+
131
+ ### `list`
132
+
133
+ ```bash
134
+ npx ui-thing@latest list
135
+ ```
136
+
137
+ Lists all components available in the UI Thing library.
138
+
139
+ ```bash
140
+ # show all available components
141
+ npx ui-thing@latest list
142
+
143
+ # show only components already installed in your project
144
+ npx ui-thing@latest list --installed
145
+ ```
146
+
147
+ **Options**
148
+
149
+ | Flag | Description |
150
+ |------|-------------|
151
+ | `--installed` | Filter to components whose files are already present in your project |
152
+
153
+ ---
154
+
155
+ ### `update`
156
+
157
+ ```bash
158
+ npx ui-thing@latest update [componentNames...]
159
+ ```
160
+
161
+ Re-fetches component files from the API and overwrites them with the latest version. Useful after a UI Thing release.
162
+
163
+ ```bash
164
+ # update specific components
165
+ npx ui-thing@latest update button input
166
+
167
+ # pick from installed components interactively
168
+ npx ui-thing@latest update
169
+ ```
170
+
171
+ ---
172
+
173
+ ### `remove`
174
+
175
+ ```bash
176
+ npx ui-thing@latest remove [componentNames...]
177
+ ```
178
+
179
+ Deletes installed component files from your project (component files, utils, and composables). Prompts for confirmation before deleting anything.
180
+
181
+ ```bash
182
+ # remove specific components
183
+ npx ui-thing@latest remove button
184
+
185
+ # pick from installed components interactively
186
+ npx ui-thing@latest remove
187
+ ```
188
+
189
+ > **Note:** Shared utility files used by multiple components will be deleted. Any other components that depend on them may stop working and will need to be re-added.
190
+
191
+ ---
192
+
193
+ ### `prose`
194
+
195
+ ```bash
196
+ npx ui-thing@latest prose
197
+ ```
198
+
199
+ Adds prose components (typography styles for rendered markdown content). Select from the available prose components interactively.
200
+
201
+ ---
202
+
203
+ ### `block`
204
+
205
+ ```bash
206
+ npx ui-thing@latest block
207
+ ```
208
+
209
+ Adds pre-built UI blocks (page sections, layouts, etc.) to your project. You can filter by category.
210
+
211
+ ---
61
212
 
62
213
  ### `theme`
63
214
 
@@ -65,7 +216,9 @@ This command will add the components to your project.
65
216
  npx ui-thing@latest theme
66
217
  ```
67
218
 
68
- This command will add the theme to your project.
219
+ Swaps your project's color theme. Overwrites the Tailwind CSS theme file with the chosen theme.
220
+
221
+ ---
69
222
 
70
223
  ### `prettier`
71
224
 
@@ -73,7 +226,9 @@ This command will add the theme to your project.
73
226
  npx ui-thing@latest prettier
74
227
  ```
75
228
 
76
- This command will add the prettier configuration to your project.
229
+ Adds a Prettier configuration pre-configured for Tailwind CSS class sorting. Safe to run on an existing project — it will offer to merge with your current `.prettierrc` if one exists.
230
+
231
+ ---
77
232
 
78
233
  ### `shortcuts`
79
234
 
@@ -81,4 +236,36 @@ This command will add the prettier configuration to your project.
81
236
  npx ui-thing@latest shortcuts
82
237
  ```
83
238
 
84
- This command will add the `shortcuts` composable to your project.
239
+ Adds a `useShortcuts` composable to your project for registering keyboard shortcuts.
240
+
241
+ ---
242
+
243
+ ## Configuration
244
+
245
+ Running `init` creates a `ui-thing.config.ts` file at the root of your project:
246
+
247
+ ```ts
248
+ export default {
249
+ theme: "zinc",
250
+ tailwindCSSLocation: "app/assets/css/tailwind.css",
251
+ componentsLocation: "app/components/Ui",
252
+ composablesLocation: "app/composables",
253
+ pluginsLocation: "app/plugins",
254
+ utilsLocation: "app/utils",
255
+ force: true,
256
+ useDefaultFilename: true,
257
+ packageManager: "bun",
258
+ };
259
+ ```
260
+
261
+ | Key | Description |
262
+ |-----|-------------|
263
+ | `theme` | Color theme (zinc, slate, rose, blue, etc.) |
264
+ | `tailwindCSSLocation` | Path to your Tailwind CSS file |
265
+ | `componentsLocation` | Where component `.vue` files are written |
266
+ | `composablesLocation` | Where composable files are written |
267
+ | `pluginsLocation` | Where plugin files are written |
268
+ | `utilsLocation` | Where utility files are written |
269
+ | `force` | Overwrite existing files without prompting |
270
+ | `useDefaultFilename` | Skip per-file path prompts when adding components |
271
+ | `packageManager` | Package manager used for installing dependencies |