Skip to content

Commit 977c936

Browse files
author
Kubit
authored
Merge pull request #26 from kubit-ui/feature/improve-styles-and-resolve-bugs
Feature/improve styles and resolve bugs
2 parents 5f61563 + e13e6a4 commit 977c936

File tree

16 files changed

+164
-38
lines changed

16 files changed

+164
-38
lines changed

‎package.json‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kubit-ui-web/react-components",
3-
"version": "1.10.0",
3+
"version": "1.10.1",
44
"description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
55
"author": {
66
"name": "Kubit",
@@ -39,7 +39,11 @@
3939
"web-components",
4040
"react",
4141
"storybook",
42-
"typescript"
42+
"typescript",
43+
"kubit",
44+
"kubit-ui",
45+
"kubit-react",
46+
"kubit-components"
4347
],
4448
"scripts": {
4549
"jest": "jest",
@@ -88,17 +92,17 @@
8892
"@babel/preset-typescript": "^7.24.7",
8993
"@eslint/compat": "^1.1.1",
9094
"@eslint/eslintrc": "^3.1.0",
91-
"@eslint/js": "^9.8.0",
92-
"@storybook/addon-a11y": "^8.2.7",
93-
"@storybook/addon-controls": "^8.2.7",
95+
"@eslint/js": "^9.9.0",
96+
"@storybook/addon-a11y": "^8.2.9",
97+
"@storybook/addon-controls": "^8.2.9",
9498
"@storybook/addon-coverage": "^1.0.4",
95-
"@storybook/addon-essentials": "^8.2.7",
96-
"@storybook/addon-interactions": "^8.2.7",
97-
"@storybook/addon-links": "^8.2.7",
98-
"@storybook/addon-themes": "^8.2.7",
99-
"@storybook/blocks": "^8.2.7",
100-
"@storybook/react": "^8.2.7",
101-
"@storybook/react-vite": "^8.2.7",
99+
"@storybook/addon-essentials": "^8.2.9",
100+
"@storybook/addon-interactions": "^8.2.9",
101+
"@storybook/addon-links": "^8.2.9",
102+
"@storybook/addon-themes": "^8.2.9",
103+
"@storybook/blocks": "^8.2.9",
104+
"@storybook/react": "^8.2.9",
105+
"@storybook/react-vite": "^8.2.9",
102106
"@testing-library/jest-dom": "^6.4.8",
103107
"@testing-library/react": "^16.0.0",
104108
"@testing-library/react-hooks": "^8.0.1",
@@ -111,18 +115,18 @@
111115
"@types/react-dom": "^18.3.0",
112116
"@types/styled-components": "^5.1.34",
113117
"@types/ungap__structured-clone": "^1.2.0",
114-
"@typescript-eslint/eslint-plugin": "^8.0.1",
115-
"@typescript-eslint/parser": "^8.0.1",
118+
"@typescript-eslint/eslint-plugin": "^8.1.0",
119+
"@typescript-eslint/parser": "^8.1.0",
116120
"@ungap/structured-clone": "^1.2.0",
117121
"@vitejs/plugin-react": "^4.3.1",
118122
"babel-jest": "^29.7.0",
119123
"cpy-cli": "^5.0.0",
120-
"eslint": "^9.8.0",
124+
"eslint": "^9.9.0",
121125
"eslint-config-prettier": "^9.1.0",
122126
"eslint-config-standard-with-typescript": "^43.0.1",
123127
"eslint-import-resolver-typescript": "^3.6.1",
124128
"eslint-plugin-import": "^2.29.1",
125-
"eslint-plugin-jest": "^28.7.0",
129+
"eslint-plugin-jest": "^28.8.0",
126130
"eslint-plugin-jsx-a11y": "^6.9.0",
127131
"eslint-plugin-n": "^17.10.2",
128132
"eslint-plugin-node": "^11.1.0",
@@ -132,7 +136,7 @@
132136
"eslint-plugin-react-hooks": "^4.6.2",
133137
"eslint-plugin-react-refresh": "^0.4.9",
134138
"eslint-plugin-storybook": "^0.8.0",
135-
"eslint-plugin-unused-imports": "^4.0.1",
139+
"eslint-plugin-unused-imports": "^4.1.3",
136140
"globals": "^15.9.0",
137141
"gts": "^5.3.1",
138142
"html-validate": "^8.21.0",
@@ -147,13 +151,13 @@
147151
"prettier": "^3.3.3",
148152
"react-transition-group": "^4.4.5",
149153
"sort-imports": "^1.1.0",
150-
"storybook": "^8.2.7",
154+
"storybook": "^8.2.9",
151155
"ts-jest": "^29.2.4",
152156
"tsc-alias": "1.8.10",
153157
"typedoc": "^0.26.5",
154158
"typedoc-plugin-markdown": "^4.2.3",
155159
"typescript": "^5.5.4",
156-
"vite": "^5.3.5",
160+
"vite": "^5.4.0",
157161
"vite-tsconfig-paths": "^4.3.2",
158162
"yarn-deduplicate": "^6.0.2"
159163
},

