Update version libraries

codelittinc · Mar 16, 2023 · 087af22 · 087af22
1 parent 67814f2
commit 087af22
Show file tree

Hide file tree

Showing 11 changed files with 4,580 additions and 2,798 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,11 +24,13 @@
     "chromatic": "chromatic --exit-zero-on-changes"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
     "@storybook/addon-docs": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/builder-webpack5": "^6.5.16",
@@ -37,17 +39,17 @@
     "@storybook/react": "^6.5.16",
     "@svgr/webpack": "^6.5.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/classnames": "^2.3.0",
     "@types/googlemaps": "^3.43.2",
-    "@types/jest": "^29.4.0",
+    "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.191",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
@@ -69,19 +71,19 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-transform-stub": "^2.0.0",
-    "mini-css-extract-plugin": "^2.7.3",
+    "mini-css-extract-plugin": "^2.7.4",
     "prettier": "^2.8.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "react-test-renderer": "^17.0.2",
-    "release-it": "^15.8.0",
-    "style-loader": "^3.3.1",
+    "react-test-renderer": "^18.2.0",
+    "release-it": "^15.9.0",
+    "style-loader": "^3.3.2",
     "ts-jest": "^29.0.5",
     "typescript": "^4.9.5",
     "url-loader": "^4.1.1",
-    "webpack": "^5.76.1",
+    "webpack": "^5.76.2",
     "webpack-cli": "^5.0.1"
   },
   "files": [
@@ -101,11 +103,11 @@
     "@types/react-input-mask": "^3.0.2",
     "@types/testing-library__jest-dom": "^5.14.5",
     "clsx": "^1.2.1",
-    "downshift": "^7.4.0",
+    "downshift": "^7.4.1",
     "jest-svg-transformer": "^1.0.0",
     "lodash": "^4.17.21",
     "rc-slider": "^10.1.1",
-    "react-input-mask": "^2.0.4",
+    "react-input-mask": "3.0.0-alpha.2",
     "react-phone-input-2": "^2.15.1"
   }
 }
