@emara/ui 1.1.0

package/components/ui/accordion.stories.tsx

@@ -0,0 +1,231 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { RiBookOpenLine, RiNotificationLine, RiUserLine } from "@remixicon/react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  useAccordion,
+} from "./accordion";
+import { Badge } from "./badge";
+import { Button } from "./button";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Data/Accordion",
+  component: Accordion,
+  parameters: { layout: "padded" },
+  argTypes: {
+    variant: { control: "select", options: ["default", "bordered", "separated", "filled"] },
+    size: { control: "select", options: ["sm", "md", "lg"] },
+    iconPosition: { control: "select", options: ["start", "end"] },
+    type: { control: "select", options: ["single", "multiple"] },
+    collapsible: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+const ITEMS = [
+  {
+    value: "shipping",
+    title: "Shipping & Delivery",
+    body: "Orders ship in 1–2 business days. Free delivery over MAD 500.",
+  },
+  {
+    value: "returns",
+    title: "Returns & Refunds",
+    body: "Return any unused item within 30 days for a full refund.",
+  },
+  {
+    value: "support",
+    title: "Customer Support",
+    body: "Reach our team via chat 9am–6pm or email anytime.",
+  },
+];
+
+export const Default: Story = {
+  args: { type: "single", collapsible: true, variant: "default", defaultValue: "shipping" },
+  render: (args) => (
+    <Accordion {...args} className="w-[28rem]">
+      {ITEMS.map((it) => (
+        <AccordionItem key={it.value} value={it.value}>
+          <AccordionTrigger>{it.title}</AccordionTrigger>
+          <AccordionContent>{it.body}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  ),
+};
+
+export const Bordered: Story = {
+  args: { type: "single", collapsible: true, variant: "bordered", defaultValue: "shipping" },
+  render: Default.render!,
+};
+
+export const Separated: Story = {
+  args: { type: "single", collapsible: true, variant: "separated", defaultValue: "shipping" },
+  render: Default.render!,
+};
+
+export const Filled: Story = {
+  args: { type: "single", collapsible: true, variant: "filled", defaultValue: "shipping" },
+  render: Default.render!,
+};
+
+export const IconPositionStart: Story = {
+  args: {
+    type: "single",
+    collapsible: true,
+    variant: "default",
+    iconPosition: "start",
+    defaultValue: "shipping",
+  },
+  render: Default.render!,
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="w-[28rem] space-y-6">
+      {(["sm", "md", "lg"] as const).map((size) => (
+        <Accordion
+          key={size}
+          type="single"
+          collapsible
+          variant="bordered"
+          size={size}
+          defaultValue="a"
+        >
+          <AccordionItem value="a">
+            <AccordionTrigger>{size.toUpperCase()} item A</AccordionTrigger>
+            <AccordionContent>Sized for the {size} density.</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="b">
+            <AccordionTrigger>{size.toUpperCase()} item B</AccordionTrigger>
+            <AccordionContent>Sized for the {size} density.</AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      ))}
+    </div>
+  ),
+};
+
+export const WithIconsBadgesDescriptions: Story = {
+  args: { type: "single", collapsible: true, variant: "bordered" },
+  render: (args) => (
+    <Accordion {...args} className="w-[32rem]">
+      <AccordionItem value="profile">
+        <AccordionTrigger
+          icon={<RiUserLine />}
+          badge={
+            <Badge size="xs" variant="info">
+              New
+            </Badge>
+          }
+          description="Name, photo, contact information"
+        >
+          Profile
+        </AccordionTrigger>
+        <AccordionContent>Manage your profile details.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="notifications">
+        <AccordionTrigger
+          icon={<RiNotificationLine />}
+          badge={
+            <Badge size="xs" variant="warning">
+              3
+            </Badge>
+          }
+          description="Email and push preferences"
+        >
+          Notifications
+        </AccordionTrigger>
+        <AccordionContent>Control which notifications you receive.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="docs">
+        <AccordionTrigger icon={<RiBookOpenLine />} description="Read more about your account">
+          Documentation
+        </AccordionTrigger>
+        <AccordionContent>Links to relevant help articles.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const MultipleWithHelpers: Story = {
+  render: () => {
+    function Demo() {
+      const acc = useAccordion(["a"]);
+      const allValues = ["a", "b", "c"];
+      return (
+        <div className="w-[28rem] space-y-3">
+          <div className="flex gap-2">
+            <Button size="sm" variant="outline" onClick={() => acc.openAll(allValues)}>
+              Open all
+            </Button>
+            <Button size="sm" variant="outline" onClick={() => acc.closeAll()}>
+              Close all
+            </Button>
+            <Button size="sm" variant="outline" onClick={() => acc.toggle("b")}>
+              Toggle B
+            </Button>
+          </div>
+          <Accordion
+            type="multiple"
+            value={acc.value}
+            onValueChange={acc.setValue}
+            variant="bordered"
+          >
+            <AccordionItem value="a">
+              <AccordionTrigger>Item A</AccordionTrigger>
+              <AccordionContent>Body A</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="b">
+              <AccordionTrigger>Item B</AccordionTrigger>
+              <AccordionContent>Body B</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="c">
+              <AccordionTrigger>Item C</AccordionTrigger>
+              <AccordionContent>Body C</AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    function Demo() {
+      const [value, setValue] = useState<string | undefined>("a");
+      return (
+        <div className="w-[28rem] space-y-3">
+          <p className="text-muted-foreground text-sm">
+            Open: <code>{String(value)}</code>
+          </p>
+          <Accordion
+            type="single"
+            collapsible
+            value={value ?? ""}
+            onValueChange={(v) => setValue(v || undefined)}
+            variant="bordered"
+          >
+            <AccordionItem value="a">
+              <AccordionTrigger>A</AccordionTrigger>
+              <AccordionContent>Body A</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="b">
+              <AccordionTrigger>B</AccordionTrigger>
+              <AccordionContent>Body B</AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

package/components/ui/accordion.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { createContext, forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { RiArrowDownSLine } from "@remixicon/react";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-4-components.md §4.
+
+type AccordionVariant = "default" | "bordered" | "separated" | "filled";
+type AccordionSize = "sm" | "md" | "lg";
+type IconPosition = "start" | "end";
+
+interface AccordionContextValue {
+  variant: AccordionVariant;
+  size: AccordionSize;
+  iconPosition: IconPosition;
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+function useAccordionContext(): AccordionContextValue {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion subcomponents must be used inside <Accordion>");
+  return ctx;
+}
+
+// --- useAccordion() (multi-mode helper) -------------------------------------
+
+interface UseAccordionAPI {
+  value: string[];
+  setValue: (next: string[]) => void;
+  openAll: (allValues: string[]) => void;
+  closeAll: () => void;
+  toggle: (value: string) => void;
+  isOpen: (value: string) => boolean;
+}
+
+function useAccordion(initial: string[] = []): UseAccordionAPI {
+  const [value, setValue] = useState<string[]>(initial);
+  const openAll = useCallback((all: string[]) => setValue([...new Set(all)]), []);
+  const closeAll = useCallback(() => setValue([]), []);
+  const toggle = useCallback(
+    (v: string) =>
+      setValue((prev) => (prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v])),
+    [],
+  );
+  const isOpen = useCallback((v: string) => value.includes(v), [value]);
+  return { value, setValue, openAll, closeAll, toggle, isOpen };
+}
+
+// --- Accordion (root) -------------------------------------------------------
+
+const accordionVariants = cva("", {
+  variants: {
+    variant: {
+      default: "",
+      bordered: "rounded-md border border-border overflow-hidden",
+      separated: "space-y-2",
+      filled: "",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+type AccordionRootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+  variant?: AccordionVariant;
+  size?: AccordionSize;
+  iconPosition?: IconPosition;
+};
+
+const Accordion = forwardRef<React.ElementRef<typeof AccordionPrimitive.Root>, AccordionRootProps>(
+  function Accordion(
+    { className, variant = "default", size = "md", iconPosition = "end", ...props },
+    ref,
+  ) {
+    const ctx = useMemo(() => ({ variant, size, iconPosition }), [variant, size, iconPosition]);
+    return (
+      <AccordionContext.Provider value={ctx}>
+        <AccordionPrimitive.Root
+          ref={ref}
+          className={cn(accordionVariants({ variant }), className)}
+          {...props}
+        />
+      </AccordionContext.Provider>
+    );
+  },
+);
+Accordion.displayName = "Accordion";
+
+// --- AccordionItem ----------------------------------------------------------
+
+const accordionItemVariants = cva("", {
+  variants: {
+    variant: {
+      default: "border-b border-border last:border-b-0",
+      bordered: "border-b border-border last:border-b-0",
+      separated: "rounded-md border border-border overflow-hidden",
+      filled: ["rounded-md", "data-[state=open]:bg-muted"].join(" "),
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+
+const AccordionItem = forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  AccordionItemProps
+>(function AccordionItem({ className, ...props }, ref) {
+  const { variant } = useAccordionContext();
+  return (
+    <AccordionPrimitive.Item
+      ref={ref}
+      className={cn(accordionItemVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+AccordionItem.displayName = "AccordionItem";
+
+// --- AccordionTrigger -------------------------------------------------------
+
+const accordionTriggerVariants = cva(
+  [
+    "flex w-full items-center gap-3 font-medium text-foreground select-none cursor-pointer",
+    "transition-colors",
+    "hover:bg-accent/50",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "[&_svg]:size-4 [&_svg]:shrink-0",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-2 text-xs",
+        md: "px-4 py-3 text-sm",
+        lg: "px-5 py-4 text-base",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+  description?: React.ReactNode;
+};
+
+const AccordionTrigger = forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  AccordionTriggerProps
+>(function AccordionTrigger({ className, icon, badge, description, children, ...props }, ref) {
+  const { size, iconPosition } = useAccordionContext();
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          accordionTriggerVariants({ size }),
+          "group",
+          "data-[state=open]:[&_[data-chevron]]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {iconPosition === "start" ? (
+          <span data-chevron className="duration-normal shrink-0 transition-transform">
+            <RiArrowDownSLine />
+          </span>
+        ) : null}
+        {icon ? <span className="shrink-0">{icon}</span> : null}
+        <span className="flex-1 text-start">
+          <span className="block">{children}</span>
+          {description ? (
+            <span className="text-muted-foreground mt-0.5 block text-xs font-normal">
+              {description}
+            </span>
+          ) : null}
+        </span>
+        {badge ? <span className="shrink-0">{badge}</span> : null}
+        {iconPosition === "end" ? (
+          <span data-chevron className="duration-normal shrink-0 transition-transform">
+            <RiArrowDownSLine />
+          </span>
+        ) : null}
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+
+// --- AccordionContent -------------------------------------------------------
+
+const accordionContentSizeVariants = cva("text-foreground", {
+  variants: {
+    size: {
+      sm: "px-3 pb-2 text-xs",
+      md: "px-4 pb-3 text-sm",
+      lg: "px-5 pb-4 text-base",
+    },
+  },
+  defaultVariants: { size: "md" },
+});
+
+type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
+
+const AccordionContent = forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  AccordionContentProps
+>(function AccordionContent({ className, children, ...props }, ref) {
+  const { size } = useAccordionContext();
+  return (
+    <AccordionPrimitive.Content
+      ref={ref}
+      className={cn(
+        "overflow-hidden",
+        "data-[state=open]:animate-[collapse-down_var(--duration-normal,200ms)_var(--ease-out,ease-out)]",
+        "data-[state=closed]:animate-[collapse-up_var(--duration-normal,200ms)_var(--ease-in,ease-in)]",
+        // Expose the natural height to the keyframe via the variable set by Radix.
+        "[--collapsible-content-height:var(--radix-accordion-content-height)]",
+      )}
+      {...props}
+    >
+      <div className={cn(accordionContentSizeVariants({ size }), className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+});
+AccordionContent.displayName = "AccordionContent";
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  useAccordion,
+  accordionVariants,
+  accordionItemVariants,
+  accordionTriggerVariants,
+};
+export type {
+  AccordionRootProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+  UseAccordionAPI,
+};