igm
b1d07626f3
Create new @reviq/common package with environment-agnostic utilities: - Date formatting: formatDate, formatDateTime, formatLongDate, formatRelativeDate, formatRelativeTime - User utilities: getUserInitials, formatRole Consolidate date formatting from publisher-dashboard into shared package. All utilities include comprehensive test coverage with bun:test. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Publisher Dashboard
A Svelte 5 SPA built with SvelteKit, Tailwind CSS v4, and shadcn-svelte.
Development
# From the monorepo root
bun run dev
# Or from this directory
bun run dev
Adding shadcn-svelte Components
This project uses shadcn-svelte for UI components.
Adding a new component
From the apps/publisher-dashboard directory, run:
bunx shadcn-svelte@latest add <component-name>
For example, to add the Button component:
bunx shadcn-svelte@latest add button
To add multiple components at once:
bunx shadcn-svelte@latest add button card input
Available components
See the full list at: https://shadcn-svelte.com/docs/components
Common components:
button- Buttons with variantscard- Card containersinput- Text inputslabel- Form labelsselect- Select dropdownsdialog- Modal dialogsdropdown-menu- Dropdown menustable- Data tablestabs- Tab navigationtoast/sonner- Toast notifications
Using components
After adding a component, import it from $lib/components/ui:
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="outline">Click me</Button>
Utility function
The cn() utility for merging Tailwind classes is available at $lib/utils:
<script lang="ts">
import { cn } from "$lib/utils";
</script>
<div class={cn("p-4", someCondition && "bg-primary")}>
Content
</div>
Project Structure
src/
├── app.css # Global styles + Tailwind + shadcn theme
├── app.html # HTML template
├── lib/
│ ├── components/
│ │ └── ui/ # shadcn-svelte components go here
│ └── utils/
│ └── cn.ts # Tailwind class merge utility
└── routes/ # SvelteKit file-based routing
├── +layout.svelte
├── +layout.ts
└── +page.svelte