From 741e8532ab0ef8a76f8ebb2c5b9ee5aac06038b1 Mon Sep 17 00:00:00 2001 From: Michael Datelle Date: Wed, 12 Feb 2025 18:00:06 -0500 Subject: [PATCH] refactor: unraid-ui-web-migration (#1106) ## Summary by CodeRabbit - **New Features** - Introduced enhanced stepper components for smoother multi-step interactions. - Added new loading indicators and improved the loading experience with customizable variants. - **UI Improvements** - Refreshed the global color palette and updated styling across buttons, badges, and loading indicators for a more modern, consistent experience. - Improved the organization and readability of templates and styles across various components. - **Code & Dependency Updates** - Updated key dependencies and revised the theme and configuration settings to improve performance and maintainability. - Introduced new environment variables for better configuration management. - **Legacy Cleanup** - Removed deprecated components and streamlined registrations to simplify the codebase without affecting end-user functionality. - Eliminated unused utility functions and legacy code to enhance overall code quality. --------- Co-authored-by: mdatelle Co-authored-by: Eli Bosley --- .../Unraid_Parity_check_1683971161.notify | 5 - unraid-ui/.env.development | 1 + unraid-ui/.gitignore | 1 + unraid-ui/.storybook/preview.ts | 9 +- unraid-ui/.storybook/tailwind.config.ts | 9 +- unraid-ui/components.json | 9 +- unraid-ui/package-lock.json | 31 +- unraid-ui/package.json | 6 +- .../src/components/brand/BrandLoading.ce.vue | 97 +- .../components/brand/BrandLoadingWhite.vue | 7 - .../brand/brand-loading.variants.ts | 27 + unraid-ui/src/components/brand/index.ts | 15 +- .../src/components/common/badge/Badge.vue | 61 +- .../src/components/common/badge/index.ts | 7 +- .../src/components/common/button/index.ts | 7 +- .../src/components/common/loading/Bar.vue | 4 +- .../src/components/common/stepper/Stepper.vue | 23 + .../common/stepper/StepperDescription.vue | 26 + .../common}/stepper/StepperIndicator.vue | 19 +- .../components/common/stepper/StepperItem.vue | 26 + .../common}/stepper/StepperSeparator.vue | 19 +- .../common/stepper/StepperTitle.vue | 22 + .../common/stepper/StepperTrigger.vue | 25 + .../src/components/common}/stepper/index.ts | 0 .../components/form/select/SelectContent.vue | 24 +- unraid-ui/src/components/index.ts | 8 +- unraid-ui/src/index.ts | 127 +-- .../src/lib/tailwind-rem-to-rem/index.ts | 27 - unraid-ui/src/lib/utils.ts | 59 +- unraid-ui/src/register.ts | 2 +- unraid-ui/src/styles/globals.css | 87 +- unraid-ui/src/styles/index.css | 5 +- unraid-ui/src/theme/preset.ts | 386 +++---- unraid-ui/src/types/components.d.ts | 11 + .../components/brand/BrandLoading.stories.ts | 52 +- .../brand/BrandLoadingWhite.stories.ts | 32 - unraid-ui/tailwind.config.ts | 13 +- unraid-ui/tsconfig.json | 1 + web/.prettierrc.mjs | 42 + web/_data/serverState.ts | 8 +- web/components/Activation/Modal.vue | 62 +- web/components/Activation/Steps.vue | 67 +- web/components/Brand/Button.vue | 136 --- web/components/Brand/Loading.vue | 142 --- web/components/Brand/LoadingWhite.vue | 12 - web/components/Brand/LogoConnect.vue | 44 - web/components/CallbackHandler.ce.vue | 9 +- web/components/ColorSwitcher.ce.vue | 14 +- .../ConnectSettings/ConnectSettings.ce.vue | 3 - web/components/KeyActions.vue | 49 +- web/components/Loading/Bar.vue | 12 - web/components/Loading/Error.vue | 54 - web/components/Loading/Spinner.vue | 19 - web/components/Modal.vue | 32 +- web/components/Modals.ce.vue | 12 +- web/components/Notifications/Indicator.vue | 7 +- web/components/Notifications/Item.vue | 1 + web/components/Notifications/List.vue | 8 +- web/components/Notifications/Sidebar.vue | 27 +- web/components/Registration.ce.vue | 246 +++-- .../Registration/KeyLinkedStatus.vue | 33 +- web/components/Registration/ReplaceCheck.vue | 22 +- .../Registration/UpdateExpirationAction.vue | 28 +- web/components/SsoButton.ce.vue | 16 +- web/components/Ui/Badge.vue | 105 -- web/components/Ui/CardWrapper.vue | 31 - web/components/Ui/Lightswitch.vue | 61 -- web/components/Ui/PageContainer.vue | 16 - web/components/Ui/Switch.vue | 34 - web/components/UpdateOs/CallbackButton.vue | 8 +- web/components/UpdateOs/ChangelogModal.vue | 45 +- .../UpdateOs/CheckUpdateResponseModal.vue | 94 +- web/components/UpdateOs/IgnoredRelease.vue | 4 +- web/components/UpdateOs/Status.vue | 29 +- web/components/UpdateOs/ThirdPartyDrivers.vue | 17 +- web/components/UpdateOs/Update.vue | 91 +- web/components/UpdateOs/UpdateIneligible.vue | 56 +- web/components/UserProfile.ce.vue | 77 +- .../UserProfile/CallbackFeedback.vue | 15 +- .../UserProfile/DropdownConnectStatus.vue | 10 +- .../UserProfile/DropdownContent.vue | 103 +- .../UserProfile/DropdownLaunchpad.vue | 19 +- web/components/UserProfile/Promo.vue | 39 +- web/components/UserProfile/Trial.vue | 3 + web/components/WanIpCheck.ce.vue | 37 +- web/components/WelcomeModal.ce.vue | 36 +- web/components/shadcn/button/Button.vue | 29 - web/components/shadcn/button/index.ts | 32 - .../shadcn/dropdown-menu/DropdownMenu.vue | 14 - .../DropdownMenuCheckboxItem.vue | 40 - .../dropdown-menu/DropdownMenuContent.vue | 39 - .../dropdown-menu/DropdownMenuGroup.vue | 11 - .../shadcn/dropdown-menu/DropdownMenuItem.vue | 28 - .../dropdown-menu/DropdownMenuLabel.vue | 24 - .../dropdown-menu/DropdownMenuRadioGroup.vue | 19 - .../dropdown-menu/DropdownMenuRadioItem.vue | 41 - .../dropdown-menu/DropdownMenuSeparator.vue | 22 - .../dropdown-menu/DropdownMenuShortcut.vue | 14 - .../shadcn/dropdown-menu/DropdownMenuSub.vue | 19 - .../dropdown-menu/DropdownMenuSubContent.vue | 30 - .../dropdown-menu/DropdownMenuSubTrigger.vue | 33 - .../dropdown-menu/DropdownMenuTrigger.vue | 13 - web/components/shadcn/dropdown-menu/index.ts | 16 - web/components/shadcn/input/Input.vue | 24 - web/components/shadcn/input/index.ts | 1 - web/components/shadcn/label/Label.vue | 27 - web/components/shadcn/label/index.ts | 1 - .../shadcn/scroll-area/ScrollArea.vue | 29 - .../shadcn/scroll-area/ScrollBar.vue | 31 - web/components/shadcn/scroll-area/index.ts | 2 - web/components/shadcn/select/Select.vue | 15 - .../shadcn/select/SelectContent.vue | 60 -- web/components/shadcn/select/SelectGroup.vue | 19 - web/components/shadcn/select/SelectItem.vue | 44 - .../shadcn/select/SelectItemText.vue | 11 - web/components/shadcn/select/SelectLabel.vue | 13 - .../shadcn/select/SelectScrollDownButton.vue | 24 - .../shadcn/select/SelectScrollUpButton.vue | 24 - .../shadcn/select/SelectSeparator.vue | 17 - .../shadcn/select/SelectTrigger.vue | 31 - web/components/shadcn/select/SelectValue.vue | 11 - web/components/shadcn/select/index.ts | 11 - web/components/shadcn/sheet/Sheet.vue | 45 - web/components/shadcn/sheet/SheetClose.vue | 11 - web/components/shadcn/sheet/SheetContent.vue | 62 -- .../shadcn/sheet/SheetDescription.vue | 22 - web/components/shadcn/sheet/SheetFooter.vue | 19 - web/components/shadcn/sheet/SheetHeader.vue | 16 - web/components/shadcn/sheet/SheetTitle.vue | 22 - web/components/shadcn/sheet/SheetTrigger.vue | 11 - web/components/shadcn/sheet/index.ts | 36 - web/components/shadcn/stepper/Stepper.vue | 28 - .../shadcn/stepper/StepperDescription.vue | 27 - web/components/shadcn/stepper/StepperItem.vue | 29 - .../shadcn/stepper/StepperTitle.vue | 26 - .../shadcn/stepper/StepperTrigger.vue | 28 - web/components/shadcn/switch/Switch.vue | 37 - web/components/shadcn/switch/index.ts | 1 - web/components/shadcn/tabs/Tabs.vue | 15 - web/components/shadcn/tabs/TabsContent.vue | 29 - web/components/shadcn/tabs/TabsList.vue | 25 - web/components/shadcn/tabs/TabsTrigger.vue | 29 - web/components/shadcn/tabs/index.ts | 4 - web/components/shadcn/tooltip/Tooltip.vue | 14 - .../shadcn/tooltip/TooltipContent.vue | 34 - .../shadcn/tooltip/TooltipProvider.vue | 11 - .../shadcn/tooltip/TooltipTrigger.vue | 11 - web/components/shadcn/tooltip/index.ts | 4 - web/components/shadcn/utils/index.ts | 6 - web/nuxt.config.ts | 2 +- web/package-lock.json | 19 +- web/package.json | 3 +- web/pages/index.vue | 6 +- web/store/errors.ts | 55 +- web/store/replaceRenew.ts | 70 +- web/store/server.ts | 972 ++++++++---------- web/tailwind.config.ts | 4 +- web/types/ui/badge.ts | 12 - web/types/ui/button.ts | 19 - 159 files changed, 2044 insertions(+), 3864 deletions(-) delete mode 100644 api/dev/notifications/archive/Unraid_Parity_check_1683971161.notify create mode 100644 unraid-ui/.env.development create mode 100644 unraid-ui/.gitignore delete mode 100644 unraid-ui/src/components/brand/BrandLoadingWhite.vue create mode 100644 unraid-ui/src/components/brand/brand-loading.variants.ts create mode 100644 unraid-ui/src/components/common/stepper/Stepper.vue create mode 100644 unraid-ui/src/components/common/stepper/StepperDescription.vue rename {web/components/shadcn => unraid-ui/src/components/common}/stepper/StepperIndicator.vue (67%) create mode 100644 unraid-ui/src/components/common/stepper/StepperItem.vue rename {web/components/shadcn => unraid-ui/src/components/common}/stepper/StepperSeparator.vue (56%) create mode 100644 unraid-ui/src/components/common/stepper/StepperTitle.vue create mode 100644 unraid-ui/src/components/common/stepper/StepperTrigger.vue rename {web/components/shadcn => unraid-ui/src/components/common}/stepper/index.ts (100%) delete mode 100644 unraid-ui/src/lib/tailwind-rem-to-rem/index.ts create mode 100644 unraid-ui/src/types/components.d.ts delete mode 100644 unraid-ui/stories/components/brand/BrandLoadingWhite.stories.ts delete mode 100644 web/components/Brand/Button.vue delete mode 100644 web/components/Brand/Loading.vue delete mode 100644 web/components/Brand/LoadingWhite.vue delete mode 100644 web/components/Brand/LogoConnect.vue delete mode 100644 web/components/Loading/Bar.vue delete mode 100644 web/components/Loading/Error.vue delete mode 100644 web/components/Loading/Spinner.vue delete mode 100644 web/components/Ui/Badge.vue delete mode 100644 web/components/Ui/CardWrapper.vue delete mode 100644 web/components/Ui/Lightswitch.vue delete mode 100644 web/components/Ui/PageContainer.vue delete mode 100644 web/components/Ui/Switch.vue delete mode 100644 web/components/shadcn/button/Button.vue delete mode 100644 web/components/shadcn/button/index.ts delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenu.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuCheckboxItem.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuContent.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuGroup.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuItem.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuLabel.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuRadioGroup.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuRadioItem.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuSeparator.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuShortcut.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuSub.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuSubContent.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuSubTrigger.vue delete mode 100644 web/components/shadcn/dropdown-menu/DropdownMenuTrigger.vue delete mode 100644 web/components/shadcn/dropdown-menu/index.ts delete mode 100644 web/components/shadcn/input/Input.vue delete mode 100644 web/components/shadcn/input/index.ts delete mode 100644 web/components/shadcn/label/Label.vue delete mode 100644 web/components/shadcn/label/index.ts delete mode 100644 web/components/shadcn/scroll-area/ScrollArea.vue delete mode 100644 web/components/shadcn/scroll-area/ScrollBar.vue delete mode 100644 web/components/shadcn/scroll-area/index.ts delete mode 100644 web/components/shadcn/select/Select.vue delete mode 100644 web/components/shadcn/select/SelectContent.vue delete mode 100644 web/components/shadcn/select/SelectGroup.vue delete mode 100644 web/components/shadcn/select/SelectItem.vue delete mode 100644 web/components/shadcn/select/SelectItemText.vue delete mode 100644 web/components/shadcn/select/SelectLabel.vue delete mode 100644 web/components/shadcn/select/SelectScrollDownButton.vue delete mode 100644 web/components/shadcn/select/SelectScrollUpButton.vue delete mode 100644 web/components/shadcn/select/SelectSeparator.vue delete mode 100644 web/components/shadcn/select/SelectTrigger.vue delete mode 100644 web/components/shadcn/select/SelectValue.vue delete mode 100644 web/components/shadcn/select/index.ts delete mode 100644 web/components/shadcn/sheet/Sheet.vue delete mode 100644 web/components/shadcn/sheet/SheetClose.vue delete mode 100644 web/components/shadcn/sheet/SheetContent.vue delete mode 100644 web/components/shadcn/sheet/SheetDescription.vue delete mode 100644 web/components/shadcn/sheet/SheetFooter.vue delete mode 100644 web/components/shadcn/sheet/SheetHeader.vue delete mode 100644 web/components/shadcn/sheet/SheetTitle.vue delete mode 100644 web/components/shadcn/sheet/SheetTrigger.vue delete mode 100644 web/components/shadcn/sheet/index.ts delete mode 100644 web/components/shadcn/stepper/Stepper.vue delete mode 100644 web/components/shadcn/stepper/StepperDescription.vue delete mode 100644 web/components/shadcn/stepper/StepperItem.vue delete mode 100644 web/components/shadcn/stepper/StepperTitle.vue delete mode 100644 web/components/shadcn/stepper/StepperTrigger.vue delete mode 100644 web/components/shadcn/switch/Switch.vue delete mode 100644 web/components/shadcn/switch/index.ts delete mode 100644 web/components/shadcn/tabs/Tabs.vue delete mode 100644 web/components/shadcn/tabs/TabsContent.vue delete mode 100644 web/components/shadcn/tabs/TabsList.vue delete mode 100644 web/components/shadcn/tabs/TabsTrigger.vue delete mode 100644 web/components/shadcn/tabs/index.ts delete mode 100644 web/components/shadcn/tooltip/Tooltip.vue delete mode 100644 web/components/shadcn/tooltip/TooltipContent.vue delete mode 100644 web/components/shadcn/tooltip/TooltipProvider.vue delete mode 100644 web/components/shadcn/tooltip/TooltipTrigger.vue delete mode 100644 web/components/shadcn/tooltip/index.ts delete mode 100644 web/components/shadcn/utils/index.ts delete mode 100644 web/types/ui/badge.ts delete mode 100644 web/types/ui/button.ts diff --git a/api/dev/notifications/archive/Unraid_Parity_check_1683971161.notify b/api/dev/notifications/archive/Unraid_Parity_check_1683971161.notify deleted file mode 100644 index 01a2d79ff..000000000 --- a/api/dev/notifications/archive/Unraid_Parity_check_1683971161.notify +++ /dev/null @@ -1,5 +0,0 @@ -timestamp=1683971161 -event=Unraid Parity check -subject=Notice [UNRAID] - Parity check finished (0 errors) -description=Canceled -importance=warning diff --git a/unraid-ui/.env.development b/unraid-ui/.env.development new file mode 100644 index 000000000..8806e34d0 --- /dev/null +++ b/unraid-ui/.env.development @@ -0,0 +1 @@ +VITE_TAILWIND_BASE_FONT_SIZE=16 \ No newline at end of file diff --git a/unraid-ui/.gitignore b/unraid-ui/.gitignore new file mode 100644 index 000000000..63f0652ca --- /dev/null +++ b/unraid-ui/.gitignore @@ -0,0 +1 @@ +!.env.development \ No newline at end of file diff --git a/unraid-ui/.storybook/preview.ts b/unraid-ui/.storybook/preview.ts index 1f213a9e9..9ff4f59e7 100644 --- a/unraid-ui/.storybook/preview.ts +++ b/unraid-ui/.storybook/preview.ts @@ -1,9 +1,12 @@ -import type { Preview } from "@storybook/vue3"; -import "../src/styles/globals.css"; +import type { Preview } from '@storybook/vue3'; +import '../src/styles/globals.css'; +import { registerAllComponents } from '../src/register'; + +registerAllComponents({}); const preview: Preview = { parameters: { - actions: { argTypesRegex: "^on[A-Z].*" }, + actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, diff --git a/unraid-ui/.storybook/tailwind.config.ts b/unraid-ui/.storybook/tailwind.config.ts index fd57277b7..0130be908 100644 --- a/unraid-ui/.storybook/tailwind.config.ts +++ b/unraid-ui/.storybook/tailwind.config.ts @@ -1,10 +1,11 @@ -import baseConfig from "../tailwind.config"; +import baseConfig from '../tailwind.config'; export default { ...baseConfig, content: [ - "../src/components/**/*.{js,vue,ts}", - "../src/composables/**/*.{js,vue,ts}", - "../stories/**/*.stories.{js,ts,jsx,tsx,mdx}" + '../src/components/**/*.{js,vue,ts}', + '../src/components/**/*.ce.{js,vue,ts}', + '../src/composables/**/*.{js,vue,ts}', + '../stories/**/*.stories.{js,ts,jsx,tsx,mdx}', ], }; diff --git a/unraid-ui/components.json b/unraid-ui/components.json index 5a0e40027..2a0b47300 100644 --- a/unraid-ui/components.json +++ b/unraid-ui/components.json @@ -4,16 +4,15 @@ "typescript": true, "tsConfigPath": "./tsconfig.json", "tailwind": { - "config": "./tailwind.config.js", + "config": "./tailwind.config.ts", "css": "./src/styles/globals.css", - "baseColor": "slate", + "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "framework": "vite", "aliases": { - "components": "@/components", - "utils": "@/lib/utils", - "types": "@/types" + "components": "@/components/common", + "utils": "@/lib/utils" } } diff --git a/unraid-ui/package-lock.json b/unraid-ui/package-lock.json index 2528e1b53..4d45aa661 100644 --- a/unraid-ui/package-lock.json +++ b/unraid-ui/package-lock.json @@ -15,9 +15,9 @@ "clsx": "^2.1.1", "kebab-case": "^2.0.1", "lucide-vue-next": "^0.468.0", - "radix-vue": "^1.9.11", + "radix-vue": "^1.9.13", "shadcn-vue": "^0.11.3", - "tailwind-merge": "^2.5.5", + "tailwind-merge": "^2.6.0", "vue-sonner": "^1.3.0" }, "devDependencies": { @@ -31,6 +31,7 @@ "@types/jsdom": "^21.1.7", "@types/node": "^20.0.0", "@types/testing-library__vue": "^5.0.0", + "@unraid/tailwind-rem-to-rem": "^1.1.0", "@vitejs/plugin-vue": "^5.0.0", "@vitejs/plugin-vue-jsx": "^4.1.1", "@vitest/coverage-v8": "^1.0.0", @@ -45,6 +46,7 @@ "postcss": "^8.4.49", "prettier": "3.4.2", "prettier-plugin-tailwindcss": "^0.6.11", + "tailwind-rem-to-rem": "github:unraid/tailwind-rem-to-rem", "tailwindcss": "^3.0.0", "tailwindcss-animate": "^1.0.7", "typescript": "^5.0.0", @@ -2797,6 +2799,16 @@ "node": ">=18" } }, + "node_modules/@unraid/tailwind-rem-to-rem": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@unraid/tailwind-rem-to-rem/-/tailwind-rem-to-rem-1.1.0.tgz", + "integrity": "sha512-lc5tqdSs5zwBStlC18lK+pg+iX0/i/JtO8qWOqHNT5KHt66Ba6nwDr+mfKekQq7Bsi8noXMBQJDB5b2J/OmDsw==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "tailwindcss": "^3.4.17" + } + }, "node_modules/@vitejs/plugin-vue": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz", @@ -9539,15 +9551,24 @@ } }, "node_modules/tailwind-merge": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz", - "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz", + "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==", "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/dcastil" } }, + "node_modules/tailwind-rem-to-rem": { + "version": "1.0.0", + "resolved": "git+ssh://git@github.com/unraid/tailwind-rem-to-rem.git#a4a3958cd0c6af000a9f87a9d2e8543e976d3ace", + "dev": true, + "license": "MIT", + "peerDependencies": { + "tailwindcss": "^3.4.17" + } + }, "node_modules/tailwindcss": { "version": "3.4.17", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz", diff --git a/unraid-ui/package.json b/unraid-ui/package.json index d70126983..d927c230a 100644 --- a/unraid-ui/package.json +++ b/unraid-ui/package.json @@ -37,9 +37,9 @@ "clsx": "^2.1.1", "kebab-case": "^2.0.1", "lucide-vue-next": "^0.468.0", - "radix-vue": "^1.9.11", + "radix-vue": "^1.9.13", "shadcn-vue": "^0.11.3", - "tailwind-merge": "^2.5.5", + "tailwind-merge": "^2.6.0", "vue-sonner": "^1.3.0" }, "devDependencies": { @@ -53,6 +53,7 @@ "@types/jsdom": "^21.1.7", "@types/node": "^20.0.0", "@types/testing-library__vue": "^5.0.0", + "@unraid/tailwind-rem-to-rem": "^1.1.0", "@vitejs/plugin-vue": "^5.0.0", "@vitejs/plugin-vue-jsx": "^4.1.1", "@vitest/coverage-v8": "^1.0.0", @@ -67,6 +68,7 @@ "postcss": "^8.4.49", "prettier": "3.4.2", "prettier-plugin-tailwindcss": "^0.6.11", + "tailwind-rem-to-rem": "github:unraid/tailwind-rem-to-rem", "tailwindcss": "^3.0.0", "tailwindcss-animate": "^1.0.7", "typescript": "^5.0.0", diff --git a/unraid-ui/src/components/brand/BrandLoading.ce.vue b/unraid-ui/src/components/brand/BrandLoading.ce.vue index 21b8e144f..b88f55b7a 100644 --- a/unraid-ui/src/components/brand/BrandLoading.ce.vue +++ b/unraid-ui/src/components/brand/BrandLoading.ce.vue @@ -1,15 +1,32 @@ - - diff --git a/unraid-ui/src/components/brand/BrandLoadingWhite.vue b/unraid-ui/src/components/brand/BrandLoadingWhite.vue deleted file mode 100644 index 7a448f376..000000000 --- a/unraid-ui/src/components/brand/BrandLoadingWhite.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/unraid-ui/src/components/brand/brand-loading.variants.ts b/unraid-ui/src/components/brand/brand-loading.variants.ts new file mode 100644 index 000000000..dfa71b84a --- /dev/null +++ b/unraid-ui/src/components/brand/brand-loading.variants.ts @@ -0,0 +1,27 @@ +import { cva } from 'class-variance-authority'; + +export const brandLoadingVariants = cva('inline-flex items-center justify-center w-full h-full', { + variants: { + variant: { + default: '', + black: 'text-black fill-black', + white: 'text-white fill-white', + }, + size: { + sm: 'h-12 w-12', + md: 'h-16 w-16', + lg: 'h-20 w-20', + full: 'h-full w-full', + }, + }, + defaultVariants: { + variant: 'default', + }, +}); + +export const markAnimations = { + mark_2_4: 'animate-mark-2', + mark_3: 'animate-mark-3', + mark_6_8: 'animate-mark-6', + mark_7: 'animate-mark-7', +}; diff --git a/unraid-ui/src/components/brand/index.ts b/unraid-ui/src/components/brand/index.ts index ad762a579..ea8e2b0e6 100644 --- a/unraid-ui/src/components/brand/index.ts +++ b/unraid-ui/src/components/brand/index.ts @@ -1,6 +1,9 @@ -export { default as BrandButton } from "./BrandButton.vue"; -export { brandButtonVariants } from "./brand-button.variants"; -export { default as BrandLoading } from "./BrandLoading.ce.vue"; -export { default as BrandLoadingWhite } from "./BrandLoadingWhite.vue"; -export { default as BrandLogo } from "./BrandLogo.vue"; -export { default as BrandLogoConnect } from "./BrandLogoConnect.vue"; +export { default as BrandButton } from './BrandButton.vue'; +export { brandButtonVariants } from './brand-button.variants'; +export { default as BrandLoading } from './BrandLoading.ce.vue'; +export { brandLoadingVariants } from './brand-loading.variants'; +export { default as BrandLogo } from './BrandLogo.vue'; +export { default as BrandLogoConnect } from './BrandLogoConnect.vue'; + +// Type exports +export type { BrandButtonProps } from './BrandButton.vue'; diff --git a/unraid-ui/src/components/common/badge/Badge.vue b/unraid-ui/src/components/common/badge/Badge.vue index 8af72a087..06729d74b 100644 --- a/unraid-ui/src/components/common/badge/Badge.vue +++ b/unraid-ui/src/components/common/badge/Badge.vue @@ -1,12 +1,25 @@ diff --git a/unraid-ui/src/components/common/badge/index.ts b/unraid-ui/src/components/common/badge/index.ts index 00dff0d91..38895d982 100644 --- a/unraid-ui/src/components/common/badge/index.ts +++ b/unraid-ui/src/components/common/badge/index.ts @@ -1,2 +1,5 @@ -export { default as Badge } from "./Badge.vue"; -export { badgeVariants } from "./badge.variants"; +export { default as Badge } from './Badge.vue'; +export { badgeVariants } from './badge.variants'; + +// Type exports +export type { BadgeProps } from './Badge.vue'; diff --git a/unraid-ui/src/components/common/button/index.ts b/unraid-ui/src/components/common/button/index.ts index 89b40703c..074a3d8a2 100644 --- a/unraid-ui/src/components/common/button/index.ts +++ b/unraid-ui/src/components/common/button/index.ts @@ -1,2 +1,5 @@ -export { default as Button } from "./Button.vue"; -export { buttonVariants } from "./button.variants"; +export { default as Button } from './Button.vue'; +export { buttonVariants } from './button.variants'; + +// Type exports +export type { ButtonProps } from './Button.vue'; diff --git a/unraid-ui/src/components/common/loading/Bar.vue b/unraid-ui/src/components/common/loading/Bar.vue index b0bb48dec..f2ed64c79 100644 --- a/unraid-ui/src/components/common/loading/Bar.vue +++ b/unraid-ui/src/components/common/loading/Bar.vue @@ -1,7 +1,7 @@