create-mithaq 0.0.0-stage → 0.1.1

package/template/apps/asas-tanstack/src/auth-frame.tsx

@@ -0,0 +1,150 @@
+import { useState, type ComponentProps, type ReactNode } from 'react'
+import { redirect, useRouteContext } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { Eye, EyeOff } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group'
+import { authArm } from './api.ts'
+import { FieldShell, describedBy } from './components/mithaq/field-shell.tsx'
+import { refusalKey } from './copy.ts'
+import { LocaleSwitch } from './locale-switch.tsx'
+import { wanted } from './redirect.ts'
+import { useCopy } from './routes/__root.tsx'
+
+/** The one search key the auth pages read, off the raw search. */
+export const redirectSearch = (search: Record<string, unknown>): { redirect?: string } =>
+  typeof search.redirect === 'string' ? { redirect: search.redirect } : {}
+
+/** Whether a read of the actor names someone. A read that throws, or an actor with no email, names no one. */
+export const signedInAs = async (actor: Promise<unknown>) => Boolean(((await actor.catch(() => null)) as { email?: unknown } | null)?.email)
+
+/**
+ * Whether this request carries a session, where signing in lands for it, and the provider's password bounds.
+ * No auth page sends a referrer, since the reset page's address carries its token.
+ */
+export const authGate = createServerFn({ method: 'GET' }).handler(async () => {
+  // Imported inside the server half so no auth page ships the screen host to the browser.
+  const [{ getRequest, setResponseHeader }, { asas }, { loadEnterable }] = await Promise.all([import('@tanstack/react-start/server'), import('asas'), import('./screens.tsx')])
+  setResponseHeader('referrer-policy', 'no-referrer')
+  type Provider = { name: string; server: { $context: Promise<{ password: { config: { minPasswordLength: number; maxPasswordLength: number } } }> } }
+  const provider = (asas.auth.strategies as unknown as Provider[]).find((one) => one.name === 'user')!
+  const [signedIn, { password }] = await Promise.all([signedInAs(asas.auth.actor(getRequest().headers)), provider.server.$context])
+  const first = signedIn ? (await loadEnterable())?.screens[0] : undefined
+  const home: { path: string; name?: string } = first ?? { path: '/unauthorized' }
+  return { signedIn, home, password: { min: password.config.minPasswordLength, max: password.config.maxPasswordLength } }
+})
+
+/**
+ * Sign-in's and sign-up's `beforeLoad`. A signed-in person is sent where a
+ * successful sign-in sends them; everyone else gets the password bounds in the
+ * route context.
+ */
+export const gate = async ({ search }: { search: { redirect?: string } }) => {
+  const { signedIn, home, password } = await authGate()
+  if (signedIn) throw redirect({ href: wanted({ asked: search.redirect, home: home.path }) })
+  return { password }
+}
+
+/** What a link to `home` says: the screen it opens, or, where it opens none, the action of seeing the account's status. */
+export const useHomeLabel = () => {
+  const { t } = useCopy()
+  return (home: { name?: string }, sentence: 'auth.backTo' | 'marketing.openScreen') =>
+    home.name === undefined
+      ? t('auth.accountStatus', 'See your account status')
+      : t(sentence, sentence === 'auth.backTo' ? 'Back to {screen}' : 'Open {screen}')!.replace('{screen}', () => t(`screens.${home.name}`, home.name)!)
+}
+
+/** What the forgot and reset pages draw for someone already signed in: the way on, and a sign-out. */
+export function AlreadySignedIn({ redirect: asked, home }: { redirect?: string; home: { path: string; name?: string } }) {
+  const { t } = useCopy()
+  const label = useHomeLabel()
+  const to = wanted({ asked, home: home.path })
+  return (
+    <AuthFrame title={t('auth.alreadySignedIn', 'You are already signed in')}>
+      <div className="grid gap-4">
+        {/* An anchor: the path is the visitor's own, not a route the router knows. */}
+        <a className="text-primary text-center text-sm underline underline-offset-4" href={to}>
+          {to === home.path ? label(home, 'auth.backTo') : t('auth.continue', 'Continue')}
+        </a>
+        <Button type="button" variant="outline" onClick={() => void authArm('sign-out').then(() => window.location.reload())}>
+          {t('admin.signOut', 'Sign out')}
+        </Button>
+      </div>
+    </AuthFrame>
+  )
+}
+
+/** The sentence for a refusal of the provider: this app's own words for the status or code, then `fallback`. Never the provider's `message`, which is English in any locale. */
+export const useRefusal = () => {
+  const { t } = useCopy()
+  return (answered: { status: number; body: Record<string, unknown> | null }, fallback: string | undefined) => {
+    const key = refusalKey(answered.status, answered.body?.code)
+    return (key && t(key)) || fallback || ''
+  }
+}
+
+/** Whether the browser's own `type="email"` refuses this text. */
+export const notAnEmail = (value: string) => Object.assign(document.createElement('input'), { type: 'email', value }).validity.typeMismatch
+
+/** The frame every auth page is drawn in: the app's name linking home, the language switch, and the page's card. */
+export function AuthFrame({ title, description, children }: { title: string | undefined; description?: ReactNode; children: ReactNode }) {
+  const { t, locale } = useCopy()
+  const { app } = useRouteContext({ from: '__root__' })
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-2 px-4 sm:px-6">
+        {/* An anchor: `/` is not a router route in an app whose start entry answers its home. */}
+        <a className="text-lg font-semibold" href="/">
+          {t(app, 'Asas')}
+        </a>
+        <LocaleSwitch locale={locale} />
+      </header>
+      <main className="flex flex-1 items-center justify-center px-4 pb-16">
+        <Card className="w-full max-w-sm">
+          <CardHeader>
+            <CardTitle><h1>{title}</h1></CardTitle>
+            {description ? <CardDescription>{description}</CardDescription> : null}
+          </CardHeader>
+          {/* Descriptions follow the text direction; the shared primitive aligns them left. */}
+          <CardContent className="[&_[data-slot=field-description]]:text-start">{children}</CardContent>
+        </Card>
+      </main>
+    </div>
+  )
+}
+
+function PasswordInput(props: ComponentProps<'input'>) {
+  const { t } = useCopy()
+  const [shown, setShown] = useState(false)
+  return (
+    // Focus moving to the box's own toggle has not left the box.
+    <InputGroup onBlur={(event) => event.currentTarget.contains(event.relatedTarget) && event.stopPropagation()}>
+      <InputGroupInput {...props} dir="ltr" type={shown ? 'text' : 'password'} />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton aria-label={t('auth.showPassword', 'Show password')} aria-pressed={shown} size="icon-xs" onClick={() => setShown((was) => !was)}>
+          {shown ? <EyeOff /> : <Eye />}
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}
+
+/** One labelled box, which says what is wrong with it once it has been left. An email or password reads left to right in any locale. */
+export function AuthBox({
+  id,
+  label,
+  error,
+  description,
+  onLeave,
+  ...props
+}: { id: string; label: string | undefined; error?: string; description?: string; onLeave: () => void } & ComponentProps<'input'>) {
+  const control = { 'aria-describedby': describedBy({ id, description, error }), 'aria-invalid': error ? true : undefined, id, name: id, required: true, ...props }
+  return (
+    <FieldShell id={id} label={label ?? id} description={description} error={error} onBlur={onLeave}>
+      {props.type === 'password' ? <PasswordInput {...control} /> : <Input dir={props.type === 'email' ? 'ltr' : 'auto'} {...control} />}
+    </FieldShell>
+  )
+}
+// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 ab822afe361dfc5f82c504570fd5d0ea13ec4572e60adb679a3f9532ccf67803

package/template/apps/asas-tanstack/src/components/mithaq/cells.tsx

@@ -0,0 +1,112 @@
+import { useSyncExternalStore, type ReactNode } from 'react'
+import type { ClientField, ClientKayan } from 'mithaq/admin'
+import { formatDate, listed, noValue, type Translate } from './controls.tsx'
+import { RelationshipCell, type RelationshipTitles } from './relationship-cell.tsx'
+import { UploadCell } from './upload.tsx'
+
+// The server does not know the viewer's zone, so it and the hydrating render draw the day in UTC
+// and the mounted client swaps in the moment; drawing both in a zone would be a hydration mismatch.
+function Moment({ value, locale }: { value: unknown; locale: string }): ReactNode {
+  const mounted = useSyncExternalStore(() => () => {}, () => true, () => false)
+  const text = formatDate({ value, locale, day: !mounted })
+  return text === undefined ? plain(value) : <time dateTime={new Date(value as string).toISOString()} suppressHydrationWarning>{text}</time>
+}
+
+/** What every cell is handed. The locale is the browser's; `t` is here because a cell that renders a word rather than the value is rendering the project's copy. */
+export type CellProps = {
+  kayan: ClientKayan
+  field: ClientField
+  value: unknown
+  t: Translate
+  locale: string
+  /**
+   * The titles of the rows the relationship columns point at, read once per page. Absent on a
+   * server render, where every relationship cell reads as loading; no cell shows the id it holds.
+   */
+  titles?: RelationshipTitles
+}
+
+const plain = (value: unknown) => (value === null || value === undefined ? '' : String(value))
+
+const worded = (field: ClientField, value: unknown, locale: string) => {
+  const held = field.rules.localized === true && value && typeof value === 'object' ? (value as Record<string, unknown>)[locale] : value
+  return field.options?.find((one) => one.value === held)?.label[locale] ?? plain(held)
+}
+
+/** The text a reader sees in a rich text value, a block to a line. Lives here, not beside the editor, so lists read it without loading Lexical. */
+export const richTextPlainText = (node: unknown, depth = 64): string => {
+  // A stored value nested past the bound ends in an ellipsis rather than overflowing the stack.
+  if (depth <= 0) return '…'
+  if (!node || typeof node !== 'object') return ''
+  const held = node as { root?: unknown; type?: unknown; text?: unknown; children?: unknown }
+  if (held.root) return richTextPlainText(held.root, depth - 1)
+  if (held.type === 'linebreak') return '\n'
+  const children: unknown[] = Array.isArray(held.children) ? held.children : []
+  const inner = children.map((child) => richTextPlainText(child, depth - 1)).join(children.some((child) => typeof (child as { text?: unknown } | null)?.text === 'string') ? '' : '\n')
+  return (typeof held.text === 'string' ? held.text : '') + inner
+}
+
+/** The blocks of a rich text value: its root's children, or the value itself where it holds none. */
+export const blocksOf = (value: unknown): unknown[] => {
+  const root = (value as { root?: unknown } | null)?.root ?? value
+  return Array.isArray((root as { children?: unknown } | null)?.children) ? (root as { children: unknown[] }).children : [root]
+}
+
+const lineLength = 120
+
+/** The words of a rich text value's first non-empty block on one line, cut at 120 characters with an ellipsis. */
+export const richTextLine = (value: unknown): string => {
+  const first = blocksOf(value).map((block) => richTextPlainText(block).replace(/\s+/g, ' ').trim()).find(Boolean) ?? ''
+  const characters = Array.from(first)
+  return characters.length > lineLength ? `${characters.slice(0, lineLength).join('').trimEnd()}…` : characters.join('')
+}
+
+/** One cell per shipped kind, keyed by the kind's own name. */
+export const cells: Record<string, (props: CellProps) => ReactNode> = {
+  text: ({ field, value, locale }) => worded(field, value, locale),
+  email: ({ value }) =>
+    value ? (
+      <a href={`mailto:${String(value)}`} className="underline underline-offset-2">
+        {String(value)}
+      </a>
+    ) : (
+      ''
+    ),
+  number: ({ value, locale }) => (typeof value === 'number' ? value.toLocaleString(locale) : plain(value)),
+  integer: (props) => cells.number!(props),
+  // Exact text: a JS double would lose digits.
+  decimal: ({ field, value, locale }) => worded(field, value, locale),
+  // The glyph is aria-hidden, so the sr-only word is what a screen reader gets. The words are keyed per field because `true` means different things on `archived` and `published`.
+  checkbox: ({ kayan, field, value, t }) => (
+    <>
+      <span aria-hidden className="tabular-nums">
+        {value === true ? '✓' : value === false ? '✗' : '—'}
+      </span>
+      <span className="sr-only">
+        {value === true
+          ? (t(`${kayan.name}.${field.name}.true`) ?? t('admin.yes', 'Yes') ?? 'Yes')
+          : (t(`${kayan.name}.${field.name}.false`) ?? t('admin.no', 'No') ?? 'No')}
+      </span>
+    </>
+  ),
+  datetime: ({ value, locale }) => <Moment value={value} locale={locale} />,
+  date: ({ value, locale }) => formatDate({ value, locale, day: true }) ?? plain(value),
+  textArray: ({ field, value, locale }) => (Array.isArray(value) ? listed(value.map((one) => worded(field, one, locale)), locale) : plain(value)),
+  uuid: ({ value }) => <span className="font-mono text-xs">{plain(value)}</span>,
+  relationship: RelationshipCell,
+  upload: UploadCell,
+  // Nothing where the read carried no join: an absent key means the read did not ask, an empty array means no children, and a count of zero would say both.
+  join: ({ value, locale }) => (Array.isArray(value) ? value.length.toLocaleString(locale) : ''),
+  // min-w-48 keeps a phone-width table from squeezing the words to one per line.
+  richText: ({ value }) => {
+    const line = richTextLine(value)
+    return line ? <span dir="auto" className="line-clamp-2 min-w-48 whitespace-normal">{line}</span> : noValue
+  },
+}
+// No prototype, so a kind named `constructor` never resolves to an inherited property.
+Object.setPrototypeOf(cells, null)
+
+/** The cell for a field, first match wins: the list column's named cell, the field's own cell, the kind's cell, then plain text. */
+export const cellFor = (field: ClientField, column?: string): ((props: CellProps) => ReactNode) =>
+  cells[column ?? ''] ?? cells[field.cell] ?? cells[field.kind] ?? cells.text!
+// mithaq-admin b06d8d335d306c07556f8f2b81fba20ba7ded198 95340e7fd65595abe95ca51f11ac4b6f98a69775637a46591d6aa053f6aa5f27