southpaw 0.2.7

package/modules/page/browser.tsx

@@ -0,0 +1,166 @@
+import {
+  Box,
+  Center,
+  Flex,
+  SegmentedControl,
+  useMantineTheme,
+} from "@mantine/core";
+import { useRouter } from "next/router";
+import { useEffect, useRef, useState } from "react";
+import { useContextDev } from "southpaw/contexts/dev";
+
+export const PageBrowser = () => {
+  const theme = useMantineTheme();
+  const router = useRouter();
+  const [breakpoint, setBreakpoint] =
+    useState<keyof typeof theme.breakpoints>("xs");
+  const src = `${router.asPath}${router.asPath.includes("?") ? "&" : "?"}isPreview=true`;
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const outlineRef = useRef<HTMLDivElement>(null);
+  const { state } = useContextDev();
+  const selectedNode = state.tree.selectedNode;
+
+  useEffect(() => {
+    if (!iframeRef.current) return;
+    const iframe = iframeRef.current;
+
+    let animationFrameId: number;
+    let targetEl: Element | null = null;
+
+    const findTarget = () => {
+      if (!selectedNode) return null;
+      const doc = iframe.contentDocument;
+      if (!doc) return null;
+      const elements = Array.from(doc.querySelectorAll("*"));
+      for (const el of elements) {
+        const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
+        if (key) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          let curr = (el as any)[key];
+          while (curr) {
+            if (
+              curr._debugSource &&
+              JSON.stringify(curr._debugSource) === selectedNode.value
+            ) {
+              return el;
+            }
+            curr = curr.return;
+          }
+        }
+      }
+      return null;
+    };
+
+    const updateRect = () => {
+      animationFrameId = requestAnimationFrame(updateRect);
+      const outline = outlineRef.current;
+      if (!outline) return;
+
+      if (!selectedNode) {
+        outline.style.display = "none";
+        return;
+      }
+
+      if (!targetEl || !targetEl.isConnected) {
+        targetEl = findTarget();
+      }
+
+      if (targetEl) {
+        const rect = targetEl.getBoundingClientRect();
+        outline.style.display = "block";
+        outline.style.top = `${rect.top}px`;
+        outline.style.left = `${rect.left}px`;
+        outline.style.width = `${rect.width}px`;
+        outline.style.height = `${rect.height}px`;
+      } else {
+        outline.style.display = "none";
+      }
+    };
+    updateRect();
+    return () => cancelAnimationFrame(animationFrameId);
+  }, [selectedNode]);
+
+  if (!src) return null;
+  return (
+    <Flex direction="column" flex={1} style={{ overflow: "auto" }}>
+      <Box
+        p="sm"
+        bg="var(--mantine-color-body)"
+        style={{
+          borderBottom: "1px solid var(--mantine-color-gray-2)",
+          fontFamily: "var(--mantine-font-family)",
+        }}
+      >
+        <SegmentedControl
+          value={breakpoint}
+          onChange={setBreakpoint}
+          data={[
+            {
+              label: "Xs",
+              value: "xs",
+            },
+            {
+              label: "Sm",
+              value: "sm",
+            },
+            {
+              label: "Md",
+              value: "md",
+            },
+            {
+              label: "Lg",
+              value: "lg",
+            },
+            {
+              label: "Xl",
+              value: "xl",
+            },
+          ]}
+        />
+      </Box>
+      <Center
+        flex={1}
+        style={{
+          "--s": "86px",
+          "--c1": "var(--mantine-color-gray-light)",
+          "--c2": "var(--mantine-color-body)",
+          "--_g": "#0000 90deg,var(--c1) 0",
+          background:
+            "conic-gradient(from 90deg at 2px 2px,var(--_g)), conic-gradient(from 90deg at 1px 1px,var(--_g)), var(--c2)",
+          backgroundSize:
+            "var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5)",
+        }}
+      >
+        <Box
+          style={{
+            position: "relative",
+            height: "100%",
+            width: breakpoint === "xl" ? "100%" : theme.breakpoints[breakpoint],
+          }}
+        >
+          <Box
+            ref={iframeRef}
+            component="iframe"
+            h="100%"
+            w="100%"
+            style={{
+              border: "none",
+            }}
+            src={src}
+          />
+          <Box
+            ref={outlineRef}
+            style={{
+              position: "absolute",
+              display: "none",
+              pointerEvents: "none",
+              border: "2px solid var(--mantine-color-blue-filled)",
+              zIndex: 9999,
+              transition: "all 0.1s ease",
+            }}
+          />
+        </Box>
+      </Center>
+    </Flex>
+  );
+};

