Skip to content

Commit 087af22

Browse files
Jadson Aires Dornelesjadsondorneles
Jadson Aires Dorneles
authored and
jadsondorneles
committed
Update version libraries
1 parent 67814f2 commit 087af22

File tree

11 files changed

+4580
-2798
lines changed

11 files changed

+4580
-2798
lines changed

‎package-lock.json‎

Lines changed: 4530 additions & 2755 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,13 @@
2424
"chromatic": "chromatic --exit-zero-on-changes"
2525
},
2626
"devDependencies": {
27-
"@babel/core": "^7.21.0",
27+
"@babel/core": "^7.21.3",
2828
"@babel/preset-env": "^7.20.2",
2929
"@babel/preset-react": "^7.18.6",
3030
"@babel/preset-typescript": "^7.21.0",
31-
"@mdx-js/loader": "^1.6.22",
31+
"@mdx-js/loader": "^2.3.0",
32+
"@mdx-js/mdx": "^2.3.0",
33+
"@mdx-js/react": "^2.3.0",
3234
"@storybook/addon-docs": "^6.5.16",
3335
"@storybook/addon-essentials": "^6.5.16",
3436
"@storybook/builder-webpack5": "^6.5.16",
@@ -37,17 +39,17 @@
3739
"@storybook/react": "^6.5.16",
3840
"@svgr/webpack": "^6.5.1",
3941
"@testing-library/jest-dom": "^5.16.5",
40-
"@testing-library/react": "^9.5.0",
41-
"@testing-library/user-event": "^7.2.1",
42+
"@testing-library/react": "^14.0.0",
43+
"@testing-library/user-event": "^14.4.3",
4244
"@types/classnames": "^2.3.0",
4345
"@types/googlemaps": "^3.43.2",
44-
"@types/jest": "^29.4.0",
46+
"@types/jest": "^29.5.0",
4547
"@types/lodash": "^4.14.191",
46-
"@types/react": "^17.0.27",
47-
"@types/react-dom": "^17.0.9",
48+
"@types/react": "^18.0.28",
49+
"@types/react-dom": "^18.0.11",
4850
"@types/react-test-renderer": "^18.0.0",
49-
"@typescript-eslint/eslint-plugin": "^5.54.1",
50-
"@typescript-eslint/parser": "^5.54.1",
51+
"@typescript-eslint/eslint-plugin": "^5.55.0",
52+
"@typescript-eslint/parser": "^5.55.0",
5153
"babel-eslint": "^10.1.0",
5254
"babel-jest": "^29.5.0",
5355
"babel-loader": "^9.1.2",
@@ -69,19 +71,19 @@
6971
"jest": "^29.5.0",
7072
"jest-environment-jsdom": "^29.5.0",
7173
"jest-transform-stub": "^2.0.0",
72-
"mini-css-extract-plugin": "^2.7.3",
74+
"mini-css-extract-plugin": "^2.7.4",
7375
"prettier": "^2.8.4",
74-
"react": "^17.0.2",
75-
"react-dom": "^17.0.2",
76-
"react-is": "^17.0.1",
76+
"react": "^18.2.0",
77+
"react-dom": "^18.2.0",
78+
"react-is": "^18.2.0",
7779
"react-scripts": "^5.0.1",
78-
"react-test-renderer": "^17.0.2",
79-
"release-it": "^15.8.0",
80-
"style-loader": "^3.3.1",
80+
"react-test-renderer": "^18.2.0",
81+
"release-it": "^15.9.0",
82+
"style-loader": "^3.3.2",
8183
"ts-jest": "^29.0.5",
8284
"typescript": "^4.9.5",
8385
"url-loader": "^4.1.1",
84-
"webpack": "^5.76.1",
86+
"webpack": "^5.76.2",
8587
"webpack-cli": "^5.0.1"
8688
},
8789
"files": [
@@ -101,11 +103,11 @@
101103
"@types/react-input-mask": "^3.0.2",
102104
"@types/testing-library__jest-dom": "^5.14.5",
103105
"clsx": "^1.2.1",
104-
"downshift": "^7.4.0",
106+
"downshift": "^7.4.1",
105107
"jest-svg-transformer": "^1.0.0",
106108
"lodash": "^4.17.21",
107109
"rc-slider": "^10.1.1",
108-
"react-input-mask": "^2.0.4",
110+
"react-input-mask": "3.0.0-alpha.2",
109111
"react-phone-input-2": "^2.15.1"
110112
}
111113
}

