Introduce a project-wide ESLint configuration with TypeScript/React rules (including a ban on direct useEffect and inline style object literals) and file-specific overrides. Update index.html to add theme-color meta tags and preload Google fonts. Expand package.json with new scripts (lint, typecheck, validate, extended test commands) and bump/add dev/dependencies for testing, linting, Radix UI, TanStack and tooling. Add many new components and tests (BrandMark, SetupSidebar, compose-builder UI and ServiceForm tabs, VPN tab, CodeMirror runtime, ThemeProvider, template UI and tests, icons), update existing components (CodeEditor, ConversionDialog, Header, Footer, MetaTags, SidebarUI) and hooks/routes. Add YAML generator and related utils, validation schemas, and numerous unit tests and fixtures. Misc: update tsconfig/vite config and styles.
Summary by CodeRabbit
Release Notes
New Features
SetupSidebar navigation and ConfigColumn with tabbed interface for managing services, networks, volumes, and VPN configuration.
Service form restructured into tab-based sections with field validation.
Enhanced Header and Footer with branding and routing awareness.
CodePanel for multi-format output (compose.yml, run.sh, systemd, .env, komodo.toml).
Bug Fixes
Improved YAML validation and error handling.
Enhanced mobile detection and theme persistence.
Tests
Comprehensive test suites for components and utilities.
Chores
ESLint configuration overhaul.
CSS design token system redesign.
Vite/Vitest configuration and dependency updates.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/hhftechnology/Dock-Dploy/pull/15
**Author:** [@hhftechnology](https://github.com/hhftechnology)
**Created:** 5/11/2026
**Status:** ❌ Closed
**Base:** `main` ← **Head:** `dev-ui`
---
### 📝 Commits (1)
- [`06fc45b`](https://github.com/hhftechnology/Dock-Dploy/commit/06fc45b87a68c7e04aff5df8d35d7d907fdd0cad) Add ESLint, compose-builder, YAML utils & tests
### 📊 Changes
**82 files changed** (+12807 additions, -7389 deletions)
<details>
<summary>View changed files</summary>
➕ `eslint.config.js` (+132 -0)
📝 `index.html` (+14 -2)
📝 `package.json` (+43 -15)
📝 `pnpm-lock.yaml` (+1946 -1315)
➕ `scripts/check-no-magic-css.mjs` (+128 -0)
➕ `src/__tests__/fixtures.ts` (+331 -0)
➕ `src/__tests__/setup.ts` (+26 -0)
➕ `src/components/BrandMark.tsx` (+32 -0)
📝 `src/components/CodeEditor.tsx` (+118 -119)
➕ `src/components/CodeMirrorRuntime.tsx` (+40 -0)
📝 `src/components/ConversionDialog.tsx` (+1 -1)
📝 `src/components/Footer.tsx` (+80 -17)
📝 `src/components/Header.tsx` (+93 -69)
📝 `src/components/MetaTags.tsx` (+30 -30)
➕ `src/components/SetupSidebar.tsx` (+103 -0)
📝 `src/components/SidebarUI.tsx` (+23 -46)
📝 `src/components/ThemeProvider.tsx` (+50 -29)
➕ `src/components/__tests__/BrandMark.test.tsx` (+26 -0)
➕ `src/components/__tests__/SetupSidebar.test.tsx` (+37 -0)
➕ `src/components/compose-builder/CodePanel.tsx` (+235 -0)
_...and 62 more files_
</details>
### 📄 Description
Introduce a project-wide ESLint configuration with TypeScript/React rules (including a ban on direct useEffect and inline style object literals) and file-specific overrides. Update index.html to add theme-color meta tags and preload Google fonts. Expand package.json with new scripts (lint, typecheck, validate, extended test commands) and bump/add dev/dependencies for testing, linting, Radix UI, TanStack and tooling. Add many new components and tests (BrandMark, SetupSidebar, compose-builder UI and ServiceForm tabs, VPN tab, CodeMirror runtime, ThemeProvider, template UI and tests, icons), update existing components (CodeEditor, ConversionDialog, Header, Footer, MetaTags, SidebarUI) and hooks/routes. Add YAML generator and related utils, validation schemas, and numerous unit tests and fixtures. Misc: update tsconfig/vite config and styles.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* SetupSidebar navigation and ConfigColumn with tabbed interface for managing services, networks, volumes, and VPN configuration.
* Service form restructured into tab-based sections with field validation.
* Enhanced Header and Footer with branding and routing awareness.
* CodePanel for multi-format output (compose.yml, run.sh, systemd, .env, komodo.toml).
* **Bug Fixes**
* Improved YAML validation and error handling.
* Enhanced mobile detection and theme persistence.
* **Tests**
* Comprehensive test suites for components and utilities.
* **Chores**
* ESLint configuration overhaul.
* CSS design token system redesign.
* Vite/Vitest configuration and dependency updates.
[](https://app.coderabbit.ai/change-stack/hhftechnology/Dock-Dploy/pull/15)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/hhftechnology/Dock-Dploy/pull/15
Author: @hhftechnology
Created: 5/11/2026
Status: ❌ Closed
Base:
main← Head:dev-ui📝 Commits (1)
06fc45bAdd ESLint, compose-builder, YAML utils & tests📊 Changes
82 files changed (+12807 additions, -7389 deletions)
View changed files
➕
eslint.config.js(+132 -0)📝
index.html(+14 -2)📝
package.json(+43 -15)📝
pnpm-lock.yaml(+1946 -1315)➕
scripts/check-no-magic-css.mjs(+128 -0)➕
src/__tests__/fixtures.ts(+331 -0)➕
src/__tests__/setup.ts(+26 -0)➕
src/components/BrandMark.tsx(+32 -0)📝
src/components/CodeEditor.tsx(+118 -119)➕
src/components/CodeMirrorRuntime.tsx(+40 -0)📝
src/components/ConversionDialog.tsx(+1 -1)📝
src/components/Footer.tsx(+80 -17)📝
src/components/Header.tsx(+93 -69)📝
src/components/MetaTags.tsx(+30 -30)➕
src/components/SetupSidebar.tsx(+103 -0)📝
src/components/SidebarUI.tsx(+23 -46)📝
src/components/ThemeProvider.tsx(+50 -29)➕
src/components/__tests__/BrandMark.test.tsx(+26 -0)➕
src/components/__tests__/SetupSidebar.test.tsx(+37 -0)➕
src/components/compose-builder/CodePanel.tsx(+235 -0)...and 62 more files
📄 Description
Introduce a project-wide ESLint configuration with TypeScript/React rules (including a ban on direct useEffect and inline style object literals) and file-specific overrides. Update index.html to add theme-color meta tags and preload Google fonts. Expand package.json with new scripts (lint, typecheck, validate, extended test commands) and bump/add dev/dependencies for testing, linting, Radix UI, TanStack and tooling. Add many new components and tests (BrandMark, SetupSidebar, compose-builder UI and ServiceForm tabs, VPN tab, CodeMirror runtime, ThemeProvider, template UI and tests, icons), update existing components (CodeEditor, ConversionDialog, Header, Footer, MetaTags, SidebarUI) and hooks/routes. Add YAML generator and related utils, validation schemas, and numerous unit tests and fixtures. Misc: update tsconfig/vite config and styles.
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Tests
Chores
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.