southpaw 0.2.7

package/themes/index.ts

@@ -0,0 +1,4 @@
+import newspaper from "./newspaper";
+import m2 from "./m2";
+
+export { newspaper, m2 };

package/themes/m2.ts

@@ -0,0 +1,39 @@
+import { create_theme } from "../modules/theme";
+
+const fontFamily = "Roboto";
+const theme = create_theme({
+  fontFamily,
+  fontFamilyMonospace: "Roboto Mono",
+
+  colors: {
+    primary: "#6200ee",
+    secondary: "#03dac6",
+    red: "#f44336",
+    green: "#4caf50",
+    yellow: "#ff9800",
+    blue: "#2196f3",
+    gray: "#9e9e9e",
+    dark: "#212121",
+  },
+
+  primaryColor: "primary",
+  primaryShade: 5,
+
+  defaultRadius: 4,
+
+  headings: {
+    fontFamily,
+    fontWeight: "400",
+    textWrap: "nowrap",
+    sizes: {
+      h1: { fontSize: "96px", lineHeight: "auto", fontWeight: "300" }, // Headline 1
+      h2: { fontSize: "60px", lineHeight: "auto", fontWeight: "300" }, // Headline 2
+      h3: { fontSize: "48px", lineHeight: "auto", fontWeight: "400" }, // Headline 3
+      h4: { fontSize: "34px", lineHeight: "auto", fontWeight: "400" }, // Headline 4
+      h5: { fontSize: "24px", lineHeight: "auto", fontWeight: "400" }, // Headline 5
+      h6: { fontSize: "20px", lineHeight: "auto", fontWeight: "500" }, // Headline 6
+    },
+  },
+});
+
+export default theme;

package/themes/newspaper.ts

@@ -0,0 +1,39 @@
+import { create_theme } from "../modules/theme";
+
+const theme = create_theme({
+  fontFamily: "Space Grotesk",
+  fontFamilyMonospace: "Source Code Pro",
+  primaryColor: "red",
+  defaultRadius: "md",
+  radius: {
+    xs: "0px",
+    sm: "0px",
+    md: "0px",
+    lg: "0px",
+    xl: "0px",
+  },
+  fontSizes: {
+    xs: "12px",
+    sm: "16px",
+    md: "18px",
+    lg: "20px",
+    xl: "22px",
+  },
+  colors: {
+    red: "#ff5722",
+    dark: "#3f3634",
+    gray: "#777c91",
+  },
+  components: {
+    Badge: {
+      styles: () => ({
+        root: {
+          borderRadius: 0,
+        },
+      }),
+    },
+  },
+  white: "#f6f5ee",
+  black: "#252423",
+});
+export default theme;

package/types/api.ts

@@ -0,0 +1,57 @@
+import { PageSeoType } from "../modules/page";
+import { FiberNodeType } from "./fiber_node";
+
+type ApiResultType<T extends Record<string, unknown>> = {
+  type: "error" | "success" | "warning" | "info";
+  payload: T;
+  message: string;
+};
+export type ApiType = {
+  application: {};
+  page: {
+    writeSEO: (args: {
+      seo: PageSeoType;
+      source: FiberNodeType["_debugSource"];
+    }) => Promise<ApiResultType<{}>>;
+    insertNode: (args: {
+      code: string;
+      insertMode: "within" | "before" | "after";
+      source: FiberNodeType["_debugSource"];
+    }) => Promise<ApiResultType<{}>>;
+    duplicateNode: (args: {
+      source: FiberNodeType["_debugSource"];
+    }) => Promise<ApiResultType<{}>>;
+    deleteNode: (args: {
+      source: FiberNodeType["_debugSource"];
+    }) => Promise<ApiResultType<{}>>;
+    moveUpNode: (args: {
+      source: FiberNodeType["_debugSource"];
+    }) => Promise<ApiResultType<{}>>;
+    moveDownNode: (args: {
+      source: FiberNodeType["_debugSource"];
+    }) => Promise<ApiResultType<{}>>;
+    moveNode: (args: {
+      source: FiberNodeType["_debugSource"];
+      target: FiberNodeType["_debugSource"];
+      position: "before" | "after" | "within";
+    }) => Promise<ApiResultType<{}>>;
+    setPropNode: (args: {
+      source: FiberNodeType["_debugSource"];
+      attrs: { name: string; newValue: string | undefined }[];
+    }) => Promise<ApiResultType<{}>>;
+    getRawPropsNode: (args: {
+      source: FiberNodeType["_debugSource"];
+    }) => Promise<
+      ApiResultType<{
+        rawProps: Record<string, string>;
+      }>
+    >;
+  };
+};
+export type StreamCallback = (
+  cb: (chunk: string, controller: StreamIterator) => void,
+) => void;
+
+export interface StreamIterator extends ReadableStream {
+  [Symbol.asyncIterator](): AsyncGenerator<Awaited<any>, void, unknown>;
+}

