southpaw 0.2.7

package/modules/page/knobs/linker.tsx

@@ -0,0 +1,188 @@
+import {
+  Button,
+  Combobox,
+  ComboboxData,
+  ComboboxItem,
+  ComboboxItemGroup,
+  Fieldset,
+  Group,
+  Tooltip,
+  useCombobox,
+} from "@mantine/core";
+import {
+  Dispatch,
+  FC,
+  ReactNode,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
+import { refreshProp } from "./helpers";
+import { TNode } from "southpaw/contexts/dev";
+import { IconCheck, IconLineDashed, IconLink } from "@tabler/icons-react";
+
+type Props = {
+  children: ReactNode;
+  node: TNode;
+  label: string;
+  propName: string;
+  value: unknown;
+  gettersData: ComboboxData;
+  rawGetter:
+    | {
+        type: "get" | "trans";
+        storeName: string;
+        key: string;
+      }
+    | undefined;
+  setRawGetter: Dispatch<
+    SetStateAction<
+      | {
+          type: "get" | "trans";
+          storeName: string;
+          key: string;
+        }
+      | undefined
+    >
+  >;
+};
+export const Linker: FC<Props> = ({
+  children,
+  label,
+  gettersData,
+  rawGetter,
+  setRawGetter,
+  node,
+  propName,
+  value,
+}) => {
+  const [search, setSearch] = useState("");
+  const [selectedItem, setSelectedItem] = useState<string>(
+    JSON.stringify(rawGetter)
+  );
+  const isValueDefined = typeof value !== "undefined" && value !== "";
+
+  const combobox = useCombobox({
+    onDropdownClose: () => {
+      combobox.resetSelectedOption();
+      combobox.focusTarget();
+      setSearch("");
+    },
+
+    onDropdownOpen: () => {
+      combobox.focusSearchInput();
+    },
+  });
+
+  useEffect(() => {
+    setSelectedItem(JSON.stringify(rawGetter));
+  }, [rawGetter]);
+
+  return (
+    <Fieldset legend={label} style={{ border: "none" }} px={0} py={10}>
+      <Group align="center">
+        <Combobox
+          store={combobox}
+          width={250}
+          position="bottom-start"
+          withArrow
+          onOptionSubmit={(val) => {
+            const shouldToggleOff = val === selectedItem;
+            if (!shouldToggleOff) {
+              setSelectedItem(val);
+              combobox.closeDropdown();
+              const getter = JSON.parse(val) as {
+                type: "get" | "trans";
+                storeName: string;
+                key: string;
+              };
+              setRawGetter(getter);
+              refreshProp(
+                getter.type === "get"
+                  ? `{this.get.${getter.storeName}("${getter.key}")}`
+                  : `{this.trans.${getter.storeName}("${getter.key}")}`,
+                node,
+                propName
+              );
+            } else {
+              setRawGetter(undefined);
+              refreshProp(
+                isValueDefined ? `"${value}"` : undefined,
+                node,
+                propName
+              );
+            }
+          }}
+        >
+          <Combobox.Target withAriaAttributes={false}>
+            <Tooltip label="Attach a getter to the prop">
+              <Button
+                size="sm"
+                variant={rawGetter ? "filled" : "outline"}
+                color={
+                  rawGetter ? "var(--mantine-primary-color-filled)" : "gray"
+                }
+                onClick={() => combobox.toggleDropdown()}
+                leftSection={rawGetter?.key}
+                p={!rawGetter ? 0 : undefined}
+                style={
+                  !rawGetter
+                    ? {
+                        aspectRatio: "1 / 1",
+                      }
+                    : undefined
+                }
+              >
+                {rawGetter ? (
+                  <IconLink size={18} />
+                ) : (
+                  <IconLineDashed size={18} />
+                )}
+              </Button>
+            </Tooltip>
+          </Combobox.Target>
+
+          <Combobox.Dropdown>
+            <Combobox.Search
+              value={search}
+              onChange={(event) => setSearch(event.currentTarget.value)}
+              placeholder="Search a getter"
+            />
+            <Combobox.Options mah={300} style={{ overflowY: 'auto' }}>
+              {gettersData.length > 0 ? (
+                gettersData.map((group) => {
+                  const option = group as ComboboxItemGroup;
+                  return (
+                    <Combobox.Group label={option.group} key={option.group}>
+                      {option.items.map((opt) => {
+                        const item = opt as ComboboxItem;
+                        const active = item.value === selectedItem;
+                        return (
+                          <Combobox.Option
+                            value={item.value}
+                            disabled={item.disabled}
+                            active={active}
+                            key={item.value}
+                          >
+                            <Group align="center" gap="xs">
+                              {active && <IconCheck />}
+                              {item.label}
+                            </Group>
+                          </Combobox.Option>
+                        );
+                      })}
+                    </Combobox.Group>
+                  );
+                })
+              ) : (
+                <Combobox.Empty>Nothing found</Combobox.Empty>
+              )}
+            </Combobox.Options>
+          </Combobox.Dropdown>
+        </Combobox>
+
+        {children}
+      </Group>
+    </Fieldset>
+  );
+};

package/modules/page/knobs/list-json.tsx

@@ -0,0 +1,149 @@
+import {
+  JsonInput,
+  Button,
+  Group,
+  Stack,
+  ActionIcon,
+  ComboboxData,
+} 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 { IconPlus, IconTrash } from "@tabler/icons-react";
+
+export const KnobListJson: 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<unknown[]>([]);
+  const [localValues, setLocalValues] = useState<string[]>([]);
+  const [rawGetter, setRawGetter] = useState<{
+    type: "get" | "trans";
+    storeName: string;
+    key: string;
+  }>();
+
+  const props = node.nodeProps || {};
+  const rawGetterStr = JSON.stringify(rawGetter);
+  const currentPropValue = props[propName];
+  const currentRawProp = rawProps[propName];
+
+  const refreshFile = useDebounceCb(
+    async (newValue: unknown) => {
+      const arrayValue = Array.isArray(newValue) ? newValue : [];
+      const formattedValue =
+        arrayValue.length > 0
+          ? `{[${arrayValue.map((item) => JSON.stringify(item)).join(", ")}]}`
+          : undefined;
+      await refreshProp(formattedValue, node, propName);
+    },
+    KNOB_DEBOUNCE,
+  );
+
+  const addItem = () => {
+    const newValue = [...value, {}];
+    setValue(newValue);
+    setLocalValues([...localValues, "{}"]);
+    refreshFile(newValue);
+  };
+
+  const removeItem = (index: number) => {
+    const newValue = value.filter((_, i) => i !== index);
+    setValue(newValue);
+    setLocalValues(localValues.filter((_, i) => i !== index));
+    refreshFile(newValue);
+  };
+
+  const updateItem = (index: number, newJsonText: string) => {
+    const newLocalValues = [...localValues];
+    newLocalValues[index] = newJsonText;
+    setLocalValues(newLocalValues);
+
+    try {
+      const jsonValue = JSON.parse(newJsonText);
+      const newValue = [...value];
+      newValue[index] = jsonValue;
+      setValue(newValue);
+      refreshFile(newValue);
+    } catch {
+      // Invalid JSON, don't update parent yet, but store local string
+    }
+  };
+
+  useEffect(() => {
+    const getter = isRawPropGet(currentRawProp);
+    if (getter) {
+      setRawGetter(getter);
+    } else {
+      setRawGetter(undefined);
+    }
+  }, [currentPropValue, currentRawProp]);
+
+  useEffect(() => {
+    if (!ready) {
+      return;
+    }
+    const propValue = currentPropValue;
+    const arrayValue = Array.isArray(propValue) ? propValue : [];
+    setValue(arrayValue);
+    setLocalValues(arrayValue.map((v) => JSON.stringify(v, null, 2)));
+  }, [ready, currentPropValue]);
+
+  return (
+    <Linker
+      gettersData={gettersData}
+      node={node}
+      propName={propName}
+      rawGetter={rawGetter}
+      setRawGetter={setRawGetter}
+      value={value}
+      label={label}
+    >
+      <Stack flex={1} gap="xs">
+        {localValues.map((item, index) => (
+          <Group key={index} gap="xs" align="flex-start">
+            <JsonInput
+              flex={1}
+              disabled={Boolean(rawGetterStr)}
+              value={item}
+              placeholder={`Item ${index + 1} (JSON)`}
+              validationError="Invalid JSON"
+              formatOnBlur
+              autosize
+              minRows={3}
+              onChange={(newText) => {
+                updateItem(index, newText);
+              }}
+            />
+            <ActionIcon
+              variant="outline"
+              color="red"
+              disabled={Boolean(rawGetterStr)}
+              onClick={() => removeItem(index)}
+              size="sm"
+              mt={4}
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Group>
+        ))}
+
+        <Button
+          variant="outline"
+          leftSection={<IconPlus size={16} />}
+          disabled={Boolean(rawGetterStr)}
+          onClick={addItem}
+          size="sm"
+        >
+          Add Item
+        </Button>
+      </Stack>
+    </Linker>
+  );
+};

