@byline/host-tanstack-start 0.9.3

package/src/admin-shell/chrome/sort-icons.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+const DEFAULT_SORT_ICON_CLASS = 'byline-sort-icon'
+
+// Ascending sort icon (A-Z with down arrow)
+export function SortAscendingIcon({ className = DEFAULT_SORT_ICON_CLASS }: { className?: string }) {
+  return (
+    <svg
+      role="presentation"
+      className={className}
+      viewBox="0 0 28 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 4L12 18M12 18L8 14M12 18L16 14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <text
+        x="19"
+        y="8"
+        fontSize="12"
+        fontWeight="bold"
+        fill="currentColor"
+        fontFamily="Arial, sans-serif"
+      >
+        A
+      </text>
+      <text
+        x="19"
+        y="18"
+        fontSize="12"
+        fontWeight="bold"
+        fill="currentColor"
+        fontFamily="Arial, sans-serif"
+      >
+        Z
+      </text>
+    </svg>
+  )
+}
+
+// Descending sort icon (Z-A with up arrow)
+export function SortDescendingIcon({
+  className = DEFAULT_SORT_ICON_CLASS,
+}: {
+  className?: string
+}) {
+  return (
+    <svg
+      role="presentation"
+      className={className}
+      viewBox="0 0 28 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 19L12 5M12 5L8 9M12 5L16 9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <text
+        x="19"
+        y="8"
+        fontSize="12"
+        fontWeight="bold"
+        fill="currentColor"
+        fontFamily="Arial, sans-serif"
+      >
+        Z
+      </text>
+      <text
+        x="19"
+        y="18"
+        fontSize="12"
+        fontWeight="bold"
+        fill="currentColor"
+        fontFamily="Arial, sans-serif"
+      >
+        A
+      </text>
+    </svg>
+  )
+}
+
+// Unsorted/neutral icon (both arrows with no letters)
+export function SortNeutralIcon({ className = DEFAULT_SORT_ICON_CLASS }: { className?: string }) {
+  return (
+    <svg
+      role="presentation"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 10L12 6M12 6L9 9M12 6L15 9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        opacity="0.5"
+      />
+      <path
+        d="M12 14L12 18M12 18L9 15M12 18L15 15"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        opacity="0.5"
+      />
+    </svg>
+  )
+}

package/src/admin-shell/chrome/th-sortable.module.css

@@ -0,0 +1,51 @@
+/**
+ * TableHeadingCellSortable — clickable column header with a sort indicator.
+ *
+ * Override handles:
+ *   .byline-th-sortable          — heading cell wrapper class (passes through className)
+ *   .byline-th-sortable-button   — clickable button inside the header
+ *   .byline-th-align-left        — left-aligned content
+ *   .byline-th-align-center      — center-aligned content
+ *   .byline-th-align-right       — right-aligned content
+ *   .byline-th-icon              — sort icon size hint
+ */
+
+.button,
+:global(.byline-th-sortable-button) {
+  display: flex;
+  gap: 0.25rem;
+  padding-left: 2px;
+  padding-right: 6px;
+  font-weight: 700;
+}
+
+.button:hover,
+:global(.byline-th-sortable-button:hover) {
+  text-decoration: underline;
+}
+
+.alignLeft,
+:global(.byline-th-align-left) {
+  text-align: left;
+}
+
+.alignCenter,
+:global(.byline-th-align-center) {
+  text-align: center;
+}
+
+.alignRight,
+:global(.byline-th-align-right) {
+  text-align: right;
+}
+
+.alignRightAuto,
+:global(.byline-th-align-right-auto) {
+  margin-left: auto;
+}
+
+.icon,
+:global(.byline-th-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}

package/src/admin-shell/chrome/th-sortable.tsx

