southpaw 0.2.7

package/modules/page/knobs/select.tsx

@@ -0,0 +1,89 @@
+import { ComboboxData, 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";
+
+export const KnobSelect: FC<{
+  gettersData: ComboboxData;
+  node: TNode;
+  rawProps: Record<string, string>;
+  ready: boolean;
+  propName: string;
+  label: string;
+  options: ComboboxData;
+  renderOption?: SelectProps["renderOption"];
+}> = ({
+  gettersData,
+  node,
+  rawProps,
+  ready,
+  propName,
+  label,
+  renderOption,
+  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 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={[
+          {
+            label: "Select a value",
+            value: "",
+          },
+          ...options,
+        ]}
+        renderOption={renderOption}
+        value={value || ""}
+        onChange={(value) => {
+          setValue(value || undefined);
+          refreshFile(value || undefined);
+        }}
+      />
+    </Linker>
+  );
+};

package/modules/page/knobs/size.tsx

@@ -0,0 +1,106 @@
+import { ComboboxData, 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";
+
+export const KnobSize: FC<{
+  gettersData: ComboboxData;
+  node: TNode;
+  rawProps: Record<string, string>;
+  ready: boolean;
+  propName: string;
+  label: string;
+  renderOption?: SelectProps["renderOption"];
+}> = ({
+  gettersData,
+  node,
+  rawProps,
+  ready,
+  propName,
+  label,
+  renderOption,
+}) => {
+  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={[
+          {
+            label: "Select a value",
+            value: "",
+          },
+          {
+            label: "Xs",
+            value: "xs",
+          },
+          {
+            label: "Sm",
+            value: "sm",
+          },
+          {
+            label: "Md",
+            value: "md",
+          },
+          {
+            label: "Lg",
+            value: "lg",
+          },
+          {
+            label: "Xl",
+            value: "xl",
+          },
+        ]}
+        renderOption={renderOption}
+        value={value || ""}
+        onChange={(value) => {
+          setValue(value || undefined);
+          refreshFile(value || undefined);
+        }}
+      />
+    </Linker>
+  );
+};

package/modules/page/knobs/switch.tsx

@@ -0,0 +1,75 @@
+import { ComboboxData, Switch } 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 KnobSwitch: 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<boolean>(false);
+  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(
+        typeof value === "undefined" ? 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(Boolean(props[propName]));
+  }, [ready, props[propName]]);
+
+  return (
+    <Linker
+      gettersData={gettersData}
+      node={node}
+      propName={propName}
+      rawGetter={rawGetter}
+      setRawGetter={setRawGetter}
+      value={value}
+      label={label}
+    >
+      <Switch
+        flex={1}
+        disabled={Boolean(rawGetterStr)}
+        checked={value}
+        onChange={(event) => {
+          const checked = event.target.checked;
+          setValue(checked);
+          refreshFile(checked);
+        }}
+      />
+    </Linker>
+  );
+};

package/modules/page/knobs/text.tsx

@@ -0,0 +1,93 @@
+import { ComboboxData, Textarea, TextInput } 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 KnobText: FC<{
+  gettersData: ComboboxData;
+  node: TNode;
+  rawProps: Record<string, string>;
+  ready: boolean;
+  propName: string;
+  label: string;
+  multiline?: boolean;
+}> = ({
+  gettersData,
+  node,
+  rawProps,
+  ready,
+  propName,
+  label,
+  multiline = false,
+}) => {
+  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}"`, 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}
+    >
+      {multiline ? (
+        <Textarea
+          flex={1}
+          disabled={Boolean(rawGetterStr)}
+          value={value}
+          onChange={(event) => {
+            const value = event.target.value;
+            setValue(value);
+            refreshFile(value);
+          }}
+        />
+      ) : (
+        <TextInput
+          flex={1}
+          disabled={Boolean(rawGetterStr)}
+          value={value}
+          onChange={(event) => {
+            const value = event.target.value;
+            setValue(value);
+            refreshFile(value);
+          }}
+        />
+      )}
+    </Linker>
+  );
+};

package/modules/page/left-tabs.tsx

