Skip to content

Commit 602f7d7

Browse files
elibosleyelibosley
committed
feat: tailwind v4
1 parent 1a8da6d commit 602f7d7

File tree

99 files changed

+684
-1071
lines changed

Some content is hidden

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

99 files changed

+684
-1071
lines changed

‎.claude/settings.local.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,17 @@
1414
"Bash(mv:*)",
1515
"Bash(ls:*)",
1616
"mcp__ide__getDiagnostics",
17-
"Bash(pnpm --filter \"*connect*\" test connect-status-writer.service.spec)"
17+
"Bash(pnpm --filter \"*connect*\" test connect-status-writer.service.spec)",
18+
"Bash(pnpm storybook:*)",
19+
"Bash(rm:*)",
20+
"Bash(pnpm add:*)",
21+
"Bash(pnpm install:*)",
22+
"Bash(pkill:*)",
23+
"Bash(true)",
24+
"Bash(timeout 15 pnpm storybook)",
25+
"WebFetch(domain:tailwindcss.com)",
26+
"Bash(pnpm list:*)",
27+
"Bash(pnpm remove:*)"
1828
]
1929
},
2030
"enableAllProjectMcpServers": false

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,20 @@
2626
"@nestjs/core",
2727
"@parcel/watcher",
2828
"@swc/core",
29+
"@tailwindcss/oxide",
2930
"@unraid/libvirt",
3031
"core-js",
3132
"cpu-features",
3233
"es5-ext",
3334
"esbuild",
3435
"nestjs-pino",
3536
"protobufjs",
37+
"sharp",
3638
"simple-git-hooks",
3739
"ssh2",
3840
"unrs-resolver",
39-
"vue-demi"
41+
"vue-demi",
42+
"workerd"
4043
]
4144
},
4245
"dependencies": {

‎pnpm-lock.yaml‎

Lines changed: 469 additions & 774 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { dirname, join } from 'path';
22
import type { StorybookConfig } from '@storybook/vue3-vite';
3+
import tailwind from '@tailwindcss/vite';
34

45
const config: StorybookConfig = {
56
stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -19,29 +20,21 @@ const config: StorybookConfig = {
1920
staticDirs: ['./static'],
2021

2122
async viteFinal(config) {
23+
const storybookDir = dirname(new URL(import.meta.url).pathname);
24+
2225
return {
2326
...config,
24-
root: dirname(require.resolve('@storybook/builder-vite')),
27+
plugins: [...(config.plugins ?? []), tailwind()],
2528
resolve: {
2629
alias: {
27-
'@': join(dirname(new URL(import.meta.url).pathname), '../src'),
28-
'@/components': join(dirname(new URL(import.meta.url).pathname), '../src/components'),
29-
'@/lib': join(dirname(new URL(import.meta.url).pathname), '../src/lib'),
30+
'@': join(storybookDir, '../src'),
31+
'@/components': join(storybookDir, '../src/components'),
32+
'@/lib': join(storybookDir, '../src/lib'),
3033
},
3134
},
3235
optimizeDeps: {
3336
include: [...(config.optimizeDeps?.include ?? []), '@unraid/tailwind-rem-to-rem'],
3437
},
35-
css: {
36-
postcss: {
37-
plugins: [
38-
(await import('tailwindcss')).default({
39-
config: './tailwind.config.ts',
40-
}),
41-
(await import('autoprefixer')).default,
42-
],
43-
},
44-
},
4538
};
4639
},
4740
};

‎unraid-ui/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ const meta = {
249249
argTypes: {
250250
variant: {
251251
control: 'select',
252-
options: ['primary', 'secondary', 'outline'],
252+
options: ['primary', 'secondary', 'outline-solid'],
253253
},
254254
size: {
255255
control: 'select',

‎unraid-ui/package.json‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
"tailwind.config.ts"
1414
],
1515
"scripts": {
16-
"prepare": "pnpm build",
1716
"// Development": "",
1817
"dev": "vite",
1918
"preview": "vite preview",
@@ -34,10 +33,7 @@
3433
"preunraid:deploy": "pnpm build:wc",
3534
"unraid:deploy": "just deploy",
3635
"// Storybook": "",
37-
"prestorybook": "pnpm storybook:css",
3836
"storybook": "storybook dev -p 6006",
39-
"storybook:css": "node scripts/build-style.mjs",
40-
"prebuild-storybook": "pnpm storybook:css",
4137
"build-storybook": "storybook build",
4238
"// Cloudflare Workers Deployment": "",
4339
"deploy:storybook": "pnpm build-storybook && wrangler deploy",
@@ -72,19 +68,18 @@
7268
"@storybook/addon-links": "9.0.17",
7369
"@storybook/builder-vite": "9.0.17",
7470
"@storybook/vue3-vite": "9.0.17",
75-
"@tailwindcss/typography": "0.5.16",
71+
"@tailwindcss/vite": "^4.1.11",
7672
"@testing-library/vue": "8.1.0",
7773
"@types/jsdom": "21.1.7",
7874
"@types/node": "22.16.4",
7975
"@types/testing-library__vue": "5.3.0",
8076
"@typescript-eslint/eslint-plugin": "8.37.0",
81-
"@unraid/tailwind-rem-to-rem": "1.1.0",
77+
"@unraid/tailwind-rem-to-rem": "2.0.0",
8278
"@vitejs/plugin-vue": "6.0.0",
8379
"@vitest/coverage-v8": "3.2.4",
8480
"@vitest/ui": "3.2.4",
8581
"@vue/test-utils": "2.4.6",
8682
"@vue/tsconfig": "0.7.0",
87-
"autoprefixer": "10.4.21",
8883
"concurrently": "9.2.0",
8984
"eslint": "9.31.0",
9085
"eslint-config-prettier": "10.1.5",
@@ -96,13 +91,12 @@
9691
"happy-dom": "18.0.1",
9792
"jiti": "2.4.2",
9893
"postcss": "8.5.6",
99-
"postcss-import": "16.1.1",
10094
"prettier": "3.6.2",
10195
"prettier-plugin-tailwindcss": "0.6.14",
10296
"rimraf": "6.0.1",
10397
"storybook": "9.0.17",
10498
"tailwind-rem-to-rem": "github:unraid/tailwind-rem-to-rem",
105-
"tailwindcss": "3.4.17",
99+
"tailwindcss": "4.1.11",
106100
"tailwindcss-animate": "1.0.7",
107101
"typescript": "5.8.3",
108102
"typescript-eslint": "8.37.0",

‎unraid-ui/postcss.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎unraid-ui/scripts/build-style.mjs‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎unraid-ui/src/components/brand/BrandButton.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@ const classes = computed(() => {
4949
brandButtonVariants({ variant: props.variant, size: props.size, padding: props.padding }),
5050
props.class
5151
),
52-
icon: `${iconSize} fill-current flex-shrink-0`,
52+
icon: `${iconSize} fill-current shrink-0`,
5353
};
5454
});
5555
const needsBrandGradientBackground = computed(() => {
56-
return ['outline', 'outline-primary'].includes(props.variant ?? '');
56+
return ['outline-solid', 'outline-primary'].includes(props.variant ?? '');
5757
});
5858
</script>
5959

@@ -71,12 +71,12 @@ const needsBrandGradientBackground = computed(() => {
7171
>
7272
<div
7373
v-if="variant === 'fill'"
74-
class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:opacity-60 group-focus:opacity-60"
74+
class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:opacity-60 group-focus:opacity-60"
7575
/>
7676
<!-- gives outline buttons the brand gradient background -->
7777
<div
7878
v-if="needsBrandGradientBackground"
79-
class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-0 transition-all rounded-md group-hover:opacity-100 group-focus:opacity-100"
79+
class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange opacity-0 transition-all rounded-md group-hover:opacity-100 group-focus:opacity-100"
8080
/>
8181

8282
<component :is="icon" v-if="icon" :class="classes.icon" />

‎unraid-ui/src/components/brand/brand-loading.variants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { cva, type VariantProps } from 'class-variance-authority';
22

33
export const brandLoadingVariants = cva(
4-
'inline-flex items-center justify-center w-full h-full aspect-[7/4]',
4+
'inline-flex items-center justify-center w-full h-full aspect-7/4',
55
{
66
variants: {
77
variant: {

0 commit comments

Comments
 (0)