southpaw 0.2.7

package/modules/page/inspect/index.tsx

@@ -0,0 +1,237 @@
+import { Center, Tabs, TreeNodeData } from "@mantine/core";
+import { FC, useCallback, useEffect, useState } from "react";
+import { useContextDev } from "southpaw/contexts/dev";
+import { PropsDef } from "southpaw/modules/component";
+import { PageBehaviors } from "..";
+import { KnobColor } from "../knobs/color";
+import { KnobNumber } from "../knobs/number";
+import { KnobSegmented } from "../knobs/segmented";
+import { KnobSelect } from "../knobs/select";
+import { KnobSwitch } from "../knobs/switch";
+import { KnobText } from "../knobs/text";
+import { KnobListText } from "../knobs/list-text";
+import { KnobListJson } from "../knobs/list-json";
+import { KnobAction } from "../knobs/action";
+import InspectWrapper from "./wrapper";
+import { KnobSize } from "../knobs/size";
+import { KnobIcon } from "../knobs/icon";
+import { UI } from "../../../ui";
+import { Blocks } from "../../../ui/blocks";
+import { Components } from "@/components";
+
+const NodeInspector: FC<{ node: TreeNodeData; behaviors: PageBehaviors }> = ({
+  node,
+  behaviors,
+}) => {
+  const [propsDef, setPropsDef] = useState<PropsDef>({});
+  const label = String(node.label || "");
+  const [category, name] = label.split(".") as [
+    "UI" | "Blocks" | "Components",
+    keyof typeof UI | keyof typeof Blocks | keyof typeof Components,
+  ];
+  const propDefs = Object.entries(propsDef);
+  const refresh = useCallback(async () => {
+    switch (category) {
+      case "UI":
+        const { default: UiComp } = await import(`southpaw/ui/${name}`);
+        setPropsDef(UiComp.params.propsDef);
+        break;
+      case "Blocks":
+        const { default: BlocksComp } = await import(
+          `southpaw/ui/blocks/${name}`
+        );
+        setPropsDef(BlocksComp.params.propsDef);
+        break;
+      case "Components":
+        const { default: ComponentsComp } = await import(
+          `@/components/${name}`
+        );
+        setPropsDef(ComponentsComp.params.propsDef);
+        break;
+    }
+  }, [category, name]);
+  useEffect(() => {
+    refresh();
+  }, [node, refresh]);
+
+  if (propDefs.length === 0) {
+    return <Center>No prop def found</Center>;
+  }
+  return (
+    <InspectWrapper node={node} behaviors={behaviors}>
+      {({ gettersData, node, rawProps, ready }) => {
+        return (
+          <>
+            {propDefs.map(([propName, value]) => {
+              switch (value.type) {
+                case "color":
+                  return (
+                    <KnobColor
+                      key={propName}
+                      label={value.label}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                    />
+                  );
+                case "size":
+                  return (
+                    <KnobSize
+                      key={propName}
+                      label={value.label}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                    />
+                  );
+                case "icon":
+                  return (
+                    <KnobIcon
+                      key={propName}
+                      label={value.label}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                    />
+                  );
+                case "number":
+                  return (
+                    <KnobNumber
+                      key={propName}
+                      label={value.label}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                      min={value.min}
+                      max={value.max}
+                      step={value.step}
+                    />
+                  );
+                case "segmented":
+                  return (
+                    <KnobSegmented
+                      key={propName}
+                      label={value.label}
+                      options={value.options}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                    />
+                  );
+                case "select":
+                  return (
+                    <KnobSelect
+                      key={propName}
+                      label={value.label}
+                      options={value.options}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                    />
+                  );
+                case "switch":
+                  return (
+                    <KnobSwitch
+                      key={propName}
+                      label={value.label}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                    />
+                  );
+                case "text":
+                  return (
+                    <KnobText
+                      key={propName}
+                      label={value.label}
+                      multiline={value.multiline}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                    />
+                  );
+                case "list-text":
+                  return (
+                    <KnobListText
+                      key={propName}
+                      label={value.label}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                    />
+                  );
+                case "list-json":
+                  return (
+                    <KnobListJson
+                      key={propName}
+                      label={value.label}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                    />
+                  );
+                case "action":
+                  return (
+                    <KnobAction
+                      key={propName}
+                      label={value.label}
+                      propName={propName}
+                      gettersData={gettersData}
+                      node={node}
+                      rawProps={rawProps}
+                      ready={ready}
+                      behaviors={behaviors}
+                    />
+                  );
+              }
+            })}
+          </>
+        );
+      }}
+    </InspectWrapper>
+  );
+};
+type Props = {
+  behaviors: PageBehaviors;
+};
+export const TabPageInspect: FC<Props> = ({ behaviors }) => {
+  const { state } = useContextDev();
+  const selectedNode = state.tree.selectedNode;
+  return (
+    <Tabs.Panel
+      key={selectedNode?.value}
+      value="inspect"
+      p="xs"
+      w={400}
+      style={{
+        overflow: "auto",
+      }}
+    >
+      {selectedNode ? (
+        <NodeInspector node={selectedNode} behaviors={behaviors} />
+      ) : (
+        <div>Select a node</div>
+      )}
+    </Tabs.Panel>
+  );
+};

