@nixxie-cms/core 1.0.0 → 1.0.2

package/src/index.ts

@@ -1,5 +1,9 @@
 export { list, config, group, action } from './schema'
 export type { ListConfig, BaseFields } from './types'
+// Re-export the runtime-service & context types (NixxieContext, NixxieStorageService,
+// NixxieSearchService, NixxieEmail*, NixxieCacheService, etc.) so the first-party service packages
+// (@nixxie-cms/storage, /search, /email, …) can import them from the package root.
+export type * from './types/context'
 export {
   defineList,
   defineConfig,

package/src/{___internal-do-not-use-will-break-in-patch → internal-unstable}/admin-ui/id-field-view.tsx

@@ -1,167 +1,167 @@
-import { useCallback, useState } from 'react'
-import { useListFormatter } from '@react-aria/i18n'
-import copyToClipboard from 'clipboard-copy'
-
-import { ActionButton } from '@keystar/ui/button'
-import { Icon } from '@keystar/ui/icon'
-import { clipboardIcon } from '@keystar/ui/icon/icons/clipboardIcon'
-import { Grid } from '@keystar/ui/layout'
-import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
-import { TextField } from '@keystar/ui/text-field'
-
-import type { FieldController, FieldControllerConfig, FieldProps, IdFieldConfig } from '../../types'
-import type { InferValueFromInputType } from '@graphql-ts/schema'
-import type { filters } from '../../fields/filters'
-import { entriesTyped } from '../../lib/core/utils'
-
-const COPY_TOOLTIP_CONTENT = {
-  neutral: 'Copy ID',
-  positive: 'Copied to clipboard',
-  critical: 'Unable to copy',
-}
-type TooltipState = { isOpen?: boolean; tone: keyof typeof COPY_TOOLTIP_CONTENT }
-
-export function Field({ value }: FieldProps<typeof controller>) {
-  const [tooltipState, setTooltipState] = useState<TooltipState>({ tone: 'neutral' })
-
-  const onCopy = useCallback(async () => {
-    try {
-      if (value) await copyToClipboard(value)
-      setTooltipState({ isOpen: true, tone: 'positive' })
-    } catch (err: any) {
-      setTooltipState({ isOpen: true, tone: 'critical' })
-    }
-
-    // close, then reset the tooltip state after a delay
-    setTimeout(() => {
-      setTooltipState(state => ({ ...state, isOpen: false }))
-    }, 2000)
-    setTimeout(() => {
-      setTooltipState({ isOpen: undefined, tone: 'neutral' })
-    }, 2300)
-  }, [value])
-
-  return (
-    <Grid gap="regular" columns="1fr auto" alignItems="end">
-      <TextField
-        label="Item ID"
-        value={value ?? ''}
-        isReadOnly
-        onFocus={({ target }) => {
-          if (target instanceof HTMLInputElement) target.select()
-        }}
-      />
-      <TooltipTrigger isOpen={tooltipState.isOpen} placement="top end">
-        <ActionButton aria-label="copy id" onPress={onCopy}>
-          <Icon src={clipboardIcon} />
-        </ActionButton>
-        <Tooltip tone={tooltipState.tone}>{COPY_TOOLTIP_CONTENT[tooltipState.tone]}</Tooltip>
-      </TooltipTrigger>
-    </Grid>
-  )
-}
-
-export function controller(
-  config: FieldControllerConfig<IdFieldConfig>
-): FieldController<
-  string | null,
-  string | string[],
-  InferValueFromInputType<(typeof filters)['mysql']['String']['required']>
-> {
-  return {
-    fieldKey: config.fieldKey,
-    label: config.label,
-    description: config.description,
-    defaultValue: null,
-    deserialize: data => data[config.fieldKey],
-    serialize: value => ({ [config.fieldKey]: value }),
-    graphqlSelection: config.fieldKey,
-    filter: {
-      Filter(props) {
-        const { autoFocus, context, onChange, type, typeLabel, value, ...otherProps } = props
-        const labelProps =
-          context === 'add' ? { label: config.label, description: typeLabel } : { label: typeLabel }
-        const [inputValue, setInputValue] = useState(() =>
-          Array.isArray(value) ? value.join(', ') : value
-        )
-        const [lastSeenValue, setLastSeenValue] = useState(value)
-        if (value !== lastSeenValue && Array.isArray(value)) {
-          setInputValue(value.join(', '))
-          setLastSeenValue(value)
-        }
-
-        return (
-          <TextField
-            {...otherProps}
-            {...labelProps}
-            autoFocus={autoFocus}
-            onChange={newVal => {
-              if (Array.isArray(value)) {
-                setInputValue(newVal)
-              } else {
-                onChange(newVal)
-              }
-            }}
-            onBlur={() => {
-              if (Array.isArray(value)) {
-                onChange(inputValue.split(',').map(val => val.trim()))
-              }
-            }}
-            value={Array.isArray(value) ? inputValue : value}
-          />
-        )
-      },
-
-      Label({ label, value, type }) {
-        const listFormatter = useListFormatter({
-          style: 'short',
-          type: 'disjunction',
-        })
-
-        if (['in', 'not_in'].includes(type)) {
-          return `${label.toLowerCase()} (${listFormatter.format(value)})`
-        }
-        return `${label.toLowerCase()} ${value}`
-      },
-      graphql: ({ type, value }) => {
-        const valueWithoutWhitespace = Array.isArray(value)
-          ? value.map(val => val.replace(/\s/g, ''))
-          : value.replace(/\s/g, '')
-        if (type === 'not')
-          return { [config.fieldKey]: { not: { equals: valueWithoutWhitespace } } }
-        const key = type === 'is' ? 'equals' : type === 'not_in' ? 'notIn' : type
-
-        return {
-          [config.fieldKey]: {
-            [key]: valueWithoutWhitespace,
-          },
-        }
-      },
-      parseGraphQL: value => {
-        return entriesTyped(value).flatMap(([type, value]) => {
-          if (!value) return []
-          if (type === 'equals') return { type: 'is', value }
-          if (type === 'notIn') return { type: 'not_in', value }
-          if (type === 'in') return { type: 'in', value }
-          if (type === 'not' && value?.equals) {
-            return { type: 'not', value: value?.equals }
-          }
-          if (type === 'gt' || type === 'gte' || type === 'lt' || type === 'lte') {
-            return { type, value }
-          }
-          return []
-        })
-      },
-      types: {
-        is: { label: 'Is exactly', initialValue: '' },
-        not: { label: 'Is not exactly', initialValue: '' },
-        gt: { label: 'Is greater than', initialValue: '' },
-        lt: { label: 'Is less than', initialValue: '' },
-        gte: { label: 'Is greater than or equal to', initialValue: '' },
-        lte: { label: 'Is less than or equal to', initialValue: '' },
-        in: { label: 'Is one of', initialValue: [] },
-        not_in: { label: 'Is not one of', initialValue: [] },
-      },
-    },
-  }
-}
+import { useCallback, useState } from 'react'
+import { useListFormatter } from '@react-aria/i18n'
+import copyToClipboard from 'clipboard-copy'
+
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { clipboardIcon } from '@keystar/ui/icon/icons/clipboardIcon'
+import { Grid } from '@keystar/ui/layout'
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
+import { TextField } from '@keystar/ui/text-field'
+
+import type { FieldController, FieldControllerConfig, FieldProps, IdFieldConfig } from '../../types'
+import type { InferValueFromInputType } from '@graphql-ts/schema'
+import type { filters } from '../../fields/filters'
+import { entriesTyped } from '../../lib/core/utils'
+
+const COPY_TOOLTIP_CONTENT = {
+  neutral: 'Copy ID',
+  positive: 'Copied to clipboard',
+  critical: 'Unable to copy',
+}
+type TooltipState = { isOpen?: boolean; tone: keyof typeof COPY_TOOLTIP_CONTENT }
+
+export function Field({ value }: FieldProps<typeof controller>) {
+  const [tooltipState, setTooltipState] = useState<TooltipState>({ tone: 'neutral' })
+
+  const onCopy = useCallback(async () => {
+    try {
+      if (value) await copyToClipboard(value)
+      setTooltipState({ isOpen: true, tone: 'positive' })
+    } catch (err: any) {
+      setTooltipState({ isOpen: true, tone: 'critical' })
+    }
+
+    // close, then reset the tooltip state after a delay
+    setTimeout(() => {
+      setTooltipState(state => ({ ...state, isOpen: false }))
+    }, 2000)
+    setTimeout(() => {
+      setTooltipState({ isOpen: undefined, tone: 'neutral' })
+    }, 2300)
+  }, [value])
+
+  return (
+    <Grid gap="regular" columns="1fr auto" alignItems="end">
+      <TextField
+        label="Item ID"
+        value={value ?? ''}
+        isReadOnly
+        onFocus={({ target }) => {
+          if (target instanceof HTMLInputElement) target.select()
+        }}
+      />
+      <TooltipTrigger isOpen={tooltipState.isOpen} placement="top end">
+        <ActionButton aria-label="copy id" onPress={onCopy}>
+          <Icon src={clipboardIcon} />
+        </ActionButton>
+        <Tooltip tone={tooltipState.tone}>{COPY_TOOLTIP_CONTENT[tooltipState.tone]}</Tooltip>
+      </TooltipTrigger>
+    </Grid>
+  )
+}
+
+export function controller(
+  config: FieldControllerConfig<IdFieldConfig>
+): FieldController<
+  string | null,
+  string | string[],
+  InferValueFromInputType<(typeof filters)['mysql']['String']['required']>
+> {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: null,
+    deserialize: data => data[config.fieldKey],
+    serialize: value => ({ [config.fieldKey]: value }),
+    graphqlSelection: config.fieldKey,
+    filter: {
+      Filter(props) {
+        const { autoFocus, context, onChange, type, typeLabel, value, ...otherProps } = props
+        const labelProps =
+          context === 'add' ? { label: config.label, description: typeLabel } : { label: typeLabel }
+        const [inputValue, setInputValue] = useState(() =>
+          Array.isArray(value) ? value.join(', ') : value
+        )
+        const [lastSeenValue, setLastSeenValue] = useState(value)
+        if (value !== lastSeenValue && Array.isArray(value)) {
+          setInputValue(value.join(', '))
+          setLastSeenValue(value)
+        }
+
+        return (
+          <TextField
+            {...otherProps}
+            {...labelProps}
+            autoFocus={autoFocus}
+            onChange={newVal => {
+              if (Array.isArray(value)) {
+                setInputValue(newVal)
+              } else {
+                onChange(newVal)
+              }
+            }}
+            onBlur={() => {
+              if (Array.isArray(value)) {
+                onChange(inputValue.split(',').map(val => val.trim()))
+              }
+            }}
+            value={Array.isArray(value) ? inputValue : value}
+          />
+        )
+      },
+
+      Label({ label, value, type }) {
+        const listFormatter = useListFormatter({
+          style: 'short',
+          type: 'disjunction',
+        })
+
+        if (['in', 'not_in'].includes(type)) {
+          return `${label.toLowerCase()} (${listFormatter.format(value)})`
+        }
+        return `${label.toLowerCase()} ${value}`
+      },
+      graphql: ({ type, value }) => {
+        const valueWithoutWhitespace = Array.isArray(value)
+          ? value.map(val => val.replace(/\s/g, ''))
+          : value.replace(/\s/g, '')
+        if (type === 'not')
+          return { [config.fieldKey]: { not: { equals: valueWithoutWhitespace } } }
+        const key = type === 'is' ? 'equals' : type === 'not_in' ? 'notIn' : type
+
+        return {
+          [config.fieldKey]: {
+            [key]: valueWithoutWhitespace,
+          },
+        }
+      },
+      parseGraphQL: value => {
+        return entriesTyped(value).flatMap(([type, value]) => {
+          if (!value) return []
+          if (type === 'equals') return { type: 'is', value }
+          if (type === 'notIn') return { type: 'not_in', value }
+          if (type === 'in') return { type: 'in', value }
+          if (type === 'not' && value?.equals) {
+            return { type: 'not', value: value?.equals }
+          }
+          if (type === 'gt' || type === 'gte' || type === 'lt' || type === 'lte') {
+            return { type, value }
+          }
+          return []
+        })
+      },
+      types: {
+        is: { label: 'Is exactly', initialValue: '' },
+        not: { label: 'Is not exactly', initialValue: '' },
+        gt: { label: 'Is greater than', initialValue: '' },
+        lt: { label: 'Is less than', initialValue: '' },
+        gte: { label: 'Is greater than or equal to', initialValue: '' },
+        lte: { label: 'Is less than or equal to', initialValue: '' },
+        in: { label: 'Is one of', initialValue: [] },
+        not_in: { label: 'Is not one of', initialValue: [] },
+      },
+    },
+  }
+}

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

