57 lines
2.1 KiB
Markdown
57 lines
2.1 KiB
Markdown
# Shared Layer
|
|
|
|
Global reusable building blocks used across the entire application — framework-level, never feature-specific.
|
|
|
|
```plaintext
|
|
shared/
|
|
| --- ui/ # primitive UI components (Button, Modal, Card)
|
|
| --- widgets/ # reusable composed UI blocks (DataGrid, screens)
|
|
| --- forms/ # reusable form composition (composed inputs)
|
|
| --- editors/ # reusable editor wrappers (tinymce, image_input)
|
|
| --- hooks/ # generic reusable hooks (useDebounce, useToggle, useLocalStorage)
|
|
| --- utils/ # pure helper functions (formatDate, generateId, sleep)
|
|
| --- lib/ # pure helpers and utility services (time/, phone_number/, resolveFileURL)
|
|
| --- assets/ # images, icons, fonts
|
|
| --- styles/ # global CSS, variables, Tailwind overrides
|
|
| --- constants/ # global constants
|
|
```
|
|
|
|
## UI Components
|
|
|
|
Simple, composable, customizable building blocks — Lego pieces that combine into larger UI:
|
|
|
|
- **Simple** — Button, Input, Card, Modal, Dropdown.
|
|
- **Composable** — complex UI is built by composition, not by modifying base components:
|
|
|
|
```tsx
|
|
<Card>
|
|
<CardHeader />
|
|
<CardContent />
|
|
<CardFooter />
|
|
</Card>
|
|
```
|
|
|
|
- **Customizable** — through `className`, variants, props, and composition:
|
|
|
|
```tsx
|
|
<Button variant="outline" size="lg">
|
|
Save
|
|
</Button>
|
|
```
|
|
|
|
- **No business logic** — presentation only (local state allowed): no API calls, React Query, form submission, or domain logic.
|
|
|
|
### Styling
|
|
|
|
Utility-first, design tokens, variants instead of style duplication, minimal centralized custom CSS.
|
|
|
|
Stack: **TailwindCSS** (primary styling), **class-variance-authority** (variants), **CSS variables** (design tokens), **Radix primitives** (accessible building blocks).
|
|
|
|
## Other Folders
|
|
|
|
- `hooks/` — generic hooks with no entity or business-logic dependencies.
|
|
- `utils/` — stateless pure helper functions.
|
|
- `lib/` — pure helpers and utility services (date, name, path, phone formatting).
|
|
- `assets/` — static resources (icons, fonts).
|
|
- `styles/` — CSS variables, Tailwind extensions, global resets.
|