package/modules/page/knobs/list-text.tsx

@@ -0,0 +1,129 @@
+import {
+  ComboboxData,
+  TextInput,
+  Button,
+  Group,
+  Stack,
+  ActionIcon,
+} 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 { IconPlus, IconTrash } from "@tabler/icons-react";
+
+export const KnobListText: 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 (newValue: unknown) => {
+      const arrayValue = Array.isArray(newValue) ? newValue : [];
+      const formattedValue =
+        arrayValue.length > 0
+          ? `{[${arrayValue.map((item) => `"${item}"`).join(", ")}]}`
+          : undefined;
+      await refreshProp(formattedValue, node, propName);
+    },
+    KNOB_DEBOUNCE,
+  );
+
+  const addItem = () => {
+    const newValue = [...value, ""];
+    setValue(newValue);
+    refreshFile(newValue);
+  };
+
+  const removeItem = (index: number) => {
+    const newValue = value.filter((_, i) => i !== index);
+    setValue(newValue);
+    refreshFile(newValue);
+  };
+
+  const updateItem = (index: number, newText: string) => {
+    const newValue = [...value];
+    newValue[index] = newText;
+    setValue(newValue);
+    refreshFile(newValue);
+  };
+
+  useEffect(() => {
+    const getter = isRawPropGet(rawProps[propName]);
+    if (getter) {
+      setRawGetter(getter);
+    } else {
+      setRawGetter(undefined);
+    }
+  }, [rawProps[propName]]);
+
+  useEffect(() => {
+    if (!ready) {
+      return;
+    }
+    const propValue = props[propName];
+    const arrayValue = Array.isArray(propValue) ? propValue : [];
+    setValue(arrayValue);
+  }, [ready, props[propName]]);
+
+  return (
+    <Linker
+      gettersData={gettersData}
+      node={node}
+      propName={propName}
+      rawGetter={rawGetter}
+      setRawGetter={setRawGetter}
+      value={value}
+      label={label}
+    >
+      <Stack flex={1} gap="xs">
+        {value.map((item, index) => (
+          <Group key={index} gap="xs" align="center">
+            <TextInput
+              flex={1}
+              disabled={Boolean(rawGetterStr)}
+              value={item}
+              placeholder={`Item ${index + 1}`}
+              onChange={(event) => {
+                updateItem(index, event.target.value);
+              }}
+            />
+            <ActionIcon
+              variant="outline"
+              color="red"
+              disabled={Boolean(rawGetterStr)}
+              onClick={() => removeItem(index)}
+              size="sm"
+            >
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Group>
+        ))}
+
+        <Button
+          variant="outline"
+          leftSection={<IconPlus size={16} />}
+          disabled={Boolean(rawGetterStr)}
+          onClick={addItem}
+          size="sm"
+        >
+          Add Item
+        </Button>
+      </Stack>
+    </Linker>
+  );
+};

