Merge pull request #26 from kubit-ui/feature/improve-styles-and-resol…

…ve-bugs

Feature/improve styles and resolve bugs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.10.0",
+  "version": "1.10.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",
@@ -39,7 +39,11 @@
     "web-components",
     "react",
     "storybook",
-    "typescript"
+    "typescript",
+    "kubit",
+    "kubit-ui",
+    "kubit-react",
+    "kubit-components"
   ],
   "scripts": {
     "jest": "jest",
@@ -88,17 +92,17 @@
     "@babel/preset-typescript": "^7.24.7",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.8.0",
-    "@storybook/addon-a11y": "^8.2.7",
-    "@storybook/addon-controls": "^8.2.7",
+    "@eslint/js": "^9.9.0",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-controls": "^8.2.9",
     "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-interactions": "^8.2.7",
-    "@storybook/addon-links": "^8.2.7",
-    "@storybook/addon-themes": "^8.2.7",
-    "@storybook/blocks": "^8.2.7",
-    "@storybook/react": "^8.2.7",
-    "@storybook/react-vite": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-themes": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -111,18 +115,18 @@
     "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@types/ungap__structured-clone": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.1",
-    "@typescript-eslint/parser": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
     "@ungap/structured-clone": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.7.0",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.7.0",
+    "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-n": "^17.10.2",
     "eslint-plugin-node": "^11.1.0",
@@ -132,7 +136,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-unused-imports": "^4.0.1",
+    "eslint-plugin-unused-imports": "^4.1.3",
     "globals": "^15.9.0",
     "gts": "^5.3.1",
     "html-validate": "^8.21.0",
@@ -147,13 +151,13 @@
     "prettier": "^3.3.3",
     "react-transition-group": "^4.4.5",
     "sort-imports": "^1.1.0",
-    "storybook": "^8.2.7",
+    "storybook": "^8.2.9",
     "ts-jest": "^29.2.4",
     "tsc-alias": "1.8.10",
     "typedoc": "^0.26.5",
     "typedoc-plugin-markdown": "^4.2.3",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5",
+    "vite": "^5.4.0",
     "vite-tsconfig-paths": "^4.3.2",
     "yarn-deduplicate": "^6.0.2"
   },

src/components/icon/types/icon.ts

