torch-glare 1.0.2

package/lib/hooks/useResize.tsx

@@ -0,0 +1,78 @@
+import {
+    MutableRefObject,
+    RefObject,
+    useEffect,
+    useState,
+} from "react";
+import { calculateNewWidthFromMouse, calculateNewWidthFromTouch } from "../utils/resize";
+
+
+// Hook to handle resizing with RTL support
+export const useResize = (
+    resizableRef: MutableRefObject<HTMLElement> | RefObject<HTMLElement>
+) => {
+    const [width, setWidth] = useState<number>();
+    const [isResizing, setIsResizing] = useState<boolean>(false);
+    const [isRTL, setIsRTL] = useState<boolean>(false);
+
+
+
+    // Start the resize process
+    const handleStartResize = () => {
+        setIsResizing(true);
+    };
+
+    // Stop the resize process
+    const handleStopResize = () => {
+        setIsResizing(false);
+    };
+
+    // Handle mouse move events
+    const handleMouseMove = (event: MouseEvent) => {
+        if (!isResizing) return;
+        const newWidth = calculateNewWidthFromMouse(event, resizableRef, isRTL);
+        setWidth(newWidth);
+    };
+
+    // Handle touch move events
+    const handleTouchMove = (event: TouchEvent) => {
+        if (!isResizing) return;
+        event.preventDefault(); // Prevent scrolling or other touch-related behaviors
+        const newWidth = calculateNewWidthFromTouch(event, resizableRef, isRTL);
+        setWidth(newWidth);
+    };
+
+    useEffect(() => {
+        let htmlDir = ''
+        if (document) {
+            htmlDir = document.documentElement.getAttribute("dir") || "ltr"
+        }
+        // Determine the direction of the document
+        setIsRTL(htmlDir === "rtl");
+    }, []);
+
+    useEffect(() => {
+        if (!resizableRef.current) return;
+
+        // Add event listeners for mouse and touch events
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleStopResize);
+        document.addEventListener("touchmove", handleTouchMove, { passive: false });
+        document.addEventListener("touchend", handleStopResize);
+
+        // Cleanup event listeners on unmount
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleStopResize);
+            document.removeEventListener("touchmove", handleTouchMove);
+            document.removeEventListener("touchend", handleStopResize);
+        };
+    }, [isResizing, isRTL]); // Depend on `isRtl` to handle direction changes dynamically
+
+    return {
+        width,
+        isResizing,
+        handleStartResize,
+    };
+};
+

package/lib/layouts/CLayout.tsx