package/modules/page/inspect/wrapper.tsx

@@ -0,0 +1,88 @@
+import { ComboboxData, Flex, LoadingOverlay } from "@mantine/core";
+import { FC, ReactNode, useEffect, useState } from "react";
+import { FETCH } from "southpaw/api/client";
+import { TNode } from "southpaw/contexts/dev";
+import { PageBehaviors } from "..";
+import { translations } from "@/translations";
+
+type Props = {
+  node: TNode;
+  behaviors: PageBehaviors;
+  children: (args: {
+    gettersData: ComboboxData;
+    node: TNode;
+    rawProps: Record<string, string>;
+    ready: boolean;
+  }) => ReactNode;
+};
+const InspectWrapper: FC<Props> = ({ node, behaviors, children }) => {
+  const [ready, setReady] = useState(false);
+  const [rawProps, setRawProps] = useState<Record<string, string>>({});
+  const gettersData: ComboboxData = [
+    ...Object.keys(behaviors.definitions).map((storeName) => {
+      const defs =
+        behaviors.definitions[storeName as keyof typeof behaviors.definitions];
+      const items = Object.keys(defs["then"]).map((key) => {
+        return {
+          label: key,
+          value: JSON.stringify({
+            type: "get",
+            storeName,
+            key,
+          }),
+        };
+      });
+      return { group: storeName, items };
+    }),
+    {
+      group: "Translations",
+      items: Object.entries(translations).flatMap(([category, categoryTranslations]) => {
+        const actualTranslations = (categoryTranslations as any).translations || {};
+        return Object.keys(actualTranslations).map((key) => {
+          return {
+            label: `${category}.${key}`,
+            value: JSON.stringify({
+              type: "trans",
+              storeName: category,
+              key,
+            }),
+          };
+        });
+      }),
+    },
+  ];
+
+  useEffect(() => {
+    setReady(false);
+    const source = JSON.parse(node.value);
+    FETCH.page
+      .getRawPropsNode({
+        source,
+      })
+      .then(({ payload: { rawProps } }) => {
+        setRawProps(rawProps);
+        setReady(true);
+      });
+  }, [node.value]);
+
+  if (!ready) {
+    return (
+      <Flex>
+        <LoadingOverlay />
+      </Flex>
+    );
+  }
+
+  return (
+    <>
+      {children({
+        gettersData,
+        node,
+        rawProps,
+        ready,
+      })}
+    </>
+  );
+};
+
+export default InspectWrapper;

package/modules/page/knobs/action.tsx

