southpaw 0.2.7

package/ui/timeline.tsx

@@ -0,0 +1,30 @@
+import { Timeline, TimelineProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = TimelineProps;
+const Component = create_component({
+  name: "Timeline",
+  description: "The timeline UI element",
+  props: {} as Props,
+  propsDef: {
+    active: { type: "number", label: "Active Item" },
+    color: { type: "color", label: "Color" },
+    radius: { type: "size", label: "Radius" },
+    bulletSize: { type: "number", label: "Bullet Size" },
+    lineWidth: { type: "number", label: "Line Width" },
+    reverseActive: { type: "switch", label: "Reverse Active" },
+    align: {
+      type: "select",
+      options: ["left", "right"],
+      label: "Align",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Timeline {...other}>{children}</Timeline>;
+  },
+});
+export default Component;

package/ui/title.tsx

@@ -0,0 +1,42 @@
+import { Title, TitleProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { CommonProps } from "./props";
+import { spacingPropsDef, colorPropsDef } from "./propsDef";
+
+type Props = CommonProps &
+  Omit<TitleProps, "children"> & {
+    text: string;
+  };
+const Component = create_component({
+  name: "Title",
+  description: "The title UI element",
+  props: { text: "A title", order: 1 } as Props,
+  propsDef: {
+    text: {
+      label: "A title",
+      multiline: true,
+      type: "text",
+    },
+    order: {
+      type: "number",
+      label: "Order",
+      step: 1,
+      min: 1,
+      max: 6,
+    },
+    size: { type: "size", label: "Size" },
+    textWrap: {
+      type: "select",
+      options: ["wrap", "nowrap", "balance", "pretty"],
+      label: "Text Wrap",
+    },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { text, ...other } = this.props;
+    return <Title {...other}>{text}</Title>;
+  },
+});
+export default Component;

package/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+import { Tooltip, TooltipProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef, colorPropsDef } from "./propsDef";
+
+type Props = TooltipProps;
+const Component = create_component({
+  name: "Tooltip",
+  description: "The tooltip UI element",
+  props: {
+    children: <div>Tooltip content</div>,
+  } as Props,
+  propsDef: {
+    label: { type: "text", label: "Label" },
+    opened: { type: "switch", label: "Opened" },
+    position: {
+      type: "select",
+      options: ["bottom", "top", "left", "right"],
+      label: "Position",
+    },
+    withArrow: { type: "switch", label: "With Arrow" },
+    openDelay: { type: "number", label: "Open Delay" },
+    closeDelay: { type: "number", label: "Close Delay" },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Tooltip {...other}>{children}</Tooltip>;
+  },
+});
+export default Component;

package/ui/transition.tsx

@@ -0,0 +1,21 @@
+import { Transition, TransitionProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = TransitionProps;
+const Component = create_component({
+  name: "Transition",
+  description: "The transition UI element",
+  props: {
+    transition: "fade",
+    duration: 300,
+    timingFunction: "ease",
+    mounted: true,
+    children: (styles) => <div style={styles}>Transition child</div>,
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Transition {...other}>{children}</Transition>;
+  },
+});
+export default Component;

package/ui/tree.tsx

@@ -0,0 +1,42 @@
+import { Group, Tree, TreeProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+import { IconChevronRight } from "@tabler/icons-react";
+
+type Props = TreeProps;
+const Component = create_component({
+  name: "Tree",
+  description: "The tree UI element",
+  props: {
+    renderNode: ({ node, expanded, hasChildren, elementProps }) => (
+      <Group gap={5} {...elementProps}>
+        {hasChildren && (
+          <IconChevronRight
+            size={18}
+            style={{ transform: expanded ? "rotate(180deg)" : "rotate(0deg)" }}
+          />
+        )}
+
+        <span>{node.label}</span>
+      </Group>
+    ),
+    data: [
+      {
+        value: "1",
+        label: "Tree parent",
+        children: [
+          { value: "2", label: "Item 2" },
+          { value: "3", label: "Item 3" },
+        ],
+      },
+    ],
+  } as Props,
+  propsDef: {
+    levelOffset: { type: "number", label: "Level Offset" },
+    ...spacingPropsDef,
+  },
+  render() {
+    return <Tree {...this.props} />;
+  },
+});
+export default Component;

package/ui/typographystylesprovider.tsx

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

package/ui/unstyledbutton.tsx

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

package/ui/video.tsx

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

package/ui/visuallyhidden.tsx

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

package/utils/index.ts

@@ -0,0 +1,76 @@
+export const UTILS = {
+  string: {
+    toTitleCase(str: string) {
+      return str.replace(
+        /\w\S*/g,
+        (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(),
+      );
+    },
+  },
+  event: {
+    dispatch(name: string, detail: any) {
+      const event = new CustomEvent(name, { detail });
+      document.dispatchEvent(event);
+    },
+    listen(name: string, cb: (detail: any) => void) {
+      document.addEventListener(name, (e) => {
+        const event = e as CustomEvent;
+        cb(event.detail);
+      });
+    },
+  },
+  url: {
+    isImageUrl(url: string) {
+      const imageExtensions = [
+        ".jpg",
+        ".jpeg",
+        ".png",
+        ".gif",
+        ".bmp",
+        ".webp",
+        ".svg",
+        ".ico",
+      ];
+      const extension = url.toLowerCase().slice(url.lastIndexOf("."));
+      return imageExtensions.includes(extension);
+    },
+    parsePath(filePath: string): { fileName: string; ext: string } {
+      const parts = filePath.split("/");
+      const fileWithExt = parts[parts.length - 1];
+      const lastDotIndex = fileWithExt.lastIndexOf(".");
+
+      const fileName = fileWithExt.substring(0, lastDotIndex);
+      const ext = fileWithExt.substring(lastDotIndex + 1);
+
+      return {
+        fileName,
+        ext,
+      };
+    },
+    async fetchCdnContent(url: string): Promise<string> {
+      try {
+        const response = await fetch(url);
+        if (response.ok) {
+          const text = await response.text();
+          return text;
+        }
+        throw new Error(`Failed to fetch`);
+      } catch (error) {
+        return `Failed to fetch from ${url}: ${(error as Error).message}`;
+      }
+    },
+  },
+  input: {
+    debounce<T extends (...args: any[]) => void>(
+      func: T,
+      wait: number,
+    ): (...args: Parameters<T>) => void {
+      let timeout: ReturnType<typeof setTimeout>;
+
+      return function (...args: Parameters<T>) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+      };
+    },
+  },
+};