@@ -18,7 +18,7 @@ export interface IIconComplex {
 
 type IconAriaAttributes = Pick<
   React.AriaAttributes,
-  'aria-label' | 'aria-controls' | 'aria-checked'
+  'aria-label' | 'aria-controls' | 'aria-checked' | 'aria-hidden'
 >;
 
 export interface IIconStandAlone extends IconAriaAttributes {

src/components/pagination/helpers/getMaxCountersNumber.ts

@@ -20,7 +20,7 @@ export const buildstepsNumber = (
 
   let currentPosition = currentStep + 1;
 
-  if (currentPosition >= maxCounters) {
+  if (currentPosition >= maxCounters && maxSteps !== maxCounters) {
     maxCounters--;
     startWith = [1, '...'];
   }

src/components/pagination/pagination.tsx

@@ -22,10 +22,18 @@ const PaginationComponent = React.forwardRef(
 
     const limitCurrentStep = Math.max(0, Math.min(currentStep, maxStepsNumber - 1));
 
+    let paginationCountersNumber = styles.paginationCountersNumber?.[device]?.counters ?? 5;
+
+    if (maxCountersNumber && maxCountersNumber < maxStepsNumber) {
+      paginationCountersNumber = maxCountersNumber;
+    } else {
+      paginationCountersNumber = Math.min(maxStepsNumber, paginationCountersNumber);
+    }
+
     const stepsNumber = buildstepsNumber(
       limitCurrentStep,
       maxStepsNumber,
-      styles.paginationCountersNumber?.[device]?.counters,
+      paginationCountersNumber,
       maxCountersNumber
     );
     const stepActive = stepsNumber.indexOf(limitCurrentStep + 1);

src/components/pagination/stories/argtypes.ts

@@ -24,7 +24,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
     currentStep: {
       control: { type: 'number' },
       type: { name: 'number', required: true },
-      description: 'Indicate the parent current position',
+      description: 'Indicate the parent current position. The max value is maxStepsNumber',
       table: {
         type: {
           summary: 'number',
@@ -33,9 +33,9 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
       },
     },
     maxStepsNumber: {
-      control: { type: 'number' },
+      control: { type: 'number', min: 2 },
       type: { name: 'number', required: true },
-      description: 'Set the max steps number',
+      description: 'Set the max steps number. The min value is 2',
       table: {
         type: {
           summary: 'number',
@@ -46,7 +46,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
     maxCountersNumber: {
       control: { type: 'number' },
       type: { name: 'number' },
-      description: 'Set the custom steps number to show',
+      description: 'Set the custom steps number to show. The min value is 2',
       table: {
         type: {
           summary: 'number',

src/components/pagination/stories/pagination.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
 import { ICONS } from '@/assets';
 import { STYLES_NAME } from '@/constants';
@@ -17,6 +17,12 @@ const meta = {
   component: Story,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Pagination is a controlled component. This story is an example of how to use it. To see other examples or modify the component behavior, visit the other stories in Pagination section or change the props in the controls.',
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),
@@ -29,7 +35,13 @@ type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 
 const StoryWithHooks = args => {
   const [step, setStep] = React.useState(0);
-  const maxSteps = 10;
+  const maxSteps = args.maxStepsNumber ? args.maxStepsNumber : 35;
+
+  useEffect(() => {
+    if (args.currentStep) {
+      setStep(args.currentStep - 1);
+    }
+  }, [args.currentStep]);
 
   const leftEdge = step <= 0;
   const rightEdge = step >= maxSteps;
@@ -80,6 +92,33 @@ export const Pagination = {
       variantsObject[themeSelected].PaginationVariantsTheme || {}
     )[0] as string,
     themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION],
+    currentStep: 1,
+    maxStepsNumber: 35,
+    maxCountersNumber: 5,
+  },
+};
+
+export const PaginationWithTwoSteps = {
+  args: {
+    variant: Object.values(
+      variantsObject[themeSelected].PaginationVariantsTheme || {}
+    )[0] as string,
+    themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION],
+    currentStep: 1,
+    maxStepsNumber: 2,
+    maxCountersNumber: 2,
+  },
+};
+
+export const PaginationWithFiveSteps = {
+  args: {
+    variant: Object.values(
+      variantsObject[themeSelected].PaginationVariantsTheme || {}
+    )[0] as string,
+    themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION],
+    currentStep: 1,
+    maxStepsNumber: 5,
+    maxCountersNumber: 5,
   },
 };
 

src/components/pillSelectorV2/__tests__/pillSelector.test.tsx

@@ -20,7 +20,7 @@ const mockProps: IPillSelectorUnControlled = {
   size: PillSelectorSizeTypeV2.LARGE,
   pills: [
     { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
-    { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
+    { label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
     { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
     { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
   ],
@@ -140,7 +140,7 @@ const mockPropsControlled: IPillSelectorControlled = {
   size: PillSelectorSizeTypeV2.LARGE,
   pills: [
     { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
-    { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
+    { label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
     { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
     { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
   ],

src/components/pillSelectorV2/pillSelectorStandAlone.tsx

@@ -10,7 +10,7 @@ const PillSelectorStandAloneComponent = (
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): JSX.Element => {
   return (
-    <RootContainerStyled ref={ref} styles={props.styles}>
+    <RootContainerStyled ref={ref} data-testid={dataTestId} styles={props.styles}>
       {props.pills?.map((pill, index) => {
         const selected =
           props.type === PillSelectorType.SELECTOR_MULTIPLE

src/components/pillSelectorV2/stories/argtypes.ts

@@ -11,7 +11,7 @@ export const argtypes = (
   return {
     variant: {
       description: 'Variant',
-      type: { name: 'string', required: true },
+      type: { name: 'string' },
       control: { type: 'select' },
       options: Object.keys(variantsObject[themeSelected].PillSelectorVariantTypeV2 || {}),
       table: {
@@ -59,7 +59,7 @@ export const argtypes = (
       },
     },
     selectedIcon: {
-      description: 'Icon to show when the pill is selected',
+      description: 'Icon to show when a pill is selected',
       type: { name: 'object' },
       table: {
         type: {
@@ -119,7 +119,7 @@ export const argtypes = (
         type: {
           summary: 'string',
         },
-        defaultValue: { summary: 'segmentedControl' },
+        defaultValue: { summary: 'pillSelector' },
         category: CATEGORY_CONTROL.TESTING,
       },
     },

src/components/pillSelectorV2/stories/controlled/argtypes.ts

@@ -11,7 +11,7 @@ export const argtypes = (
   return {
     variant: {
       description: 'Variant',
-      type: { name: 'string', required: true },
+      type: { name: 'string' },
       control: { type: 'select' },
       options: Object.keys(variantsObject[themeSelected].PillSelectorVariantTypeV2 || {}),
       table: {

src/components/pillSelectorV2/stories/controlled/pillSelector.stories.tsx

@@ -30,7 +30,7 @@ const commonPillSelectorProps: IPillSelectorControlled = {
   )[0] as string,
   pills: [
     { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
-    { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
+    { label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
     { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
     { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
   ],

src/components/pillSelectorV2/stories/pillSelector.stories.tsx

@@ -31,7 +31,7 @@ const commonPillSelectorProps: IPillSelectorUnControlled = {
   )[0] as string,
   pills: [
     { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
-    { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
+    { label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
     { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
     { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
   ],

src/components/pillV2/pill.tsx

@@ -9,7 +9,7 @@ import { getPillState } from './utils';
 
 const PillComponent = (
   { variant, size, ctv, selected = false, disabled = false, ...props }: IPill,
-  ref: React.ForwardedRef<HTMLButtonElement>
+  ref: React.LegacyRef<HTMLButtonElement> | undefined
 ) => {
   const variantStyles = useStylesV2<PillVariantPropsStylesType>({
     styleName: STYLES_NAME.PILL_V2,

src/types/styles/index.ts

@@ -9,6 +9,7 @@ export enum Styles {
   POSITION = 'position',
   TYPOGRAPHY = 'typography',
   POINTER = 'pointer',
+  SCROLL = 'scroll',
 }
 
 export * from './padding';
@@ -25,3 +26,4 @@ export * from './illustration';
 export * from './pointer';
 export * from './commonStyle';
 export * from './wordWrap';
+export * from './scroll';

src/types/styles/scroll.ts

@@ -0,0 +1,20 @@
+export type ScrollTypes = {
+  scrollbar_width?: string;
+  scrollbar_color?: string;
+  overflow_block?: string;
+  overflow_inline?: string;
+  overflow_x?: string;
+  overflow_y?: string;
+  overflow?: string;
+  overflow_clip_margin?: string;
+  scrollbar_gutter?: string;
+  scroll_behavior?: string;
+  scroll_margin?: string;
+  scroll_padding?: string;
+  scroll_snap_align?: string;
+  scroll_snap_stop?: string;
+  scroll_snap_type?: string;
+  webkit_scrollbar?: string; // ::-webkit-scrollbar pseudo-element
+  scroll_container?: string; // scroll container glossary term
+  scrollbar_aria_role?: string; // scrollbar ARIA role
+};