@nixxie-cms/core 1.0.0 → 1.0.2

package/src/{___internal-do-not-use-will-break-in-patch → internal-unstable}/admin-ui/pages/ItemPage/common.tsx

@@ -1,358 +1,358 @@
-import { useRouter } from 'next/router'
-import type { HTMLAttributes, ReactNode } from 'react'
-import { Fragment, useMemo, useState } from 'react'
-import isDeepEqual from 'fast-deep-equal'
-
-import { ActionGroup } from '@keystar/ui/action-group'
-import { Breadcrumbs, Item } from '@keystar/ui/breadcrumbs'
-import { AlertDialog, DialogContainer } from '@keystar/ui/dialog'
-import { Icon } from '@keystar/ui/icon'
-import { allIcons as KeystarIcons } from '@keystar/ui/icon/all'
-import { Grid, HStack } from '@keystar/ui/layout'
-import { breakpointQueries, css, tokenSchema } from '@keystar/ui/style'
-import { toastQueue } from '@keystar/ui/toast'
-import { Heading, Text } from '@keystar/ui/typography'
-import { gql, type TypedDocumentNode, useApolloClient } from '../../../../admin-ui/apollo'
-import { Container, CONTAINER_MAX } from '../../../../admin-ui/components/Container'
-import { ErrorDetailsDialog } from '../../../../admin-ui/components/Errors'
-import {
-  getActionArguments,
-  getActionGraphQLArgs,
-  getActionGraphQLVariables,
-} from '../../../../admin-ui/utils/actionData'
-import type { ActionMeta, ListMeta } from '../../../../types'
-
-export function ItemPageHeader({
-  list,
-  actions,
-  item,
-  value,
-  initialValue,
-  label,
-  title = label,
-  onAction,
-}: {
-  list: ListMeta
-  actions: ActionMeta[]
-  item: Record<string, unknown> | null
-  value: Record<string, unknown> | null
-  initialValue: Record<string, unknown> | null
-  label: string
-  title: string
-  onAction: ((action: ActionMeta, resultId: string | null) => void) | null
-}) {
-  const router = useRouter()
-
-  return (
-    <Grid
-      // fill space; take over layout from the `PageContainer` flex wrapper
-      flex
-      // make sure actions don't run into the primary element, even though it'll truncate
-      gap="medium"
-      // best efforts to ensure actions collapse first, then the title/breadcrumbs may truncate
-      columns={`minmax(50cqw, auto) minmax(${tokenSchema.size.element.regular}, max-content)`}
-      // grid areas required because the `ActionGroup` implements focus
-      // sentinels (span) before and after the root element
-      areas={['primary secondary']}
-      // treat this area like a container
-      minWidth={0}
-      maxWidth={CONTAINER_MAX}
-    >
-      {list.isSingleton ? (
-        <Heading elementType="h1" size="small" gridArea="primary" truncate>
-          {list.label}
-        </Heading>
-      ) : (
-        <>
-          <Breadcrumbs size="medium" gridArea="primary">
-            <Item href={`/${list.path}`}>{list.label}</Item>
-            <Item href={router.asPath}>{label}</Item>
-          </Breadcrumbs>
-
-          {/* Every page must have an H1 for accessibility. */}
-          <Text elementType="h1" visuallyHidden>
-            {title}
-          </Text>
-        </>
-      )}
-
-      {item && onAction && actions.length > 0 && (
-        <ItemActions
-          list={list}
-          item={item}
-          value={value}
-          initialValue={initialValue}
-          actions={actions}
-          onAction={onAction}
-        />
-      )}
-    </Grid>
-  )
-}
-
-function replace(
-  s: string,
-  list: ListMeta,
-  args: ActionMeta & {
-    itemLabel?: string
-  }
-) {
-  return s
-    .replaceAll('{itemLabel}', args.itemLabel ?? '')
-    .replaceAll('{Label}', args.label)
-    .replaceAll('{label}', args.label.toLowerCase())
-    .replaceAll('{Plural}', list.plural)
-    .replaceAll('{plural}', list.plural.toLowerCase())
-    .replaceAll('{Singular}', list.singular)
-    .replaceAll('{singular}', list.singular.toLowerCase())
-}
-
-type ActionError = {
-  action: ActionMeta
-  error: Error
-}
-
-function ItemActions({
-  list,
-  item,
-  value,
-  initialValue,
-  actions,
-  onAction,
-}: {
-  list: ListMeta
-  item: Record<string, unknown>
-  value: Record<string, unknown> | null
-  initialValue: Record<string, unknown> | null
-  actions: ActionMeta[]
-  onAction: (action: ActionMeta, resultId: string | null) => void
-}) {
-  const apolloClient = useApolloClient()
-  const actionItems = useMemo(
-    () =>
-      actions.map(action => ({
-        id: action.key,
-        label: action.label,
-        icon: action.icon ? KeystarIcons[action.icon] : null,
-      })),
-    [actions]
-  )
-  const [actionError, setActionError] = useState<ActionError | null>(null)
-  const [activeAction, setActiveAction] = useState<ActionMeta | null>(null)
-  const [blockedAction, setBlockedAction] = useState<ActionMeta | null>(null)
-  const itemLabel_ = item[list.labelField] ?? item.id
-  const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : (item.id as string)
-  const hasUnsavedChanges = useMemo(
-    () => value !== null && initialValue !== null && !isDeepEqual(value, initialValue),
-    [initialValue, value]
-  )
-
-  const disabledKeys = useMemo(
-    () =>
-      actions.filter(action => action.itemView.actionMode === 'disabled').map(action => action.key),
-    [actions]
-  )
-
-  async function onTryAction(action: ActionMeta, confirmed: boolean) {
-    setActiveAction(null)
-
-    if (hasUnsavedChanges) {
-      setBlockedAction(action)
-      return
-    }
-
-    if (!confirmed && !action.itemView.hidePrompt) {
-      setActiveAction(action)
-      return
-    }
-
-    const { messages: m } = action
-    try {
-      const argsForAction = initialValue ? getActionArguments(list, action, initialValue) : {}
-      const graphqlArgs = getActionGraphQLArgs(action)
-      const graphqlVariables = getActionGraphQLVariables(action)
-      const mutation = (
-        action.graphql.arguments.length
-          ? gql`mutation ${action.graphql.names.one}($id: ID!, ${graphqlVariables}) {
-            result: ${action.graphql.names.one}(where: { id: $id }, ${graphqlArgs}) {
-              id
-            }
-          }`
-          : gql`mutation ${action.graphql.names.one}($id: ID!) {
-            result: ${action.graphql.names.one}(where: { id: $id }) {
-              id
-            }
-          }`
-      ) as TypedDocumentNode<{ result: { id: string } }, { id: string } & Record<string, unknown>>
-      const data = await apolloClient.mutate({
-        mutation,
-        variables: action.graphql.arguments.length
-          ? { id: item.id as string, ...argsForAction }
-          : { id: item.id as string },
-      })
-
-      if (!action.itemView.hideToast) {
-        toastQueue.neutral(replace(m.success, list, { ...action, itemLabel }), {
-          timeout: 5000,
-        })
-      }
-
-      onAction(action, data.data?.result?.id ?? null)
-    } catch (error: any) {
-      toastQueue.critical(replace(m.fail, list, { ...action, itemLabel }), {
-        actionLabel: 'Details',
-        onAction: () => setActionError({ action, error }),
-        shouldCloseOnAction: true,
-      })
-    }
-  }
-
-  return (
-    <Fragment>
-      <ActionGroup
-        gridArea="secondary"
-        disabledKeys={disabledKeys}
-        overflowMode="collapse"
-        items={actionItems}
-        onAction={key => {
-          const action = list.actions.find(action => action.key === key)
-          if (!action) return
-          onTryAction(action, false)
-        }}
-      >
-        {item => (
-          <Item textValue={item.label}>
-            {item.icon && <Icon src={item.icon} />}
-            <Text>{item.label}</Text>
-          </Item>
-        )}
-      </ActionGroup>
-      <DialogContainer onDismiss={() => setActiveAction(null)}>
-        {activeAction && (
-          <AlertDialog
-            title={replace(activeAction.messages.promptTitle, list, { ...activeAction, itemLabel })}
-            cancelLabel="Cancel"
-            primaryActionLabel={replace(activeAction.messages.promptConfirmLabel, list, {
-              ...activeAction,
-              itemLabel,
-            })}
-            onPrimaryAction={async () => {
-              await onTryAction(activeAction, true)
-            }}
-          >
-            {replace(activeAction.messages.prompt, list, { ...activeAction, itemLabel })}
-          </AlertDialog>
-        )}
-      </DialogContainer>
-
-      <DialogContainer onDismiss={() => setBlockedAction(null)}>
-        {blockedAction && (
-          <AlertDialog
-            title="Unsaved changes"
-            primaryActionLabel="Dismiss"
-            onPrimaryAction={() => setBlockedAction(null)}
-          >
-            Please save or reset your changes before attempting to{' '}
-            {replace('{label}', list, blockedAction)}.
-          </AlertDialog>
-        )}
-      </DialogContainer>
-
-      <DialogContainer onDismiss={() => setActionError(null)} isDismissable>
-        {actionError && (
-          <ErrorDetailsDialog
-            title={replace(actionError.action.messages.fail, list, {
-              ...actionError.action,
-              itemLabel,
-            })}
-            error={actionError.error}
-          />
-        )}
-      </DialogContainer>
-    </Fragment>
-  )
-}
-
-export function ColumnLayout(props: HTMLAttributes<HTMLDivElement>) {
-  return (
-    // this container must be relative to catch absolute children
-    // particularly the "expanded" document-field, which needs a height of 100%
-    <Container position="relative" height="100%" paddingX="xlarge">
-      <div
-        className={css({
-          display: 'grid',
-          columnGap: tokenSchema.size.space.xlarge,
-          gridTemplateAreas: '"main" "sidebar" "toolbar"',
-
-          [breakpointQueries.above.tablet]: {
-            gridTemplateColumns: `2fr minmax(${tokenSchema.size.scale[3600]}, 1fr)`,
-            gridTemplateAreas: '"main sidebar" "toolbar toolbar"',
-          },
-        })}
-        {...props}
-      />
-    </Container>
-  )
-}
-
-export function StickySidebar(props: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={css({
-        gridArea: 'sidebar',
-        marginTop: tokenSchema.size.space.xlarge,
-
-        [breakpointQueries.above.tablet]: {
-          alignSelf: 'start',
-          marginBottom: tokenSchema.size.element.xlarge,
-          // sync with toolbar height
-          paddingBottom: tokenSchema.size.element.xlarge,
-          position: 'sticky',
-          top: tokenSchema.size.space.xlarge,
-        },
-      })}
-      {...props}
-    />
-  )
-}
-
-export function BaseToolbar(props: { children: ReactNode }) {
-  return (
-    <Grid
-      backgroundColor="surface"
-      columns="subgrid"
-      gridArea="toolbar"
-      insetBottom={0}
-      marginTop="xlarge"
-      position={{ tablet: 'sticky' }}
-      zIndex={20}
-      UNSAFE_className={css({
-        // fuzzy mask sidebar fields, which slide behind the un-bordered portion
-        // of the sticky toolbar
-        [breakpointQueries.above.tablet]: {
-          '&::after': {
-            boxShadow: `0 -4px 4px 1px ${tokenSchema.color.background.surface}`,
-            content: '""',
-          },
-        },
-      })}
-    >
-      <HStack
-        alignItems="center"
-        borderTop="neutral"
-        gap="regular"
-        height="element.xlarge"
-        UNSAFE_className={css({
-          // stretch horizontally to ensure field focus-rings are covered
-          [breakpointQueries.above.mobile]: {
-            backgroundColor: tokenSchema.color.background.surface,
-            marginInline: `calc(${tokenSchema.size.alias.focusRing} * -1)`,
-            paddingInline: tokenSchema.size.alias.focusRing,
-          },
-        })}
-      >
-        {props.children}
-      </HStack>
-    </Grid>
-  )
-}
+import { useRouter } from 'next/router'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { Fragment, useMemo, useState } from 'react'
+import isDeepEqual from 'fast-deep-equal'
+
+import { ActionGroup } from '@keystar/ui/action-group'
+import { Breadcrumbs, Item } from '@keystar/ui/breadcrumbs'
+import { AlertDialog, DialogContainer } from '@keystar/ui/dialog'
+import { Icon } from '@keystar/ui/icon'
+import { allIcons as KeystarIcons } from '@keystar/ui/icon/all'
+import { Grid, HStack } from '@keystar/ui/layout'
+import { breakpointQueries, css, tokenSchema } from '@keystar/ui/style'
+import { toastQueue } from '@keystar/ui/toast'
+import { Heading, Text } from '@keystar/ui/typography'
+import { gql, type TypedDocumentNode, useApolloClient } from '../../../../admin-ui/apollo'
+import { Container, CONTAINER_MAX } from '../../../../admin-ui/components/Container'
+import { ErrorDetailsDialog } from '../../../../admin-ui/components/Errors'
+import {
+  getActionArguments,
+  getActionGraphQLArgs,
+  getActionGraphQLVariables,
+} from '../../../../admin-ui/utils/actionData'
+import type { ActionMeta, ListMeta } from '../../../../types'
+
+export function ItemPageHeader({
+  list,
+  actions,
+  item,
+  value,
+  initialValue,
+  label,
+  title = label,
+  onAction,
+}: {
+  list: ListMeta
+  actions: ActionMeta[]
+  item: Record<string, unknown> | null
+  value: Record<string, unknown> | null
+  initialValue: Record<string, unknown> | null
+  label: string
+  title: string
+  onAction: ((action: ActionMeta, resultId: string | null) => void) | null
+}) {
+  const router = useRouter()
+
+  return (
+    <Grid
+      // fill space; take over layout from the `PageContainer` flex wrapper
+      flex
+      // make sure actions don't run into the primary element, even though it'll truncate
+      gap="medium"
+      // best efforts to ensure actions collapse first, then the title/breadcrumbs may truncate
+      columns={`minmax(50cqw, auto) minmax(${tokenSchema.size.element.regular}, max-content)`}
+      // grid areas required because the `ActionGroup` implements focus
+      // sentinels (span) before and after the root element
+      areas={['primary secondary']}
+      // treat this area like a container
+      minWidth={0}
+      maxWidth={CONTAINER_MAX}
+    >
+      {list.isSingleton ? (
+        <Heading elementType="h1" size="small" gridArea="primary" truncate>
+          {list.label}
+        </Heading>
+      ) : (
+        <>
+          <Breadcrumbs size="medium" gridArea="primary">
+            <Item href={`/${list.path}`}>{list.label}</Item>
+            <Item href={router.asPath}>{label}</Item>
+          </Breadcrumbs>
+
+          {/* Every page must have an H1 for accessibility. */}
+          <Text elementType="h1" visuallyHidden>
+            {title}
+          </Text>
+        </>
+      )}
+
+      {item && onAction && actions.length > 0 && (
+        <ItemActions
+          list={list}
+          item={item}
+          value={value}
+          initialValue={initialValue}
+          actions={actions}
+          onAction={onAction}
+        />
+      )}
+    </Grid>
+  )
+}
+
+function replace(
+  s: string,
+  list: ListMeta,
+  args: ActionMeta & {
+    itemLabel?: string
+  }
+) {
+  return s
+    .replaceAll('{itemLabel}', args.itemLabel ?? '')
+    .replaceAll('{Label}', args.label)
+    .replaceAll('{label}', args.label.toLowerCase())
+    .replaceAll('{Plural}', list.plural)
+    .replaceAll('{plural}', list.plural.toLowerCase())
+    .replaceAll('{Singular}', list.singular)
+    .replaceAll('{singular}', list.singular.toLowerCase())
+}
+
+type ActionError = {
+  action: ActionMeta
+  error: Error
+}
+
+function ItemActions({
+  list,
+  item,
+  value,
+  initialValue,
+  actions,
+  onAction,
+}: {
+  list: ListMeta
+  item: Record<string, unknown>
+  value: Record<string, unknown> | null
+  initialValue: Record<string, unknown> | null
+  actions: ActionMeta[]
+  onAction: (action: ActionMeta, resultId: string | null) => void
+}) {
+  const apolloClient = useApolloClient()
+  const actionItems = useMemo(
+    () =>
+      actions.map(action => ({
+        id: action.key,
+        label: action.label,
+        icon: action.icon ? KeystarIcons[action.icon] : null,
+      })),
+    [actions]
+  )
+  const [actionError, setActionError] = useState<ActionError | null>(null)
+  const [activeAction, setActiveAction] = useState<ActionMeta | null>(null)
+  const [blockedAction, setBlockedAction] = useState<ActionMeta | null>(null)
+  const itemLabel_ = item[list.labelField] ?? item.id
+  const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : (item.id as string)
+  const hasUnsavedChanges = useMemo(
+    () => value !== null && initialValue !== null && !isDeepEqual(value, initialValue),
+    [initialValue, value]
+  )
+
+  const disabledKeys = useMemo(
+    () =>
+      actions.filter(action => action.itemView.actionMode === 'disabled').map(action => action.key),
+    [actions]
+  )
+
+  async function onTryAction(action: ActionMeta, confirmed: boolean) {
+    setActiveAction(null)
+
+    if (hasUnsavedChanges) {
+      setBlockedAction(action)
+      return
+    }
+
+    if (!confirmed && !action.itemView.hidePrompt) {
+      setActiveAction(action)
+      return
+    }
+
+    const { messages: m } = action
+    try {
+      const argsForAction = initialValue ? getActionArguments(list, action, initialValue) : {}
+      const graphqlArgs = getActionGraphQLArgs(action)
+      const graphqlVariables = getActionGraphQLVariables(action)
+      const mutation = (
+        action.graphql.arguments.length
+          ? gql`mutation ${action.graphql.names.one}($id: ID!, ${graphqlVariables}) {
+            result: ${action.graphql.names.one}(where: { id: $id }, ${graphqlArgs}) {
+              id
+            }
+          }`
+          : gql`mutation ${action.graphql.names.one}($id: ID!) {
+            result: ${action.graphql.names.one}(where: { id: $id }) {
+              id
+            }
+          }`
+      ) as TypedDocumentNode<{ result: { id: string } }, { id: string } & Record<string, unknown>>
+      const data = await apolloClient.mutate({
+        mutation,
+        variables: action.graphql.arguments.length
+          ? { id: item.id as string, ...argsForAction }
+          : { id: item.id as string },
+      })
+
+      if (!action.itemView.hideToast) {
+        toastQueue.neutral(replace(m.success, list, { ...action, itemLabel }), {
+          timeout: 5000,
+        })
+      }
+
+      onAction(action, data.data?.result?.id ?? null)
+    } catch (error: any) {
+      toastQueue.critical(replace(m.fail, list, { ...action, itemLabel }), {
+        actionLabel: 'Details',
+        onAction: () => setActionError({ action, error }),
+        shouldCloseOnAction: true,
+      })
+    }
+  }
+
+  return (
+    <Fragment>
+      <ActionGroup
+        gridArea="secondary"
+        disabledKeys={disabledKeys}
+        overflowMode="collapse"
+        items={actionItems}
+        onAction={key => {
+          const action = list.actions.find(action => action.key === key)
+          if (!action) return
+          onTryAction(action, false)
+        }}
+      >
+        {item => (
+          <Item textValue={item.label}>
+            {item.icon && <Icon src={item.icon} />}
+            <Text>{item.label}</Text>
+          </Item>
+        )}
+      </ActionGroup>
+      <DialogContainer onDismiss={() => setActiveAction(null)}>
+        {activeAction && (
+          <AlertDialog
+            title={replace(activeAction.messages.promptTitle, list, { ...activeAction, itemLabel })}
+            cancelLabel="Cancel"
+            primaryActionLabel={replace(activeAction.messages.promptConfirmLabel, list, {
+              ...activeAction,
+              itemLabel,
+            })}
+            onPrimaryAction={async () => {
+              await onTryAction(activeAction, true)
+            }}
+          >
+            {replace(activeAction.messages.prompt, list, { ...activeAction, itemLabel })}
+          </AlertDialog>
+        )}
+      </DialogContainer>
+
+      <DialogContainer onDismiss={() => setBlockedAction(null)}>
+        {blockedAction && (
+          <AlertDialog
+            title="Unsaved changes"
+            primaryActionLabel="Dismiss"
+            onPrimaryAction={() => setBlockedAction(null)}
+          >
+            Please save or reset your changes before attempting to{' '}
+            {replace('{label}', list, blockedAction)}.
+          </AlertDialog>
+        )}
+      </DialogContainer>
+
+      <DialogContainer onDismiss={() => setActionError(null)} isDismissable>
+        {actionError && (
+          <ErrorDetailsDialog
+            title={replace(actionError.action.messages.fail, list, {
+              ...actionError.action,
+              itemLabel,
+            })}
+            error={actionError.error}
+          />
+        )}
+      </DialogContainer>
+    </Fragment>
+  )
+}
+
+export function ColumnLayout(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    // this container must be relative to catch absolute children
+    // particularly the "expanded" document-field, which needs a height of 100%
+    <Container position="relative" height="100%" paddingX="xlarge">
+      <div
+        className={css({
+          display: 'grid',
+          columnGap: tokenSchema.size.space.xlarge,
+          gridTemplateAreas: '"main" "sidebar" "toolbar"',
+
+          [breakpointQueries.above.tablet]: {
+            gridTemplateColumns: `2fr minmax(${tokenSchema.size.scale[3600]}, 1fr)`,
+            gridTemplateAreas: '"main sidebar" "toolbar toolbar"',
+          },
+        })}
+        {...props}
+      />
+    </Container>
+  )
+}
+
+export function StickySidebar(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={css({
+        gridArea: 'sidebar',
+        marginTop: tokenSchema.size.space.xlarge,
+
+        [breakpointQueries.above.tablet]: {
+          alignSelf: 'start',
+          marginBottom: tokenSchema.size.element.xlarge,
+          // sync with toolbar height
+          paddingBottom: tokenSchema.size.element.xlarge,
+          position: 'sticky',
+          top: tokenSchema.size.space.xlarge,
+        },
+      })}
+      {...props}
+    />
+  )
+}
+
+export function BaseToolbar(props: { children: ReactNode }) {
+  return (
+    <Grid
+      backgroundColor="surface"
+      columns="subgrid"
+      gridArea="toolbar"
+      insetBottom={0}
+      marginTop="xlarge"
+      position={{ tablet: 'sticky' }}
+      zIndex={20}
+      UNSAFE_className={css({
+        // fuzzy mask sidebar fields, which slide behind the un-bordered portion
+        // of the sticky toolbar
+        [breakpointQueries.above.tablet]: {
+          '&::after': {
+            boxShadow: `0 -4px 4px 1px ${tokenSchema.color.background.surface}`,
+            content: '""',
+          },
+        },
+      })}
+    >
+      <HStack
+        alignItems="center"
+        borderTop="neutral"
+        gap="regular"
+        height="element.xlarge"
+        UNSAFE_className={css({
+          // stretch horizontally to ensure field focus-rings are covered
+          [breakpointQueries.above.mobile]: {
+            backgroundColor: tokenSchema.color.background.surface,
+            marginInline: `calc(${tokenSchema.size.alias.focusRing} * -1)`,
+            paddingInline: tokenSchema.size.alias.focusRing,
+          },
+        })}
+      >
+        {props.children}
+      </HStack>
+    </Grid>
+  )
+}