feat(components): add copyButton functionality and update theme confi…

…gurations in accordion component

apps/www/components/preview/accordion/accordionVariants.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import { VariantProps } from "class-variance-authority";
-import { Link } from "lucide-react";
 import React from "react";
 import {
   Accordion,
   Accordions,
   AccordionsVariants,
 } from "ruru-ui/components/accordion";
-import { Button } from "ruru-ui/components/button";
+import { Checkbox } from "ruru-ui/components/checkbox";
 import { Label } from "ruru-ui/components/label";
 import {
   Select,
@@ -29,6 +28,8 @@ export default function AccordionVariants({}: Props) {
   const [theme, setTheme] =
     React.useState<VariantProps<typeof AccordionsVariants>["theme"]>("default");
 
+  const [showCopyButton, setShowCopyButton] = React.useState(false);
+
   return (
     <div className="min-h-[400px] flex flex-col gap-6 justify-center items-center">
       <div className="flex flex-row gap-2 items-center">
@@ -69,30 +70,32 @@ export default function AccordionVariants({}: Props) {
             ))}
           </SelectContent>
         </Select>
+
+        <div className="border rounded-md py-2 px-3 flex items-center gap-2">
+          <Checkbox
+            id="showCopyButton"
+            checked={showCopyButton}
+            onCheckedChange={(c) => setShowCopyButton(!!c)}
+          />
+          <Label htmlFor="showCopyButton">Copy Button</Label>
+        </div>
       </div>
 
       <Accordions
         className="max-w-[600px]"
         type="single"
         variant={variant}
         theme={theme}
+        showCopyButton={showCopyButton}
       >
         {Array.from(new Array(4)).map((_, index) => (
           <Accordion
             id={`item-${index}`}
             key={index}
             trigger={
-              <>
-                <Button
-                  variant={"tertiary"}
-                  className="text-current hover:opacity-70 hover:bg-transparent transition-all"
-                >
-                  <Link size={16} />
-                </Button>
-                <span className="w-full text-left py-4 text-current">
-                  Accordion Item {index + 1}
-                </span>
-              </>
+              <span className="w-full text-left py-4 text-current">
+                Accordion Item {index + 1}
+              </span>
             }
           >
             This is the content of the accordion item {index + 1}

apps/www/components/preview/index.tsx

@@ -188,13 +188,7 @@ export default {
   ),
   accordion: (
     <Wrapper>
-      <Accordions
-        type="single"
-        collapsible
-        className="w-full max-w-[500px]"
-        variant="default"
-        theme="primary"
-      >
+      <Accordions type="single" collapsible className="w-full max-w-[500px]">
         <Accordion id="item-1" trigger="Is it accessible?" TClassName="py-4">
           Yes. It adheres to the WAI-ARIA design pattern.
         </Accordion>

apps/www/content/docs/components/accordion.mdx

@@ -56,8 +56,6 @@ The `Accordion` component is a vertically stacked set of interactive headings th
         type="single"
         collapsible
         className="w-full max-w-[500px]"
-        variant="default"
-        theme="primary"
       >
         <Accordion id="item-1" trigger="Is it accessible?" TClassName="py-4">Yes. It adheres to the WAI-ARIA design pattern.</Accordion>
         <Accordion id="item-2" trigger="Is it responsive?" TClassName="py-4">Yes. It is responsive and mobile-friendly.</Accordion>
@@ -75,8 +73,6 @@ export function Demo() {
       type="single"
       collapsible
       className="w-full max-w-[500px]"
-      variant="default"
-      theme="primary"
     >
       <Accordion id="item-1" trigger="Is it accessible?" TClassName="py-4">
         Yes. It adheres to the WAI-ARIA design pattern.
@@ -178,23 +174,16 @@ export function Demo() {
       type="single"
       variant="default"
       theme="default"
+      showCopyButton={true}
     >
       {Array.from(new Array(4)).map((_, index) => (
         <Accordion
           id={`item-${index}`}
           key={index}
           trigger={
-            <>
-              <Button
-                variant={"tertiary"}
-                className="text-current hover:opacity-70 hover:bg-transparent transition-all"
-              >
-                <Link size={16} />
-              </Button>
-              <span className="w-full text-left py-4 text-current">
-                Accordion Item {index + 1}
-              </span>
-            </>
+            <span className="w-full text-left py-4 text-current">
+              Accordion Item {index + 1}
+            </span>
           }
         >
           This is the content of the accordion item {index + 1}
@@ -292,6 +281,7 @@ import {
 | `collapsible` | Whether the accordion is collapsible. | `boolean` | `false` |
 | `variant` | The variant of the accordion. | `"default" \| "primary" \| "none"` | `"default"` |
 | `theme` | The theme of the accordion. | `"default" \| "primary" \| "secondary" \| "tertiary"` | `"default"` |
+| `showCopyButton` | Weather to show copy button. | `boolean` | `false` |
 | `props` | Other props | typeof `AccordionPrimitive.Root` with `ref` | `{}` |
 
 | Data Attribute | Description | Values |
@@ -308,6 +298,7 @@ import {
 | `trigger` | The trigger of the accordion. | `ReactNode` | `undefined` |
 | `TClassName` | The class name of the trigger. | `string` | `undefined` |
 | `CClassName` | The class name of the content. | `string` | `undefined` |
+| `copyText` | Costom text to copy. | `string` | `undefined` |
 | `props` | Other props | typeof `AccordionPrimitive.Item` with `ref` | `{}` |
 
 | Data Attribute | Description | Values |

packages/ui/src/components/accordion.tsx

@@ -3,8 +3,9 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cva, type VariantProps } from "class-variance-authority";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { CheckIcon, ChevronDownIcon, Link2Icon } from "@radix-ui/react-icons";
 import { cn } from "@/utils/cn";
+import { Button } from "./button";
 
 const AccordionRoot = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Root>,
@@ -43,6 +44,8 @@ const AccordionTrigger = React.forwardRef<
     hideChevron?: boolean;
     chevronPosition?: "left" | "right";
     chevronRotation?: "full" | "half";
+    before?: React.ReactNode;
+    after?: React.ReactNode;
   }
 >(
   (
@@ -52,11 +55,14 @@ const AccordionTrigger = React.forwardRef<
       hideChevron = false,
       chevronPosition,
       chevronRotation = "full",
+      before = null,
+      after = null,
       ...props
     },
     ref
   ) => (
-    <AccordionPrimitive.Header className="flex !m-0 !text-current">
+    <AccordionPrimitive.Header className="flex !m-0 !text-current items-center">
+      {before}
       <AccordionPrimitive.Trigger
         ref={ref}
         className={cn(
@@ -80,6 +86,7 @@ const AccordionTrigger = React.forwardRef<
           />
         )}
       </AccordionPrimitive.Trigger>
+      {after}
     </AccordionPrimitive.Header>
   )
 );
@@ -111,8 +118,8 @@ export const AccordionsVariants = cva(cn("w-full rounded-lg"), {
       none: cn("border-none rounded-none"),
     },
     theme: {
-      default: cn("text-primary-foreground"),
-      primary: "border",
+      default: cn("border"),
+      primary: cn("text-primary-foreground"),
       secondary: cn("border text-foreground"),
       tertiary: cn("border-none text-primary-foreground"),
     },
@@ -137,8 +144,8 @@ export const AccordionVariants = cva(
         ),
       },
       theme: {
-        default: cn("bg-primary hover:bg-primary/85 text-primary-foreground"),
-        primary: cn("bg-none text-foreground"),
+        default: cn("bg-none text-foreground"),
+        primary: cn("bg-primary hover:bg-primary/85 text-primary-foreground"),
         secondary: cn(
           "bg-secondary/55 hover:bg-secondary text-secondary-foreground"
         ),
@@ -204,6 +211,20 @@ const Accordions = React.forwardRef<
      * </Accordions>
      */
     theme?: VariantProps<typeof AccordionsVariants>["theme"];
+    /**
+     * To declare weather to show the copy button or not.
+     * @default false
+     * @type {boolean}
+     *
+     * @example
+     * ```tsx
+     * <Accordions showCopyButton>
+     *  <Accordion id="item-1" trigger="Item 1">
+     *   Content 1
+     *  </Accordion>
+     * </Accordions>
+     */
+    showCopyButton?: boolean;
   }
 >(
   (
@@ -212,6 +233,7 @@ const Accordions = React.forwardRef<
       type = "single",
       variant = "default",
       theme = "default",
+      showCopyButton = false,
       children,
       ...props
     },
@@ -220,7 +242,7 @@ const Accordions = React.forwardRef<
     const newClildren = React.Children.map(children, (child) => {
       if (React.isValidElement(child)) {
         // @ts-expect-error -- Unknown type
-        return React.cloneElement(child, { variant, theme });
+        return React.cloneElement(child, { variant, theme, showCopyButton });
       }
       return child;
     });
@@ -270,8 +292,21 @@ const Accordion = React.forwardRef<
     React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>,
     "value"
   > & {
+    // These are the props coming from the parent component
     variant?: VariantProps<typeof AccordionVariants>["variant"];
     theme?: VariantProps<typeof AccordionVariants>["theme"];
+    showCopyButton?: boolean;
+    /**
+     * The text to be copied. `showCopyButton` need to be set true in `Accordions`.
+     * @type {string}
+     *
+     * @example
+     * ```tsx
+     * <Accordion id="item-1" trigger="Item 1" copyText="https://example.com">
+     *  Content 1
+     * </Accordion>
+     */
+    copyText?: string;
     /**
      * The class name of the trigger.
      * @type {string}
@@ -311,6 +346,8 @@ const Accordion = React.forwardRef<
       className,
       variant = "default",
       theme = "default",
+      showCopyButton = false,
+      copyText,
       TClassName,
       CClassName,
       trigger,
@@ -330,6 +367,7 @@ const Accordion = React.forwardRef<
         {...props}
       >
         <AccordionTrigger
+          id={id}
           className={cn("px-4 py-0", TClassName)}
           chevronPosition={
             ["primary"].includes(variant || "") ? "left" : "right"
@@ -339,6 +377,7 @@ const Accordion = React.forwardRef<
           }
           data-variant={variant}
           data-theme={theme}
+          after={showCopyButton && <CopyButton id={id} copyText={copyText} />}
         >
           {trigger}
         </AccordionTrigger>
@@ -354,6 +393,58 @@ const Accordion = React.forwardRef<
 );
 Accordion.displayName = "Accordion";
 
+function CopyButton({ id, copyText }: { id: string; copyText?: string }) {
+  const [checked, setChecked] = React.useState(false);
+  const timeoutRef = React.useRef<number | null>(null);
+
+  const onCopy: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+
+      const url = new URL(window.location.href);
+      url.hash = id;
+
+      navigator.clipboard.writeText(copyText || url.toString());
+    },
+    []
+  );
+
+  const onClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(
+    (e) => {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => {
+        setChecked(false);
+      }, 1500);
+      onCopy(e);
+      setChecked(true);
+    },
+    [onCopy]
+  );
+
+  // Avoid updates after being unmounted
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return (
+    <Button
+      variant={"tertiary"}
+      className={cn(
+        "text-current hover:opacity-70 hover:bg-transparet transition-all"
+      )}
+      onClick={onClick}
+    >
+      {checked ? (
+        <CheckIcon className="size-4" />
+      ) : (
+        <Link2Icon className="size-4" />
+      )}
+    </Button>
+  );
+}
+
 export {
   AccordionRoot,
   AccordionItem,