oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

Fix svgr in storybook & jest (#1428)

Browse Source 
* 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 <m@kretschmann.io>
This commit is contained in:
EnzoVezzaro 2022-05-16 12:11:43 -04:00 committed by GitHub
parent a5819bac58
commit 593039f894
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 55 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.jest/__mocks__/svgrMock.tsx Normal file
View File

@ -0,0 +1,10 @@
import React, { SVGProps } from 'react'
const SvgrMock = React.forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
(props, ref) => <svg ref={ref} {...props} />
)
SvgrMock.displayName = 'SvgrMock'
export const ReactComponent = SvgrMock
export default SvgrMock

1
.jest/jest.config.js
View File

@ -14,6 +14,7 @@ const customJestConfig = {
moduleDirectories: ['node_modules', '<rootDir>/src'],
testEnvironment: 'jest-environment-jsdom',
moduleNameMapper: {
'\\.svg': '<rootDir>/.jest/__mocks__/svgrMock.tsx',
// '^@/components/(.*)$': '<rootDir>/components/$1',
'@shared(.*)$': '<rootDir>/src/components/@shared/$1',
'@hooks/(.*)$': '<rootDir>/src/@hooks/$1',

25
.storybook/main.js
View File

@ -14,21 +14,26 @@ module.exports = {
]
// Mimic next.config.js webpack config
config.module.rules.push(
{
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 } }
]
},
{
test: /\.gif$/,
// yay for webpack 5
// https://webpack.js.org/guides/asset-management/#loading-images
type: 'asset/resource'
}
)
})
const fallback = config.resolve.fallback || {}
Object.assign(fallback, {

246
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"
},

0
src/components/@shared/atoms/Logo.module.css → src/components/@shared/atoms/Logo/index.module.css
View File

20
src/components/@shared/atoms/Logo/index.stories.tsx Normal file
View File

@ -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<typeof Logo>
const Template: ComponentStory<typeof Logo> = (args) => <Logo {...args} />
interface Props {
args: LogoProps
}
export const Primary: Props = Template.bind({})
Primary.args = {
noWordmark: true
}

10
src/components/@shared/atoms/Logo.tsx → src/components/@shared/atoms/Logo/index.tsx
View File

@ -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 ? (
<LogoAsset className={styles.logo} />
) : (