feat(QTM-647): Conversion of styles from Styled Components to CSS modules of Grid components

.nvmrc

@@ -1 +1 @@
-16.15.1
+16.17.1

CONTRIBUTING.MD

@@ -4,6 +4,7 @@
 ## Summary
 
  - [Contribution Prerequisites](#contribution-prerequisites)
+ - [Important Notices](#important-notices)
  - [Getting Started](#getting-started)
  - [Editing a Component](#editing-a-component)
 
@@ -13,7 +14,7 @@ You can contribute in many ways: opening or participating of a issue, reporting
 
 ## Contribution Prerequisites
 
-- Node v16.15.1;
+- Node v16.17.1;
 
 Obs.: We have .nvmrc. When you run nvm use, it will set the node to the same version based on the .nvmrc file in the repository.
 
@@ -26,7 +27,15 @@ Obs.: We have .nvmrc. When you run nvm use, it will set the node to the same ver
 Why _commitizen_? To enforce a padronization to the commits and make sure every commit follows the same profile.
 
 ---
+## Important Notices ⚠️ 
 
+We do not recommend using ready-made components from [MUI](https://mui.com/material-ui/getting-started/) when implementing Quantum components for performance and long-term maintenance reasons. MUI is included in our library only to enable the use of [Material Icons](https://mui.com/material-ui/material-icons/).
+
+The MUI library, as well as the Styled Components, uses internally resources and libraries that aren't compatible with [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components), a resource added to Next JS 13. We intend to enable its use in the future to improve the performance of our components. Therefore, we plan to remove the mentioned libraries completely from our components.
+
+Also, we do not recommend using any other ready-made component library. We suggest for new components to have DOM structure, styling and functionalities completely implemented internally, without any dependence on third-party libraries.
+
+---
 ## Getting Started
 1.  Fork the project, [Help Guide to Fork a repository](https://docs.github.com/en/get-started/quickstart/fork-a-repo);
 2.  Clone the project;
@@ -127,7 +136,7 @@ Why _commitizen_? To enforce a padronization to the commits and make sure every
 
 13.  Submit a pull request;
 
-        Open your pull request. If you don't know how do it, check this [tutorial](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
+        Open your pull request. If you don't know how do it, check this [tutorial](https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
 
 14. Review flow for Pull Requests:
 

README.md

@@ -12,6 +12,14 @@
 > **Warning**
 > Quantum requires react@16.14.0 or higher.
 
+## Notices ⚠️
+
+For performance and long-term maintenance reasons, we do not recommend using [MUI](https://mui.com/material-ui/getting-started/) in Quantum components implementation. MUI is present in our library only to allow the use of [Material Icons](https://mui.com/material-ui/material-icons/).
+
+Also, we do not recommend using any other ready-made component library. We suggest for new components to have DOM structure, styling and functionalities completely implemented internally, without any dependence on third-party libraries.
+
+For more details, visit the "Important notices" section at [CONTRIBUTING.MD](https://github.com/catho/quantum/blob/master/CONTRIBUTING.MD#important-notices)
+
 ## Getting started
 
 Quantum is available as an [npm package](https://github.com/catho/quantum/pkgs/npm/quantum). It can be installed using:

components/Alert/__snapshots__/Alert.unit.test.jsx.snap

@@ -1343,7 +1343,7 @@ exports[`Alert component Should match the snapshot with an icon 1`] = `
       viewBox="0 0 24 24"
     >
       <path
-        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
       />
     </svg>
     <span>

components/Avatar/__snapshots__/Avatar.unit.test.jsx.snap

@@ -34,7 +34,7 @@ exports[`<Avatar /> Should match snapshot With href 1`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
     />
   </svg>
 </a>
@@ -83,7 +83,7 @@ exports[`<Avatar /> Should match snapshot With notification 1`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
     />
   </svg>
   <span
@@ -168,7 +168,7 @@ exports[`<Avatar /> Should match snapshot With text 1`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
     />
   </svg>
   <span
@@ -216,7 +216,7 @@ exports[`<Avatar /> Should match snapshot With toggle icon 1`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
     />
   </svg>
   <svg
@@ -229,7 +229,7 @@ exports[`<Avatar /> Should match snapshot With toggle icon 1`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
+      d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
     />
   </svg>
 </span>
@@ -268,7 +268,7 @@ exports[`<Avatar /> Should match snapshot Without picture 1`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+      d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
     />
   </svg>
 </span>

components/Breadcrumbs/__snapshots__/Breadcrumbs.unit.test.jsx.snap

@@ -147,7 +147,7 @@ exports[`<Breadcrumbs /> should match the snapshots 1`] = `
           viewBox="0 0 24 24"
         >
           <path
-            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
           />
         </svg>
         <button
@@ -175,7 +175,7 @@ exports[`<Breadcrumbs /> should match the snapshots 1`] = `
           viewBox="0 0 24 24"
         >
           <path
-            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
           />
         </svg>
         <a
@@ -200,7 +200,7 @@ exports[`<Breadcrumbs /> should match the snapshots 1`] = `
           viewBox="0 0 24 24"
         >
           <path
-            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
           />
         </svg>
         <a
@@ -224,7 +224,7 @@ exports[`<Breadcrumbs /> should match the snapshots 1`] = `
           viewBox="0 0 24 24"
         >
           <path
-            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
           />
         </svg>
         <span>
@@ -382,7 +382,7 @@ exports[`<Breadcrumbs /> should match the snapshots when breadcrumbs is collapse
           viewBox="0 0 24 24"
         >
           <path
-            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
           />
         </svg>
         <button
@@ -410,7 +410,7 @@ exports[`<Breadcrumbs /> should match the snapshots when breadcrumbs is collapse
           viewBox="0 0 24 24"
         >
           <path
-            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
           />
         </svg>
         <a
@@ -435,7 +435,7 @@ exports[`<Breadcrumbs /> should match the snapshots when breadcrumbs is collapse
           viewBox="0 0 24 24"
         >
           <path
-            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
           />
         </svg>
         <a
@@ -459,7 +459,7 @@ exports[`<Breadcrumbs /> should match the snapshots when breadcrumbs is collapse
           viewBox="0 0 24 24"
         >
           <path
-            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+            d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
           />
         </svg>
         <span>
@@ -492,7 +492,7 @@ exports[`<Breadcrumbs /> should match the snapshots when collapsed breadcrumbs i
             class=\\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Breadcrumbs__BreadcrumbIcon-sc-d5msik-2 bJMWQD css-1696fkf-MuiSvgIcon-root\\"
             data-qtm-preloader=\\"icon\\"
 @@ -46,21 +47,21 @@
-              d=\\"M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\\"
+              d=\\"M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z\\"
             />
           </svg>
           <button

components/Button/__snapshots__/Button.unit.test.jsx.snap

@@ -123,7 +123,7 @@ exports[`Button component should render a button only icon state  1`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
     />
   </svg>
 </button>
@@ -198,7 +198,7 @@ exports[`Button component should render a button only icon state  2`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
     />
   </svg>
 </button>
@@ -273,7 +273,7 @@ exports[`Button component should render a button only icon state  3`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
     />
   </svg>
 </button>
@@ -348,7 +348,7 @@ exports[`Button component should render a button only icon state  4`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
     />
   </svg>
 </button>
@@ -423,7 +423,7 @@ exports[`Button component should render a button only icon state  5`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
     />
   </svg>
 </button>
@@ -1041,7 +1041,7 @@ exports[`Button component with an icon should match secondary snapshot 1`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
     />
   </svg>
   Search
@@ -1117,7 +1117,7 @@ exports[`Button component with an icon should match secondary snapshot 2`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"
+      d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2m0 14H4v-6h16zm0-10H4V6h16z"
     />
   </svg>
   Payment
@@ -1193,7 +1193,7 @@ exports[`Button component with an icon should match secondary snapshot 3`] = `
     viewBox="0 0 24 24"
   >
     <path
-      d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
+      d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2m-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2m3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1z"
     />
   </svg>
   Lock

components/Card/Card.jsx

@@ -38,9 +38,9 @@ class Card extends Component {
   render() {
     const { className = '', style, backgroundOpacity, ...rest } = this.props;
     const classArticle = classNames(
-      className,
       styles['card-wrapper'],
       'shadow-1',
+      className,
     );
 
     return (

components/Card/sub-components/Content.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import styles from './Content.module.css';
 
 const Content = ({ className = '', children, ...props }) => {
-  const classContent = classNames(className, styles.content);
+  const classContent = classNames(styles.content, className);
   return (
     <div className={classContent} {...props}>
       {children}

components/Card/sub-components/Description.jsx

@@ -4,9 +4,9 @@ import styles from './Description.module.css';
 
 const Description = ({ className = '', children, small, ...props }) => {
   const classDescription = classNames(
-    className,
     styles['description-content'],
     { [styles['description-content-small']]: small },
+    className,
   );
 
   return (

components/Card/sub-components/Footer.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import styles from './Footer.module.css';
 
 const Footer = ({ className = '', children, ...props }) => {
-  const classFooter = classNames(className, styles['footer-wrapper']);
+  const classFooter = classNames(styles['footer-wrapper'], className);
 
   return (
     <footer {...props} className={classFooter}>

components/Card/sub-components/Header.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import styles from './Header.module.css';
 
 const Header = ({ className = '', children, ...props }) => {
-  const classHeader = classNames(className, styles['header-wrapper']);
+  const classHeader = classNames(styles['header-wrapper'], className);
 
   return (
     <header className={classHeader} {...props}>

components/Card/sub-components/HeaderText.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import styles from './HeaderText.module.css';
 
 const HeaderText = ({ className = '', children, ...props }) => {
-  const classHeaderText = classNames(className, styles['header-text']);
+  const classHeaderText = classNames(styles['header-text'], className);
 
   return (
     <div className={classHeaderText} {...props}>

components/Card/sub-components/Media.jsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import styles from './Media.module.css';
 
 const Media = ({ className = '', style, src, alt, ...props }) => {
-  const classMedia = classNames(className, styles['media-wrapper']);
+  const classMedia = classNames(styles['media-wrapper'], className);
   return (
     <div className={classMedia} style={style}>
       <img className={styles['media-image']} src={src} alt={alt} {...props} />

components/Card/sub-components/Thumbnail.jsx

@@ -3,9 +3,13 @@ import classNames from 'classnames';
 import styles from './Thumbnail.module.css';
 
 const Thumbnail = ({ className = '', src, alt, rounded, ...props }) => {
-  const classImg = classNames(className, styles.thumbnail, {
-    [styles['thumbnail-rounded']]: rounded,
-  });
+  const classImg = classNames(
+    styles.thumbnail,
+    {
+      [styles['thumbnail-rounded']]: rounded,
+    },
+    className,
+  );
 
   return (
     <img loading="lazy" src={src} alt={alt} className={classImg} {...props} />

components/Card/sub-components/Title.jsx

@@ -3,9 +3,13 @@ import classNames from 'classnames';
 import styles from './Title.module.css';
 
 const Title = ({ className = '', children, small, ...props }) => {
-  const classH2 = classNames(className, styles.title, {
-    [styles['title-small']]: small,
-  });
+  const classH2 = classNames(
+    styles.title,
+    {
+      [styles['title-small']]: small,
+    },
+    className,
+  );
 
   return (
     <h2 className={classH2} {...props}>