@usefui/components 1.5.2 → 1.6.0

package/src/shimmer/index.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import { TextShimmerWrapper } from "./styles";
+import { IComponentStyling } from "../../../../types";
+
+const DEFAULT_DURATION = 2;
+const DEFAULT_SPREAD = 200;
+const DEFAULT_SHIMMER_COLOR = "var(--font-color-alpha-60)";
+const DEFAULT_BASE_COLOR = "var(--font-color-alpha-30)";
+
+export interface ITextShimmerProperties
+  extends IComponentStyling, React.HTMLAttributes<HTMLSpanElement> {
+  duration?: number;
+  spread?: number;
+  shimmerColor?: string;
+  baseColor?: string;
+}
+
+/**
+ * Shimmer applies an animated shimmer gradient effect to inline text content.
+ *
+ * **Best practices:**
+ *
+ * - Use to indicate loading states for text content.
+ * - Prefer CSS custom properties for `shimmerColor` and `baseColor` to stay consistent with your design tokens.
+ * - Avoid using on large blocks of text; favour short labels or headings.
+ *
+ * @param {ITextShimmerProperties} props - The props for the Shimmer component.
+ * @param {ReactNode} props.children - The text content to apply the shimmer effect to.
+ * @param {boolean} props.raw - Whether the component is unstyled.
+ * @param {number} props.duration - Animation cycle duration in seconds. Defaults to 2.
+ * @param {number} props.spread - Gradient spread width as a percentage. Defaults to 200.
+ * @param {string} props.shimmerColor - Highlight color of the shimmer. Defaults to `--font-color-alpha-60`.
+ * @param {string} props.baseColor - Base text gradient color. Defaults to `--font-color-alpha-30`.
+ * @returns {ReactElement} The Shimmer component.
+ */
+export const Shimmer = (props: ITextShimmerProperties) => {
+  const {
+    children,
+    raw,
+    duration = DEFAULT_DURATION,
+    spread = DEFAULT_SPREAD,
+    shimmerColor = DEFAULT_SHIMMER_COLOR,
+    baseColor = DEFAULT_BASE_COLOR,
+    ...restProps
+  } = props;
+
+  return (
+    <TextShimmerWrapper
+      data-raw={Boolean(raw)}
+      data-duration={duration}
+      data-spread={spread}
+      data-shimmer-color={shimmerColor}
+      data-base-color={baseColor}
+      aria-label={restProps["aria-label"] ?? "shimmer-text"}
+      {...restProps}
+    >
+      {children}
+    </TextShimmerWrapper>
+  );
+};
+
+Shimmer.displayName = "Shimmer";

package/src/shimmer/styles/index.ts

@@ -0,0 +1,33 @@
+import styled, { keyframes } from "styled-components";
+
+const shimmer = keyframes`
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+`;
+
+export const TextShimmerWrapper = styled.span<{
+  "data-duration": number;
+  "data-spread": number;
+  "data-shimmer-color": string;
+  "data-base-color": string;
+}>`
+  background: linear-gradient(
+    90deg,
+    ${({ "data-base-color": baseColor }) => baseColor} 0%,
+    ${({ "data-shimmer-color": shimmerColor }) => shimmerColor} 40%,
+    ${({ "data-base-color": baseColor }) => baseColor} 60%,
+    ${({ "data-base-color": baseColor }) => baseColor} 100%
+  );
+  background-size: ${({ "data-spread": spread }) => spread}% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: ${shimmer} ${({ "data-duration": duration }) => duration}s linear
+    infinite;
+  display: inline-block;
+`;

package/src/switch/hooks/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, createContext, useContext } from "react";
 import { IReactChildren, IComponentAPI } from "../../../../../types";
 
