feat(web): design tokens, Tailwind config, base components (TEC-3057)
- Add chart palette, motion, and z-index CSS vars to globals.css - Replace custom theme-provider with next-themes (dark default) - Extend tailwind.config.ts with heading fonts, spacing (row-compact, row-roomy, sidebar), chart colors, elevation shadows, glow shadows, transition timing, pill border-radius, z-index scale - Update tick-flash animations to match design token spec (480ms) - Add prefers-reduced-motion support for all animations - Create base design-system components: Surface, SurfaceElevated, Divider, DensityProvider/useDensity, Numeric (VND/percent/compact formatting), Signal (up/down/neutral pill) - Add dev-only /dev/tokens showcase route (404 in production) - Update theme-provider tests to match next-themes integration Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
217
apps/web/app/[locale]/(dashboard)/dev/tokens/page.tsx
Normal file
217
apps/web/app/[locale]/(dashboard)/dev/tokens/page.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
'use client';
|
||||
|
||||
import { notFound } from 'next/navigation';
|
||||
import {
|
||||
Surface,
|
||||
SurfaceElevated,
|
||||
Divider,
|
||||
DensityProvider,
|
||||
useDensity,
|
||||
DENSITY_ROW_HEIGHT,
|
||||
Numeric,
|
||||
Signal,
|
||||
} from '@/components/design-system';
|
||||
|
||||
// Dev-only: block in production
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
// Will 404 at build time for static generation
|
||||
}
|
||||
|
||||
const COLOR_TOKENS = [
|
||||
{ name: '--background', tw: 'bg-background' },
|
||||
{ name: '--background-elevated', tw: 'bg-background-elevated' },
|
||||
{ name: '--background-surface', tw: 'bg-background-surface' },
|
||||
{ name: '--primary', tw: 'bg-primary' },
|
||||
{ name: '--primary-hover', tw: 'bg-primary-hover' },
|
||||
{ name: '--destructive', tw: 'bg-destructive' },
|
||||
{ name: '--warning', tw: 'bg-warning' },
|
||||
{ name: '--success', tw: 'bg-success' },
|
||||
{ name: '--accent-blue', tw: 'bg-accent-blue' },
|
||||
{ name: '--accent-purple', tw: 'bg-accent-purple' },
|
||||
{ name: '--signal-up', tw: 'bg-signal-up' },
|
||||
{ name: '--signal-down', tw: 'bg-signal-down' },
|
||||
{ name: '--signal-neutral', tw: 'bg-signal-neutral' },
|
||||
];
|
||||
|
||||
const CHART_TOKENS = [
|
||||
{ name: '--chart-1', tw: 'bg-chart-1' },
|
||||
{ name: '--chart-2', tw: 'bg-chart-2' },
|
||||
{ name: '--chart-3', tw: 'bg-chart-3' },
|
||||
{ name: '--chart-4', tw: 'bg-chart-4' },
|
||||
{ name: '--chart-5', tw: 'bg-chart-5' },
|
||||
{ name: '--chart-6', tw: 'bg-chart-6' },
|
||||
];
|
||||
|
||||
function DensityDemo() {
|
||||
const { density, setDensity } = useDensity();
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex gap-2">
|
||||
{(['compact', 'regular', 'roomy'] as const).map((d) => (
|
||||
<button
|
||||
key={d}
|
||||
onClick={() => setDensity(d)}
|
||||
className={`rounded-md px-3 py-1 text-sm ${density === d ? 'bg-primary text-primary-foreground' : 'bg-background-surface text-foreground-muted'}`}
|
||||
>
|
||||
{d}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="rounded-lg border border-border bg-background-elevated p-4">
|
||||
<div className={`${DENSITY_ROW_HEIGHT[density]} flex items-center border-b border-border px-cell`}>
|
||||
<span className="text-foreground-muted text-heading-xs uppercase font-semibold">Mẫu hàng — {density}</span>
|
||||
</div>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className={`${DENSITY_ROW_HEIGHT[density]} flex items-center border-b border-border px-cell`}>
|
||||
<span className="flex-1 text-sm">Dòng {i}</span>
|
||||
<Numeric value={i * 3_500_000_000} format="vnd" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DevTokensPage() {
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8 p-6">
|
||||
<h1 className="text-heading-lg font-bold">Design Tokens Showcase</h1>
|
||||
<p className="text-foreground-muted text-sm">Dev-only route — không hiển thị trên production.</p>
|
||||
|
||||
{/* Colors */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Màu sắc</h2>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
|
||||
{COLOR_TOKENS.map((t) => (
|
||||
<div key={t.name} className="space-y-1">
|
||||
<div className={`h-12 w-full rounded-md border border-border ${t.tw}`} />
|
||||
<p className="text-xs text-foreground-muted font-mono">{t.name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Chart palette */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Chart Palette</h2>
|
||||
<div className="flex gap-2">
|
||||
{CHART_TOKENS.map((t) => (
|
||||
<div key={t.name} className="space-y-1 flex-1">
|
||||
<div className={`h-10 w-full rounded-md ${t.tw}`} />
|
||||
<p className="text-[10px] text-foreground-muted font-mono text-center">{t.name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Typography */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Typography</h2>
|
||||
<div className="space-y-2">
|
||||
<p className="text-heading-xl font-bold">heading-xl (1.875rem)</p>
|
||||
<p className="text-heading-lg font-bold">heading-lg (1.5rem)</p>
|
||||
<p className="text-heading-md font-semibold">heading-md (1.125rem)</p>
|
||||
<p className="text-heading-sm font-semibold">heading-sm (0.875rem)</p>
|
||||
<p className="text-heading-xs font-semibold uppercase">heading-xs (0.75rem uppercase tracking)</p>
|
||||
<Divider className="my-2" />
|
||||
<p className="font-mono text-data-lg">data-lg: 1.250.000.000 ₫</p>
|
||||
<p className="font-mono text-data-md">data-md: 850.000.000 ₫</p>
|
||||
<p className="font-mono text-data-sm">data-sm: 450.000.000 ₫</p>
|
||||
<p className="font-mono text-ticker">ticker: Q1 +2.4%</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Shadows */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Elevation (Shadow)</h2>
|
||||
<div className="flex gap-6">
|
||||
{['elevation-0', 'elevation-1', 'elevation-2', 'elevation-3'].map((s) => (
|
||||
<div
|
||||
key={s}
|
||||
className={`flex h-20 w-32 items-center justify-center rounded-lg bg-background-elevated text-xs text-foreground-muted shadow-${s}`}
|
||||
>
|
||||
{s}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Signals */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Signal</h2>
|
||||
<div className="flex gap-3">
|
||||
<Signal direction="up" label="+2.4%" />
|
||||
<Signal direction="down" label="-1.3%" />
|
||||
<Signal direction="neutral" label="0.0%" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Glow shadows */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Glow Shadows</h2>
|
||||
<div className="flex gap-6">
|
||||
<div className="flex h-16 w-28 items-center justify-center rounded-lg bg-background-elevated text-xs text-signal-up shadow-glow-up">
|
||||
glow-up
|
||||
</div>
|
||||
<div className="flex h-16 w-28 items-center justify-center rounded-lg bg-background-elevated text-xs text-signal-down shadow-glow-down">
|
||||
glow-down
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Surfaces */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Surface</h2>
|
||||
<div className="flex gap-4">
|
||||
<Surface className="p-4 border border-border">
|
||||
<p className="text-sm">Surface (flat)</p>
|
||||
</Surface>
|
||||
<SurfaceElevated className="p-4">
|
||||
<p className="text-sm">SurfaceElevated</p>
|
||||
</SurfaceElevated>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Numeric */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Numeric</h2>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-foreground-muted w-20">VND:</span>
|
||||
<Numeric value={3_500_000_000} />
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-foreground-muted w-20">Percent:</span>
|
||||
<Numeric value={12.5} format="percent" />
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-foreground-muted w-20">Compact:</span>
|
||||
<Numeric value={1_250_000_000} format="compact" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Density */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Density</h2>
|
||||
<DensityProvider>
|
||||
<DensityDemo />
|
||||
</DensityProvider>
|
||||
</section>
|
||||
|
||||
{/* Tick flash animations */}
|
||||
<section>
|
||||
<h2 className="text-heading-md font-semibold mb-4">Tick Flash</h2>
|
||||
<div className="flex gap-4">
|
||||
<div className="tick-flash-up rounded-md px-4 py-2 text-sm">Flash Up</div>
|
||||
<div className="tick-flash-down rounded-md px-4 py-2 text-sm">Flash Down</div>
|
||||
</div>
|
||||
<p className="text-xs text-foreground-muted mt-2">Refresh page to replay animation. Disabled with prefers-reduced-motion.</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -39,6 +39,21 @@
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 142.1 76.2% 36.3%;
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Chart palette (light) */
|
||||
--chart-1: 200 90% 45%;
|
||||
--chart-2: 142 65% 38%;
|
||||
--chart-3: 38 95% 48%;
|
||||
--chart-4: 280 65% 50%;
|
||||
--chart-5: 0 75% 50%;
|
||||
--chart-6: 180 60% 40%;
|
||||
|
||||
/* Motion */
|
||||
--duration-xs: 80ms;
|
||||
--duration-sm: 150ms;
|
||||
--duration-md: 240ms;
|
||||
--ease-standard: cubic-bezier(.2, 0, 0, 1);
|
||||
--ease-emphasized: cubic-bezier(.3, 0, 0, 1);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -78,6 +93,16 @@
|
||||
--ring: 142 72% 42%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Chart palette (dark) */
|
||||
--chart-1: 200 90% 60%;
|
||||
--chart-2: 142 70% 50%;
|
||||
--chart-3: 38 95% 60%;
|
||||
--chart-4: 280 70% 65%;
|
||||
--chart-5: 0 75% 60%;
|
||||
--chart-6: 180 65% 50%;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
@@ -135,28 +160,44 @@
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Signal flash for price updates */
|
||||
@keyframes signal-flash-up {
|
||||
0%,
|
||||
/* Signal flash for price updates (tick-flash per design tokens) */
|
||||
@keyframes tick-up {
|
||||
0% {
|
||||
background-color: hsl(var(--signal-up) / 0.18);
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
30% {
|
||||
background-color: hsl(var(--signal-up-bg) / 0.2);
|
||||
}
|
||||
}
|
||||
@keyframes signal-flash-down {
|
||||
0%,
|
||||
@keyframes tick-down {
|
||||
0% {
|
||||
background-color: hsl(var(--signal-down) / 0.18);
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
30% {
|
||||
background-color: hsl(var(--signal-down-bg) / 0.2);
|
||||
}
|
||||
}
|
||||
.tick-flash-up {
|
||||
animation: tick-up 480ms ease-out;
|
||||
}
|
||||
.tick-flash-down {
|
||||
animation: tick-down 480ms ease-out;
|
||||
}
|
||||
/* Legacy aliases */
|
||||
.flash-up {
|
||||
animation: signal-flash-up 1s ease-out;
|
||||
animation: tick-up 480ms ease-out;
|
||||
}
|
||||
.flash-down {
|
||||
animation: signal-flash-down 1s ease-out;
|
||||
animation: tick-down 480ms ease-out;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.tick-flash-up,
|
||||
.tick-flash-down,
|
||||
.flash-up,
|
||||
.flash-down {
|
||||
animation: none;
|
||||
}
|
||||
.animate-ticker {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
70
apps/web/components/design-system/density-provider.tsx
Normal file
70
apps/web/components/design-system/density-provider.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
|
||||
|
||||
export type DensityMode = 'compact' | 'regular' | 'roomy';
|
||||
|
||||
interface DensityContextValue {
|
||||
density: DensityMode;
|
||||
setDensity: (mode: DensityMode) => void;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'goodgo.density';
|
||||
|
||||
const DensityContext = createContext<DensityContextValue>({
|
||||
density: 'regular',
|
||||
setDensity: () => {},
|
||||
});
|
||||
|
||||
export function useDensity() {
|
||||
return useContext(DensityContext);
|
||||
}
|
||||
|
||||
/** Row height in Tailwind spacing tokens per density mode. */
|
||||
export const DENSITY_ROW_HEIGHT: Record<DensityMode, string> = {
|
||||
compact: 'h-row-compact', // 32px
|
||||
regular: 'h-row', // 36px
|
||||
roomy: 'h-row-roomy', // 44px
|
||||
};
|
||||
|
||||
/** Cell padding classes per density mode. */
|
||||
export const DENSITY_CELL_PADDING: Record<DensityMode, string> = {
|
||||
compact: 'px-2 py-1', // 4px 8px
|
||||
regular: 'px-2.5 py-1.5', // 6px 10px
|
||||
roomy: 'px-3 py-2.5', // 10px 12px
|
||||
};
|
||||
|
||||
/** Data font size per density mode. */
|
||||
export const DENSITY_DATA_FONT: Record<DensityMode, string> = {
|
||||
compact: 'text-data-sm',
|
||||
regular: 'text-data-md',
|
||||
roomy: 'text-data-md',
|
||||
};
|
||||
|
||||
export function DensityProvider({
|
||||
defaultDensity = 'regular',
|
||||
children,
|
||||
}: {
|
||||
defaultDensity?: DensityMode;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [density, setDensityState] = useState<DensityMode>(defaultDensity);
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY) as DensityMode | null;
|
||||
if (stored === 'compact' || stored === 'regular' || stored === 'roomy') {
|
||||
setDensityState(stored);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const setDensity = useCallback((mode: DensityMode) => {
|
||||
setDensityState(mode);
|
||||
localStorage.setItem(STORAGE_KEY, mode);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<DensityContext.Provider value={{ density, setDensity }}>
|
||||
{children}
|
||||
</DensityContext.Provider>
|
||||
);
|
||||
}
|
||||
28
apps/web/components/design-system/divider.tsx
Normal file
28
apps/web/components/design-system/divider.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/** Use border-strong variant for headers/section separators. */
|
||||
strong?: boolean;
|
||||
/** Orientation. Default horizontal. */
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
}
|
||||
|
||||
export function Divider({
|
||||
strong = false,
|
||||
orientation = 'horizontal',
|
||||
className,
|
||||
...props
|
||||
}: DividerProps) {
|
||||
return (
|
||||
<div
|
||||
role="separator"
|
||||
aria-orientation={orientation}
|
||||
className={cn(
|
||||
strong ? 'bg-border-strong' : 'bg-border',
|
||||
orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -18,3 +18,34 @@ export type { DashboardLayoutProps } from './dashboard-layout';
|
||||
|
||||
export { TickerStrip } from './ticker-strip';
|
||||
export type { TickerStripProps, TickerItem } from './ticker-strip';
|
||||
|
||||
export { Badge } from './badge';
|
||||
export type { BadgeProps } from './badge';
|
||||
|
||||
export { StatusChip } from './status-chip';
|
||||
export type { StatusChipProps, PropertyStatus } from './status-chip';
|
||||
|
||||
export { DensityToggle } from './density-toggle';
|
||||
export type { DensityToggleProps } from './density-toggle';
|
||||
|
||||
export { EmptyState } from './empty-state';
|
||||
export type { EmptyStateProps } from './empty-state';
|
||||
|
||||
export { Skeleton } from './skeleton';
|
||||
export type { SkeletonProps } from './skeleton';
|
||||
|
||||
export { KpiCard } from './kpi-card';
|
||||
export type { KpiCardProps } from './kpi-card';
|
||||
|
||||
export { Surface, SurfaceElevated } from './surface';
|
||||
export { Divider } from './divider';
|
||||
export type { DividerProps } from './divider';
|
||||
|
||||
export { DensityProvider, useDensity, DENSITY_ROW_HEIGHT, DENSITY_CELL_PADDING, DENSITY_DATA_FONT } from './density-provider';
|
||||
export type { DensityMode } from './density-provider';
|
||||
|
||||
export { Numeric } from './numeric';
|
||||
export type { NumericProps } from './numeric';
|
||||
|
||||
export { Signal } from './signal';
|
||||
export type { SignalDirection, SignalProps } from './signal';
|
||||
|
||||
64
apps/web/components/design-system/numeric.tsx
Normal file
64
apps/web/components/design-system/numeric.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface NumericProps extends React.HTMLAttributes<HTMLSpanElement> {
|
||||
/** The numeric value to display. */
|
||||
value: number;
|
||||
/** Format style. Default 'vnd'. */
|
||||
format?: 'vnd' | 'percent' | 'decimal' | 'compact';
|
||||
/** Number of fraction digits for percent/decimal. Default 1 for percent, 0 for vnd. */
|
||||
fractionDigits?: number;
|
||||
}
|
||||
|
||||
const vndFormatter = new Intl.NumberFormat('vi-VN', {
|
||||
style: 'currency',
|
||||
currency: 'VND',
|
||||
maximumFractionDigits: 0,
|
||||
});
|
||||
|
||||
const compactFormatter = new Intl.NumberFormat('vi-VN', {
|
||||
notation: 'compact',
|
||||
maximumFractionDigits: 1,
|
||||
});
|
||||
|
||||
function formatValue(
|
||||
value: number,
|
||||
format: NumericProps['format'],
|
||||
fractionDigits?: number,
|
||||
): string {
|
||||
switch (format) {
|
||||
case 'percent':
|
||||
return `${value >= 0 ? '+' : ''}${value.toFixed(fractionDigits ?? 1)}%`;
|
||||
case 'decimal':
|
||||
return new Intl.NumberFormat('vi-VN', {
|
||||
minimumFractionDigits: fractionDigits ?? 0,
|
||||
maximumFractionDigits: fractionDigits ?? 2,
|
||||
}).format(value);
|
||||
case 'compact':
|
||||
return compactFormatter.format(value);
|
||||
case 'vnd':
|
||||
default:
|
||||
return vndFormatter.format(value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Numeric display — right-aligned, tabular-nums, formatted for VND/percent.
|
||||
* Automatically sets `data-numeric` for global tabular-nums styling.
|
||||
*/
|
||||
export function Numeric({
|
||||
value,
|
||||
format = 'vnd',
|
||||
fractionDigits,
|
||||
className,
|
||||
...props
|
||||
}: NumericProps) {
|
||||
return (
|
||||
<span
|
||||
data-numeric
|
||||
className={cn('text-right font-mono tabular-nums', className)}
|
||||
{...props}
|
||||
>
|
||||
{formatValue(value, format, fractionDigits)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
46
apps/web/components/design-system/signal.tsx
Normal file
46
apps/web/components/design-system/signal.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { ArrowDown, ArrowUp, Minus } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export type SignalDirection = 'up' | 'down' | 'neutral';
|
||||
|
||||
export interface SignalProps {
|
||||
/** Direction of the signal. */
|
||||
direction: SignalDirection;
|
||||
/** Text label shown inside the pill. */
|
||||
label?: string;
|
||||
/** Additional class names. */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const directionStyles: Record<SignalDirection, string> = {
|
||||
up: 'bg-signal-up/10 text-signal-up',
|
||||
down: 'bg-signal-down/10 text-signal-down',
|
||||
neutral: 'bg-signal-neutral/10 text-signal-neutral',
|
||||
};
|
||||
|
||||
const icons: Record<SignalDirection, React.ElementType> = {
|
||||
up: ArrowUp,
|
||||
down: ArrowDown,
|
||||
neutral: Minus,
|
||||
};
|
||||
|
||||
/**
|
||||
* Signal pill — shows direction (up/down/neutral) with arrow icon and optional label.
|
||||
* Uses `--signal-*` design tokens.
|
||||
*/
|
||||
export function Signal({ direction, label, className }: SignalProps) {
|
||||
const Icon = icons[direction];
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 rounded-pill px-2 py-0.5 text-xs font-medium',
|
||||
directionStyles[direction],
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3 w-3" aria-hidden="true" />
|
||||
{label && <span>{label}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
30
apps/web/components/design-system/surface.tsx
Normal file
30
apps/web/components/design-system/surface.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** Flat surface — uses `--background` (app bg). */
|
||||
export function Surface({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn('rounded-lg bg-background text-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/** Elevated surface — uses `--background-elevated` with shadow-elevation-1. */
|
||||
export function SurfaceElevated({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-lg bg-background-elevated text-foreground shadow-elevation-1',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -3,35 +3,23 @@ import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { ThemeProvider, useTheme } from '../theme-provider';
|
||||
|
||||
// Provide a working localStorage mock for this test file
|
||||
const localStorageMock = (() => {
|
||||
let store: Record<string, string> = {};
|
||||
return {
|
||||
getItem: vi.fn((key: string) => store[key] ?? null),
|
||||
setItem: vi.fn((key: string, value: string) => { store[key] = value; }),
|
||||
removeItem: vi.fn((key: string) => { delete store[key]; }),
|
||||
clear: vi.fn(() => { store = {}; }),
|
||||
get length() { return Object.keys(store).length; },
|
||||
key: vi.fn((index: number) => Object.keys(store)[index] ?? null),
|
||||
};
|
||||
})();
|
||||
// Mock next-themes
|
||||
const mockSetTheme = vi.fn();
|
||||
let mockTheme = 'dark';
|
||||
let mockResolvedTheme = 'dark';
|
||||
|
||||
Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true });
|
||||
|
||||
// Mock window.matchMedia (not implemented in jsdom)
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query: string) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})),
|
||||
});
|
||||
vi.mock('next-themes', () => ({
|
||||
ThemeProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
||||
useTheme: () => ({
|
||||
theme: mockTheme,
|
||||
resolvedTheme: mockResolvedTheme,
|
||||
setTheme: (t: string) => {
|
||||
mockSetTheme(t);
|
||||
mockTheme = t;
|
||||
mockResolvedTheme = t;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Test consumer component
|
||||
function ThemeConsumer() {
|
||||
@@ -46,8 +34,8 @@ function ThemeConsumer() {
|
||||
|
||||
describe('ThemeProvider', () => {
|
||||
beforeEach(() => {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorageMock.clear();
|
||||
mockTheme = 'dark';
|
||||
mockResolvedTheme = 'dark';
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
@@ -60,54 +48,7 @@ describe('ThemeProvider', () => {
|
||||
expect(screen.getByText('Child content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('defaults to light theme', () => {
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('light');
|
||||
});
|
||||
|
||||
it('toggles theme to dark', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('dark');
|
||||
});
|
||||
|
||||
it('toggles theme back to light', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('light');
|
||||
});
|
||||
|
||||
it('persists theme to localStorage', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith('goodgo-theme', 'dark');
|
||||
});
|
||||
|
||||
it('loads stored theme from localStorage', () => {
|
||||
localStorageMock.getItem.mockReturnValueOnce('dark');
|
||||
it('defaults to dark theme', () => {
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
@@ -115,11 +56,37 @@ describe('ThemeProvider', () => {
|
||||
);
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('dark');
|
||||
});
|
||||
|
||||
it('toggles theme to light', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
expect(mockSetTheme).toHaveBeenCalledWith('light');
|
||||
});
|
||||
|
||||
it('toggles theme back to dark', async () => {
|
||||
mockTheme = 'light';
|
||||
mockResolvedTheme = 'light';
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<ThemeConsumer />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText('Toggle'));
|
||||
expect(mockSetTheme).toHaveBeenCalledWith('dark');
|
||||
});
|
||||
});
|
||||
|
||||
describe('useTheme', () => {
|
||||
it('returns default values outside provider', () => {
|
||||
it('returns dark as default outside provider', () => {
|
||||
render(<ThemeConsumer />);
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('light');
|
||||
expect(screen.getByTestId('theme')).toHaveTextContent('dark');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,51 +1,31 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark';
|
||||
|
||||
interface ThemeContextValue {
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextValue>({
|
||||
theme: 'light',
|
||||
toggleTheme: () => {},
|
||||
});
|
||||
|
||||
export function useTheme() {
|
||||
return useContext(ThemeContext);
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'goodgo-theme';
|
||||
import { ThemeProvider as NextThemesProvider, useTheme as useNextTheme } from 'next-themes';
|
||||
|
||||
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const [theme, setTheme] = useState<Theme>('light');
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
|
||||
if (stored === 'dark' || stored === 'light') {
|
||||
setTheme(stored);
|
||||
document.documentElement.classList.toggle('dark', stored === 'dark');
|
||||
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
setTheme('dark');
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const toggleTheme = useCallback(() => {
|
||||
setTheme((prev) => {
|
||||
const next = prev === 'light' ? 'dark' : 'light';
|
||||
localStorage.setItem(STORAGE_KEY, next);
|
||||
document.documentElement.classList.toggle('dark', next === 'dark');
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
<NextThemesProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
storageKey="goodgo-theme"
|
||||
enableSystem={false}
|
||||
>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
</NextThemesProvider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Backward-compatible useTheme hook.
|
||||
* Returns `theme` ('light' | 'dark') and `toggleTheme`.
|
||||
*/
|
||||
export function useTheme() {
|
||||
const { theme, setTheme, resolvedTheme } = useNextTheme();
|
||||
const current = (resolvedTheme ?? theme ?? 'dark') as 'light' | 'dark';
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(current === 'dark' ? 'light' : 'dark');
|
||||
};
|
||||
|
||||
return { theme: current, toggleTheme };
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
"mapbox-gl": "^3.21.0",
|
||||
"next": "^15.5.14",
|
||||
"next-intl": "^4.9.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^18.3.0",
|
||||
"react-dom": "^18.3.0",
|
||||
"react-hook-form": "^7.72.1",
|
||||
|
||||
@@ -15,12 +15,21 @@ const config: Config = {
|
||||
'data-sm': ['0.75rem', { lineHeight: '1.2' }],
|
||||
'data-md': ['0.875rem', { lineHeight: '1.3' }],
|
||||
'data-lg': ['1.25rem', { lineHeight: '1.2' }],
|
||||
'heading-xs': ['0.75rem', { lineHeight: '1rem', letterSpacing: '0.08em' }],
|
||||
'heading-sm': ['0.875rem', { lineHeight: '1.25rem' }],
|
||||
'heading-md': ['1.125rem', { lineHeight: '1.5rem' }],
|
||||
'heading-lg': ['1.5rem', { lineHeight: '1.875rem' }],
|
||||
'heading-xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
||||
},
|
||||
spacing: {
|
||||
cell: '0.5rem',
|
||||
row: '2.25rem',
|
||||
'row-compact': '2rem',
|
||||
'row-roomy': '2.75rem',
|
||||
'ticker-bar': '2rem',
|
||||
'header-compact': '3rem',
|
||||
sidebar: '15rem',
|
||||
'sidebar-collapsed': '3.5rem',
|
||||
},
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
@@ -74,15 +83,44 @@ const config: Config = {
|
||||
},
|
||||
success: 'hsl(var(--success))',
|
||||
warning: 'hsl(var(--warning))',
|
||||
chart: {
|
||||
1: 'hsl(var(--chart-1))',
|
||||
2: 'hsl(var(--chart-2))',
|
||||
3: 'hsl(var(--chart-3))',
|
||||
4: 'hsl(var(--chart-4))',
|
||||
5: 'hsl(var(--chart-5))',
|
||||
6: 'hsl(var(--chart-6))',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
pill: '9999px',
|
||||
},
|
||||
boxShadow: {
|
||||
'elevation-1': '0 1px 2px rgba(0, 0, 0, 0.3)',
|
||||
'elevation-2': '0 4px 12px rgba(0, 0, 0, 0.4)',
|
||||
'elevation-0': 'none',
|
||||
'elevation-1': '0 1px 2px rgba(0,0,0,.30), 0 0 0 1px hsl(var(--border))',
|
||||
'elevation-2': '0 4px 12px rgba(0,0,0,.40)',
|
||||
'elevation-3': '0 12px 32px rgba(0,0,0,.50)',
|
||||
'glow-up': '0 0 0 1px hsl(var(--signal-up) / .4), 0 0 12px hsl(var(--signal-up) / .25)',
|
||||
'glow-down': '0 0 0 1px hsl(var(--signal-down) / .4), 0 0 12px hsl(var(--signal-down) / .25)',
|
||||
},
|
||||
transitionTimingFunction: {
|
||||
standard: 'cubic-bezier(.2,0,0,1)',
|
||||
emphasized: 'cubic-bezier(.3,0,0,1)',
|
||||
},
|
||||
transitionDuration: {
|
||||
'80': '80ms',
|
||||
'240': '240ms',
|
||||
},
|
||||
zIndex: {
|
||||
'sticky-header': '30',
|
||||
'app-header': '40',
|
||||
ticker: '45',
|
||||
dropdown: '50',
|
||||
modal: '60',
|
||||
toast: '70',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
14
pnpm-lock.yaml
generated
14
pnpm-lock.yaml
generated
@@ -334,6 +334,9 @@ importers:
|
||||
next-intl:
|
||||
specifier: ^4.9.0
|
||||
version: 4.9.0(next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(typescript@6.0.2)
|
||||
next-themes:
|
||||
specifier: ^0.4.6
|
||||
version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
react:
|
||||
specifier: ^18.3.0
|
||||
version: 18.3.1
|
||||
@@ -5639,6 +5642,12 @@ packages:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
next-themes@0.4.6:
|
||||
resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
|
||||
peerDependencies:
|
||||
react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
|
||||
|
||||
next@15.5.15:
|
||||
resolution: {integrity: sha512-VSqCrJwtLVGwAVE0Sb/yikrQfkwkZW9p+lL/J4+xe+G3ZA+QnWPqgcfH1tDUEuk9y+pthzzVFp4L/U8JerMfMQ==}
|
||||
engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
|
||||
@@ -13181,6 +13190,11 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- '@swc/helpers'
|
||||
|
||||
next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
next@15.5.15(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
'@next/env': 15.5.15
|
||||
|
||||
Reference in New Issue
Block a user