@usefui/components 1.5.1 → 1.5.3

package/src/resizable/Resizable.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Page, Resizable } from "..";
+
+/**
+ * Resizable are used to render children into separated sections that can be resized by users.
+ */
+const meta = {
+  title: "Components/Resizable",
+  component: Resizable,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Resizable>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    defaultWidth: 30,
+    left: (
+      <div
+        className="h-100 w-100 flex align-center justify-center"
+        style={{ borderRight: "1px solid var(--font-color-alpha-10)" }}
+      >
+        <p className="fs-medium-20">One</p>
+      </div>
+    ),
+    right: (
+      <div className="h-100 w-100 flex align-center justify-center">
+        <p className="fs-medium-20">Two</p>
+      </div>
+    ),
+  },
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content>
+        <Resizable {...args} />
+      </Page.Content>
+    </Page>
+  ),
+};

package/src/resizable/index.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React from "react";
+
+import {
+  SplitContainer,
+  Panel,
+  Divider,
+  DragHandle,
+  DragIndicator,
+  DragOverlay,
+} from "./styles";
+
+type ResizableEditorProperties = {
+  defaultWidth?: number;
+  left: React.ReactNode;
+  right: React.ReactNode;
+};
+
+/**
+ * Resizable are used to render children into separated sections that can be resized by users.
+ *
+ * @param {ResizableEditorProperties} props - The props for the Resizable component.
+ * @param {number} props.defaultWidth - The default width of the Resizable left section.
+ * @param {ReactNode} props.left - The content to be rendered inside the Left panel of the Resizable component.
+ * @param {ReactNode} props.right - The content to be rendered inside the Right panel of the Resizable component.
+ * @returns {ReactElement} The Resizable component.
+ */
+export const Resizable = ({
+  defaultWidth,
+  left,
+  right,
+}: ResizableEditorProperties) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const [leftWidth, setLeftWidth] = React.useState(defaultWidth ?? 50); // Percentage
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  const handleMouseDown = React.useCallback(() => setIsDragging(true), []);
+  const handleMouseUp = React.useCallback(() => setIsDragging(false), []);
+
+  const handleMouseMove = React.useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging || !containerRef.current) return;
+
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const newLeftWidth =
+        ((e.clientX - containerRect.left) / containerRect.width) * 100;
+
+      // Constrain between 20% and 80%
+      const threshold = { min: 30, max: 70 };
+
+      const constrainedWidth = Math.min(
+        Math.max(newLeftWidth, threshold.min),
+        threshold.max
+      );
+      setLeftWidth(constrainedWidth);
+    },
+    [isDragging]
+  );
+
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  return (
+    <React.Fragment>
+      <SplitContainer ref={containerRef} className="h-100 flex">
+        <Panel width={leftWidth}>{left}</Panel>
+
+        <Divider
+          $dragging={isDragging}
+          onMouseDown={handleMouseDown}
+          onTouchStart={handleMouseDown}
+        >
+          <DragHandle
+            className="flex align-center justify-center"
+            id="drag-handle"
+          >
+            <DragIndicator className="drag-indicator-handle" />
+          </DragHandle>
+        </Divider>
+
+        <Panel width={100 - leftWidth}>{right}</Panel>
+      </SplitContainer>
+
+      {isDragging && <DragOverlay />}
+    </React.Fragment>
+  );
+};
+Resizable.displayName = "Resizable";

package/src/resizable/styles/index.ts

