southpaw 0.2.7

package/ui/indicator.tsx

@@ -0,0 +1,42 @@
+import { Indicator, IndicatorProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = IndicatorProps;
+const Component = create_component({
+  name: "Indicator",
+  description: "The indicator UI element",
+  props: {} as Props,
+  propsDef: {
+    label: { type: "text", label: "Label" },
+    position: {
+      type: "select",
+      options: [
+        "top-start",
+        "top-center",
+        "top-end",
+        "middle-start",
+        "middle-center",
+        "middle-end",
+        "bottom-start",
+        "bottom-center",
+        "bottom-end",
+      ],
+      label: "Position",
+    },
+    inline: { type: "switch", label: "Inline" },
+    size: { type: "number", label: "Size" },
+    color: { type: "color", label: "Color" },
+    radius: { type: "size", label: "Radius" },
+    processing: { type: "switch", label: "Processing" },
+    disabled: { type: "switch", label: "Disabled" },
+    withBorder: { type: "switch", label: "With Border" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Indicator {...other}>{children}</Indicator>;
+  },
+});
+export default Component;

package/ui/infobox.tsx

@@ -0,0 +1,200 @@
+import { CSSProperties, PropsWithChildren } from "react";
+import { create_component } from "../modules/component";
+import { Text } from "@mantine/core";
+
+type Props = PropsWithChildren<{
+  toId: string;
+  color?: string;
+  strokeWidth?: number;
+  offsetFrom?: { x: number; y: number };
+  offsetTo?: { x: number; y: number };
+  linePositionFrom?:
+    | "top-left"
+    | "top-center"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right";
+  linePositionTo?:
+    | "top-left"
+    | "top-center"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right";
+  style?: CSSProperties;
+}>;
+const Component = create_component({
+  name: "Infobox",
+  description: "The infobox UI element",
+  props: {
+    color: "black",
+    strokeWidth: 1,
+    linePositionFrom: "top-left",
+    linePositionTo: "top-left",
+    offsetFrom: { x: 0, y: 0 },
+    offsetTo: { x: 0, y: 0 },
+    children: <Text>Infobox element</Text>,
+  } as Props,
+  state: {
+    points: null as { x1: number; y1: number; x2: number; y2: number } | null,
+  },
+  refs: {
+    fromEl: undefined as unknown as HTMLDivElement,
+  },
+  methods: {
+    updatePosition() {
+      const fromEl = this.refs.fromEl.current;
+      const toEl = document.getElementById(this.props.toId);
+      if (!fromEl || !toEl) return;
+      const fromRect = fromEl.getBoundingClientRect();
+      const toRect = toEl.getBoundingClientRect();
+
+      const toPos = {
+        "top-left": { x2: toRect.left, y2: toRect.top },
+        "top-center": { x2: toRect.left + toRect.width / 2, y2: toRect.top },
+        "top-right": { x2: toRect.left + toRect.width, y2: toRect.top },
+        "bottom-left": {
+          x2: toRect.left,
+          y2: toRect.top + toRect.height,
+        },
+        "bottom-center": {
+          x2: toRect.left + toRect.width / 2,
+          y2: toRect.top + toRect.height,
+        },
+        "bottom-right": {
+          x2: toRect.left + toRect.width,
+          y2: toRect.top + toRect.height,
+        },
+      };
+      const x2y2 = toPos[this.props.linePositionTo!];
+      x2y2.x2 += this.props.offsetTo?.x ?? 0;
+      x2y2.y2 += this.props.offsetTo?.y ?? 0;
+      switch (this.props.linePositionFrom) {
+        case "top-left":
+          this.state.points = {
+            x1: fromRect.left,
+            y1: fromRect.top,
+            ...x2y2,
+          };
+          break;
+        case "top-center":
+          this.state.points = {
+            x1: fromRect.left + fromRect.width / 2,
+            y1: fromRect.top,
+            ...x2y2,
+          };
+          break;
+        case "top-right":
+          this.state.points = {
+            x1: fromRect.left + fromRect.width,
+            y1: fromRect.top,
+            ...x2y2,
+          };
+          break;
+        case "bottom-left":
+          this.state.points = {
+            x1: fromRect.left,
+            y1: fromRect.top + fromRect.height,
+            ...x2y2,
+          };
+          break;
+        case "bottom-center":
+          this.state.points = {
+            x1: fromRect.left + fromRect.width / 2,
+            y1: fromRect.top + fromRect.height,
+            ...x2y2,
+          };
+          break;
+        case "bottom-right":
+          this.state.points = {
+            x1: fromRect.left + fromRect.width,
+            y1: fromRect.top + fromRect.height,
+            ...x2y2,
+          };
+          break;
+      }
+    },
+  },
+  lifecycle: {
+    onMount() {
+      window.addEventListener("resize", this.methods.updatePosition);
+      window.addEventListener("scroll", this.methods.updatePosition);
+    },
+    onRender() {
+      this.methods.updatePosition();
+    },
+    onMountAnimationEnd() {
+      this.methods.updatePosition();
+    },
+    onUnmount() {
+      window.removeEventListener("resize", this.methods.updatePosition);
+      window.removeEventListener("scroll", this.methods.updatePosition);
+    },
+    onPropChange(propName, previousProp, currentProp) {
+      if (["toId"].includes(propName) && currentProp) {
+        this.methods.updatePosition();
+        this.methods.updatePosition();
+      }
+    },
+  },
+  render() {
+    const { points } = this.state;
+    const { color, strokeWidth, style, children } = this.props;
+
+    return (
+      <>
+        <b
+          ref={this.refs.fromEl}
+          style={{
+            position: "absolute",
+            zIndex: 10,
+            outline: "1px solid black",
+            padding: 10,
+            ...style,
+          }}
+        >
+          {children}
+        </b>
+        <svg
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            zIndex: 10,
+          }}
+        >
+          <defs>
+            <marker
+              id="arrowhead"
+              viewBox="0 0 10 10"
+              refX="5"
+              refY="5"
+              markerWidth="5"
+              markerHeight="5"
+            >
+              <circle cx="5" cy="5" r="5" fill={color} />
+            </marker>
+          </defs>
+
+          {points && (
+            <line
+              x1={points.x1}
+              y1={points.y1}
+              x2={points.x2}
+              y2={points.y2}
+              stroke={color}
+              strokeWidth={strokeWidth}
+              // strokeDasharray={3}
+              markerEnd="url(#arrowhead)"
+            />
+          )}
+        </svg>
+      </>
+    );
+  },
+});
+export default Component;