@@ -0,0 +1,114 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { useRouterState } from '@tanstack/react-router'
+
+import { Table } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { useNavigate } from './loose-router.js'
+import { SortAscendingIcon, SortDescendingIcon, SortNeutralIcon } from './sort-icons.js'
+import styles from './th-sortable.module.css'
+
+type TableHeadingCellProps = React.JSX.IntrinsicElements['th']
+
+export interface TableHeadingCellSortableProps extends TableHeadingCellProps {
+  label: string
+  path?: string
+  fieldName?: string
+  sortable?: boolean
+  desc?: boolean
+  align?: 'left' | 'center' | 'right'
+  className?: string
+}
+
+export function TableHeadingCellSortable({
+  path: _path = '/',
+  fieldName,
+  label,
+  sortable = false,
+  align = 'left',
+  className,
+  ...rest
+}: TableHeadingCellSortableProps & {
+  ref?: React.RefObject<HTMLTableCellElement>
+}) {
+  const navigate = useNavigate()
+  const location = useRouterState({ select: (s) => s.location })
+
+  const [desc, setDesc] = useState<boolean | null>(null)
+
+  const handleOnSort = (descending: boolean) => (): void => {
+    if (fieldName != null) {
+      const params = structuredClone(location.search)
+      delete params.page
+      params.order = fieldName
+      params.desc = descending
+      setDesc(descending)
+      navigate({
+        to: location.pathname as never,
+        search: params,
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (fieldName != null) {
+      const order = (location.search as Record<string, unknown>).order
+      const d = (location.search as Record<string, unknown>).desc as boolean | undefined
+      if (order === fieldName) {
+        setDesc(d ?? false)
+      } else {
+        setDesc(null)
+      }
+    }
+  }, [fieldName, location.search])
+
+  const alignClasses = cx({
+    'byline-th-align-left': align === 'left',
+    [styles.alignLeft]: align === 'left',
+    'byline-th-align-center': align === 'center',
+    [styles.alignCenter]: align === 'center',
+    'byline-th-align-right': align === 'right',
+    [styles.alignRight]: align === 'right',
+  })
+
+  if (sortable === false) {
+    return (
+      <Table.HeadingCell className={cx('byline-th-sortable', className, alignClasses)} {...rest}>
+        {label}
+      </Table.HeadingCell>
+    )
+  }
+
+  const getSortIcon = () => {
+    if (desc === null) return <SortNeutralIcon />
+    if (desc === true) return <SortDescendingIcon />
+    return <SortAscendingIcon />
+  }
+
+  return (
+    <Table.HeadingCell className={cx('byline-th-sortable', className)} {...rest}>
+      <button
+        type="button"
+        className={cx(
+          'byline-th-sortable-button',
+          styles.button,
+          alignClasses,
+          align === 'right' && [styles.alignRightAuto, 'byline-th-align-right-auto']
+        )}
+        onClick={handleOnSort(desc !== true)}
+      >
+        <span>{label}</span>
+        {getSortIcon()}
+      </button>
+    </Table.HeadingCell>
+  )
+}

package/src/admin-shell/chrome/use-media-query.ts

@@ -0,0 +1,28 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useEffect, useState } from 'react'
+
+export const useMediaQuery = (query: string): boolean | null => {
+  const [matches, setMatches] = useState<boolean | null>(null)
+  useEffect(() => {
+    const mediaMatch = window.matchMedia(query)
+    if (matches == null) {
+      setMatches(mediaMatch.matches)
+    }
+    const handler = (e: MediaQueryListEvent): void => {
+      setMatches(e.matches)
+    }
+    mediaMatch.addEventListener('change', handler)
+    return () => {
+      mediaMatch.removeEventListener('change', handler)
+    }
+  }, [matches, query])
+
+  return matches
+}

package/src/admin-shell/chrome/utils.ts

@@ -0,0 +1,20 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ *
+ * Small chrome-internal utilities. Inlined here so the package doesn't
+ * pull in host-app helpers from `@/utils/utils.general.ts`.
+ */
+
+export function formatNumber(value: number, decimalPlaces = 0): string {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    throw new TypeError('Input must be a valid number')
+  }
+  return value.toLocaleString('en-US', {
+    minimumFractionDigits: decimalPlaces,
+    maximumFractionDigits: decimalPlaces,
+  })
+}

package/src/admin-shell/collections/api.module.css

@@ -0,0 +1,62 @@
+/**
+ * ApiView — JSON inspector view for a collection document.
+ *
+ * Override handles:
+ *   .byline-api-section   — outer Section wrapper
+ *   .byline-api-container — inner Container wrapper
+ *   .byline-api-head      — title + view-menu row
+ *   .byline-api-title     — heading
+ *   .byline-api-viewer    — scrollable JSON panel
+ */
+
+.section,
+:global(.byline-api-section),
+.container,
+:global(.byline-api-container) {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.head,
+:global(.byline-api-head) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-bottom: var(--spacing-8);
+}
+
+@media (min-width: 40rem) {
+  .head,
+  :global(.byline-api-head) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.title,
+:global(.byline-api-title) {
+  margin-bottom: var(--spacing-8);
+}
+
+.viewer,
+:global(.byline-api-viewer) {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--spacing-4);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--canvas-800);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+}
+
+:is([data-theme="dark"], :global(.dark)) {
+  .viewer,
+  :global(.byline-api-viewer) {
+    border-color: var(--gray-700);
+  }
+}

package/src/admin-shell/collections/api.tsx

