southpaw 0.2.7

package/ui/simplegrid.tsx

@@ -0,0 +1,23 @@
+import { SimpleGrid, SimpleGridProps, Text } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = SimpleGridProps;
+const Component = create_component({
+  name: "SimpleGrid",
+  description: "The simplegrid UI element",
+  props: {
+    children: [
+      <Text key={0}>Cell 1</Text>,
+      <Text key={1}>Cell 2</Text>,
+      <Text key={2}>Cell 3</Text>,
+      <Text key={3}>Cell 4</Text>,
+    ],
+    cols: 2,
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <SimpleGrid {...other}>{children}</SimpleGrid>;
+  },
+});
+export default Component;

package/ui/skeleton.tsx

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

package/ui/slider.tsx

@@ -0,0 +1,31 @@
+import { Slider, SliderProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = SliderProps;
+const Component = create_component({
+  name: "Slider",
+  description: "The slider UI element",
+  props: {
+    w: 100,
+  } as Props,
+  propsDef: {
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    radius: { type: "size", label: "Radius" },
+    min: { type: "number", label: "Min" },
+    max: { type: "number", label: "Max" },
+    step: { type: "number", label: "Step" },
+    label: { type: "text", label: "Label" },
+    inverted: { type: "switch", label: "Inverted" },
+    disabled: { type: "switch", label: "Disabled" },
+    thumbSize: { type: "number", label: "Thumb Size" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Slider {...other}>{children}</Slider>;
+  },
+});
+export default Component;

package/ui/space.tsx

@@ -0,0 +1,19 @@
+import { Space, SpaceProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = SpaceProps;
+const Component = create_component({
+  name: "Space",
+  description: "The space UI element",
+  props: {} as Props,
+  propsDef: {
+    w: { type: "size", label: "Width" },
+    h: { type: "size", label: "Height" },
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Space {...other}>{children}</Space>;
+  },
+});
+export default Component;

package/ui/spoiler.tsx

@@ -0,0 +1,23 @@
+import { Spoiler, SpoilerProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = SpoilerProps;
+const Component = create_component({
+  name: "Spoiler",
+  description: "The spoiler UI element",
+  props: {} as Props,
+  propsDef: {
+    maxHeight: { type: "number", label: "Max Height" },
+    showLabel: { type: "text", label: "Show Label" },
+    hideLabel: { type: "text", label: "Hide Label" },
+    transitionDuration: { type: "number", label: "Duration" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Spoiler {...other}>{children}</Spoiler>;
+  },
+});
+export default Component;

package/ui/stepper.tsx

@@ -0,0 +1,63 @@
+import { Stepper, StepperProps, StepperStepProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+import { ReactNode } from "react";
+
+type Props = Omit<StepperProps, "children"> & {
+  steps: StepperStepProps[];
+  completed: ReactNode;
+};
+const Component = create_component({
+  name: "Stepper",
+  description: "The stepper UI element",
+  props: {
+    active: 0,
+    steps: [
+      {
+        title: "Step 1",
+      },
+      {
+        title: "Step 2",
+      },
+      {
+        title: "Step 3",
+      },
+    ],
+    completed: "Completed",
+  } as Props,
+  propsDef: {
+    active: { type: "number", label: "Active Step" },
+    orientation: {
+      type: "select",
+      options: ["horizontal", "vertical"],
+      label: "Orientation",
+    },
+    iconSize: { type: "number", label: "Icon Size" },
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    radius: { type: "size", label: "Radius" },
+    allowNextStepsSelect: { type: "switch", label: "Allow Next Select" },
+    ...spacingPropsDef,
+  },
+  computed: {
+    steps() {
+      return this.props.steps.map((step, i) => {
+        return <Stepper.Step {...step} key={i} />;
+      });
+    },
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { steps, completed, ...other } = this.props;
+    if (!this.computed.steps.length) {
+      return null;
+    }
+    return (
+      <Stepper {...other}>
+        {this.computed.steps}
+        {completed && <Stepper.Completed>{completed}</Stepper.Completed>}
+      </Stepper>
+    );
+  },
+});
+export default Component;

package/ui/switch.tsx

@@ -0,0 +1,29 @@
+import { Switch, SwitchProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = SwitchProps;
+const Component = create_component({
+  name: "Switch",
+  description: "The switch 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" },
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    radius: { type: "size", label: "Radius" },
+    onLabel: { type: "text", label: "On Label" },
+    offLabel: { type: "text", label: "Off Label" },
+    checked: { type: "switch", label: "Checked" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { ...other } = this.props;
+    return <Switch {...other} />;
+  },
+});
+export default Component;

package/ui/table.tsx

@@ -0,0 +1,93 @@
+import { Table, TableProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+import { ChangeEventHandler, ReactNode } from "react";
+import { UI } from ".";
+
+type Props = TableProps & {
+  columns: ReactNode[];
+  rows: ReactNode[][];
+  selectableRows?: boolean;
+  selectedRows?: number[];
+  onRowSelect?: (rowIndex: number) => void;
+  onRowUnselect?: (rowIndex: number) => void;
+};
+const Component = create_component({
+  name: "Table",
+  description: "The table UI element",
+  props: {
+    selectableRows: false,
+    selectedRows: [],
+    onRowSelect: () => {},
+    onRowUnselect: () => {},
+    columns: ["Col 1", "Col 2", "Col 3"],
+    rows: [
+      ["Row 1", "Row 1", "Row 1"],
+      ["Row 2", "Row 2", "Row 2"],
+    ],
+  } as Props,
+  propsDef: {
+    striped: { type: "switch", label: "Striped" },
+    highlightOnHover: { type: "switch", label: "Highlight on Hover" },
+    withTableBorder: { type: "switch", label: "Table Border" },
+    withColumnBorders: { type: "switch", label: "Column Borders" },
+    horizontalSpacing: { type: "size", label: "Horizontal Spacing" },
+    verticalSpacing: { type: "size", label: "Vertical Spacing" },
+    layout: {
+      type: "select",
+      options: ["fixed", "auto"],
+      label: "Layout",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    const {
+      columns,
+      rows,
+      selectableRows,
+      selectedRows,
+      onRowSelect,
+      onRowUnselect,
+      ...other
+    } = this.props;
+    return (
+      <Table {...other}>
+        <Table.Thead>
+          <Table.Tr>
+            {selectableRows && <Table.Th />}
+            {columns.map((column, i) => {
+              return <Table.Th key={i}>{column}</Table.Th>;
+            })}
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {rows.map((row, i) => {
+            const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+              if (event.currentTarget.checked) {
+                onRowSelect!(i);
+              } else {
+                onRowUnselect!(i);
+              }
+            };
+            return (
+              <Table.Tr key={i}>
+                {selectableRows && (
+                  <Table.Td>
+                    <UI.checkbox
+                      checked={selectedRows!.includes(i)}
+                      onChange={onChange}
+                    />
+                  </Table.Td>
+                )}
+                {columns.map((_, x) => {
+                  return <Table.Td key={x}>{row[x]}</Table.Td>;
+                })}
+              </Table.Tr>
+            );
+          })}
+        </Table.Tbody>
+      </Table>
+    );
+  },
+});
+export default Component;

package/ui/tabs.tsx

@@ -0,0 +1,80 @@
+import { Tabs, TabsProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+import { ReactNode } from "react";
+
+type Props = Omit<TabsProps, "children"> & {
+  tabs: {
+    header: ReactNode | string;
+    icon?: ReactNode;
+    content: ReactNode | string;
+    value: string;
+  }[];
+};
+const Component = create_component({
+  name: "Tabs",
+  description: "The tabs UI element",
+  props: {
+    tabs: [
+      {
+        header: "Tab 1",
+        content: "Content for Tab 1",
+        value: "tab1",
+      },
+      {
+        header: "Tab 2",
+        content: "Content for Tab 2",
+        value: "tab2",
+      },
+    ],
+  } as Props,
+  propsDef: {
+    variant: {
+      type: "select",
+      options: ["default", "outline", "pills"],
+      label: "Variant",
+    },
+    color: { type: "color", label: "Color" },
+    radius: { type: "size", label: "Radius" },
+    orientation: {
+      type: "select",
+      options: ["horizontal", "vertical"],
+      label: "Orientation",
+    },
+    placement: {
+      type: "select",
+      options: ["left", "right"],
+      label: "Placement",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { tabs, ...other } = this.props;
+    return (
+      <Tabs {...other}>
+        <Tabs.List>
+          {tabs.map((tab) => {
+            return (
+              <Tabs.Tab
+                key={tab.value}
+                value={tab.value}
+                leftSection={tab.icon}
+              >
+                {tab.header}
+              </Tabs.Tab>
+            );
+          })}
+        </Tabs.List>
+        {tabs.map((tab) => {
+          return (
+            <Tabs.Panel key={tab.value} value={tab.value}>
+              {tab.content}
+            </Tabs.Panel>
+          );
+        })}
+      </Tabs>
+    );
+  },
+});
+export default Component;

package/ui/tagsinput.tsx

@@ -0,0 +1,19 @@
+import { TagsInput, TagsInputProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = TagsInputProps;
+const Component = create_component({
+  name: "TagsInput",
+  description: "The tagsinput UI element",
+  props: {
+    placeholder: "Add a tag",
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return (
+      <TagsInput maw="100%" {...other} />
+    );
+  },
+});
+export default Component;

package/ui/terminal.tsx

@@ -0,0 +1,44 @@
+import { CodeProps } from "@mantine/core";
+
+import { create_component } from "../modules/component";
+import { CommonProps } from "./props";
+import { UI } from ".";
+
+type Props = CommonProps &
+  CodeProps & {
+    codes: string[];
+    colorScheme?: "light" | "dark";
+  };
+const Component = create_component({
+  name: "Terminal",
+  description: "The terminal UI element",
+  props: {
+    codes: ["mkdir folder"],
+    colorScheme: "light",
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { codes, colorScheme, ...other } = this.props;
+    return (
+      <UI.flex direction="column" p="xs" bg="dark.5">
+        {codes.map((code) => (
+          <UI.flex key={code} align="center">
+            <UI.text text="$" c="dark.0" />
+            <UI.code
+              key={code}
+              code={code}
+              themes={{
+                dark: "houston",
+                light: "houston",
+              }}
+              colorScheme={colorScheme}
+              codeLang="bash"
+              {...other}
+            />
+          </UI.flex>
+        ))}
+      </UI.flex>
+    );
+  },
+});
+export default Component;

package/ui/text.tsx

@@ -0,0 +1,168 @@
+import { Text, TextProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import {
+  IconItalic,
+  IconLetterCase,
+  IconLetterCaseLower,
+  IconLetterCaseUpper,
+  IconOverline,
+  IconStrikethrough,
+  IconLetterA,
+  IconAlignCenter,
+  IconAlignJustified,
+  IconAlignLeft,
+  IconAlignRight,
+} from "@tabler/icons-react";
+import { colorPropsDef, spacingPropsDef } from "./propsDef";
+import { CommonProps } from "./props";
+
+type Props = CommonProps & TextProps & { text: string };
+const Component = create_component({
+  name: "Text",
+  description: "The text UI element",
+  props: {
+    mount_animation: "fade",
+    text: "A text",
+  } as Props,
+  propsDef: {
+    text: {
+      label: "Text",
+      multiline: true,
+      type: "text",
+    },
+    fz: {
+      label: "Font size",
+      type: "number",
+    },
+    fw: {
+      label: "Font weight",
+      type: "select",
+      options: [
+        {
+          label: "100",
+          value: "100",
+        },
+        {
+          label: "200",
+          value: "200",
+        },
+        {
+          label: "300",
+          value: "300",
+        },
+        {
+          label: "400",
+          value: "400",
+        },
+        {
+          label: "500",
+          value: "500",
+        },
+        {
+          label: "600",
+          value: "600",
+        },
+        {
+          label: "700",
+          value: "700",
+        },
+        {
+          label: "800",
+          value: "800",
+        },
+        {
+          label: "900",
+          value: "900",
+        },
+      ],
+    },
+    tt: {
+      type: "segmented",
+      label: "Text transform",
+      options: [
+        {
+          label: <IconLetterCase size={20} />,
+          value: "capitalize",
+        },
+        {
+          label: <IconLetterCaseLower size={20} />,
+          value: "lowercase",
+        },
+        {
+          label: <IconLetterCaseUpper size={20} />,
+          value: "uppercase",
+        },
+      ],
+    },
+    fs: {
+      type: "segmented",
+      label: "Font style",
+      options: [
+        {
+          label: <IconLetterA size={20} />,
+          value: "normal",
+        },
+        {
+          label: <IconItalic size={20} />,
+          value: "italic",
+        },
+      ],
+    },
+    td: {
+      type: "segmented",
+      label: "Text decoration",
+      options: [
+        {
+          label: <IconLetterA size={20} />,
+          value: "none",
+        },
+        {
+          label: <IconOverline size={20} />,
+          value: "overline",
+        },
+        {
+          label: <IconStrikethrough size={20} />,
+          value: "line-through",
+        },
+      ],
+    },
+    ta: {
+      type: "segmented",
+      label: "Text align",
+      options: [
+        {
+          label: <IconAlignLeft size={20} />,
+          value: "left",
+        },
+        {
+          label: <IconAlignCenter size={20} />,
+          value: "center",
+        },
+        {
+          label: <IconAlignRight size={20} />,
+          value: "right",
+        },
+        {
+          label: <IconAlignJustified size={20} />,
+          value: "justify",
+        },
+      ],
+    },
+    lts: {
+      type: "number",
+      label: "Letter spacing",
+    },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { text, ...other } = this.props;
+    return (
+      <Text display="inline" {...other}>
+        {text}
+      </Text>
+    );
+  },
+});
+export default Component;

package/ui/textarea.tsx

@@ -0,0 +1,36 @@
+import { Textarea, TextareaProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = TextareaProps;
+const Component = create_component({
+  name: "Textarea",
+  description: "The textarea 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",
+    },
+    autosize: { type: "switch", label: "Autosize" },
+    minRows: { type: "number", label: "Min Rows" },
+    maxRows: { type: "number", label: "Max Rows" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Textarea {...other} />;
+  },
+});
+export default Component;

package/ui/textinput.tsx

@@ -0,0 +1,34 @@
+import { TextInput, TextInputProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = TextInputProps;
+const Component = create_component({
+  name: "TextInput",
+  description: "The textinput UI element",
+  props: {
+    placeholder: "Textinput...",
+  } 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" },
+    withAsterisk: { type: "switch", label: "With Asterisk" },
+    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 <TextInput {...other} />;
+  },
+});
+export default Component;