package/ui/input.tsx

@@ -0,0 +1,18 @@
+import { Input, InputProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { InputHTMLAttributes } from "react";
+
+type Props = InputProps & InputHTMLAttributes<HTMLInputElement>;
+const Component = create_component({
+  name: "Input",
+  description: "The input UI element",
+  props: {
+    placeholder: "Placeholder...",
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { ...other } = this.props;
+    return <Input {...other} />;
+  },
+});
+export default Component;

package/ui/inviewport.tsx

@@ -0,0 +1,23 @@
+import { VisuallyHidden } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { ReactNode } from "react";
+import { useInViewport } from "@mantine/hooks";
+
+type Props = {
+  children: (inViewport: boolean, ref: any) => ReactNode;
+};
+const Component = create_component({
+  name: "InViewport",
+  description: "The inviewport UI element",
+  props: {} as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    const { ref, inViewport } = useInViewport();
+    if (typeof children === "function") {
+      return <>{children(inViewport, ref)}</>;
+    }
+    return children;
+  },
+});
+export default Component;

package/ui/jsoninput.tsx

@@ -0,0 +1,35 @@
+import { JsonInput, JsonInputProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = JsonInputProps;
+const Component = create_component({
+  name: "JsonInput",
+  description: "The jsoninput UI element",
+  props: {
+    placeholder: "Placeholder...",
+  } 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",
+    },
+    validationError: { type: "text", label: "Validation Error" },
+    formatOnBlur: { type: "switch", label: "Format on blur" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <JsonInput {...other} />;
+  },
+});
+export default Component;

package/ui/kbd.tsx