package/modules/page/index.tsx

@@ -0,0 +1,327 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  FunctionComponent,
+  ReactNode,
+  useEffect,
+  useReducer,
+  useState,
+  ReactElement,
+  FC,
+  Dispatch,
+  SetStateAction,
+} from "react";
+import { renderToString } from "react-dom/server";
+import Head from "next/head";
+import { NextRouter, useRouter } from "next/router";
+import { Flex, useMantineTheme } from "@mantine/core";
+
+import { ReactElementType } from "../../types/react_element";
+import { _ErrorBoundary } from "../error";
+
+import { PageLeftTabs } from "./left-tabs";
+import { PageRightTabs } from "./right-tabs";
+import { PageBrowser } from "./browser";
+import { useMediaQuery } from "@mantine/hooks";
+
+const ClientOnly = ({ children }: { children: ReactNode }) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted ? children : null;
+};
+
+type PropsType = {
+  behaviors: Behaviors;
+  trans: (key: keyof Translations) => string;
+  lang: Translations[keyof Translations]["lang"];
+  setTransLang: (lang: Translations[keyof Translations]["lang"]) => void;
+  colorScheme: "dark" | "light";
+  setColorScheme: Dispatch<SetStateAction<"dark" | "light">>;
+};
+
+export type PageBehaviors = {
+  get: {
+    [K in keyof Behaviors]: Behaviors[K]["get"];
+  };
+  do: {
+    [K in keyof Behaviors]: Behaviors[K]["do"];
+  };
+  given: {
+    [K in keyof Behaviors]: Behaviors[K]["given"];
+  };
+  when: {
+    [K in keyof Behaviors]: Behaviors[K]["when"];
+  };
+  then: {
+    [K in keyof Behaviors]: Behaviors[K]["then"];
+  };
+  definitions: {
+    [K in keyof Behaviors]: Behaviors[K]["definitions"];
+  };
+};
+type PageProps = Record<string, unknown>;
+export type PageRenderThisType = {
+  props: PageProps;
+  router: NextRouter;
+  trans: {
+    [TK in keyof Translations]: <
+      K extends keyof Translations[TK]["translations"],
+    >(
+      key: K,
+      ...args: K extends keyof Translations[TK]["translations"]
+        ? Translations[TK]["translations"][K] extends (...args: any) => any
+          ? Parameters<Translations[TK]["translations"][K]>
+          : never
+        : never
+    ) => string;
+  };
+  devError: (error: ReactElement) => void;
+  lang: Translations[keyof Translations]["lang"];
+  setTransLang: (lang: Translations[keyof Translations]["lang"]) => void;
+  colorScheme: "dark" | "light";
+  setColorScheme: Dispatch<SetStateAction<"dark" | "light">>;
+  do: PageBehaviors["do"];
+  get: PageBehaviors["get"];
+  given: PageBehaviors["given"];
+  when: PageBehaviors["when"];
+  then: PageBehaviors["then"];
+  definitions: PageBehaviors["definitions"];
+  mediaQueries: {
+    isXs: boolean;
+    isSm: boolean;
+    isMd: boolean;
+    isLg: boolean;
+    isXl: boolean;
+  };
+};
+
+type TddType = Record<
+  string,
+  (this: {
+    given: {
+      [K in keyof Behaviors]: Behaviors[K]["given"];
+    };
+    when: {
+      [K in keyof Behaviors]: Behaviors[K]["when"];
+    };
+    then: {
+      [K in keyof Behaviors]: Behaviors[K]["then"];
+    };
+  }) => Promise<void>
+>;
+
+export type PageSeoType = {
+  title: string;
+  description: string;
+};
+
+type LifecycleBindings = Omit<
+  PageRenderThisType,
+  "do" | "get" | "definitions"
+> & {
+  given: PageBehaviors["given"];
+  when: PageBehaviors["when"];
+  then: PageBehaviors["then"];
+};
+export interface PageParams {
+  name: string;
+  description: string;
+  seo: PageSeoType;
+  lifecycle?: {
+    onMount?: (this: LifecycleBindings) => void;
+    onUnmount?: (this: LifecycleBindings) => void;
+    onRender?: (this: Pick<LifecycleBindings, "props">) => void;
+  };
+  tdd?: TddType;
+  render: (this: PageRenderThisType) => ReactNode;
+}
+
+export const create_page = (params: PageParams) => {
+  const Fn: FC = (_props) => {
+    const router = useRouter();
+    const [errorHtml, setErrorHtml] = useState("");
+    const [isIframe, setIsIframe] = useState(false);
+    useEffect(() => {
+      setIsIframe(window.self !== window.top);
+    }, []);
+    const theme = useMantineTheme();
+    const breakpoints = theme.breakpoints;
+
+    const isXs = useMediaQuery(`(max-width: ${breakpoints.xs})`);
+    const isSm = useMediaQuery(`(max-width: ${breakpoints.sm})`);
+    const isMd = useMediaQuery(`(max-width: ${breakpoints.md})`);
+    const isLg = useMediaQuery(`(max-width: ${breakpoints.lg})`);
+    const isXl = useMediaQuery(`(min-width: ${breakpoints.xl})`);
+
+    const tdd = params.tdd || {};
+    const seo = params.seo;
+    const mediaQueries = {
+      isXs: Boolean(isXs),
+      isSm: Boolean(isSm),
+      isMd: Boolean(isMd),
+      isLg: Boolean(isLg),
+      isXl: Boolean(isXl),
+    };
+    const [, forceUpdate] = useReducer((x) => x + 1, 0);
+    const {
+      behaviors,
+      trans,
+      setTransLang,
+      colorScheme,
+      setColorScheme,
+      lang,
+      ...props
+    } = _props as Omit<PropsType, "trans"> & {
+      trans: PageRenderThisType["trans"];
+    };
+
+    const devError = (error: ReactElement) => {
+      setErrorHtml(renderToString(error));
+    };
+
+    const pageBehaviors = Object.entries(behaviors).reduce(
+      (acc: PageBehaviors, [k, value]) => {
+        const key = k as keyof Behaviors;
+        acc.do[key] = value.do;
+        acc.get[key] = value.get;
+        acc.given[key] = value.given;
+        acc.when[key] = value.when;
+        acc.then[key] = value.then;
+        // TODO: type Behaviors["definitions"] more precisely
+        (acc.definitions as any)[key] = (value as any).definitions;
+        return acc;
+      },
+      {
+        do: {},
+        get: {},
+        given: {},
+        when: {},
+        then: {},
+        definitions: {},
+      } as PageBehaviors,
+    );
+    const bindings: PageRenderThisType = {
+      props,
+      router,
+      do: pageBehaviors.do,
+      get: pageBehaviors.get,
+      given: pageBehaviors.given,
+      when: pageBehaviors.when,
+      then: pageBehaviors.then,
+      definitions: pageBehaviors.definitions,
+      devError,
+      trans: trans as PageRenderThisType["trans"],
+      lang,
+      setTransLang,
+      colorScheme,
+      setColorScheme,
+
+      mediaQueries,
+    };
+    const render = params.render.bind(bindings) as FunctionComponent;
+
+    useEffect(() => {
+      const lifecycleBindings: LifecycleBindings = {
+        props,
+        router,
+        given: pageBehaviors.given,
+        when: pageBehaviors.when,
+        then: pageBehaviors.then,
+        devError,
+        trans,
+        lang,
+        setTransLang,
+        colorScheme,
+        setColorScheme,
+        mediaQueries,
+      };
+      params.lifecycle?.onMount?.bind(lifecycleBindings)();
+      document.addEventListener("--page-update", forceUpdate);
+      return () => {
+        params.lifecycle?.onUnmount?.bind(lifecycleBindings)();
+        document.removeEventListener("--page-update", forceUpdate);
+      };
+    }, []);
+
+    useEffect(() => {
+      const lifecycleBindings = { props };
+      params.lifecycle?.onRender?.bind(lifecycleBindings)();
+    });
+
+    if (errorHtml) {
+      return <_ErrorBoundary errorHtml={errorHtml} />;
+    }
+    const isTest =
+      typeof navigator !== "undefined" && navigator.webdriver === true;
+    const isDev =
+      !Object.keys(router.query).includes("isPreview") &&
+      !router.asPath.includes("isPreview") &&
+      process.env.NODE_ENV === "development" &&
+      !isTest;
+    const jsx = render(props) as ReactElementType;
+    if (isTest) {
+      //@ts-expect-error TODO: fix this
+      globalThis.tdd = Object.keys(tdd).reduce(
+        (acc, name) => {
+          acc[name] = tdd[name].bind(pageBehaviors);
+          return acc;
+        },
+        {} as Record<string, () => Promise<void>>,
+      );
+    }
+    if (!isDev) {
+      return (
+        <>
+          <Head>
+            <title>{seo.title}</title>
+            <meta name="description" content={seo.description} />
+            <meta
+              name="viewport"
+              content="width=device-width, initial-scale=1"
+            />
+            <link rel="icon" href="/favicon.ico" />
+          </Head>
+          {jsx}
+        </>
+      );
+    }
+    return (
+      <>
+        <Head>
+          <title>{seo.title}</title>
+          <meta name="description" content={seo.description} />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <ClientOnly>
+          {(isIframe ||
+            (typeof window !== "undefined" &&
+              window.location.search.includes("isPreview"))) &&
+            jsx}
+          {!isIframe &&
+            !(
+              typeof window !== "undefined" &&
+              window.location.search.includes("isPreview")
+            ) && (
+            <Flex h="100vh">
+              <PageLeftTabs
+                jsx={jsx}
+                params={params as unknown as PageParams}
+                pageBehaviors={pageBehaviors}
+              />
+              <PageBrowser />
+              <PageRightTabs
+                jsx={jsx}
+                params={params as unknown as PageParams}
+                pageBehaviors={pageBehaviors}
+              />
+            </Flex>
+          )}
+        </ClientOnly>
+      </>
+    );
+  };
+  Fn.displayName = params.name;
+  return Fn;
+};

