@nixxie-cms/core 1.0.0

package/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx

@@ -0,0 +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>
+  )
+}