@hygraph/app-sdk 0.0.2

package/src/formSidebar.ts

@@ -0,0 +1,33 @@
+import type { ExtensionPropsBase, ConfigValue } from './base';
+import type { Form } from './type-helpers/form';
+import type { Locale, FormLocale } from './type-helpers/locale';
+import type { Model } from './type-helpers/model';
+import type { Stage } from './type-helpers/stage';
+import type { User } from './type-helpers/user';
+import type { AppInstallation } from './type-helpers/appInstallation';
+
+export interface FormSidebarExtensionProps extends ExtensionPropsBase {
+  // TODO:Add support for these
+  // isExpanded: boolean;
+  // expand: (expand: boolean | ((isExpanded: boolean) => boolean)) => unknown;
+
+  extension: {
+    config: ConfigValue;
+    sidebarConfig: ConfigValue;
+    id: string;
+  };
+
+  form: Form;
+  model: Model;
+  allLocales: Locale[];
+  selectedLocales: FormLocale[];
+  stages: Stage[];
+  entry: {
+    id: string | null;
+    createdBy?: User;
+    updatedBy?: User;
+    createdAt: Date | null;
+    updatedAt: Date | null;
+  } | null;
+  installation: AppInstallation;
+}

package/src/index.ts

@@ -0,0 +1,177 @@
+import zoid from '@graphcms/zoid/lib/zoid.js';
+
+import { ExtensionDialogProps, reservedExtensionProps } from './base';
+export { ExtensionDialogProps, reservedExtensionProps } from './base';
+import type { FieldExtensionProps } from './field';
+import type { FormSidebarExtensionProps } from './formSidebar';
+export * from './base';
+export type {
+  FormState,
+  FieldState,
+  FieldSubscription,
+  Subscriber,
+  FormSubscription,
+  Form,
+} from './type-helpers/form';
+
+export type {
+  VisibilityTypes,
+  SetFieldsVisibility,
+  VisibilityMap,
+} from './type-helpers/visibility';
+
+export type { FieldExtensionProps } from './field';
+export type { AppProps } from './app';
+export type { FormSidebarExtensionProps } from './formSidebar';
+export { FieldExtensionFeature, FieldExtensionType } from './field';
+export * from './type-helpers/appInstallation';
+
+export type ExtensionProps =
+  | FieldExtensionProps
+  | FormSidebarExtensionProps
+  | ExtensionDialogProps;
+
+type Xprops = {
+  onProps: (props: Record<string, any>) => void;
+  onConnected: (uid: string) => Promise<unknown>;
+  resize: (size: {
+    height: 'auto' | 'full' | number;
+    width: 'auto' | '100%' | number;
+  }) => unknown;
+} & ExtensionProps;
+
+declare global {
+  interface Window {
+    xprops: Xprops;
+  }
+}
+
+function handleProps(props: any) {
+  const transformedProps: any = {};
+  Object.keys(props).forEach((key: string) => {
+    // do not pass down zoid props to the extension
+    if (reservedExtensionProps.includes(key)) return;
+
+    // transform props that were prefixed with '_' to bypass zoid reverved props
+    if (
+      key.startsWith('_') &&
+      reservedExtensionProps.includes(key.replace(/^_/g, ''))
+    ) {
+      transformedProps[key.replace(/^_/g, '')] = props[key];
+    } else {
+      transformedProps[key] = props[key];
+    }
+  });
+  return transformedProps;
+}
+
+export function init({
+  debug,
+  onProps = () => undefined,
+  uid: givenUid,
+}: {
+  onProps: (props: any) => unknown;
+  debug?: boolean;
+  uid?: string;
+}) {
+  return new Promise<{ status: 'ok'; props: any } | { status: 'validation' }>(
+    (resolve, reject) => {
+      if (
+        typeof window === 'undefined' ||
+        typeof window.postMessage === 'undefined'
+      ) {
+        return reject({
+          error: 'unsupported_env',
+          message:
+            'Unsupported environment: Not in a browser supporting PostMessage',
+        });
+      }
+
+      const uid =
+        givenUid ||
+        (typeof URLSearchParams !== 'undefined' &&
+          new URLSearchParams(window.location.search).get('extensionUid'));
+
+      if (!uid) {
+        if (debug)
+          console.error(`[UIX] no uid found in init params or extension URL`);
+        return reject({
+          error: 'missing_uid',
+          message: 'Missing UID: no UID found in init params or extension URL',
+        });
+      }
+      if (debug) console.info(`[UIX:${uid}] initializing with uid ${uid}`);
+
+      zoid.create({
+        tag: uid,
+        url: window.location.href.toString(),
+        autoResize: {
+          width: false,
+          height: true,
+          element: 'html',
+        },
+        props: {
+          onConnected: {
+            type: 'function',
+          },
+        },
+      });
+      if (typeof window.xprops !== 'undefined') {
+        const { onConnected, onProps: initialOnProps } = window.xprops;
+
+        onConnected(uid).then((status) => {
+          if (status === true) {
+            const {
+              onProps: onParentProps,
+              onConnected: _nevermind,
+              resize,
+              ...extensionProps
+            } = window.xprops;
+
+            if (debug)
+              console.info(`[UIX:${uid}] initial shared props`, extensionProps);
+            onParentProps((p: Xprops) => {
+              const {
+                onProps: onParentProps,
+                onConnected,
+                ...newExtensionProps
+              } = p;
+
+              if (debug)
+                console.info(
+                  `[UIX:${uid}] new shared props`,
+                  newExtensionProps
+                );
+              if ('isExpanded' in p && typeof p.isExpanded === 'boolean') {
+                p.isExpanded
+                  ? resize({ height: 'full', width: '100%' })
+                  : resize({ height: 'auto', width: '100%' });
+              }
+              onProps(handleProps(newExtensionProps));
+            });
+
+            if (debug) console.info(`[UIX:${uid}] initialized`);
+            onProps(handleProps(extensionProps));
+            resolve({ status: 'ok', props: handleProps(extensionProps) });
+          } else {
+            if (debug)
+              console.info(
+                `[UIX:${uid}] sdk renderer returned status:`,
+                status
+              );
+            resolve({ status: 'validation' });
+          }
+        });
+      } else {
+        if (debug) console.error(`[UIX] no shared props from host found`);
+        reject({
+          error: 'failed_communication',
+          message:
+            'No communication established with host, please check your URL',
+        });
+      }
+    }
+  );
+}
+
+export default { init };