package/modules/page/insert-modal.tsx

@@ -0,0 +1,225 @@
+import {
+  Button,
+  Card,
+  Flex,
+  Modal,
+  ScrollArea,
+  Tabs,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { Dispatch, FC, SetStateAction, useState } from "react";
+import { FETCH } from "southpaw/api/client";
+import { useContextDev } from "southpaw/contexts/dev";
+import { AutoZoomContainer } from "./autozoom";
+import { UI } from "../../ui";
+import { Blocks } from "../../ui/blocks";
+import { Components } from "@/components";
+
+type TCategory = "UI" | "Blocks" | "Components";
+const ModalList: FC<{
+  category: TCategory;
+  setSelected: Dispatch<SetStateAction<string | undefined>>;
+  selected: string | undefined;
+  onInsert: () => Promise<void>;
+}> = ({ category, onInsert, selected, setSelected }) => {
+  const [search, setSearch] = useState("");
+  const List = {
+    UI,
+    Blocks,
+    Components,
+  }[category];
+  return (
+    <>
+      <TextInput
+        value={search}
+        onChange={(event) => {
+          setSearch(event.target.value);
+        }}
+        placeholder="Search placeholder"
+        my="sm"
+      />
+      <ScrollArea offsetScrollbars>
+        <Flex h={400} wrap="wrap" p={5} gap="lg">
+          {Object.entries(List)
+            .filter(([name]) => {
+              return name.toLowerCase().includes(search.toLowerCase());
+            })
+            .map(([name, value]) => {
+              const isSelected = selected === name;
+              const Component = value;
+              return (
+                <Card
+                  key={name}
+                  shadow="sm"
+                  radius="md"
+                  withBorder
+                  w={225}
+                  h={225}
+                  flex="none"
+                  onClick={() => {
+                    setSelected(name);
+                  }}
+                  onDoubleClick={onInsert}
+                  p={4}
+                  styles={{
+                    root: {
+                      outline: isSelected
+                        ? "3px solid var(--mantine-color-dark-5)"
+                        : "",
+                      outlineOffset: "0px",
+                      userSelect: "none",
+                    },
+                  }}
+                >
+                  <UI.inviewport>
+                    {(inViewport, ref) => {
+                      return (
+                        <Flex
+                          ref={ref}
+                          p={2}
+                          justify="center"
+                          align="center"
+                          bg="gray.0"
+                          flex={1}
+                          styles={{
+                            root: {
+                              pointerEvents: "none",
+                              overflow: "hidden",
+                              position: "relative",
+                            },
+                          }}
+                        >
+                          {inViewport && (
+                            <AutoZoomContainer>
+                              <Component />
+                            </AutoZoomContainer>
+                          )}
+                        </Flex>
+                      );
+                    }}
+                  </UI.inviewport>
+                  <Text p="sm" fw={500} tt="capitalize">
+                    {name}
+                  </Text>
+                </Card>
+              );
+            })}
+        </Flex>
+      </ScrollArea>
+    </>
+  );
+};
+
+export const ModalInsert: FC = ({}) => {
+  const { state, dispatch } = useContextDev();
+  const [tab, setTab] = useState<TCategory>("UI");
+  // const [promptValue, setPromptValue] = useState(
+  //   `A UI.text with Hello World`
+  //   // `A list ui element with 3 items UI.text with text "Hello 1", "Hello 2" and "Hello 3"`
+  //   // `A UI.flex which showcases the features of the Southpaw framework, use UI.list, UI.alert and other elements to write the section`
+  //   // `A UI text which contains a short presentation of the inventor of headlights`
+  // );
+  const [inserting, setInserting] = useState(false);
+  const [selected, setSelected] = useState<string | undefined>(undefined);
+  const opened = state.modals.insert;
+  const insertMode = state.tree.menuNode.insertMode;
+  const menuNode = state.tree.menuNode.node;
+  const onClose = () => {
+    dispatch({
+      type: "MODALS_CLOSE",
+      args: {
+        name: "insert",
+      },
+    });
+    setSelected(undefined);
+  };
+
+  // const unwrapTsxFence = (response: string): string => {
+  //   const match = response.match(/```tsx\s*([\s\S]*?)```/);
+  //   return match ? match[1].trim() : response;
+  // };
+
+  const onInsert = async () => {
+    setInserting(true);
+    const key = selected!;
+    const code = `<${tab}.${key} />`;
+    setSelected(undefined);
+    await FETCH.page.insertNode({
+      code,
+      source: JSON.parse(menuNode.value),
+      insertMode,
+    });
+    setInserting(false);
+    dispatch({
+      type: "MODALS_CLOSE",
+      args: {
+        name: "insert",
+      },
+    });
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Insert"
+      size="xl"
+      overlayProps={{
+        backgroundOpacity: 0.3,
+      }}
+    >
+      <Tabs
+        value={tab}
+        onChange={(value) => {
+          if (value) {
+            setInserting(false);
+            setSelected(undefined);
+            setTab(value as typeof tab);
+          }
+        }}
+        orientation="horizontal"
+      >
+        <Tabs.List>
+          <Tabs.Tab value="UI">UI</Tabs.Tab>
+          <Tabs.Tab value="Blocks">Blocks</Tabs.Tab>
+          <Tabs.Tab value="Components">Components</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="UI">
+          <ModalList
+            category="UI"
+            onInsert={onInsert}
+            selected={selected}
+            setSelected={setSelected}
+          />
+        </Tabs.Panel>
+        <Tabs.Panel value="Blocks">
+          <ModalList
+            category="Blocks"
+            onInsert={onInsert}
+            selected={selected}
+            setSelected={setSelected}
+          />
+        </Tabs.Panel>
+        <Tabs.Panel value="Components">
+          <ModalList
+            category="Components"
+            onInsert={onInsert}
+            selected={selected}
+            setSelected={setSelected}
+          />
+        </Tabs.Panel>
+      </Tabs>
+
+      <Button
+        onClick={onInsert}
+        disabled={!selected}
+        mt="md"
+        color="dark"
+        loading={inserting}
+      >
+        Insert
+      </Button>
+    </Modal>
+  );
+};