@@ -1,22 +1,22 @@
-import type { AppProps } from 'next/app'
-import type { AdminConfig, FieldViews } from '../../../../types'
-import { ErrorBoundary } from '../../../../admin-ui/components'
-import { NixxieProvider } from '../../../../admin-ui/context'
-
-type AppConfig = {
-  adminConfig: AdminConfig
-  fieldViews: FieldViews
-  apiPath: string
-}
-
-export const getApp =
-  (props: AppConfig) =>
-  ({ Component, pageProps }: AppProps) => {
-    return (
-      <NixxieProvider {...props}>
-        <ErrorBoundary>
-          <Component {...pageProps} />
-        </ErrorBoundary>
-      </NixxieProvider>
-    )
-  }
+import type { AppProps } from 'next/app'
+import type { AdminConfig, FieldViews } from '../../../../types'
+import { ErrorBoundary } from '../../../../admin-ui/components'
+import { NixxieProvider } from '../../../../admin-ui/context'
+
+type AppConfig = {
+  adminConfig: AdminConfig
+  fieldViews: FieldViews
+  apiPath: string
+}
+
+export const getApp =
+  (props: AppConfig) =>
+  ({ Component, pageProps }: AppProps) => {
+    return (
+      <NixxieProvider {...props}>
+        <ErrorBoundary>
+          <Component {...pageProps} />
+        </ErrorBoundary>
+      </NixxieProvider>
+    )
+  }

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