@@ -0,0 +1,65 @@
+"use client";
+
+import styled from "styled-components";
+
+export const SplitContainer = styled.div`
+  position: relative;
+`;
+export const Panel = styled.div<{ width: number }>`
+  overflow: hidden;
+  width: ${(props) => props.width}%;
+`;
+export const Divider = styled.div<{ $dragging: boolean }>`
+  width: var(--measurement-medium-10);
+  height: 100%;
+  top: 0;
+
+  border-radius: var(--measurement-medium-60);
+  background-color: transparent;
+
+  /* background-color: ${(props) =>
+    props.$dragging ? "var(--font-color-alpha-10)" : "transparent"}; */
+
+  cursor: col-resize;
+  transition: background-color 0.2s;
+  position: relative;
+
+  /** Shows DragIndicator on hover */
+  &:hover .drag-indicator-handle,
+  &:active .drag-indicator-handle {
+    opacity: 1;
+  }
+
+  .drag-indicator-handle {
+    height: ${(props) =>
+      props.$dragging
+        ? "var(--measurement-large-10)"
+        : "var(--measurement-medium-60)"};
+  }
+`;
+export const DragHandle = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--measurement-medium-10) * -1);
+  right: calc(var(--measurement-medium-10) * -1);
+`;
+export const DragIndicator = styled.div`
+  position: fixed;
+  width: var(--measurement-medium-10);
+  /* height: var(--measurement-medium-60); */
+  background-color: var(--font-color-alpha-60);
+  border-radius: var(--measurement-large-10);
+
+  opacity: 0;
+  transition: all 0.2s;
+`;
+export const DragOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--depth-default-90);
+  cursor: col-resize;
+`;

package/src/skeleton/Skeleton.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Page, Skeleton } from "..";
+
+/**  */
+const meta = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Skeleton>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {},
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content className="flex flex-column g-medium-30">
+        <div className="flex align-center justify-center ">
+          <Skeleton sizing="small" />
+          <Skeleton sizing="medium" />
+          <Skeleton sizing="large" />
+        </div>
+        <div className="flex align-center justify-center">
+          <Skeleton shape="square" />
+          <Skeleton shape="smooth" />
+          <Skeleton shape="round" />
+        </div>
+      </Page.Content>
+    </Page>
+  ),
+};

package/src/skeleton/index.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+import { SkeletonLoader } from "./styles";
+
+import {
+  ComponentSizeEnum,
+  type IComponentSize,
+  type TComponentShape,
+} from "../../../../types";
+
+export interface SkeletonProperties
+  extends IComponentSize,
+    React.ComponentPropsWithRef<"span"> {
+  shape?: TComponentShape;
+}
+
+/**
+ * Skeletons are used to convoy a loading state information.
+ *
+ * @param {IButtonProperties} props - The props for the Skeleton component.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
+ * @returns {ReactElement} The Skeleton component.
+ */
+export const Skeleton = (props: SkeletonProperties): React.ReactElement => {
+  const {
+    sizing = ComponentSizeEnum.Medium,
+    shape = "smooth",
+    ...restProps
+  } = props;
+
+  return (
+    <SkeletonLoader
+      data-size={sizing}
+      data-shape={shape}
+      tabIndex={0}
+      {...restProps}
+    />
+  );
+};
+
+Skeleton.displayName = "Skeleton";

package/src/skeleton/styles/index.ts

@@ -0,0 +1,56 @@
+"use client";
+
+import styled, { css, keyframes } from "styled-components";
+
+const SkeletonBlink = keyframes`
+    0% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 0.1;
+    }
+`;
+
+const SkeletonBaseStyles = css`
+  background: linear-gradient(
+    45deg,
+    var(--font-color-alpha-10),
+    var(--font-color-alpha-20)
+  );
+  animation: ${SkeletonBlink} 1s ease-in-out alternate-reverse infinite;
+`;
+const SkeletonSizeStyles = css`
+  &[data-size="small"] {
+    width: 100%;
+
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-70);
+  }
+  &[data-size="medium"] {
+    width: 100%;
+    min-width: var(--measurement-medium-90);
+    min-height: var(--measurement-medium-80);
+  }
+  &[data-size="large"] {
+    width: 100%;
+    min-width: var(--measurement-medium-90);
+    min-height: var(--measurement-medium-90);
+  }
+`;
+const SkeletonShapeStyles = css`
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-20);
+  }
+  &[data-shape="round"] {
+    border-radius: var(--measurement-large-90);
+  }
+`;
+
+export const SkeletonLoader = styled.span`
+  ${SkeletonBaseStyles}
+  ${SkeletonSizeStyles}
+  ${SkeletonShapeStyles}
+`;

