@nixxie-cms/core 1.0.0

package/dist/context-3132c3ed.esm.js

@@ -0,0 +1,419 @@
+import UploadLink from 'apollo-upload-client/UploadHttpLink.mjs';
+import NextHead from 'next/head';
+import { useMemo, useContext, createContext, useEffect } from 'react';
+import { KeystarProvider, ClientSideOnlyDocumentElement } 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 { ActionButton } from '@keystar/ui/button';
+import { Icon } from '@keystar/ui/icon';
+import { chevronLeftIcon } from '@keystar/ui/icon/icons/chevronLeftIcon';
+import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon';
+import { undo2Icon } from '@keystar/ui/icon/icons/undo2Icon';
+import { HStack } from '@keystar/ui/layout';
+import { Picker } from '@keystar/ui/picker';
+import { Item } from '@keystar/ui/tag';
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
+import { Text } from '@keystar/ui/typography';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { a as adminMetaQuery } from './admin-meta-graphql-6f7f5331.esm.js';
+import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
+import { ApolloProvider, useQuery } from '@apollo/client/react';
+import { i as isActionAvailable, g as getConditionalFilterFieldKeys } from './filters-8c8616f9.esm.js';
+
+function PaginationControls(props) {
+  const {
+    currentPage,
+    total,
+    pageSize,
+    defaultPageSize
+  } = props;
+  const {
+    stats
+  } = getPaginationStats(props);
+  const nextPage = currentPage + 1;
+  const prevPage = currentPage - 1;
+  const lastPage = Math.max(Math.ceil(total / pageSize), 1);
+  const pageItems = useMemo(() => {
+    const result = [];
+    for (let page = 1; page <= lastPage; page++) {
+      result.push({
+        id: page,
+        label: String(page)
+      });
+    }
+    return result;
+  }, [lastPage]);
+  return /*#__PURE__*/jsxs(HStack, {
+    as: "nav",
+    role: "navigation",
+    "aria-label": "Pagination"
+    // alignItems="center"
+    ,
+    justifyContent: "space-between",
+    children: [/*#__PURE__*/jsxs(HStack, {
+      gap: "large",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsxs(HStack, {
+        isHidden: {
+          below: 'desktop'
+        },
+        gap: "regular",
+        alignItems: "center",
+        children: [/*#__PURE__*/jsxs(Text, {
+          id: "items-per-page",
+          children: [props.plural, " per page:"]
+        }), /*#__PURE__*/jsx(Picker, {
+          "aria-labelledby": "items-per-page",
+          items: PAGE_SIZES.map(n => ({
+            label: String(n),
+            id: n
+          })),
+          onSelectionChange: key => {
+            props.onChangePageSize(Number(key));
+          },
+          selectedKey: pageSize,
+          width: "scale.1000",
+          children: item => /*#__PURE__*/jsx(Item, {
+            children: item.label
+          })
+        }), defaultPageSize !== undefined && pageSize !== defaultPageSize ? /*#__PURE__*/jsxs(TooltipTrigger, {
+          children: [/*#__PURE__*/jsx(ActionButton, {
+            "aria-label": "reset",
+            onPress: () => props.onChangePageSize(defaultPageSize),
+            prominence: "low",
+            children: /*#__PURE__*/jsx(Icon, {
+              src: undo2Icon
+            })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            children: "Reset to defaults"
+          })]
+        }) : null]
+      }), /*#__PURE__*/jsx(Text, {
+        color: "neutralSecondary",
+        children: stats
+      })]
+    }), /*#__PURE__*/jsxs(HStack, {
+      gap: "large",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsxs(HStack, {
+        isHidden: {
+          below: 'desktop'
+        },
+        gap: "regular",
+        alignItems: "center",
+        children: [/*#__PURE__*/jsx(Picker
+        // prominence="low"
+        , {
+          "aria-label": `Page number, of ${lastPage} pages`,
+          items: pageItems,
+          onSelectionChange: page => {
+            props.onChangePage(Number(page));
+          },
+          selectedKey: currentPage,
+          width: "scale.1000",
+          children: item => /*#__PURE__*/jsx(Item, {
+            children: item.label
+          })
+        }), /*#__PURE__*/jsxs(Text, {
+          children: ["of ", lastPage, " pages"]
+        })]
+      }), /*#__PURE__*/jsxs(HStack, {
+        gap: "regular",
+        children: [/*#__PURE__*/jsx(ActionButton, {
+          "aria-label": "Previous page",
+          isDisabled: prevPage < 1,
+          onPress: () => props.onChangePage(prevPage)
+          // prominence="low"
+          ,
+          children: /*#__PURE__*/jsx(Icon, {
+            src: chevronLeftIcon
+          })
+        }), /*#__PURE__*/jsx(ActionButton, {
+          "aria-label": "Next page",
+          isDisabled: nextPage > lastPage,
+          onPress: () => props.onChangePage(nextPage)
+          // prominence="low"
+          ,
+          children: /*#__PURE__*/jsx(Icon, {
+            src: chevronRightIcon
+          })
+        }), props.extraActions]
+      })]
+    })]
+  });
+}
+function getPaginationStats({
+  singular,
+  plural,
+  pageSize,
+  currentPage,
+  total
+}) {
+  let stats = '';
+  if (total > pageSize) {
+    const start = pageSize * (currentPage - 1) + 1;
+    const end = Math.min(start + pageSize - 1, total);
+    stats = `${start} - ${end} of ${total} ${plural}`;
+  } else {
+    if (total > 1 && plural) {
+      stats = `${total} ${plural}`;
+    } else if (total === 1 && singular) {
+      stats = `${total} ${singular}`;
+    }
+  }
+  return {
+    stats
+  };
+}
+const PAGE_SIZES = [10, 25, 50, 100];
+function snapValueToClosest(input, range = PAGE_SIZES) {
+  return range.reduce((prev, curr) => Math.abs(curr - input) < Math.abs(prev - input) ? curr : prev);
+}
+
+const NixxieContext = /*#__PURE__*/createContext({
+  adminConfig: null,
+  apiPath: null,
+  lists: {},
+  fieldViews: {}
+});
+const expectedExports = new Set(['Field', 'controller']);
+function InternalNixxieProvider({
+  adminConfig,
+  apiPath,
+  fieldViews,
+  children
+}) {
+  var _data$nixxie;
+  const {
+    push: navigate
+  } = useRouter();
+  const keystarRouter = useMemo(() => ({
+    navigate
+  }), [navigate]);
+  const {
+    data,
+    loading,
+    error
+  } = useQuery(adminMetaQuery, {
+    errorPolicy: 'all'
+  });
+  const listsData = data === null || data === void 0 || (_data$nixxie = data.nixxie) === null || _data$nixxie === void 0 || (_data$nixxie = _data$nixxie.adminMeta) === null || _data$nixxie === void 0 ? void 0 : _data$nixxie.lists;
+  const lists = useMemo(() => {
+    if (!listsData) return;
+    if (error) return;
+    const lists = {};
+    for (const listData of listsData) {
+      var _listData$pageSize;
+      lists[listData.key] = {
+        ...listData,
+        pageSize: snapValueToClosest((_listData$pageSize = listData.pageSize) !== null && _listData$pageSize !== void 0 ? _listData$pageSize : 50),
+        fields: {},
+        groups: []
+      };
+      for (const field of listData.fields) {
+        var _field$createView$fie, _field$createView, _field$createView$isR, _field$createView2, _field$itemView$field, _field$itemView, _field$itemView$field2, _field$itemView2, _field$itemView$isReq, _field$itemView3, _field$listView$field, _field$listView;
+        for (const exportName of expectedExports) {
+          if (fieldViews[field.viewsIndex][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 = {};
+        if (field.customViewsIndex !== null) {
+          const customViewsSource = 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[exportName] = customViewsSource[exportName];
+            }
+          }
+        }
+        lists[listData.key].fields[field.key] = {
+          ...field,
+          createView: {
+            fieldMode: (_field$createView$fie = (_field$createView = field.createView) === null || _field$createView === void 0 ? void 0 : _field$createView.fieldMode) !== null && _field$createView$fie !== void 0 ? _field$createView$fie : null,
+            isRequired: (_field$createView$isR = (_field$createView2 = field.createView) === null || _field$createView2 === void 0 ? void 0 : _field$createView2.isRequired) !== null && _field$createView$isR !== void 0 ? _field$createView$isR : false
+          },
+          itemView: {
+            fieldMode: (_field$itemView$field = (_field$itemView = field.itemView) === null || _field$itemView === void 0 ? void 0 : _field$itemView.fieldMode) !== null && _field$itemView$field !== void 0 ? _field$itemView$field : null,
+            fieldPosition: (_field$itemView$field2 = (_field$itemView2 = field.itemView) === null || _field$itemView2 === void 0 ? void 0 : _field$itemView2.fieldPosition) !== null && _field$itemView$field2 !== void 0 ? _field$itemView$field2 : null,
+            isRequired: (_field$itemView$isReq = (_field$itemView3 = field.itemView) === null || _field$itemView3 === void 0 ? void 0 : _field$itemView3.isRequired) !== null && _field$itemView$isReq !== void 0 ? _field$itemView$isReq : false
+          },
+          listView: {
+            fieldMode: (_field$listView$field = (_field$listView = field.listView) === null || _field$listView === void 0 ? void 0 : _field$listView.fieldMode) !== null && _field$listView$field !== void 0 ? _field$listView$field : 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 /*#__PURE__*/jsxs(KeystarProvider, {
+    router: keystarRouter,
+    colorScheme: "light",
+    children: [/*#__PURE__*/jsx(ClientSideOnlyDocumentElement, {
+      bodyBackground: "canvas"
+    }), /*#__PURE__*/jsxs(NextHead, {
+      children: [/*#__PURE__*/jsx("meta", {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1.0"
+      }, "viewport"), /*#__PURE__*/jsx("link", {
+        rel: "icon",
+        type: "image/svg+xml",
+        href: "/favicon.svg"
+      }), /*#__PURE__*/jsx("link", {
+        href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+        rel: "stylesheet"
+      })]
+    }), /*#__PURE__*/jsx(NixxieContext.Provider, {
+      value: {
+        adminConfig,
+        apiPath,
+        fieldViews,
+        lists: lists !== null && lists !== void 0 ? lists : {},
+        error: error !== null && error !== void 0 ? error : null
+      },
+      children: children
+    }), /*#__PURE__*/jsx(Toaster, {})]
+  });
+}
+function NixxieProvider(props) {
+  const apolloClient = useMemo(() => new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new UploadLink({
+      uri: props.apiPath,
+      headers: {
+        'Apollo-Require-Preflight': 'true'
+      }
+    })
+  }), [props.apiPath]);
+  return /*#__PURE__*/jsx(ApolloProvider, {
+    client: apolloClient,
+    children: /*#__PURE__*/jsx(InternalNixxieProvider, {
+      ...props
+    })
+  });
+}
+function useNixxie() {
+  return useContext(NixxieContext);
+}
+function useList(listKey) {
+  const {
+    lists
+  } = useNixxie();
+  const list = lists === null || lists === void 0 ? void 0 : lists[listKey];
+  if (!list) throw new Error(`Unknown list ${listKey}`);
+  return list;
+}
+function useField(listKey, fieldKey) {
+  const list = useList(listKey);
+  const field = list.fields[fieldKey];
+  if (!field) throw new Error(`Unknown field ${listKey}.${fieldKey}`);
+  return field;
+}
+
+// TODO useContext?
+function useListItem(listKey, itemId) {
+  const list = useList(listKey);
+  const query = useMemo(() => {
+    const selectedFieldKeys = new Set();
+    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
+    }
+  });
+}
+
+export { NixxieProvider as N, PaginationControls as P, useList as a, useListItem as b, useField as c, snapValueToClosest as s, useNixxie as u };