southpaw 0.2.7

package/ui/box.tsx

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

package/ui/breadcrumbs.tsx

@@ -0,0 +1,33 @@
+import { Anchor, Breadcrumbs, BreadcrumbsProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = BreadcrumbsProps;
+const Component = create_component({
+  name: "Breadcrumbs",
+  description: "The breadcrumbs UI element",
+  props: {
+    separator: "/",
+    children: [
+      <Anchor key={0} href="#">
+        Home
+      </Anchor>,
+      <Anchor key={1} href="/about">
+        About
+      </Anchor>,
+      <Anchor key={2} href="/contact">
+        Contact
+      </Anchor>,
+    ],
+  } as Props,
+  propsDef: {
+    separator: { type: "text", label: "Separator" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Breadcrumbs {...other}>{children}</Breadcrumbs>;
+  },
+});
+export default Component;

package/ui/burger.tsx

@@ -0,0 +1,23 @@
+import { Burger, BurgerProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = BurgerProps;
+const Component = create_component({
+  name: "Burger",
+  description: "The burger UI element",
+  props: {} as Props,
+  propsDef: {
+    opened: { type: "switch", label: "Opened" },
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    transitionDuration: { type: "number", label: "Duration" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Burger {...other}>{children}</Burger>;
+  },
+});
+export default Component;

package/ui/button.tsx

@@ -0,0 +1,85 @@
+import { Button, ButtonProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { CommonProps } from "./props";
+import { spacingPropsDef } from "./propsDef";
+import Text from "./text";
+
+type Props = CommonProps &
+  ButtonProps & {
+    onClick?: (...args: any[]) => void;
+    component?: any;
+    href?: string;
+  };
+const Component = create_component({
+  name: "Button",
+  description: "The button UI element",
+  props: {
+    children: <Text text="Button" />,
+    fullWidth: false,
+  } as Props,
+  propsDef: {
+    onClick: {
+      type: "action",
+      label: "On click",
+    },
+    color: {
+      type: "color",
+      label: "Background",
+    },
+    variant: {
+      label: "Variant",
+      type: "select",
+      options: [
+        {
+          label: "Default",
+          value: "default",
+        },
+        {
+          label: "Filled",
+          value: "filled",
+        },
+        {
+          label: "Light",
+          value: "light",
+        },
+        {
+          label: "Outline",
+          value: "outline",
+        },
+        {
+          label: "Subtle",
+          value: "subtle",
+        },
+        {
+          label: "Transparent",
+          value: "transparent",
+        },
+        {
+          label: "White",
+          value: "white",
+        },
+      ],
+    },
+    size: {
+      type: "size",
+      label: "Size",
+    },
+    radius: {
+      type: "size",
+      label: "Radius",
+    },
+    fullWidth: {
+      type: "switch",
+      label: "Full width",
+    },
+
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    // Cast to any to avoid fighting Mantine's complex polymorphic types
+    return <Button {...(other as any)}>{children}</Button>;
+  },
+});
+export default Component;

package/ui/card.tsx

@@ -0,0 +1,28 @@
+import { Card, CardProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { colorPropsDef, spacingPropsDef } from "./propsDef";
+
+type Props = CardProps;
+const Component = create_component({
+  name: "Card",
+  description: "The card UI element",
+  props: {} as Props,
+  propsDef: {
+    withBorder: {
+      type: "switch",
+      label: "Border",
+    },
+    shadow: {
+      type: "size",
+      label: "Shadow",
+    },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Card {...other}>{children}</Card>;
+  },
+});
+export default Component;

package/ui/center.tsx

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

package/ui/checkbox.tsx

@@ -0,0 +1,35 @@
+import { Checkbox, CheckboxProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = CheckboxProps;
+const Component = create_component({
+  name: "Checkbox",
+  description: "The checkbox UI element",
+  props: {} as Props,
+  propsDef: {
+    label: { type: "text", label: "Label" },
+    description: { type: "text", label: "Description" },
+    error: { type: "text", label: "Error" },
+    disabled: { type: "switch", label: "Disabled" },
+    indeterminate: { type: "switch", label: "Indeterminate" },
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    radius: { type: "size", label: "Radius" },
+    labelPosition: {
+      type: "segmented",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" },
+      ],
+      label: "Label Position",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { ...other } = this.props;
+    return <Checkbox {...other} />;
+  },
+});
+export default Component;

package/ui/chip.tsx

@@ -0,0 +1,32 @@
+import { Chip, ChipProps, Text } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = ChipProps;
+const Component = create_component({
+  name: "Chip",
+  description: "The chip UI element",
+  props: {
+    children: <Text>Label</Text>,
+  } as Props,
+  propsDef: {
+    checked: { type: "switch", label: "Checked" },
+    defaultChecked: { type: "switch", label: "Default Checked" },
+    disabled: { type: "switch", label: "Disabled" },
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    variant: {
+      type: "select",
+      options: ["outline", "filled", "light"],
+      label: "Variant",
+    },
+    radius: { type: "size", label: "Radius" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Chip {...other}>{children}</Chip>;
+  },
+});
+export default Component;

package/ui/closebutton.tsx

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

package/ui/code.tsx

@@ -0,0 +1,104 @@
+import { Code, CodeProps } from "@mantine/core";
+import { BuiltinLanguage, codeToHtml, BuiltinTheme } from "shiki";
+
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = CodeProps & {
+  code: string;
+  colorScheme?: "light" | "dark";
+  codeLang?: BuiltinLanguage;
+  themes?: {
+    dark: BuiltinTheme;
+    light: BuiltinTheme;
+  };
+};
+const Component = create_component({
+  name: "Code",
+  description: "The code UI element",
+  state: {
+    code: "",
+  },
+  props: {
+    codeLang: "tsx",
+    themes: {
+      dark: "dark-plus",
+      light: "light-plus",
+    },
+    colorScheme: "light",
+    fz: "sm",
+    fw: 500,
+    code: "alert('Hello')",
+  } as Props,
+  propsDef: {
+    code: {
+      type: "text",
+      multiline: true,
+      label: "Code",
+    },
+    codeLang: {
+      type: "text",
+      label: "Language",
+    },
+    colorScheme: {
+      type: "segmented",
+      options: [
+        { label: "Light", value: "light" },
+        { label: "Dark", value: "dark" },
+      ],
+      label: "Color Scheme",
+    },
+    block: {
+      type: "switch",
+      label: "Block",
+    },
+    ...spacingPropsDef,
+  },
+  methods: {
+    async refreshCode() {
+      if (!this.props.code) {
+        return;
+      }
+      try {
+        const code = await codeToHtml(this.props.code, {
+          lang: this.props.codeLang!,
+          themes: this.props.themes!,
+          defaultColor: this.props.colorScheme!,
+        });
+        this.state.code = code;
+      } catch (err) {
+        throw new Error(
+          `Error while converting code to html: ${(err as Error).message}`,
+        );
+      }
+    },
+  },
+  lifecycle: {
+    async onPropChange(propName) {
+      if (["code", "codeLang", "colorScheme"].includes(propName)) {
+        await this.methods.refreshCode();
+      }
+    },
+    async onMount() {
+      await this.methods.refreshCode();
+    },
+  },
+  render() {
+    delete this.props["mount_animation"];
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { code, codeLang, colorScheme, style = {}, ...other } = this.props;
+    return (
+      <Code
+        {...other}
+        dangerouslySetInnerHTML={{ __html: this.state.code }}
+        style={{
+          overflow: "auto",
+          display: "inline-flex",
+          ...style,
+          // alignItems: "center",
+        }}
+      />
+    );
+  },
+});
+export default Component;

package/ui/collapse.tsx

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

package/ui/colorinput.tsx

@@ -0,0 +1,32 @@
+import { ColorInput, ColorInputProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = ColorInputProps;
+const Component = create_component({
+  name: "ColorInput",
+  description: "The colorinput UI element",
+  props: {} as Props,
+  propsDef: {
+    size: { type: "size", label: "Size" },
+    label: { type: "text", label: "Label" },
+    description: { type: "text", label: "Description" },
+    error: { type: "text", label: "Error" },
+    placeholder: { type: "text", label: "Placeholder" },
+    disabled: { type: "switch", label: "Disabled" },
+    radius: { type: "size", label: "Radius" },
+    withEyeDropper: { type: "switch", label: "With Eye Dropper" },
+    format: {
+      type: "select",
+      options: ["hex", "rgb", "rgba", "hsl", "hsla"],
+      label: "Format",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <ColorInput {...other} />;
+  },
+});
+export default Component;

package/ui/colorpicker.tsx

@@ -0,0 +1,26 @@
+import { ColorPicker, ColorPickerProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = ColorPickerProps;
+const Component = create_component({
+  name: "ColorPicker",
+  description: "The colorpicker UI element",
+  props: {} as Props,
+  propsDef: {
+    format: {
+      type: "select",
+      options: ["hex", "rgb", "rgba", "hsl", "hsla"],
+      label: "Format",
+    },
+    size: { type: "size", label: "Size" },
+    fullWidth: { type: "switch", label: "Full Width" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <ColorPicker {...other}>{children}</ColorPicker>;
+  },
+});
+export default Component;

package/ui/colorswatch.tsx

@@ -0,0 +1,17 @@
+import { ColorSwatch, ColorSwatchProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = ColorSwatchProps & {
+  onClick?: () => void;
+};
+const Component = create_component({
+  name: "ColorSwatch",
+  description: "The colorswatch UI element",
+  props: {} as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <ColorSwatch {...other}>{children}</ColorSwatch>;
+  },
+});
+export default Component;

package/ui/combobox.tsx

@@ -0,0 +1,80 @@
+import { Combobox, ComboboxProps, TextInput, useCombobox } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = ComboboxProps & {
+  options: string[];
+  label?: string;
+  description?: string;
+  placeholder?: string;
+};
+const Component = create_component({
+  name: "Combobox",
+  description: "The combobox UI element",
+  props: {
+    placeholder: "Placeholder...",
+    options: [],
+  } as Props,
+  state: {
+    value: "",
+  },
+  computed: {
+    options() {
+      const shouldFilterOptions = !this.props.options.some(
+        (item) => item === this.state.value,
+      );
+      const filteredOptions = shouldFilterOptions
+        ? this.props.options.filter((item) =>
+            item.toLowerCase().includes(this.state.value.toLowerCase().trim()),
+          )
+        : this.props.options;
+
+      const options = filteredOptions.map((item) => (
+        <Combobox.Option value={item} key={item}>
+          {item}
+        </Combobox.Option>
+      ));
+      return options;
+    },
+  },
+  render() {
+    const combobox = useCombobox();
+    return (
+      <Combobox
+        onOptionSubmit={(optionValue) => {
+          this.state.value = optionValue;
+          combobox.closeDropdown();
+        }}
+        store={combobox}
+      >
+        <Combobox.Target>
+          <TextInput
+            label={this.props.label}
+            description={this.props.description}
+            placeholder={this.props.placeholder}
+            value={this.state.value}
+            onChange={(event) => {
+              this.state.value = event.currentTarget.value;
+              combobox.openDropdown();
+              combobox.updateSelectedOptionIndex();
+            }}
+            onClick={() => combobox.openDropdown()}
+            onFocus={() => combobox.openDropdown()}
+            onBlur={() => combobox.closeDropdown()}
+          />
+        </Combobox.Target>
+
+        <Combobox.Dropdown>
+          <Combobox.Options>
+            {this.computed.options.length === 0 ? (
+              <Combobox.Empty>Nothing found</Combobox.Empty>
+            ) : (
+              this.computed.options
+            )}
+          </Combobox.Options>
+        </Combobox.Dropdown>
+      </Combobox>
+    );
+  },
+});
+
+export default Component;

package/ui/container.tsx

@@ -0,0 +1,27 @@
+import { Container, ContainerProps, Paper } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = ContainerProps;
+const Component = create_component({
+  name: "Container",
+  description: "The container UI element",
+  props: {
+    children: (
+      <Paper m="sm" p="xs" withBorder opacity={0.5}>
+        Add container children here
+      </Paper>
+    ),
+  } as Props,
+  propsDef: {
+    size: { type: "size", label: "Size" },
+    fluid: { type: "switch", label: "Fluid" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Container {...other}>{children}</Container>;
+  },
+});
+export default Component;

package/ui/dialog.tsx

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