@@ -1,71 +1,71 @@
-import { useRouter } from 'next/router'
-
-import { Button } from '@keystar/ui/button'
-import { VStack } from '@keystar/ui/layout'
-
-import { useList } from '../../../../admin-ui'
-import { GraphQLErrorNotice } from '../../../../admin-ui/components'
-import { PageContainer } from '../../../../admin-ui/components/PageContainer'
-import { Fields } from '../../../../admin-ui/utils'
-import { useCreateItem } from '../../../../admin-ui/utils/useCreateItem'
-import { BaseToolbar, ColumnLayout, ItemPageHeader } from '../ItemPage/common'
-
-export const getCreateItemPage = (props: Parameters<typeof CreateItemPage>[0]) => () => (
-  <CreateItemPage {...props} />
-)
-
-function CreateItemPage({ listKey }: { listKey: string }) {
-  const list = useList(listKey)
-  const createItem = useCreateItem(list)
-  const router = useRouter()
-
-  return (
-    <PageContainer
-      title={`Create ${list.singular}`}
-      header={
-        <ItemPageHeader
-          list={list}
-          actions={[]}
-          value={null}
-          label="Create"
-          title={`Create ${list.singular}`}
-          item={null}
-          initialValue={null}
-          onAction={null}
-        />
-      }
-    >
-      <ColumnLayout>
-        <form
-          onSubmit={async e => {
-            if (e.target !== e.currentTarget) return
-            e.preventDefault()
-
-            const item = await createItem.create()
-            if (!item) return
-
-            router.push(`/${list.path}/${item.id}`)
-          }}
-          style={{ display: 'contents' }}
-        >
-          {/*
-            Workaround for react-aria "bug" where pressing enter in a form field
-            moves focus to the submit button.
-            See: https://github.com/adobe/react-spectrum/issues/5940
-          */}
-          <button type="submit" style={{ display: 'none' }} />
-          <VStack gap="large" gridArea="main" marginTop="xlarge" minWidth={0}>
-            <GraphQLErrorNotice errors={[createItem.error]} />
-            <Fields {...createItem.props} />
-          </VStack>
-
-          <BaseToolbar>
-            <Button isPending={createItem.state === 'loading'} prominence="high" type="submit">
-              Create
-            </Button>
-          </BaseToolbar>
-        </form>
-      </ColumnLayout>
-    </PageContainer>
-  )
-}
+import { useRouter } from 'next/router'
+
+import { Button } from '@keystar/ui/button'
+import { VStack } from '@keystar/ui/layout'
+
+import { useList } from '../../../../admin-ui'
+import { GraphQLErrorNotice } from '../../../../admin-ui/components'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
+import { Fields } from '../../../../admin-ui/utils'
+import { useCreateItem } from '../../../../admin-ui/utils/useCreateItem'
+import { BaseToolbar, ColumnLayout, ItemPageHeader } from '../ItemPage/common'
+
+export const getCreateItemPage = (props: Parameters<typeof CreateItemPage>[0]) => () => (
+  <CreateItemPage {...props} />
+)
+
+function CreateItemPage({ listKey }: { listKey: string }) {
+  const list = useList(listKey)
+  const createItem = useCreateItem(list)
+  const router = useRouter()
+
+  return (
+    <PageContainer
+      title={`Create ${list.singular}`}
+      header={
+        <ItemPageHeader
+          list={list}
+          actions={[]}
+          value={null}
+          label="Create"
+          title={`Create ${list.singular}`}
+          item={null}
+          initialValue={null}
+          onAction={null}
+        />
+      }
+    >
+      <ColumnLayout>
+        <form
+          onSubmit={async e => {
+            if (e.target !== e.currentTarget) return
+            e.preventDefault()
+
+            const item = await createItem.create()
+            if (!item) return
+
+            router.push(`/${list.path}/${item.id}`)
+          }}
+          style={{ display: 'contents' }}
+        >
+          {/*
+            Workaround for react-aria "bug" where pressing enter in a form field
+            moves focus to the submit button.
+            See: https://github.com/adobe/react-spectrum/issues/5940
+          */}
+          <button type="submit" style={{ display: 'none' }} />
+          <VStack gap="large" gridArea="main" marginTop="xlarge" minWidth={0}>
+            <GraphQLErrorNotice errors={[createItem.error]} />
+            <Fields {...createItem.props} />
+          </VStack>
+
+          <BaseToolbar>
+            <Button isPending={createItem.state === 'loading'} prominence="high" type="submit">
+              Create
+            </Button>
+          </BaseToolbar>
+        </form>
+      </ColumnLayout>
+    </PageContainer>
+  )
+}