package/types/fiber_node.ts

@@ -0,0 +1,69 @@
+export type FiberNodeType = {
+  tag: number;
+  key: unknown;
+  elementType: keyof HTMLElementTagNameMap;
+  type: string;
+  stateNode: HTMLElement & {
+    props: unknown;
+  };
+  return: unknown;
+  child: FiberNodeType;
+  sibling: unknown;
+  index: number;
+  ref: unknown;
+  pendingProps: unknown;
+  memoizedProps: unknown;
+  updateQueue: unknown;
+  memoizedState: unknown;
+  dependencies: unknown;
+  mode: unknown;
+  flags: unknown;
+  subtreeFlags: unknown;
+  deletions: unknown;
+  lanes: unknown;
+  childLanes: unknown;
+  alternate: FiberNodeType;
+  actualDuration: number;
+  actualStartTime: number;
+  selfBaseDuration: number;
+  treeBaseDuration: number;
+  _debugSource: {
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+  };
+  _debugOwner: FiberNodeType;
+  _debugNeedsRemount: boolean;
+  _debugHookTypes: unknown;
+};
+export type FiberRootNodeType = {
+  tag: number;
+  containerInfo: HTMLElement;
+  pendingChildren: null | Array<unknown>;
+  current: FiberNodeType;
+  pingCache: null;
+  finishedWork: null;
+  timeoutHandle: number;
+  context: Record<string, unknown>;
+  pendingContext: null | Record<string, unknown>;
+  callbackNode: null;
+  callbackPriority: number;
+  eventTimes: number[];
+  expirationTimes: number[];
+  pendingLanes: number;
+  suspendedLanes: number;
+  pingedLanes: number;
+  expiredLanes: number;
+  mutableReadLanes: number;
+  finishedLanes: unknown;
+  entangledLanes: unknown;
+  entanglements: number[];
+  identifierPrefix: string;
+  onRecoverableError: unknown;
+  mutableSourceEagerHydrationData: unknown;
+  effectDuration: unknown;
+  passiveEffectDuration: unknown;
+  memoizedUpdaters: unknown;
+  pendingUpdatersLaneMap: Set<number>[];
+  _debugRootType: "hydrateRoot()";
+};

package/types/react_element.ts

@@ -0,0 +1,14 @@
+import { RefObject, ReactElement } from "react";
+import { FiberNodeType } from "./fiber_node";
+
+export type ReactElementType = ReactElement & {
+  $$typeof: symbol;
+  ref: null | RefObject<unknown>;
+  _owner: FiberNodeType;
+  _store: {
+    validated: boolean;
+  };
+  _self: unknown;
+  type: {};
+  _source: FiberNodeType["_debugSource"];
+};

package/ui/accordion.tsx