‎src/components/Button/__tests__/Button.test.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
2-
import { render, screen } from '@testing-library/react';
3-
import userEvent from '@testing-library/user-event';
2+
import { fireEvent, render, screen } from '@testing-library/react';
43
import Button from '@/components/Button';
54

65
describe('ExampleComponent', () => {
@@ -54,7 +53,7 @@ describe('ExampleComponent', () => {
5453
const handleClick = jest.fn();
5554
render(<Button text='this is a test' onClick={handleClick} />);
5655
const button = screen.getByRole('button', { name: 'this is a test' });
57-
userEvent.click(button);
56+
fireEvent.click(button);
5857
expect(handleClick).toHaveBeenCalledTimes(1);
5958
});
6059
});

‎src/components/Grid/Col/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { ReactNode } from 'react';
22
import classNames from 'classnames';
33
import styles from '../Grid.css';
44

@@ -95,6 +95,7 @@ interface PropTypes {
9595
xxlOffset?: LGAndUpColumns;
9696
variablesClassName?: string;
9797
gutterType?: Gutter;
98+
children?: ReactNode;
9899
}
99100

100101
const getClasses = (cols: ColSizeIndex, type: string) => {

‎src/components/Input/Input.stories.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,13 @@ In the example [here](https://design-system.codelitt.dev/?path=/story/components
4949
2. Regarding the **mask** property, the size of the mask string will determine the size of the valid input.
5050
On the following object, the key values can be added to the mask string so that their corresponding RegExp strings will be the values accepted on the input. Any character added to the mask that is different from these keys will be permanent and non-editable on the input.
5151

52+
```javascript
5253
{
5354
'9': '[0-9]',
5455
'a': '[A-Za-z]',
5556
'\*': '[A-Za-z0-9]'
5657
}
58+
```
5759

5860
3. Regarding the **validations** property and its object keys, similar to the filters property above: **type** can either be defined with a value of 'RegExp' or 'function' (both as strings). With each case:
5961

‎src/components/Input/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
245245
required={false}
246246
value={value || ''}
247247
>
248-
{() => displayInput()}
248+
{displayInput()}
249249
</ReactInputMask>
250250
);
251251
};

‎src/components/NumericInput/__tests__/NumericInput.test.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useState } from 'react';
22
import NumericInput from '@/components/NumericInput';
33
import { render, fireEvent } from '@testing-library/react';
4-
import userEvent from '@testing-library/user-event';
54

