Merge pull request #34 from kubit-ui/feature/improvements-and-solve-bugs

Feature/improvements and solve bugs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -90,20 +90,20 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@eslint/compat": "^1.2.2",
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.14.0",
+    "@eslint/compat": "^1.2.3",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
     "@kubit-ui-web/eslint-plugin-no-index-import": "^1.0.2",
-    "@storybook/addon-a11y": "^8.4.2",
-    "@storybook/addon-controls": "^8.4.2",
+    "@storybook/addon-a11y": "^8.4.4",
+    "@storybook/addon-controls": "^8.4.4",
     "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-themes": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-vite": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-themes": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-vite": "^8.4.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
@@ -116,20 +116,20 @@
     "@types/react-dom": "^18.3.1",
     "@types/styled-components": "^5.1.34",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.13.0",
-    "@typescript-eslint/parser": "^8.13.0",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
     "@ungap/structured-clone": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.3",
     "babel-jest": "^29.7.0",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-n": "^17.13.1",
+    "eslint-plugin-n": "^17.13.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-promise": "^7.1.0",
@@ -140,7 +140,7 @@
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^15.12.0",
     "gts": "^6.0.2",
-    "html-validate": "^8.24.2",
+    "html-validate": "^8.25.0",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-canvas-mock": "^2.5.2",
@@ -152,12 +152,12 @@
     "prettier": "^3.3.3",
     "react-transition-group": "^4.4.5",
     "sort-imports": "^1.1.0",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.4",
     "ts-jest": "^29.2.5",
     "tsc-alias": "1.8.10",
     "typedoc": "^0.26.11",
     "typescript": "^5.6.3",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vite-tsconfig-paths": "^4.3.2",
     "yarn-deduplicate": "^6.0.2"
   },

src/components/backToTop/backToTopControlled.tsx

