southpaw 0.2.7

package/ui/divider.tsx

@@ -0,0 +1,58 @@
+import { Divider, DividerProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef, colorPropsDef } from "./propsDef";
+
+type Props = DividerProps;
+const Component = create_component({
+  name: "Divider",
+  description: "The divider UI element",
+  props: {
+    // children: "Divider label",
+  } as Props,
+  propsDef: {
+    size: {
+      type: "size",
+      label: "Size",
+    },
+    orientation: {
+      type: "select",
+      label: "Orientation",
+      options: [
+        {
+          label: "Horizontal",
+          value: "horizontal",
+        },
+        {
+          label: "Vertical",
+          value: "vertical",
+        },
+      ],
+    },
+    labelPosition: {
+      type: "select",
+      label: "Label position",
+      options: [
+        {
+          label: "Left",
+          value: "left",
+        },
+        {
+          label: "Center",
+          value: "center",
+        },
+        {
+          label: "Right",
+          value: "right",
+        },
+      ],
+    },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Divider {...other} label={children} />;
+  },
+});
+export default Component;

package/ui/drawer.tsx

@@ -0,0 +1,28 @@
+import { Drawer, DrawerProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = DrawerProps;
+const Component = create_component({
+  name: "Drawer",
+  description: "The drawer UI element",
+  props: {} as Props,
+  propsDef: {
+    title: { type: "text", label: "Title" },
+    opened: { type: "switch", label: "Opened" },
+    position: {
+      type: "select",
+      options: ["left", "right", "top", "bottom"],
+      label: "Position",
+    },
+    size: { type: "size", label: "Size" },
+    padding: { type: "size", label: "Padding" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Drawer {...other}>{children}</Drawer>;
+  },
+});
+export default Component;

package/ui/fieldset.tsx

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

package/ui/filebutton.tsx

@@ -0,0 +1,23 @@
+import { ButtonProps, FileButton, FileButtonProps, Text } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { UI } from ".";
+
+type Props = FileButtonProps & ButtonProps;
+const Component = create_component({
+  name: "FileButton",
+  description: "The filebutton UI element",
+  props: {
+    color: "primary",
+    children: <Text>Upload file</Text>,
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return (
+      <FileButton {...other}>
+        {(props) => <UI.button {...props}>{children}</UI.button>}
+      </FileButton>
+    );
+  },
+});
+export default Component;

package/ui/fileinput.tsx

@@ -0,0 +1,36 @@
+import { FileInput, FileInputProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = FileInputProps;
+const Component = create_component({
+  name: "FileInput",
+  description: "The fileinput UI element",
+  props: {
+    placeholder: "Choose file",
+  } 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",
+    },
+    clearable: { type: "switch", label: "Clearable" },
+    multiple: { type: "switch", label: "Multiple" },
+    accept: { type: "text", label: "Accept" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <FileInput {...other} />;
+  },
+});
+export default Component;

package/ui/flex.tsx

@@ -0,0 +1,139 @@
+import { Flex, FlexProps, Paper } from "@mantine/core";
+import { create_component } from "../modules/component";
+import {
+  IconAlignBoxRightMiddle,
+  IconAlignBoxLeftMiddle,
+  IconAlignBoxCenterMiddle,
+  IconAlignBoxBottomCenter,
+  IconAlignBoxCenterTop,
+  IconAlignBoxCenterStretch,
+} from "@tabler/icons-react";
+import { spacingPropsDef, colorPropsDef } from "./propsDef";
+import { CommonProps } from "./props";
+
+type Props = CommonProps &
+  FlexProps & {
+    tag?: keyof HTMLElementTagNameMap;
+  };
+const Component = create_component({
+  name: "Flex",
+  description: "The flex UI element",
+  props: {
+    mount_animation: "fade",
+    p: 0,
+    tag: "div",
+    direction: "row",
+    children: (
+      <Paper m="sm" p="xs" withBorder opacity={0.5}>
+        Add flex children here
+      </Paper>
+    ),
+  } as Props,
+  propsDef: {
+    direction: {
+      label: "Direction",
+      type: "select",
+      options: [
+        {
+          label: "Column",
+          value: "column",
+        },
+        {
+          label: "Row",
+          value: "row",
+        },
+      ],
+    },
+    p: {
+      label: "Padding",
+      type: "number",
+    },
+    gap: {
+      label: "Gap",
+      type: "number",
+    },
+    justify: {
+      label: "Justify content",
+      type: "segmented",
+      options: [
+        {
+          label: <IconAlignBoxLeftMiddle size={20} />,
+          value: "flex-start",
+        },
+        {
+          label: <IconAlignBoxCenterMiddle size={20} />,
+          value: "center",
+        },
+        {
+          label: <IconAlignBoxRightMiddle size={20} />,
+          value: "flex-end",
+        },
+        {
+          label: <IconAlignBoxCenterStretch size={20} />,
+          value: "space-around",
+        },
+        {
+          label: <IconAlignBoxCenterStretch size={20} />,
+          value: "space-between",
+        },
+      ],
+    },
+    align: {
+      label: "Align items",
+      type: "segmented",
+      options: [
+        {
+          label: <IconAlignBoxCenterTop title="flex-start" size={20} />,
+          value: "flex-start",
+        },
+        {
+          label: <IconAlignBoxCenterMiddle title="center" size={20} />,
+          value: "center",
+        },
+        {
+          label: <IconAlignBoxBottomCenter title="flex-end" size={20} />,
+          value: "flex-end",
+        },
+        {
+          label: <IconAlignBoxCenterStretch title="space-around" size={20} />,
+          value: "space-around",
+        },
+        {
+          label: <IconAlignBoxCenterStretch title="space-between" size={20} />,
+          value: "space-between",
+        },
+      ],
+    },
+    wrap: {
+      label: "Wrap",
+      type: "select",
+      options: [
+        {
+          label: "Wrap",
+          value: "wrap",
+        },
+        {
+          label: "Wrap reverse",
+          value: "wrap-reverse",
+        },
+        {
+          label: "Nowrap",
+          value: "nowrap",
+        },
+      ],
+    },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    delete this.props["mount_animation"];
+    const { children, tag, ...other } = this.props;
+    return (
+      <Flex {...other} component={tag as any}>
+        {children}
+      </Flex>
+    );
+  },
+});
+export default Component;

package/ui/focustrap.tsx

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

package/ui/form.tsx

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

package/ui/grid.tsx

@@ -0,0 +1,69 @@
+import { Grid, GridProps, GridColProps, Text } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = Omit<GridProps, "children"> & {
+  children: Array<JSX.Element>;
+  cells: {
+    offset?: GridColProps["offset"];
+    order?: GridColProps["order"];
+    span: GridColProps["span"];
+  }[];
+};
+const Component = create_component({
+  name: "Grid",
+  description: "The grid UI element",
+  props: {
+    children: [
+      <Text key={0}>Grid cell 1</Text>,
+      <Text key={1}>Grid cell 2</Text>,
+      <Text key={2}>Grid cell 3</Text>,
+      <Text key={3}>Grid cell 4</Text>,
+    ],
+    cells: [
+      { offset: 0, order: 0, span: 6 },
+      { offset: 0, order: 0, span: 6 },
+      { offset: 0, order: 0, span: 6 },
+      { offset: 0, order: 0, span: 6 },
+    ],
+  } as Props,
+  propsDef: {
+    grow: { type: "switch", label: "Grow" },
+    gutter: { type: "size", label: "Gutter" },
+    columns: { type: "number", label: "Columns" },
+    align: {
+      type: "select",
+      options: ["stretch", "center", "flex-start", "flex-end"],
+      label: "Align",
+    },
+    justify: {
+      type: "select",
+      options: [
+        "space-between",
+        "space-around",
+        "center",
+        "flex-start",
+        "flex-end",
+      ],
+      label: "Justify",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, cells, ...other } = this.props;
+    return (
+      <Grid {...other}>
+        {children.map((child, i) => {
+          const colProps = cells[i] || {};
+          return (
+            <Grid.Col key={i} {...colProps}>
+              {child}
+            </Grid.Col>
+          );
+        })}
+      </Grid>
+    );
+  },
+});
+export default Component;

package/ui/highlight.tsx

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

package/ui/hoverable.tsx

@@ -0,0 +1,66 @@
+import { BoxProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import {
+  cloneElement,
+  MouseEvent,
+  PropsWithChildren,
+  ReactElement,
+} from "react";
+
+type Props = PropsWithChildren<
+  BoxProps & {
+    inAnimation: {
+      keyframes: Keyframe[];
+      options: KeyframeAnimationOptions;
+    };
+    outAnimation: {
+      keyframes: Keyframe[];
+      options: KeyframeAnimationOptions;
+    };
+  }
+>;
+const Component = create_component({
+  name: "Hoverable",
+  description: "The hoverable UI element",
+  props: {} as Props,
+  methods: {
+    onMouseEnter(event: MouseEvent<HTMLDivElement>) {
+      const el = event.currentTarget as HTMLDivElement;
+      this.methods.inAnim(el);
+    },
+    onMouseLeave(event: MouseEvent<HTMLDivElement>) {
+      const el = event.currentTarget as HTMLDivElement;
+      this.methods.outAnim(el);
+    },
+    inAnim(el: HTMLDivElement) {
+      el.animate(
+        this.props.inAnimation.keyframes,
+        this.props.inAnimation.options,
+      );
+    },
+    outAnim(el: HTMLDivElement) {
+      const animation = el.animate(
+        this.props.outAnimation.keyframes,
+        this.props.outAnimation.options,
+      );
+      animation.onfinish = () => {
+        animation.cancel();
+      };
+    },
+  },
+  render() {
+    delete this.props["mount_animation"];
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, inAnimation, outAnimation, ...other } = this.props;
+    const { onMouseEnter, onMouseLeave } = this.methods;
+    if (!children) {
+      return null;
+    }
+    return cloneElement(children as ReactElement, {
+      ...other,
+      onMouseEnter,
+      onMouseLeave,
+    });
+  },
+});
+export default Component;

package/ui/hovercard.tsx

@@ -0,0 +1,45 @@
+import { Button, ButtonProps, HoverCard, HoverCardProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+import { ReactNode } from "react";
+
+type Props = HoverCardProps & {
+  content: ReactNode;
+  label: string;
+  buttonProps: ButtonProps;
+};
+const Component = create_component({
+  name: "HoverCard",
+  description: "The hovercard UI element",
+  props: {
+    buttonProps: {
+      color: "primary",
+    },
+  } as Props,
+  propsDef: {
+    width: { type: "number", label: "Width" },
+    shadow: { type: "size", label: "Shadow" },
+    openDelay: { type: "number", label: "Open Delay" },
+    closeDelay: { type: "number", label: "Close Delay" },
+    position: {
+      type: "select",
+      options: ["bottom", "top", "left", "right"],
+      label: "Position",
+    },
+    withArrow: { type: "switch", label: "With Arrow" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { content, label, buttonProps, ...other } = this.props;
+    return (
+      <HoverCard {...other}>
+        <HoverCard.Target>
+          <Button {...buttonProps}>{label}</Button>
+        </HoverCard.Target>
+        <HoverCard.Dropdown>{content}</HoverCard.Dropdown>
+      </HoverCard>
+    );
+  },
+});
+export default Component;

package/ui/icon.tsx

@@ -0,0 +1,76 @@
+import { create_component } from "../modules/component";
+import { ICONS } from "../constants/icons";
+import { Box, BoxProps } from "@mantine/core";
+
+type Props = BoxProps & {
+  ariaLabel?: string;
+  fill?: boolean;
+  weight?: number;
+  opticalSize?: number;
+  icon: (typeof ICONS)[number];
+};
+const Component = create_component({
+  name: "Icon",
+  description: "The icon UI element",
+  props: {
+    fill: false,
+    weight: 500,
+    opticalSize: 46,
+    icon: "favorite",
+    fz: 20,
+  } as Props,
+  propsDef: {
+    icon: {
+      type: "icon",
+      label: "Icon",
+    },
+    fz: {
+      type: "number",
+      label: "Size",
+    },
+    fill: {
+      type: "switch",
+      label: "Fill",
+    },
+    weight: {
+      type: "number",
+      label: "Weight",
+    },
+    opticalSize: {
+      type: "number",
+      label: "Optical size",
+    },
+  },
+  lifecycle: {
+    onMount() {
+      const iconsEl = document.head.querySelector("#icons-stylesheet");
+      if (!iconsEl) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.id = "icons-stylesheet";
+        link.href =
+          "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+        document.head.appendChild(link);
+      }
+    },
+  },
+  render() {
+    const { icon, ariaLabel, weight, fill, opticalSize, ...other } = this.props;
+    return (
+      <Box
+        {...other}
+        aria-label={ariaLabel}
+        className="ui-icon material-symbols-outlined"
+        style={{
+          userSelect: "none",
+          fontVariationSettings: `'FILL' ${Number(
+            fill,
+          )}, 'wght' ${weight}, 'GRAD' 0, 'opsz' ${opticalSize}`,
+        }}
+      >
+        {icon}
+      </Box>
+    );
+  },
+});
+export default Component;

package/ui/image.tsx

@@ -0,0 +1,32 @@
+import { Image, ImageProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = ImageProps & {
+  alt: string;
+};
+const Component = create_component({
+  name: "Image",
+  description: "The image UI element",
+  props: {
+    src: "https://placehold.co/600x400",
+  } as Props,
+  propsDef: {
+    src: { type: "text", label: "Source" },
+    alt: { type: "text", label: "Alt Text" },
+    radius: { type: "size", label: "Radius" },
+    fit: {
+      type: "select",
+      options: ["contain", "cover", "fill", "none", "scale-down"],
+      label: "Fit",
+    },
+    fallbackSrc: { type: "text", label: "Fallback Source" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { ...other } = this.props;
+    return <Image {...other} />;
+  },
+});
+export default Component;