package/src/spinner/Spinner.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Page, Spinner } from "..";
+
+/**
+ * Spinners are used to convey a pending state.
+ */
+const meta = {
+  title: "Components/Spinner",
+  component: Spinner,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Spinner>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {},
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content className="g-medium-60 flex align-center justify-center h-100 w-100">
+        <Spinner sizing="small" {...args} />
+        <Spinner sizing="medium" {...args} />
+        <Spinner sizing="large" {...args} />
+      </Page.Content>
+    </Page>
+  ),
+};

package/src/spinner/index.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import React from "react";
+
+import { RotatingSpinner } from "./styles";
+import type { IComponentSize } from "../../../../types";
+
+interface SpinnerProperties extends IComponentSize {}
+
+/**
+ * Spinners are used to convoy a loading state information.
+ *
+ * @param {TextareaProps} props - The props for the Spinner component.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @returns {ReactElement} The Spinner component.
+ */
+export const Spinner = (props: SpinnerProperties) => {
+  return <RotatingSpinner data-size={props.sizing ?? "medium"} />;
+};

package/src/spinner/styles/index.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import styled, { css, keyframes } from "styled-components";
+
+const Rotate = keyframes`
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+`;
+
+const FieldSizeStyles = css`
+  &[data-size="small"] {
+    width: var(--measurement-medium-40);
+    height: var(--measurement-medium-40);
+  }
+  &[data-size="medium"] {
+    width: var(--measurement-medium-50);
+    height: var(--measurement-medium-50);
+  }
+  &[data-size="large"] {
+    width: var(--measurement-medium-60);
+    height: var(--measurement-medium-60);
+  }
+`;
+
+export const RotatingSpinner = styled.span`
+  padding: 0;
+  margin: 0;
+
+  display: inline-block;
+  box-sizing: border-box;
+
+  border: var(--measurement-small-60) solid var(--font-color-alpha-30);
+  border-bottom-color: transparent;
+  border-radius: var(--measurement-large-90);
+
+  animation: ${Rotate} 1s linear infinite;
+
+  ${FieldSizeStyles}
+`;

package/src/text-area/Textarea.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Page, Textarea } from "..";
+import { TComponentSize } from "../../../../types";
+
+/**
+ * Textarea are used to allow users to write large chunks of text.
+ */
+const meta = {
+  title: "Components/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Textarea>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    variant: "secondary",
+    resizable: false,
+  },
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content className="p-large-30 flex flex-column g-large-10">
+        {["small", "medium", "large"].map((size) => (
+          <Textarea key={size} sizing={size as TComponentSize} {...args} />
+        ))}
+      </Page.Content>
+    </Page>
+  ),
+};