@@ -61,7 +61,7 @@ const BackToTopControlledComponent = React.forwardRef(
       button.style.bottom = `${newBottomPosition}px`;
       const display = window.scrollY >= visibilityScrollOffset;
       button.style.display = display ? 'flex' : 'none';
-    }, [visibilityScrollOffset]);
+    }, [bottomPosition, stopElement, visibilityScrollOffset]);
 
     React.useEffect(() => {
       handleScrollListener();

src/components/badgeV2/index.ts

@@ -1,13 +1,3 @@
-// interfaces and type
-export type {
-  BadgeLabelType as BadgeLabelTypeV2,
-  IBadgeStandAlone as IBadgeStandAloneV2,
-  IBadge as IBadgeV2,
-  BadgeVariantStylesType as BadgeVariantStylesTypeV2,
-  BadgeStylesType as BadgeStylesTypeV2,
-} from './types';
-
-// enums
-export { BadgeState as BadgeStateV2 } from './types';
+export * from './types';
 
 export { BadgeV2 } from './badge';

src/components/badgeV2/types/index.ts

@@ -1,3 +1,10 @@
-export type * from './badge';
-export type { BadgeVariantStylesType, BadgeStylesType } from './badgeTheme';
+export type {
+  BadgeVariantStylesType as BadgeVariantStylesTypeV2,
+  BadgeStylesType as BadgeStylesTypeV2,
+} from './badgeTheme';
 export * from './state';
+export type {
+  BadgeLabelType as BadgeLabelTypeV2,
+  IBadgeStandAlone as IBadgeStandAloneV2,
+  IBadge as IBadgeV2,
+} from './badge';

src/components/carousel/carousel.styled.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/drawer/drawerStandAlone.tsx

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

@@ -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/inputCurrency/stories/inputCurrency.stories.tsx

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

@@ -13,7 +13,7 @@ export type {
 } from './types';
 
 // enums
-export { PageControlState, ArrowsControlState } from './types';
+export { PageControlState, ArrowsControlState, PageControlDirectionType } from './types';
 
 // componet
 export { PageControl } from './pageControl';

src/components/pillV2/index.ts

@@ -1,12 +1,2 @@
-export type {
-  IPill as IPillV2,
-  PillStylesType as PillStylesTypeV2,
-  PillVariantPropsStylesType as PillVariantPropsStylesTypeV2,
-  PillSizePropsStylesType as PillSizePropsStylesTypeV2,
-  PillPropsStylesType as PillPropsStylesTypeV2,
-  PillLabelType as PillLabelTypeV2,
-} from './types';
-
-export { PillStateType as PillStateTypeV2 } from './types/pillStateType';
-export { PillType as PillTypeV2 } from './types/pillType';
+export * from './types';
 export { Pill as PillV2 } from './pill';

src/components/pillV2/pill.tsx

@@ -27,14 +27,7 @@ const PillComponent = (
     : variantStyles?.[Object.keys(variantStyles)[0]]?.[state];
 
   return (
-    <PillStandAlone
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ref={ref as any}
-      disabled={disabled}
-      selected={selected}
-      styles={styles}
-      {...props}
-    />
+    <PillStandAlone ref={ref} disabled={disabled} selected={selected} styles={styles} {...props} />
   );
 };
 

src/components/pillV2/pillStandAlone.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 
 import { useId } from '@/hooks/useId/useId';
@@ -19,14 +20,14 @@ import { PillType } from './types/pillType';
 
 const PillStandAloneComponent = (
   { dataTestId = 'pill', type = PillType.BUTTON, ...props }: IPillStandAlone,
-  ref: React.ForwardedRef<HTMLButtonElement> | undefined | null
+  ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   const id = useId('pill');
   const pillContentId = `${id}-content`;
 
   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}
@@ -36,7 +37,7 @@ const PillStandAloneComponent = (
       type={[PillType.BUTTON, PillType.TAB].includes(type) ? ButtonType.BUTTON : undefined}
       onClick={props.onClick}
     >
-      <PillContentContainerStyled id={pillContentId} styles={props.styles}>
+      <PillContentContainerStyled data-pill-content id={pillContentId} styles={props.styles}>
         <ElementOrIcon customIconStyles={props.styles?.leftIcon} {...props.leftIcon} />
         <Text
           component={TextComponentType.SPAN}

src/components/pillV2/types/index.ts

@@ -1,4 +1,9 @@
-export * from './pill';
-export * from './pillTheme';
-export * from './pillStateType';
-export * from './pillType';
+export type {
+  PillStylesType as PillStylesTypeV2,
+  PillVariantPropsStylesType as PillVariantPropsStylesTypeV2,
+  PillSizePropsStylesType as PillSizePropsStylesTypeV2,
+  PillPropsStylesType as PillPropsStylesTypeV2,
+} from './pillTheme';
+export type { IPill as IPillV2, PillLabelType as PillLabelTypeV2 } from './pill';
+export { PillStateType as PillStateTypeV2 } from './pillStateType';
+export { PillType as PillTypeV2 } from './pillType';

src/components/pillV2/types/pillTheme.ts

@@ -8,7 +8,7 @@ export type PillPropsStylesType = {
   rootContainer?: CommonStyleType;
   contentContainer?: CommonStyleType;
   leftIcon?: IconTypes;
-  label?: TypographyTypes;
+  label?: TypographyTypes & CommonStyleType;
   rightIcon?: IconTypes;
   input?: CommonStyleType;
 };

src/components/text/stories/argtypes.ts

@@ -171,6 +171,30 @@ export const argtypes = (
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    truncate: {
+      description:
+        'Boolean to indicate if render an ellipsis ("...") to represent the clipped text',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    maxTruncatedLines: {
+      description:
+        'Boolean to indicate if render an ellipsis ("...") to represent the clipped text with a max number of lines (`truncate` is not needed)',
+      type: { name: 'number' },
+      control: { type: 'number' },
+      table: {
+        type: {
+          summary: 'number',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     aria: {
       description: 'Prop used for accesibility',
       type: { name: 'Partial<React.AriaAttributes>' },

src/components/text/text.styled.tsx

@@ -1,5 +1,6 @@
 import styled, { CSSProp, css } from 'styled-components';
 
+import { maxTruncatedLinesMixin, truncateMixin } from '@/styles/mixins/truncate.mixin';
 import { getTypographyStyles } from '@/utils/getStyles/getStyles';
 
 import { ITextStyled } from './types/text';
@@ -18,6 +19,15 @@ const applyDevicePropsTextStyles = (props: TextPropsStylesType) => css`
   css`
     pointer-events: none;
   `}
+  ${!props.$maxTruncatedLines &&
+  props.$truncate &&
+  css`
+    ${truncateMixin}
+  `}
+  ${props.$maxTruncatedLines &&
+  css`
+    ${maxTruncatedLinesMixin(props.$maxTruncatedLines)}
+  `}
 `;
 
 const applyPropsTextStyles = (props: TextPropsStylesType) => css`