chore: fix ui libs types

libs/ui/packages/native/storybook/stories/ChartCard/ChartCard.stories.tsx

@@ -42,7 +42,7 @@ export const ChartCardDefault = (args: typeof ChartCardDefaultArgs): JSX.Element
   const [rangeRequest, setRangeRequest] = useState("24h");
 
   const refreshChart = useCallback(
-    (request) => {
+    (request: any) => {
       if (request && request.range) {
         const { range } = request;
         setRangeRequest(range);

libs/ui/packages/native/storybook/stories/Form/Input/BaseInput.stories.tsx

@@ -62,6 +62,7 @@ export const BaseInputRenderSideExempleStory = () => {
       value={value}
       onChange={onChange}
       renderLeft={renderLeft}
+      // @ts-expect-error inconsistenties in props
       renderRight={renderRight}
       placeholder={"test"}
       disabled={disabled}

libs/ui/packages/react/src/components/Table/Table.stories.tsx

@@ -465,10 +465,10 @@ const CustomRowContainer = styled(Table.RowContainer).attrs<{ onClick: () => voi
 `;
 
 export const CustomRows: StoryTemplate<Props<BalanceElement>> = args => {
-  const [selectedRowIndex, setSelectedRowIndex] = useState(null);
+  const [selectedRowIndex, setSelectedRowIndex] = useState<number | undefined>();
 
   const renderRow = useCallback(
-    (rowIndex, children) => (
+    (rowIndex: number, children?: React.ReactNode) => (
       <CustomRowContainer rowIndex={rowIndex} onClick={() => setSelectedRowIndex(rowIndex)}>
         {children}
       </CustomRowContainer>

libs/ui/packages/react/src/components/form/BaseInput/Input.stories.tsx

@@ -67,6 +67,7 @@ export const RenderSideExemple = (): JSX.Element => {
       error={error}
       onChange={setValue}
       renderLeft={renderLeft}
+      // @ts-expect-error inconsistencie in props
       renderRight={renderRight}
       placeholder={"test"}
     />

libs/ui/packages/react/src/components/layout/List/VerticalTimeline/VerticalTimeline.stories.tsx

@@ -33,7 +33,7 @@ const steps = [
        */
        estimatedTime?: number;
     },
-    {  
+    {
       status: ItemStatus;
       title: string;
       renderBody?: (isDisplayed?: boolean) => ReactNode;
@@ -69,9 +69,12 @@ const defaultItems: Item[] = [
     title: "step's {title} prop",
     renderBody: () => (
       <Flex flexDirection="column" flex={1} border="1px solid" borderColor="neutral.c100" p={3}>
+        {/* @ts-expect-error children props issue */}
         <BodyText>{`This box is the React node returned by the step's {renderBody} prop`}</BodyText>
         <Divider my={6} text="`Divider` component" />
+        {/* @ts-expect-error children props issue */}
         <SubtitleText>This subtitle text component is `VerticalTimeline.SubtitleText`</SubtitleText>
+        {/* @ts-expect-error children props issue */}
         <BodyText>This body text component is `VerticalTimeline.BodyText`</BodyText>
         <ContinueOnDevice
           Icon={({ size }) => (
@@ -88,6 +91,7 @@ const defaultItems: Item[] = [
     estimatedTime: 120,
     renderBody: () => (
       <Flex flexDirection="column">
+        {/* @ts-expect-error children props issue */}
         <BodyText>
           {`Your PIN can be 4 to 8 digits long. Anyone with access to your Nano and to your PIN can also access all your crypto and NFT assets.`}
         </BodyText>
@@ -106,12 +110,16 @@ const defaultItems: Item[] = [
     estimatedTime: 300,
     renderBody: () => (
       <Flex flexDirection="column">
+        {/* @ts-expect-error children props issue */}
         <SubtitleText>{`Generate a new phrase`}</SubtitleText>
+        {/* @ts-expect-error children props issue */}
         <BodyText>
           {`Your device will generate a new secret recovery phrase. For your eyes only.`}
         </BodyText>
         <Divider text="OR" my={6} />
+        {/* @ts-expect-error children props issue */}
         <SubtitleText>{`Restore using Secret Recovery Phrase`}</SubtitleText>
+        {/* @ts-expect-error children props issue */}
         <BodyText>
           {`Make sure to use a Phrase generated by a Ledger for the guaranteed security of your assets. `}
         </BodyText>
@@ -123,6 +131,7 @@ const defaultItems: Item[] = [
     title: "Software check",
     renderBody: () => (
       <Flex flexDirection="column">
+        {/* @ts-expect-error children props issue */}
         <BodyText>{`We'll verify whether your Nano is genuine. This should be quick and easy!`}</BodyText>
       </Flex>
     ),
@@ -132,13 +141,15 @@ const defaultItems: Item[] = [
     title: "Install apps",
     renderBody: () => (
       <Flex flexDirection="column">
+        {/* @ts-expect-error children props issue */}
         <BodyText>{`Installing apps`}</BodyText>
       </Flex>
     ),
   },
   {
     status: "inactive",
     title: "Nano is ready",
+    // @ts-expect-error children props issue
     renderBody: () => <BodyText>Almost there ...</BodyText>,
   },
 ];

libs/ui/packages/react/src/components/navigation/Breadcrumb/Breadcrumb.stories.tsx

@@ -77,7 +77,7 @@ const Routes = ({
 export const Breadcrumb = (args: Props): JSX.Element => {
   const [route, setRoute] = useState("apps/swap/confirm");
 
-  const onChange = useCallback(value => setRoute(value.join("/")), [setRoute]);
+  const onChange = useCallback((value: string[]) => setRoute(value.join("/")), [setRoute]);
   const segments = useMemo(() => {
     const paths = route.split("/");
 

libs/ui/packages/react/src/components/tabs/Tabs/index.tsx

@@ -9,7 +9,7 @@ export interface TabContent {
   title: string;
   disabled?: boolean;
   badge?: string | number;
-  Component: React.ReactFragment;
+  Component: React.ReactNode;
 }
 
 export type Props = React.PropsWithChildren<{