package/src/type-helpers/appInstallation.ts

@@ -0,0 +1,13 @@
+import type { ConfigValue } from '../base';
+
+export const AppInstallationStatus = {
+  COMPLETED: 'COMPLETED',
+  DISABLED: 'DISABLED',
+  PENDING: 'PENDING',
+} as const;
+
+export type AppInstallation = {
+  id: string;
+  config: ConfigValue;
+  status: keyof typeof AppInstallationStatus;
+};

package/src/type-helpers/dialog.ts

@@ -0,0 +1,11 @@
+export type OpenDialog = <
+  DialogReturn = any,
+  DialogProps = Record<string, any>
+>(
+  src: string,
+  props?: {
+    disableOverlayClick?: boolean;
+    maxWidth?: string;
+    ariaLabel?: string;
+  } & DialogProps
+) => Promise<DialogReturn | null>;

package/src/type-helpers/field.ts

@@ -0,0 +1,13 @@
+import type { FieldExtensionType } from '../field';
+
+export type Field = {
+  id: string;
+  apiId: string;
+  description: string | null;
+  displayName: string;
+  isList: boolean;
+  isLocalized: boolean;
+  isRequired: boolean;
+  isUnique: boolean;
+  type: keyof typeof FieldExtensionType;
+};

package/src/type-helpers/form.ts

