aural-ui 3.0.5 → 3.0.7

package/dist/components/clamp-lines/ClampLines.stories.tsx

@@ -0,0 +1,169 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { toast } from "sonner"
+
+import { ClampLines } from "."
+import { Toaster } from "../toast"
+
+const LONG_TEXT =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+const meta: Meta<typeof ClampLines> = {
+  title: "Components/UI/ClampLines",
+  component: ClampLines,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#0a0a0a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    wordLimit: {
+      control: "number",
+      description: "Max number of words to display before truncating",
+    },
+    responsive: {
+      control: "boolean",
+      description: "Adjusts word limit based on viewport width",
+    },
+    minWordLimit: {
+      control: "number",
+      description:
+        "Minimum word limit used on small screens when responsive is true",
+    },
+    button: {
+      control: false,
+      description:
+        "Render function for a custom toggle button. Receives `open` (boolean) and `toggle` (function) so the button can reflect and control expand/collapse state. Example: `(open, toggle) => <button onClick={toggle}>{open ? 'Less' : 'More'}</button>`",
+    },
+    classes: {
+      control: "object",
+      description: "Override classes for root and button elements",
+    },
+    children: {
+      control: "text",
+      description: "The text content to render",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ClampLines>
+
+export const Default: Story = {
+  args: {
+    children: LONG_TEXT,
+    wordLimit: 20,
+  },
+}
+
+export const WithCSSClamp: Story = {
+  name: "CSS Line Clamp (no wordLimit)",
+  args: {
+    children: LONG_TEXT,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Responsive: Story = {
+  args: {
+    children: LONG_TEXT,
+    wordLimit: 40,
+    responsive: true,
+    minWordLimit: 10,
+  },
+}
+
+export const WithCustomButton: Story = {
+  name: "Custom Button",
+  args: {
+    children: LONG_TEXT,
+    wordLimit: 20,
+    button: (open, toggle) => (
+      <button
+        onClick={toggle}
+        style={{
+          marginLeft: 4,
+          padding: "2px 8px",
+          border: "1px solid #7c3aed",
+          borderRadius: 4,
+          color: "#7c3aed",
+          background: "transparent",
+          cursor: "pointer",
+          fontSize: 12,
+        }}
+      >
+        {open ? "Show less ▲" : "Show more ▼"}
+      </button>
+    ),
+  },
+}
+
+export const WithOnToggle: Story = {
+  name: "With onToggle (Toast)",
+  args: {
+    children: LONG_TEXT,
+    wordLimit: 20,
+    onToggle: (open) => {
+      toast(open ? "Expanded" : "Collapsed", {
+        description: open
+          ? "Full text is now visible."
+          : "Text has been collapsed.",
+      })
+    },
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <Toaster />
+      </>
+    ),
+  ],
+}
+
+export const ShortText: Story = {
+  name: "Short Text (no truncation)",
+  args: {
+    children: "This text is short enough that it will never be truncated.",
+    wordLimit: 20,
+  },
+}
+
+export const AllVariants = () => {
+  return (
+    <div className="flex flex-col gap-6" style={{ width: 400 }}>
+      <div>
+        <p className="text-fm-tertiary text-fm-xs mb-2 uppercase">
+          Word Limit (20 words)
+        </p>
+        <ClampLines wordLimit={20}>{LONG_TEXT}</ClampLines>
+      </div>
+      <div>
+        <p className="text-fm-tertiary text-fm-xs mb-2 uppercase">
+          CSS Line Clamp (3 lines)
+        </p>
+        <ClampLines>{LONG_TEXT}</ClampLines>
+      </div>
+      <div>
+        <p className="text-fm-tertiary text-fm-xs mb-2 uppercase">
+          Responsive (40 words, min 10)
+        </p>
+        <ClampLines wordLimit={40} responsive minWordLimit={10}>
+          {LONG_TEXT}
+        </ClampLines>
+      </div>
+    </div>
+  )
+}

package/dist/components/clamp-lines/index.tsx

@@ -0,0 +1,180 @@
+import React, { useEffect, useRef, useState } from "react"
+import { cn } from "@lib/utils"
+
+import { Button } from "../button"
+
+export interface IClampLinesProps {
+  button?: ((open: boolean, toggle: () => void) => React.ReactNode) | null
+  children: string
+  classes?: {
+    clampLineBtn?: string
+    clampLineBtnInnerClass?: string
+    root?: string
+    content?: string
+  }
+  wordLimit?: number
+  responsive?: boolean
+  minWordLimit?: number
+  readMoreText?: string
+  readLessText?: string
+  onToggle?: (open: boolean) => void
+}
+
+export const ClampLines = ({
+  children,
+  classes = {},
+  button = null,
+  wordLimit,
+  responsive = false,
+  minWordLimit,
+  readMoreText = "READ MORE",
+  readLessText = "READ LESS",
+  onToggle,
+}: IClampLinesProps) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLParagraphElement | null>(null)
+  const [showLink, setShowLink] = useState(false)
+  const [responsiveWordLimit, setResponsiveWordLimit] = useState(wordLimit || 0)
+
+  const words = children.split(" ")
+
+  const calculateResponsiveWordLimit = () => {
+    if (!responsive || !wordLimit) {
+      setResponsiveWordLimit(wordLimit || 0)
+      return
+    }
+
+    const width = window.innerWidth
+    const baseWordLimit = wordLimit
+    const minLimit = minWordLimit || Math.ceil(baseWordLimit * 0.5)
+
+    const mobileBreakpoint = 640
+    const tabletBreakpoint = 1024
+
+    let calculatedLimit: number
+
+    if (width >= tabletBreakpoint) {
+      calculatedLimit = baseWordLimit
+    } else if (width >= mobileBreakpoint) {
+      const ratio =
+        (width - mobileBreakpoint) / (tabletBreakpoint - mobileBreakpoint)
+      const tabletWordLimit = minLimit + (baseWordLimit - minLimit) * 0.7
+      calculatedLimit = Math.round(
+        tabletWordLimit + (baseWordLimit - tabletWordLimit) * ratio
+      )
+    } else {
+      calculatedLimit = minLimit
+    }
+
+    setResponsiveWordLimit(Math.max(minLimit, calculatedLimit))
+  }
+
+  useEffect(() => {
+    let rafId = requestAnimationFrame(() => {
+      calculateResponsiveWordLimit()
+    })
+
+    if (responsive && wordLimit) {
+      const handleResize = () => {
+        cancelAnimationFrame(rafId)
+        rafId = requestAnimationFrame(() => {
+          calculateResponsiveWordLimit()
+        })
+      }
+
+      window.addEventListener("resize", handleResize)
+      return () => {
+        cancelAnimationFrame(rafId)
+        window.removeEventListener("resize", handleResize)
+      }
+    }
+
+    return () => cancelAnimationFrame(rafId)
+  }, [responsive, wordLimit, minWordLimit])
+
+  const effectiveWordLimit = responsive ? responsiveWordLimit : wordLimit
+
+  const shouldTruncate =
+    !!effectiveWordLimit && words.length > effectiveWordLimit
+
+  useEffect(() => {
+    const rafId = requestAnimationFrame(() => {
+      if (effectiveWordLimit) {
+        setShowLink(shouldTruncate)
+      } else {
+        if (!ref.current) return
+        if (ref.current.clientHeight < ref.current.scrollHeight) {
+          setShowLink(true)
+        } else if (ref.current.scrollHeight > 0 && !open) {
+          setShowLink(false)
+        }
+      }
+    })
+    return () => cancelAnimationFrame(rafId)
+  }, [shouldTruncate, effectiveWordLimit, children, open])
+
+  const handleClick = () => {
+    const next = !open
+    setOpen(next)
+    onToggle?.(next)
+  }
+
+  const renderButton = !button ? (
+    <Button
+      data-nosnippet
+      variant="text"
+      noise="none"
+      innerClassName={cn("px-0! h-fit inline", classes.clampLineBtnInnerClass)}
+      className={cn(
+        "text-fm-tertiary ml-1 cursor-pointer underline",
+        classes.clampLineBtn
+      )}
+      onClick={handleClick}
+    >
+      {open ? readLessText : readMoreText}
+    </Button>
+  ) : (
+    button(open, handleClick)
+  )
+
+  const displayText =
+    effectiveWordLimit && !open && shouldTruncate
+      ? words.slice(0, effectiveWordLimit).join(" ")
+      : children
+  const showEllipsis =
+    effectiveWordLimit &&
+    !open &&
+    shouldTruncate &&
+    displayText.length < children.length
+
+  const renderContent = effectiveWordLimit ? (
+    <p className={cn("text-fm-tertiary", classes.content)} data-nosnippet>
+      {displayText}
+      {showEllipsis && "...."}
+      {showLink && renderButton}
+    </p>
+  ) : (
+    <>
+      <p
+        data-nosnippet
+        className={cn(
+          open ? "line-clamp-none" : "line-clamp-3",
+          "text-fm-tertiary",
+          classes.content
+        )}
+        ref={ref}
+      >
+        {children}
+      </p>
+      {showLink && renderButton}
+    </>
+  )
+
+  return (
+    <section className={classes.root} data-testid="clamp-lines" data-nosnippet>
+      {renderContent}
+    </section>
+  )
+}
+
+export default ClampLines

package/dist/components/clamp-lines/meta.ts

@@ -0,0 +1,6 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: ["button"],
+  tokens: [],
+}

package/dist/components/index.ts

@@ -9,6 +9,7 @@ export * from "./card"
 export * from "./char-count"
 export * from "./checkbox"
 export * from "./chip"
+export * from "./clamp-lines"
 export * from "./collapsible"
 export * from "./command"
 export * from "./dialog"

package/dist/components/input/index.tsx

@@ -313,6 +313,8 @@ const InputBase = forwardRef<
             {
               "pl-10": startIcon,
               "pr-10": endIcon,
+              "[&::placeholder]:[-webkit-text-fill-color:var(--color-fm-tertiary)]":
+                transparentOnAutofill,
             },
             className
           ),