@@ -0,0 +1,326 @@
+import React, { HTMLAttributes, ReactNode, ButtonHTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+import { cva, VariantProps } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import Counter from "../components/CountBadge";
+import { Tooltip } from "../components/Tooltip";
+
+interface LayoutProps
+  extends HTMLAttributes<HTMLDivElement> {
+}
+function Layout({ ...props }: LayoutProps) {
+  return (
+    <section {...props} className="flex h-screen gap-[10px] bg-background-system-body-base lg:p-[16px]">
+      {props.children}
+    </section>
+  );
+}
+
+
+interface BodyProps
+  extends HTMLAttributes<HTMLDivElement> {
+}
+function Body({ ...props }: BodyProps) {
+  return (
+    <main {...props} className={cn("flex flex-grow flex-1 overflow-hidden", props.className)}>
+      <div className="flex lg:rounded-xl bg-background-system-body-tertiary shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] flex-1 flex-grow lg:p-1">
+        <div
+          className="lg:rounded-lg flex-1 flex-grow overflow-scroll  scrollbar-hide lg:p-[2px] lg:bg-[linear-gradient(130deg,var(--blue-sparkle-600)_0px,rgba(44,45,46,1)_46px)]"
+        >
+          {props.children}
+        </div>
+      </div>
+    </main>
+  );
+}
+
+
+interface SideBarProps
+  extends HTMLAttributes<HTMLDivElement> {
+  iconButtons?: ReactNode
+  headerChild?: ReactNode
+  navigationChildren?: ReactNode
+  footerChildren?: ReactNode
+  children?: ReactNode
+}
+function SideBar({ children, footerChildren, headerChild, navigationChildren, iconButtons, ...props }: SideBarProps) {
+  return (
+    <aside
+      {...props}
+      className={cn("hidden w-[265px] p-1 flex-shrink-0 items-start rounded-xl bg-background-system-body-tertiary shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] h-full lg:flex", props.className)}
+    >
+      <div className={cn("grid grid-rows-[56px_1fr] w-full rounded-lg border border-border-system-global-primary h-full gap-[1px]", {
+        "flex": children
+      })}>
+        {children ? (
+          children
+        ) : (
+          <>
+            <div className="bg-background-system-body-base w-full h-full rounded-t-lg flex justify-center items-center">
+              {headerChild}
+            </div>
+
+            <div className="grid grid-cols-[46px_1fr] gap-[1px] w-full h-full rounded-b-lg overflow-hidden">
+              {/* Icon Buttons Section */}
+              <div className="scrollbar-hide overflow-scroll flex flex-col justify-start items-center gap-[3px] w-[46px] h-full bg-background-system-body-base rounded-bl-lg rtl:rounded-br-lg rtl:rounded-bl-none">
+                {iconButtons}
+              </div>
+
+              {/* Navigation Section */}
+              <div className="scrollbar-hide h-full gap-[1px]  overflow-scroll grid grid-rows-[1fr_auto] grid-cols-1 rounded-br-lg rtl:rounded-bl-lg rtl:rounded-br-none">
+                <div className="flex flex-col h-full  overflow-scroll scrollbar-hide"
+                >
+                  <div className="flex flex-col gap-[1px] overflow-scroll scrollbar-hide">
+                    {Array.isArray(navigationChildren) ? (
+                      navigationChildren.map((child, index) => (
+                        <SideBarChildContainer key={index}>{child}</SideBarChildContainer>
+                      ))
+                    ) : (
+                      navigationChildren
+                    )}
+                  </div>
+                  <SideBarChildContainer className="flex-1" />
+                </div>
+
+                <SideBarChildContainer className="p-1 pt-[8px]">
+                  {footerChildren}
+                </SideBarChildContainer>
+              </div>
+
+            </div>
+          </>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+
+interface ChildProps
+  extends HTMLAttributes<HTMLDivElement> {
+  theme?: Themes
+}
+
+const SideBarChildContainer = ({ theme, ...props }: ChildProps) => {
+  return (
+    <div {...props} data-theme={theme} className={cn("w-full py-2 bg-background-system-body-base pr-2", props.className)}>
+      {props.children}
+    </div>
+  )
+}
+
+
+const SideBarItemStyles = cva([
+  "h-[40px] w-full px-[8px] flex gap-[6px] typography-body-small-medium justify-start items-center",
+  "text-content-system-global-primary border-l-[2px] rtl:border-r-[2px] border-transparent outline-none",
+  "hover:bg-white-alpha-075 hover:border-black-300 hover:text-content-system-action-primary-hover hover:px-[14px]",
+  "rounded-r-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
+
+],
+  {
+    variants: {
+      disabled: {
+        true: "text-content-system-global-disabled bg-transparent hover:bg-transparent fucus:bg-transparent active:bg-transparent"
+      },
+      active: {
+        true: "hover:px-[8px] !px-[8px]"
+      },
+      iconOnly: {
+        true: "w-[40px] justify-center overflow-hidden"
+      },
+      variant: {
+        default: [
+          "fucus:bg-background-system-action-primary-hover fucus:border-border-system-action-primary-hover"],
+        secondary: [
+          "focus:bg-wavy-navy-1000 focus:border-border-system-action-field-hover-selected",
+        ],
+
+      }
+    },
+    compoundVariants: [
+      {
+        active: true,
+        variant: "default",
+        className: [
+          "bg-background-system-action-primary-hover border-border-system-action-primary-hover !px-[8px] hover:px-[8px]",
+        ]
+      },
+      {
+        active: true,
+        variant: "secondary",
+        className: [
+          "bg-wavy-navy-1000 border-border-system-action-field-hover-selected !px-[8px] hover:px-[8px]",
+        ]
+      },
+      {
+        disabled: true,
+        variant: "secondary",
+        className: [
+          "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent hover:p-[8px] hover:text-content-system-global-disabled",
+        ]
+      },
+      {
+        disabled: true,
+        variant: "default",
+        className: [
+          "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent hover:p-[8px] hover:text-content-system-global-disabled",
+        ]
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+    },
+  });
+
+
+
+interface Props
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof SideBarItemStyles> {
+  asChild?: boolean;
+  as?: React.ElementType;
+  theme?: Themes
+  variant?: "default" | "secondary"
+  iconOnly?: boolean
+  active?: boolean
+  disabled?: boolean
+}
+const SideBarItem = ({ active, disabled, iconOnly, asChild, as: Tag = "span", theme, variant, ...props }: Props) => {
+  const Component = asChild ? Slot : Tag;
+
+  return (
+    <Component  {...props} data-theme={theme} disabled={disabled} className={cn(SideBarItemStyles({ variant, iconOnly, active, disabled }), props.className)}>
+
+    </Component>
+  )
+}
+
+
+const SideBarIconButtonStyles = cva([
+  "h-[36px] w-[36px] flex  text-content-system-global-primary text-[20px] justify-center items-center rounded-[8px] border border-transparent outline-none",
+  "fucus:bg-border-system-action-primary-Hover active:bg-border-system-action-primary-Hover",
+  "transition-all duration-200 ease-in-out flex-shrink-0 m-[5px] relative",
+],
+  {
+    variants: {
+      active: {
+        true: ""
+      },
+      variant: {
+        default: ["hover:bg-background-system-action-secondary-hover hover:border-border-system-action-primary-hover"],
+        secondary: ["hover:bg-wavy-navy-1000 hover:border-border-system-action-field-hover-selected"],
+
+      }
+    },
+    compoundVariants: [
+      {
+        active: true,
+        variant: "default",
+        className: [
+          "bg-background-system-action-secondary-hover border-border-system-action-primary-hover"]
+      },
+      {
+        active: true,
+        variant: "secondary",
+        className: [
+          "bg-background-system-action-secondary-hover border-border-system-action-primary-hover"
+        ]
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+    },
+  });
+
+
+interface SideBarIconButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof SideBarItemStyles> {
+  asChild?: boolean;
+  as?: React.ElementType;
+  theme?: Themes
+  variant?: "default" | "secondary"
+  active?: boolean
+  count?: number
+  message?: ReactNode
+  disabled?: boolean
+}
+
+const SideBarIconButton = ({ count, active, asChild, message, as: Tag = "button", theme, variant, ...props }: SideBarIconButtonProps) => {
+  const Component = asChild ? Slot : Tag;
+
+  return (
+    message ?
+      <Tooltip variant={"highlight"} text={message} toolTipSide='left' className='z-[1000]'>
+        <Component {...props} data-theme={theme} className={cn(SideBarIconButtonStyles({ variant, active }))}>
+          {props.children}
+          {count && <Counter className=' absolute top-[2px] right-[2px]' label={count} />}
+        </Component>
+      </Tooltip>
+      :
+      <Component {...props} data-theme={theme} className={cn(SideBarIconButtonStyles({ variant, active }))}>
+        {props.children}
+        {count && <Counter className=' absolute top-[2px] right-[2px]' label={count} />}
+      </Component>
+  )
+}
+
+
+interface SideBarFooterItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  theme?: Themes
+  as?: React.ElementType;
+  asChild?: boolean;
+  variant?: "primary" | "secondary"
+}
+
+const glareFeedbackItemStyle = cva(
+  [
+    "h-[40px] w-full flex justify-center items-center rounded-[4px] px-2",
+    "text-content-system-global-primary typography-body-small-medium",
+    "border border-transparent outline-none bg-background-system-body-base",
+    "focus:bg-background-system-action-primary-selected",
+    "transition-all duration-200 ease-in-out",
+  ], {
+  variants: {
+    variant: {
+      primary:
+        [
+          "hover:bg-background-system-action-primary-hover hover:border-border-system-action-primary-hover",
+          "active:bg-background-system-action-primary-hover active:border-border-system-action-primary-hover "],
+      secondary: [
+        "hover:bg-wavy-navy-1000  hover:border-border-system-action-field-hover-selected",
+        "active:bg-wavy-navy-1000 active:border-border-system-action-field-hover-selected"],
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+}
+);
+
+
+const SideBarFooterItem: React.FC<SideBarFooterItemProps> = ({ asChild,
+  as: Tag = "button", theme, variant, ...props }) => {
+  const Component = asChild ? Slot : Tag;
+
+  return (
+    <Component
+      data-theme={theme}
+      {...props}
+      className={cn(glareFeedbackItemStyle({ variant }), props.className)}
+    >
+    </Component>
+  );
+};
+
+
+export {
+  SideBar,
+  SideBarFooterItem,
+  SideBarItem,
+  SideBarChildContainer,
+  SideBarIconButton,
+  Body,
+  Layout
+}

package/lib/layouts/FieldSection.tsx

@@ -0,0 +1,64 @@
+import { cn } from "../utils/cn";
+import { ReactNode } from "react";
+import { Label } from "../components/Label";
+import { Themes } from "../utils/types";
+
+interface Props {
+  label?: ReactNode;
+  secondaryLabel?: ReactNode;
+  requiredLabel?: ReactNode;
+  size?: "S" | "M" | "L";
+  childrenUnderLabel?: ReactNode;
+  theme?: Themes;
+  className?: string;
+  children?: ReactNode;
+  direction?: "horizontal" | "vertical" | "flexible";
+}
+
+export function FieldSection({
+  children,
+  label,
+  secondaryLabel,
+  direction = "flexible",
+  requiredLabel,
+  size,
+  theme,
+  className,
+  childrenUnderLabel,
+  ...props
+}: Props) {
+  return (
+    <section
+      {...props}
+      data-theme={theme}
+      className={cn(
+        "grid  border-t border-border-presentation-global-primary py-[16px] px-[12px] w-full max-w-[1200px] min-w-[0px] ",
+        direction === "vertical" && "grid-rows-[auto_1fr] gap-[12px]",
+        direction === "horizontal" && "grid-cols-[350px_1fr] gap-[24px]",
+        direction === "flexible" &&
+        "grid-rows-[auto_1fr] gap-[12px] lg:grid-cols-[350px_1fr] lg:grid-rows-[1fr] lg:gap-[24px]",
+        className
+      )}
+    >
+      {/* Fixed width section for labels */}
+      <div className="flex flex-col gap-[12px]">
+        {label && (
+          <Label
+            size={size}
+            label={label}
+            requiredLabel={requiredLabel}
+            directions={"horizontal"}
+          />
+        )}
+
+        {secondaryLabel && (
+          <Label size={size} secondaryLabel={secondaryLabel} />
+        )}
+        {childrenUnderLabel}
+      </div>
+
+      {/* Flexible section that takes up the remaining space */}
+      <div className="flex flex-col items-end gap-[12px]">{children}</div>
+    </section>
+  );
+}

package/lib/layouts/TreeSubLayout.tsx

@@ -0,0 +1,187 @@
+'use client';
+import { usePathname } from "next/navigation";
+import TabFormItem from "@/components/TabFormItem";
+import { cn } from "@/utils/cn";
+import Link from "next/link";
+import { useActiveTreeItem } from "@/hooks/useActiveTreeItem";
+
+interface TreeItem {
+  id: string;
+  title: string;
+  subTree?: TreeItem[];
+}
+export type PathConfig = {
+  [key: string]: {
+    pageHeader: string;
+    subTitle?: string;
+    TabsTree: TreeItem[];
+  };
+};
+
+export default function TreeSubLayout({
+  children,
+  treeData,
+}: {
+  children: React.ReactNode;
+  treeData: PathConfig;
+}) {
+  const pathname = usePathname();
+  const allIds = treeData[pathname].TabsTree?.flatMap((item) => [
+    item.id,
+    ...(item.subTree?.map((sub) => sub.id) || []),
+  ]);
+  const { activeId } = useActiveTreeItem(allIds);
+
+
+  return (
+    <div
+      className={cn(
+        "flex gap-[2px] h-full overflow-hidden transition-all ease-in-out delay-150 lg:bg-none lg:rounded-2 ",
+      )}
+    >
+      <div className="grid grid-rows-[60px_1fr] h-full flex-1 gap-[2px] rounded-2 flex-shrink-0 min-w-[300px]">
+        <HeaderPage
+          title={treeData[pathname]?.pageHeader}
+          subTitle={treeData[pathname]?.subTitle}
+        />
+        <div className="grid grid-cols-[1fr] overflow-hidden lg:rounded-b-[6px] xl:grid-cols-[1fr_300px]">
+          <div className="scrollbar-hide overflow-scroll scroll-smooth bg-background-system-body-base h-full">
+            <div className="overflow-scroll scrollbar-hide scroll-smooth bg-[#B2D0FF0D] h-full w-full p-[12px]">
+              {children}
+            </div>
+          </div>
+
+          <div className="border-l border-border-presentation-global-primary bg-background-system-body-base scrollbar-hide hidden xl:block">
+            <div className="flex flex-col items-start gap-3 h-full py-8 px-6 overflow-y-auto scrollbar-hide">
+              {treeData[pathname].TabsTree.map((item) => (
+                <TreeSection
+                  key={item.id}
+                  href={`${item.id}`}
+                  isActive={
+                    activeId === item.id ||
+                    item.subTree?.some((sub) => sub.id === activeId)
+                  }
+                  title={item?.title}
+                  subTitles={item?.subTree?.map((sub) => ({
+                    ...sub,
+                    isActive: activeId === sub.id,
+                  }))}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+
+function TreeSection({
+  href,
+  isActive,
+  title,
+  subTitles,
+}: {
+  href: string;
+  isActive?: boolean;
+  title: string;
+  subTitles?: { id: string; title: string; isActive?: boolean }[];
+}) {
+
+  return (
+    <div
+      className={`flex flex-col items-start gap-[12px] w-full  transition-colors duration-200`}
+    >
+      <TabFormItem
+        componentType="tree"
+        active={isActive}
+        className={`w-full`}
+        asChild
+      >
+        <Link href={`#${href}`}>
+          {title}
+        </Link>
+      </TabFormItem>
+      {subTitles && <div
+        className={`w-full h-[1px]
+            bg-border-presentation-global-primary
+        `}
+      ></div>}
+      {subTitles &&
+        <div className="flex items-start flex-1 w-full pl-4">
+          <div
+            className={`w-[1px] h-full bg-border-presentation-global-primary`}
+          />
+          <div className="flex p-[4px_0px_4px_8px] flex-col items-start gap-1 w-full flex-1">
+            {subTitles?.map((item) => (
+              <TabFormItem
+                componentType="tree"
+                key={item.id}
+                active={item.isActive}
+                className="w-full"
+                asChild
+              >
+                <Link href={`#${item.id}`}>
+                  {item.title}
+                </Link>
+              </TabFormItem>
+            ))}
+          </div>
+        </div>
+      }
+    </div>
+  );
+}
+
+
+export function HeaderPage({
+  title,
+  subTitle,
+  children,
+  type = "start",
+  className,
+}: {
+  title: string;
+  subTitle?: string;
+  children?: React.ReactNode;
+  type?: "space-between" | "start";
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn("w-full h-fit transition-all duration-300 ease-in-out  lg:rounded-[8px_8px_0px_0px] lg:z-auto",
+        "bg-[linear-gradient(90deg,var(--blue-sparkle-600)_0px,rgba(44,45,46,1)_190px)] lg:bg-background-system-body-base",
+        "pb-[2px] lg:pb-0",
+        className)}
+    >
+      <div className="w-full h-full flex flex-col justify-center items-start rounded-[6px_6px_0px_0px] transition-all duration-300 ease-in-out lg:bg-none lg:bg-background-system-body-base   lg:h-fit">
+        <div className="lg:hidden w-full bg-background-system-body-base px-[12px] h-[52px] flex justify-start items-center overflow-y-scroll border-b-[2px] border-[#2c2d2e]">
+        </div>
+        <div
+          className={cn(
+            `flex h-fit relative gap-2  items-center w-full lg:w-fit `,
+            "bg-background-system-body-secondary lg:bg-transparent",
+            "h-[52px] px-[16px]  lg:py-[16px] rtl:pr-4 ltr:pl-4 lg:h-[60px]",
+            className
+          )}
+        >
+          <h1 className="text-content-system-global-primary whitespace-nowrap leading-none typography-display-large-semibold z-20 text-left lg:typography-display-medium-regular lg:uppercase">
+            {title}
+          </h1>
+          <p className="hidden mb-[-6px] sm:block text-content-presentation-global-secondary typography-headers-medium-regular z-20 lg:uppercase">{subTitle}</p>
+          <div className="h-[24px] hidden w-[1px] bg-border-presentation-global-primary z-20 sm:block"></div>
+        </div>
+        <div
+          className={cn(
+            "w-full flex rtl:pl-4 items-center ltr:pr-4",
+            type === "space-between" && "justify-end"
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}