southpaw 0.2.7

package/constants/ssr-loading.tsx

@@ -0,0 +1,17 @@
+import { Alert } from "@mantine/core";
+import { DynamicOptionsLoadingProps } from "next/dynamic";
+
+export const loading: (
+  loadingProps: DynamicOptionsLoadingProps
+) => React.ReactNode = (loadingProps) => {
+  if (loadingProps.error) {
+    return (
+      <Alert variant="filled" color="red" title="Loading error">
+        {loadingProps.error.message}
+      </Alert>
+    );
+  }
+  // TODO: figure out a way to define width and height
+  // return <Skeleton visible miw={500} mih={50} />;
+  return null;
+};

package/contexts/dev.tsx

@@ -0,0 +1,124 @@
+import {
+  Dispatch,
+  Context as ContextType,
+  createContext,
+  FC,
+  PropsWithChildren,
+  useContext,
+  useReducer,
+} from "react";
+import { TreeNodeData } from "@mantine/core";
+
+export type TNode = TreeNodeData;
+const initialState = {
+  modals: {
+    insert: false,
+  },
+  tree: {
+    selectedNode: null as TNode | null,
+    menuNode: {
+      insertMode: "within",
+      node: {},
+    } as {
+      insertMode: "within" | "before" | "after";
+      node: TNode;
+    },
+  },
+};
+
+type TActions = {
+  TREE_SELECT_NODE: {
+    type: "TREE_SELECT_NODE";
+    args: { selectedNode: typeof initialState.tree.selectedNode };
+  };
+  TREE_SET_MENU_NODE: {
+    type: "TREE_SET_MENU_NODE";
+    args: typeof initialState.tree.menuNode;
+  };
+  MODALS_OPEN: {
+    type: "MODALS_OPEN";
+    args: { name: keyof (typeof initialState)["modals"] };
+  };
+  MODALS_CLOSE: {
+    type: "MODALS_CLOSE";
+    args: { name: keyof (typeof initialState)["modals"] };
+  };
+};
+function reducer<T extends keyof TActions>(
+  state: typeof initialState,
+  action: TActions[T]
+) {
+  switch (action.type) {
+    case "TREE_SELECT_NODE": {
+      {
+        return {
+          ...state,
+          tree: {
+            ...state.tree,
+            selectedNode: action.args.selectedNode,
+          },
+        };
+      }
+    }
+    case "TREE_SET_MENU_NODE": {
+      {
+        return {
+          ...state,
+          tree: {
+            ...state.tree,
+            menuNode: action.args,
+          },
+        };
+      }
+    }
+    case "MODALS_OPEN": {
+      {
+        return {
+          ...state,
+          modals: {
+            ...state.modals,
+            [action.args.name]: true,
+          },
+        };
+      }
+    }
+    case "MODALS_CLOSE": {
+      {
+        return {
+          ...state,
+          modals: {
+            ...state.modals,
+            [action.args.name]: false,
+          },
+        };
+      }
+    }
+
+    default:
+      throw Error("Unknown action");
+  }
+}
+
+type TContextType = {
+  state: typeof initialState;
+  dispatch: Dispatch<TActions[keyof TActions]>;
+};
+const Context: ContextType<TContextType> = createContext({} as TContextType);
+
+export const useContextDev = () => {
+  return useContext(Context);
+};
+export const ContextProviderDev: FC<PropsWithChildren> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <Context.Provider
+      value={{
+        state,
+        dispatch,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
+};

package/hooks/useDebounceCb.ts

@@ -0,0 +1,21 @@
+import { useRef, useCallback } from "react";
+
+export function useDebounceCb<T extends (...args: unknown[]) => void>(
+  callback: T,
+  delay: number
+) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const debouncedCallback = useCallback(
+    (...args: Parameters<T>) => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+
+      timerRef.current = setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+
+  return debouncedCallback;
+}

package/modules/app.tsx

@@ -0,0 +1,102 @@
+import { AppProps } from "next/app";
+import { useState, useEffect } from "react";
+import { MantineProvider, MantineTheme } from "@mantine/core";
+import { ModalsProvider } from "@mantine/modals";
+
+import { m2 } from "../themes";
+import { create_translations } from "./translations";
+import { ThemeBase } from "../themes/base";
+import { ContextProviderDev } from "southpaw/contexts/dev";
+import { useRouter } from "next/router";
+import { Components } from "@/components";
+
+type Params = {
+  name: string;
+  description: string;
+  version: string;
+  behaviors: Behaviors;
+  components: typeof Components;
+  theme?: MantineTheme;
+} & Partial<{
+  translations: Record<string, ReturnType<typeof create_translations>>;
+}>;
+
+export const create_app = (params: Params) => {
+  const behaviors = params.behaviors;
+  const translations = params.translations!;
+  const theme = params.theme || m2;
+  // const components = params.components;
+  // globalThis.Components = components;
+
+  const Fn = ({ Component, pageProps }: AppProps) => {
+    const router = useRouter();
+    const [colorScheme, setColorScheme] = useState<"dark" | "light">("light");
+    const [lang, setLang] = useState<(typeof translations)[string]["lang"]>(
+      translations[Object.keys(translations)[0]].lang,
+    );
+    const isIframe = globalThis.window && window.self !== window.top;
+    const isTest = navigator.webdriver === true;
+    const isDev =
+      !Object.keys(router.query).includes("isPreview") &&
+      process.env.NODE_ENV === "development" &&
+      !isTest;
+    const setTransLang = (l: typeof lang) => {
+      setLang(l);
+    };
+    const trans = Object.entries(translations).reduce(
+      (acc, [key, value]) => {
+        const fn = (name: keyof Translations, ...args: unknown[]) => {
+          const fn = value.translations[name];
+          const result = fn(...args)[lang];
+          return result;
+        };
+        (acc as Record<string, typeof fn>)[key] = fn;
+        return acc;
+      },
+      {} as Record<
+        string,
+        (name: keyof Translations, ...args: unknown[]) => string
+      >,
+    );
+
+    const loadFonts = async () => {
+      const WebFont = await import("webfontloader");
+      WebFont.load({
+        google: {
+          families: [
+            `${theme.fontFamily}:100,200,300,400,500,600,700,800,900`,
+            theme.fontFamilyMonospace,
+          ],
+        },
+      });
+    };
+
+    useEffect(() => {
+      loadFonts();
+      if (isDev && !isIframe) {
+      }
+    }, []);
+
+    return (
+      <ContextProviderDev>
+        <ThemeBase />
+        <MantineProvider theme={theme} forceColorScheme={colorScheme}>
+          <ModalsProvider>
+            {/* {!isIframe && <LoadingOverlay visible={!ragReady} />} */}
+            <Component
+              {...pageProps}
+              behaviors={behaviors}
+              trans={trans}
+              lang={lang}
+              setTransLang={setTransLang}
+              colorScheme={colorScheme}
+              setColorScheme={setColorScheme}
+            />
+          </ModalsProvider>
+        </MantineProvider>
+      </ContextProviderDev>
+    );
+  };
+  Fn.displayName = params.name;
+  return Fn;
+};

package/modules/behaviors.ts

@@ -0,0 +1,161 @@
+// TODO: add types for the store and actions
+// NOTE: types are intentionally conservative here to avoid breaking existing apps.
+import ObservableSlim from "./state";
+
+const PAGE_UPDATE_EVENT = "--page-update";
+
+type StoreType<
+  STATE extends Record<string, any>,
+  ACTIONS extends Record<string, any>,
+> = {
+  state: STATE;
+  actions: ACTIONS;
+};
+
+type BoundActionsType<STATE extends Record<string, any>> = Record<
+  string,
+  (this: { state: STATE }, ...args: any[]) => Promise<void>
+>;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type DefinitionsType<STORE extends StoreType<{}, {}>> = {
+  when: Record<
+    string,
+    (
+      this: {
+        store: {
+          state: STORE["state"];
+          actions: {
+            [ACTION_NAME in keyof STORE["actions"]]: OmitThisParameter<
+              STORE["actions"][ACTION_NAME]
+            >;
+          };
+        };
+      },
+      ...args: any[]
+    ) => Promise<void>
+  >;
+  then: Record<string, (this: { store: STORE }, ...args: any[]) => any>;
+  given: Record<
+    string,
+    (this: { store: STORE }, ...args: any[]) => Promise<void>
+  >;
+};
+
+export const create_behaviors = <
+  STATE extends Record<string, any>,
+  ACTIONS extends BoundActionsType<STATE>,
+  STORE extends {
+    state: STATE;
+    actions: ACTIONS;
+  },
+  DEFINITIONS extends DefinitionsType<STORE>,
+>(
+  _store: StoreType<STATE, ACTIONS>,
+  definitions: DEFINITIONS,
+) => {
+  const $$typeof = Symbol("southpaw.behaviors");
+  const state: STORE["state"] = ObservableSlim.create(
+    { ..._store.state, __isProxy: false, __getTarget: _store.state },
+    false,
+    function (changes: any) {
+      const event = new CustomEvent(PAGE_UPDATE_EVENT, { detail: changes });
+      document.dispatchEvent(event);
+    },
+  ) as unknown as STORE["state"];
+  const actions = Object.keys(_store.actions).reduce((acc, name) => {
+    (acc as Record<string, any>)[name] = (
+      _store.actions[
+        name
+      ] as (typeof _store.actions)[keyof typeof _store.actions]
+    ).bind({ state }) as OmitThisParameter<
+      (typeof _store.actions)[keyof typeof _store.actions]
+    >;
+    return acc;
+  }, {} as ACTIONS);
+  const store = {
+    state,
+    actions,
+  };
+  return {
+    $$typeof,
+    definitions,
+    given<NAME extends keyof DEFINITIONS["given"]>(
+      name: NAME,
+      ...args: Parameters<DEFINITIONS["given"][NAME]>
+    ) {
+      const fn = (definitions.given as DEFINITIONS["given"])[name];
+      const condition = fn.bind({ store: store as STORE })(...args);
+      return condition;
+    },
+    when<NAME extends keyof DEFINITIONS["when"]>(name: NAME) {
+      const fn = (definitions.when as DEFINITIONS["when"])[name];
+      const cb = (...args: Parameters<DEFINITIONS["when"][NAME]>) =>
+        fn.bind({
+          store: {
+            state: store.state,
+            actions: actions as {
+              [ACTION_NAME in keyof STORE["actions"]]: OmitThisParameter<
+                STORE["actions"][ACTION_NAME]
+              >;
+            },
+          },
+        })(...args);
+      return cb;
+    },
+    then<NAME extends keyof DEFINITIONS["then"]>(
+      name: NAME,
+      ...args: Parameters<OmitThisParameter<DEFINITIONS["then"][NAME]>>
+    ): {
+      get: () => ReturnType<DEFINITIONS["then"][NAME]>;
+      ifEqual: (value: any) => boolean;
+      shouldEqual: (
+        value: ReturnType<DEFINITIONS["then"][NAME]>,
+      ) => Promise<string>;
+    } {
+      const fn = (definitions.then as DEFINITIONS["then"])[name];
+      const value = fn.bind({ store: store as STORE })(...args);
+      return {
+        get() {
+          return value as ReturnType<DEFINITIONS["then"][NAME]>;
+        },
+        ifEqual(equals: any) {
+          const condition = value === equals;
+          return condition;
+        },
+        shouldEqual(equals: any) {
+          const condition = value === equals;
+          if (condition) {
+            return Promise.resolve("Test passed !");
+          }
+          throw new Error(
+            `Expected "${String(name)}" to equal ${equals}, received ${value}`,
+          );
+        },
+      };
+    },
+    do<NAME extends keyof DEFINITIONS["when"]>(name: NAME) {
+      const fn = (definitions.when as DEFINITIONS["when"])[name];
+      const cb = (...args: Parameters<DEFINITIONS["when"][NAME]>) =>
+        fn.bind({
+          store: {
+            state: store.state,
+            actions: actions as {
+              [ACTION_NAME in keyof STORE["actions"]]: OmitThisParameter<
+                STORE["actions"][ACTION_NAME]
+              >;
+            },
+          },
+        })(...args);
+      return cb;
+    },
+    get<NAME extends keyof DEFINITIONS["then"]>(
+      name: NAME,
+      ...args: Parameters<OmitThisParameter<DEFINITIONS["then"][NAME]>>
+    ): ReturnType<DEFINITIONS["then"][NAME]> {
+      const fn = (definitions.then as DEFINITIONS["then"])[name];
+      const value = fn.bind({ store: store as STORE })(...args);
+      return value as ReturnType<DEFINITIONS["then"][NAME]>;
+    },
+  };
+};