fix(react-ui): 🐛 updated to latest beta (#77)

Co-authored-by: ggurkal <[email protected]>
storyofams · Jul 19, 2021 · 561b6d6 · 561b6d6 · vercel · Jul 19, 2021
1 parent aff556e
commit 561b6d6
Show file tree

Hide file tree

Showing 23 changed files with 5,182 additions and 6,353 deletions.
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -4,7 +4,7 @@ import ProviderDecorator from "./ProviderDecorator";
 import { viewPorts } from './viewports';
 import * as nextImage from 'next/image';
 import "../public/static/fonts/stylesheet.css";
-import { Box } from 'rebass/styled-components';
+import { Box } from '@storyofams/react-ui';
 
 export const decorators = [ProviderDecorator]
 

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,13 +12,12 @@
     "**/yarn-error.log": true,
     "**/next-env.d.ts": true,
     "**/yarn.lock": true,
-    // ".babelrc": true,
+    ".babelrc": true,
     ".cz-config.js": true,
     ".eslintignore": true,
     ".gitignore": true,
     ".prettierignore": true,
     ".releaserc.json": true,
-    "jest.config.ts": true
   },
   "search.exclude": {
     "**/.next": true,

diff --git a/jest.config.ts b/jest.config.ts
@@ -4,7 +4,7 @@ export default {
   testEnvironment: 'jsdom',
   roots: ['<rootDir>/src'],
   transform: {
-    '^.+\\.tsx?$': 'babel-jest',
+    '^.+\\.tsx?$': 'ts-jest',
   },
   moduleNameMapper: {
     '^~(.*)$': '<rootDir>/src/$1',
@@ -14,5 +14,6 @@ export default {
     'src/lib', // a utility folder
     __dirname, // the root directory
   ],
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  setupFilesAfterEnv: ['./setup-jest.ts'],
+  coverageDirectory: './coverage',
 } as Config.InitialOptions;
diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,3 @@
-const path = require('path');
-
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
@@ -37,7 +35,7 @@ module.exports = withBundleAnalyzer(
       config.resolve.plugins = [
         new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
       ];
-      
+
       config.module.rules.push({
         test: /\.svg$/,
         use: [

diff --git a/package.json b/package.json
@@ -20,107 +20,110 @@
     "cy:open": "cypress open"
   },
   "dependencies": {
-    "@next/bundle-analyzer": "^10.0.6",
-    "@reach/alert": "0.13.2",
-    "@reach/checkbox": "0.13.2",
-    "@reach/dialog": "0.13.2",
-    "@sentry/browser": "6.0.0",
-    "@sentry/integrations": "6.0.0",
-    "@sentry/node": "6.0.0",
-    "@storyofams/next-api-decorators": "1.2.0",
-    "@storyofams/react-helpers": "0.3.6",
-    "@storyofams/react-ui": "1.2.0-beta.1",
+    "@next/bundle-analyzer": "11.0.1",
+    "@reach/alert": "0.15.3",
+    "@reach/checkbox": "0.15.3",
+    "@reach/dialog": "0.15.3",
+    "@sentry/browser": "6.9.0",
+    "@sentry/integrations": "6.9.0",
+    "@sentry/node": "6.9.0",
+    "@storyofams/next-api-decorators": "1.5.5",
+    "@storyofams/react-helpers": "0.3.8",
+    "@storyofams/react-ui": "1.2.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
     "@svgr/webpack": "5.5.0",
     "@zeit/next-source-maps": "0.0.3",
     "axios": "0.21.1",
-    "date-fns": "2.16.1",
+    "date-fns": "2.22.1",
     "fontfaceobserver": "2.1.0",
-    "framer-motion": "^3.10.2",
-    "next": "10.0.5",
-    "next-seo": "4.17.0",
+    "framer-motion": "4.1.17",
+    "next": "11.0.1",
+    "next-seo": "4.26.0",
     "object-fit-images": "3.2.4",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-flatpickr": "^3.10.7",
-    "react-hook-form": "6.14.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-flatpickr": "3.10.7",
+    "react-hook-form": "7.11.1",
     "react-id-generator": "3.0.1",
-    "react-lazyload": "3.1.0",
-    "react-select": "3.2.0",
-    "sitemap": "6.3.5",
-    "styled-components": "5.2.1",
+    "react-lazyload": "3.2.0",
+    "react-select": "4.3.1",
+    "sitemap": "7.0.0",
+    "styled-components": "5.3.0",
     "styled-system": "5.1.5",
-    "swr": "0.4.0",
-    "yup": "0.32.8"
+    "swr": "0.5.6",
+    "system-props": "0.20.0",
+    "yup": "0.32.9"
   },
   "devDependencies": {
-    "@babel/core": "7.12.10",
-    "@babel/plugin-proposal-decorators": "^7.12.13",
-    "@babel/runtime-corejs2": "7.12.5",
-    "@commitlint/cli": "11.0.0",
-    "@commitlint/config-conventional": "11.0.0",
-    "@jest/types": "26.6.2",
+    "@babel/core": "7.14.6",
+    "@babel/plugin-proposal-decorators": "7.14.5",
+    "@babel/runtime-corejs2": "7.14.6",
+    "@commitlint/cli": "12.1.4",
+    "@commitlint/config-conventional": "12.1.4",
+    "@jest/types": "27.0.6",
     "@semantic-release/changelog": "5.0.1",
-    "@sentry/webpack-plugin": "1.14.0",
-    "@storybook/addon-actions": "6.1.14",
-    "@storybook/addon-controls": "6.1.14",
-    "@storybook/addon-docs": "6.1.14",
-    "@storybook/addon-links": "6.1.14",
-    "@storybook/addon-viewport": "6.1.14",
-    "@storybook/addons": "6.1.14",
-    "@storybook/react": "6.1.14",
-    "@storyofams/eslint-config-ams": "1.1.2",
-    "@testing-library/cypress": "^7.0.4",
-    "@testing-library/jest-dom": "5.11.9",
-    "@testing-library/react": "11.2.3",
-    "@types/jest": "26.0.20",
-    "@types/node": "14.14.22",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "@types/react-select": "3.1.2",
-    "@types/rebass": "4.0.7",
-    "@types/styled-components": "5.1.7",
-    "@types/styled-system": "5.1.10",
-    "@types/yup": "0.29.11",
-    "@typescript-eslint/eslint-plugin": "4.13.0",
-    "@typescript-eslint/parser": "4.13.0",
+    "@sentry/webpack-plugin": "1.16.0",
+    "@storybook/addon-actions": "6.3.4",
+    "@storybook/addon-controls": "6.3.4",
+    "@storybook/addon-docs": "6.3.4",
+    "@storybook/addon-links": "6.3.4",
+    "@storybook/addon-viewport": "6.3.4",
+    "@storybook/addons": "6.3.4",
+    "@storybook/react": "6.3.4",
+    "@storyofams/eslint-config-ams": "1.1.4",
+    "@testing-library/cypress": "7.0.6",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "12.0.0",
+    "@types/jest": "26.0.24",
+    "@types/node": "16.3.3",
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.9",
+    "@types/react-select": "4.0.17",
+    "@types/rebass": "4.0.9",
+    "@types/styled-components": "5.1.11",
+    "@types/styled-system": "5.1.12",
+    "@types/yup": "0.29.13",
+    "@typescript-eslint/eslint-plugin": "4.28.3",
+    "@typescript-eslint/parser": "4.28.3",
     "awesome-typescript-loader": "5.2.1",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.2",
-    "babel-plugin-parameter-decorator": "^1.0.16",
-    "babel-plugin-styled-components": "1.12.0",
-    "babel-plugin-transform-typescript-metadata": "^0.3.1",
+    "babel-plugin-parameter-decorator": "1.0.16",
+    "babel-plugin-styled-components": "1.13.2",
+    "babel-plugin-transform-typescript-metadata": "0.3.2",
     "babel-preset-react-app": "10.0.0",
-    "cypress": "^6.5.0",
-    "cypress-hmr-restarter": "^2.0.1",
-    "cz-customizable": "git+https://github.com/storyofams/cz-customizable.git#6.3.1",
-    "eslint": "7.18.0",
-    "eslint-config-prettier": "7.1.0",
+    "cypress": "7.7.0",
+    "cypress-hmr-restarter": "2.0.2",
+    "cz-customizable": "git+https://github.com/storyofams/cz-customizable.git#v6.3.2",
+    "eslint": "7.31.0",
+    "eslint-config-next": "^11.0.1",
+    "eslint-config-prettier": "8.3.0",
     "eslint-import-resolver-alias": "1.1.2",
-    "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-cypress": "2.11.3",
+    "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-mdx": "1.8.2",
-    "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-mdx": "1.14.1",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
-    "fork-ts-checker-webpack-plugin": "6.1.0",
-    "husky": "4.3.8",
-    "jest": "26.6.3",
-    "lint-staged": "10.5.3",
-    "node-mocks-http": "1.10.0",
-    "prettier": "2.2.1",
+    "fork-ts-checker-webpack-plugin": "6.2.12",
+    "husky": "7.0.1",
+    "jest": "27.0.6",
+    "jest-axe": "5.0.1",
+    "lint-staged": "11.0.1",
+    "node-mocks-http": "1.10.1",
+    "prettier": "2.3.2",
     "react-docgen-typescript-loader": "3.7.2",
-    "react-select-event": "5.1.0",
-    "react-test-renderer": "17.0.1",
-    "semantic-release": "17.3.3",
-    "ts-jest": "26.4.4",
-    "ts-loader": "8.0.14",
-    "ts-node": "9.1.1",
-    "tsconfig-paths-webpack-plugin": "3.3.0",
-    "typescript": "4.1.3",
-    "typescript-coverage-report": "0.4.0"
+    "react-select-event": "5.3.0",
+    "react-test-renderer": "17.0.2",
+    "semantic-release": "17.4.4",
+    "ts-jest": "27.0.3",
+    "ts-loader": "9.2.3",
+    "ts-node": "10.1.0",
+    "tsconfig-paths-webpack-plugin": "3.5.1",
+    "typescript": "4.3.5",
+    "typescript-coverage-report": "0.6.0"
   },
   "typeCoverage": {
     "atLeast": 90
@@ -140,12 +143,6 @@
       "path": "node_modules/cz-customizable"
     }
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "lint-staged": {
     "**/*.+(js|jsx|ts|tsx|mdx)": [
       "eslint --fix"

diff --git a/setup-jest.ts b/setup-jest.ts
@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import 'jest-axe/extend-expect';
diff --git a/src/__tests__/pages/api/sitemap.test.ts b/src/__tests__/pages/api/sitemap.test.ts
@@ -3,33 +3,36 @@ import { createMocks } from 'node-mocks-http';
 import sitemapHandler, { Sitemap } from '~pages/api/sitemap';
 
 describe('[api] sitemap', () => {
-  it('should return a sitemap', async (done) => {
-    const { req, res } = createMocks(undefined, { eventEmitter: EventEmitter });
+  it('should return a sitemap', (done) => {
+    const { req, res } = createMocks(
+      { url: '/api/sitemap' },
+      { eventEmitter: EventEmitter },
+    );
     const lastmod = new Date().toISOString();
 
     jest
       .spyOn<any, string>(Sitemap.prototype, 'fetchMySitemapData')
       .mockImplementation(() => [{ url: 'http://test.com', lastmod }]);
 
-    await sitemapHandler(req as any, res as any);
-
-    res.on('end', () => {
-      expect(res._getStatusCode()).toBe(200);
-      expect(res._getHeaders()).toHaveProperty(
-        'cache-control',
-        's-maxage=3600, stale-while-revalidate',
-      );
-      expect(res._getHeaders()).toHaveProperty('content-type', 'text/xml');
-      expect(res._getData()).toContain('<loc>http://test.com/</loc>');
-      expect(res._getData()).toContain(`<lastmod>${lastmod}</lastmod>`);
-      done();
-    });
-
-    jest.restoreAllMocks();
+    (sitemapHandler(req as any, res as any) as Promise<void>)
+      .then(() => {
+        res.on('end', () => {
+          expect(res._getStatusCode()).toBe(200);
+          expect(res._getHeaders()).toHaveProperty(
+            'cache-control',
+            's-maxage=3600, stale-while-revalidate',
+          );
+          expect(res._getHeaders()).toHaveProperty('content-type', 'text/xml');
+          expect(res._getData()).toContain('<loc>http://test.com/</loc>');
+          expect(res._getData()).toContain(`<lastmod>${lastmod}</lastmod>`);
+          done();
+        });
+      })
+      .finally(() => jest.restoreAllMocks());
   });
 
   it('should fail gracefully', async () => {
-    const { req, res } = createMocks();
+    const { req, res } = createMocks({ url: '/api/sitemap' });
 
     jest
       .spyOn<any, string>(Sitemap.prototype, 'fetchMySitemapData')

diff --git a/src/components/common/Image/image.stories.tsx b/src/components/common/Image/image.stories.tsx
@@ -29,14 +29,14 @@ export const LazyLoadStressTest = (args) => (
       The dimensions must be specified for this to work. So either height+width,
       flex-basis etc.. or a placeholder with the same dimensions
     </h1>
-    <Stack space={3} flexDirection="column" mt={2}>
+    <Stack space={3} flexDirection="column" mt="2">
       {array.map((i) => (
         <Image
           key={i}
           width="80px"
           height="100%"
           src="https://res.cloudinary.com/demo/image/upload/w_1500/woman.png"
-          placeholder="https://res.cloudinary.com/demo/image/upload/w_20/woman.png"
+          placeholder="blur"
         />
       ))}
     </Stack>

diff --git a/src/components/common/Image/index.tsx b/src/components/common/Image/index.tsx
@@ -1,4 +1,4 @@
-import { Box, System } from '@storyofams/react-ui';
+import { Box, SystemProps } from '@storyofams/react-ui';
 import { pick, omit } from '@styled-system/props';
 import NextImage, { ImageProps as NextImageProps } from 'next/image';
 import { HeightProps, WidthProps } from 'styled-system';
@@ -25,7 +25,7 @@ const getHighestValue = (value: any): number | string => {
 };
 
 export type ImageProps = Omit<NextImageProps, 'layout' | 'width' | 'height'> &
-  Omit<System, 'width' | 'height'> &
+  Omit<SystemProps, 'width' | 'height'> &
   (
     | {
         layout: 'fill';
@@ -54,13 +54,15 @@ export const Image = (props: ImageProps) => {
   if (props.layout === 'fill') {
     return (
       <Box {...imageProps} sx={{ position: 'relative' }}>
+        {/** @ts-ignore **/}
         <NextImage layout="fill" {...nextImageProps} />
       </Box>
     );
   }
 
   return (
     <Box {...imageProps}>
+      {/** @ts-ignore **/}
       <NextImage
         height={getHighestValue(props.width)}
         width={getHighestValue(props.width)}

diff --git a/src/components/common/Providers/index.tsx b/src/components/common/Providers/index.tsx
@@ -4,7 +4,6 @@ import { ThemeProvider } from 'styled-components';
 import theme from '~styles/theme';
 
 // All global context providers
-
 export const Providers: FC = ({ children }) => {
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import '@testing-library/jest-dom';
		import 'jest-axe/extend-expect';