@nixxie-cms/core 1.0.3 → 2.0.0

package/src/admin-ui/utils/Fields.tsx

@@ -1,241 +1,241 @@
-import { useSlotId } from '@react-aria/utils'
-import { type ReactNode, useId } from 'react'
-
-import { FieldButton } from '@keystar/ui/button'
-import { Icon } from '@keystar/ui/icon'
-import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'
-import { HStack, VStack } from '@keystar/ui/layout'
-import { css, tokenSchema } from '@keystar/ui/style'
-import { Text } from '@keystar/ui/typography'
-
-import { textCursorInputIcon } from '@keystar/ui/icon/icons/textCursorInputIcon'
-import type {
-  BaseListTypeInfo,
-  ConditionalFilter,
-  ConditionalFilterCase,
-  FieldGroupMeta,
-  FieldMeta,
-} from '../../types'
-import { EmptyState } from '../components/EmptyState'
-import { resolveFieldMode, serializeItemForConditionalFilters, testFilter } from './filters'
-
-export function Fields({
-  view,
-  position,
-  fields,
-  groups = [],
-  forceValidation,
-  invalidFields,
-  onChange,
-  value: itemValue,
-  fieldModes = {},
-  fieldPositions = {},
-  isRequireds,
-}: {
-  view: 'createView' | 'itemView'
-  position: 'form' | 'sidebar'
-  fields: Record<string, FieldMeta>
-  forceValidation: boolean
-  groups?: FieldGroupMeta[]
-  invalidFields: ReadonlySet<string>
-  onChange(value: Record<string, unknown>): void
-  value: Record<string, unknown>
-  fieldModes?: Record<
-    string,
-    ConditionalFilter<'read' | 'edit' | 'hidden', 'read' | 'hidden', BaseListTypeInfo>
-  >
-  fieldPositions?: Record<string, 'form' | 'sidebar'>
-  isRequireds: Record<string, ConditionalFilterCase<BaseListTypeInfo>>
-}) {
-  const fieldDomByKey: Record<string, ReactNode> = {}
-  let focused = false
-
-  const serialized = serializeItemForConditionalFilters(fields, itemValue)
-  for (const fieldKey in fields) {
-    const field = fields[fieldKey]
-    const fieldPosition = fieldPositions[fieldKey] ?? field.itemView.fieldPosition
-    if (view === 'itemView' && fieldPosition !== position) continue
-
-    const fieldModeFilter = fieldModes[fieldKey] ?? field[view].fieldMode
-    const fieldMode = resolveFieldMode(fieldModeFilter, serialized, view)
-    if (fieldMode === 'hidden') continue
-
-    const fieldValue = itemValue[fieldKey]
-    const autoFocus = focused === false // not great, but focuses the first field
-    focused = true
-
-    fieldDomByKey[fieldKey] = (
-      <field.views.Field
-        key={fieldKey}
-        autoFocus={autoFocus}
-        forceValidation={forceValidation && invalidFields.has(fieldKey)}
-        field={field.controller}
-        isRequired={testFilter(isRequireds[fieldKey] ?? false, serialized)}
-        onChange={
-          fieldMode === 'read' || onChange === undefined
-            ? undefined
-            : newFieldValue => {
-                onChange({
-                  ...itemValue,
-                  [field.controller.fieldKey]: newFieldValue,
-                })
-              }
-        }
-        value={fieldValue}
-        itemValue={itemValue}
-      />
-    )
-  }
-
-  const groupByFieldKey: Record<string, FieldGroupMeta> = {}
-  for (const group of groups) {
-    for (const { key: fieldKey } of group.fields) {
-      groupByFieldKey[fieldKey] = group
-    }
-  }
-
-  // WARNING: for no fields and position: sidebar, we show an empty state, that is OK
-  if (Object.keys(fieldDomByKey).length === 0 && position === 'form') {
-    return (
-      <EmptyState
-        icon={textCursorInputIcon}
-        title="No fields"
-        message="There are no fields to be shown."
-      />
-    )
-  }
-
-  return (
-    // the "inline" container allows fields to react to the width of their column
-    <VStack gap="xlarge" UNSAFE_style={{ containerType: 'inline-size' }}>
-      {[
-        ...(function* () {
-          const rendered: Record<string, true> = {}
-          for (const fieldKey in fields) {
-            if (fieldKey in rendered) continue
-
-            const group = groupByFieldKey[fieldKey]
-            if (group) {
-              const fields = [
-                ...(function* () {
-                  for (const { key: fieldKey } of group.fields) {
-                    if (fieldKey in rendered) continue
-                    if (fieldDomByKey[fieldKey]) {
-                      yield fieldDomByKey[fieldKey]
-                    }
-                    rendered[fieldKey] = true
-                  }
-                })(),
-              ]
-              if (fields.length === 0) continue
-              yield (
-                <FieldGroup key={group.label} label={group.label} description={group.description}>
-                  {fields}
-                </FieldGroup>
-              )
-              continue
-            }
-
-            yield fieldDomByKey[fieldKey] ?? null
-            rendered[fieldKey] = true
-          }
-        })(),
-      ]}
-    </VStack>
-  )
-}
-
-function FieldGroup({
-  description,
-  label,
-  children,
-}: {
-  label: string
-  description: string | null
-  children: ReactNode
-}) {
-  const labelId = useId()
-  const descriptionId = useSlotId([Boolean(description)])
-
-  return (
-    <details aria-labelledby={labelId} aria-describedby={descriptionId} open>
-      <HStack
-        gap="medium"
-        alignItems="center"
-        elementType="summary"
-        UNSAFE_className={css({
-          listStyle: 'none',
-          outline: 0,
-          '::-webkit-details-marker': { display: 'none' },
-        })}
-      >
-        <FieldButton
-          // @ts-expect-error — this works, it's just not exposed in the public types
-          elementType="div"
-          // the <summary/> (above) is the focusable element
-          excludeFromTabOrder
-          prominence="low"
-          height="element.small"
-          width="element.small"
-          minWidth="auto"
-          UNSAFE_className={css({
-            'details[open] &': {
-              transform: 'rotate(90deg)',
-            },
-          })}
-        >
-          <Icon src={chevronRightIcon} size="medium" />
-        </FieldButton>
-        <VStack
-          gap="regular"
-          UNSAFE_className={css({
-            cursor: 'default',
-            userSelect: 'none',
-          })}
-        >
-          <Text
-            color="neutralEmphasis"
-            size="large"
-            weight="medium"
-            id={labelId}
-            position="relative"
-          >
-            {label}
-          </Text>
-          {!!description && (
-            <Text id={descriptionId} size="regular" color="neutralSecondary">
-              {description}
-            </Text>
-          )}
-        </VStack>
-      </HStack>
-
-      {/*
-        Padding is applied here because `<details>` doesn't accept flex/grid
-        layout, prefer "gap" in most cases.
-      */}
-      <HStack gap="medium" paddingTop="medium">
-        <GroupIndicatorLine />
-        <VStack gap="xlarge" flex>
-          {children}
-        </VStack>
-      </HStack>
-    </details>
-  )
-}
-
-export function GroupIndicatorLine() {
-  return (
-    <HStack justifyContent="center" width="element.small">
-      <div
-        className={css({
-          height: '100%',
-          width: tokenSchema.size.alias.focusRing,
-          borderRadius: tokenSchema.size.alias.focusRing,
-          backgroundColor: tokenSchema.color.border.neutral,
-          flexShrink: 0,
-        })}
-      />
-    </HStack>
-  )
-}
+import { useSlotId } from '@react-aria/utils'
+import { type ReactNode, useId } from 'react'
+
+import { FieldButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'
+import { HStack, VStack } from '@keystar/ui/layout'
+import { css, tokenSchema } from '@keystar/ui/style'
+import { Text } from '@keystar/ui/typography'
+
+import { textCursorInputIcon } from '@keystar/ui/icon/icons/textCursorInputIcon'
+import type {
+  BaseCollectionTypeInfo,
+  ConditionalFilter,
+  ConditionalFilterCase,
+  FieldGroupMeta,
+  FieldMeta,
+} from '../../types'
+import { EmptyState } from '../components/EmptyState'
+import { resolveFieldMode, serializeItemForConditionalFilters, testFilter } from './filters'
+
+export function Fields({
+  view,
+  position,
+  fields,
+  groups = [],
+  forceValidation,
+  invalidFields,
+  onChange,
+  value: itemValue,
+  fieldModes = {},
+  fieldPositions = {},
+  isRequireds,
+}: {
+  view: 'createView' | 'itemView'
+  position: 'form' | 'sidebar'
+  fields: Record<string, FieldMeta>
+  forceValidation: boolean
+  groups?: FieldGroupMeta[]
+  invalidFields: ReadonlySet<string>
+  onChange(value: Record<string, unknown>): void
+  value: Record<string, unknown>
+  fieldModes?: Record<
+    string,
+    ConditionalFilter<'read' | 'edit' | 'hidden', 'read' | 'hidden', BaseCollectionTypeInfo>
+  >
+  fieldPositions?: Record<string, 'form' | 'sidebar'>
+  isRequireds: Record<string, ConditionalFilterCase<BaseCollectionTypeInfo>>
+}) {
+  const fieldDomByKey: Record<string, ReactNode> = {}
+  let focused = false
+
+  const serialized = serializeItemForConditionalFilters(fields, itemValue)
+  for (const fieldKey in fields) {
+    const field = fields[fieldKey]
+    const fieldPosition = fieldPositions[fieldKey] ?? field.itemView.fieldPosition
+    if (view === 'itemView' && fieldPosition !== position) continue
+
+    const fieldModeFilter = fieldModes[fieldKey] ?? field[view].fieldMode
+    const fieldMode = resolveFieldMode(fieldModeFilter, serialized, view)
+    if (fieldMode === 'hidden') continue
+
+    const fieldValue = itemValue[fieldKey]
+    const autoFocus = focused === false // not great, but focuses the first field
+    focused = true
+
+    fieldDomByKey[fieldKey] = (
+      <field.views.Field
+        key={fieldKey}
+        autoFocus={autoFocus}
+        forceValidation={forceValidation && invalidFields.has(fieldKey)}
+        field={field.controller}
+        isRequired={testFilter(isRequireds[fieldKey] ?? false, serialized)}
+        onChange={
+          fieldMode === 'read' || onChange === undefined
+            ? undefined
+            : newFieldValue => {
+                onChange({
+                  ...itemValue,
+                  [field.controller.fieldKey]: newFieldValue,
+                })
+              }
+        }
+        value={fieldValue}
+        itemValue={itemValue}
+      />
+    )
+  }
+
+  const groupByFieldKey: Record<string, FieldGroupMeta> = {}
+  for (const group of groups) {
+    for (const { key: fieldKey } of group.fields) {
+      groupByFieldKey[fieldKey] = group
+    }
+  }
+
+  // WARNING: for no fields and position: sidebar, we show an empty state, that is OK
+  if (Object.keys(fieldDomByKey).length === 0 && position === 'form') {
+    return (
+      <EmptyState
+        icon={textCursorInputIcon}
+        title="No fields"
+        message="There are no fields to be shown."
+      />
+    )
+  }
+
+  return (
+    // the "inline" container allows fields to react to the width of their column
+    <VStack gap="xlarge" UNSAFE_style={{ containerType: 'inline-size' }}>
+      {[
+        ...(function* () {
+          const rendered: Record<string, true> = {}
+          for (const fieldKey in fields) {
+            if (fieldKey in rendered) continue
+
+            const group = groupByFieldKey[fieldKey]
+            if (group) {
+              const fields = [
+                ...(function* () {
+                  for (const { key: fieldKey } of group.fields) {
+                    if (fieldKey in rendered) continue
+                    if (fieldDomByKey[fieldKey]) {
+                      yield fieldDomByKey[fieldKey]
+                    }
+                    rendered[fieldKey] = true
+                  }
+                })(),
+              ]
+              if (fields.length === 0) continue
+              yield (
+                <FieldGroup key={group.label} label={group.label} description={group.description}>
+                  {fields}
+                </FieldGroup>
+              )
+              continue
+            }
+
+            yield fieldDomByKey[fieldKey] ?? null
+            rendered[fieldKey] = true
+          }
+        })(),
+      ]}
+    </VStack>
+  )
+}
+
+function FieldGroup({
+  description,
+  label,
+  children,
+}: {
+  label: string
+  description: string | null
+  children: ReactNode
+}) {
+  const labelId = useId()
+  const descriptionId = useSlotId([Boolean(description)])
+
+  return (
+    <details aria-labelledby={labelId} aria-describedby={descriptionId} open>
+      <HStack
+        gap="medium"
+        alignItems="center"
+        elementType="summary"
+        UNSAFE_className={css({
+          listStyle: 'none',
+          outline: 0,
+          '::-webkit-details-marker': { display: 'none' },
+        })}
+      >
+        <FieldButton
+          // @ts-expect-error — this works, it's just not exposed in the public types
+          elementType="div"
+          // the <summary/> (above) is the focusable element
+          excludeFromTabOrder
+          prominence="low"
+          height="element.small"
+          width="element.small"
+          minWidth="auto"
+          UNSAFE_className={css({
+            'details[open] &': {
+              transform: 'rotate(90deg)',
+            },
+          })}
+        >
+          <Icon src={chevronRightIcon} size="medium" />
+        </FieldButton>
+        <VStack
+          gap="regular"
+          UNSAFE_className={css({
+            cursor: 'default',
+            userSelect: 'none',
+          })}
+        >
+          <Text
+            color="neutralEmphasis"
+            size="large"
+            weight="medium"
+            id={labelId}
+            position="relative"
+          >
+            {label}
+          </Text>
+          {!!description && (
+            <Text id={descriptionId} size="regular" color="neutralSecondary">
+              {description}
+            </Text>
+          )}
+        </VStack>
+      </HStack>
+
+      {/*
+        Padding is applied here because `<details>` doesn't accept flex/grid
+        layout, prefer "gap" in most cases.
+      */}
+      <HStack gap="medium" paddingTop="medium">
+        <GroupIndicatorLine />
+        <VStack gap="xlarge" flex>
+          {children}
+        </VStack>
+      </HStack>
+    </details>
+  )
+}
+
+export function GroupIndicatorLine() {
+  return (
+    <HStack justifyContent="center" width="element.small">
+      <div
+        className={css({
+          height: '100%',
+          width: tokenSchema.size.alias.focusRing,
+          borderRadius: tokenSchema.size.alias.focusRing,
+          backgroundColor: tokenSchema.color.border.neutral,
+          flexShrink: 0,
+        })}
+      />
+    </HStack>
+  )
+}

package/src/admin-ui/utils/actionData.ts

@@ -1,36 +1,36 @@
-import type { ActionMeta, ListMeta } from '../../types'
-import { serializeValueToOperationItem } from './utils'
-
-export function getActionArguments(
-  list: ListMeta,
-  action: ActionMeta,
-  value: Record<string, unknown>
-): Record<string, unknown> {
-  const args: Record<string, unknown> = {}
-  for (const arg of action.graphql.arguments) {
-    const { source } = arg
-    if (!source) continue
-
-    const field = list.fields[source.itemField]
-    if (!field) continue
-
-    const serialized = serializeValueToOperationItem(
-      'update',
-      { [source.itemField]: field },
-      value,
-      {}
-    )
-    if (Object.prototype.hasOwnProperty.call(serialized, source.itemField)) {
-      args[arg.name] = serialized[source.itemField]
-    }
-  }
-  return args
-}
-
-export function getActionGraphQLArgs(action: ActionMeta): string {
-  return action.graphql.arguments.map(arg => `${arg.name}: $${arg.name}`).join(', ')
-}
-
-export function getActionGraphQLVariables(action: ActionMeta): string {
-  return action.graphql.arguments.map(arg => `$${arg.name}: ${arg.type}`).join(', ')
-}
+import type { ActionMeta, CollectionMeta } from '../../types'
+import { serializeValueToOperationItem } from './utils'
+
+export function getActionArguments(
+  list: CollectionMeta,
+  action: ActionMeta,
+  value: Record<string, unknown>
+): Record<string, unknown> {
+  const args: Record<string, unknown> = {}
+  for (const arg of action.graphql.arguments) {
+    const { source } = arg
+    if (!source) continue
+
+    const field = list.fields[source.itemField]
+    if (!field) continue
+
+    const serialized = serializeValueToOperationItem(
+      'update',
+      { [source.itemField]: field },
+      value,
+      {}
+    )
+    if (Object.prototype.hasOwnProperty.call(serialized, source.itemField)) {
+      args[arg.name] = serialized[source.itemField]
+    }
+  }
+  return args
+}
+
+export function getActionGraphQLArgs(action: ActionMeta): string {
+  return action.graphql.arguments.map(arg => `${arg.name}: $${arg.name}`).join(', ')
+}
+
+export function getActionGraphQLVariables(action: ActionMeta): string {
+  return action.graphql.arguments.map(arg => `$${arg.name}: ${arg.type}`).join(', ')
+}