diff --git a/.vscode/settings.json b/.vscode/settings.json index f692183..964af63 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,5 +4,5 @@ "mode": "auto" } ], - "cSpell.words": ["Millis", "Pandang", "Ujung", "WITA"] + "cSpell.words": ["mantine", "Menlo", "Millis", "Pandang", "Segoe", "Ujung", "WITA"] } diff --git a/apps/web/src/apps/index.tsx b/apps/web/src/apps/index.tsx index 2d5110c..7ca77b6 100644 --- a/apps/web/src/apps/index.tsx +++ b/apps/web/src/apps/index.tsx @@ -1,25 +1,43 @@ -import { lazy, Suspense } from 'react'; +import { lazy, Suspense, useState } from 'react'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; -import { NotFound, Forbidden, Maintenance, ComingSoon } from '@repo/ui'; +import { ThemeProvider, ColorSchemeType, DensityType } from '@repo/ui/provider'; +import { NotFound, Forbidden, Maintenance, ComingSoon } from '@repo/ui/components'; const AuthModule = lazy(() => import('./auth')); const AppModule = lazy(() => import('./modules')); +const ShowcaseView = lazy(() => import('./showcase/showcase-view')); export default function App() { + const [colorScheme, setColorScheme] = useState('light'); + const [density, setDensity] = useState('compact'); + return ( - - Loading...}> - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - + + + Loading...}> + + } /> + } /> + + } + /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + ); } diff --git a/apps/web/src/apps/modules/example/example.page.tsx b/apps/web/src/apps/modules/example/example.page.tsx index a72890b..e6c1363 100644 --- a/apps/web/src/apps/modules/example/example.page.tsx +++ b/apps/web/src/apps/modules/example/example.page.tsx @@ -1,3 +1,3 @@ export default function ExamplePage() { - return
example
; + return
example
; } diff --git a/apps/web/src/apps/showcase/showcase-view.tsx b/apps/web/src/apps/showcase/showcase-view.tsx new file mode 100644 index 0000000..a267b45 --- /dev/null +++ b/apps/web/src/apps/showcase/showcase-view.tsx @@ -0,0 +1,210 @@ +import { ColorSchemeType, DensityType } from '@repo/ui/provider'; +import { + Button, + Card, + Container, + Select, + Group, + Stack, + Text, + Title, + TextInput, + Checkbox, + PasswordInput, + NumberInput, + Textarea, + Switch, + Radio, + Table, + Badge, + Divider, +} from '@repo/ui/components'; + +interface ShowcaseViewProps { + colorScheme: ColorSchemeType; + setColorScheme: (val: ColorSchemeType) => void; + density: DensityType; + setDensity: (val: DensityType) => void; +} + +export default function ShowcaseView({ colorScheme, setColorScheme, density, setDensity }: ShowcaseViewProps) { + // Mock data for the table + const tableData = [ + { id: 'ORD-001', customer: 'John Doe', status: 'Shipped', total: '$120.00' }, + { id: 'ORD-002', customer: 'Jane Smith', status: 'Pending', total: '$85.50' }, + { id: 'ORD-003', customer: 'Acme Corp', status: 'Delivered', total: '$1,250.00' }, + ]; + + return ( + + + Super App UI Showcase + + {/* ========================================= + CONTROL PANEL + ========================================= */} + + + Theme Controls + + + setDensity((val as DensityType) || 'standard')} + data={[ + { value: 'compact', label: 'Compact (ERP Mode)' }, + { value: 'standard', label: 'Standard (UI Mode)' }, + ]} + /> + + + + {/* ========================================= + TAILWIND V4 BRIDGE TEST + ========================================= */} + + + Tailwind v4 Synchronization + + {/* This div purely uses Tailwind classes to prove it inherits Mantine's variables */} +
+ Tailwind works! The padding (p-md), border-radius (rounded-md), text size + (text-base), and background color of this box are entirely controlled by the ThemeProvider's current state. +
+ + + {/* ========================================= + TYPOGRAPHY & BUTTONS + ========================================= */} + + +
+ + Typography & Badges + + + This is dimmed small text indicating a subtitle. + + + This is standard text describing the components below. Watch how the font changes when you switch + density. + + + Brand Badge + + Success Status + + + Error State + + +
+ + + +
+ + Buttons + + + + + + + +
+ + + + {/* ========================================= + COMPLEX FORMS (ERP STYLE) + ========================================= */} + + + Form Elements + + + + + + + + + + + + +