@@ -0,0 +1,58 @@
+import { ComboboxData, Fieldset, Select } from "@mantine/core";
+import { FC, useEffect, useState } from "react";
+import { TNode } from "southpaw/contexts/dev";
+import { useDebounceCb } from "southpaw/hooks/useDebounceCb";
+import { KNOB_DEBOUNCE, refreshProp } from "./helpers";
+import { PageBehaviors } from "..";
+
+export const KnobAction: FC<{
+  gettersData: ComboboxData;
+  node: TNode;
+  rawProps: Record<string, string>;
+  ready: boolean;
+  propName: string;
+  label: string;
+  behaviors: PageBehaviors;
+}> = ({ node, rawProps, ready, propName, label, behaviors }) => {
+  const [value, setValue] = useState<string>();
+
+  const options = Object.entries(behaviors.definitions).flatMap(
+    ([behaviorName, definition]) => {
+      return Object.keys(definition.when).map((actionName) => ({
+        label: `${behaviorName}: ${actionName}`,
+        value: `{() => this.do.${behaviorName}("${actionName}")()}`,
+      }));
+    },
+  );
+
+  const refreshFile = useDebounceCb(async (value: unknown) => {
+    await refreshProp(value as string | undefined, node, propName);
+  }, KNOB_DEBOUNCE);
+
+  useEffect(() => {
+    if (!ready) {
+      return;
+    }
+    setValue(rawProps[propName]);
+  }, [ready, rawProps, propName]);
+
+  return (
+    <Fieldset legend={label} style={{ border: "none" }} px={0} py={10}>
+      <Select
+        flex={1}
+        data={[
+          {
+            label: "Select an action",
+            value: "",
+          },
+          ...options,
+        ]}
+        value={value || ""}
+        onChange={(value) => {
+          setValue(value || undefined);
+          refreshFile(value || undefined);
+        }}
+      />
+    </Fieldset>
+  );
+};

package/modules/page/knobs/color.tsx

@@ -0,0 +1,78 @@
+import { ComboboxData, useMantineTheme, ColorInput } from "@mantine/core";
+import { FC, useEffect, useState } from "react";
+import { TNode } from "southpaw/contexts/dev";
+import { useDebounceCb } from "southpaw/hooks/useDebounceCb";
+import { isRawPropGet, KNOB_DEBOUNCE, refreshProp } from "./helpers";
+import { Linker } from "./linker";
+
+export const KnobColor: FC<{
+  gettersData: ComboboxData;
+  node: TNode;
+  rawProps: Record<string, string>;
+  ready: boolean;
+  propName: string;
+  label: string;
+}> = ({ gettersData, node, rawProps, ready, propName, label }) => {
+  const [colorValue, setColorValue] = useState<string>();
+  const [rawGetter, setRawGetter] = useState<{
+    type: "get" | "trans";
+    storeName: string;
+    key: string;
+  }>();
+  const theme = useMantineTheme();
+  const props = node.nodeProps || {};
+
+  const colorNames = Object.keys(theme.colors);
+  const swatches = colorNames.map((color) => ({
+    color,
+    value: theme.colors[color][5],
+    varName: `--mantine-color-${color}-5`,
+  }));
+
+  const getColorValue = (value: string) =>
+    colorNames.includes(value) ? theme.colors[value][5] : value;
+
+  const refreshFile = useDebounceCb(
+    async (value: unknown) => {
+      const swatch = swatches.find((s) => s.value === value);
+      const propValue = swatch ? swatch.color : value;
+      await refreshProp(`"${propValue}"`, node, propName);
+    },
+    KNOB_DEBOUNCE
+  );
+
+  useEffect(() => {
+    const getter = isRawPropGet(rawProps[propName]);
+    setRawGetter(getter || undefined);
+  }, [rawProps[propName]]);
+
+  useEffect(() => {
+    if (ready) {
+      setColorValue(getColorValue(props[propName]));
+    }
+  }, [ready, props[propName]]);
+
+  return (
+    <Linker
+      gettersData={gettersData}
+      node={node}
+      propName={propName}
+      rawGetter={rawGetter}
+      setRawGetter={setRawGetter}
+      value={colorValue}
+      label={label}
+    >
+      <ColorInput
+        flex={1}
+        disabled={Boolean(rawGetter)}
+        format="hex"
+        value={colorValue}
+        onChange={(value) => {
+          setColorValue(value);
+          refreshFile(value);
+        }}
+        swatches={swatches.map((s) => s.value)}
+      />
+    </Linker>
+  );
+};

package/modules/page/knobs/helpers.ts

