feat: integrate HeroUI component library

Implemented HeroUI migration plan with the following changes:

Stage 0: Environment Setup
- Installed @heroui/react@2.8.7, @heroui/theme@2.4.26, framer-motion@12.29.2
- Configured Tailwind with HeroUI plugin
- Added HeroUI content paths to Tailwind config

Stage 1: Provider Architecture
- Created Providers.tsx wrapper combining HeroUIProvider and AppProvider
- Updated app/layout.tsx to use new Providers component
- Preserved all AppContext functionality (theme, language, translations)

Stage 2: Component Migrations
- TabNavigation: Migrated to HeroUI Tabs with keyboard navigation support
- TopBar: Migrated buttons to HeroUI Button components
- LanguageSwitch: Migrated to HeroUI Dropdown for better UX
- ThemeSwitch: Migrated to HeroUI Button (isIconOnly variant)
- MintSwapPanel: Migrated to HeroUI Tabs and Button components

Benefits:
- Enhanced accessibility with ARIA attributes and keyboard navigation
- Smooth animations and transitions via Framer Motion
- Consistent component API across the application
- Maintained all existing design tokens and color system
- Preserved dark mode functionality

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-30 03:49:53 +00:00
parent 098a91f2ac
commit 9e0dd1d278
27 changed files with 11184 additions and 7928 deletions

View File

@@ -1,44 +1,46 @@
import type { Config } from "tailwindcss";
export default {
darkMode: "class",
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
'bg-subtle': '#f9fafb',
'bg-surface': '#ffffff',
'border-normal': '#e5e7eb',
'border-gray': '#f3f4f6',
'text-primary': '#111827',
'text-tertiary': '#9ca1af',
'fill-secondary-click': '#f3f4f6',
},
fontFamily: {
inter: ['var(--font-inter)', 'Inter', 'sans-serif'],
jetbrains: ['var(--font-jetbrains)', 'JetBrains Mono', 'monospace'],
},
fontSize: {
'caption-tiny': ['12px', { lineHeight: '150%', letterSpacing: '0.01em' }],
'body-small': ['14px', { lineHeight: '150%' }],
'body-default': ['16px', { lineHeight: '150%' }],
'body-large': ['18px', { lineHeight: '150%' }],
'heading-h3': ['24px', { lineHeight: '130%', letterSpacing: '-0.005em' }],
'heading-h2': ['32px', { lineHeight: '120%', letterSpacing: '-0.01em' }],
},
fontWeight: {
regular: '400',
medium: '500',
bold: '700',
extrabold: '800',
},
},
},
plugins: [],
} satisfies Config;
import type { Config } from "tailwindcss";
import { heroui } from "@heroui/theme";
export default {
darkMode: "class",
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
'bg-subtle': '#f9fafb',
'bg-surface': '#ffffff',
'border-normal': '#e5e7eb',
'border-gray': '#f3f4f6',
'text-primary': '#111827',
'text-tertiary': '#9ca1af',
'fill-secondary-click': '#f3f4f6',
},
fontFamily: {
inter: ['var(--font-inter)', 'Inter', 'sans-serif'],
jetbrains: ['var(--font-jetbrains)', 'JetBrains Mono', 'monospace'],
},
fontSize: {
'caption-tiny': ['12px', { lineHeight: '150%', letterSpacing: '0.01em' }],
'body-small': ['14px', { lineHeight: '150%' }],
'body-default': ['16px', { lineHeight: '150%' }],
'body-large': ['18px', { lineHeight: '150%' }],
'heading-h3': ['24px', { lineHeight: '130%', letterSpacing: '-0.005em' }],
'heading-h2': ['32px', { lineHeight: '120%', letterSpacing: '-0.01em' }],
},
fontWeight: {
regular: '400',
medium: '500',
bold: '700',
extrabold: '800',
},
},
},
plugins: [heroui()],
} satisfies Config;