build(packages): bump deps

mverissimo · Jul 8, 2022 · c3f5076 · c3f5076
1 parent 59c177f
commit c3f5076
Show file tree

Hide file tree

Showing 17 changed files with 4,737 additions and 2,167 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,4 +1,9 @@
 {
+  "settings": {
+    "react": {
+      "version": "latest"
+    }
+  },
   "extends": ["react-app", "plugin:testing-library/react"],
   "plugins": ["prettier", "testing-library", "@emotion"],
   "rules": {
@@ -8,10 +13,5 @@
     "@emotion/pkg-renaming": "error",
     "@emotion/styled-import": "error",
     "@emotion/import-from-emotion": "error"
-  },
-  "settings": {
-    "react": {
-      "version": "latest"
-    }
   }
 }
diff --git a/babel.config.js b/babel.config.js
@@ -9,9 +9,6 @@ module.exports = (api) => {
       '@babel/preset-env',
       {
         loose: true,
-        targets: {
-          esmodules: !isProd,
-        },
       },
     ],
     [

diff --git a/docs/api.mdx b/docs/api.mdx
@@ -4,7 +4,7 @@ route: /api
 ---
 
 import { Playground } from 'docz';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 import { Container, Row, Col } from '../src';
 
 # API

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  flags: {
+    FAST_DEV: true,
+    SSR_DEV: false,
+  },
+  plugins: [
+    {
+      resolve: 'gatsby-plugin-emotion',
+      options: {
+        autoLabel: 'dev-only',
+        labelFormat: '[filename]--[local]',
+      },
+    },
+  ],
+};
diff --git a/jest.config.js b/jest.config.js
@@ -1,19 +1,29 @@
 module.exports = {
   preset: 'ts-jest',
-  globals: {
-    'ts-jest': {
-      babelConfig: true,
-      tsconfig: {
-        jsx: 'react',
+  transform: {
+    '^.+\\.(ts|tsx)$': [
+      '@swc/jest',
+      {
+        sourceMaps: true,
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
       },
-    },
+    ],
   },
-  testURL: 'http://localhost',
   testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
+  testPathIgnorePatterns: ['./.docz/', './node_modules/'],
+  snapshotSerializers: ['@emotion/jest/serializer'],
   modulePaths: ['<rootDir>/src/'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   moduleDirectories: ['node_modules', 'src'],
-  testPathIgnorePatterns: ['./.docz/', './node_modules/'],
   setupFilesAfterEnv: ['<rootDir>/.jest/setup.ts'],
   coverageDirectory: 'reports/jest',
   coverageReporters: ['cobertura', 'text-summary', 'html'],
@@ -27,9 +37,4 @@ module.exports = {
     '!.jest/**',
     '!**/node_modules/**',
   ],
-  snapshotSerializers: ['@emotion/jest/serializer'],
-  transform: {
-    '^.+\\.(js|jsx)$': 'babel-jest',
-    '^.+\\.(ts|tsx)$': 'ts-jest',
-  },
 };
diff --git a/package.json b/package.json
@@ -49,52 +49,53 @@
     "hosted-git-info": "^2.1.4"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.15.6",
-    "@babel/preset-typescript": "7.15.0",
-    "@commitlint/cli": "13.1.0",
-    "@commitlint/config-conventional": "13.1.0",
-    "@emotion/babel-plugin": "^11.3.0",
-    "@emotion/eslint-plugin": "^11.2.0",
-    "@emotion/jest": "^11.3.0",
-    "@preconstruct/cli": "2.1.4",
-    "@semantic-release/changelog": "^6.0.0",
-    "@semantic-release/commit-analyzer": "9.0.1",
-    "@semantic-release/github": "8.0.1",
-    "@semantic-release/npm": "8.0.0",
-    "@semantic-release/release-notes-generator": "10.0.2",
-    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "12.1.0",
-    "@types/jest": "27.0.2",
-    "@typescript-eslint/eslint-plugin": "4.31.2",
-    "@typescript-eslint/parser": "4.31.2",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "26.6.3",
+    "@babel/eslint-parser": "^7.18.2",
+    "@babel/preset-env": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@commitlint/cli": "17.0.3",
+    "@commitlint/config-conventional": "17.0.3",
+    "@emotion/babel-plugin": "^11.9.2",
+    "@emotion/eslint-plugin": "^11.7.0",
+    "@emotion/jest": "^11.9.3",
+    "@preconstruct/cli": "2.1.7",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/commit-analyzer": "9.0.2",
+    "@semantic-release/github": "8.0.5",
+    "@semantic-release/npm": "9.0.1",
+    "@semantic-release/release-notes-generator": "10.0.3",
+    "@swc/core": "^1.2.210",
+    "@swc/jest": "^0.2.21",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.3.0",
+    "@types/jest": "28.1.4",
+    "@typescript-eslint/eslint-plugin": "5.30.5",
+    "@typescript-eslint/parser": "5.30.5",
+    "babel-jest": "28.1.2",
+    "babel-preset-gatsby": "^2.18.0",
     "cz-conventional-changelog": "3.3.0",
     "docz": "2.3.1",
-    "eslint": "7.32.0",
-    "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-flowtype": "6.1.0",
-    "eslint-plugin-import": "2.24.2",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.26.0",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-testing-library": "4.12.4",
-    "husky": "^7.0.2",
-    "jest": "26.6.3",
-    "lint-staged": "11.1.2",
-    "prettier": "2.4.1",
-    "pretty-quick": "3.1.1",
-    "semantic-release": "18.0.0",
-    "stylelint": "13.13.1",
-    "ts-jest": "26.5.5",
-    "typescript": "4.4.3"
+    "eslint": "8.19.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-prettier": "4.2.1",
+    "husky": "^8.0.1",
+    "jest": "28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
+    "lint-staged": "13.0.3",
+    "prettier": "2.7.1",
+    "pretty-quick": "3.1.3",
+    "semantic-release": "19.0.3",
+    "stylelint": "14.9.1",
+    "ts-jest": "28.0.5",
+    "typescript": "4.7.4"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.1.0",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@emotion/css": "^11.9.0",
+    "@emotion/is-prop-valid": "^1.1.3",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@swc/helpers": "^0.4.3",
+    "gatsby-plugin-emotion": "^7.18.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/src/components/Col/Col.tsx b/src/components/Col/Col.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { Ref, ReactNode } from 'react';
 
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
@@ -29,6 +29,11 @@ export interface ColProps {
    */
   offset?: DefaultTheme['grid']['breakpoints'];
 
+  /**
+   * The ref to the HTML DOM element
+   */
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * The children nodes
    */
@@ -90,8 +95,12 @@ const offsetStyle = ({ theme, offset }: ColProps & StyleProps) =>
     `
   );
 
-const Col = styled('div', {
+const ColEl = styled('div', {
   shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'offset',
 })<ColProps>(baseStyle, sizeStyle, offsetStyle);
 
+const Col = React.forwardRef((props: ColProps, ref?: ColProps['ref']) => {
+  return <ColEl ref={ref} className="EmotionGrid-Col" {...props} />;
+});
+
 export default Col;
diff --git a/src/components/Col/__snapshots__/Col.test.tsx.snap b/src/components/Col/__snapshots__/Col.test.tsx.snap
@@ -92,7 +92,7 @@ exports[`Col should render with default styles 1`] = `
 }
 
 <div
-  class="emotion-0 emotion-1"
+  class="EmotionGrid-Col emotion-0"
 >
   Col
 </div>
@@ -280,7 +280,7 @@ exports[`Col should render with offset styles on breakpoint { xs: 1, sm: 2, md:
 }
 
 <div
-  class="emotion-0 emotion-1"
+  class="EmotionGrid-Col emotion-0"
 >
   Col
 </div>
@@ -468,7 +468,7 @@ exports[`Col should render with size styles on breakpoint { xs: 1, sm: 2, md: 3,
 }
 
 <div
-  class="emotion-0 emotion-1"
+  class="EmotionGrid-Col emotion-0"
 >
   Col
 </div>

diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
@@ -1,14 +1,11 @@
-import { ReactNode } from 'react';
+import React, { Ref, ReactNode } from 'react';
 
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
 import { config } from '../../config';
 import { responsive } from '../../utils';
 
-import { Row } from '../Row';
-import { Col } from '../Col';
-
 import { DefaultTheme, StyleProps } from '../../types/emotion';
 
 export interface ContainerProps {
@@ -22,6 +19,11 @@ export interface ContainerProps {
    */
   debug?: boolean;
 
+  /**
+   * The ref to the HTML DOM element
+   */
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * The children nodes
    */
@@ -64,12 +66,12 @@ const debugStyle = ({ theme, debug }: ContainerProps & StyleProps) => {
   return (
     debug &&
     css`
-      ${Row} {
+      .EmotionGrid-Row {
         label: row--debug;
         background: ${config(theme).grid.colors.blue}0D;
       }
 
-      ${Col} {
+      .EmotionGrid-Col {
         label: col--debug;
         background: ${config(theme).grid.colors.blue}0D;
         border: 1px solid ${config(theme).grid.colors.blue};
@@ -78,10 +80,18 @@ const debugStyle = ({ theme, debug }: ContainerProps & StyleProps) => {
   );
 };
 
-const Container = styled('div')<ContainerProps>(
+const ContainerEl = styled('div')<ContainerProps>(
   baseStyle,
   fluidStyle,
   debugStyle
 );
 
+const Container = React.forwardRef(
+  (props: ContainerProps, ref?: ContainerProps['ref']) => {
+    return (
+      <ContainerEl ref={ref} className="EmotionGrid-Container" {...props} />
+    );
+  }
+);
+
 export default Container;