zard-cli 1.0.0-beta.132 → 1.0.0-beta.134
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/README.md +92 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,60 +1,116 @@
|
|
|
1
|
-
#
|
|
1
|
+
# zard-cli
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The command line for [zard/ui](https://www.zardui.com): add beautiful, accessible Angular components to your project with a single command. The source lands in your codebase, so every component is yours to read and change.
|
|
4
4
|
|
|
5
|
-
<a alt="
|
|
6
|
-
<img align="center" width=100% src="https://www.zardui.com/images/github_banner.png"/>
|
|
5
|
+
<a alt="zard/ui" href="https://www.zardui.com/docs/cli" target="_blank" rel="noreferrer">
|
|
6
|
+
<img align="center" width="100%" src="https://www.zardui.com/images/github_banner.png" alt="zard/ui"/>
|
|
7
7
|
</a>
|
|
8
8
|
|
|
9
|
-
<p align="center">Made with ❤️ from 🇧🇷</p>
|
|
10
9
|
<p align="center">
|
|
11
|
-
<img src="https://img.shields.io/
|
|
10
|
+
<a href="https://www.npmjs.com/package/zard-cli"><img src="https://img.shields.io/npm/v/zard-cli?label=zard-cli" alt="npm version"/></a>
|
|
11
|
+
<a href="https://github.com/zard-ui/zardui"><img src="https://img.shields.io/github/stars/zard-ui/zardui" alt="GitHub stars"/></a>
|
|
12
|
+
<a href="https://github.com/zard-ui/zardui/blob/master/LICENSE.md"><img src="https://img.shields.io/npm/l/zard-cli" alt="license"/></a>
|
|
12
13
|
</p>
|
|
13
14
|
|
|
14
|
-
##
|
|
15
|
+
## Quick start
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
```bash
|
|
18
|
+
# 1. Set up zard/ui in your project
|
|
19
|
+
npx zard-cli@latest init
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
# 2. Add components; whatever they depend on comes along
|
|
22
|
+
npx zard-cli@latest add button card dialog
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
import { Component } from '@angular/core';
|
|
21
27
|
|
|
22
|
-
|
|
28
|
+
import { ZardButtonComponent } from '@/shared/components/button';
|
|
23
29
|
|
|
24
|
-
|
|
30
|
+
@Component({
|
|
31
|
+
selector: 'app-root',
|
|
32
|
+
imports: [ZardButtonComponent],
|
|
33
|
+
template: `
|
|
34
|
+
<z-button>Click me</z-button>
|
|
35
|
+
`,
|
|
36
|
+
})
|
|
37
|
+
export class AppComponent {}
|
|
38
|
+
```
|
|
25
39
|
|
|
26
|
-
|
|
40
|
+
Requires Node 20 or newer and an Angular project with Tailwind CSS v4 (`init` installs and wires Tailwind for you).
|
|
27
41
|
|
|
28
|
-
|
|
42
|
+
## Commands
|
|
29
43
|
|
|
30
|
-
|
|
31
|
-
2. Create your feature branch: `git checkout -b feat/#123-your-feature`
|
|
32
|
-
3. Develop with as many commits as you want
|
|
33
|
-
4. Open a PR to `master`
|
|
34
|
-
5. After review + merge = automatic release!
|
|
44
|
+
### `init`
|
|
35
45
|
|
|
36
|
-
|
|
46
|
+
Sets up your project: installs the dependencies, writes the theme tokens, maps the `@/` import alias, registers `provideZard()` and wires Tailwind into the build. The first question is the kind of project, and everything after it follows from that answer.
|
|
37
47
|
|
|
38
48
|
```bash
|
|
39
|
-
|
|
40
|
-
npm test # Run all tests
|
|
41
|
-
npm run build # Build production
|
|
42
|
-
npm run release # Automated release
|
|
49
|
+
npx zard-cli init
|
|
43
50
|
```
|
|
44
51
|
|
|
45
|
-
|
|
52
|
+
| Option | Description |
|
|
53
|
+
| ---------------------- | -------------------------------------------------------------------------- |
|
|
54
|
+
| `-y, --yes` | Skip the confirmation prompt |
|
|
55
|
+
| `-c, --cwd <cwd>` | Working directory, defaults to the current one |
|
|
56
|
+
| `-t, --type <type>` | Project type: `angular`, `angular-library`, `nx`, `nx-library` or `analog` |
|
|
57
|
+
| `-p, --project <name>` | Which workspace project to configure, when more than one is compatible |
|
|
46
58
|
|
|
47
|
-
|
|
59
|
+
Outside a terminal (CI, pipes) pass `--yes`, and `--type` to answer the first question:
|
|
48
60
|
|
|
49
|
-
|
|
61
|
+
```bash
|
|
62
|
+
npx zard-cli init --yes --type nx --project web
|
|
63
|
+
```
|
|
50
64
|
|
|
51
|
-
|
|
65
|
+
### `add`
|
|
52
66
|
|
|
53
|
-
|
|
54
|
-
<img src="https://img.shields.io/badge/WhatsApp-25D366?style=for-the-badge&logo=whatsapp&logoColor=white" alt="whatsapp" />
|
|
55
|
-
</a>
|
|
56
|
-
<img src="https://dcbadge.limes.pink/api/server/https://discord.com/invite/yP8Uj9rAX9" alt="discord" />
|
|
67
|
+
Adds components, blocks and utilities, resolving their dependencies.
|
|
57
68
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
69
|
+
```bash
|
|
70
|
+
npx zard-cli add [components...]
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
| Option | Description |
|
|
74
|
+
| ------------------- | -------------------------------------------------------------- |
|
|
75
|
+
| `-y, --yes` | Skip the confirmation prompt |
|
|
76
|
+
| `-o, --overwrite` | Overwrite existing files |
|
|
77
|
+
| `-c, --cwd <cwd>` | Working directory, defaults to the current one |
|
|
78
|
+
| `-a, --all` | Add every available component |
|
|
79
|
+
| `-p, --path <path>` | Write the components somewhere other than the configured alias |
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
npx zard-cli add dialog # one component
|
|
83
|
+
npx zard-cli add button card input # several at once
|
|
84
|
+
npx zard-cli add sidebar-07 # a block, with the components it needs
|
|
85
|
+
npx zard-cli add --all # everything
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Project types
|
|
89
|
+
|
|
90
|
+
The project type decides where the components live and what `init` configures. The paths below are the usual defaults: `init` derives the real ones from the project you pick, so an app outside the workspace root, or an Angular workspace that keeps its paths in `tsconfig.base.json`, gets those instead. Each path is also shown as an editable suggestion before anything is written.
|
|
91
|
+
|
|
92
|
+
| Type | Tailwind | TypeScript paths | Providers |
|
|
93
|
+
| ----------------- | -------------------------------------- | -------------------- | ---------------------------------- |
|
|
94
|
+
| `angular` | `.postcssrc.json` at the root | `tsconfig.json` | `src/app/app.config.ts` |
|
|
95
|
+
| `angular-library` | none: the consuming app owns the build | `tsconfig.json` | none |
|
|
96
|
+
| `nx` | `.postcssrc.json` inside the app | `tsconfig.base.json` | `apps/<app>/src/app/app.config.ts` |
|
|
97
|
+
| `nx-library` | none: the consuming app owns the build | `tsconfig.base.json` | none |
|
|
98
|
+
| `analog` | plugin in `vite.config.ts` | `tsconfig.json` | `src/app/app.config.ts` |
|
|
99
|
+
|
|
100
|
+
## Custom registry
|
|
101
|
+
|
|
102
|
+
The CLI installs from `https://zardui.com/r`. Point it at your own registry with an environment variable:
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
ZARD_REGISTRY_URL=https://registry.acme.dev/r npx zard-cli add button
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Documentation
|
|
109
|
+
|
|
110
|
+
- [CLI guide](https://www.zardui.com/docs/cli): every option, the non-interactive mode and troubleshooting
|
|
111
|
+
- [Components](https://www.zardui.com/docs/components)
|
|
112
|
+
- [MCP server](https://www.zardui.com/docs/mcp): let your AI assistant install components through this CLI
|
|
113
|
+
|
|
114
|
+
## License
|
|
115
|
+
|
|
116
|
+
[MIT](https://github.com/zard-ui/zardui/blob/master/LICENSE.md)
|