Add babel styled components plugin

Dockerfile

@@ -42,7 +42,7 @@ RUN yarn install --frozen-lockfile --pure-lockfile && npm rebuild node-sass
 COPY . .
 
 # Webpack if prod
-RUN if [ "${PRODUCTION}" = "true" ] ; then ./node_modules/.bin/webpack --env.NODE_ENV=production ; fi
+RUN if [ "${PRODUCTION}" = "true" ] ; then ./node_modules/.bin/webpack --mode=production; fi
 
 # Environment variables, override plugins path for customization
 ENV QUERYBOOK_PLUGIN=/opt/querybook/plugins

babel.config.js

@@ -1,47 +1,58 @@
-module.exports = {
-    presets: [
-        '@babel/preset-react',
-        [
-            '@babel/preset-typescript',
-            {
-                isTSX: true,
-                allExtensions: true,
-            },
-        ],
-        [
-            '@babel/preset-env',
-            {
-                // modules: false,
-                targets: {
-                    node: 'current',
+module.exports = (api) => {
+    const isProd = api.env('production');
+
+    return {
+        presets: [
+            '@babel/preset-react',
+            [
+                '@babel/preset-typescript',
+                {
+                    isTSX: true,
+                    allExtensions: true,
                 },
-            },
-        ],
-    ],
-    plugins: [
-        [
-            '@babel/plugin-proposal-decorators',
-            {
-                legacy: true,
-            },
+            ],
+            [
+                '@babel/preset-env',
+                {
+                    // modules: false,
+                    targets: {
+                        node: 'current',
+                    },
+                },
+            ],
         ],
-        '@babel/plugin-proposal-class-properties',
-        '@babel/plugin-proposal-nullish-coalescing-operator',
-        '@babel/plugin-proposal-optional-chaining',
-        [
-            'babel-plugin-transform-imports',
-            {
-                lodash: {
-                    transform: 'lodash/${member}',
-                    preventFullImport: true,
+        plugins: [
+            [
+                '@babel/plugin-proposal-decorators',
+                {
+                    legacy: true,
+                },
+            ],
+            '@babel/plugin-proposal-class-properties',
+            '@babel/plugin-proposal-nullish-coalescing-operator',
+            '@babel/plugin-proposal-optional-chaining',
+            [
+                'babel-plugin-transform-imports',
+                {
+                    lodash: {
+                        transform: 'lodash/${member}',
+                        preventFullImport: true,
+                    },
+                    'react-virtualized': {
+                        transform: 'react-virtualized/dist/es/${member}',
+                        preventFullImport: true,
+                    },
                 },
-                'react-virtualized': {
-                    transform: 'react-virtualized/dist/es/${member}',
-                    preventFullImport: true,
+            ],
+            'react-hot-loader/babel',
+            [
+                'babel-plugin-styled-components',
+                {
+                    pure: true,
+                    displayName: !isProd,
                 },
-            },
+            ],
         ],
-        'react-hot-loader/babel',
-    ],
-    sourceMaps: true,
+        sourceMaps: true,
+    };
 };

docs_website/docs/admin_guide/custom_app_name.md

@@ -11,7 +11,7 @@ To do so, rebuild the Webpack files with the environment variable `QUERYBOOK_APP
 ```Dockerfile
 FROM querybook:latest
 
-RUN QUERYBOOK_APPNAME=Example ./node_modules/.bin/webpack --env.NODE_ENV=production
+RUN QUERYBOOK_APPNAME=Example ./node_modules/.bin/webpack --mode=production
 ```
 
 The website served by this docker image will show "Welcome to Example" on the homepage with the browser title as "Example".

package.json

@@ -8,7 +8,7 @@
         "build": "npx webpack",
         "storybook": "STORYBOOK_USER=${USER} start-storybook -s ./querybook/static:/static -p 6006",
         "build-storybook": "build-storybook",
-        "dev": "webpack-dev-server --mode development --open --hot",
+        "dev": "webpack-dev-server --mode=development --open --hot",
         "lint": "eslint 'querybook/webapp/*/**/*.{ts,tsx}' --quiet --fix",
         "tsc-check": "tsc --noEmit"
     },
@@ -103,6 +103,7 @@
         "yup": "^0.27.0"
     },
     "devDependencies": {
+        "babel-plugin-styled-components": "^1.12.0",
         "@babel/plugin-proposal-class-properties": "^7.12.1",
         "@babel/plugin-proposal-decorators": "^7.12.12",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",

querybook/scripts/run_test

@@ -7,7 +7,7 @@ run_python_unit_test() {
 
 run_webpack_test() {
     echo 'Start running webpack >>>>>>>>>>>>>>>>>>>>>>>>>>>>'
-    ./node_modules/.bin/webpack --env.NODE_ENV=production
+    ./node_modules/.bin/webpack --mode=production
     if [ $? -ne 0 ]; then
         echo "Webpack test failed"
         exit 1

querybook/webapp/__tests__/ui/__snapshots__/Box.test.js.snap

@@ -2,15 +2,15 @@
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
 <div
-  className="sc-bdfBwQ bciwx Box"
+  className="Box-sc-11jncwz-0 UciDk Box"
 >
   Test
 </div>
 `;
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <div
-  className="sc-bdfBwQ bciwx Box"
+  className="Box-sc-11jncwz-0 UciDk Box"
 >
   Test
 </div>

querybook/webapp/__tests__/ui/__snapshots__/Center.test.js.snap

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
-<styled.div>
-  <styled.div>
+<Center__CenterDivContainer>
+  <Center__CenterDiv>
     Test
-  </styled.div>
-</styled.div>
+  </Center__CenterDiv>
+</Center__CenterDivContainer>
 `;
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <div
-  className="sc-bdfBwQ itbNMb"
+  className="Center__CenterDivContainer-sc-1kqp0n6-0 hFbxlS"
 >
   <div
-    className="sc-gsTCUz fMCZYS"
+    className="Center__CenterDiv-sc-1kqp0n6-1 kKQJv"
   >
     Test
   </div>

querybook/webapp/__tests__/ui/__snapshots__/Column.test.js.snap

@@ -2,28 +2,28 @@
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
 <div
-  className="sc-bdfBwQ iEvDpo Columns"
+  className="Column__Columns-sl2jp4-0 gOWWVh Columns"
 >
-  <styled.div>
+  <Column>
     Test
-  </styled.div>
-  <styled.div>
+  </Column>
+  <Column>
     Test
-  </styled.div>
+  </Column>
 </div>
 `;
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <div
-  className="sc-bdfBwQ iEvDpo Columns"
+  className="Column__Columns-sl2jp4-0 gOWWVh Columns"
 >
   <div
-    className="sc-gsTCUz vuYDo Column"
+    className="Column-sl2jp4-1 gozZXJ Column"
   >
     Test
   </div>
   <div
-    className="sc-gsTCUz vuYDo Column"
+    className="Column-sl2jp4-1 gozZXJ Column"
   >
     Test
   </div>

querybook/webapp/__tests__/ui/__snapshots__/Container.test.js.snap

@@ -4,11 +4,11 @@ exports[`matches enzyme snapshots matches snapshot 1`] = `
 <div
   className="TestContainer Container"
 >
-  <styled.div
+  <FullHeight
     className="Container-content"
   >
     Test
-  </styled.div>
+  </FullHeight>
 </div>
 `;
 
@@ -17,7 +17,7 @@ exports[`matches test renderer snapshot serializes the styles 1`] = `
   className="TestContainer Container"
 >
   <div
-    className="sc-bdfBwQ cSFrRC Container-content"
+    className="FullHeight-p6umsy-0 kFdkFT Container-content"
   >
     Test
   </div>

querybook/webapp/__tests__/ui/__snapshots__/Content.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
 <div
-  className="sc-bdfBwQ Content"
+  className="Content-sc-13ypr6e-0 Content"
   dangerouslySetInnerHTML={
     Object {
       "__html": "<p>test</p>",
@@ -13,7 +13,7 @@ exports[`matches enzyme snapshots matches snapshot 1`] = `
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <div
-  className="sc-bdfBwQ Content"
+  className="Content-sc-13ypr6e-0 Content"
   dangerouslySetInnerHTML={
     Object {
       "__html": "<p>test</p>",

querybook/webapp/__tests__/ui/__snapshots__/DisabledSection.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`matches enzyme snapshots matches snapshot - false 1`] = `
 <div
-  className="sc-bdfBwQ fQYtYk"
+  className="DisabledSection-dp9deb-0 jsfwHA"
   disabled={false}
 >
   <input />
@@ -11,15 +11,15 @@ exports[`matches enzyme snapshots matches snapshot - false 1`] = `
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
 <div
-  className="sc-bdfBwQ fRRYli"
+  className="DisabledSection-dp9deb-0 bvmtDu"
 >
   <input />
 </div>
 `;
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <div
-  className="sc-bdfBwQ fRRYli"
+  className="DisabledSection-dp9deb-0 bvmtDu"
 >
   <input />
 </div>

querybook/webapp/__tests__/ui/__snapshots__/Divider.test.js.snap

@@ -2,12 +2,12 @@
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
 <hr
-  className="sc-bdfBwQ fVVgFx"
+  className="Divider-sc-1si0xbl-0 jSzksP"
 />
 `;
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <hr
-  className="sc-bdfBwQ fVVgFx"
+  className="Divider-sc-1si0xbl-0 jSzksP"
 />
 `;

querybook/webapp/__tests__/ui/__snapshots__/ErrorPage.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
-<styled.div
+<FullHeight
   className="ErrorPage"
 >
   <Center
@@ -41,7 +41,7 @@ exports[`matches enzyme snapshots matches snapshot 1`] = `
       </span>
     </Title>
   </Center>
-</styled.div>
+</FullHeight>
 `;
 
 exports[`matches enzyme snapshots matches snapshot 2`] = `

querybook/webapp/__tests__/ui/__snapshots__/Form.test.js.snap

@@ -7,7 +7,7 @@ exports[`matches enzyme snapshots matches snapshot 1`] = `
 `;
 
 exports[`matches enzyme snapshots matches snapshot 2`] = `
-<styled.div
+<FormWrapper__StyledFormWrapper
   errorFontSize="var(--small-text-size)"
   fontSize="var(--text-size)"
   sectionFontSize="var(--med-text-size)"

querybook/webapp/__tests__/ui/__snapshots__/FullHeight.test.js.snap

@@ -2,15 +2,15 @@
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
 <div
-  className="sc-bdfBwQ cSFrRC TestFullHeight"
+  className="FullHeight-p6umsy-0 kFdkFT TestFullHeight"
 >
   Test
 </div>
 `;
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <div
-  className="sc-bdfBwQ cSFrRC TestFullHeight"
+  className="FullHeight-p6umsy-0 kFdkFT TestFullHeight"
 >
   Test
 </div>

querybook/webapp/__tests__/ui/__snapshots__/KeyboardKey.test.js.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
-<styled.span>
+<KeyboardKey__StyledKeyboardKey>
   test
-</styled.span>
+</KeyboardKey__StyledKeyboardKey>
 `;
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <span
-  className="sc-bdfBwQ gEkjil KeyboardKey mr4"
+  className="KeyboardKey__StyledKeyboardKey-sc-1o6e5rh-0 howSmK KeyboardKey mr4"
 >
   test
 </span>

querybook/webapp/__tests__/ui/__snapshots__/Level.test.js.snap

@@ -2,18 +2,18 @@
 
 exports[`matches enzyme snapshots matches snapshot 1`] = `
 <div
-  className="sc-bdfBwQ ftYXGo Level horizontal-space-between "
+  className="Level-qauoxs-0 jimMja Level horizontal-space-between "
 >
-  <styled.div />
+  <Level__LevelItem />
 </div>
 `;
 
 exports[`matches test renderer snapshot serializes the styles 1`] = `
 <div
-  className="sc-bdfBwQ ftYXGo Level horizontal-space-between "
+  className="Level-qauoxs-0 jimMja Level horizontal-space-between "
 >
   <div
-    className="sc-gsTCUz LevelItem  flex-row"
+    className="Level__LevelItem-qauoxs-1 LevelItem  flex-row"
   />
 </div>
 `;