‎src/components/icon/types/icon.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export interface IIconComplex {
1818

1919
type IconAriaAttributes = Pick<
2020
React.AriaAttributes,
21-
'aria-label' | 'aria-controls' | 'aria-checked'
21+
'aria-label' | 'aria-controls' | 'aria-checked' | 'aria-hidden'
2222
>;
2323

2424
export interface IIconStandAlone extends IconAriaAttributes {

‎src/components/pagination/helpers/getMaxCountersNumber.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const buildstepsNumber = (
2020

2121
let currentPosition = currentStep + 1;
2222

23-
if (currentPosition >= maxCounters) {
23+
if (currentPosition >= maxCounters && maxSteps !== maxCounters) {
2424
maxCounters--;
2525
startWith = [1, '...'];
2626
}

‎src/components/pagination/pagination.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,18 @@ const PaginationComponent = React.forwardRef(
2222

2323
const limitCurrentStep = Math.max(0, Math.min(currentStep, maxStepsNumber - 1));
2424

25+
let paginationCountersNumber = styles.paginationCountersNumber?.[device]?.counters ?? 5;
26+
27+
if (maxCountersNumber && maxCountersNumber < maxStepsNumber) {
28+
paginationCountersNumber = maxCountersNumber;
29+
} else {
30+
paginationCountersNumber = Math.min(maxStepsNumber, paginationCountersNumber);
31+
}
32+
2533
const stepsNumber = buildstepsNumber(
2634
limitCurrentStep,
2735
maxStepsNumber,
28-
styles.paginationCountersNumber?.[device]?.counters,
36+
paginationCountersNumber,
2937
maxCountersNumber
3038
);
3139
const stepActive = stepsNumber.indexOf(limitCurrentStep + 1);

‎src/components/pagination/stories/argtypes.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
2424
currentStep: {
2525
control: { type: 'number' },
2626
type: { name: 'number', required: true },
27-
description: 'Indicate the parent current position',
27+
description: 'Indicate the parent current position. The max value is maxStepsNumber',
2828
table: {
2929
type: {
3030
summary: 'number',
@@ -33,9 +33,9 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
3333
},
3434
},
3535
maxStepsNumber: {
36-
control: { type: 'number' },
36+
control: { type: 'number', min: 2 },
3737
type: { name: 'number', required: true },
38-
description: 'Set the max steps number',
38+
description: 'Set the max steps number. The min value is 2',
3939
table: {
4040
type: {
4141
summary: 'number',
@@ -46,7 +46,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
4646
maxCountersNumber: {
4747
control: { type: 'number' },
4848
type: { name: 'number' },
49-
description: 'Set the custom steps number to show',
49+
description: 'Set the custom steps number to show. The min value is 2',
5050
table: {
5151
type: {
5252
summary: 'number',

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

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import * as React from 'react';
2+
import React, { useEffect } from 'react';
33

44
import { ICONS } from '@/assets';
55
import { STYLES_NAME } from '@/constants';
@@ -17,6 +17,12 @@ const meta = {
1717
component: Story,
1818
parameters: {
1919
layout: 'centered',
20+
docs: {
21+
description: {
22+
component:
23+
'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.',
24+
},
25+
},
2026
},
2127
tags: ['autodocs'],
2228
argTypes: argtypes(variantsObject, themeSelected),
@@ -29,7 +35,13 @@ type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
2935

3036
const StoryWithHooks = args => {
3137
const [step, setStep] = React.useState(0);
32-
const maxSteps = 10;
38+
const maxSteps = args.maxStepsNumber ? args.maxStepsNumber : 35;
39+
40+
useEffect(() => {
41+
if (args.currentStep) {
42+
setStep(args.currentStep - 1);
43+
}
44+
}, [args.currentStep]);
3345

3446
const leftEdge = step <= 0;
3547
const rightEdge = step >= maxSteps;
@@ -80,6 +92,33 @@ export const Pagination = {
8092
variantsObject[themeSelected].PaginationVariantsTheme || {}
8193
)[0] as string,
8294
themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION],
95+
currentStep: 1,
96+
maxStepsNumber: 35,
97+
maxCountersNumber: 5,
98+
},
99+
};
100+
101+
export const PaginationWithTwoSteps = {
102+
args: {
103+
variant: Object.values(
104+
variantsObject[themeSelected].PaginationVariantsTheme || {}
105+
)[0] as string,
106+
themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION],
107+
currentStep: 1,
108+
maxStepsNumber: 2,
109+
maxCountersNumber: 2,
110+
},
111+
};
112+
113+
export const PaginationWithFiveSteps = {
114+
args: {
115+
variant: Object.values(
116+
variantsObject[themeSelected].PaginationVariantsTheme || {}
117+
)[0] as string,
118+
themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION],
119+
currentStep: 1,
120+
maxStepsNumber: 5,
121+
maxCountersNumber: 5,
83122
},
84123
};
85124

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const mockProps: IPillSelectorUnControlled = {
2020
size: PillSelectorSizeTypeV2.LARGE,
2121
pills: [
2222
{ label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
23-
{ label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
23+
{ label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
2424
{ label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
2525
{ label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
2626
],
@@ -140,7 +140,7 @@ const mockPropsControlled: IPillSelectorControlled = {
140140
size: PillSelectorSizeTypeV2.LARGE,
141141
pills: [
142142
{ label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' },
143-
{ label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
143+
{ label: { content: 'Pill 2' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' },
144144
{ label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' },
145145
{ label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' },
146146
],

‎src/components/pillSelectorV2/pillSelectorStandAlone.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const PillSelectorStandAloneComponent = (
1010
ref: React.ForwardedRef<HTMLDivElement> | undefined | null
1111
): JSX.Element => {
1212
return (
13-
<RootContainerStyled ref={ref} styles={props.styles}>
13+
<RootContainerStyled ref={ref} data-testid={dataTestId} styles={props.styles}>
1414
{props.pills?.map((pill, index) => {
1515
const selected =
1616
props.type === PillSelectorType.SELECTOR_MULTIPLE

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const argtypes = (
1111
return {
1212
variant: {
1313
description: 'Variant',
14-
type: { name: 'string', required: true },
14+
type: { name: 'string' },
1515
control: { type: 'select' },
1616
options: Object.keys(variantsObject[themeSelected].PillSelectorVariantTypeV2 || {}),
1717
table: {
@@ -59,7 +59,7 @@ export const argtypes = (
5959
},
6060
},
6161
selectedIcon: {
62-
description: 'Icon to show when the pill is selected',
62+
description: 'Icon to show when a pill is selected',
6363
type: { name: 'object' },
6464
table: {
6565
type: {
@@ -119,7 +119,7 @@ export const argtypes = (
119119
type: {
120120
summary: 'string',
121121
},
122-
defaultValue: { summary: 'segmentedControl' },
122+
defaultValue: { summary: 'pillSelector' },
123123
category: CATEGORY_CONTROL.TESTING,
124124
},
125125
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const argtypes = (
1111
return {
1212
variant: {
1313
description: 'Variant',
14-
type: { name: 'string', required: true },
14+
type: { name: 'string' },
1515
control: { type: 'select' },
1616
options: Object.keys(variantsObject[themeSelected].PillSelectorVariantTypeV2 || {}),
1717
table: {

0 commit comments

Comments
 (0)