From 593039f894ecdfa4d29aede1925556b7862d4920 Mon Sep 17 00:00:00 2001 From: EnzoVezzaro Date: Mon, 16 May 2022 12:11:43 -0400 Subject: [PATCH] Fix svgr in storybook & jest (#1428) * fix svg loader * added Logo component to be able to test storybook * added svg mock for svgr as suggested (still not working) * package cleanup * make svg moduleNameMapper match first * cleanup Co-authored-by: Matthias Kretschmann --- .jest/__mocks__/svgrMock.tsx | 10 + .jest/jest.config.js | 1 + .storybook/main.js | 33 ++- package-lock.json | 246 ------------------ package.json | 1 - .../index.module.css} | 0 .../@shared/atoms/Logo/index.stories.tsx | 20 ++ .../atoms/{Logo.tsx => Logo/index.tsx} | 10 +- 8 files changed, 55 insertions(+), 266 deletions(-) create mode 100644 .jest/__mocks__/svgrMock.tsx rename src/components/@shared/atoms/{Logo.module.css => Logo/index.module.css} (100%) create mode 100644 src/components/@shared/atoms/Logo/index.stories.tsx rename src/components/@shared/atoms/{Logo.tsx => Logo/index.tsx} (67%) diff --git a/.jest/__mocks__/svgrMock.tsx b/.jest/__mocks__/svgrMock.tsx new file mode 100644 index 000000000..84cc9f4f1 --- /dev/null +++ b/.jest/__mocks__/svgrMock.tsx @@ -0,0 +1,10 @@ +import React, { SVGProps } from 'react' + +const SvgrMock = React.forwardRef>( + (props, ref) => +) + +SvgrMock.displayName = 'SvgrMock' + +export const ReactComponent = SvgrMock +export default SvgrMock diff --git a/.jest/jest.config.js b/.jest/jest.config.js index d75f75d26..1facc2912 100644 --- a/.jest/jest.config.js +++ b/.jest/jest.config.js @@ -14,6 +14,7 @@ const customJestConfig = { moduleDirectories: ['node_modules', '/src'], testEnvironment: 'jest-environment-jsdom', moduleNameMapper: { + '\\.svg': '/.jest/__mocks__/svgrMock.tsx', // '^@/components/(.*)$': '/components/$1', '@shared(.*)$': '/src/components/@shared/$1', '@hooks/(.*)$': '/src/@hooks/$1', diff --git a/.storybook/main.js b/.storybook/main.js index e637cd097..6746ec101 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -14,21 +14,26 @@ module.exports = { ] // Mimic next.config.js webpack config - config.module.rules.push( - { - test: /\.svg$/, - issuer: /\.(tsx|ts)$/, - use: [ - { loader: require.resolve('@svgr/webpack'), options: { icon: true } } - ] - }, - { - test: /\.gif$/, - // yay for webpack 5 - // https://webpack.js.org/guides/asset-management/#loading-images - type: 'asset/resource' - } + config.module.rules.push({ + test: /\.gif$/, + // yay for webpack 5 + // https://webpack.js.org/guides/asset-management/#loading-images + type: 'asset/resource' + }) + + // Modify storybook's file-loader rule to avoid conflicts with svgr + const fileLoaderRule = config.module.rules.find( + (rule) => rule.test && rule.test.test('.svg') ) + fileLoaderRule.exclude = /\.svg$/ + + config.module.rules.push({ + test: /\.svg$/, + issuer: /\.(tsx|ts)$/, + use: [ + { loader: require.resolve('@svgr/webpack'), options: { icon: true } } + ] + }) const fallback = config.resolve.fallback || {} Object.assign(fallback, { diff --git a/package-lock.json b/package-lock.json index 7c7477ffb..be6e59427 100644 --- a/package-lock.json +++ b/package-lock.json @@ -106,7 +106,6 @@ "process": "^0.11.10", "serve": "^13.0.2", "stream-http": "^3.2.0", - "ts-jest": "^28.0.2", "tsconfig-paths-webpack-plugin": "^3.5.2", "typescript": "^4.6.4" }, @@ -15550,18 +15549,6 @@ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" }, - "node_modules/bs-logger": { - "version": "0.2.6", - "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz", - "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==", - "dev": true, - "dependencies": { - "fast-json-stable-stringify": "2.x" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/bs58": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz", @@ -27511,12 +27498,6 @@ "integrity": "sha1-rXvGpOZH15yXLhuA/u968VYmeHY=", "dev": true }, - "node_modules/lodash.memoize": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", - "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", - "dev": true - }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -35943,135 +35924,6 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "dev": true }, - "node_modules/ts-jest": { - "version": "28.0.2", - "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-28.0.2.tgz", - "integrity": "sha512-IOZMb3D0gx6IHO9ywPgiQxJ3Zl4ECylEFwoVpENB55aTn5sdO0Ptyx/7noNBxAaUff708RqQL4XBNxxOVjY0vQ==", - "dev": true, - "dependencies": { - "bs-logger": "0.x", - "fast-json-stable-stringify": "2.x", - "jest-util": "^28.0.0", - "json5": "2.x", - "lodash.memoize": "4.x", - "make-error": "1.x", - "semver": "7.x", - "yargs-parser": "^20.x" - }, - "bin": { - "ts-jest": "cli.js" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0" - }, - "peerDependencies": { - "@babel/core": ">=7.0.0-beta.0 <8", - "@types/jest": "^27.0.0", - "babel-jest": "^28.0.0", - "jest": "^28.0.0", - "typescript": ">=4.3" - }, - "peerDependenciesMeta": { - "@babel/core": { - "optional": true - }, - "@types/jest": { - "optional": true - }, - "babel-jest": { - "optional": true - }, - "esbuild": { - "optional": true - } - } - }, - "node_modules/ts-jest/node_modules/@jest/types": { - "version": "28.1.0", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-28.1.0.tgz", - "integrity": "sha512-xmEggMPr317MIOjjDoZ4ejCSr9Lpbt/u34+dvc99t7DS8YirW5rwZEhzKPC2BMUFkUhI48qs6qLUSGw5FuL0GA==", - "dev": true, - "dependencies": { - "@jest/schemas": "^28.0.2", - "@types/istanbul-lib-coverage": "^2.0.0", - "@types/istanbul-reports": "^3.0.0", - "@types/node": "*", - "@types/yargs": "^17.0.8", - "chalk": "^4.0.0" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0" - } - }, - "node_modules/ts-jest/node_modules/@types/yargs": { - "version": "17.0.10", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.10.tgz", - "integrity": "sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==", - "dev": true, - "dependencies": { - "@types/yargs-parser": "*" - } - }, - "node_modules/ts-jest/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/ts-jest/node_modules/jest-util": { - "version": "28.1.0", - "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-28.1.0.tgz", - "integrity": "sha512-qYdCKD77k4Hwkose2YBEqQk7PzUf/NSE+rutzceduFveQREeH6b+89Dc9+wjX9dAwHcgdx4yedGA3FQlU/qCTA==", - "dev": true, - "dependencies": { - "@jest/types": "^28.1.0", - "@types/node": "*", - "chalk": "^4.0.0", - "ci-info": "^3.2.0", - "graceful-fs": "^4.2.9", - "picomatch": "^2.2.3" - }, - "engines": { - "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0" - } - }, - "node_modules/ts-jest/node_modules/semver": { - "version": "7.3.7", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", - "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", - "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/ts-jest/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/ts-node": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.1.1.tgz", @@ -50652,15 +50504,6 @@ } } }, - "bs-logger": { - "version": "0.2.6", - "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz", - "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==", - "dev": true, - "requires": { - "fast-json-stable-stringify": "2.x" - } - }, "bs58": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz", @@ -60100,12 +59943,6 @@ "integrity": "sha1-rXvGpOZH15yXLhuA/u968VYmeHY=", "dev": true }, - "lodash.memoize": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", - "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", - "dev": true - }, "lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -66795,89 +66632,6 @@ } } }, - "ts-jest": { - "version": "28.0.2", - "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-28.0.2.tgz", - "integrity": "sha512-IOZMb3D0gx6IHO9ywPgiQxJ3Zl4ECylEFwoVpENB55aTn5sdO0Ptyx/7noNBxAaUff708RqQL4XBNxxOVjY0vQ==", - "dev": true, - "requires": { - "bs-logger": "0.x", - "fast-json-stable-stringify": "2.x", - "jest-util": "^28.0.0", - "json5": "2.x", - "lodash.memoize": "4.x", - "make-error": "1.x", - "semver": "7.x", - "yargs-parser": "^20.x" - }, - "dependencies": { - "@jest/types": { - "version": "28.1.0", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-28.1.0.tgz", - "integrity": "sha512-xmEggMPr317MIOjjDoZ4ejCSr9Lpbt/u34+dvc99t7DS8YirW5rwZEhzKPC2BMUFkUhI48qs6qLUSGw5FuL0GA==", - "dev": true, - "requires": { - "@jest/schemas": "^28.0.2", - "@types/istanbul-lib-coverage": "^2.0.0", - "@types/istanbul-reports": "^3.0.0", - "@types/node": "*", - "@types/yargs": "^17.0.8", - "chalk": "^4.0.0" - } - }, - "@types/yargs": { - "version": "17.0.10", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.10.tgz", - "integrity": "sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==", - "dev": true, - "requires": { - "@types/yargs-parser": "*" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "jest-util": { - "version": "28.1.0", - "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-28.1.0.tgz", - "integrity": "sha512-qYdCKD77k4Hwkose2YBEqQk7PzUf/NSE+rutzceduFveQREeH6b+89Dc9+wjX9dAwHcgdx4yedGA3FQlU/qCTA==", - "dev": true, - "requires": { - "@jest/types": "^28.1.0", - "@types/node": "*", - "chalk": "^4.0.0", - "ci-info": "^3.2.0", - "graceful-fs": "^4.2.9", - "picomatch": "^2.2.3" - } - }, - "semver": { - "version": "7.3.7", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", - "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", - "dev": true, - "requires": { - "lru-cache": "^6.0.0" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, "ts-node": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.1.1.tgz", diff --git a/package.json b/package.json index 75a984e19..9dce6cc87 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,6 @@ "process": "^0.11.10", "serve": "^13.0.2", "stream-http": "^3.2.0", - "ts-jest": "^28.0.2", "tsconfig-paths-webpack-plugin": "^3.5.2", "typescript": "^4.6.4" }, diff --git a/src/components/@shared/atoms/Logo.module.css b/src/components/@shared/atoms/Logo/index.module.css similarity index 100% rename from src/components/@shared/atoms/Logo.module.css rename to src/components/@shared/atoms/Logo/index.module.css diff --git a/src/components/@shared/atoms/Logo/index.stories.tsx b/src/components/@shared/atoms/Logo/index.stories.tsx new file mode 100644 index 000000000..b83f2fd20 --- /dev/null +++ b/src/components/@shared/atoms/Logo/index.stories.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' + +import Logo, { LogoProps } from '@shared/atoms/Logo' + +export default { + title: 'Component/@shared/atoms/Logo', + component: Logo +} as ComponentMeta + +const Template: ComponentStory = (args) => + +interface Props { + args: LogoProps +} + +export const Primary: Props = Template.bind({}) +Primary.args = { + noWordmark: true +} diff --git a/src/components/@shared/atoms/Logo.tsx b/src/components/@shared/atoms/Logo/index.tsx similarity index 67% rename from src/components/@shared/atoms/Logo.tsx rename to src/components/@shared/atoms/Logo/index.tsx index ef0eba0e0..91138f5cd 100644 --- a/src/components/@shared/atoms/Logo.tsx +++ b/src/components/@shared/atoms/Logo/index.tsx @@ -1,13 +1,13 @@ import React, { ReactElement } from 'react' import LogoAssetFull from '@oceanprotocol/art/logo/logo.svg' import LogoAsset from '@images/logo.svg' -import styles from './Logo.module.css' +import styles from './index.module.css' -export default function Logo({ - noWordmark -}: { +export interface LogoProps { noWordmark?: boolean -}): ReactElement { +} + +export default function Logo({ noWordmark }: LogoProps): ReactElement { return noWordmark ? ( ) : (