@hardimpactdev/craft-ui 0.0.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.
- package/LICENSE +21 -0
- package/README.md +273 -0
- package/package.json +122 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Hard Impact
|
|
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.
|
package/README.md
ADDED
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
# Craft UI
|
|
2
|
+
|
|
3
|
+
A Vue 3 component library for building clean, calm user interfaces. Built on top of [Nuxt UI](https://ui.nuxt.com) with additional layout, navigation, and data visualization components.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Layout Components** - Application shells, sidebars, and navigation
|
|
8
|
+
- **Kanban Board** - Drag-and-drop kanban with vue-draggable-plus
|
|
9
|
+
- **Command Palette** - Keyboard-driven command interface
|
|
10
|
+
- **Charts** - Chart.js integration with clean defaults
|
|
11
|
+
- **Vite Plugin** - Pre-configured setup for Laravel + Inertia apps
|
|
12
|
+
- **Dark Mode** - Full dark mode support across all components
|
|
13
|
+
- **TypeScript** - Fully typed components and utilities
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @hardimpactdev/craft-ui
|
|
19
|
+
# or
|
|
20
|
+
bun add @hardimpactdev/craft-ui
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
### Vite Configuration
|
|
26
|
+
|
|
27
|
+
Use the provided Vite configuration helper for Laravel + Inertia + Vue apps:
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
// vite.config.ts
|
|
31
|
+
import { defineCraftConfig } from '@hardimpactdev/craft-ui/vite';
|
|
32
|
+
|
|
33
|
+
export default defineCraftConfig({
|
|
34
|
+
laravel: {
|
|
35
|
+
input: ['resources/js/app.ts'],
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
This includes:
|
|
41
|
+
- Laravel Vite plugin
|
|
42
|
+
- Nuxt UI (components without U prefix)
|
|
43
|
+
- TailwindCSS v4
|
|
44
|
+
- Vue dev tools
|
|
45
|
+
- i18n support
|
|
46
|
+
|
|
47
|
+
### Import Styles
|
|
48
|
+
|
|
49
|
+
```typescript
|
|
50
|
+
// app.ts
|
|
51
|
+
import '@hardimpactdev/craft-ui/style.css';
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Components
|
|
55
|
+
|
|
56
|
+
### Layout
|
|
57
|
+
|
|
58
|
+
```vue
|
|
59
|
+
<script setup>
|
|
60
|
+
import { AppShell, AppSidebar, AppContent } from '@hardimpactdev/craft-ui';
|
|
61
|
+
</script>
|
|
62
|
+
|
|
63
|
+
<template>
|
|
64
|
+
<AppShell>
|
|
65
|
+
<AppSidebar>
|
|
66
|
+
<!-- Navigation -->
|
|
67
|
+
</AppSidebar>
|
|
68
|
+
<AppContent>
|
|
69
|
+
<!-- Page content -->
|
|
70
|
+
</AppContent>
|
|
71
|
+
</AppShell>
|
|
72
|
+
</template>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Kanban Board
|
|
76
|
+
|
|
77
|
+
```vue
|
|
78
|
+
<script setup>
|
|
79
|
+
import {
|
|
80
|
+
Kanban,
|
|
81
|
+
KanbanColumn,
|
|
82
|
+
KanbanColumnHeader,
|
|
83
|
+
KanbanColumnCards,
|
|
84
|
+
KanbanCard
|
|
85
|
+
} from '@hardimpactdev/craft-ui';
|
|
86
|
+
import { ref } from 'vue';
|
|
87
|
+
|
|
88
|
+
const todoCards = ref([
|
|
89
|
+
{ id: 1, title: 'Task 1' },
|
|
90
|
+
{ id: 2, title: 'Task 2' },
|
|
91
|
+
]);
|
|
92
|
+
</script>
|
|
93
|
+
|
|
94
|
+
<template>
|
|
95
|
+
<Kanban>
|
|
96
|
+
<KanbanColumn id="todo">
|
|
97
|
+
<KanbanColumnHeader heading="To Do" :count="todoCards.length" />
|
|
98
|
+
<KanbanColumnCards v-model="todoCards" group="kanban">
|
|
99
|
+
<template #card="{ card }">
|
|
100
|
+
<KanbanCard :id="card.id" :heading="card.title" />
|
|
101
|
+
</template>
|
|
102
|
+
</KanbanColumnCards>
|
|
103
|
+
</KanbanColumn>
|
|
104
|
+
</Kanban>
|
|
105
|
+
</template>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Command Palette
|
|
109
|
+
|
|
110
|
+
```vue
|
|
111
|
+
<script setup>
|
|
112
|
+
import { CommandModal } from '@hardimpactdev/craft-ui';
|
|
113
|
+
import { ref } from 'vue';
|
|
114
|
+
|
|
115
|
+
const isOpen = ref(false);
|
|
116
|
+
const groups = [
|
|
117
|
+
{
|
|
118
|
+
id: 'actions',
|
|
119
|
+
label: 'Actions',
|
|
120
|
+
items: [
|
|
121
|
+
{ id: 'new', label: 'New Document', icon: 'i-lucide-plus' },
|
|
122
|
+
{ id: 'search', label: 'Search', icon: 'i-lucide-search' },
|
|
123
|
+
],
|
|
124
|
+
},
|
|
125
|
+
];
|
|
126
|
+
</script>
|
|
127
|
+
|
|
128
|
+
<template>
|
|
129
|
+
<CommandModal v-model:open="isOpen" :groups="groups" />
|
|
130
|
+
</template>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Charts
|
|
134
|
+
|
|
135
|
+
```vue
|
|
136
|
+
<script setup>
|
|
137
|
+
import { ChartLine } from '@hardimpactdev/craft-ui';
|
|
138
|
+
|
|
139
|
+
const data = {
|
|
140
|
+
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
|
141
|
+
datasets: [{
|
|
142
|
+
label: 'Revenue',
|
|
143
|
+
data: [30, 40, 35, 50, 55, 60],
|
|
144
|
+
}],
|
|
145
|
+
};
|
|
146
|
+
</script>
|
|
147
|
+
|
|
148
|
+
<template>
|
|
149
|
+
<ChartLine :data="data" class="h-64" />
|
|
150
|
+
</template>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## Available Components
|
|
154
|
+
|
|
155
|
+
### Layout
|
|
156
|
+
- `AppShell` - Application shell with sidebar support
|
|
157
|
+
- `AppSidebar` - Collapsible sidebar navigation
|
|
158
|
+
- `AppSidebarHeader` - Sidebar header with logo and collapse toggle
|
|
159
|
+
- `AppContent` - Main content area
|
|
160
|
+
- `NavMain` / `NavFooter` / `NavUser` - Navigation components
|
|
161
|
+
- `Breadcrumbs` - Breadcrumb navigation
|
|
162
|
+
- `UserInfo` - User avatar and info display
|
|
163
|
+
- `UserMenuContent` - User dropdown menu content
|
|
164
|
+
|
|
165
|
+
### Layouts (Full Page)
|
|
166
|
+
- `AppLayout` - Base application layout
|
|
167
|
+
- `AppSidebarLayout` - Application layout with sidebar
|
|
168
|
+
- `AuthSimpleLayout` - Simple authentication page layout
|
|
169
|
+
- `SettingsLayout` - Settings page layout
|
|
170
|
+
|
|
171
|
+
### Kanban
|
|
172
|
+
- `Kanban` - Main container
|
|
173
|
+
- `KanbanColumn` - Column wrapper
|
|
174
|
+
- `KanbanColumnHeader` - Header with title, count, badge
|
|
175
|
+
- `KanbanColumnCards` - Draggable cards container
|
|
176
|
+
- `KanbanColumnFooter` - Footer slot
|
|
177
|
+
- `KanbanCard` - Individual card
|
|
178
|
+
|
|
179
|
+
### Command
|
|
180
|
+
- `Command` - Standalone command palette
|
|
181
|
+
- `CommandModal` - Modal version (⌘K shortcut)
|
|
182
|
+
|
|
183
|
+
### Toast
|
|
184
|
+
- `Toaster` - Toast notification container
|
|
185
|
+
- `useToast` - Composable for triggering toasts
|
|
186
|
+
|
|
187
|
+
```vue
|
|
188
|
+
<script setup>
|
|
189
|
+
import { Toaster, useToast } from '@hardimpactdev/craft-ui';
|
|
190
|
+
|
|
191
|
+
const toast = useToast();
|
|
192
|
+
|
|
193
|
+
function showToast() {
|
|
194
|
+
toast.add({
|
|
195
|
+
title: 'Success!',
|
|
196
|
+
description: 'Your changes have been saved.',
|
|
197
|
+
color: 'success',
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
</script>
|
|
201
|
+
|
|
202
|
+
<template>
|
|
203
|
+
<Toaster />
|
|
204
|
+
<Button @click="showToast">Show Toast</Button>
|
|
205
|
+
</template>
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Charts
|
|
209
|
+
- `Chart` - Generic chart component
|
|
210
|
+
- `ChartLine` - Line chart
|
|
211
|
+
- `ChartBar` - Bar chart
|
|
212
|
+
- `ChartArea` - Area chart
|
|
213
|
+
- `ChartPie` - Pie chart
|
|
214
|
+
- `ChartDoughnut` - Doughnut chart
|
|
215
|
+
|
|
216
|
+
### Form Components
|
|
217
|
+
- `Label` - Form field label
|
|
218
|
+
- `InputError` - Error message display for form inputs
|
|
219
|
+
|
|
220
|
+
### Typography
|
|
221
|
+
- `Heading` - Page heading component
|
|
222
|
+
- `HeadingSmall` - Smaller heading component
|
|
223
|
+
- `TextLink` - Styled link component
|
|
224
|
+
|
|
225
|
+
### Utilities
|
|
226
|
+
- `PlaceholderPattern` - SVG pattern for empty states
|
|
227
|
+
- `Icon` - Icon component wrapper
|
|
228
|
+
- `AppLogo` - Application logo component
|
|
229
|
+
- `AppLogoIcon` - Icon-only logo component
|
|
230
|
+
- `AppearanceTabs` - Theme/appearance toggle tabs
|
|
231
|
+
- `DeleteUser` - User account deletion component
|
|
232
|
+
|
|
233
|
+
## Composables
|
|
234
|
+
|
|
235
|
+
- `useAppearance` - Theme/appearance management
|
|
236
|
+
- `useInitials` - Generate initials from names
|
|
237
|
+
- `useLanguage` - Language/locale utilities
|
|
238
|
+
- `useToast` - Toast notification management
|
|
239
|
+
|
|
240
|
+
## Utilities
|
|
241
|
+
|
|
242
|
+
- `cn` - Class name helper (clsx + tailwind-merge)
|
|
243
|
+
- `__` - Translation helper (from laravel-vue-i18n)
|
|
244
|
+
- `can` - Permission check utility
|
|
245
|
+
|
|
246
|
+
## Nuxt UI Re-exports
|
|
247
|
+
|
|
248
|
+
The library re-exports commonly used Nuxt UI components:
|
|
249
|
+
- `Button`, `Input`, `Checkbox`, `Select`, `Textarea`, `FormField`
|
|
250
|
+
|
|
251
|
+
## Development
|
|
252
|
+
|
|
253
|
+
```bash
|
|
254
|
+
# Install dependencies
|
|
255
|
+
bun install
|
|
256
|
+
|
|
257
|
+
# Run Storybook
|
|
258
|
+
bun run storybook
|
|
259
|
+
|
|
260
|
+
# Build library
|
|
261
|
+
bun run build
|
|
262
|
+
|
|
263
|
+
# Run tests
|
|
264
|
+
bun vitest --project=storybook --run
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
## Documentation
|
|
268
|
+
|
|
269
|
+
Component documentation is available in Storybook. Run `bun run storybook` to explore components with live examples.
|
|
270
|
+
|
|
271
|
+
## License
|
|
272
|
+
|
|
273
|
+
[MIT](LICENSE)
|
package/package.json
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@hardimpactdev/craft-ui",
|
|
3
|
+
"description": "A Vue 3 component library for building clean, calm user interfaces. Built on Nuxt UI with layout, navigation, kanban, and chart components.",
|
|
4
|
+
"author": "Hard Impact <hello@hardimpact.dev>",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"vue",
|
|
8
|
+
"vue3",
|
|
9
|
+
"components",
|
|
10
|
+
"ui",
|
|
11
|
+
"nuxt-ui",
|
|
12
|
+
"tailwindcss",
|
|
13
|
+
"laravel",
|
|
14
|
+
"inertia",
|
|
15
|
+
"kanban",
|
|
16
|
+
"charts",
|
|
17
|
+
"typescript"
|
|
18
|
+
],
|
|
19
|
+
"homepage": "https://github.com/hardimpactdev/craft-ui#readme",
|
|
20
|
+
"bugs": {
|
|
21
|
+
"url": "https://github.com/hardimpactdev/craft-ui/issues"
|
|
22
|
+
},
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "git+https://github.com/hardimpactdev/craft-ui.git"
|
|
26
|
+
},
|
|
27
|
+
"publishConfig": {
|
|
28
|
+
"access": "public",
|
|
29
|
+
"registry": "https://registry.npmjs.org/"
|
|
30
|
+
},
|
|
31
|
+
"files": [
|
|
32
|
+
"dist"
|
|
33
|
+
],
|
|
34
|
+
"include": [
|
|
35
|
+
"src"
|
|
36
|
+
],
|
|
37
|
+
"main": "dist/craft-ui.js",
|
|
38
|
+
"types": "./dist/index.d.ts",
|
|
39
|
+
"exports": {
|
|
40
|
+
".": {
|
|
41
|
+
"import": "./dist/craft-ui.js",
|
|
42
|
+
"types": "./dist/index.d.ts"
|
|
43
|
+
},
|
|
44
|
+
"./vite": {
|
|
45
|
+
"import": "./dist/vite/defineCraftConfig.js",
|
|
46
|
+
"types": "./dist/src/vite/defineCraftConfig.d.ts"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
"version": "0.0.1",
|
|
50
|
+
"type": "module",
|
|
51
|
+
"scripts": {
|
|
52
|
+
"dev": "vite",
|
|
53
|
+
"build": "vue-tsc -b && vite build && npm run copy-vite-plugin",
|
|
54
|
+
"build-watch": "vue-tsc -b && vite build --watch",
|
|
55
|
+
"preview": "vite preview",
|
|
56
|
+
"storybook": "LAUNCH_EDITOR=cursor storybook dev -p 6006",
|
|
57
|
+
"copy-vite-plugin": "mkdir -p dist/vite/ts && cp -r src/vite/*.ts dist/vite/ts/ && npx esbuild src/vite/*.ts --outdir=dist/vite --format=esm",
|
|
58
|
+
"build-storybook": "storybook build"
|
|
59
|
+
},
|
|
60
|
+
"dependencies": {
|
|
61
|
+
"@iconify/vue": "^5.0.0",
|
|
62
|
+
"@inertiajs/core": "^2.3.6",
|
|
63
|
+
"@inertiajs/vue3": "^2.0.0",
|
|
64
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
65
|
+
"@tanstack/vue-table": "^8.21.3",
|
|
66
|
+
"@types/node": "^25.0.3",
|
|
67
|
+
"@unovis/ts": "^1.6.2",
|
|
68
|
+
"@unovis/vue": "^1.6.2",
|
|
69
|
+
"@vee-validate/zod": "^4.15.1",
|
|
70
|
+
"@vueuse/core": "^14.1.0",
|
|
71
|
+
"chart.js": "^4.5.1",
|
|
72
|
+
"class-variance-authority": "^0.7.1",
|
|
73
|
+
"clsx": "^2.1.1",
|
|
74
|
+
"embla-carousel-vue": "^8.6.0",
|
|
75
|
+
"laravel-vite-plugin": "^2.0.1",
|
|
76
|
+
"laravel-vue-i18n": "^2.8.0",
|
|
77
|
+
"lucide-vue-next": "^0.562.0",
|
|
78
|
+
"reka-ui": "^2.7.0",
|
|
79
|
+
"tailwind-merge": "^3.4.0",
|
|
80
|
+
"tailwindcss": "^4.1.18",
|
|
81
|
+
"tw-animate-css": "^1.4.0",
|
|
82
|
+
"vaul-vue": "^0.4.1",
|
|
83
|
+
"vee-validate": "^4.15.1",
|
|
84
|
+
"vite-plugin-vue-devtools": "^8.0.5",
|
|
85
|
+
"vue": "^3.5.0",
|
|
86
|
+
"vue-chartjs": "^5.3.3",
|
|
87
|
+
"vue-input-otp": "^0.3.2",
|
|
88
|
+
"vue-sonner": "^2.0.9",
|
|
89
|
+
"zod": "^3.25.76"
|
|
90
|
+
},
|
|
91
|
+
"devDependencies": {
|
|
92
|
+
"@chromatic-com/storybook": "^4.1.3",
|
|
93
|
+
"@storybook/addon-docs": "^10.1.11",
|
|
94
|
+
"@storybook/addon-themes": "^10.1.11",
|
|
95
|
+
"@storybook/addon-vitest": "10.1.11",
|
|
96
|
+
"@storybook/vue3-vite": "^10.1.11",
|
|
97
|
+
"@vitejs/plugin-vue": "^6.0.3",
|
|
98
|
+
"@vitest/browser": "^4.0.16",
|
|
99
|
+
"@vitest/browser-playwright": "^4.0.16",
|
|
100
|
+
"@vitest/coverage-v8": "^4.0.16",
|
|
101
|
+
"@vue/tsconfig": "^0.8.1",
|
|
102
|
+
"glob": "^13.0.0",
|
|
103
|
+
"playwright": "^1.57.0",
|
|
104
|
+
"storybook": "^10.1.11",
|
|
105
|
+
"typescript": "~5.9.3",
|
|
106
|
+
"vite": "^7.3.0",
|
|
107
|
+
"vite-plugin-dts": "^4.5.4",
|
|
108
|
+
"vite-plugin-run": "^0.6.1",
|
|
109
|
+
"vitest": "^4.0.16",
|
|
110
|
+
"vue-draggable-plus": "^0.6.0",
|
|
111
|
+
"vue-router": "^4.6.4",
|
|
112
|
+
"vue-tsc": "^3.2.1"
|
|
113
|
+
},
|
|
114
|
+
"peerDependencies": {
|
|
115
|
+
"@inertiajs/vue3": "^2.0.0",
|
|
116
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
117
|
+
"laravel-vite-plugin": "^2.0.1",
|
|
118
|
+
"laravel-vue-i18n": "^2.8.0",
|
|
119
|
+
"vite-plugin-run": "^0.6.1",
|
|
120
|
+
"vue": "^3.5.0"
|
|
121
|
+
}
|
|
122
|
+
}
|