@@ -0,0 +1,44 @@
+import type { SetFieldsVisibility } from '..';
+import type {
+  FormSubscription,
+  FormState,
+  FieldState,
+  FieldSubscription,
+  FormSubscriber,
+} from 'final-form';
+
+export interface AnyObject {
+  [key: string]: any;
+}
+
+export interface ValidationErrors extends AnyObject {}
+export interface SubmissionErrors extends AnyObject {}
+
+export type Subscriber<V = Record<string, any>> = (value: V) => void;
+
+export type Form = {
+  change: <Value = any>(name: string, value: Value) => Promise<void>;
+  getState: <Values = Record<string, any>>() => Promise<FormState<Values>>;
+  getFieldState: <Value = any>(
+    fieldName: string
+  ) => Promise<FieldState<Value> | undefined>;
+  subscribeToFieldState: <Value = any>(
+    name: string,
+    callback: (state: FieldState<Value>) => any,
+    subscription: FieldSubscription
+  ) => Promise<() => any>;
+  subscribeToFormState: <Values = Record<string, any>>(
+    callback: FormSubscriber<Values>,
+    subscription: FormSubscription
+  ) => Promise<() => any>;
+  setFieldsVisibility: SetFieldsVisibility;
+  changeBulk: (flatValues: Record<string, any>) => Promise<any>;
+};
+
+export {
+  FormSubscription,
+  FormState,
+  FieldState,
+  FieldSubscription,
+  FormSubscriber,
+} from 'final-form';

package/src/type-helpers/locale.ts

@@ -0,0 +1,10 @@
+export type Locale = {
+  apiId: string;
+  id: string;
+  displayName: string;
+  isDefault: boolean;
+};
+
+export type FormLocale = Locale & {
+  isEnabled: boolean;
+};

package/src/type-helpers/model.ts

@@ -0,0 +1,8 @@
+export type Model = {
+  apiId: string;
+  apiIdPlural: string;
+  id: string;
+  description?: string | null | undefined;
+  displayName: string;
+  isLocalized: boolean;
+};

package/src/type-helpers/openAssetPicker.ts

@@ -0,0 +1,16 @@
+export type OpenAssetPicker = () => Promise<
+  null | (Asset & Record<string, unknown>)
+>;
+
+export interface Asset {
+  createdAt: string;
+  fileName: string;
+  handle: string;
+  height?: number;
+  id: string;
+  mimeType?: string;
+  size?: number;
+  updatedAt: string;
+  url: string;
+  width?: number;
+}

package/src/type-helpers/stage.ts

@@ -0,0 +1,21 @@
+export type ColorPalette =
+  | 'PINK'
+  | 'PURPLE'
+  | 'ORANGE'
+  | 'RED'
+  | 'BROWN'
+  | 'TEAL'
+  | 'GREEN'
+  | 'YELLOW';
+
+export type Stage = {
+  id: string;
+  apiId: string;
+  color: string;
+  colorPaletteId: ColorPalette;
+  backgroundColor: string;
+  displayName: string;
+  description?: string | null | undefined;
+  isSystem: boolean;
+  position: number;
+};

package/src/type-helpers/toast.ts

@@ -0,0 +1,30 @@
+type Id = number | string;
+
+export type VariantColor =
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'primary'
+  | 'dark'
+  | 'publish';
+
+export type Position =
+  | 'top-right'
+  | 'top-center'
+  | 'top-left'
+  | 'bottom-right'
+  | 'bottom-center'
+  | 'bottom-left';
+
+type ToastOptions = {
+  title: string;
+  description?: string;
+  variantColor: VariantColor;
+  id?: Id;
+  isClosable?: boolean;
+  position?: Position;
+  duration?: number;
+};
+
+export type ShowToast = (options: ToastOptions) => Promise<Id>;

package/src/type-helpers/user.ts

@@ -0,0 +1,9 @@
+export type UserKind = 'MEMBER' | 'PAT' | 'PUBLIC' | 'WEBHOOK';
+
+export type User = {
+  id: string;
+  kind: UserKind;
+  name: string;
+  picture: string | null;
+  isActive: boolean;
+};

package/src/type-helpers/visibility.ts

@@ -0,0 +1,7 @@
+export type VisibilityTypes = 'READ_WRITE' | 'READ_ONLY' | 'HIDDEN';
+
+export type VisibilityMap = { [fieldApiId: string]: VisibilityTypes };
+
+export type SetFieldsVisibility = (
+  arg: VisibilityMap | ((currentVisibilityMap: VisibilityMap) => VisibilityMap)
+) => void;