package/src/text-area/index.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React from "react";
+
+import { TextAreaContainer } from "./styles";
+import {
+  IComponentSize,
+  IComponentStyling,
+  IComponentVariant,
+  TComponentShape,
+  ComponentSizeEnum,
+} from "../../../../types";
+
+export type ScrollContainerProps = {
+  $height?: string;
+  $width?: string;
+  $thumbColor?: string;
+  $trackColor?: string;
+  $thumbHoverColor?: string;
+};
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    IComponentStyling,
+    IComponentSize,
+    IComponentVariant {
+  resizable?: boolean;
+  shape?: "square" | "smooth";
+}
+
+/**
+ * Textarea are used to allow users to write large chunks of text.
+ *
+ * @param {TextareaProps} props - The props for the Textarea component.
+ * @param {string} props.variant - The style definition used by the component.  Defaults to `secondary`.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {boolean} props.resizable - Define whether the component is resizable or not. Defaults to 'true'.
+ *
+ * @returns {ReactElement} The TextareaProps component.
+ */
+export const Textarea = (props: TextareaProps) => {
+  const { raw, shape, sizing, variant, resizable, onChange } = props;
+
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const adjustHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${Math.min(
+        textarea.scrollHeight,
+        parseInt(getComputedStyle(textarea).maxHeight)
+      )}px`;
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    adjustHeight();
+    onChange?.(e);
+  };
+
+  React.useEffect(() => adjustHeight(), [props.value]);
+
+  return (
+    <TextAreaContainer
+      ref={textareaRef}
+      onChange={handleChange}
+      data-variant={variant ?? "secondary"}
+      data-shape={shape ?? "smooth"}
+      data-size={sizing ?? ComponentSizeEnum.Medium}
+      data-resizable={resizable}
+      data-raw={String(Boolean(raw))}
+      {...props}
+    />
+  );
+};
+Textarea.displayName = "Textarea";

package/src/text-area/styles/index.ts

@@ -0,0 +1,84 @@
+"use client";
+
+import styled, { css } from "styled-components";
+import {
+  FieldShapeStyles,
+  FieldDefaultStyles,
+  FieldVariantsStyles,
+} from "../../field/styles";
+
+import type { ScrollContainerProps } from "text-area";
+
+const CustomScrollbar = css<ScrollContainerProps>`
+  height: ${({ $height }) => $height ?? "100%"};
+  width: ${({ $width }) => $width ?? "100%"};
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    cursor: pointer;
+
+    width: var(--measurement-medium-10);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${({ $trackColor }) => $trackColor ?? "transparent"};
+    border-radius: var(--measurement-medium-30);
+    border: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({ $thumbColor }) =>
+      $thumbColor ?? "var(--font-color-alpha-10)"};
+    border-radius: var(--measurement-medium-30);
+    transition: background-color 0.2s ease;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ $thumbHoverColor, $thumbColor }) =>
+      $thumbHoverColor ?? $thumbColor ?? "var(--font-color-alpha-20)"};
+  }
+
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: ${({ $thumbColor, $trackColor }) =>
+    `${$thumbColor ?? "var(--font-color-alpha-10)"} ${
+      $trackColor ?? "transparent"
+    }`};
+`;
+const TextareaSizeStyles = css`
+  padding: var(--measurement-medium-30);
+  max-height: var(--measurement-large-60);
+
+  &[data-size="small"] {
+    min-height: var(--measurement-large-30);
+  }
+  &[data-size="medium"] {
+    min-height: var(--measurement-large-50);
+  }
+  &[data-size="large"] {
+    min-height: var(--measurement-large-60);
+    max-height: var(--measurement-large-80);
+  }
+`;
+const TextareaResizableStyles = css`
+  &[data-resizable="true"] {
+    resize: vertical;
+  }
+  &[data-resizable="false"] {
+    resize: none;
+  }
+`;
+
+export const TextAreaContainer = styled.textarea<ScrollContainerProps>`
+  &[data-raw="false"] {
+    ${FieldDefaultStyles}
+    ${FieldShapeStyles}
+
+    ${TextareaSizeStyles}
+    ${TextareaResizableStyles}
+
+    ${CustomScrollbar}
+    ${FieldVariantsStyles}
+  }
+`;

package/src/tooltip/index.tsx

@@ -59,11 +59,12 @@ const Tooltip = ({
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
-  const bodyRect = React.useCallback(() => {
+  const bodyRect = (): DOMRect | undefined => {
     if (typeof document !== "undefined") {
-      return document.body.getBoundingClientRect();
+      return document?.body?.getBoundingClientRect();
     }
-  }, []);
+    return undefined;
+  };
 
   const positions = {
     btt: `calc((${triggerProps?.top}px - ${contentProps?.height}px) - (var(--measurement-medium-10)))`,