@@ -0,0 +1,70 @@
+import { Accordion, AccordionProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { ReactNode } from "react";
+
+export type Props = Omit<AccordionProps, "children"> & {
+  items: {
+    id: string;
+    icon?: ReactNode;
+    label: ReactNode;
+    content: ReactNode;
+  }[];
+};
+const Component = create_component({
+  name: "Accordion",
+  description: "Divide content into collapsible sections",
+  props: {
+    component: "div",
+    variant: "contained",
+    items: [
+      {
+        label: "Accordion 1",
+        id: "1",
+        content: "Accordion 1 content",
+      },
+      {
+        label: "Accordion 2",
+        id: "2",
+        content: "Accordion 2 content",
+      },
+    ],
+  } as Props,
+  propsDef: {
+    component: {
+      type: "text",
+      label: "Root component",
+    },
+    variant: {
+      type: "select",
+      label: "Variant style",
+      options: [
+        { value: "default", label: "Default" },
+        { value: "contained", label: "Contained" },
+        { value: "filled", label: "Filled" },
+        { value: "separated", label: "Separated" },
+      ],
+    },
+    items: {
+      type: "list-text",
+      label: "Accordion items",
+    },
+  },
+  render() {
+    const { items, ...other } = this.props;
+    return (
+      <Accordion {...other}>
+        {items!.map((item) => {
+          return (
+            <Accordion.Item key={item.id} value={item.id}>
+              <Accordion.Control icon={item.icon}>
+                {item.label}
+              </Accordion.Control>
+              <Accordion.Panel>{item.content}</Accordion.Panel>
+            </Accordion.Item>
+          );
+        })}
+      </Accordion>
+    );
+  },
+});
+export default Component;

package/ui/actionicon.tsx

@@ -0,0 +1,41 @@
+import { ActionIcon, ActionIconProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { PolymorphicComponentProps } from "./props";
+import { spacingPropsDef } from "./propsDef";
+import Icon from "./icon";
+
+type Props = PolymorphicComponentProps<"button", ActionIconProps>;
+const Component = create_component({
+  name: "ActionIcon",
+  description: "The actionicon UI element",
+  props: {
+    variant: "filled",
+    children: <Icon icon="add" />,
+  } as Props,
+  propsDef: {
+    variant: {
+      type: "select",
+      options: [
+        "filled",
+        "light",
+        "outline",
+        "transparent",
+        "white",
+        "subtle",
+        "default",
+      ],
+      label: "Variant",
+    },
+    color: { type: "color", label: "Color" },
+    size: { type: "size", label: "Size" },
+    radius: { type: "size", label: "Radius" },
+    disabled: { type: "switch", label: "Disabled" },
+    loading: { type: "switch", label: "Loading" },
+    ...spacingPropsDef,
+  },
+  render() {
+    const { children, ...other } = this.props;
+    return <ActionIcon {...other}>{children}</ActionIcon>;
+  },
+});
+export default Component;

package/ui/affix.tsx

@@ -0,0 +1,14 @@
+import { Affix, AffixProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = AffixProps;
+const Component = create_component({
+  name: "Affix",
+  description: "The affix UI element",
+  props: {} as Props,
+  render() {
+    const { children, ...other } = this.props;
+    return <Affix {...other}>{children}</Affix>;
+  },
+});
+export default Component;

package/ui/alert.tsx

@@ -0,0 +1,37 @@
+import { Alert, AlertProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef, colorPropsDef } from "./propsDef";
+
+type Props = AlertProps;
+const Component = create_component({
+  name: "Alert",
+  description: "The alert UI element",
+  props: {
+    title: "The alert title",
+  } as Props,
+  propsDef: {
+    title: { type: "text", label: "Title" },
+    variant: {
+      type: "select",
+      options: [
+        "filled",
+        "outline",
+        "light",
+        "transparent",
+        "white",
+        "default",
+      ],
+      label: "Variant",
+    },
+    withCloseButton: { type: "switch", label: "Close Button" },
+    radius: { type: "size", label: "Radius" },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    const { children, ...other } = this.props;
+    return <Alert {...other}>{children}</Alert>;
+  },
+});
+
+export default Component;

package/ui/anchor.tsx

@@ -0,0 +1,52 @@
+import { Anchor, AnchorProps, Text } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+import { AnchorHTMLAttributes, PropsWithChildren } from "react";
+import Link from "next/link";
+
+type Props = PropsWithChildren<AnchorProps> & {
+  href: string;
+  prefetch?: boolean;
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+const Component = create_component({
+  name: "Anchor",
+  description: "The anchor UI element",
+  props: { href: "#", children: <Text>Label here</Text> } as Props,
+  propsDef: {
+    href: { type: "text", label: "Href" },
+    target: { type: "text", label: "Target" },
+    underline: {
+      type: "select",
+      options: ["hover", "always", "never"],
+      label: "Underline",
+    },
+    c: { type: "color", label: "Color" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, prefetch, href, ...other } = this.props;
+    const isActive = href === this.router.asPath;
+    return (
+      <Anchor
+        component={Link}
+        href={href}
+        scroll={false}
+        prefetch={prefetch}
+        shallow
+        passHref
+        c={
+          isActive
+            ? "var(--mantine-primary-color-filled)"
+            : "var(--mantine-color-text)"
+        }
+        {...other}
+      >
+        {children}
+      </Anchor>
+    );
+  },
+});
+export default Component;

package/ui/arrow.tsx

@@ -0,0 +1,116 @@
+import { create_component } from "../modules/component";
+
+type Props = {
+  fromId: string;
+  toId: string;
+  text?: string;
+  color?: string;
+  strokeWidth?: number;
+};
+const Component = create_component({
+  name: "Arrow",
+  description: "The arrow UI element",
+  props: {
+    color: "black",
+    strokeWidth: 2,
+    text: "Arrow element",
+  } as Props,
+  state: {
+    points: null as { x1: number; y1: number; x2: number; y2: number } | null,
+  },
+  methods: {
+    updatePosition() {
+      const fromEl = document.getElementById(this.props.fromId);
+      const toEl = document.getElementById(this.props.toId);
+      if (!fromEl || !toEl) return;
+      const fromRect = fromEl.getBoundingClientRect();
+      const toRect = toEl.getBoundingClientRect();
+      this.state.points = {
+        x1: fromRect.left + fromRect.width,
+        y1: fromRect.top + fromRect.height,
+        x2: toRect.left + toRect.width,
+        y2: toRect.top,
+      };
+    },
+  },
+  lifecycle: {
+    onMount() {
+      window.addEventListener("resize", this.methods.updatePosition);
+      window.addEventListener("scroll", this.methods.updatePosition);
+    },
+    onRender() {
+      this.methods.updatePosition();
+    },
+    onUnmount() {
+      window.removeEventListener("resize", this.methods.updatePosition);
+      window.removeEventListener("scroll", this.methods.updatePosition);
+    },
+    // onRender() {
+    //   this.methods.updatePosition();
+    // },
+    onPropChange(propName, previousProp, currentProp) {
+      if (["fromId", "toId"].includes(propName) && currentProp) {
+        this.methods.updatePosition();
+        this.methods.updatePosition();
+      }
+    },
+  },
+  render() {
+    const { points } = this.state;
+    const { color, strokeWidth, text } = this.props;
+
+    if (!points) {
+      return null;
+    }
+    return (
+      <svg
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+          zIndex: 9999,
+        }}
+      >
+        <defs>
+          <marker
+            id="arrowhead"
+            markerWidth="10"
+            markerHeight="7"
+            refX="10"
+            refY="3.5"
+            orient="auto"
+          >
+            <polygon points="0 0, 10 3.5, 0 7" fill={color} />
+          </marker>
+        </defs>
+        <line
+          x1={points.x1}
+          y1={points.y1}
+          x2={points.x2}
+          y2={points.y2}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeDasharray={3}
+          markerEnd="url(#arrowhead)"
+        />
+        {text && (
+          <text
+            x={(points.x1 + points.x2) / 2}
+            y={(points.y1 + points.y2) / 2}
+            fill={color}
+            fontSize="14"
+            textAnchor="middle"
+            dominantBaseline="central"
+            style={{ userSelect: "none" }}
+          >
+            {text}
+          </text>
+        )}
+      </svg>
+    );
+  },
+});
+export default Component;

package/ui/aspectratio.tsx

@@ -0,0 +1,21 @@
+import { AspectRatio, AspectRatioProps, Paper } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = AspectRatioProps;
+const Component = create_component({
+  name: "AspectRatio",
+  description: "The aspectratio UI element",
+  props: {
+    children: (
+      <Paper m="sm" p="xs" withBorder opacity={0.5}>
+        Add aspectratio children here
+      </Paper>
+    ),
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <AspectRatio {...other}>{children}</AspectRatio>;
+  },
+});
+export default Component;

package/ui/autocomplete.tsx

@@ -0,0 +1,34 @@
+import { Autocomplete, AutocompleteProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { PolymorphicComponentProps } from "./props";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = PolymorphicComponentProps<"autocomplete", AutocompleteProps>;
+const Component = create_component({
+  name: "Autocomplete",
+  description: "The autocomplete UI element",
+  props: {
+    placeholder: "Autocomplete...",
+  } as Props,
+  propsDef: {
+    placeholder: { type: "text", label: "Placeholder" },
+    label: { type: "text", label: "Label" },
+    description: { type: "text", label: "Description" },
+    error: { type: "text", label: "Error" },
+    disabled: { type: "switch", label: "Disabled" },
+    size: { type: "size", label: "Size" },
+    radius: { type: "size", label: "Radius" },
+    variant: {
+      type: "select",
+      options: ["default", "filled", "unstyled"],
+      label: "Variant",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Autocomplete {...other} />
+  },
+});
+export default Component;

package/ui/avatar.tsx

@@ -0,0 +1,36 @@
+import { Avatar, AvatarProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = AvatarProps;
+const Component = create_component({
+  name: "Avatar",
+  description: "The avatar UI element",
+  props: {} as Props,
+  propsDef: {
+    src: { type: "text", label: "Source" },
+    alt: { type: "text", label: "Alt Text" },
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    radius: { type: "size", label: "Radius" },
+    variant: {
+      type: "select",
+      options: [
+        "filled",
+        "light",
+        "outline",
+        "transparent",
+        "white",
+        "default",
+      ],
+      label: "Variant",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Avatar {...other}>{children}</Avatar>;
+  },
+});
+export default Component;

package/ui/backgroundimage.tsx

@@ -0,0 +1,16 @@
+import { BackgroundImage, BackgroundImageProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { PropsWithChildren } from "react";
+
+type Props = PropsWithChildren<BackgroundImageProps>;
+const Component = create_component({
+  name: "BackgroundImage",
+  description: "The backgroundimage UI element",
+  props: {} as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <BackgroundImage {...other}>{children}</BackgroundImage>;
+  },
+});
+export default Component;