Merge branch 'pre-waku' into dev

apps/decap/package.json

@@ -32,7 +32,7 @@
     "remark-rehype": "^10.1.0",
     "unified": "^10.1.2",
     "yaml": "^2.3.4",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@amazeelabs/decap-cms-backend-token-auth": "^1.1.7",

apps/decap/src/helpers/frame.tsx

@@ -1,4 +1,9 @@
-import { FrameQuery, Locale, OperationExecutor, Url } from '@custom/schema';
+import {
+  FrameQuery,
+  Locale,
+  OperationExecutorsProvider,
+  Url,
+} from '@custom/schema';
 import { NavigationItemSource } from '@custom/schema/source';
 import { Frame } from '@custom/ui/routes/Frame';
 import { PropsWithChildren } from 'react';
@@ -16,25 +21,29 @@ const menuItems = (amount: number) =>
 
 export function PreviewFrame({ children }: PropsWithChildren) {
   return (
-    <OperationExecutor
-      id={FrameQuery}
-      executor={{
-        mainNavigation: [
-          {
-            locale: Locale.En,
-            items: menuItems(4),
+    <OperationExecutorsProvider
+      executors={[
+        {
+          id: FrameQuery,
+          executor: {
+            mainNavigation: [
+              {
+                locale: Locale.En,
+                items: menuItems(4),
+              },
+            ],
+            footerNavigation: [
+              {
+                locale: Locale.En,
+                items: menuItems(4),
+              },
+            ],
+            stringTranslations: [],
           },
-        ],
-        footerNavigation: [
-          {
-            locale: Locale.En,
-            items: menuItems(4),
-          },
-        ],
-        stringTranslations: [],
-      }}
+        },
+      ]}
     >
       <Frame>{children}</Frame>
-    </OperationExecutor>
+    </OperationExecutorsProvider>
   );
 }

apps/decap/src/main.tsx

@@ -1,7 +1,7 @@
 import { TokenAuthBackend } from '@amazeelabs/decap-cms-backend-token-auth/backend';
 import {
   Locale,
-  OperationExecutor,
+  OperationExecutorsProvider,
   PreviewDecapPageQuery,
   ViewPageQuery,
 } from '@custom/schema';
@@ -95,9 +95,11 @@ CMS.registerPreviewTemplate(
     pageSchema,
     (data) => {
       return (
-        <OperationExecutor executor={{ page: data.preview }} id={ViewPageQuery}>
+        <OperationExecutorsProvider
+          executors={[{ executor: data.preview, id: ViewPageQuery }]}
+        >
           <Page />
-        </OperationExecutor>
+        </OperationExecutorsProvider>
       );
     },
     'previewDecapPage',

apps/preview/src/App.tsx

@@ -1,4 +1,4 @@
-import { OperationExecutor } from '@custom/schema';
+import { OperationExecutorsProvider } from '@custom/schema';
 import { Frame } from '@custom/ui/routes/Frame';
 import { Preview, usePreviewRefresh } from '@custom/ui/routes/Preview';
 import { useEffect } from 'react';
@@ -24,17 +24,17 @@ const updates$ = webSocket({
 function App() {
   const refresh = usePreviewRefresh();
   useEffect(() => {
-    const sub = updates$.subscribe(refresh);
+    const sub = updates$.subscribe(() => refresh({}));
     return sub.unsubscribe;
   }, [refresh]);
   return (
-    <OperationExecutor
-      executor={drupalExecutor(window.GRAPHQL_ENDPOINT, false)}
+    <OperationExecutorsProvider
+      executors={[{ executor: drupalExecutor(window.GRAPHQL_ENDPOINT, false) }]}
     >
       <Frame>
         <Preview />
       </Frame>
-    </OperationExecutor>
+    </OperationExecutorsProvider>
   );
 }
 

apps/website/package.json

@@ -35,8 +35,8 @@
     "@netlify/edge-functions": "^2.3.1",
     "@netlify/functions": "^2.6.0",
     "@testing-library/react": "^14.1.2",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/serve-static": "^1.15.5",
     "happy-dom": "^12.10.3",
     "start-server-and-test": "^2.0.3",

apps/website/src/layouts/index.tsx

@@ -1,5 +1,5 @@
 import { graphql, useStaticQuery } from '@amazeelabs/gatsby-plugin-operations';
-import { FrameQuery, OperationExecutor } from '@custom/schema';
+import { FrameQuery, OperationExecutorsProvider } from '@custom/schema';
 import { Frame } from '@custom/ui/routes/Frame';
 import React, { PropsWithChildren } from 'react';
 
@@ -12,10 +12,13 @@ export default function Layout({
 }>) {
   const data = useStaticQuery(graphql(FrameQuery));
   return (
-    <OperationExecutor executor={drupalExecutor(`/graphql`)}>
-      <OperationExecutor executor={data} id={FrameQuery}>
-        <Frame>{children}</Frame>
-      </OperationExecutor>
-    </OperationExecutor>
+    <OperationExecutorsProvider
+      executors={[
+        { executor: drupalExecutor(`/graphql`) },
+        { executor: data, id: FrameQuery },
+      ]}
+    >
+      <Frame>{children}</Frame>
+    </OperationExecutorsProvider>
   );
 }

apps/website/src/pages/404.tsx

@@ -1,5 +1,5 @@
 import { graphql } from '@amazeelabs/gatsby-plugin-operations';
-import { NotFoundPageQuery, OperationExecutor } from '@custom/schema';
+import { NotFoundPageQuery, OperationExecutorsProvider } from '@custom/schema';
 import { NotFoundPage } from '@custom/ui/routes/NotFoundPage';
 import { PageProps } from 'gatsby';
 import React from 'react';
@@ -8,8 +8,10 @@ export const query = graphql(NotFoundPageQuery);
 
 export default function Index({ data }: PageProps<typeof query>) {
   return (
-    <OperationExecutor executor={data} id={NotFoundPageQuery}>
+    <OperationExecutorsProvider
+      executors={[{ executor: data, id: NotFoundPageQuery }]}
+    >
       <NotFoundPage />
-    </OperationExecutor>
+    </OperationExecutorsProvider>
   );
 }

apps/website/src/templates/home.tsx

@@ -1,9 +1,11 @@
 import { graphql } from '@amazeelabs/gatsby-plugin-operations';
-import { HomePageQuery, OperationExecutor, useLocalized } from '@custom/schema';
+import { HomePageQuery, OperationExecutorsProvider } from '@custom/schema';
 import { HomePage } from '@custom/ui/routes/HomePage';
 import { HeadProps, PageProps } from 'gatsby';
 import React from 'react';
 
+import { useLocalized } from '../utils/locale';
+
 export const query = graphql(HomePageQuery);
 
 export function Head({ data }: HeadProps<typeof query>) {
@@ -37,8 +39,10 @@ export function Head({ data }: HeadProps<typeof query>) {
 
 export default function Index({ data }: PageProps<typeof query>) {
   return (
-    <OperationExecutor executor={data} id={HomePageQuery}>
+    <OperationExecutorsProvider
+      executors={[{ executor: data, id: HomePageQuery }]}
+    >
       <HomePage />
-    </OperationExecutor>
+    </OperationExecutorsProvider>
   );
 }

apps/website/src/templates/page.tsx

@@ -1,5 +1,9 @@
 import { graphql } from '@amazeelabs/gatsby-plugin-operations';
-import { OperationExecutor, useLocation, ViewPageQuery } from '@custom/schema';
+import {
+  OperationExecutorsProvider,
+  useLocation,
+  ViewPageQuery,
+} from '@custom/schema';
 import { Page } from '@custom/ui/routes/Page';
 import { HeadProps, PageProps } from 'gatsby';
 import React from 'react';
@@ -42,12 +46,16 @@ export default function PageTemplate({ data }: PageProps<typeof query>) {
   // path immediately returns this data.
   const [location] = useLocation();
   return (
-    <OperationExecutor
-      id={ViewPageQuery}
-      executor={data}
-      variables={{ pathname: location.pathname }}
+    <OperationExecutorsProvider
+      executors={[
+        {
+          id: ViewPageQuery,
+          executor: data,
+          variables: { pathname: location.pathname },
+        },
+      ]}
     >
       <Page />
-    </OperationExecutor>
+    </OperationExecutorsProvider>
   );
 }

apps/website/src/utils/locale.ts

@@ -0,0 +1,33 @@
+// TODO: straight copy of the same file in the UI package
+import { Locale, useLocation } from '@custom/schema';
+
+const locales = Object.values(Locale);
+export const defaultLocale: Locale = 'en';
+
+export function isLocale(input: any): input is Locale {
+  return locales.includes(input);
+}
+
+/**
+ * Extract the current locale from the path prefix.
+ */
+export function useLocale() {
+  const [{ pathname }] = useLocation();
+  const prefix = pathname.split('/')[1];
+  return isLocale(prefix) ? prefix : defaultLocale;
+}
+
+type Localized = { locale: Locale };
+
+/**
+ * Select the most appropriate of localization from a list of options.
+ */
+export function useLocalized<T extends Localized>(
+  options?: Array<T | undefined>,
+): T | undefined {
+  const locale = useLocale();
+  return (
+    options?.filter((option) => option?.locale === locale).pop() ||
+    options?.filter((option) => option?.locale === defaultLocale).pop()
+  );
+}

packages/schema/package.json

@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@amazeelabs/codegen-autoloader": "^1.1.3",
-    "@amazeelabs/codegen-operation-ids": "^0.1.34",
+    "@amazeelabs/codegen-operation-ids": "^0.1.43",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/schema-ast": "^4.0.0",
     "@graphql-codegen/typescript": "^4.0.1",
@@ -62,7 +62,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@amazeelabs/executors": "^2.0.2",
+    "@amazeelabs/executors": "^3.0.2",
     "@amazeelabs/gatsby-silverback-cloudinary": "^1.2.7",
     "@amazeelabs/gatsby-source-silverback": "^1.14.0",
     "@amazeelabs/scalars": "^1.6.13",

packages/schema/src/index.ts

@@ -1,48 +1,8 @@
-import {
-  OperationExecutor as UntypedOperationExecutor,
-  useExecutor as untypedUseExecutor,
-} from '@amazeelabs/executors';
-import { PropsWithChildren } from 'react';
-
-import type {
+export * from './generated/index.js';
+export * from '@amazeelabs/scalars';
+export * from '@amazeelabs/executors';
+export type {
   AnyOperationId,
   OperationResult,
   OperationVariables,
-} from './generated/index.js';
-
-export * from './generated/index.js';
-export * from '@amazeelabs/scalars';
-
-export * from './locale.js';
-
-type Executor<OperationId extends AnyOperationId> =
-  | OperationResult<OperationId>
-  | ((
-      id: OperationId,
-      variables: OperationVariables<OperationId>,
-    ) => OperationResult<OperationId> | Promise<OperationResult<OperationId>>);
-
-type VariablesMatcher<OperationId extends AnyOperationId> =
-  | Partial<OperationVariables<OperationId>>
-  | ((vars: OperationVariables<OperationId>) => boolean);
-
-export function OperationExecutor<OperationId extends AnyOperationId>(
-  props: PropsWithChildren<{
-    id?: OperationId;
-    variables?: VariablesMatcher<OperationVariables<OperationId>>;
-    executor: Executor<OperationId>;
-  }>,
-) {
-  return UntypedOperationExecutor(props);
-}
-
-export function useExecutor<OperationId extends AnyOperationId>(
-  id: OperationId,
-  variables?: OperationVariables<OperationId>,
-):
-  | OperationResult<OperationId>
-  | ((
-      variables?: OperationVariables<OperationId>,
-    ) => Promise<OperationResult<OperationId>>) {
-  return untypedUseExecutor(id, variables);
-}
+} from '@amazeelabs/codegen-operation-ids';

packages/schema/src/schema.graphql

@@ -65,7 +65,7 @@ directive @decapPageTranslations on FIELD_DEFINITION
 
 """
 Parse a given Url.
-For Drupal, this is implicitly implemented in the "grraphql_directives" module.
+For Drupal, this is implicitly implemented in the "graphql_directives" module.
 
 implementation(gatsby): ./page.js#route
 """
@@ -413,7 +413,6 @@ type DemoBlock {
 
 """
 The type provided by translations source (e.g. Decap or Drupal).
-Ingested by @mergeTranslatableStrings which handles priorities.
 """
 interface TranslatableString @default @value {
   """

packages/ui/.storybook/preview.tsx

@@ -3,7 +3,7 @@ import '../src/tailwind.css';
 import { LocationProvider } from '@custom/schema';
 import { Decorator } from '@storybook/react';
 import React from 'react';
-import { IntlProvider } from 'react-intl';
+import { IntlProvider } from '@amazeelabs/react-intl';
 import { SWRConfig, useSWRConfig } from 'swr';
 
 // Every story is wrapped in an IntlProvider by default.

packages/ui/package.json

@@ -39,6 +39,7 @@
     "report": "mkdir -p coverage/storybook && nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook"
   },
   "dependencies": {
+    "@amazeelabs/react-intl": "^1.1.1",
     "@amazeelabs/silverback-iframe": "^1.3.0",
     "@custom/schema": "workspace:*",
     "@headlessui/react": "^2.0.3",
@@ -50,10 +51,9 @@
     "hast-util-select": "^5.0.5",
     "query-string": "^9.0.0",
     "react-hook-form": "^7.49.2",
-    "react-intl": "^6.6.2",
     "swr": "^2.2.4",
     "unified": "^10.1.2",
-    "zod": "^3.22.4",
+    "zod": "^3.23.8",
     "zustand": "^4.4.7"
   },
   "peerDependencies": {

packages/ui/src/components/Atoms/List.css

@@ -1,5 +1,5 @@
 ul li {
-  @apply !font-medium !text-gray-900;
+  @apply text-base !font-medium !text-gray-900;
 }
 
 ul {
@@ -51,4 +51,4 @@ ul li.messages::marker {
   line-height: 1.25rem;
   height: 1.25rem;
   content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
-}
+}