Skip to content

Commit 03e2fee

Browse files
author
Michael Datelle
authored
feat: unraid ui component library (#976)
1 parent f07381b commit 03e2fee

File tree

100 files changed

+14212
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

100 files changed

+14212
-2
lines changed

‎.gitignore‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ build/Release
2424
# Dependency directories
2525
node_modules/
2626
jspm_packages/
27+
unraid-ui/node_modules/
2728

2829
# TypeScript v1 declaration files
2930
typings/
@@ -64,6 +65,7 @@ test/__temp__/*
6465

6566
# Built files
6667
dist
68+
unraid-ui/storybook-static
6769

6870
# Typescript
6971
typescript
@@ -74,7 +76,7 @@ typescript
7476
# Github actions
7577
RELEASE_NOTES.md
7678

77-
# Docker Deploy Folder
79+
# Docker Deploy Folder
7880
deploy/*
7981
!deploy/.gitkeep
8082

@@ -89,4 +91,4 @@ deploy/*
8991
.env*
9092
!.env.example
9193

92-
fb_keepalive
94+
fb_keepalive

‎unraid-ui/.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
shamefully-hoist=true
2+
strict-peer-dependencies=false

‎unraid-ui/.storybook/main.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import type { StorybookConfig } from "@storybook/vue3-vite";
2+
import { resolve } from "path";
3+
import { mergeConfig } from "vite";
4+
5+
const config: StorybookConfig = {
6+
stories: ["../stories/**/*.stories.@(js|mjs|ts)"],
7+
addons: [
8+
"@storybook/addon-links",
9+
"@storybook/addon-essentials",
10+
"@storybook/addon-interactions",
11+
"@storybook/addon-controls",
12+
{
13+
name: "@storybook/addon-postcss",
14+
options: {
15+
postcssLoaderOptions: {
16+
implementation: require("postcss"),
17+
},
18+
},
19+
},
20+
],
21+
framework: {
22+
name: "@storybook/vue3-vite",
23+
options: {
24+
docgen: "vue-component-meta",
25+
},
26+
},
27+
docs: {
28+
autodocs: "tag",
29+
},
30+
viteFinal: async (config) => {
31+
return mergeConfig(config, {
32+
resolve: {
33+
alias: {
34+
"@": resolve(__dirname, "../src"),
35+
"@/components": resolve(__dirname, "../src/components"),
36+
"@/lib": resolve(__dirname, "../src/lib"),
37+
},
38+
},
39+
css: {
40+
postcss: "./postcss.config.js",
41+
},
42+
});
43+
},
44+
};
45+
46+
export default config;

‎unraid-ui/.storybook/preview.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { Preview } from "@storybook/vue3";
2+
import "../src/styles/globals.css";
3+
4+
const preview: Preview = {
5+
parameters: {
6+
actions: { argTypesRegex: "^on[A-Z].*" },
7+
controls: {
8+
matchers: {
9+
color: /(background|color)$/i,
10+
date: /Date$/,
11+
},
12+
},
13+
},
14+
};
15+
16+
export default preview;

‎unraid-ui/.storybook/tailwind.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import baseConfig from "../tailwind.config";
2+
3+
export default {
4+
...baseConfig,
5+
content: [
6+
"../src/**/*.{vue,js,ts,jsx,tsx}",
7+
"../stories/**/*.{js,ts,jsx,tsx,mdx}",
8+
"../.storybook/**/*.{js,ts,jsx,tsx,mdx}",
9+
],
10+
};

‎unraid-ui/.storybook/tsconfig.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"paths": {
5+
"@/*": ["../src/*"]
6+
}
7+
},
8+
"include": ["../stories/**/*", "../src/**/*"]
9+
}

‎unraid-ui/README.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# Unraid UI
2+
3+
A Vue 3 component library providing a set of reusable, accessible UI components for Unraid development.
4+
5+
## Features
6+
7+
- ⚡️ Built with Vue 3 and TypeScript
8+
- 🎭 Storybook documentation
9+
- ✅ Tested components
10+
- 🎪 Built on top of TailwindCSS and Shadcn/UI
11+
12+
## Installation
13+
14+
Make sure you have the peer dependencies installed:
15+
16+
```bash
17+
npm install vue@^3.3.0 tailwindcss@^3.0.0
18+
```
19+
20+
## Setup
21+
22+
### 1. Add CSS
23+
24+
Import the component library styles in your main entry file:
25+
26+
```typescript
27+
import "@unraid/ui/style.css";
28+
```
29+
30+
### 2. Configure TailwindCSS
31+
32+
Add the following to your `tailwind.config.js`:
33+
34+
```javascript
35+
module.exports = {
36+
content: [
37+
// ... your content paths
38+
"./node_modules/@unraid/ui/**/*.{js,vue,ts}",
39+
],
40+
theme: {
41+
extend: {},
42+
},
43+
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
44+
};
45+
```
46+
47+
## Usage
48+
49+
```vue
50+
<script setup lang="ts">
51+
import { Button } from "@unraid/ui";
52+
</script>
53+
54+
<template>
55+
<Button variant="primary"> Click me </Button>
56+
</template>
57+
```
58+
59+
## Development
60+
61+
### Local Development
62+
63+
Install dependencies:
64+
65+
```bash
66+
npm install
67+
```
68+
69+
Start Storybook development server:
70+
71+
```bash
72+
npm run storybook
73+
```
74+
75+
This will start Storybook at [http://localhost:6006](http://localhost:6006)
76+
77+
### Building
78+
79+
```bash
80+
npm run build
81+
```
82+
83+
### Testing
84+
85+
Run tests:
86+
87+
```bash
88+
npm run test
89+
```
90+
91+
Run tests with UI:
92+
93+
```bash
94+
npm run test:ui
95+
```
96+
97+
Generate coverage report:
98+
99+
```bash
100+
npm run coverage
101+
```
102+
103+
### Type Checking
104+
105+
```bash
106+
npm run typecheck
107+
```
108+
109+
## Scripts
110+
111+
- `dev`: Start development server
112+
- `build`: Build for production
113+
- `preview`: Preview production build
114+
- `test`: Run tests
115+
- `test:ui`: Run tests with UI
116+
- `coverage`: Generate test coverage
117+
- `clean`: Remove build artifacts
118+
- `typecheck`: Run type checking
119+
- `storybook`: Start Storybook development server
120+
- `build-storybook`: Build Storybook for production
121+
122+
## License

‎unraid-ui/components.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"$schema": "https://shadcn-vue.com/schema.json",
3+
"style": "default",
4+
"typescript": true,
5+
"tsConfigPath": "./tsconfig.json",
6+
"tailwind": {
7+
"config": "./tailwind.config.js",
8+
"css": "./src/styles/globals.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"framework": "vite",
14+
"aliases": {
15+
"components": "@/components",
16+
"utils": "@/lib/utils",
17+
"types": "@/types"
18+
}
19+
}

0 commit comments

Comments
 (0)