Commit Graph

31 Commits

Author SHA1 Message Date
Eli Bosley
86b6c4f85b fix: inject Tailwind CSS into client entry point (#1537)
Added a Vite plugin to automatically inject the Tailwind CSS import into
the `unraid-components.client.js` entry file, enhancing the integration
of Tailwind CSS within the application. This change improves the setup
for styling components consistently across the project.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added automated validation to ensure Tailwind CSS styles are correctly
included in the custom elements build output.

* **Chores**
* Updated the build process to include a CSS validation step after
manifest generation.
* Enhanced development build configuration to enable CSS source maps and
optimize Tailwind CSS injection into web components.
  * Extended CSS theme with new responsive breakpoint variables.
* Improved CSS class specificity in user profile, server state, and
update modal components for consistent styling.
* Removed redundant style blocks and global CSS imports from multiple
components to streamline styling and reduce duplication.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-07-23 15:30:57 -04:00
Eli Bosley
2c62e0ad09 feat: tailwind v4 (#1522)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Streamlined Tailwind CSS integration using Vite plugin, eliminating
the need for separate Tailwind config files.
* Updated theme and color variables for improved consistency and
maintainability.

* **Style**
* Standardized spacing, sizing, and font classes across all components
using Tailwind’s default scale.
* Reduced excessive gaps, padding, and font sizes for a more compact and
cohesive UI.
* Updated gradient, border, and shadow classes to match Tailwind v4
conventions.
* Replaced custom pixel-based classes with Tailwind’s bracketed
arbitrary value syntax where needed.
* Replaced focus outline styles from `outline-none` to `outline-hidden`
for consistent focus handling.
* Updated flex shrink/grow utility classes to use newer shorthand forms.
* Converted several component templates to use self-closing tags for
cleaner markup.
  * Adjusted icon sizes and spacing for improved visual balance.

* **Chores**
* Removed legacy Tailwind/PostCSS configuration files and related
scripts.
* Updated and cleaned up package dependencies for Tailwind v4 and
related plugins.
  * Removed unused or redundant build scripts and configuration exports.
  * Updated documentation to reflect new Tailwind v4 usage.
  * Removed Prettier Tailwind plugin from formatting configurations.
* Removed Nuxt Tailwind module in favor of direct Vite plugin
integration.
  * Cleaned up ESLint config by removing Prettier integration.

* **Bug Fixes**
  * Corrected invalid or outdated Tailwind class names and syntax.
* Fixed issues with max-width and other utility classes for improved
layout consistency.

* **Tests**
* Updated test assertions to match new class names and styling
conventions.

* **Documentation**
* Revised README and internal notes to clarify Tailwind v4 adoption and
configuration changes.
* Added new development notes emphasizing Tailwind v4 usage and
documentation references.

* **UI Components**
* Enhanced BrandButton stories with detailed variant, size, and padding
showcases for better visual testing.
* Improved theme store to apply dark mode class on both `<html>` and
`<body>` elements for compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-07-21 09:58:02 -04:00
Zack Spear
862b54de8c fix(HeaderOsVersion): adjust top margin for header component (#1485)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
  * Increased top margin in the OS version header for improved spacing.
* Updated user profile container to use padding instead of margin for
better layout consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-07-08 16:11:02 -04:00
Eli Bosley
e791cc680d fix: header padding regression (#1477)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Improved spacing in the header and user profile components by adding
top and right margins for a cleaner layout.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-07-08 11:55:45 -04:00
Eli Bosley
345e83bfb0 feat: upgrade nuxt-custom-elements (#1461)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added new modal dialogs and UI components, including activation steps,
OS update feedback, and expanded notification management.
* Introduced a plugin to configure internationalization, state
management, and Apollo client support in web components.
* Added a new Log Viewer page with a streamlined interface for viewing
logs.

* **Improvements**
* Centralized Pinia state management by consolidating all stores to use
a shared global Pinia instance.
* Simplified component templates by removing redundant
internationalization host wrappers.
* Enhanced ESLint configuration with stricter rules and global variable
declarations.
* Refined custom element build process to prevent jQuery conflicts and
optimize minification.
* Updated component imports and templates for consistent structure and
maintainability.
* Streamlined log viewer dropdowns using simplified select components
with improved formatting.
* Improved notification sidebar with filtering by importance and modular
components.
* Replaced legacy notification popups with new UI components and added
automatic root session creation for localhost requests.
* Updated OS version display and user profile UI with refined styling
and component usage.

* **Bug Fixes**
* Fixed component tag capitalization and improved type annotations
across components.

* **Chores**
* Updated development dependencies including ESLint plugins and build
tools.
* Removed deprecated log viewer patch class and cleaned up related test
fixtures.
  * Removed unused imports and simplified Apollo client setup.
* Cleaned up test mocks and removed obsolete i18n host component tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210730229632804

---------

Co-authored-by: Pujit Mehrotra <pujit@lime-technology.com>
Co-authored-by: Zack Spear <zackspear@users.noreply.github.com>
2025-07-08 10:05:39 -04:00
Eli Bosley
39e83b2aa1 feat: move activation code logic into the API (#1369)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added comprehensive activation code customization service with dynamic
theming, partner branding, and UI updates.
- Introduced new GraphQL types and public queries for activation code,
partner info, and theme data.
- Implemented new web UI stores and components for activation modal,
partner logos, and theme management.
- **Improvements**
- Removed legacy activation code scripts, PHP components, and plugin
references, streamlining activation logic.
- Enhanced configuration and environment support for activation and
theming features.
- Improved error handling, validation, and type safety in activation and
customization modules.
- **Bug Fixes**
- Fixed color code validation and path handling in customization
service.
- **Chores**
  - Added pre-commit linting hooks and related configuration.
  - Cleaned up test and development environment files.
- **Tests**
- Added extensive tests covering activation customization service
initialization, data handling, and file modifications.
  - Removed obsolete tests related to legacy activation code store.
- **Refactor**
- Migrated activation and partner branding logic from legacy scripts and
PHP to TypeScript services and GraphQL resolvers.
- Reorganized store and component architecture for activation-related
features.
- **Style**
- Updated UI components for improved branding, theming, accessibility,
and layout consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Zack Spear <hi@zackspear.com>
2025-05-01 17:40:36 -04:00
Michael Datelle
32c6fe6295 test: create tests for components batch 2 (#1365)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Refactor**
- Improved component tests by integrating Pinia's testing utilities for
more reliable store mocking and state management.
- Updated test setup to streamline plugin usage and remove unnecessary
configuration.
- Enhanced test clarity by relying on store state changes and Vue's
reactivity instead of manual mock updates.
- Simplified test cases by focusing on passed props and standardized
store mocking.
- **Chores**
  - Updated test directory structure for better organization.
  - Added additional test mocks for dependencies.
- **New Features**
- Added comprehensive tests for the ColorSwitcher component, verifying
UI elements and theme store interactions.
- Introduced tests for the DevSettings component, confirming UI
rendering and interaction behavior.
- Added detailed tests for the DowngradeOs component covering store
interactions and conditional UI rendering.
- Added new test suites for DummyServerSwitcher component, ensuring
correct rendering and reactive state updates.
- Added new test suites for HeaderOsVersion component, validating
version badge rendering and error state handling.
- Added new test suite for the I18nHost component, validating
internationalization context provisioning and error handling.
- Added a comprehensive test suite for the Modal component, covering UI
behavior, styling, and event handling.
- Added new test suite for the Registration component, verifying
rendering based on server state.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: mdatelle <mike@datelle.net>
2025-04-29 12:44:31 -04:00
Michael Datelle
6669a963af refactor: unraid ui cleanup and migration (#998)
Co-authored-by: Eli Bosley <ekbosley@gmail.com>
Co-authored-by: Pujit Mehrotra <pujit@lime-technology.com>
Co-authored-by: mdatelle <mike@datelle.net>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Zack Spear <zackspear@users.noreply.github.com>
2025-01-15 11:15:52 -05:00
Pujit Mehrotra
7dcf947527 feat(web): open official release notes via header os version 2025-01-07 09:59:36 -08:00
Eli Bosley
c6547a51fc feat: lots of progress on colors 2024-12-17 11:48:45 -05:00
Eli Bosley
24435613f8 feat: begin fixing dark mode in the webcomponents 2024-12-17 11:48:45 -05:00
Zack Spear
ff24f12cae refactor: optional chaining for click props 2024-05-16 14:13:01 -07:00
Zack Spear
7759fe1dc3 chore(web): update deps + eslint (#887)
* chore: update deps + eslint

* fix: lint + type errors
2024-05-16 09:26:39 -04:00
Zack Spear
7e33b25593 refactor: header os version update status only when no state error 2024-01-31 11:02:37 -08:00
Zack Spear
f1e0d93bc5 refactor: header os version reboot type status simplify 2024-01-31 11:02:37 -08:00
Zack Spear
5a85f55be8 refactor: header os version update os status pills 2024-01-31 11:02:37 -08:00
Zack Spear
f1059aa381 refactor: header os update available badge open update modal 2024-01-31 11:02:37 -08:00
Zack Spear
6445d1647a refactor: HeaderOsVersion update available badge 2023-12-19 16:25:26 -08:00
Zack Spear
c2063c28af refactor: components with refactored updateOsStore 2023-12-19 16:25:26 -08:00
Zack Spear
d132ad481b fix: header version thirdPartyDriversDownloading pill 2023-11-14 15:39:00 -08:00
Zack Spear
0e0a652dff refactor(web): improved header reboot pill link 2023-11-08 15:06:31 -08:00
Zack Spear
799b77f09b refactor: downgrade and update improvements with store refactors 2023-11-06 13:20:06 -08:00
Zack Spear
caab570be6 chore: lint auto fixes 2023-11-01 13:36:17 -07:00
Zack Spear
5d6d91cfbd refactor(web): header os version styling 2023-11-01 13:36:17 -07:00
Zack Spear
bfa667c1ab feat(web): update os create flash backup button 2023-11-01 13:36:17 -07:00
Zack Spear
9f3fab6de4 refactor(web): header os version logic 2023-11-01 13:36:17 -07:00
Zack Spear
2c3c9c441e refactor(web): header os version spacing 2023-11-01 13:36:17 -07:00
Zack Spear
7dffa1a701 refactor(web): HeaderOsVersion text size 2023-11-01 13:36:17 -07:00
Zack Spear
e22d1f0a6c refactor(web): update handle third-party drivers 2023-11-01 13:36:17 -07:00
Zack Spear
297bce3a89 refactor: downgrades working + reboot notice 2023-11-01 13:36:17 -07:00
Zack Spear
d8faef0146 refactor: WIP on downgrade and UI / UX 2023-11-01 13:36:17 -07:00