@rovula/ui 0.0.16 → 0.0.18

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Collapsible from "./Collapsible";
+
+const meta: any = {
+  title: "Components/Collapsible",
+  component: Collapsible,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+
+const Test = () => {
+  useEffect(() => {
+    console.log("Mont");
+    return () => {
+      console.log("UnMont");
+    };
+  }, []);
+
+  return <p>This is the content of section 1.</p>;
+};
+
+export const Default = {
+  args: {
+    size: "md",
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-col gap-1 w-full ">
+        <Collapsible isExpand {...props}>
+          <Collapsible.Button>Section 1</Collapsible.Button>
+          <Collapsible.Panel>
+            This is the content of section 1.
+          </Collapsible.Panel>
+        </Collapsible>
+        <Collapsible>
+          <Collapsible.Button>Section 2</Collapsible.Button>
+          <Collapsible.Panel>
+            <p>This is the content of section 2.</p>
+          </Collapsible.Panel>
+        </Collapsible>
+        <Collapsible>
+          <Collapsible.Button>Section 3</Collapsible.Button>
+          <Collapsible.Panel>
+            <p>This is the content of section 3.</p>
+          </Collapsible.Panel>
+        </Collapsible>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Collapsible/Collapsible.styles.ts

@@ -0,0 +1,62 @@
+import { cva } from "class-variance-authority";
+
+export const collapseButtonVariants = cva(
+  [
+    "flex flex-1 bg-gray-100 hover:bg-gray-200",
+    "focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "py-2 px-3",
+        md: "py-3 px-4",
+        lg: "py-4 px-5",
+      },
+    },
+
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const collapseIconVariants = cva(
+  ["transition-all flex content-center justify-center "],
+  {
+    variants: {
+      size: {
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-7",
+      },
+      isExpand: {
+        true: "rotate-180",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      isExpand: false,
+    },
+  }
+);
+
+export const collapsePanelVariants = cva(
+  ["flex flex-1 border-t", "transition ease-in-out delay-150 duration-300"],
+  {
+    variants: {
+      size: {
+        sm: "py-2 px-3",
+        md: "py-3 px-4",
+        lg: "py-4 px-5",
+      },
+    },
+
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const collapseContainerVariants = cva([
+  "flex flex-col border rounded overflow-hidden",
+]);

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,113 @@
+import React, { forwardRef, Ref, useEffect, useRef, useState } from "react";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { CollapsibleProvider, useCollapsible } from "./CollapsibleContext";
+import { cn } from "@/utils/cn";
+import {
+  collapseButtonVariants,
+  collapseContainerVariants,
+  collapseIconVariants,
+  collapsePanelVariants,
+} from "./Collapsible.styles";
+
+const CollapsibleButton = forwardRef<
+  HTMLButtonElement,
+  {
+    children: React.ReactNode;
+    className?: string;
+    hideExpandIcon?: boolean;
+  }
+>(({ children, className, hideExpandIcon = false }, ref) => {
+  const { toggle, isExpand, size } = useCollapsible();
+
+  const collapseButtonClassName = collapseButtonVariants({ size });
+  const collapseIconClassName = collapseIconVariants({ isExpand, size });
+
+  return (
+    <button
+      onClick={toggle}
+      className={cn(collapseButtonClassName, className)}
+      ref={ref}
+    >
+      <span className="flex flex-1">{children}</span>
+      {!hideExpandIcon && (
+        <span className={cn(collapseIconClassName)}>
+          <ChevronDownIcon className={cn("size-full")} />
+        </span>
+      )}
+    </button>
+  );
+});
+
+CollapsibleButton.displayName = "CollapsibleButton";
+
+const CollapsiblePanel = forwardRef<
+  HTMLDivElement,
+  { children: React.ReactNode; className?: string }
+>(({ children, className }, ref) => {
+  const { isExpand, size } = useCollapsible();
+  const collapsePanelClassName = collapsePanelVariants({ size });
+
+  const [height, setHeight] = useState<string | number>("0px");
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setHeight(isExpand ? `${contentRef.current.scrollHeight}px` : "0px");
+    }
+  }, [isExpand, children]); // Add `children` to the dependency array to recalculate height on content change
+
+  return (
+    <div
+      ref={ref}
+      className={cn("overflow-hidden transition-all ease-in-out")}
+      style={{ height }}
+    >
+      <div ref={contentRef} className={cn(collapsePanelClassName, className)}>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+CollapsiblePanel.displayName = "CollapsiblePanel";
+
+interface CollapsibleComponent
+  extends React.ForwardRefExoticComponent<
+    CollapsibleProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Button: typeof CollapsibleButton;
+  Panel: typeof CollapsiblePanel;
+}
+
+interface CollapsibleProps {
+  size?: "sm" | "md" | "lg";
+  children: React.ReactNode;
+  isExpand?: boolean;
+  className?: string;
+  onToggle?: (isExpand: boolean) => void;
+}
+
+const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
+  ({ children, isExpand, size, className, onToggle }, ref) => {
+    const collapseContainerClassName = collapseContainerVariants();
+
+    return (
+      <CollapsibleProvider
+        size={size}
+        isExpandControlled={isExpand}
+        onToggle={onToggle}
+      >
+        <div ref={ref} className={cn(collapseContainerClassName, className)}>
+          {children}
+        </div>
+      </CollapsibleProvider>
+    );
+  }
+) as CollapsibleComponent;
+
+Collapsible.displayName = "Collapsible";
+
+Collapsible.Button = CollapsibleButton;
+Collapsible.Panel = CollapsiblePanel;
+
+export default Collapsible;

package/src/components/Collapsible/CollapsibleContext.tsx

@@ -0,0 +1,61 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
+
+interface CollapsibleContextProps {
+  size?: "sm" | "md" | "lg";
+  isExpand: boolean;
+  toggle: () => void;
+  setIsExpand: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const CollapsibleContext = createContext<CollapsibleContextProps | undefined>(
+  undefined
+);
+
+export const useCollapsible = (): CollapsibleContextProps => {
+  const context = useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error("useCollapsible must be used within a CollapsibleProvider");
+  }
+  return context;
+};
+
+interface CollapsibleProviderProps {
+  size?: "sm" | "md" | "lg";
+  children: ReactNode;
+  isExpandControlled?: boolean;
+  onToggle?: (isExpand: boolean) => void;
+}
+
+export const CollapsibleProvider: React.FC<CollapsibleProviderProps> = ({
+  size,
+  children,
+  isExpandControlled,
+  onToggle,
+}) => {
+  const [isExpand, setIsExpand] = useState<boolean>(false);
+
+  const toggle = () => {
+    setIsExpand((prev) => !prev);
+    if (onToggle) onToggle(!isExpand);
+  };
+
+  useEffect(() => {
+    if (isExpandControlled !== undefined) {
+      setIsExpand(isExpandControlled);
+    }
+  }, [isExpandControlled]);
+
+  return (
+    <CollapsibleContext.Provider
+      value={{ size, isExpand, toggle, setIsExpand }}
+    >
+      {children}
+    </CollapsibleContext.Provider>
+  );
+};

package/src/components/Collapsible/index.ts

@@ -0,0 +1 @@
+export { default as Collapsible } from "./Collapsible";

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import DatePicker from "./DatePicker";
+
+// import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+
+const meta = {
+  title: "Components/DatePicker",
+  component: DatePicker,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    const [date, setDate] = React.useState<Date | undefined>(undefined);
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <DatePicker date={date} onSelect={setDate} />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import React, { FC, useState } from "react";
+import { CalendarIcon } from "@heroicons/react/16/solid";
+
+import { Calendar } from "../Calendar";
+import Button from "../Button/Button";
+import { cn } from "@/utils/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
+import { SelectSingleEventHandler } from "react-day-picker";
+import { TextInput } from "../TextInput/TextInput";
+import { format } from "date-fns/format";
+
+type DatePickerProps = {
+  date: Date | undefined;
+  onSelect: SelectSingleEventHandler;
+};
+
+CalendarIcon;
+
+const DatePicker: FC<DatePickerProps> = ({ date, onSelect }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <div className="flex">
+            <TextInput
+              fullwidth
+              id="2"
+              readOnly
+              label="Date"
+              size="md"
+              value={date ? format(date, "dd MMM yyyy") : isOpen ? " " : ""}
+              hasClearIcon={false}
+              endIcon={<CalendarIcon fill="inherit" />}
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={(...value) => {
+              onSelect?.(...value);
+              setIsOpen(false);
+            }}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+export default DatePicker;

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+
+const meta = {
+  title: "Components/Popver",
+  component: Popover,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Popover>
+          <PopoverTrigger>Open</PopoverTrigger>
+          <PopoverContent>Place content for the popover here.</PopoverContent>
+        </Popover>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/utils/cn";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popup-background p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

package/src/components/TextInput/TextInput.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import TextInput from "./TextInput";
+import { CalendarIcon } from "@heroicons/react/16/solid";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -87,3 +88,38 @@ export const CustomLabel = {
     );
   },
 } satisfies StoryObj;
+
+export const FuctionInput = {
+  args: {
+    label: "Placeholder Text",
+    disabled: false,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextInput
+          id="1"
+          size="lg"
+          {...args}
+          endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+        />
+        <TextInput
+          id="2"
+          size="md"
+          {...args}
+          endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+        />
+        <TextInput
+          id="3"
+          size="sm"
+          {...args}
+          endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/TextInput/TextInput.styles.ts

@@ -37,6 +37,9 @@ export const inputVariant = cva(
       hasClearIcon: {
         true: "",
       },
+      rightSectionIcon: {
+        false: "",
+      },
     },
     compoundVariants: [
       {
@@ -58,6 +61,21 @@ export const inputVariant = cva(
         size: "lg",
         class: "focus:pe-10",
       },
+      {
+        rightSectionIcon: true,
+        size: "sm",
+        class: "pe-[38px]",
+      },
+      {
+        rightSectionIcon: true,
+        size: "md",
+        class: "pe-[46px]",
+      },
+      {
+        rightSectionIcon: true,
+        size: "lg",
+        class: "pe-[72px]",
+      },
     ],
     defaultVariants: {
       size: "md",
@@ -67,6 +85,7 @@ export const inputVariant = cva(
       disabled: false,
       error: false,
       hasClearIcon: false,
+      rightSectionIcon: false,
     },
   }
 );
@@ -167,3 +186,29 @@ export const iconVariant = cva(
     },
   }
 );
+
+export const sectionIconWrapperVariant = cva(
+  [
+    "absolute inset-y-0 right-0 items-center justify-center flex",
+    "border-l border-l-input-stroke peer-hover:border-l-input-active peer-focus:border-l-input-stroke-active peer-disabled:border-l-input-stroke-disabled",
+    "fill-input-text peer-hover:fill-input-text-active peer-focus:fill-input-text-active",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-1 size-[30px]",
+        md: "p-2 size-[38px]",
+        lg: "p-3 size-14",
+      },
+      rounded: {
+        none: "rounded-r-none",
+        normal: "rounded-r-xl",
+        full: "rounded-r-full",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      rounded: "normal",
+    },
+  }
+);

package/src/components/TextInput/TextInput.tsx

@@ -11,6 +11,7 @@ import {
   iconWrapperVariant,
   inputVariant,
   labelVariant,
+  sectionIconWrapperVariant,
 } from "./TextInput.styles";
 import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
@@ -58,6 +59,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const _id = id || `${type}-${label}-input`;
+    const hasRightSectionIcon = !!endIcon;
     const inputClassname = inputVariant({
       size,
       rounded,
@@ -65,7 +67,8 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       fullwidth,
       disabled,
       error,
-      hasClearIcon,
+      hasClearIcon: hasRightSectionIcon ? false : hasClearIcon,
+      rightSectionIcon: hasRightSectionIcon,
     });
     const labelClassname = labelVariant({
       size,
@@ -75,6 +78,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
     const iconClassname = iconVariant({ size });
+    const sectionIconWrapperClassname = sectionIconWrapperVariant({
+      size,
+      rounded,
+    });
 
     useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
@@ -96,7 +103,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             disabled={disabled}
             className={cn(inputClassname, props.className)}
           />
-          {hasClearIcon && (
+          {hasClearIcon && !hasRightSectionIcon && (
             <div className={iconWrapperClassname}>
               <XCircleIcon
                 type="button"
@@ -105,7 +112,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
               />
             </div>
           )}
-          {endIcon}
+          {hasRightSectionIcon && (
+            <div className={sectionIconWrapperClassname}>{endIcon}</div>
+          )}
+
           <label htmlFor={_id} className={cn(labelClassname, labelClassName)}>
             {label} {required && <span className="text-error">*</span>}
           </label>

package/src/index.ts

@@ -12,6 +12,14 @@ export { Input } from "./components/Input/Input";
 export { Navbar } from "./components/Navbar";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
+export { Collapsible } from "./components/Collapsible";
+export { Calendar } from "./components/Calendar";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "./components/Popover/Popover";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";