diff --git a/src/components/Button/__tests__/Button.test.tsx b/src/components/Button/__tests__/Button.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 import Button from '@/components/Button';
 
 describe('ExampleComponent', () => {
@@ -54,7 +53,7 @@ describe('ExampleComponent', () => {
     const handleClick = jest.fn();
     render(<Button text='this is a test' onClick={handleClick} />);
     const button = screen.getByRole('button', { name: 'this is a test' });
-    userEvent.click(button);
+    fireEvent.click(button);
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/Grid/Col/index.tsx b/src/components/Grid/Col/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import styles from '../Grid.css';
 
@@ -95,6 +95,7 @@ interface PropTypes {
   xxlOffset?: LGAndUpColumns;
   variablesClassName?: string;
   gutterType?: Gutter;
+  children?: ReactNode;
 }
 
 const getClasses = (cols: ColSizeIndex, type: string) => {

diff --git a/src/components/Input/Input.stories.mdx b/src/components/Input/Input.stories.mdx
@@ -49,11 +49,13 @@ In the example [here](https://design-system.codelitt.dev/?path=/story/components
 2. Regarding the **mask** property, the size of the mask string will determine the size of the valid input.
    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.
 
+```javascript
 {
 '9': '[0-9]',
 'a': '[A-Za-z]',
 '\*': '[A-Za-z0-9]'
 }
+```
 
 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:
 

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -245,7 +245,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         required={false}
         value={value || ''}
       >
-        {() => displayInput()}
+        {displayInput()}
       </ReactInputMask>
     );
   };

diff --git a/src/components/NumericInput/__tests__/NumericInput.test.tsx b/src/components/NumericInput/__tests__/NumericInput.test.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import NumericInput from '@/components/NumericInput';
 import { render, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 const getNumericInputWrapperComponent = (max?: number, radix?: string, scale: number = 2) => {
   const Wrapper = () => {
@@ -29,6 +28,15 @@ const getInput = (container: HTMLElement): HTMLInputElement => {
   return container.querySelector<HTMLInputElement>('input')!;
 };
 
+const userEvent = (input: HTMLInputElement, value: string) => {
+  value.split('').forEach(char => {
+    fireEvent.keyDown(input, { key: char, code: char });
+    fireEvent.change(input, { target: { value: input.value + char } });
+    fireEvent.keyUp(input, { key: char, code: char });
+  });
+}
+
+
 describe('NumericInput', () => {
   it('renders correctly', () => {
     const { container } = getNumericInputWrapperComponent();
@@ -54,7 +62,7 @@ describe('NumericInput', () => {
     it('prevents invalid characters from being passed alongside valid characters', () => {
       const { container } = getNumericInputWrapperComponent();
       const input = getInput(container);
-      userEvent.type(input, '123abc');
+      userEvent(input, '123abc');
       const expectedResult = '123';
       expect(input.value).toBe(expectedResult);
     });
@@ -65,14 +73,14 @@ describe('NumericInput', () => {
       it('accepts values equal to the max as valid', () => {
         const { container } = getNumericInputWrapperComponent(1000);
         const input = getInput(container);
-        userEvent.type(input, '1000');
+        userEvent(input, '1000');
         expect(input.value).toBe('1000');
       });
 
       it('accepts values less than the max as valid', () => {
         const { container } = getNumericInputWrapperComponent(1000);
         const input = getInput(container);
-        userEvent.type(input, '100');
+        userEvent(input, '100');
         expect(input.value).toBe('100');
       });
     });
@@ -81,23 +89,23 @@ describe('NumericInput', () => {
       it('prevents values exceeding the max from being passed', () => {
         const { container } = getNumericInputWrapperComponent(1000);
         const input = getInput(container);
-        userEvent.type(input, '10000');
+        userEvent(input, '10000');
         const expectedResult = '1000';
         expect(input.value).toBe(expectedResult);
       });
 
       it('prevents values with radix exceeding the max from being passed', () => {
         const { container } = getNumericInputWrapperComponent(1000, ',');
         const input = getInput(container);
-        userEvent.type(input, '1000,99');
+        userEvent(input, '1000,99');
         const expectedResult = '1000,';
         expect(input.value).toBe(expectedResult);
       });
 
       it('prevents values with placements exceeding the max from being passed', () => {
         const { container } = getNumericInputWrapperComponent(5000000);
         const input = getInput(container);
-        userEvent.type(input, '12.521.215,');
+        userEvent(input, '12.521.215');
         const expectedResult = '12.521.21';
         expect(input.value).toBe(expectedResult);
       });
@@ -108,14 +116,14 @@ describe('NumericInput', () => {
     it('accepts comma-defined radix', () => {
       const { container } = getNumericInputWrapperComponent(100, ',');
       const input = getInput(container);
-      userEvent.type(input, '100,00');
+      userEvent(input, '100,00');
       expect(input.value).toBe('100,00');
     });
 
     it('accepts dot-defined radix', () => {
       const { container } = getNumericInputWrapperComponent(100, '.');
       const input = getInput(container);
-      userEvent.type(input, '100.00');
+      userEvent(input, '100.00');
       expect(input.value).toBe('100.00');
     });
   });
@@ -124,14 +132,14 @@ describe('NumericInput', () => {
     it('accepts scale within the defined limit', () => {
       const { container } = getNumericInputWrapperComponent(undefined, '.', 2);
       const input = getInput(container);
-      userEvent.type(input, '100.00');
+      userEvent(input, '100.00');
       expect(input.value).toBe('100.00');
     });
 
     it('prevents decimal value placements from exceeding the scale defined limit', () => {
       const { container } = getNumericInputWrapperComponent(undefined, ',', 2);
       const input = getInput(container);
-      userEvent.type(input, '100,101');
+      userEvent(input, '100,101');
       const expectedResult = '100,10';
       expect(input.value).toBe(expectedResult);
     });

diff --git a/src/components/NumericInput/__tests__/__snapshots__/NumericInput.test.tsx.snap b/src/components/NumericInput/__tests__/__snapshots__/NumericInput.test.tsx.snap
@@ -5,8 +5,6 @@ exports[`NumericInput renders correctly 1`] = `
   <div
     class="container"
   >
-    
-    
     <div
       class="input--field-container"
     >
@@ -20,7 +18,6 @@ exports[`NumericInput renders correctly 1`] = `
           value=""
         />
       </div>
-      
     </div>
   </div>
 </div>

diff --git a/src/components/PhoneInput/PhoneInput.stories.mdx b/src/components/PhoneInput/PhoneInput.stories.mdx
@@ -17,7 +17,7 @@
 |     variablesClassName      |          string           |                                                                                                                  Receives the class for the actual input to customize its style.                                                                                                       |           -            |   false   |
 |           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   |
 |        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   |
-|           masks             |    Record<string,string>  |                                                                                                  Defines a map of masks and its associated country, so you can overwrite the default mask if necessary.                                                                                |           -            |   false   |
+|           masks             |  Record `<string,string>` |                                                                                                  Defines a map of masks and its associated country, so you can overwrite the default mask if necessary.                                                                                |           -            |   false   |
 |          onChange           |  (value: string) => void  |                                                                                                     Calls a function whenever a change in an event of the Phone Input is detected.                                                                                                     |           -            |   false   |
 |       onlyCountries         |         string[]          |                                                                                                                             Country codes to be included.                                                                                                                              |           -            |   false   |
 |        placeholder          |          string           |                                                                                                                             Defines a custom placeholder.                                                                                                                              | The default phone mask |   false   |

diff --git a/src/components/Tab/Tab.stories.mdx b/src/components/Tab/Tab.stories.mdx
@@ -7,7 +7,7 @@
 |        Prop        |                        Type                        |             Description              | Default | Mandatory |
 | :----------------: | :------------------------------------------------: | :----------------------------------: | :-----: | :-------: |
 |     components     |                 React.ReactNode[]                  |    Accepts a list of components.     |    -    |   true    |
-|     menuItems      | { title: string; active?: boolean; key: string }[] | Accepts a list of Menu Item objects. |    -    |   true    |
+|     menuItems      |`{ title: string; active?: boolean; key: string }[]`| Accepts a list of Menu Item objects. |    -    |   true    |
 | variablesClassName |                       string                       |   Accepts custom CSS class names.    |    -    |   false   |
 
 ## Getting Started

diff --git a/webpack.config.js b/webpack.config.js
@@ -67,9 +67,7 @@ module.exports = {
           },
           {
             loader: '@mdx-js/loader',
-            options: {
-              compilers: [createCompiler({})]
-            }
+            options: {}
           }
         ]
       },
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,8 +5,6 @@ exports[`NumericInput renders correctly 1`] = ` @@
       <div
         class="container"
       >
         <div
           class="input--field-container"
         >
@@ Expand All / @@ -20,7 +18,6 @@ exports[`NumericInput renders correctly 1`] = ` @@
               value=""
             />
           </div>
         </div>
       </div>
     </div>
@@ Expand Down @@