package/modules/page/knobs/number.tsx

@@ -0,0 +1,84 @@
+import { ComboboxData, NumberInput } 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 KnobNumber: FC<{
+  gettersData: ComboboxData;
+  node: TNode;
+  rawProps: Record<string, string>;
+  ready: boolean;
+  propName: string;
+  label: string;
+  min?: number;
+  max?: number;
+  step?: number;
+}> = ({ gettersData, node, rawProps, ready, propName, label, min, max, step }) => {
+  const [value, setValue] = useState<number | 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 === "" ? undefined : `{${value}}`,
+        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}
+    >
+      <NumberInput
+        flex={1}
+        disabled={Boolean(rawGetterStr)}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(value) => {
+          if (!isNaN(Number(value))) {
+            setValue(value);
+            refreshFile(value);
+          } else {
+            setValue("");
+            refreshFile(undefined);
+          }
+        }}
+      />
+    </Linker>
+  );
+};

package/modules/page/knobs/segmented.tsx

@@ -0,0 +1,81 @@
+import {
+  ComboboxData,
+  SegmentedControl,
+  SegmentedControlItem,
+} 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 KnobSegmented: FC<{
+  gettersData: ComboboxData;
+  node: TNode;
+  rawProps: Record<string, string>;
+  ready: boolean;
+  propName: string;
+  label: string;
+  options: SegmentedControlItem[];
+}> = ({ gettersData, node, rawProps, ready, propName, label, options }) => {
+  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 onValueChange = useDebounceCb(
+    async (value: unknown, refresh = true) => {
+      setValue(value as string);
+      if (refresh) {
+        await refreshProp(`"${value}"`, node, propName);
+      }
+    },
+    KNOB_DEBOUNCE
+  );
+
+  useEffect(() => {
+    const getter = isRawPropGet(rawProps[propName]);
+    if (getter) {
+      setRawGetter(getter);
+    } else {
+      setRawGetter(undefined);
+    }
+  }, [rawProps[propName]]);
+
+  useEffect(() => {
+    if (!ready) {
+      return;
+    }
+    onValueChange(props[propName], false);
+  }, [ready, props[propName]]);
+
+  return (
+    <Linker
+      gettersData={gettersData}
+      node={node}
+      propName={propName}
+      rawGetter={rawGetter}
+      setRawGetter={setRawGetter}
+      value={value}
+      label={label}
+    >
+      <SegmentedControl
+        flex={1}
+        size="xs"
+        disabled={Boolean(rawGetterStr)}
+        data={options}
+        value={value}
+        onChange={(value) => {
+          if (value) {
+            onValueChange(value);
+          }
+        }}
+      />
+    </Linker>
+  );
+};