Feat/modernize toolchain & UI #31
Conversation
- Migrate bundler from Webpack to Vite for faster dev experience - Replace Yarn with Bun for faster dependency management - Replace Prettier+ESLint with Biome for unified linting/formatting - Integrate shadcn/ui component library (30+ components) - Add Vitest testing infrastructure with jsdom environment - Reorganize component architecture into feature-based folders - Add theme-aware logo system (wordmark + logomark variants) - Add page transitions and skeleton loaders - Add keyboard shortcuts (⌘K, G+H/T/M/P/S) - Fix light mode styling issues - Add Docker build support with .dockerignore BREAKING CHANGE: Use `bun` instead of `yarn` for package management
- Migrate bundler from Webpack to Vite for faster dev experience
- Replace Yarn with Bun for faster dependency management
- Replace Prettier+ESLint with Biome for unified linting/formatting
- Integrate shadcn/ui component library (30+ components)
- Add Vitest testing infrastructure with jsdom environment
- Reorganize component architecture into feature-based folders
- Add theme-aware logo system (wordmark + logomark variants)
- Add page transitions and skeleton loaders
- Add keyboard shortcuts (⌘K, G+H/T/M/P/S)
- Fix light mode styling issues
- Add Docker build support with .dockerignore
BREAKING CHANGE: Use �[0m�[1m�[35mBun�[0m is a fast JavaScript runtime, package manager, bundler, and test runner. �[2m(1.3.5+1e86cebd7)�[0m
�[1mUsage:�[0m �[1mbun <command> �[36m[...flags]�[0m �[1m[...args]�[0m
�[1mCommands:�[0m
�[1m�[35mrun�[0m �[2m./my-script.ts�[0m Execute a file with Bun
�[2mlint�[0m Run a package.json script
�[1m�[35mtest�[0m Run unit tests with Bun
�[1m�[35mx�[0m �[2mprisma �[0m Execute a package binary (CLI), installing if needed �[2m(bunx)�[0m
�[1m�[35mrepl�[0m Start a REPL session with Bun
�[1m�[35mexec�[0m Run a shell script directly with Bun
�[1m�[34minstall�[0m Install dependencies for a package.json �[2m(bun i)�[0m
�[1m�[34madd�[0m �[2mtailwindcss �[0m Add a dependency to package.json �[2m(bun a)�[0m
�[1m�[34mremove�[0m �[2mleft-pad �[0m Remove a dependency from package.json �[2m(bun rm)�[0m
�[1m�[34mupdate�[0m �[2melysia �[0m Update outdated dependencies
�[1m�[34maudit�[0m Check installed packages for vulnerabilities
�[1m�[34moutdated�[0m Display latest versions of outdated dependencies
�[1m�[34mlink�[0m �[2m[<package>]�[0m Register or link a local npm package
�[1m�[34munlink�[0m Unregister a local npm package
�[1m�[34mpublish�[0m Publish a package to the npm registry
�[1m�[34mpatch �[2m<pkg>�[0m Prepare a package for patching
�[1m�[34mpm �[2m<subcommand>�[0m Additional package management utilities
�[1m�[34minfo�[0m �[2m@shumai/shumai �[0m Display package metadata from the registry
�[1m�[34mwhy�[0m �[2mhono �[0m Explain why a package is installed
�[1m�[33mbuild�[0m �[2m./a.ts ./b.jsx�[0m Bundle TypeScript & JavaScript into a single file
�[1m�[36minit�[0m Start an empty Bun project from a built-in template
�[1m�[36mcreate�[0m �[2mastro �[0m Create a new project from a template �[2m(bun c)�[0m
�[1m�[36mupgrade�[0m Upgrade to latest version of Bun.
�[1m�[36mfeedback�[0m �[2m./file1 ./file2�[0m Provide feedback to the Bun team.
�[2m<command>�[0m �[1m�[36m--help�[0m Print help text for command.
Learn more about Bun: �[35mhttps://bun.com/docs�[0m
Join our Discord community: �[34mhttps://bun.com/discord�[0m instead of for package management
|
@agarunovnatan is attempting to deploy a commit to the squads Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
1 participant
feat: Modernize Build Toolchain and UI Component Architecture
Summary
This PR modernizes the Squads V4 Public Client with a comprehensive upgrade to the development toolchain and UI architecture. The changes prioritize developer experience, build performance, and long-term maintainability while preserving all existing functionality.
Key outcomes:
Changes Overview
Decision Rationale
1. Webpack → Vite
Why this change?
Problem with Webpack:
Why Vite:
vite.config.tsreplaces 3 webpack filesTrade-offs considered:
vite-plugin-node-polyfillsfor Solana SDK compatibilityFiles changed:
webpack.common.js,webpack.dev.js,webpack.prod.jsvite.config.ts2. Yarn → Bun
Why this change?
Problem with Yarn:
yarn.lockat 6,200+ lines—slow to parse and updateWhy Bun:
bun.lockis ~2,300 lines (63% reduction)package.jsonscripts, no code changes neededTrade-offs considered:
curlcommand in CIFiles changed:
yarn.lock(6,211 lines)bun.lock(2,321 lines)Migration for contributors:
3. Prettier + ESLint → Biome
Why this change?
Problem with Prettier + ESLint:
.prettierrc,.eslintrc)Why Biome:
biome.jsonfileTrade-offs considered:
Files changed:
prettier.config.jsbiome.jsonNew commands:
4. shadcn/ui Integration
Why this change?
Problem with ad-hoc components:
Why shadcn/ui:
Trade-offs considered:
Components added (30+):
Configuration:
5. Component Architecture Cleanup
Why this change?
Problem with flat structure:
New feature-based structure:
Benefits:
6. Testing Infrastructure (Vitest)
Why this change?
Problem:
Why Vitest:
describe/it/expectsyntaxSetup:
jsdomenvironment for DOM testing@testing-library/reactfor component testing@testing-library/jest-domfor enhanced assertionsFiles added:
src/test/setup.ts- Test environment configurationsrc/components/ui/button.test.tsx- Example component testsrc/lib/utils.test.ts- Example utility testCommands:
Before/After Comparison
Technical Stack
Developer Commands
yarn installbun installyarn devbun devyarn buildbun run buildyarn lint(ESLint)bun run lint(Biome)yarn format(Prettier)bun run format(Biome)bun testFile Changes Summary
Removed (6 files):
webpack.common.jswebpack.dev.jswebpack.prod.jsprettier.config.jsyarn.locktailwind.config.ts(replaced with.jsfor Docker compatibility)Added (40+ files):
vite.config.tsbiome.jsoncomponents.jsonbun.locktailwind.config.js.dockerignoresrc/test/setup.tssrc/components/ui/*.tsx(30+ components)src/components/layout/PageTransition.tsxsrc/components/layout/PageSkeleton.tsxlogo-black.png,logo-white.png,logomark-black.png,logomark-white.png)Breaking Changes
For Contributors
Package manager: Use
buninstead ofyarnLinting/Formatting: Use Biome commands
IDE setup: Install Biome extension instead of Prettier/ESLint
For Downstream Users
Testing Instructions
Commit History
Key commits in this modernization:
8c603fd00bb1dfAdditional UI/UX Improvements
Light Mode Polish
Theme-Aware Logos
logo-black.png,logo-white.png)logomark-black.png,logomark-white.png)Page Transitions
Keyboard Shortcuts
⌘K- Open command paletteG + H- Go to DashboardG + T- Go to TransactionsG + M- Go to MembersG + P- Go to ProgramsG + S- Go to SettingsChecklist
Design System Changes
This document outlines the UX/UI changes made to the Squads V4 Public Client compared to the original upstream repository.
Overview
The UI was modernized from a basic functional interface to a polished, Vercel-inspired design system with consistent components, accessible patterns, and a minimalist black/white aesthetic.
Color Palette
Original
Current: Vercel-Inspired Monochrome
Semantic Colors (Preserved)
142 71% 45%(Green)38 92% 50%(Amber)0 62% 55%(Red)Design Rationale
Component Library
Original
Current: shadcn/ui Integration
30+ accessible components built on Radix UI primitives:
Button Variants
Visual Effects
Removed
glow-primary,glow-success)gradient-text-animated)Retained (Minimal)
Card Interactions
Before:
After:
Typography & Spacing
Typography
tracking-tight)Spacing System
gap-4for related itemsspace-y-6for section separationp-6for card paddingBorder Radius
0.75remto0.5remfor sharper, more modern lookrounded-lg/rounded-mdusageComponent Architecture
Original Structure
Current Structure
Page-Specific Changes
Home / Landing
Member List (Config)
Token List (Vault)
Transactions
Accessibility Improvements
Keyboard Navigation
Screen Readers
Color Contrast
prefers-reduced-motionDark/Light Mode
Implementation
useThemehook for system preference detectionsquads-ui-theme).lightclass on root)Toggle Location
Theme-Aware Logo System
The logo adapts to the current theme and sidebar state:
logo-white.png(white on black bg)logo-black.png(black on white bg)logomark-black.pnglogomark-white.pngPage Transitions & Loading States
Page Transitions
Smooth fade animations when navigating between pages:
Skeleton Loaders
Professional loading states with shimmer animations:
PageSkeletonCardSkeletonTableRowSkeletonDesign Principles Applied
File Changes Summary
src/styles/global.csscomponents.jsontailwind.config.jssrc/components/ui/*src/components/layout/*Before/After Visual Comparison
Color Theme
224 71% 4%)0 0% 0%)263 70% 50%)0 0% 98%)Effects
Design system inspired by Vercel's minimalist aesthetic - clean, professional, and focused on content over decoration.