@@ -0,0 +1,36 @@
+import { Tabs } from "@mantine/core";
+import { IconListTree, IconSeo } from "@tabler/icons-react";
+import { TabPageSeo } from "./seo";
+import { TabPageTree } from "./tree";
+import { PageBehaviors, PageParams } from ".";
+import { ReactElementType } from "southpaw/types/react_element";
+
+type Props = {
+  params: PageParams;
+  jsx: ReactElementType;
+  pageBehaviors: PageBehaviors;
+};
+export const PageLeftTabs = ({ params, jsx }: Props) => {
+  return (
+    <Tabs
+      allowTabDeactivation
+      keepMounted={false}
+      bg="var(--mantine-color-body)"
+      orientation="vertical"
+      style={{
+        borderRight: "1px solid var(--mantine-color-gray-3)",
+      }}
+    >
+      <Tabs.List>
+        <Tabs.Tab value="seo">
+          <IconSeo title="Seo" size={25} />
+        </Tabs.Tab>
+        <Tabs.Tab value="tree">
+          <IconListTree title="Tree" size={25} />
+        </Tabs.Tab>
+      </Tabs.List>
+      <TabPageSeo params={params} jsx={jsx} />
+      <TabPageTree jsx={jsx} />
+    </Tabs>
+  );
+};

package/modules/page/right-tabs.tsx

@@ -0,0 +1,31 @@
+import { Tabs } from "@mantine/core";
+import { IconPointer } from "@tabler/icons-react";
+import { TabPageInspect } from "./inspect";
+import { PageBehaviors, PageParams } from ".";
+import { ReactElementType } from "southpaw/types/react_element";
+
+type Props = {
+  params: PageParams;
+  jsx: ReactElementType;
+  pageBehaviors: PageBehaviors;
+};
+export const PageRightTabs = ({ pageBehaviors }: Props) => {
+  return (
+    <Tabs
+      allowTabDeactivation
+      placement="right"
+      orientation="vertical"
+      bg="var(--mantine-color-body)"
+      style={{
+        borderLeft: "1px solid var(--mantine-color-gray-3)",
+      }}
+    >
+      <Tabs.List>
+        <Tabs.Tab value="inspect">
+          <IconPointer title="Inspect" size={25} />
+        </Tabs.Tab>
+      </Tabs.List>
+      <TabPageInspect behaviors={pageBehaviors} />
+    </Tabs>
+  );
+};

package/modules/page/seo.tsx

@@ -0,0 +1,69 @@
+import { Button, Flex, ScrollArea, Tabs, TextInput } from "@mantine/core";
+import { FETCH } from "../../api/client";
+import { PageParams } from ".";
+import { FC } from "react";
+import { ReactElementType } from "../../types/react_element";
+
+type Props = {
+  params: PageParams;
+  jsx: ReactElementType;
+};
+export const TabPageSeo: FC<Props> = ({ params, jsx }) => {
+  return (
+    <Tabs.Panel value="seo" p="sm" w={340}>
+      <ScrollArea h="100%">
+        <Flex
+          w={300}
+          onSubmit={(event) => {
+            event.preventDefault();
+            const formEls = (event.currentTarget as unknown as HTMLFormElement)
+              .elements;
+            const title = (formEls.namedItem("seo-title") as HTMLInputElement)
+              .value;
+            const description = (
+              formEls.namedItem("seo-description") as HTMLInputElement
+            ).value;
+            const source = jsx._source
+              ? jsx._source
+              : {
+                  fileName: "src/pages/index.tsx",
+                  lineNumber: 1,
+                  columnNumber: 1,
+                };
+            FETCH.page.writeSEO({
+              seo: {
+                title,
+                description,
+              },
+              source,
+            });
+          }}
+          component="form"
+          direction="column"
+          gap="sm"
+          p="sm"
+        >
+          <TextInput
+            id="seo-title"
+            label="Title"
+            color="dark"
+            type="text"
+            defaultValue={params.seo.title}
+            autoComplete="off"
+          />
+          <TextInput
+            id="seo-description"
+            label="Description"
+            color="dark"
+            type="text"
+            defaultValue={params.seo.description}
+            autoComplete="off"
+          />
+          <Button color="dark" hidden type="submit">
+            Apply
+          </Button>
+        </Flex>
+      </ScrollArea>
+    </Tabs.Panel>
+  );
+};