@nixxie-cms/core 1.0.0 → 1.0.2

package/src/admin-ui/context.tsx

@@ -1,338 +1,338 @@
-import UploadLink from 'apollo-upload-client/UploadHttpLink.mjs'
-import NextHead from 'next/head'
-import { type ReactNode, createContext, useContext, useEffect, useMemo } from 'react'
-
-import { ClientSideOnlyDocumentElement, KeystarProvider } from '@keystar/ui/core'
-import { injectGlobal, tokenSchema } from '@keystar/ui/style'
-import { Toaster } from '@keystar/ui/toast'
-import { useRouter } from '@nixxie-cms/core/admin-ui/router'
-
-import { snapValueToClosest } from '../___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/PaginationControls'
-import type {
-  AdminConfig,
-  BaseListTypeInfo,
-  ConditionalFilter,
-  ConditionalFilterCase,
-  FieldViews,
-  ListMeta,
-} from '../types'
-import { type AdminMetaQuery, adminMetaQuery } from './admin-meta-graphql'
-import {
-  ApolloClient,
-  ApolloProvider,
-  type ErrorLike,
-  InMemoryCache,
-  gql,
-  useQuery,
-} from './apollo'
-import { getConditionalFilterFieldKeys, isActionAvailable } from './utils/filters'
-
-type NixxieContextType = {
-  adminConfig: AdminConfig | null
-  apiPath: string | null
-  error?: ErrorLike | null
-  fieldViews: FieldViews
-  lists: { [list: string]: ListMeta }
-}
-
-const NixxieContext = createContext<NixxieContextType>({
-  adminConfig: null,
-  apiPath: null,
-  lists: {},
-  fieldViews: {},
-})
-
-type NixxieProviderProps = {
-  adminConfig: AdminConfig
-  apiPath: string
-  fieldViews: FieldViews
-  children: ReactNode
-}
-
-const expectedExports = new Set(['Field', 'controller'])
-
-function InternalNixxieProvider({
-  adminConfig,
-  apiPath,
-  fieldViews,
-  children,
-}: NixxieProviderProps) {
-  const { push: navigate } = useRouter()
-  const keystarRouter = useMemo(() => ({ navigate }), [navigate])
-  const { data, loading, error } = useQuery<AdminMetaQuery>(adminMetaQuery, {
-    errorPolicy: 'all',
-  })
-  const listsData = data?.nixxie?.adminMeta?.lists
-  const lists = useMemo(() => {
-    if (!listsData) return
-    if (error) return
-
-    const lists: NixxieContextType['lists'] = {}
-
-    for (const listData of listsData) {
-      lists[listData.key] = {
-        ...listData,
-        pageSize: snapValueToClosest(listData.pageSize ?? 50),
-        fields: {},
-        groups: [],
-      }
-
-      for (const field of listData.fields) {
-        for (const exportName of expectedExports) {
-          if ((fieldViews[field.viewsIndex] as any)[exportName] === undefined) {
-            throw new Error(
-              `The view for the field at ${listData.key}.${field.key} is missing the ${exportName} export`
-            )
-          }
-        }
-
-        const views = { ...fieldViews[field.viewsIndex] }
-        const customViews: Record<string, any> = {}
-        if (field.customViewsIndex !== null) {
-          const customViewsSource: FieldViews[number] & Record<string, any> =
-            fieldViews[field.customViewsIndex]
-          const allowedExportsOnCustomViews = new Set(views.allowedExportsOnCustomViews)
-          for (const exportName in customViewsSource) {
-            if (allowedExportsOnCustomViews.has(exportName)) {
-              customViews[exportName] = customViewsSource[exportName]
-            } else if (expectedExports.has(exportName)) {
-              ;(views as any)[exportName] = customViewsSource[exportName]
-            }
-          }
-        }
-
-        lists[listData.key].fields[field.key] = {
-          ...field,
-          createView: {
-            fieldMode: field.createView?.fieldMode ?? null,
-            isRequired: field.createView?.isRequired ?? false,
-          },
-          itemView: {
-            fieldMode: field.itemView?.fieldMode ?? null,
-            fieldPosition: field.itemView?.fieldPosition ?? null,
-            isRequired: field.itemView?.isRequired ?? false,
-          },
-          listView: {
-            fieldMode: field.listView?.fieldMode ?? null,
-          },
-          views,
-          controller: views.controller({
-            listKey: listData.key,
-            fieldKey: field.key,
-            label: field.label,
-            description: field.description,
-            fieldMeta: field.fieldMeta,
-            customViews,
-          }),
-        }
-      }
-
-      for (const group of listData.groups) {
-        lists[listData.key].groups.push({
-          label: group.label,
-          description: group.description,
-          fields: group.fields.map(field => lists[listData.key].fields[field.key]),
-        })
-      }
-    }
-
-    return lists
-  }, [listsData, error, fieldViews])
-
-  useEffect(() => {
-    injectGlobal({
-      body: {
-        fontFamily:
-          "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-        WebkitFontSmoothing: 'antialiased',
-        MozOsxFontSmoothing: 'grayscale',
-      },
-      '*, ::before, ::after': {
-        borderWidth: 0,
-        borderStyle: 'solid',
-        borderColor: tokenSchema.color.border.neutral,
-        boxSizing: 'border-box',
-      },
-      // Force light background on all Keystar surface/canvas elements
-      // when they appear inside the main content (not inside our dark sidebar)
-      '[data-nixxie-content]': {
-        colorScheme: 'light',
-      },
-    })
-  }, [])
-
-  // TODO
-  if (loading) return null
-  //   if (!meta) return null
-  return (
-    <KeystarProvider router={keystarRouter} colorScheme="light">
-      <ClientSideOnlyDocumentElement bodyBackground="canvas" />
-      <NextHead>
-        <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-          rel="stylesheet"
-        />
-      </NextHead>
-
-      <NixxieContext.Provider
-        value={{
-          adminConfig,
-          apiPath,
-          fieldViews,
-          lists: lists ?? {},
-          error: error ?? null,
-        }}
-      >
-        {children}
-      </NixxieContext.Provider>
-      <Toaster />
-    </KeystarProvider>
-  )
-}
-
-export function NixxieProvider(props: NixxieProviderProps) {
-  const apolloClient = useMemo(
-    () =>
-      new ApolloClient({
-        cache: new InMemoryCache(),
-        link: new UploadLink({
-          uri: props.apiPath,
-          headers: { 'Apollo-Require-Preflight': 'true' },
-        }),
-      }),
-    [props.apiPath]
-  )
-
-  return (
-    <ApolloProvider client={apolloClient}>
-      <InternalNixxieProvider {...props} />
-    </ApolloProvider>
-  )
-}
-
-export function useNixxie() {
-  return useContext(NixxieContext)
-}
-
-export function useList(listKey: string) {
-  const { lists } = useNixxie()
-  const list = lists?.[listKey]
-  if (!list) throw new Error(`Unknown list ${listKey}`)
-  return list
-}
-
-export function useField(listKey: string, fieldKey: string) {
-  const list = useList(listKey)
-  const field = list.fields[fieldKey]
-  if (!field) throw new Error(`Unknown field ${listKey}.${fieldKey}`)
-  return field
-}
-
-// TODO useContext?
-export function useListItem(
-  listKey: string,
-  itemId: string | null
-): useQuery.Result<
-  {
-    item: Record<string, unknown> | null
-    nixxie: {
-      adminMeta: {
-        list: {
-          fields: {
-            key: string
-            itemView: {
-              fieldMode: ConditionalFilter<
-                'edit' | 'read' | 'hidden',
-                'read' | 'hidden',
-                BaseListTypeInfo
-              >
-              fieldPosition: 'form' | 'sidebar'
-              isRequired: ConditionalFilterCase<BaseListTypeInfo>
-            } | null
-          }[]
-          actions: {
-            key: string
-            itemView: {
-              actionMode: ConditionalFilter<
-                'enabled' | 'disabled' | 'hidden',
-                'disabled' | 'hidden',
-                BaseListTypeInfo
-              >
-            } | null
-          }[]
-        } | null
-      }
-    }
-  },
-  { id: string | null; listKey: string }
-> {
-  const list = useList(listKey)
-  const query = useMemo(() => {
-    const selectedFieldKeys = new Set<string>()
-
-    for (const field of Object.values(list.fields)) {
-      if (field.key === 'id') continue // always in the query
-      if (field.itemView.fieldMode === 'hidden') continue
-      selectedFieldKeys.add(field.key)
-    }
-
-    for (const action of list.actions) {
-      if (!isActionAvailable(action, action.itemView)) continue
-
-      for (const fieldKey of getConditionalFilterFieldKeys(action.itemView.actionMode)) {
-        selectedFieldKeys.add(fieldKey)
-      }
-
-      for (const arg of action.graphql.arguments) {
-        if (!arg.source) continue
-        selectedFieldKeys.add(arg.source.itemField)
-      }
-    }
-
-    const selectedFields = [...selectedFieldKeys]
-      .map(fieldKey => list.fields[fieldKey])
-      .filter(Boolean)
-      .map(field => field.controller.graphqlSelection)
-      .join('\n')
-
-    return gql`
-      query KsFetchItem ($listKey: String!, $id: ID!) {
-        nixxie {
-          adminMeta {
-            list(key: $listKey, itemId: $id) {
-              fields {
-                key
-                itemView {
-                  fieldMode
-                  fieldPosition
-                  isRequired
-                }
-              }
-              actions {
-                key
-                itemView {
-                  actionMode
-                }
-              }
-            }
-          }
-        }
-        item: ${list.graphql.names.itemQueryName}(where: { id: $id }) {
-          id
-          ${selectedFields}
-        }
-      }
-    `
-  }, [list])
-
-  return useQuery(query, {
-    errorPolicy: 'all',
-    skip: itemId === null,
-    variables: {
-      listKey,
-      id: itemId,
-    },
-  })
-}
+import UploadLink from 'apollo-upload-client/UploadHttpLink.mjs'
+import NextHead from 'next/head'
+import { type ReactNode, createContext, useContext, useEffect, useMemo } from 'react'
+
+import { ClientSideOnlyDocumentElement, KeystarProvider } from '@keystar/ui/core'
+import { injectGlobal, tokenSchema } from '@keystar/ui/style'
+import { Toaster } from '@keystar/ui/toast'
+import { useRouter } from '@nixxie-cms/core/admin-ui/router'
+
+import { snapValueToClosest } from '../internal-unstable/admin-ui/pages/ListPage/PaginationControls'
+import type {
+  AdminConfig,
+  BaseListTypeInfo,
+  ConditionalFilter,
+  ConditionalFilterCase,
+  FieldViews,
+  ListMeta,
+} from '../types'
+import { type AdminMetaQuery, adminMetaQuery } from './admin-meta-graphql'
+import {
+  ApolloClient,
+  ApolloProvider,
+  type ErrorLike,
+  InMemoryCache,
+  gql,
+  useQuery,
+} from './apollo'
+import { getConditionalFilterFieldKeys, isActionAvailable } from './utils/filters'
+
+type NixxieContextType = {
+  adminConfig: AdminConfig | null
+  apiPath: string | null
+  error?: ErrorLike | null
+  fieldViews: FieldViews
+  lists: { [list: string]: ListMeta }
+}
+
+const NixxieContext = createContext<NixxieContextType>({
+  adminConfig: null,
+  apiPath: null,
+  lists: {},
+  fieldViews: {},
+})
+
+type NixxieProviderProps = {
+  adminConfig: AdminConfig
+  apiPath: string
+  fieldViews: FieldViews
+  children: ReactNode
+}
+
+const expectedExports = new Set(['Field', 'controller'])
+
+function InternalNixxieProvider({
+  adminConfig,
+  apiPath,
+  fieldViews,
+  children,
+}: NixxieProviderProps) {
+  const { push: navigate } = useRouter()
+  const keystarRouter = useMemo(() => ({ navigate }), [navigate])
+  const { data, loading, error } = useQuery<AdminMetaQuery>(adminMetaQuery, {
+    errorPolicy: 'all',
+  })
+  const listsData = data?.nixxie?.adminMeta?.lists
+  const lists = useMemo(() => {
+    if (!listsData) return
+    if (error) return
+
+    const lists: NixxieContextType['lists'] = {}
+
+    for (const listData of listsData) {
+      lists[listData.key] = {
+        ...listData,
+        pageSize: snapValueToClosest(listData.pageSize ?? 50),
+        fields: {},
+        groups: [],
+      }
+
+      for (const field of listData.fields) {
+        for (const exportName of expectedExports) {
+          if ((fieldViews[field.viewsIndex] as any)[exportName] === undefined) {
+            throw new Error(
+              `The view for the field at ${listData.key}.${field.key} is missing the ${exportName} export`
+            )
+          }
+        }
+
+        const views = { ...fieldViews[field.viewsIndex] }
+        const customViews: Record<string, any> = {}
+        if (field.customViewsIndex !== null) {
+          const customViewsSource: FieldViews[number] & Record<string, any> =
+            fieldViews[field.customViewsIndex]
+          const allowedExportsOnCustomViews = new Set(views.allowedExportsOnCustomViews)
+          for (const exportName in customViewsSource) {
+            if (allowedExportsOnCustomViews.has(exportName)) {
+              customViews[exportName] = customViewsSource[exportName]
+            } else if (expectedExports.has(exportName)) {
+              ;(views as any)[exportName] = customViewsSource[exportName]
+            }
+          }
+        }
+
+        lists[listData.key].fields[field.key] = {
+          ...field,
+          createView: {
+            fieldMode: field.createView?.fieldMode ?? null,
+            isRequired: field.createView?.isRequired ?? false,
+          },
+          itemView: {
+            fieldMode: field.itemView?.fieldMode ?? null,
+            fieldPosition: field.itemView?.fieldPosition ?? null,
+            isRequired: field.itemView?.isRequired ?? false,
+          },
+          listView: {
+            fieldMode: field.listView?.fieldMode ?? null,
+          },
+          views,
+          controller: views.controller({
+            listKey: listData.key,
+            fieldKey: field.key,
+            label: field.label,
+            description: field.description,
+            fieldMeta: field.fieldMeta,
+            customViews,
+          }),
+        }
+      }
+
+      for (const group of listData.groups) {
+        lists[listData.key].groups.push({
+          label: group.label,
+          description: group.description,
+          fields: group.fields.map(field => lists[listData.key].fields[field.key]),
+        })
+      }
+    }
+
+    return lists
+  }, [listsData, error, fieldViews])
+
+  useEffect(() => {
+    injectGlobal({
+      body: {
+        fontFamily:
+          "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        WebkitFontSmoothing: 'antialiased',
+        MozOsxFontSmoothing: 'grayscale',
+      },
+      '*, ::before, ::after': {
+        borderWidth: 0,
+        borderStyle: 'solid',
+        borderColor: tokenSchema.color.border.neutral,
+        boxSizing: 'border-box',
+      },
+      // Force light background on all Keystar surface/canvas elements
+      // when they appear inside the main content (not inside our dark sidebar)
+      '[data-nixxie-content]': {
+        colorScheme: 'light',
+      },
+    })
+  }, [])
+
+  // TODO
+  if (loading) return null
+  //   if (!meta) return null
+  return (
+    <KeystarProvider router={keystarRouter} colorScheme="light">
+      <ClientSideOnlyDocumentElement bodyBackground="canvas" />
+      <NextHead>
+        <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+      </NextHead>
+
+      <NixxieContext.Provider
+        value={{
+          adminConfig,
+          apiPath,
+          fieldViews,
+          lists: lists ?? {},
+          error: error ?? null,
+        }}
+      >
+        {children}
+      </NixxieContext.Provider>
+      <Toaster />
+    </KeystarProvider>
+  )
+}
+
+export function NixxieProvider(props: NixxieProviderProps) {
+  const apolloClient = useMemo(
+    () =>
+      new ApolloClient({
+        cache: new InMemoryCache(),
+        link: new UploadLink({
+          uri: props.apiPath,
+          headers: { 'Apollo-Require-Preflight': 'true' },
+        }),
+      }),
+    [props.apiPath]
+  )
+
+  return (
+    <ApolloProvider client={apolloClient}>
+      <InternalNixxieProvider {...props} />
+    </ApolloProvider>
+  )
+}
+
+export function useNixxie() {
+  return useContext(NixxieContext)
+}
+
+export function useList(listKey: string) {
+  const { lists } = useNixxie()
+  const list = lists?.[listKey]
+  if (!list) throw new Error(`Unknown list ${listKey}`)
+  return list
+}
+
+export function useField(listKey: string, fieldKey: string) {
+  const list = useList(listKey)
+  const field = list.fields[fieldKey]
+  if (!field) throw new Error(`Unknown field ${listKey}.${fieldKey}`)
+  return field
+}
+
+// TODO useContext?
+export function useListItem(
+  listKey: string,
+  itemId: string | null
+): useQuery.Result<
+  {
+    item: Record<string, unknown> | null
+    nixxie: {
+      adminMeta: {
+        list: {
+          fields: {
+            key: string
+            itemView: {
+              fieldMode: ConditionalFilter<
+                'edit' | 'read' | 'hidden',
+                'read' | 'hidden',
+                BaseListTypeInfo
+              >
+              fieldPosition: 'form' | 'sidebar'
+              isRequired: ConditionalFilterCase<BaseListTypeInfo>
+            } | null
+          }[]
+          actions: {
+            key: string
+            itemView: {
+              actionMode: ConditionalFilter<
+                'enabled' | 'disabled' | 'hidden',
+                'disabled' | 'hidden',
+                BaseListTypeInfo
+              >
+            } | null
+          }[]
+        } | null
+      }
+    }
+  },
+  { id: string | null; listKey: string }
+> {
+  const list = useList(listKey)
+  const query = useMemo(() => {
+    const selectedFieldKeys = new Set<string>()
+
+    for (const field of Object.values(list.fields)) {
+      if (field.key === 'id') continue // always in the query
+      if (field.itemView.fieldMode === 'hidden') continue
+      selectedFieldKeys.add(field.key)
+    }
+
+    for (const action of list.actions) {
+      if (!isActionAvailable(action, action.itemView)) continue
+
+      for (const fieldKey of getConditionalFilterFieldKeys(action.itemView.actionMode)) {
+        selectedFieldKeys.add(fieldKey)
+      }
+
+      for (const arg of action.graphql.arguments) {
+        if (!arg.source) continue
+        selectedFieldKeys.add(arg.source.itemField)
+      }
+    }
+
+    const selectedFields = [...selectedFieldKeys]
+      .map(fieldKey => list.fields[fieldKey])
+      .filter(Boolean)
+      .map(field => field.controller.graphqlSelection)
+      .join('\n')
+
+    return gql`
+      query NxFetchItem ($listKey: String!, $id: ID!) {
+        nixxie {
+          adminMeta {
+            list(key: $listKey, itemId: $id) {
+              fields {
+                key
+                itemView {
+                  fieldMode
+                  fieldPosition
+                  isRequired
+                }
+              }
+              actions {
+                key
+                itemView {
+                  actionMode
+                }
+              }
+            }
+          }
+        }
+        item: ${list.graphql.names.itemQueryName}(where: { id: $id }) {
+          id
+          ${selectedFields}
+        }
+      }
+    `
+  }, [list])
+
+  return useQuery(query, {
+    errorPolicy: 'all',
+    skip: itemId === null,
+    variables: {
+      listKey,
+      id: itemId,
+    },
+  })
+}