Fix typescript and eslint errors

Author: Kubit

src/assets/storybook/videos/videos.ts

@@ -161,7 +161,7 @@ export const ArrowRightIconContainer = styled.div<{
       getStyles(styles[CarouselArrowStateType.DEFAULT]?.arrowRightIconButtonContainer)};
     &:focus {
       ${props =>
-        getStyles(props.styles[CarouselArrowStateType.DEFAULT]?.arrowLeftIconButtonContainer)}
+        getStyles(props.styles[CarouselArrowStateType.DEFAULT]?.arrowRightIconButtonContainer)}
     }
     &:hover {
       ${props =>

src/components/carousel/carousel.styled.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 
 import { Footer } from '@/components/footer/footer';
@@ -54,7 +55,6 @@ const DrawerStandAloneComponent = (
         <DrawerTitleContentFooterContainerStyled blocked={blocked} styles={props.styles}>
           <DrawerTitleStyled
             data-drawer-title
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             as={Text as any}
             component={titleComponent as unknown as TextComponentType}
             customTypography={props.styles.title}
@@ -80,7 +80,6 @@ const DrawerStandAloneComponent = (
           {props.footer?.content && (props.styles.footer?.variant || props.footer.variant) && (
             <DrawerFooterStyled
               data-drawer-footer
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
               as={Footer as any}
               customFooterStyles={props.styles}
               variant={props.styles.footer?.variant}

src/components/drawer/drawerStandAlone.tsx

@@ -85,6 +85,7 @@ export * from './tableV2';
 export * from './dataTable';
 export * from './video';
 export * from './progressBar';
+
 export * from './virtualKeyboard';
 
 /**
@@ -110,6 +111,7 @@ export * from './headerStructure';
 export * from './footer';
 export * from './portal';
 export * from './textCount';
+
 export * from './operativeLayout';
 export * from './emptyState';
 export * from './loadingState';

src/components/index.ts

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
+import { Button } from '@/components/button/button';
 import {
   additionalInfoAction,
   labelSecondary,
@@ -25,12 +27,29 @@ const meta = {
     figmaUrl:
       'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-29850&mode=dev',
   },
+  render: ({ ...args }) => <StoryWithHooks {...args} />,
 } satisfies Meta<typeof Story>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 
+const StoryWithHooks = args => {
+  const [value, setValue] = React.useState<string | number | undefined>(3);
+  const onClick = () => {
+    setValue(undefined);
+  };
+
+  return (
+    <div>
+      <Story {...args} value={value} />
+      <Button size="MEDIUM" variant="PRIMARY" onClick={onClick}>
+        Clear
+      </Button>
+    </div>
+  );
+};
+
 const commonArgs: IInputCurrency = {
   variant: Object.values(variantsObject[themeSelected].InputCurrencyVariant || {})[0] as string,
   id: 'input',

src/components/inputCurrency/stories/inputCurrency.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 
 import { useId } from '@/hooks/useId/useId';
@@ -26,7 +27,7 @@ const PillStandAloneComponent = (
 
   return (
     <PillRootContainerStyled
-      ref={ref}
+      ref={ref as any}
       aria-controls={props['aria-controls']}
       aria-selected={type === PillType.TAB ? props.selected : undefined}
       as={[PillType.BUTTON, PillType.TAB].includes(type) ? PillAsButton : undefined}

src/components/pillV2/pillStandAlone.tsx

@@ -89,6 +89,8 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
       }
       // limit or truncate the value
       controlValue(newValue);
+    } else {
+      handleSetValue('');
     }
     firstRender.current = false;
   }, [props.currentValue]);