@dinachi/cli 0.1.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.
- package/README.md +131 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +643 -0
- package/package.json +56 -0
- package/templates/accordion/accordion.tsx +85 -0
- package/templates/accordion/index.ts +1 -0
- package/templates/alert-dialog/alert-dialog.tsx +162 -0
- package/templates/alert-dialog/index.ts +13 -0
- package/templates/avatar/avatar.tsx +64 -0
- package/templates/avatar/index.ts +1 -0
- package/templates/button/button.tsx +54 -0
- package/templates/button/index.ts +2 -0
- package/templates/checkbox/checkbox.tsx +29 -0
- package/templates/checkbox/index.ts +1 -0
- package/templates/checkbox-group/checkbox-group.tsx +19 -0
- package/templates/checkbox-group/index.ts +1 -0
- package/templates/collapsible/collapsible.tsx +65 -0
- package/templates/collapsible/index.ts +1 -0
- package/templates/context-menu/context-menu.tsx +278 -0
- package/templates/context-menu/index.ts +17 -0
- package/templates/dialog/dialog.tsx +158 -0
- package/templates/dialog/index.ts +1 -0
- package/templates/field/field.tsx +119 -0
- package/templates/field/index.ts +1 -0
- package/templates/form/form.tsx +71 -0
- package/templates/form/index.ts +1 -0
- package/templates/input/index.ts +2 -0
- package/templates/input/input.tsx +17 -0
- package/templates/menubar/index.ts +18 -0
- package/templates/menubar/menubar.tsx +303 -0
- package/templates/navigation-menu/index.ts +13 -0
- package/templates/navigation-menu/navigation-menu.tsx +205 -0
- package/templates/preview-card/index.ts +1 -0
- package/templates/preview-card/preview-card.tsx +142 -0
- package/templates/select/index.ts +1 -0
- package/templates/select/select.tsx +208 -0
- package/templates/slider/index.ts +9 -0
- package/templates/slider/slider.tsx +121 -0
- package/templates/tabs/index.ts +7 -0
- package/templates/tabs/tabs.tsx +89 -0
- package/templates/toast/index.ts +1 -0
- package/templates/toast/toast.tsx +276 -0
- package/templates/toggle/index.ts +1 -0
- package/templates/toggle/toggle.tsx +83 -0
- package/templates/toolbar/index.ts +1 -0
- package/templates/toolbar/toolbar.tsx +124 -0
- package/templates/tooltip/index.ts +1 -0
- package/templates/tooltip/tooltip.tsx +217 -0
- package/templates/utils/utils.ts +7 -0
- package/templates/utils/variants.ts +7 -0
package/README.md
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
# @dinachi/cli
|
|
2
|
+
|
|
3
|
+
A CLI for adding Dinachi UI components to your project. Just like shadcn/ui, this tool copies component source code directly into your project, giving you full ownership and control.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install -g @dinachi/cli
|
|
9
|
+
# or
|
|
10
|
+
npx @dinachi/cli@latest init
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### Initialize Dinachi UI in your project
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npx dinachi init
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
This will:
|
|
22
|
+
- Set up the project configuration
|
|
23
|
+
- Install required dependencies
|
|
24
|
+
- Create utility functions
|
|
25
|
+
- Generate a `components.json` config file
|
|
26
|
+
|
|
27
|
+
### Add components
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npx dinachi add button
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
This will:
|
|
34
|
+
- Copy the button component source code to your project
|
|
35
|
+
- Place it in your configured components directory
|
|
36
|
+
- Show you which dependencies are required
|
|
37
|
+
|
|
38
|
+
### Available Commands
|
|
39
|
+
|
|
40
|
+
- `dinachi init` - Initialize Dinachi UI in your project
|
|
41
|
+
- `dinachi add <component>` - Add a component to your project
|
|
42
|
+
- `dinachi add <component> --overwrite` - Overwrite existing component files
|
|
43
|
+
|
|
44
|
+
### Available Components
|
|
45
|
+
|
|
46
|
+
- `accordion` - Collapsible content sections
|
|
47
|
+
- `alert-dialog` - Modal dialogs for important actions
|
|
48
|
+
- `avatar` - User profile images with fallbacks
|
|
49
|
+
- `button` - Clickable buttons with variants
|
|
50
|
+
- `checkbox` - Checkbox inputs
|
|
51
|
+
- `checkbox-group` - Grouped checkboxes
|
|
52
|
+
- `collapsible` - Collapsible content panels
|
|
53
|
+
- `context-menu` - Right-click context menus
|
|
54
|
+
- `dialog` - Modal dialogs
|
|
55
|
+
- `field` - Form field wrapper
|
|
56
|
+
- `form` - Form component with validation
|
|
57
|
+
- `input` - Text input fields
|
|
58
|
+
- `menubar` - Desktop-style menu bars
|
|
59
|
+
- `navigation-menu` - Navigation menu systems
|
|
60
|
+
- `preview-card` - Hover preview cards
|
|
61
|
+
- `select` - Dropdown select inputs
|
|
62
|
+
- `slider` - Range slider inputs
|
|
63
|
+
- `tabs` - Tabbed interfaces
|
|
64
|
+
- `toast` - Notification toasts
|
|
65
|
+
- `toggle` - Toggle switches
|
|
66
|
+
- `toolbar` - Tool button groups
|
|
67
|
+
- `tooltip` - Hover tooltips
|
|
68
|
+
|
|
69
|
+
## How it works
|
|
70
|
+
|
|
71
|
+
Unlike traditional component libraries, Dinachi UI copies the actual source code into your project. This means:
|
|
72
|
+
|
|
73
|
+
✅ **Full ownership** - The code is yours to modify
|
|
74
|
+
✅ **No runtime dependencies** - Only peer dependencies for utilities
|
|
75
|
+
✅ **Complete customization** - Change variants, styles, and behavior as needed
|
|
76
|
+
✅ **Zero abstractions** - See exactly how components work
|
|
77
|
+
|
|
78
|
+
## Configuration
|
|
79
|
+
|
|
80
|
+
After running `dinachi init`, you'll have a `components.json` file:
|
|
81
|
+
|
|
82
|
+
```json
|
|
83
|
+
{
|
|
84
|
+
"style": "default",
|
|
85
|
+
"rsc": false,
|
|
86
|
+
"tsx": true,
|
|
87
|
+
"tailwind": {
|
|
88
|
+
"config": "tailwind.config.js",
|
|
89
|
+
"css": "src/index.css",
|
|
90
|
+
"baseColor": "slate",
|
|
91
|
+
"cssVariables": true
|
|
92
|
+
},
|
|
93
|
+
"aliases": {
|
|
94
|
+
"components": "./src/components/ui",
|
|
95
|
+
"utils": "./src/lib/utils"
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Modifying Button Variants
|
|
101
|
+
|
|
102
|
+
Once you add the button component, you can modify the variants directly in your project:
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
// In your project: src/components/ui/button.tsx
|
|
106
|
+
const buttonVariants = cva(
|
|
107
|
+
"inline-flex items-center justify-center...",
|
|
108
|
+
{
|
|
109
|
+
variants: {
|
|
110
|
+
variant: {
|
|
111
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
112
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
113
|
+
// Add your own variants:
|
|
114
|
+
success: "bg-green-500 text-white hover:bg-green-600",
|
|
115
|
+
warning: "bg-yellow-500 text-white hover:bg-yellow-600",
|
|
116
|
+
},
|
|
117
|
+
// Add your own size variants:
|
|
118
|
+
size: {
|
|
119
|
+
default: "h-10 px-4 py-2",
|
|
120
|
+
sm: "h-9 rounded-md px-3",
|
|
121
|
+
lg: "h-11 rounded-md px-8",
|
|
122
|
+
xl: "h-12 rounded-md px-10", // Your custom size
|
|
123
|
+
icon: "h-10 w-10",
|
|
124
|
+
},
|
|
125
|
+
},
|
|
126
|
+
// ...
|
|
127
|
+
}
|
|
128
|
+
)
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
The variants live in **your** code, so you have complete control!
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
#!/usr/bin/env node
|