@@ -9,7 +11,9 @@ const defaultComponentAPI = {
 const SwitchContext = createContext<IComponentAPI>(defaultComponentAPI);
 export const useSwitch = () => useContext(SwitchContext);
 
-export const SwitchProvider = ({ children }: IReactChildren): JSX.Element => {
+export const SwitchProvider = ({
+  children,
+}: IReactChildren): React.JSX.Element => {
   const context = useSwitchProvider();
 
   return (

package/src/tabs/hooks/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { createContext, useContext, useState } from "react";
 import { IReactChildren, IComponentAPI } from "../../../../../types";
 
@@ -9,7 +11,9 @@ const defaultComponentAPI = {
 const TabsContext = createContext<IComponentAPI>(defaultComponentAPI);
 export const useTabs = () => useContext(TabsContext);
 
-export const TabsProvider = ({ children }: IReactChildren): JSX.Element => {
+export const TabsProvider = ({
+  children,
+}: IReactChildren): React.JSX.Element => {
   const context = useTabsProvider();
 
   return (

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

@@ -1,6 +1,8 @@
 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.
@@ -16,11 +18,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     variant: "secondary",
+    resizable: false,
   },
   render: ({ ...args }) => (
     <Page>
-      <Page.Content className="p-large-30">
-        <Textarea {...args} />
+      <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

@@ -3,9 +3,13 @@
 import React from "react";
 
 import { TextAreaContainer } from "./styles";
-import { Field } from "../field";
-
-import type { IComponentStyling, IComponentVariant } from "../../../../types";
+import {
+  IComponentSize,
+  IComponentStyling,
+  IComponentVariant,
+  TComponentShape,
+  ComponentSizeEnum,
+} from "../../../../types";
 
 export type ScrollContainerProps = {
   $height?: string;
@@ -18,15 +22,26 @@ export type ScrollContainerProps = {
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     IComponentStyling,
-    IComponentVariant {}
+    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 = ({ onChange, ...props }: TextareaProps) => {
+export const Textarea = (props: TextareaProps) => {
+  const { raw, shape, sizing, variant, resizable, onChange } = props;
+
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
   const adjustHeight = () => {
@@ -48,15 +63,16 @@ export const Textarea = ({ onChange, ...props }: TextareaProps) => {
   React.useEffect(() => adjustHeight(), [props.value]);
 
   return (
-    <Field.Wrapper className="w-100 h-auto">
-      <TextAreaContainer
-        ref={textareaRef}
-        onChange={handleChange}
-        data-variant={props.variant ?? "secondary"}
-        data-raw={String(Boolean(props?.raw))}
-        {...props}
-      />
-    </Field.Wrapper>
+    <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

@@ -1,7 +1,11 @@
 "use client";
 
 import styled, { css } from "styled-components";
-import { FieldDefaultStyles, FieldVariantsStyles } from "../../field/styles";
+import {
+  FieldShapeStyles,
+  FieldDefaultStyles,
+  FieldVariantsStyles,
+} from "../../field/styles";
 
 import type { ScrollContainerProps } from "text-area";
 
@@ -42,81 +46,37 @@ const CustomScrollbar = css<ScrollContainerProps>`
       $trackColor ?? "transparent"
     }`};
 `;
+const TextareaSizeStyles = css`
+  padding: var(--measurement-medium-30);
+  max-height: var(--measurement-large-60);
 
-export const TextAreaContainer = styled.textarea<ScrollContainerProps>`
-  &[data-raw="false"] {
+  &[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;
-    max-height: var(--measurement-large-60);
-    min-height: auto;
-    width: 100%;
-
-    overflow-y: auto;
-
-    outline: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    font-size: var(--fontsize-small-80);
-    padding: var(--measurement-medium-30) var(--measurement-medium-30)
-      var(--measurement-large-10) var(--measurement-medium-30);
-
-    font-weight: 500;
-    line-height: 1.1;
-    letter-spacing: calc(
-      var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
-    );
-
-    border: var(--measurement-small-10) solid transparent;
-    border-radius: var(--measurement-medium-30);
-    backdrop-filter: blur(var(--measurement-small-10));
-    color: var(--font-color-alpha-60);
-
-    transition: all ease-in-out 0.2s;
-
-    svg,
-    span,
-    img {
-      opacity: 0.6;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--font-color);
-
-      svg,
-      span,
-      img {
-        opacity: 1;
-      }
-    }
-    &::placeholder {
-      color: var(--font-color-alpha-30);
-    }
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    &::placeholder {
-      color: var(--font-color-alpha-30);
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
+  }
+  &[data-resizable="false"] {
+    resize: none;
+  }
+`;
 
-    &:disabled {
-      cursor: not-allowed;
-    }
+export const TextAreaContainer = styled.textarea<ScrollContainerProps>`
+  &[data-raw="false"] {
+    ${FieldDefaultStyles}
+    ${FieldShapeStyles}
 
-    &[data-error="true"] {
-      &::placeholder {
-        color: var(--alpha-red-30);
-      }
-    }
+    ${TextareaSizeStyles}
+    ${TextareaResizableStyles}
 
     ${CustomScrollbar}
     ${FieldVariantsStyles}

package/src/toolbar/hooks/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, createContext, useContext } from "react";
 import { IReactChildren, IComponentAPI } from "../../../../../types";
 
@@ -9,7 +11,9 @@ const defaultComponentAPI = {
 const ToolbarContext = createContext<IComponentAPI>(defaultComponentAPI);
 export const useToolbar = () => useContext(ToolbarContext);
 
-export const ToolbarProvider = ({ children }: IReactChildren): JSX.Element => {
+export const ToolbarProvider = ({
+  children,
+}: IReactChildren): React.JSX.Element => {
   const context = useToolbarProvider();
 
   return (

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)))`,

package/src/tree/Tree.stories.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Tree } from "..";
+import { ComponentSizeEnum, ComponentVariantEnum } from "../../../../types";
+
+const meta = {
+  title: "Components/Tree",
+  component: Tree,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="m-medium-30">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Tree>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  argTypes: {
+    spacing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+    variant: {
+      options: [
+        ComponentVariantEnum.Primary,
+        ComponentVariantEnum.Secondary,
+        ComponentVariantEnum.Tertiary,
+        ComponentVariantEnum.Mono,
+        ComponentVariantEnum.Border,
+        ComponentVariantEnum.Ghost,
+      ],
+      control: { type: "radio" },
+    },
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Tree.Root>
+      <Tree>
+        <Tree.Node nodeId="src">
+          <Tree.Trigger nodeId="src">src</Tree.Trigger>
+          <Tree.Content nodeId="src">
+            <Tree.Node level={1} nodeId="index.ts">
+              <Tree.Trigger nodeId="index.ts">index.ts</Tree.Trigger>
+            </Tree.Node>
+          </Tree.Content>
+        </Tree.Node>
+      </Tree>
+    </Tree.Root>
+  ),
+};
+
+export const DefaultOpen: Story = {
+  render: ({ ...args }) => (
+    <Tree.Root>
+      <Tree>
+        <Tree.Node nodeId="src">
+          <Tree.Trigger nodeId="src">src</Tree.Trigger>
+          <Tree.Content nodeId="src" defaultOpen>
+            <Tree.Node level={1} nodeId="index.ts">
+              <Tree.Trigger nodeId="index.ts">index.ts</Tree.Trigger>
+            </Tree.Node>
+          </Tree.Content>
+        </Tree.Node>
+      </Tree>
+    </Tree.Root>
+  ),
+};
+
+export const Nested: Story = {
+  render: ({ ...args }) => (
+    <Tree.Root>
+      <Tree>
+        <Tree.Node nodeId="src">
+          <Tree.Trigger nodeId="src">src</Tree.Trigger>
+          <Tree.Content nodeId="src" defaultOpen>
+            <Tree.Node level={1} nodeId="components">
+              <Tree.Trigger nodeId="components">components</Tree.Trigger>
+              <Tree.Content nodeId="components" defaultOpen>
+                <Tree.Node level={2} nodeId="button.ts">
+                  <Tree.Trigger nodeId="button.ts">button.ts</Tree.Trigger>
+                </Tree.Node>
+                <Tree.Node level={2} nodeId="card.ts" isLast>
+                  <Tree.Trigger nodeId="card.ts">card.ts</Tree.Trigger>
+                </Tree.Node>
+              </Tree.Content>
+            </Tree.Node>
+            <Tree.Node level={1} nodeId="index.ts" isLast>
+              <Tree.Trigger nodeId="index.ts">index.ts</Tree.Trigger>
+            </Tree.Node>
+          </Tree.Content>
+        </Tree.Node>
+      </Tree>
+    </Tree.Root>
+  ),
+};
+
+export const Group: Story = {
+  render: ({ ...args }) => (
+    <Tree.Root>
+      <Tree>
+        {["src", "public", "tests", "docs", "config"].map(
+          (item, index, array) => (
+            <Tree.Node
+              key={item}
+              nodeId={item}
+              isLast={index === array.length - 1}
+            >
+              <Tree.Trigger nodeId={item}>{item}</Tree.Trigger>
+              <Tree.Content nodeId={item}>
+                <Tree.Node level={1} nodeId={`${item}/index.ts`} isLast>
+                  <Tree.Trigger nodeId={`${item}/index.ts`}>
+                    index.ts
+                  </Tree.Trigger>
+                </Tree.Node>
+              </Tree.Content>
+            </Tree.Node>
+          ),
+        )}
+      </Tree>
+    </Tree.Root>
+  ),
+};

package/src/tree/hooks/tree-node-provider.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+const defaultTreeNodeAPI: IComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+
+const TreeNodeContext = createContext<IComponentAPI>(defaultTreeNodeAPI);
+export const useTreeNode = () => useContext(TreeNodeContext);
+
+export interface ITreeNodeProviderProperties extends IReactChildren {
+  nodeId: string;
+  level: number;
+  isLast: boolean;
+}
+
+export const TreeNodeProvider = ({
+  children,
+  nodeId,
+  level,
+  isLast,
+}: ITreeNodeProviderProperties): React.JSX.Element => {
+  const context = useTreeNodeProviderContext({ nodeId, level, isLast });
+
+  return (
+    <TreeNodeContext.Provider value={context}>
+      {children}
+    </TreeNodeContext.Provider>
+  );
+};
+
+function useTreeNodeProviderContext({
+  nodeId,
+  level,
+  isLast,
+}: Omit<ITreeNodeProviderProperties, "children">): IComponentAPI {
+  return {
+    id: nodeId,
+    states: {
+      nodeId,
+      level,
+      isLast,
+    },
+    methods: {},
+  };
+}

package/src/tree/hooks/tree-provider.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import React, { useState, createContext, useContext } from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+// ─── Tree Context ─────────────────────────────────────────────────────────────
+
+const defaultTreeAPI: IComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+
+const TreeContext = createContext<IComponentAPI>(defaultTreeAPI);
+export const useTree = () => useContext(TreeContext);
+
+export interface ITreeProviderProperties extends IReactChildren {
+  defaultExpandedIds?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+}
+
+export const TreeProvider = ({
+  children,
+  defaultExpandedIds = [],
+  onSelectionChange,
+}: ITreeProviderProperties): React.JSX.Element => {
+  const context = useTreeProviderContext({
+    defaultExpandedIds,
+    onSelectionChange,
+  });
+
+  return (
+    <TreeContext.Provider value={context}>{children}</TreeContext.Provider>
+  );
+};
+
+function useTreeProviderContext({
+  defaultExpandedIds,
+  onSelectionChange,
+}: Omit<ITreeProviderProperties, "children">): IComponentAPI {
+  const treeId = React.useId();
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    () => new Set(defaultExpandedIds),
+  );
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+
+  return {
+    id: treeId,
+    states: {
+      expandedIds,
+      selectedIds,
+    },
+    methods: {
+      isExpanded: (id: string): boolean => expandedIds.has(id),
+      isSelected: (id: string): boolean => selectedIds.has(id),
+      toggleExpanded: (id: string): void => {
+        setExpandedIds((prev) => {
+          const next = new Set(prev);
+          next.has(id) ? next.delete(id) : next.add(id);
+          return next;
+        });
+      },
+      toggleSelected: (id: string): void => {
+        setSelectedIds((prev) => {
+          const next = new Set(prev);
+          next.has(id) ? next.delete(id) : next.add(id);
+          onSelectionChange?.(Array.from(next));
+          return next;
+        });
+      },
+      getTreeId: ({ nodeId, type }: Record<string, string>): string =>
+        `${treeId}-${type}-${nodeId}`,
+    },
+  };
+}