create-mithaq 0.1.1 → 0.2.1

package/template/templates/mithaq/src/ui/rich-text-nodes.tsx

@@ -0,0 +1,33 @@
+// What every screen's rich text editor and viewer draw with: this project's
+// own node list, the one its server parses every write with, each class swapped
+// for its React subclass where one extends it, and the `/` menu's picks. A
+// provider each screen names, so no control, read view or panel can take
+// another list.
+import type { ReactNode } from 'react'
+import type { ProviderProps } from 'mithaq/admin'
+import { RichTextContext, defaultPicks, defaultViews, viewsOf } from 'mithaq-admin/rich-text-picks.tsx'
+// add-on: uploads
+import { UploadPlugin, UploadView, imagePick } from 'mithaq-admin/upload-node.tsx'
+// end add-on: uploads
+import { richTextNodes } from '../mithaq/rich-text-nodes.ts'
+
+const value = {
+  nodes: viewsOf(richTextNodes, [
+    ...defaultViews,
+    // add-on: uploads
+    UploadView,
+    // end add-on: uploads
+  ]),
+  picks: [
+    ...defaultPicks,
+    // add-on: uploads
+    // The upload node's `/` entry "Image" opens its dialog in every editor.
+    imagePick,
+    // end add-on: uploads
+  ],
+  // add-on: uploads
+  Plugin: UploadPlugin,
+  // end add-on: uploads
+}
+
+export const RichTextNodes = ({ children }: ProviderProps<ReactNode>) => <RichTextContext value={value}>{children}</RichTextContext>

package/template/templates/{asas → mithaq}/src/ui/screen-nav.tsx

@@ -4,7 +4,7 @@
 import { use } from 'react'
 import type { NavEntry, ScreenClient, Translate } from 'mithaq/admin'
 import { ScreenContext, useLocale, useScreen } from 'mithaq/admin/react'
-import { currentOf } from '@/components/mithaq/nodes.tsx'
+import { currentOf } from 'mithaq-admin/nav-links.tsx'
 
 /** What an entry is called: its own label, else its kayan's name in the singular for a global and the plural otherwise. */
 export const navLabel = ({ entry, screen, locale, t }: { entry: NavEntry; screen: ScreenClient; locale: string; t: Translate }) =>

package/template/templates/{asas → mithaq}/src/ui/top-shell.tsx

@@ -8,26 +8,26 @@ import { use, type ReactNode } from 'react'
 import type { ShellProps } from 'mithaq/admin'
 import { ScreenContext, useLocale, useScreen } from 'mithaq/admin/react'
 import { SidebarProvider } from '@/components/ui/sidebar'
-import { PlatformLink, UserMenu, frame, headerBar, headerRow } from './app-shell.tsx'
+import { BackofficeLink, UserMenu, frame, headerBar, headerRow } from './app-shell.tsx'
 
 export const regions = ['header', 'nav', 'main'] as const
 
-/** The dashboard's top shell, whose header links the platform app for staff the way the app shell's does. */
+/** The dashboard's top shell, whose header links the backoffice app for staff the way the app shell's does. */
 export function TopShell(props: ShellProps<readonly ['header', 'nav', 'main'], ReactNode>) {
-  return <Top {...props} platform />
+  return <Top {...props} backoffice />
 }
 
 /**
- * The portal's, the same shell with no platform link: the portal is where a
- * tenant's people work, and staff reach the platform from the dashboard
+ * The portal's, the same shell with no backoffice link: the portal is where a
+ * tenant's people work, and staff reach the backoffice from the dashboard
  * alone. Which of the two a page draws is the shell its screen names under
  * `top`, never the URL.
  */
 export function PortalTopShell(props: ShellProps<readonly ['header', 'nav', 'main'], ReactNode>) {
-  return <Top {...props} platform={false} />
+  return <Top {...props} backoffice={false} />
 }
 
-function Top({ regions, platform }: ShellProps<readonly ['header', 'nav', 'main'], ReactNode> & { platform: boolean }) {
+function Top({ regions, backoffice }: ShellProps<readonly ['header', 'nav', 'main'], ReactNode> & { backoffice: boolean }) {
   const { t } = useLocale()
   const screen = useScreen()
   // Home is current on the screen's own home alone, whose path is the
@@ -45,7 +45,7 @@ function Top({ regions, platform }: ShellProps<readonly ['header', 'nav', 'main'
         <div className={headerRow}>
           {regions.header}
           <div className="ms-auto flex items-center gap-2">
-            {platform ? <PlatformLink /> : null}
+            {backoffice ? <BackofficeLink /> : null}
             {/* The avatar alone on a phone, the whole card from sm up, so the
                 title keeps the room it needs. */}
             <div className="w-12 sm:w-56">

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

@@ -1,112 +0,0 @@
-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