@@ -0,0 +1,70 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type { CollectionDefinition } from '@byline/core'
+import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
+import { Container, Section } from '@infonomic/uikit/react'
+import cx from 'classnames'
+import { allExpanded, darkStyles, JsonView } from 'react-json-view-lite'
+
+import styles from './api.module.css'
+import { ViewMenu } from './view-menu.js'
+import type { ContentLocaleOption } from './view-menu.js'
+import 'react-json-view-lite/dist/index.css'
+
+/**
+ * JSON inspector view for a collection document.
+ *
+ * Stable override handles: `.byline-api-section`, `.byline-api-container`,
+ * `.byline-api-head`, `.byline-api-title`, `.byline-api-viewer`.
+ */
+export const ApiView = ({
+  collectionDefinition,
+  initialData,
+  locale,
+  depth,
+  contentLocales,
+  defaultContentLocale,
+}: {
+  collectionDefinition: CollectionDefinition
+  initialData: AnyCollectionSchemaTypes['UpdateType']
+  /** Currently active locale from the route search param (undefined → all). */
+  locale?: string
+  /** Populate depth from the route search param (undefined → 0, no populate). */
+  depth?: number
+  contentLocales: ReadonlyArray<ContentLocaleOption>
+  defaultContentLocale: string
+}) => {
+  const { labels, path } = collectionDefinition
+
+  return (
+    <Section className={cx('byline-api-section', styles.section)}>
+      <Container className={cx('byline-api-container', styles.container)}>
+        <div className={cx('byline-api-head', styles.head)}>
+          <h2 className={cx('byline-api-title', styles.title)}>{labels.singular} API</h2>
+          <ViewMenu
+            collection={path}
+            documentId={String(initialData.id)}
+            activeView="api"
+            locale={locale}
+            depth={depth}
+            contentLocales={contentLocales}
+            defaultContentLocale={defaultContentLocale}
+          />
+        </div>
+        <div className={cx('byline-api-viewer', styles.viewer)}>
+          <JsonView
+            data={initialData}
+            shouldExpandNode={allExpanded}
+            style={{ ...darkStyles, container: 'api-json-view' }}
+          />
+        </div>
+      </Container>
+    </Section>
+  )
+}

package/src/admin-shell/collections/create.tsx

@@ -0,0 +1,108 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useState } from 'react'
+
+import type { CollectionAdminConfig, CollectionDefinition } from '@byline/core'
+import { FormRenderer } from '@byline/ui'
+import { Container, Section, useToastManager } from '@infonomic/uikit/react'
+
+import { createCollectionDocument } from '../../server-fns/collections/index.js'
+import { useNavigate } from '../chrome/loose-router.js'
+import { useTanStackNavigationGuard } from './tanstack-navigation-guard.js'
+
+type CreateState = {
+  status: 'success' | 'failed' | 'busy' | 'idle'
+  message: string
+}
+
+export const CreateView = ({
+  collectionDefinition,
+  adminConfig,
+  initialData,
+}: {
+  collectionDefinition: CollectionDefinition
+  adminConfig?: CollectionAdminConfig
+  // biome-ignore lint/suspicious/noExplicitAny: shape is collection-specific
+  initialData?: Record<string, any>
+}) => {
+  const toastManager = useToastManager()
+  const [_createState, setCreateState] = useState<CreateState>({
+    status: 'idle',
+    message: '',
+  })
+  const navigate = useNavigate()
+  const { labels, path, fields } = collectionDefinition
+
+  const handleSubmit = async ({
+    data,
+    systemPath,
+  }: {
+    // biome-ignore lint/suspicious/noExplicitAny: data is collection-specific
+    data: any
+    systemPath?: string | null
+  }) => {
+    try {
+      await createCollectionDocument({
+        data: {
+          collection: path,
+          data,
+          ...(systemPath ? { path: systemPath } : {}),
+        },
+      })
+      navigate({
+        to: '/admin/collections/$collection' as never,
+        params: { collection: path },
+        search: { action: 'created' },
+      })
+    } catch (err) {
+      console.error(err)
+
+      toastManager.add({
+        title: `${labels.singular} Creation`,
+        description: `An error occurred while creating ${labels.singular.toLowerCase()}`,
+        data: {
+          intent: 'danger',
+          iconType: 'danger',
+          icon: true,
+          close: true,
+        },
+      })
+
+      setCreateState({
+        status: 'failed',
+        message: `An error occurred while creating ${labels.singular.toLowerCase()}`,
+      })
+    }
+  }
+
+  return (
+    <Section>
+      <Container>
+        <FormRenderer
+          mode="create"
+          fields={fields}
+          onSubmit={handleSubmit}
+          initialData={initialData}
+          adminConfig={adminConfig}
+          useAsTitle={collectionDefinition.useAsTitle}
+          useAsPath={collectionDefinition.useAsPath}
+          headingLabel={labels.singular}
+          useNavigationGuard={useTanStackNavigationGuard}
+          onCancel={() =>
+            navigate({
+              to: '/admin/collections/$collection' as never,
+              params: { collection: path },
+            })
+          }
+          collectionPath={path}
+        />
+      </Container>
+    </Section>
+  )
+}