refactor: upgrade react and styled-components version

.storybook/main.js

@@ -58,13 +58,6 @@ module.exports = {
                 }
             }
         });
-        config.module.rules.push({
-            test: /\.tsx$/,
-            include: [packages],
-            exclude: [/node_modules/, /\.test.tsx?$/, /__snapshots__/, /__tests__/, /dist/, /icons/],
-            loader: 'stylelint-custom-processor-loader'
-        });
-
         const fileLoaderRule = config.module.rules.find(rule => rule.test.test('.svg'));
         if (fileLoaderRule) fileLoaderRule.exclude = pathToInlineSvg;
 

.vscode/settings.json

@@ -2,9 +2,9 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true,
-        "source.organizeImports": true,
-        "source.fixAll.stylelint": true
+        "source.fixAll.eslint": "explicit",
+        "source.organizeImports": "explicit",
+        "source.fixAll.stylelint": "explicit"
     },
     "eslint.validate": ["html", "javascript", "javascriptreact", "typescript", "typescriptreact"],
     "cSpell.words": ["Medly"],

README.md

@@ -24,7 +24,7 @@ To view a detailed description of the components in storybook click [here](https
   - 📝 [Forms](#forms)
   - ℹ [Icons](#icons)
   - ⧉ [Layout](#layout)
-  - 🌀 [Loaders](#loaders)  
+  - 🌀 [Loaders](#loaders)
   - 📄 [Markdown](#markdown)
   - 🏞 [Theme](#theme)
   - 🛠 [Utils](#utils)
@@ -66,7 +66,7 @@ Replace the `App.tsx` content with the following:
 import React from 'react';
 import { Button } from '@medly-components/core';
 
-const App: React.FC = () => <Button variant="solid">Click me!</Button>;
+const App = () => <Button variant="solid">Click me!</Button>;
 
 export default App;
 ```
@@ -137,7 +137,7 @@ This project exists thanks to all the people who contribute.
 
 ## NPM Scripts
 
-Please find below a list of commands to execute various tasks: 
+Please find below a list of commands to execute various tasks:
 
 - `yarn build` to build components
 - `yarn commit` to commit with conventional-commit approach

docs/Colors/Colors.stories.tsx

@@ -20,7 +20,7 @@ const Grid = styled.div`
     grid-template-columns: repeat(3, 1fr);
 `;
 
-const Color: React.FC<{ hex: string }> = styled.div<{ hex: string }>`
+const Color: React.FCC<{ hex: string }> = styled.div<{ hex: string }>`
     height: 40px;
     background-color: ${props => props.hex};
     padding: 0 20px;
@@ -30,7 +30,7 @@ const Color: React.FC<{ hex: string }> = styled.div<{ hex: string }>`
     color: ${props => contrastingColor(props.hex)};
 `;
 
-const ColorLine: React.FC<{ shade: number | string; hex: string }> = ({ shade, hex }) => (
+const ColorLine: React.FCC<{ shade: number | string; hex: string }> = ({ shade, hex }) => (
     <Color hex={hex} key={hex}>
         <Text textVariant="body1">{shade}</Text>
         <Text textVariant="body1">

docs/Typography/Typography.stories.tsx

@@ -11,21 +11,21 @@ export const VerticalAlign = styled.div`
     }
 `;
 
-export const FontVariantsThemeInterface: React.FC<FontVariantTheme> = () => null;
+export const FontVariantsThemeInterface: React.FCC<FontVariantTheme> = () => null;
 FontVariantsThemeInterface.defaultProps = {
     ...defaultTheme.font.variants
 };
 
-export const FontWeightThemeInterface: React.FC<FontWeightTheme> = () => null;
+export const FontWeightThemeInterface: React.FCC<FontWeightTheme> = () => null;
 FontWeightThemeInterface.defaultProps = {
     ...defaultTheme.font.weights
 };
 
-export const FontThemeInterface: React.FC<FontTheme> = () => null;
+export const FontThemeInterface: React.FCC<FontTheme> = () => null;
 FontThemeInterface.defaultProps = {
     ...defaultTheme.font
 };
-export const FontFaceThemeInterface: React.FC<FontFaceTheme> = () => null;
+export const FontFaceThemeInterface: React.FCC<FontFaceTheme> = () => null;
 FontFaceThemeInterface.defaultProps = {
     ...defaultTheme.font.faces[0]
 };

package.json

@@ -68,7 +68,12 @@
     },
     "prettier": "@medly/prettier-config",
     "stylelint": {
-        "extends": "@medly/stylelint-config"
+        "extends": "@medly/stylelint-config",
+        "rules": {
+            "media-feature-name-no-unknown": null,
+            "media-feature-range-operator-space-before": null,
+            "media-feature-range-operator-space-after": null
+        }
     },
     "eslintConfig": {
         "parser": "@typescript-eslint/parser",
@@ -123,10 +128,9 @@
         "@testing-library/dom": "^7.5.6",
         "@testing-library/react": "12.1.2",
         "@testing-library/user-event": "^12.0.2",
-        "@types/react": "^17.0.30",
-        "@types/react-dom": "^17.0.9",
+        "@types/react": "^18.3.1",
+        "@types/react-dom": "^18.3.0",
         "@types/storybook__addon-info": "5.2.1",
-        "@types/styled-components": "^5.1.0",
         "axios": "^0.21.1",
         "axios-mock-adapter": "^1.19.0",
         "babel-loader": "^8.1.0",
@@ -139,16 +143,16 @@
         "fork-ts-checker-webpack-plugin": "^4.1.1",
         "husky": "^4.2.3",
         "jest": "26.1.0",
-        "jest-styled-components": "^7.0.0",
+        "jest-styled-components": "^7.2.0",
         "lerna": "^6.1.0",
         "npm-run-all": "4.1.5",
-        "react": "^17.0.2",
+        "react": "^18.3.1",
         "react-docgen-typescript-loader": "3.6.0",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.3.1",
         "rimraf": "^3.0.1",
         "storybook-addon-designs": "^5.2.1",
         "storybook-addon-jsx": "7.1.14",
-        "styled-components": "^5.1.0",
+        "styled-components": "^6.1.9",
         "stylelint-custom-processor-loader": "^0.6.0",
         "swr": "^2.1.1",
         "thread-loader": "^2.1.3",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@medly-components/core",
-    "version": "7.1.1",
+    "version": "8.0.0",
     "sideEffects": false,
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.js",
@@ -24,15 +24,15 @@
         "watch": "yarn run build -w"
     },
     "peerDependencies": {
-        "react": "16.x || 17.x",
-        "react-dom": "16.x || 17.x",
-        "styled-components": "^5.1.0"
+        "react": "18.x",
+        "react-dom": "18.x",
+        "styled-components": "^6.1.9"
     },
     "dependencies": {
-        "@medly-components/icons": "1.13.5",
-        "@medly-components/loaders": "1.6.19",
+        "@medly-components/icons": "2.0.0",
+        "@medly-components/loaders": "2.0.0",
         "@medly-components/theme": "6.0.0",
-        "@medly-components/utils": "3.2.2",
+        "@medly-components/utils": "4.0.0",
         "date-fns": "^2.16.1",
         "effector": "^21.8.12",
         "effector-react": "^21.3.2",

packages/core/src/components/Accordion/Accordion.tsx

@@ -1,13 +1,12 @@
 import { WithStyle } from '@medly-components/utils';
-import type { FC } from 'react';
-import { memo, useEffect, useState } from 'react';
+import { FCC, memo, useEffect, useState } from 'react';
 import { Section } from './Accordion.styled';
 import { AccordionContext } from './AccordionContext';
 import Content from './Content';
 import Header from './Header';
 import { AccordionProps, StaticProps } from './types';
 
-const Component: FC<AccordionProps> = memo(({ active, defaultActive, onChange, ...restProps }) => {
+const Component: FCC<AccordionProps> = memo(({ active, defaultActive, onChange, ...restProps }) => {
     const activeState = useState(false);
 
     useEffect(() => {
@@ -26,7 +25,7 @@ Component.defaultProps = {
 };
 Component.displayName = 'Accordion';
 
-export const Accordion: FC<AccordionProps> & StaticProps & WithStyle = Object.assign(Component, {
+export const Accordion: FCC<AccordionProps> & StaticProps & WithStyle = Object.assign(Component, {
     Header,
     Content,
     Context: AccordionContext,

packages/core/src/components/Accordion/Content/Content.tsx

@@ -1,14 +1,14 @@
 import { WithStyle } from '@medly-components/utils';
-import type { FC } from 'react';
+import type { FCC } from 'react';
 import { memo, useContext } from 'react';
 import { AccordionContext } from '../AccordionContext';
 import { ContentProps } from '../types';
 import { Wrapper } from './Content.styled';
 
-const Component: FC<ContentProps> = memo(props => {
+const Component: FCC<ContentProps> = memo(props => {
     const [isActive] = useContext(AccordionContext);
 
     return <Wrapper role="region" isActive={isActive} {...props} />;
 });
 Component.displayName = 'Content';
-export const Content: FC & WithStyle = Object.assign(Component, { Style: Wrapper });
+export const Content: FCC<ContentProps> & WithStyle = Object.assign(Component, { Style: Wrapper });

packages/core/src/components/Accordion/Header/Header.tsx

@@ -1,12 +1,12 @@
 import { ExpandMoreIcon } from '@medly-components/icons';
 import { WithStyle } from '@medly-components/utils';
-import type { FC } from 'react';
+import type { FCC } from 'react';
 import { memo, useCallback, useContext } from 'react';
 import { AccordionContext } from '../AccordionContext';
 import { HeaderProps } from '../types';
 import { Wrapper } from './Header.styled';
 
-const Component: FC<HeaderProps> = memo(({ children, iconColor, ...restProps }) => {
+const Component: FCC<HeaderProps> = memo(({ children, iconColor, ...restProps }) => {
     const [isActive, setActiveState] = useContext(AccordionContext),
         handleClick = useCallback(() => setActiveState(val => !val), []);
 
@@ -19,4 +19,4 @@ const Component: FC<HeaderProps> = memo(({ children, iconColor, ...restProps })
 });
 
 Component.displayName = 'Header';
-export const Header: FC<HeaderProps> & WithStyle = Object.assign(Component, { Style: Wrapper });
+export const Header: FCC<HeaderProps> & WithStyle = Object.assign(Component, { Style: Wrapper });

packages/core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -2,18 +2,12 @@
 
 exports[`Accordion component should render properly 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
 .c4 {
   overflow: hidden;
-  -webkit-transition: all 200ms ease-out;
   transition: all 200ms ease-out;
   max-height: 0;
   opacity: 0;
@@ -24,14 +18,12 @@ exports[`Accordion component should render properly 1`] = `
 .c3 {
   overflow: visible;
   font-size: 2.4rem;
-  -webkit-transition: all 100ms linear;
   transition: all 100ms linear;
   cursor: inherit;
 }
 
 .c3 * {
   fill-opacity: 1;
-  -webkit-transition: all 100ms linear;
   transition: all 100ms linear;
   fill: #607890;
 }
@@ -40,12 +32,8 @@ exports[`Accordion component should render properly 1`] = `
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   font-family: inherit;
-  -webkit-text-decoration: none;
   text-decoration: none;
   outline: none;
   border: 0;
@@ -55,19 +43,14 @@ exports[`Accordion component should render properly 1`] = `
   border-top-right-radius: 0.8rem;
   border-bottom-left-radius: 0.8rem;
   border-bottom-right-radius: 0.8rem;
-  -webkit-transition: all 200ms ease-out;
   transition: all 200ms ease-out;
 }
 
 .c1 .c2 {
   position: absolute;
   right: 2rem;
   top: 50%;
-  -webkit-transform: translateY(-50%) rotate(0deg);
-  -ms-transform: translateY(-50%) rotate(0deg);
   transform: translateY(-50%) rotate(0deg);
-  -webkit-transition: -webkit-transform 200ms ease-out;
-  -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
 }
 

packages/core/src/components/Accordion/types.ts

@@ -1,9 +1,9 @@
 import { HTMLProps, WithStyle } from '@medly-components/utils';
-import type { Context, Dispatch, FC, SetStateAction } from 'react';
+import type { Context, Dispatch, FCC, SetStateAction } from 'react';
 
 export type StaticProps = {
-    Header: FC<HeaderProps> & WithStyle;
-    Content: FC<ContentProps> & WithStyle;
+    Header: FCC<HeaderProps> & WithStyle;
+    Content: FCC<ContentProps> & WithStyle;
     Context: Context<AccordionContextType>;
 };
 

packages/core/src/components/Avatar/Avatar.stories.tsx

@@ -1,11 +1,11 @@
 import { AvatarTheme, defaultTheme } from '@medly-components/theme';
+import type { FCC } from 'react';
 import styled from 'styled-components';
 import { AvatarProps } from './types';
-import type { FC } from 'react';
 
 export const sizes: Required<AvatarProps>['size'][] = ['S', 'M', 'L'];
 
-export const ThemeInterface: FC<AvatarTheme> = () => null;
+export const ThemeInterface: FCC<AvatarTheme> = () => null;
 ThemeInterface.defaultProps = {
     ...defaultTheme.avatar
 };

packages/core/src/components/Avatar/Avatar.styled.tsx

@@ -58,21 +58,13 @@ const getTextStyle = ({ theme, ...props }: StyledProps & WithThemeProp) => {
     `;
 };
 
-export const AvatarStyled = styled('div').attrs(
-    ({
-        theme: {
-            avatar: { defaults }
-        }
-    }: StyledProps & WithThemeProp) => ({
-        defaults
-    })
-)<StyledProps>`
+export const AvatarStyled = styled('div')<StyledProps>`
     display: inline-block;
     text-align: center;
     min-width: max-content;
     width: ${getAvatarSize};
     height: ${getAvatarSize};
-    border-radius: ${({ defaults }) => defaults.borderRadius};
+    border-radius: ${({ theme }) => theme.avatar.defaults.borderRadius};
     overflow: hidden;
     cursor: ${({ onClick, disabled }) => (disabled ? 'not-allowed' : onClick ? 'pointer' : 'inherit')};
 
@@ -82,9 +74,9 @@ export const AvatarStyled = styled('div').attrs(
         width: ${getAvatarSize};
         height: ${getAvatarSize};
         object-fit: cover;
-        border: 0.1rem solid ${({ defaults }) => defaults.borderColor};
+        border: 0.1rem solid ${({ theme }) => theme.avatar.defaults.borderColor};
         box-sizing: border-box;
-        border-radius: ${({ defaults }) => defaults.borderRadius};
+        border-radius: ${({ theme }) => theme.avatar.defaults.borderRadius};
     }
 
     ${props => props.onClick && hoverStyle};

packages/core/src/components/Avatar/Avatar.tsx

@@ -1,11 +1,11 @@
 import { isValidStringOrNumber, WithStyle } from '@medly-components/utils';
-import { memo, forwardRef, Children } from 'react';
+import type { FCC } from 'react';
+import { Children, forwardRef, memo } from 'react';
 import Text from '../Text';
 import { AvatarStyled } from './Avatar.styled';
 import { AvatarProps } from './types';
-import type { FC } from 'react';
 
-const Component: FC<AvatarProps> = memo(
+const Component: FCC<AvatarProps> = memo(
     forwardRef((props, ref) => {
         const isImage = !!Children.toArray(props.children).find(
             (child: any) => child.type === 'img' || child.props?.originalType === 'img'
@@ -26,6 +26,6 @@ const Component: FC<AvatarProps> = memo(
     })
 );
 Component.displayName = 'Avatar';
-export const Avatar: FC<AvatarProps> & WithStyle = Object.assign(Component, {
+export const Avatar: FCC<AvatarProps> & WithStyle = Object.assign(Component, {
     Style: AvatarStyled
 });