Skip to content

chore: migrate frontend toolchain to Vite, React 19, shadcn/ui#1

Draft
itzzjustmateo wants to merge 7 commits into
1.0-developfrom
chore/ui-rework
Draft

chore: migrate frontend toolchain to Vite, React 19, shadcn/ui#1
itzzjustmateo wants to merge 7 commits into
1.0-developfrom
chore/ui-rework

Conversation

@itzzjustmateo

Copy link
Copy Markdown
Member

Summary

Comprehensive frontend architecture migration for Pteranodon panel.

Toolchain

  • Replace Webpack 5 + Babel with Vite 6 + @vitejs/plugin-react
  • Retain twin.macro + styled-components as transitional deps for backward compat

Runtime

  • Upgrade React 16 → React 19 with createRoot API
  • Remove react-hot-loader, formik, yup from critical path

UI Framework

  • Add shadcn/ui component registry with Radix primitives
  • 7 foundational components: Button, Dialog, Input, Select, Label, Switch, DropdownMenu
  • Tailwind CSS variable theme with dark mode support
  • cn() utility (clsx + tailwind-merge)

Asset Pipeline

  • Vite dev server on :5173 with HTTPS cert support
  • Production builds emit hashed assets to public/assets/ with manifest.json
  • ViteAsset.php for Blade template integration
  • Laravel dev mode auto-detects Vite dev server

CI/CD

  • Dockerfile layer caching optimization
  • Simplified build script
  • Jest migrated from babel-jest to ts-jest

Breaking Changes (for follow-up)

  • ~100 components still use twin.macro/styled-components — kept working via transitional deps
  • Incremental migration path: components/elements/* → ui/*

…adcn/ui foundation

Breaking changes:
- Replace Webpack 5 + Babel with Vite 6 + @vitejs/plugin-react
- Upgrade React 16 → React 19 with createRoot API
- Remove react-hot-loader, formik, yup, styled-components-breakpoint from critical path

New pipeline:
- vite.config.ts with path aliases (@, @definitions, @feature)
- PostCSS ESM config for Tailwind + nesting
- Production builds emit to public/assets/ with manifest.json
- ViteAsset.php parses manifest for Blade asset loading
- Dev server on :5173 with HTTPS certs support

UI framework:
- shadcn/ui component registry (components.json)
- Tailwind config with CSS variables, dark mode, animations
- Radix primitives: Dialog, DropdownMenu, Select, Switch, Label, Slot
- cn() utility via clsx + tailwind-merge
- Lucide icons for component glyphs

Backward compat:
- twin.macro + styled-components + babel-plugin-macros retained as
  transitional deps for 100+ existing components
- Incremental migration path: components/elements/* → ui/*

CI/CD:
- Dockerfile layer caching optimization
- Build script simplified to 'bun run build'
- Jest migrated from babel-jest to ts-jest
@itzzjustmateo itzzjustmateo self-assigned this Jun 26, 2026
@itzzjustmateo itzzjustmateo added the enhancement New feature or request label Jun 26, 2026
@itzzjustmateo
itzzjustmateo marked this pull request as draft June 26, 2026 19:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant