Skip to content

Commit bfa6acc

Browse files
kubit-uikubit-ui
authored
Merge pull request #20 from kubit-ui/feature/new-components-and-improvements
Feature/new components and improvements
2 parents faec08c + efa7fb1 commit bfa6acc

File tree

130 files changed

+3685
-409
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

130 files changed

+3685
-409
lines changed

‎.storybook/preview.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const preview: Preview = {
4545
},
4646
options: {
4747
storySort: {
48+
method: 'alphabetical',
4849
order: ['Getting Started', ['Introduction'], 'Components'],
4950
},
5051
},

‎package.json

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kubit-ui-web/react-components",
3-
"version": "1.7.1",
3+
"version": "1.8.0",
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",
@@ -82,24 +82,24 @@
8282
"sideEffects": false,
8383
"license": "Apache-2.0",
8484
"devDependencies": {
85-
"@babel/core": "^7.24.8",
85+
"@babel/core": "^7.24.9",
8686
"@babel/preset-env": "^7.24.8",
8787
"@babel/preset-react": "^7.24.7",
8888
"@babel/preset-typescript": "^7.24.7",
8989
"@eslint/compat": "^1.1.1",
9090
"@eslint/eslintrc": "^3.1.0",
91-
"@eslint/js": "^9.6.0",
92-
"@storybook/addon-a11y": "^8.2.2",
93-
"@storybook/addon-controls": "^8.2.2",
91+
"@eslint/js": "^9.7.0",
92+
"@storybook/addon-a11y": "^8.2.6",
93+
"@storybook/addon-controls": "^8.2.6",
9494
"@storybook/addon-coverage": "^1.0.4",
95-
"@storybook/addon-essentials": "^8.2.2",
96-
"@storybook/addon-interactions": "^8.2.2",
97-
"@storybook/addon-links": "^8.2.2",
98-
"@storybook/addon-themes": "^8.2.2",
99-
"@storybook/blocks": "^8.2.2",
100-
"@storybook/react": "^8.2.2",
101-
"@storybook/react-vite": "^8.2.2",
102-
"@testing-library/jest-dom": "^6.4.6",
95+
"@storybook/addon-essentials": "^8.2.6",
96+
"@storybook/addon-interactions": "^8.2.6",
97+
"@storybook/addon-links": "^8.2.6",
98+
"@storybook/addon-themes": "^8.2.6",
99+
"@storybook/blocks": "^8.2.6",
100+
"@storybook/react": "^8.2.6",
101+
"@storybook/react-vite": "^8.2.6",
102+
"@testing-library/jest-dom": "^6.4.8",
103103
"@testing-library/react": "^16.0.0",
104104
"@testing-library/react-hooks": "^8.0.1",
105105
"@testing-library/user-event": "^14.5.2",
@@ -111,13 +111,13 @@
111111
"@types/react-dom": "^18.3.0",
112112
"@types/styled-components": "^5.1.34",
113113
"@types/ungap__structured-clone": "^1.2.0",
114-
"@typescript-eslint/eslint-plugin": "^7.16.0",
115-
"@typescript-eslint/parser": "^7.16.0",
114+
"@typescript-eslint/eslint-plugin": "^7.17.0",
115+
"@typescript-eslint/parser": "^7.17.0",
116116
"@ungap/structured-clone": "^1.2.0",
117117
"@vitejs/plugin-react": "^4.3.1",
118118
"babel-jest": "^29.7.0",
119119
"cpy-cli": "^5.0.0",
120-
"eslint": "^9.6.0",
120+
"eslint": "^9.7.0",
121121
"eslint-config-prettier": "^9.1.0",
122122
"eslint-config-standard-with-typescript": "^43.0.1",
123123
"eslint-import-resolver-typescript": "^3.6.1",
@@ -126,16 +126,16 @@
126126
"eslint-plugin-jsx-a11y": "^6.9.0",
127127
"eslint-plugin-n": "^17.9.0",
128128
"eslint-plugin-node": "^11.1.0",
129-
"eslint-plugin-prettier": "5.1.3",
130-
"eslint-plugin-promise": "^6.4.0",
131-
"eslint-plugin-react": "^7.34.3",
129+
"eslint-plugin-prettier": "5.2.1",
130+
"eslint-plugin-promise": "^7.0.0",
131+
"eslint-plugin-react": "^7.35.0",
132132
"eslint-plugin-react-hooks": "^4.6.2",
133-
"eslint-plugin-react-refresh": "^0.4.8",
133+
"eslint-plugin-react-refresh": "^0.4.9",
134134
"eslint-plugin-storybook": "^0.8.0",
135-
"eslint-plugin-unused-imports": "^4.0.0",
135+
"eslint-plugin-unused-imports": "^4.0.1",
136136
"globals": "^15.8.0",
137137
"gts": "^5.3.1",
138-
"html-validate": "^8.20.1",
138+
"html-validate": "^8.21.0",
139139
"jest": "^29.7.0",
140140
"jest-axe": "^9.0.0",
141141
"jest-canvas-mock": "^2.5.2",
@@ -144,26 +144,26 @@
144144
"jest-junit": "^16.0.0",
145145
"jest-styled-components": "^7.2.0",
146146
"json-beautify": "^1.1.1",
147-
"prettier": "^3.3.2",
147+
"prettier": "^3.3.3",
148148
"react-transition-group": "^4.4.5",
149149
"sort-imports": "^1.1.0",
150-
"storybook": "^8.2.2",
151-
"ts-jest": "^29.2.2",
150+
"storybook": "^8.2.6",
151+
"ts-jest": "^29.2.3",
152152
"tsc-alias": "1.8.10",
153-
"typedoc": "^0.26.4",
154-
"typedoc-plugin-markdown": "^4.2.1",
155-
"typescript": "^5.5.3",
156-
"vite": "^5.3.3",
153+
"typedoc": "^0.26.5",
154+
"typedoc-plugin-markdown": "^4.2.3",
155+
"typescript": "^5.5.4",
156+
"vite": "^5.3.4",
157157
"vite-tsconfig-paths": "^4.3.2",
158158
"yarn-deduplicate": "^6.0.2"
159159
},
160160
"dependencies": {
161-
"@emotion/is-prop-valid": "^1.2.2",
161+
"@emotion/is-prop-valid": "^1.3.0",
162162
"lottie-web": "^5.12.2",
163163
"react": "^18.3.1",
164164
"react-dom": "^18.3.1",
165165
"react-transition-group": "^4.4.5",
166-
"styled-components": "^6.1.11"
166+
"styled-components": "^6.1.12"
167167
},
168168
"resolutions": {
169169
"strip-ansi": "^6.0.1",

‎src/components/carousel/hooks/useCarousel.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@ export const useCarousel = ({
401401
carouselContent.style.left = `${left}px`;
402402
}
403403
} else {
404-
let modifyExtraPadding = circular ? extraPadding ?? 0 : 0;
404+
let modifyExtraPadding = circular ? (extraPadding ?? 0) : 0;
405405
if (!circular && extraPadding && index.current === numPagesState - 1) {
406406
modifyExtraPadding = extraPadding * 2;
407407
}

‎src/components/checkbox/checkboxStandAlone.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ const CheckboxStandAloneComponent = (
139139
screenReaderText,
140140
screenReaderId,
141141
})}
142+
aria-hidden={props['aria-hidden']}
142143
aria-invalid={hasError}
143144
aria-label={props['aria-label']}
144145
aria-labelledby={props['aria-labelledby']}
@@ -149,6 +150,7 @@ const CheckboxStandAloneComponent = (
149150
name={name}
150151
required={required}
151152
styles={styles}
153+
tabIndex={props.tabIndex}
152154
type="checkbox"
153155
value={value}
154156
onBlur={onBlur}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,50 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
194194
category: CATEGORY_CONTROL.ACCESIBILITY,
195195
},
196196
},
197+
tabIndex: {
198+
description: 'Tab index',
199+
control: { type: 'number' },
200+
type: { name: 'number' },
201+
table: {
202+
type: {
203+
summary: 'number',
204+
},
205+
category: CATEGORY_CONTROL.MODIFIERS,
206+
},
207+
},
208+
['aria-label']: {
209+
description: 'Input aria-label',
210+
control: { type: 'text' },
211+
type: { name: 'string' },
212+
table: {
213+
type: {
214+
summary: 'string',
215+
},
216+
category: CATEGORY_CONTROL.ACCESIBILITY,
217+
},
218+
},
219+
['aria-labelledby']: {
220+
description: 'Input aria-labelledby',
221+
control: { type: 'text' },
222+
type: { name: 'string' },
223+
table: {
224+
type: {
225+
summary: 'string',
226+
},
227+
category: CATEGORY_CONTROL.ACCESIBILITY,
228+
},
229+
},
230+
['aria-hidden']: {
231+
description: 'Hide element from screen readers',
232+
control: { type: 'boolean' },
233+
type: { name: 'boolean' },
234+
table: {
235+
type: {
236+
summary: 'boolean',
237+
},
238+
category: CATEGORY_CONTROL.ACCESIBILITY,
239+
},
240+
},
197241
dataTestId: {
198242
description: 'String used for testing',
199243
control: { type: 'text' },

‎src/components/checkbox/types/checkbox.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@ export interface ICheckboxErrorStandAlone {
3434
errorMessage?: CheckboxHelperAndErrorTextType;
3535
}
3636

37-
type CheckboxAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>;
37+
type CheckboxAriaAttributes = Pick<
38+
React.AriaAttributes,
39+
'aria-label' | 'aria-labelledby' | 'aria-hidden'
40+
>;
3841

3942
/**
4043
* @description
@@ -56,6 +59,7 @@ export interface ICheckboxStandAlone extends IInputComponent, CheckboxAriaAttrib
5659
helperText?: CheckboxHelperAndErrorTextType;
5760
extraAriaDescribedBy?: string;
5861
screenReaderText?: string;
62+
tabIndex?: number;
5963
}
6064

6165
/**

‎src/components/drawer/drawerStandAlone.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ const DrawerStandAloneComponent = (
3434

3535
return (
3636
<Popover
37-
aria-labelledby={titleIdFinal}
37+
aria-label={!props.title?.content ? `${props.popover?.['aria-label']}` : undefined}
38+
aria-labelledby={props.title?.content ? titleIdFinal : undefined}
3839
aria-modal={props.open}
3940
clickOverlayClose={!blocked}
4041
dataTestId={`${props.dataTestId}Popover`}

‎src/components/drawer/stories/controlledArgtypes.ts

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import { CATEGORY_CONTROL } from '@/constants/categoryControl';
2+
import { IThemeObjectVariants } from '@/designSystem/themesObject';
3+
import { ArgTypesReturn } from '@/types';
4+
5+
import { DrawerLevelPositionTypes } from '../types';
6+
7+
export const argtypes = (variants: IThemeObjectVariants, themeSelected: string): ArgTypesReturn => {
8+
return {
9+
theme: {
10+
table: {
11+
disable: true,
12+
},
13+
},
14+
variant: {
15+
control: { type: 'select' },
16+
type: { name: 'string', required: true },
17+
description: 'Drawer variant',
18+
options: Object.keys(variants[themeSelected].DrawerVariantType || {}),
19+
table: {
20+
type: {
21+
summary: 'string',
22+
},
23+
category: CATEGORY_CONTROL.MODIFIERS,
24+
},
25+
},
26+
open: {
27+
description: 'Manage open drawer',
28+
type: { name: 'boolean', required: true },
29+
control: { type: 'boolean' },
30+
table: {
31+
type: {
32+
summary: 'boolean',
33+
},
34+
defaultValue: { summary: false },
35+
category: CATEGORY_CONTROL.MODIFIERS,
36+
},
37+
},
38+
portalId: {
39+
description: 'Identifier of portal to render drawer',
40+
type: { name: 'string' },
41+
control: { type: 'text' },
42+
table: {
43+
type: {
44+
summary: 'string',
45+
},
46+
category: CATEGORY_CONTROL.CUSTOMIZATION,
47+
},
48+
},
49+
children: {
50+
description: 'Content',
51+
type: { name: 'string', required: true },
52+
control: { type: 'text' },
53+
table: {
54+
type: {
55+
summary: 'ReactNode',
56+
},
57+
category: CATEGORY_CONTROL.CONTENT,
58+
},
59+
},
60+
footer: {
61+
description: 'Footer of the Drawer',
62+
type: { name: 'object' },
63+
control: { type: 'object' },
64+
table: {
65+
type: {
66+
summary: 'DrawerFooterType',
67+
},
68+
category: CATEGORY_CONTROL.CONTENT,
69+
},
70+
},
71+
closeIcon: {
72+
description: 'Close icon',
73+
control: { type: 'object' },
74+
type: { name: 'object' },
75+
table: {
76+
type: {
77+
summary: 'IElementOrIcon',
78+
},
79+
category: CATEGORY_CONTROL.CONTENT,
80+
},
81+
},
82+
title: {
83+
description: 'Tile of the drawer',
84+
type: { name: 'object' },
85+
control: { type: 'object' },
86+
table: {
87+
type: {
88+
summary: 'DrawerTextType',
89+
},
90+
category: CATEGORY_CONTROL.CONTENT,
91+
},
92+
},
93+
level: {
94+
description: 'Select the right or left icon depends of the value',
95+
control: { type: 'select' },
96+
type: { name: 'string', required: true },
97+
options: Object.keys(DrawerLevelPositionTypes),
98+
table: {
99+
type: {
100+
summary: 'DrawerLevelPositionTypes',
101+
detail: Object.keys(DrawerLevelPositionTypes).join(', '),
102+
},
103+
category: CATEGORY_CONTROL.MODIFIERS,
104+
},
105+
},
106+
blocked: {
107+
description: 'Block drawer',
108+
type: { name: 'boolean' },
109+
control: { type: 'boolean' },
110+
table: {
111+
type: {
112+
summary: 'boolean',
113+
},
114+
defaultValue: { summary: false },
115+
category: CATEGORY_CONTROL.MODIFIERS,
116+
},
117+
},
118+
popover: {
119+
description: 'Object with popover properties',
120+
type: { name: 'object' },
121+
control: { type: 'object' },
122+
table: {
123+
type: {
124+
summary: 'DrawerPopoverType',
125+
},
126+
category: CATEGORY_CONTROL.MODIFIERS,
127+
},
128+
},
129+
dataTestId: {
130+
description: 'String used for testing',
131+
control: { type: 'text' },
132+
type: { name: 'string' },
133+
table: {
134+
type: {
135+
summary: 'string',
136+
},
137+
category: CATEGORY_CONTROL.TESTING,
138+
},
139+
},
140+
ctv: {
141+
description: 'Object used for update variant styles',
142+
type: { name: 'object' },
143+
control: { type: 'object' },
144+
table: {
145+
type: {
146+
summary: 'object',
147+
},
148+
category: CATEGORY_CONTROL.CUSTOMIZATION,
149+
},
150+
},
151+
extraCt: {
152+
description: 'Object used for update grid styles',
153+
type: { name: 'object' },
154+
control: { type: 'object' },
155+
table: {
156+
type: {
157+
summary: 'object',
158+
},
159+
category: CATEGORY_CONTROL.CUSTOMIZATION,
160+
},
161+
},
162+
};
163+
};

0 commit comments

Comments
 (0)