Skip to content

Commit e787a3b

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

File tree

11 files changed

+4579
-2798
lines changed

11 files changed

+4579
-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: 18 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,14 @@ 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+
3239
describe('NumericInput', () => {
3340
it('renders correctly', () => {
3441
const { container } = getNumericInputWrapperComponent();
@@ -54,7 +61,7 @@ describe('NumericInput', () => {
5461
it('prevents invalid characters from being passed alongside valid characters', () => {
5562
const { container } = getNumericInputWrapperComponent();
5663
const input = getInput(container);
57-
userEvent.type(input, '123abc');
64+
userEvent(input, '123abc');
5865
const expectedResult = '123';
5966
expect(input.value).toBe(expectedResult);
6067
});
@@ -65,14 +72,14 @@ describe('NumericInput', () => {
6572
it('accepts values equal to the max as valid', () => {
6673
const { container } = getNumericInputWrapperComponent(1000);
6774
const input = getInput(container);
68-
userEvent.type(input, '1000');
75+
userEvent(input, '1000');
6976
expect(input.value).toBe('1000');
7077
});
7178

7279
it('accepts values less than the max as valid', () => {
7380
const { container } = getNumericInputWrapperComponent(1000);
7481
const input = getInput(container);
75-
userEvent.type(input, '100');
82+
userEvent(input, '100');
7683
expect(input.value).toBe('100');
7784
});
7885
});
@@ -81,23 +88,23 @@ describe('NumericInput', () => {
8188
it('prevents values exceeding the max from being passed', () => {
8289
const { container } = getNumericInputWrapperComponent(1000);
8390
const input = getInput(container);
84-
userEvent.type(input, '10000');
91+
userEvent(input, '10000');
8592
const expectedResult = '1000';
8693
expect(input.value).toBe(expectedResult);
8794
});
8895

8996
it('prevents values with radix exceeding the max from being passed', () => {
9097
const { container } = getNumericInputWrapperComponent(1000, ',');
9198
const input = getInput(container);
92-
userEvent.type(input, '1000,99');
99+
userEvent(input, '1000,99');
93100
const expectedResult = '1000,';
94101
expect(input.value).toBe(expectedResult);
95102
});
96103

97104
it('prevents values with placements exceeding the max from being passed', () => {
98105
const { container } = getNumericInputWrapperComponent(5000000);
99106
const input = getInput(container);
100-
userEvent.type(input, '12.521.215,');
107+
userEvent(input, '12.521.215');
101108
const expectedResult = '12.521.21';
102109
expect(input.value).toBe(expectedResult);
103110
});
@@ -108,14 +115,14 @@ describe('NumericInput', () => {
108115
it('accepts comma-defined radix', () => {
109116
const { container } = getNumericInputWrapperComponent(100, ',');
110117
const input = getInput(container);
111-
userEvent.type(input, '100,00');
118+
userEvent(input, '100,00');
112119
expect(input.value).toBe('100,00');
113120
});
114121

115122
it('accepts dot-defined radix', () => {
116123
const { container } = getNumericInputWrapperComponent(100, '.');
117124
const input = getInput(container);
118-
userEvent.type(input, '100.00');
125+
userEvent(input, '100.00');
119126
expect(input.value).toBe('100.00');
120127
});
121128
});
@@ -124,14 +131,14 @@ describe('NumericInput', () => {
124131
it('accepts scale within the defined limit', () => {
125132
const { container } = getNumericInputWrapperComponent(undefined, '.', 2);
126133
const input = getInput(container);
127-
userEvent.type(input, '100.00');
134+
userEvent(input, '100.00');
128135
expect(input.value).toBe('100.00');
129136
});
130137

131138
it('prevents decimal value placements from exceeding the scale defined limit', () => {
132139
const { container } = getNumericInputWrapperComponent(undefined, ',', 2);
133140
const input = getInput(container);
134-
userEvent.type(input, '100,101');
141+
userEvent(input, '100,101');
135142
const expectedResult = '100,10';
136143
expect(input.value).toBe(expectedResult);
137144
});

‎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)