unraid · mdatelle · Dec 20, 2024 · Dec 10, 2024 · Dec 11, 2024 · Dec 12, 2024
diff --git a/.gitignore b/.gitignore
@@ -24,6 +24,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+unraid-ui/node_modules/
 
 # TypeScript v1 declaration files
 typings/
@@ -64,6 +65,7 @@ test/__temp__/*
 
 # Built files
 dist
+unraid-ui/storybook-static
 
 # Typescript
 typescript
@@ -74,7 +76,7 @@ typescript
 # Github actions
 RELEASE_NOTES.md
 
-# Docker Deploy Folder 
+# Docker Deploy Folder
 deploy/*
 !deploy/.gitkeep
 
@@ -89,4 +91,4 @@ deploy/*
 .env*
 !.env.example
 
-fb_keepalive
+fb_keepalive
diff --git a/unraid-ui/.npmrc b/unraid-ui/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false 
diff --git a/unraid-ui/.storybook/main.ts b/unraid-ui/.storybook/main.ts
@@ -0,0 +1,46 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+import { resolve } from "path";
+import { mergeConfig } from "vite";
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.stories.@(js|mjs|ts)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-controls",
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {
+      docgen: "vue-component-meta",
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          "@": resolve(__dirname, "../src"),
+          "@/components": resolve(__dirname, "../src/components"),
+          "@/lib": resolve(__dirname, "../src/lib"),
+        },
+      },
+      css: {
+        postcss: "./postcss.config.js",
+      },
+    });
+  },
+};
+
+export default config;
diff --git a/unraid-ui/.storybook/preview.ts b/unraid-ui/.storybook/preview.ts
@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/vue3";
+import "../src/styles/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/unraid-ui/.storybook/tailwind.config.ts b/unraid-ui/.storybook/tailwind.config.ts
@@ -0,0 +1,10 @@
+import baseConfig from "../tailwind.config";
+
+export default {
+  ...baseConfig,
+  content: [
+    "../src/**/*.{vue,js,ts,jsx,tsx}",
+    "../stories/**/*.{js,ts,jsx,tsx,mdx}",
+    "../.storybook/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+};
diff --git a/unraid-ui/.storybook/tsconfig.json b/unraid-ui/.storybook/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["../src/*"]
+    }
+  },
+  "include": ["../stories/**/*", "../src/**/*"]
+}
diff --git a/unraid-ui/README.md b/unraid-ui/README.md
@@ -0,0 +1,122 @@
+# Unraid UI
+
+A Vue 3 component library providing a set of reusable, accessible UI components for Unraid development.
+
+## Features
+
+- ⚡️ Built with Vue 3 and TypeScript
+- 🎭 Storybook documentation
+- ✅ Tested components
+- 🎪 Built on top of TailwindCSS and Shadcn/UI
+
+## Installation
+
+Make sure you have the peer dependencies installed:
+
+```bash
+npm install vue@^3.3.0 tailwindcss@^3.0.0
+```
+
+## Setup
+
+### 1. Add CSS
+
+Import the component library styles in your main entry file:
+
+```typescript
+import "@unraid/ui/style.css";
+```
+
+### 2. Configure TailwindCSS
+
+Add the following to your `tailwind.config.js`:
+
+```javascript
+module.exports = {
+  content: [
+    // ... your content paths
+    "./node_modules/@unraid/ui/**/*.{js,vue,ts}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+};
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Button } from "@unraid/ui";
+</script>
+
+<template>
+  <Button variant="primary"> Click me </Button>
+</template>
+```
+
+## Development
+
+### Local Development
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start Storybook development server:
+
+```bash
+npm run storybook
+```
+
+This will start Storybook at [http://localhost:6006](http://localhost:6006)
+
+### Building
+
+```bash
+npm run build
+```
+
+### Testing
+
+Run tests:
+
+```bash
+npm run test
+```
+
+Run tests with UI:
+
+```bash
+npm run test:ui
+```
+
+Generate coverage report:
+
+```bash
+npm run coverage
+```
+
+### Type Checking
+
+```bash
+npm run typecheck
+```
+
+## Scripts
+
+- `dev`: Start development server
+- `build`: Build for production
+- `preview`: Preview production build
+- `test`: Run tests
+- `test:ui`: Run tests with UI
+- `coverage`: Generate test coverage
+- `clean`: Remove build artifacts
+- `typecheck`: Run type checking
+- `storybook`: Start Storybook development server
+- `build-storybook`: Build Storybook for production
+
+## License
diff --git a/unraid-ui/components.json b/unraid-ui/components.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": "./tsconfig.json",
+  "tailwind": {
+    "config": "./tailwind.config.js",
+    "css": "./src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "types": "@/types"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		shamefully-hoist=true
		strict-peer-dependencies=false