shancheas
27dfc167d2
- Introduced a new `LocationMap` component for handling latitude and longitude inputs in forms and detail views. - Updated form and detail components to utilize the `LocationMap`, enhancing user experience by allowing map-based location selection. - Added internationalization support for map-related labels in English and Indonesian. - Developed unit tests for the `LocationMap` to ensure functionality and reliability. This commit enhances the application by providing a user-friendly interface for managing geographical locations, improving data accuracy and user interaction.
66 lines
2.4 KiB
Plaintext
66 lines
2.4 KiB
Plaintext
---
|
|
description: Standard design and layout for apps/web module pages
|
|
globs: apps/web/src/apps/**/*.{ts,tsx}
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Web Design & Layout Standards
|
|
|
|
Working directory: `apps/web/`.
|
|
Primitives: `@repo/ui/components`. Foundations: `@repo/ui/foundations`. Icons: `lucide-react`.
|
|
Reference usage: `apps/showcase` (ui-components, forms, action-tools, shell-demo).
|
|
|
|
## App chrome (do not rebuild)
|
|
|
|
- Authenticated routes render inside `ModuleLayout` → `CoreAppShell`.
|
|
- Do not nest another `CoreAppShell` inside a feature module.
|
|
- Sidebar / header / history / bookmarks live only under `apps/main/layouts/`.
|
|
|
|
## Page composition
|
|
|
|
| Page type | Standard wrapper |
|
|
|---|---|
|
|
| List / index (FULL_PAGE) | `EnterpriseIndexPageProvider` + `EnterpriseDataTable` |
|
|
| Detail (FULL_PAGE) | `EnterpriseDetailPageProvider` |
|
|
| Form | `EnterpriseFormPageProvider` |
|
|
| Simple / system page | Match existing `modules/system/*` patterns |
|
|
|
|
Detail **content** layout (section stack, key-value grids, status blocks, tabs for many categories): follow `.agents/skills/detail-layout/SKILL.md` — layout/position only.
|
|
Form **content** layout: follow `.agents/skills/form-layout/SKILL.md`.
|
|
Entities with `latitude` / `longitude`: follow `web-location-maps.mdc` — form must pick coords on `LocationMap`; detail must render `LocationMap`.
|
|
|
|
Every page header (`pageHeaderProps`) should include i18n `title`, `description`, `breadcrumbs`, and Lucide `icon` when useful.
|
|
|
|
```tsx
|
|
// ✅ GOOD
|
|
<EnterpriseIndexPageProvider
|
|
pageHeaderProps={{
|
|
title: t('title'),
|
|
description: t('description'),
|
|
icon: LayoutDashboard,
|
|
breadcrumbs: [
|
|
{ label: t('nav:example-module'), type: 'text' },
|
|
{ label: t('nav:example-full-page'), type: 'text' },
|
|
],
|
|
}}
|
|
>
|
|
<EnterpriseDataTable columnDefs={columnDefs} filterConfig={filterConfig} />
|
|
</EnterpriseIndexPageProvider>
|
|
```
|
|
|
|
```tsx
|
|
// ❌ BAD — custom chrome that duplicates foundations
|
|
<Box p="md">
|
|
<Title order={2}>{t('title')}</Title>
|
|
</Box>
|
|
```
|
|
|
|
## Visual language
|
|
|
|
- Theme via Mantine tokens / CSS vars — no hard-coded theme hex.
|
|
- Surfaces: `Paper` / `Card` with `withBorder`, `radius="md"`, restrained `shadow="sm"`.
|
|
- Status: `StatusBadge` / semantic `Badge` — see showcase `ui-components`.
|
|
- Actions: `PageActions` / row actions from action-tools patterns.
|
|
- Forms: `Field*` components + Zod validators — see showcase `forms` and `example/full-page` form.
|
|
- Do not invent a parallel design system.
|