@@ -0,0 +1,71 @@
+import { FETCH } from "southpaw/api/client";
+import { TNode } from "southpaw/contexts/dev";
+
+export const KNOB_DEBOUNCE = 500;
+export const refreshProp = async (
+  newValue: string | undefined,
+  node: TNode,
+  propName: string,
+) => {
+  await FETCH.page.setPropNode({
+    source: JSON.parse(node.value),
+    attrs: [
+      {
+        name: propName,
+        newValue,
+      },
+    ],
+  });
+};
+export const isRawPropGet = (value: string) => {
+  const getRegex =
+    /(\{this\.get\.([a-zA-Z_$][a-zA-Z0-9_$]*)\(\s*["']([^"']+)["']\s*\)\})/gm;
+  const transRegex =
+    /(\{this\.trans\.([a-zA-Z_$][a-zA-Z0-9_$]*)\(\s*["']([^"']+)["']\s*\)\})/gm;
+
+  const getMatch = getRegex.exec(value || "");
+  if (getMatch) {
+    return {
+      type: "get" as const,
+      storeName: getMatch[2],
+      key: getMatch[3],
+    };
+  }
+
+  const transMatch = transRegex.exec(value || "");
+  if (transMatch) {
+    return {
+      type: "trans" as const,
+      storeName: transMatch[2],
+      key: transMatch[3],
+    };
+  }
+
+  return undefined;
+};
+
+export const isRawPropAction = (value: string) => {
+  const regex =
+    /(\{this\.when\.([a-zA-Z_$][a-zA-Z0-9_$]*)\(\s*["']([^"']+)["']\s*\)\})/gm;
+  const match = regex.exec(value || "");
+  if (!match) {
+    return undefined;
+  }
+  const [, , behaviorName, actionName] = match;
+
+  return {
+    behaviorName,
+    actionName,
+  };
+};
+
+export const isPropResponsive = (value: unknown) => {
+  const isObject =
+    typeof value === "object" && !Array.isArray(value) && value !== null;
+  if (isObject) {
+    return Object.keys(isObject).some((key) =>
+      ["xs", "sm", "md", "lg", "xl"].includes(key),
+    );
+  }
+  return false;
+};

package/modules/page/knobs/icon.tsx

@@ -0,0 +1,85 @@
+import { ComboboxData, Group, Select, SelectProps } from "@mantine/core";
+import { FC, useEffect, useState } from "react";
+import { TNode } from "southpaw/contexts/dev";
+import { useDebounceCb } from "southpaw/hooks/useDebounceCb";
+import { isRawPropGet, KNOB_DEBOUNCE, refreshProp } from "./helpers";
+import { Linker } from "./linker";
+import { ICONS } from "../../../constants/icons";
+import { IconCheck } from "@tabler/icons-react";
+import { UI } from "../../../ui";
+
+const renderOption: SelectProps["renderOption"] = ({ option, checked }) => (
+  <Group flex="1" gap="xs">
+    <UI.icon icon={option.value as (typeof ICONS)[number]} />
+    {option.label}
+    {checked && <IconCheck />}
+  </Group>
+);
+
+export const KnobIcon: FC<{
+  gettersData: ComboboxData;
+  node: TNode;
+  rawProps: Record<string, string>;
+  ready: boolean;
+  propName: string;
+  label: string;
+}> = ({ gettersData, node, rawProps, ready, propName, label }) => {
+  const [value, setValue] = useState<string>();
+  const [rawGetter, setRawGetter] = useState<{
+    type: "get" | "trans";
+    storeName: string;
+    key: string;
+  }>();
+
+  const props = node.nodeProps || {};
+  const rawGetterStr = JSON.stringify(rawGetter);
+
+  const refreshFile = useDebounceCb(
+    async (value: unknown) => {
+      await refreshProp(value ? `"${value}"` : undefined, node, propName);
+    },
+    KNOB_DEBOUNCE,
+  );
+
+  useEffect(() => {
+    const getter = isRawPropGet(rawProps[propName]);
+    if (getter) {
+      setRawGetter(getter);
+    } else {
+      setRawGetter(undefined);
+    }
+  }, [rawProps[propName]]);
+
+  useEffect(() => {
+    if (!ready) {
+      return;
+    }
+    setValue(props[propName]);
+  }, [ready, props[propName]]);
+
+  return (
+    <Linker
+      gettersData={gettersData}
+      node={node}
+      propName={propName}
+      rawGetter={rawGetter}
+      setRawGetter={setRawGetter}
+      value={value}
+      label={label}
+    >
+      <Select
+        flex={1}
+        disabled={Boolean(rawGetterStr)}
+        data={ICONS.map((icon) => ({ value: icon, label: icon }))}
+        renderOption={renderOption}
+        value={value || ""}
+        onChange={(value) => {
+          setValue(value || undefined);
+          refreshFile(value || undefined);
+        }}
+        limit={20}
+        searchable
+      />
+    </Linker>
+  );
+};