@rovula/ui 0.0.15 → 0.0.17

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/index.ts

@@ -10,7 +10,9 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 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 * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";

package/src/theme/global.css

@@ -108,23 +108,39 @@
     --grey-default: var(--grey-100);
     --grey-foreground: var(--white);
   
+    --info-lighter: 208 242 255;
+    --info-light: 116 202 255;
     --info-100: 41 152 255; /* #2998FF */
     --info-120: 33 122 204; /* #217ACC */
+    --info-dark: 12 83 183;
+    --info-darker: 4 41 122;
     --info-default: var(--info-100);
     --info-foreground: var(--white);
     
+    --success-lighter: 233 252 212;
+    --success-light: 170 242 127;
     --success-100: 84 214 44; /* #54D62C */
     --success-120: 67 171 35; /* #43AB23 */
+    --success-dark: 34 154 22;
+    --success-darker:8 102 13;
     --success-default: var(--success-100);
     --success-foreground: var(--white);
     
+    --warning-lighter: 255 247 205;
+    --warning-light:255 225 106;
     --warning-100: 255 193 7; /* #FFC107 */
     --warning-120: 204 154 6; /* #CC9A06 */
+    --warning-dark: 183 129 3;
+    --warning-darker: 122 79 1;
     --warning-default: var(--warning-100);
     --warning-foreground: var(--white);
     
+    --error-lighter: 255 231 217;
+    --error-light: 255 164 141;
     --error-100: 255 77 53; /* #FF4D35 */
     --error-120: 204 62 42; /* #CC3E2A */
+    --error-dark: 183 33 54;
+    --error-darker: 122 12 46;
     --error-default: var(--error-100);
     --error-foreground: var(--white);
 

package/src/theme/presets/colors.js

@@ -118,26 +118,42 @@ module.exports = {
           foreground: "rgb(var(--grey2-foreground) / <alpha-value>)",
         },
         info: {
+          lighter: "rgb(var(--info-lighter)) / <alpha-value>)",
+          light: "rgb(var(--info-light)) / <alpha-value>)",
           100: "rgb(var(--info-100)) / <alpha-value>)",
           120: "rgb(var(--info-120)) / <alpha-value>)",
+          dark: "rgb(var(--info-dark)) / <alpha-value>)",
+          darker: "rgb(var(--info-darker)) / <alpha-value>)",
           DEFAULT: "rgb(var(--info-default) / <alpha-value>)",
           foreground: "rgb(var(--info-foreground) / <alpha-value>)",
         },
         success: {
+          lighter: "rgb(var(--success-lighter)) / <alpha-value>)",
+          light: "rgb(var(--success-light)) / <alpha-value>)",
           100: "rgb(var(--success-100)) / <alpha-value>)",
           120: "rgb(var(--success-120)) / <alpha-value>)",
+          dark: "rgb(var(--success-dark)) / <alpha-value>)",
+          darker: "rgb(var(--success-darker)) / <alpha-value>)",
           DEFAULT: "rgb(var(--success-default) / <alpha-value>)",
           foreground: "rgb(var(--success-foreground) / <alpha-value>)",
         },
         warning: {
+          lighter: "rgb(var(--warning-lighter)) / <alpha-value>)",
+          light: "rgb(var(--warning-light)) / <alpha-value>)",
           100: "rgb(var(--warning-100) / <alpha-value>)",
           120: "rgb(var(--warning-120) / <alpha-value>)",
+          dark: "rgb(var(--warning-dark)) / <alpha-value>)",
+          darker: "rgb(var(--warning-darker)) / <alpha-value>)",
           DEFAULT: "rgb(var(--warning-default) / <alpha-value>)",
           foreground: "rgb(var(--warning-foreground) / <alpha-value>)",
         },
         error: {
+          lighter: "rgb(var(--error-lighter)) / <alpha-value>)",
+          light: "rgb(var(--error-light)) / <alpha-value>)",
           100: "rgb(var(--error-100) / <alpha-value>)",
           120: "rgb(var(--error-120) / <alpha-value>)",
+          dark: "rgb(var(--error-dark)) / <alpha-value>)",
+          darker: "rgb(var(--error-darker)) / <alpha-value>)",
           DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
           foreground: "rgb(var(--error-foreground) / <alpha-value>)",
         },