@@ -0,0 +1,20 @@
+import { Kbd, KbdProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = KbdProps;
+const Component = create_component({
+  name: "Kbd",
+  description: "The kbd UI element",
+  props: {} as Props,
+  propsDef: {
+    size: { type: "size", label: "Size" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Kbd {...other}>{children}</Kbd>;
+  },
+});
+export default Component;

package/ui/list.tsx

@@ -0,0 +1,33 @@
+import { List, ListItemProps, ListProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = Omit<ListProps, "children"> & { items: ListItemProps[] };
+const Component = create_component({
+  name: "List",
+  description: "The list UI element",
+  props: {
+    items: [
+      {
+        children: "Item 1",
+      },
+      {
+        children: "Item 2",
+      },
+      {
+        children: "Item 3",
+      },
+    ],
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { items, ...other } = this.props;
+    return (
+      <List {...other}>
+        {items.map((item, i) => {
+          return <List.Item key={i} {...item} />;
+        })}
+      </List>
+    );
+  },
+});
+export default Component;

package/ui/loader.tsx

@@ -0,0 +1,26 @@
+import { Loader, LoaderProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef, colorPropsDef } from "./propsDef";
+
+type Props = LoaderProps;
+const Component = create_component({
+  name: "Loader",
+  description: "The loader UI element",
+  props: {} as Props,
+  propsDef: {
+    size: { type: "size", label: "Size" },
+    type: {
+      type: "select",
+      options: ["bars", "oval", "dots"],
+      label: "Type",
+    },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Loader {...other}>{children}</Loader>;
+  },
+});
+export default Component;

package/ui/loadingoverlay.tsx

@@ -0,0 +1,22 @@
+import { LoadingOverlay, LoadingOverlayProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = LoadingOverlayProps;
+const Component = create_component({
+  name: "LoadingOverlay",
+  description: "The loadingoverlay UI element",
+  props: {} as Props,
+  propsDef: {
+    visible: { type: "switch", label: "Visible" },
+    zIndex: { type: "number", label: "Z-Index" },
+    overlayBlur: { type: "number", label: "Blur" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <LoadingOverlay {...other}>{children}</LoadingOverlay>;
+  },
+});
+export default Component;

package/ui/mark.tsx

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

package/ui/menu.tsx

@@ -0,0 +1,89 @@
+import { Button, ButtonProps, Menu, MenuProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = Omit<MenuProps, "children"> & {
+  labelProps: ButtonProps;
+  label: string;
+  items: (
+    | { type: "divider" }
+    | { type: "label"; text: string }
+    | {
+        type: "item";
+        text: string;
+        leftSection?: JSX.Element;
+        rightSection?: JSX.Element;
+        onClick?: () => void;
+      }
+  )[];
+};
+const Component = create_component({
+  name: "Menu",
+  description: "The menu UI element",
+  props: {
+    labelProps: {
+      color: "primary",
+    },
+    items: [],
+    label: "",
+  } as Props,
+  propsDef: {
+    label: { type: "text", label: "Label" },
+    shadow: { type: "size", label: "Shadow" },
+    width: { type: "number", label: "Width" },
+    opened: { type: "switch", label: "Opened" },
+    withArrow: { type: "switch", label: "With Arrow" },
+    position: {
+      type: "select",
+      options: [
+        "bottom",
+        "top",
+        "left",
+        "right",
+        "bottom-start",
+        "bottom-end",
+        "top-start",
+        "top-end",
+        "left-start",
+        "left-end",
+        "right-start",
+        "right-end",
+      ],
+      label: "Position",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { label, labelProps, items, ...other } = this.props;
+    return (
+      <Menu {...other}>
+        <Menu.Target>
+          <Button {...labelProps}>{label}</Button>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          {items.map((item, i) => {
+            if (item.type === "divider") {
+              return <Menu.Divider key={i} />;
+            }
+            if (item.type === "label") {
+              return <Menu.Label key={i}>{item.text}</Menu.Label>;
+            }
+            return (
+              <Menu.Item
+                key={i}
+                leftSection={item.leftSection}
+                rightSection={item.rightSection}
+                onClick={item.onClick}
+              >
+                {item.text}
+              </Menu.Item>
+            );
+          })}
+        </Menu.Dropdown>
+      </Menu>
+    );
+  },
+});
+export default Component;

package/ui/modal.tsx

@@ -0,0 +1,27 @@
+import { Modal, ModalProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = ModalProps;
+const Component = create_component({
+  name: "Modal",
+  description: "The modal UI element",
+  props: {} as Props,
+  propsDef: {
+    title: { type: "text", label: "Title" },
+    opened: { type: "switch", label: "Opened" },
+    centered: { type: "switch", label: "Centered" },
+    withCloseButton: { type: "switch", label: "Close Button" },
+    size: { type: "size", label: "Size" },
+    padding: { type: "size", label: "Padding" },
+    radius: { type: "size", label: "Radius" },
+    shadow: { type: "size", label: "Shadow" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Modal {...other}>{children}</Modal>;
+  },
+});
+export default Component;

package/ui/multiselect.tsx

@@ -0,0 +1,42 @@
+import { MultiSelect, MultiSelectProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = MultiSelectProps;
+const Component = create_component({
+  name: "MultiSelect",
+  description: "The multiselect UI element",
+  props: {
+    placeholder: "Placeholder...",
+  } as Props,
+  propsDef: {
+    data: { type: "list-text", label: "Data" },
+    label: { type: "text", label: "Label" },
+    description: { type: "text", label: "Description" },
+    error: { type: "text", label: "Error" },
+    placeholder: { type: "text", label: "Placeholder" },
+    searchable: { type: "switch", label: "Searchable" },
+    clearable: { type: "switch", label: "Clearable" },
+    disabled: { type: "switch", label: "Disabled" },
+    withAsterisk: { type: "switch", label: "With Asterisk" },
+    maxValues: { type: "number", label: "Max Values" },
+    variant: {
+      type: "select",
+      options: ["default", "filled", "unstyled"],
+      label: "Variant",
+    },
+    size: { type: "size", label: "Size" },
+    radius: { type: "size", label: "Radius" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return (
+      <MultiSelect maw="100%" {...other}>
+        {children}
+      </MultiSelect>
+    );
+  },
+});
+export default Component;

package/ui/nativeselect.tsx

@@ -0,0 +1,17 @@
+import { NativeSelect, NativeSelectProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = NativeSelectProps;
+const Component = create_component({
+  name: "NativeSelect",
+  description: "The nativeselect UI element",
+  props: {
+    data: ["Item 1", "Item 2", "Item 3"],
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <NativeSelect {...other}>{children}</NativeSelect>;
+  },
+});
+export default Component;

package/ui/navlink.tsx

@@ -0,0 +1,40 @@
+import { NavLink, NavLinkProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+import Link from "next/link";
+
+type Props = NavLinkProps & { href?: string };
+const Component = create_component({
+  name: "NavLink",
+  description: "The navlink UI element",
+  props: {} as Props,
+  propsDef: {
+    label: { type: "text", label: "Label" },
+    description: { type: "text", label: "Description" },
+    href: { type: "text", label: "Href" },
+    active: { type: "switch", label: "Active" },
+    disabled: { type: "switch", label: "Disabled" },
+    color: { type: "color", label: "Color" },
+    variant: {
+      type: "select",
+      options: ["filled", "light", "subtle"],
+      label: "Variant",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, href, ...other } = this.props;
+    if (href) {
+      return (
+        <Link href={href} passHref>
+          <NavLink component="a" {...other}>
+            {children}
+          </NavLink>
+        </Link>
+      );
+    }
+    return <NavLink {...other}>{children}</NavLink>;
+  },
+});
+export default Component;

package/ui/notification.tsx

@@ -0,0 +1,25 @@
+import { Notification, NotificationProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef, colorPropsDef } from "./propsDef";
+
+type Props = NotificationProps;
+const Component = create_component({
+  name: "Notification",
+  description: "The notification UI element",
+  props: {} as Props,
+  propsDef: {
+    title: { type: "text", label: "Title" },
+    loading: { type: "switch", label: "Loading" },
+    withCloseButton: { type: "switch", label: "Close Button" },
+    withBorder: { type: "switch", label: "With Border" },
+    radius: { type: "size", label: "Radius" },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Notification {...other}>{children}</Notification>;
+  },
+});
+export default Component;