Fix types error (#1203)

Author: GoldGroove06

src/components/ui/Accordion/stories/AccordionRootVisualTests.stories.tsx

@@ -14,7 +14,7 @@ const Template: Story = (args) => <SandboxEditor>
             <Accordion.Trigger>
                 Hello
             </Accordion.Trigger>
-            <Accordion.Content>
+            <Accordion.Content index={0}>
                         abc
             </Accordion.Content>
         </Accordion.Item>
@@ -35,7 +35,7 @@ const AsChildTemplate: Story = (args) => {
                         <Accordion.Trigger>
                             Hello
                         </Accordion.Trigger>
-                        <Accordion.Content>
+                        <Accordion.Content index={0}>
                             abc
                         </Accordion.Content>
                     </Accordion.Item>

src/components/ui/Disclosure/stories/Disclosure.stories.tsx

@@ -46,7 +46,7 @@ export const Composed = () => {
     return <SandboxEditor>
         <Disclosure.Root>
             {disclosureItems.map((item) => (
-                <Disclosure.Item key={item.title}>
+                <Disclosure.Item key={item.title} value={0}>
                     <Disclosure.Trigger>
                         {item.title}
                     </Disclosure.Trigger>

src/components/ui/HoverCard/contexts/HoverCardContext.tsx

@@ -11,6 +11,7 @@ type HoverCardContextType = {
     getFloatingProps: () => Record<string, any>;
     floatingStyles: React.CSSProperties;
     rootClass: string;
+    rootTriggerClass: string;
     closeWithDelay: () => void;
     closeWithoutDelay: () => void;
     openWithDelay: () => void;

src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx

@@ -7,6 +7,7 @@ import Primitive from '~/core/primitives/Primitive';
 type HoverCardTriggerProps = {
     children: React.ReactNode,
     props?: React.HTMLAttributes<HTMLElement>
+    className?: string
 }
 
 const HoverCardTrigger = ({ children, className = '', ...props }: HoverCardTriggerProps) => {

src/components/ui/Kbd/Kbd.tsx

@@ -10,7 +10,7 @@ export type KbdProps = {
     customRootClass?: string;
     className?: string;
     size?: string;
-    props: Record<string, any>[];
+    props?: Record<string, any>[];
 }
 
 const Kbd = ({ children, customRootClass, className, size = '', ...props }: KbdProps) => {

src/components/ui/ScrollArea/fragments/ScrollAreaScrollbar.tsx

@@ -4,7 +4,11 @@ import React, { useContext, useRef, useCallback } from 'react';
 import { ScrollAreaContext } from '../context/ScrollAreaContext';
 import clsx from 'clsx';
 
-const ScrollAreaScrollbar = ({ children, className = '', ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+type ScrollAreaScrollbarProps = React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: 'horizontal' | 'vertical';
+};
+
+const ScrollAreaScrollbar = ({ children, className = '', orientation, ...props }: ScrollAreaScrollbarProps) => {
     const { rootClass, handleScrollbarClick, scrollXThumbRef } = useContext(ScrollAreaContext);
     const intervalRef = useRef<NodeJS.Timeout | null>(null);
     const isScrollingRef = useRef(false);
@@ -77,6 +81,7 @@ const ScrollAreaScrollbar = ({ children, className = '', ...props }: React.HTMLA
     return (
         <div
             className={clsx(rootClass + '-scrollbar', className)}
+            data-orientation={orientation}
             onMouseDown={startContinuousScroll}
             onMouseUp={stopContinuousScroll}
             onMouseLeave={stopContinuousScroll}

src/components/ui/ScrollArea/stories/ScrollArea.stories.tsx

@@ -5,7 +5,7 @@ import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 import Text from '~/components/ui/Text/Text';
 import Heading from '~/components/ui/Heading/Heading';
 
-const ScrollAreaTemplate = (args) => {
+const ScrollAreaTemplate = (args: any) => {
     return (
         <SandboxEditor>
             <ScrollArea.Root>
@@ -39,11 +39,11 @@ const ScrollAreaTemplate = (args) => {
 export default {
     title: 'WIP/ScrollArea',
     component: ScrollArea,
-    render: (args) => <ScrollAreaTemplate {...args}/>
+    render: (args: any) => <ScrollAreaTemplate {...args}/>
 };
 
 export const All = {};
-All.args = {};
+// All.args = {}; // Not needed, All is not a function story
 
 const LayoutTemplate = () => {
     return <SandboxEditor>
@@ -70,4 +70,5 @@ const LayoutTemplate = () => {
 };
 
 export const Layout = LayoutTemplate.bind({});
-Layout.args = {};
+// Layout.args = {}; // Not needed, Layout is not a function story
+// TODO: Add proper typing for args if needed in the future

src/core/primitives/Dialog/context/DialogPrimitiveContext.tsx

@@ -13,6 +13,7 @@ type DialogPrimitiveContextType = {
     setFloating: React.RefCallback<HTMLElement> | (() => void);
   };
   floatingStyles: React.CSSProperties;
+  floaterContext?: any
 };
 
 export const DialogPrimitiveContext = createContext<DialogPrimitiveContextType>({

src/core/primitives/Dialog/fragments/DialogPrimitiveRoot.tsx

@@ -5,14 +5,15 @@ import Floater from '~/core/primitives/Floater';
 
 export type DialogPrimitiveRootProps = {
     children: React.ReactNode;
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     onClickOutside?: () => void;
+    className?:string
 }
 
 const COMPONENT_NAME = 'DialogPrimitive';
 
-const DialogPrimitiveRoot = ({ children, open, onOpenChange = () => {}, onClickOutside = () => {}, ...props } : DialogPrimitiveRootProps) => {
+const DialogPrimitiveRoot = ({ children, open=false, onOpenChange = () => {}, onClickOutside = () => {}, className, ...props } : DialogPrimitiveRootProps) => {
     const [isOpen, setIsOpen] = useState(open);
     const handleOpenChange = (open: boolean) => {
         setIsOpen(open);
@@ -38,7 +39,7 @@ const DialogPrimitiveRoot = ({ children, open, onOpenChange = () => {}, onClickO
     const contextProps = { isOpen, handleOpenChange, floaterContext, handleOverlayClick, getReferenceProps, getFloatingProps, getItemProps, refs, floatingStyles };
     return (
         <DialogPrimitiveContext.Provider value={contextProps}>
-            <div {...props}>
+            <div {...props} className={className}>
                 {children}
             </div>
         </DialogPrimitiveContext.Provider>