From b67932fdc88d42446fdc18788da5dc4d858d7383 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 6 Mar 2019 23:52:15 +0800 Subject: [PATCH 1/5] Restore CRA svgr example --- .../cra-kitchen-sink/src/stories/cra-svgr.stories.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js b/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js index 044c8df8d416..69898bb866f3 100644 --- a/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js +++ b/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js @@ -1,7 +1,5 @@ -// FIXME: @igor-dv +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { ReactComponent as Logo } from '../logo.svg'; -// import React from 'react'; -// import { storiesOf } from '@storybook/react'; -// import { ReactComponent as Logo } from '../logo.svg'; -// -// storiesOf('CRA', module).add('Svgr', () => ); +storiesOf('CRA', module).add('Svgr', () => ); From f065fdcbeb151f1b466b1943211e93811712bcf7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 6 Mar 2019 23:53:12 +0800 Subject: [PATCH 2/5] Add SVG example for full-control-mode --- examples/official-storybook/package.json | 2 ++ .../stories/core/storybook-logo.svg | 1 + .../stories/core/webpack.stories.js | 9 +++++++++ examples/official-storybook/webpack.config.js | 4 ++++ yarn.lock | 14 ++++++++------ 5 files changed, 24 insertions(+), 6 deletions(-) create mode 100755 examples/official-storybook/stories/core/storybook-logo.svg create mode 100644 examples/official-storybook/stories/core/webpack.stories.js diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 4ac2842a0cf3..c466f9dc567a 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -36,6 +36,7 @@ "@storybook/node-logger": "5.1.0-alpha.0", "@storybook/react": "5.1.0-alpha.0", "@storybook/theming": "5.1.0-alpha.0", + "@svgr/webpack": "^4.1.0", "cors": "^2.8.5", "cross-env": "^5.2.0", "enzyme-to-json": "^3.3.5", @@ -52,6 +53,7 @@ "react-dom": "^16.8.3", "storybook-chromatic": "^1.2.6", "ts-loader": "^5.3.3", + "url-loader": "^1.1.2", "uuid": "^3.3.2", "webpack": "^4.29.6" } diff --git a/examples/official-storybook/stories/core/storybook-logo.svg b/examples/official-storybook/stories/core/storybook-logo.svg new file mode 100755 index 000000000000..6a7bc610ca2c --- /dev/null +++ b/examples/official-storybook/stories/core/storybook-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/official-storybook/stories/core/webpack.stories.js b/examples/official-storybook/stories/core/webpack.stories.js new file mode 100644 index 000000000000..47cbad7a41d9 --- /dev/null +++ b/examples/official-storybook/stories/core/webpack.stories.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { ReactComponent as Logo } from './storybook-logo.svg'; + +export default { + title: 'Core|Webpack', +}; + +export const svg = () => ; +svg.title = 'SVG Loader'; diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js index fe957caf62ce..91a0558f012f 100644 --- a/examples/official-storybook/webpack.config.js +++ b/examples/official-storybook/webpack.config.js @@ -6,6 +6,10 @@ module.exports = async ({ config }) => ({ module: { ...config.module, rules: [ + { + test: /\.svg$/, + use: ['@svgr/webpack', 'url-loader'], + }, ...config.module.rules, { test: /\.stories\.jsx?$/, diff --git a/yarn.lock b/yarn.lock index d219608bd193..3b65dec7e266 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2204,7 +2204,7 @@ merge-deep "^3.0.2" svgo "^1.1.1" -"@svgr/webpack@4.1.0", "@svgr/webpack@^4.0.3": +"@svgr/webpack@4.1.0", "@svgr/webpack@^4.0.3", "@svgr/webpack@^4.1.0": version "4.1.0" resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.1.0.tgz#20c88f32f731c7b1d4711045b2b993887d731c28" integrity sha512-d09ehQWqLMywP/PT/5JvXwPskPK9QCXUjiSkAHehreB381qExXf5JFCBWhfEyNonRbkIneCeYM99w+Ud48YIQQ== @@ -11136,11 +11136,12 @@ graphql-request@^1.5.0: dependencies: cross-fetch "2.2.2" -graphql@^0.13.2, graphql@^14.1.1: - version "0.13.2" - resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270" +graphql@^14.1.1: + version "14.1.1" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.1.1.tgz#d5d77df4b19ef41538d7215d1e7a28834619fac0" + integrity sha512-C5zDzLqvfPAgTtP8AUPIt9keDabrdRAqSWjj2OPRKrKxI9Fb65I36s1uCs1UUBFnSWTdO7hyHi7z1ZbwKMKF6Q== dependencies: - iterall "^1.2.1" + iterall "^1.2.2" grizzly@^3.0.3: version "3.0.4" @@ -12819,9 +12820,10 @@ istextorbinary@2.1.0: editions "^1.1.1" textextensions "1 || 2" -iterall@^1.2.1: +iterall@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7" + integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA== jasmine-core@~2.8.0: version "2.8.0" From e35bf9aa246611f4bc68c31e449000e43f3a8495 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 7 Mar 2019 00:21:04 +0800 Subject: [PATCH 3/5] Fix yarn.lock --- yarn.lock | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/yarn.lock b/yarn.lock index 3b65dec7e266..9460fc92b483 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11136,12 +11136,12 @@ graphql-request@^1.5.0: dependencies: cross-fetch "2.2.2" -graphql@^14.1.1: - version "14.1.1" - resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.1.1.tgz#d5d77df4b19ef41538d7215d1e7a28834619fac0" - integrity sha512-C5zDzLqvfPAgTtP8AUPIt9keDabrdRAqSWjj2OPRKrKxI9Fb65I36s1uCs1UUBFnSWTdO7hyHi7z1ZbwKMKF6Q== +graphql@^0.13.2, graphql@^14.1.1: + version "0.13.2" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270" + integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog== dependencies: - iterall "^1.2.2" + iterall "^1.2.1" grizzly@^3.0.3: version "3.0.4" @@ -12820,7 +12820,7 @@ istextorbinary@2.1.0: editions "^1.1.1" textextensions "1 || 2" -iterall@^1.2.2: +iterall@^1.2.1: version "1.2.2" resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7" integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA== From 429dc9b5a449bb7b46329e43247b969e05926f10 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 7 Mar 2019 14:38:51 +0800 Subject: [PATCH 4/5] Simplify webpack & try to fix jest --- examples/official-storybook/webpack.config.js | 2 +- jest.config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js index 91a0558f012f..56a3b58554c8 100644 --- a/examples/official-storybook/webpack.config.js +++ b/examples/official-storybook/webpack.config.js @@ -8,7 +8,7 @@ module.exports = async ({ config }) => ({ rules: [ { test: /\.svg$/, - use: ['@svgr/webpack', 'url-loader'], + use: ['@svgr/webpack'], }, ...config.module.rules, { diff --git a/jest.config.js b/jest.config.js index 448a752e3625..9392cd526fd1 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,7 +2,7 @@ module.exports = { cacheDirectory: '.cache/jest', clearMocks: true, moduleNameMapper: { - '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '\\.(svg|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/fileMock.js', '\\.(css|scss)$': '/__mocks__/styleMock.js', '\\.(md)$': '/__mocks__/htmlMock.js', From 23c20cfc4db05f2111129b6d553f69a34be6aa48 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 7 Mar 2019 15:12:29 +0800 Subject: [PATCH 5/5] More jest monkeying --- examples/official-storybook/jest.config.js | 17 +++++++++++++++++ .../tests/__snapshots__/storyshots.test.js.snap | 6 ++++++ jest.config.js | 8 ++------ 3 files changed, 25 insertions(+), 6 deletions(-) create mode 100644 examples/official-storybook/jest.config.js diff --git a/examples/official-storybook/jest.config.js b/examples/official-storybook/jest.config.js new file mode 100644 index 000000000000..b1ffc36fb83f --- /dev/null +++ b/examples/official-storybook/jest.config.js @@ -0,0 +1,17 @@ +const config = require('../../jest.config'); + +module.exports = { + ...config, + roots: [__dirname], + moduleNameMapper: { + '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '/__mocks__/fileMock.js', + '\\.(css|scss)$': '/__mocks__/styleMock.js', + '\\.(md)$': '/__mocks__/htmlMock.js', + }, + transform: { + ...config.transform, + '^.+\\.svg$': '/node_modules/react-scripts/config/jest/fileTransform.js', + }, + moduleDirectories: ['/node_modules', 'src'], +}; diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap index da4c2f46e456..4ec48bd2561f 100644 --- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap +++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap @@ -5259,6 +5259,12 @@ exports[`Storyshots Core|Scroll story with 100vh padding 2 1`] = ` `; +exports[`Storyshots Core|Webpack SVG Loader 1`] = ` + + storybook-logo.svg + +`; + exports[`Storyshots UI|Notifications/Item longText 1`] = ` .emotion-0 { display: block; diff --git a/jest.config.js b/jest.config.js index 9392cd526fd1..a854f336f7a7 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,7 +2,7 @@ module.exports = { cacheDirectory: '.cache/jest', clearMocks: true, moduleNameMapper: { - '\\.(svg|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/fileMock.js', '\\.(css|scss)$': '/__mocks__/styleMock.js', '\\.(md)$': '/__mocks__/htmlMock.js', @@ -17,13 +17,9 @@ module.exports = { '/examples/vue-kitchen-sink', '/examples/angular-cli', '/examples/preact-kitchen-sink', - ], - roots: [ - '/addons', - '/app', - '/lib', '/examples/official-storybook', ], + roots: ['/addons', '/app', '/lib'], transform: { '^.+\\.jsx?$': '/scripts/babel-jest.js', '^.+\\.tsx?$': '/node_modules/ts-jest',