Jakob Wennberg
ec27228a8e
Em dashes (—) and en dashes (–) had spread across comments, docs, tests, and a few UI strings, reading as AI-generated boilerplate rather than house style. Replaced each with punctuation matching its context: colon for explanatory clauses, comma for asides, plain hyphen for numeric/legal ranges (e.g. "21-23§"), "to"/"till" for date ranges, parentheses for paired-dash asides. messages/en.json and messages/sv.json were fixed by hand together to keep sv/en in sync. Left untouched where the dash is the functional subject rather than decorative punctuation: date-range-parser.ts's separator regex, charset-repair.ts's CP1252 byte-mapping table (and its test), the SIE encoding mojibake docs, generic-csv.ts's minus-sign normalizer, the agent system-prompt files that already instruct against em dashes, and a golden iXBRL test fixture compared byte-for-byte. Also fixes two bugs surfaced along the way: an off-by-one in ApiKeysPanel's scope-label split (a leftover from an earlier partial pass), and a charset-repair test that had lost the literal en-dash it exists to verify. Regenerated the agent atom seed migration (skills:generate) since 27 SKILL.md files changed. Added a CLAUDE.md rule against em/en dashes, with an explicit carve-out for the functional-dash cases above. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import { AlertCircle } from 'lucide-react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface DataStateProps {
|
|
loading: boolean
|
|
error: string | null
|
|
/** When true (and not loading/error), render `empty` instead of `children`. */
|
|
isEmpty?: boolean
|
|
/** Retry handler: typically `useFetch().refetch`. Shows a retry button. */
|
|
onRetry?: () => void
|
|
/** Loading placeholder. Defaults to three skeleton rows. */
|
|
skeleton?: React.ReactNode
|
|
/** Shown when `isEmpty`. Pass an `EmptyState` / preset (e.g. `<EmptyInvoices />`). */
|
|
empty?: React.ReactNode
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Renders the loading / error / empty / ready states for a data-driven section,
|
|
* so callers stop hand-rolling that branch every time.
|
|
*
|
|
* Pairs with `useFetch`:
|
|
*
|
|
* @example
|
|
* const { data, loading, error, refetch } = useFetch<Account[]>(url, { select: b => b.data })
|
|
* return (
|
|
* <DataState
|
|
* loading={loading}
|
|
* error={error}
|
|
* onRetry={refetch}
|
|
* isEmpty={!data?.length}
|
|
* empty={<EmptyState title={t('none_title')} description={t('none_desc')} />}
|
|
* >
|
|
* <AccountsTable accounts={data!} />
|
|
* </DataState>
|
|
* )
|
|
*
|
|
* Loading uses the `Skeleton` primitive; empty expects an `EmptyState`; the
|
|
* error branch uses the only chrome-permitted semantic colour (`destructive`).
|
|
*/
|
|
export function DataState({
|
|
loading,
|
|
error,
|
|
isEmpty = false,
|
|
onRetry,
|
|
skeleton,
|
|
empty,
|
|
children,
|
|
className,
|
|
}: DataStateProps) {
|
|
const t = useTranslations('common')
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className={className}>
|
|
{skeleton ?? (
|
|
<div className="space-y-3" aria-busy="true" aria-live="polite">
|
|
<Skeleton className="h-8 w-full" />
|
|
<Skeleton className="h-8 w-full" />
|
|
<Skeleton className="h-8 w-3/4" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div
|
|
role="alert"
|
|
className={cn('flex flex-col items-center justify-center py-12 px-4 text-center', className)}
|
|
>
|
|
<AlertCircle className="h-8 w-8 text-destructive mb-3" aria-hidden="true" />
|
|
<p className="text-sm font-medium mb-1">{t('load_error')}</p>
|
|
<p className="text-sm text-muted-foreground max-w-sm mb-6 text-balance">{error}</p>
|
|
{onRetry && (
|
|
<Button variant="outline" onClick={onRetry}>
|
|
{t('retry')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (isEmpty) {
|
|
return <div className={className}>{empty}</div>
|
|
}
|
|
|
|
return <>{children}</>
|
|
}
|