65
const getNumericInputWrapperComponent = (max?: number, radix?: string, scale: number = 2) => {
76
const Wrapper = () => {
@@ -29,6 +28,15 @@ const getInput = (container: HTMLElement): HTMLInputElement => {
2928
return container.querySelector<HTMLInputElement>('input')!;
3029
};
3130

31+
const userEvent = (input: HTMLInputElement, value: string) => {
32+
value.split('').forEach(char => {
33+
fireEvent.keyDown(input, { key: char, code: char });
34+
fireEvent.change(input, { target: { value: input.value + char } });
35+
fireEvent.keyUp(input, { key: char, code: char });
36+
});
37+
}
38+
39+
3240
describe('NumericInput', () => {
3341
it('renders correctly', () => {
3442
const { container } = getNumericInputWrapperComponent();
@@ -54,7 +62,7 @@ describe('NumericInput', () => {
5462
it('prevents invalid characters from being passed alongside valid characters', () => {
5563
const { container } = getNumericInputWrapperComponent();
5664
const input = getInput(container);
57-
userEvent.type(input, '123abc');
65+
userEvent(input, '123abc');
5866
const expectedResult = '123';
5967
expect(input.value).toBe(expectedResult);
6068
});
@@ -65,14 +73,14 @@ describe('NumericInput', () => {
6573
it('accepts values equal to the max as valid', () => {
6674
const { container } = getNumericInputWrapperComponent(1000);
6775
const input = getInput(container);
68-
userEvent.type(input, '1000');
76+
userEvent(input, '1000');
6977
expect(input.value).toBe('1000');
7078
});
7179

7280
it('accepts values less than the max as valid', () => {
7381
const { container } = getNumericInputWrapperComponent(1000);
7482
const input = getInput(container);
75-
userEvent.type(input, '100');
83+
userEvent(input, '100');
7684
expect(input.value).toBe('100');
7785
});
7886
});
@@ -81,23 +89,23 @@ describe('NumericInput', () => {
8189
it('prevents values exceeding the max from being passed', () => {
8290
const { container } = getNumericInputWrapperComponent(1000);
8391
const input = getInput(container);
84-
userEvent.type(input, '10000');
92+
userEvent(input, '10000');
8593
const expectedResult = '1000';
8694
expect(input.value).toBe(expectedResult);
8795
});
8896

8997
it('prevents values with radix exceeding the max from being passed', () => {
9098
const { container } = getNumericInputWrapperComponent(1000, ',');
9199
const input = getInput(container);
92-
userEvent.type(input, '1000,99');
100+
userEvent(input, '1000,99');
93101
const expectedResult = '1000,';
94102
expect(input.value).toBe(expectedResult);
95103
});
96104

97105
it('prevents values with placements exceeding the max from being passed', () => {
98106
const { container } = getNumericInputWrapperComponent(5000000);
99107
const input = getInput(container);
100-
userEvent.type(input, '12.521.215,');
108+
userEvent(input, '12.521.215');
101109
const expectedResult = '12.521.21';
102110
expect(input.value).toBe(expectedResult);
103111
});
@@ -108,14 +116,14 @@ describe('NumericInput', () => {
108116
it('accepts comma-defined radix', () => {
109117
const { container } = getNumericInputWrapperComponent(100, ',');
110118
const input = getInput(container);
111-
userEvent.type(input, '100,00');
119+
userEvent(input, '100,00');
112120
expect(input.value).toBe('100,00');
113121
});
114122

115123
it('accepts dot-defined radix', () => {
116124
const { container } = getNumericInputWrapperComponent(100, '.');
117125
const input = getInput(container);
118-
userEvent.type(input, '100.00');
126+
userEvent(input, '100.00');
119127
expect(input.value).toBe('100.00');
120128
});
121129
});
@@ -124,14 +132,14 @@ describe('NumericInput', () => {
124132
it('accepts scale within the defined limit', () => {
125133
const { container } = getNumericInputWrapperComponent(undefined, '.', 2);
126134
const input = getInput(container);
127-
userEvent.type(input, '100.00');
135+
userEvent(input, '100.00');
128136
expect(input.value).toBe('100.00');
129137
});
130138

131139
it('prevents decimal value placements from exceeding the scale defined limit', () => {
132140
const { container } = getNumericInputWrapperComponent(undefined, ',', 2);
133141
const input = getInput(container);
134-
userEvent.type(input, '100,101');
142+
userEvent(input, '100,101');
135143
const expectedResult = '100,10';
136144
expect(input.value).toBe(expectedResult);
137145
});

‎src/components/NumericInput/__tests__/__snapshots__/NumericInput.test.tsx.snap‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ exports[`NumericInput renders correctly 1`] = `
55
<div
66
class="container"
77
>
8-
9-
108
<div
119
class="input--field-container"
1210
>
@@ -20,7 +18,6 @@ exports[`NumericInput renders correctly 1`] = `
2018
value=""
2119
/>
2220
</div>
23-
2421
</div>
2522
</div>
2623
</div>

‎src/components/PhoneInput/PhoneInput.stories.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
| variablesClassName | string | Receives the class for the actual input to customize its style. | - | false |
1818
| label | string \| React.ReactNode | Can be used as a [string](https://design-system.codelitt.dev/?path=/story/components-input--default-with-label-text) and allow the engineer to build a [custom label](https://design-system.codelitt.dev/?path=/story/components-input--with-custom-label) and pass it as a parameter. | - | false |
1919
| localNumber | boolean | Specifies whether the number is local and should default to the country you added or if the API should try to guess the Country you are adding a number for. | - | false |
20-
| masks | Record<string,string> | Defines a map of masks and its associated country, so you can overwrite the default mask if necessary. | - | false |
20+
| masks | Record `<string,string>` | Defines a map of masks and its associated country, so you can overwrite the default mask if necessary. | - | false |
2121
| onChange | (value: string) => void | Calls a function whenever a change in an event of the Phone Input is detected. | - | false |
2222
| onlyCountries | string[] | Country codes to be included. | - | false |
2323
| placeholder | string | Defines a custom placeholder. | The default phone mask | false |

‎src/components/Tab/Tab.stories.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
| Prop | Type | Description | Default | Mandatory |
88
| :----------------: | :------------------------------------------------: | :----------------------------------: | :-----: | :-------: |
99
| components | React.ReactNode[] | Accepts a list of components. | - | true |
10-
| menuItems | { title: string; active?: boolean; key: string }[] | Accepts a list of Menu Item objects. | - | true |
10+
| menuItems |`{ title: string; active?: boolean; key: string }[]`| Accepts a list of Menu Item objects. | - | true |
1111
| variablesClassName | string | Accepts custom CSS class names. | - | false |
1212

1313
## Getting Started

0 commit comments

Comments
 (0)