Merge branch 'pr/lifeiscontent/4925' into tech/overhaul-ui

# Conflicts: # addons/a11y/package.json # addons/actions/package.json # addons/backgrounds/package.json # addons/cssresources/package.json # addons/events/package.json # addons/info/package.json # addons/info/src/__snapshots__/index.test.js.snap # addons/jest/package.json # addons/knobs/package.json # addons/notes/package.json # addons/viewport/package.json # app/react/package.json # examples/cra-kitchen-sink/package.json # examples/official-storybook/config.js # examples/official-storybook/package.json # lib/components/package.json # lib/components/src/layout/desktop.js # lib/components/src/layout/index.js # lib/core/package.json # lib/ui/package.json # lib/ui/src/modules/ui/components/search_box.js # lib/ui/src/modules/ui/components/shortcuts_help.js # lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot # lib/ui/src/modules/ui/components/stories_panel/__snapshots__/text_filter.stories.storyshot # lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot # lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js # package.json # yarn.lock
storybookjs · Dec 12, 2018 · 2fae294 · 2fae294
2 parents 51c176c + b8be2f4
commit 2fae294
Show file tree

Hide file tree

Showing 33 changed files with 2,346 additions and 2,415 deletions.
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/styled": "^0.10.6",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/client-logger": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",

diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -20,12 +20,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/core": "^0.13.1",
-    "@emotion/provider": "^0.11.2",
-    "@emotion/styled": "^0.10.6",
+    "@emotion/core": "^10.0.2",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",
     "@storybook/core-events": "4.1.0-alpha.11",
+    "emotion-theming": "^10.0.2",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.11",

diff --git a/addons/actions/src/components/ActionLogger/index.js b/addons/actions/src/components/ActionLogger/index.js
@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Inspector from 'react-inspector';
-import { withCSSContext } from '@emotion/core';
+import { withTheme } from 'emotion-theming';
 
 import { ActionBar, ActionButton } from '@storybook/components';
 
 import { Actions, Action, Wrapper, InspectorContainer, Countwrap, Counter } from './style';
 
-const ActionLogger = withCSSContext(({ actions, onClear }, { theme }) => (
+const ActionLogger = withTheme(({ actions, onClear, theme }) => (
   <Wrapper>
     <Actions>
       {actions.map(action => (

diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
@@ -24,8 +24,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/core": "^0.13.1",
-    "@emotion/styled": "^0.10.6",
+    "@emotion/core": "^10.0.2",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",
     "@storybook/core-events": "4.1.0-alpha.11",

diff --git a/addons/backgrounds/src/__tests__/__snapshots__/Swatch.js.snap b/addons/backgrounds/src/__tests__/__snapshots__/Swatch.js.snap
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Swatch should render the value of the swatch and set it to be the background 1`] = `
-<ForwardRef
+<Styled(button)
   onClick={[Function]}
   onMouseDown={[Function]}
 >
-  <ForwardRef
+  <Styled(div)
     bg="bar"
   />
-  <ForwardRef>
-    <ForwardRef>
+  <Styled(div)>
+    <Styled(h4)>
       foo
       :
-    </ForwardRef>
-    <ForwardRef>
+    </Styled(h4)>
+    <Styled(h4)>
       <em>
         bar
       </em>
-    </ForwardRef>
-  </ForwardRef>
-</ForwardRef>
+    </Styled(h4)>
+  </Styled(div)>
+</Styled(button)>
 `;
diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json
@@ -24,7 +24,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/styled": "0.10.6",
+    "@emotion/styled": "10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",
     "@storybook/core-events": "4.1.0-alpha.11",

diff --git a/addons/events/package.json b/addons/events/package.json
@@ -23,7 +23,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/styled": "^0.10.6",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/core-events": "4.1.0-alpha.11",
     "format-json": "^1.0.3",

diff --git a/addons/info/package.json b/addons/info/package.json
@@ -21,7 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/styled": "^0.10.6",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/client-logger": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",

diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
diff --git a/addons/jest/package.json b/addons/jest/package.json
@@ -27,7 +27,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/styled": "^0.10.6",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",
     "global": "^4.3.2",

diff --git a/addons/knobs/package.json b/addons/knobs/package.json
@@ -21,7 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/styled": "^0.10.6",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",
     "@storybook/core-events": "4.1.0-alpha.11",

diff --git a/addons/knobs/src/components/types/Color.js b/addons/knobs/src/components/types/Color.js
@@ -79,7 +79,7 @@ class ColorType extends React.Component {
         <Swatch style={colorStyle} />
         {displayColorPicker ? (
           <Popover
-            innerRef={e => {
+            ref={e => {
               this.popover = e;
             }}
           >

diff --git a/addons/notes/package.json b/addons/notes/package.json
@@ -23,7 +23,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/styled": "^0.10.6",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",
     "@storybook/core-events": "4.1.0-alpha.11",

diff --git a/addons/viewport/package.json b/addons/viewport/package.json
@@ -20,8 +20,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/core": "^0.13.1",
-    "@emotion/styled": "^0.10.6",
+    "@emotion/core": "^10.0.2",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",
     "@storybook/core-events": "4.1.0-alpha.11",

diff --git a/app/react/package.json b/app/react/package.json
@@ -28,7 +28,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@emotion/styled": "^0.10.6",
+    "@emotion/styled": "^10.0.2",
     "@storybook/core": "4.1.0-alpha.11",
     "@storybook/node-logger": "4.1.0-alpha.11",
     "@svgr/webpack": "^4.0.3",

diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
@@ -248,7 +248,7 @@ storiesOf('Button', module)
 
 We use [emotion](https://emotion.sh) for styling, AND we provide a theme which can be set by the user!
 
-We highly recommend you also use emotion to style your components for storybook, but it's not a requirement. You can use inline styles or another css-in-js lib. You can receive the theme as a prop by using the `withCSSContext` hoc from emotion. [Read more about theming](/configurations/theming).
+We highly recommend you also use emotion to style your components for storybook, but it's not a requirement. You can use inline styles or another css-in-js lib. You can receive the theme as a prop by using the `withTheme` hoc from emotion. [Read more about theming](/configurations/theming).
 
 ## Re-using existing components
 

diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
@@ -18,7 +18,6 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
-    "@emotion/snapshot-serializer": "^0.8.2",
     "@storybook/addon-a11y": "4.1.0-alpha.11",
     "@storybook/addon-actions": "4.1.0-alpha.11",
     "@storybook/addon-backgrounds": "4.1.0-alpha.11",
@@ -38,6 +37,7 @@
     "enzyme-adapter-react-16": "^1.6.0",
     "enzyme-to-json": "^3.3.4",
     "jest": "^23.6.0",
+    "jest-emotion": "^10.0.2",
     "react-scripts": "^2.1.0"
   }
 }
diff --git a/examples/cra-kitchen-sink/src/storyshots.test.js b/examples/cra-kitchen-sink/src/storyshots.test.js
@@ -1,5 +1,5 @@
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
-import emotionSerializer from '@emotion/snapshot-serializer';
+import { createSerializer as emotionCreateSerializer } from 'jest-emotion';
 import path from 'path';
 import { render as renderer, configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -14,5 +14,5 @@ initStoryshots({
   test: multiSnapshotWithOptions({
     renderer,
   }),
-  snapshotSerializers: [createSerializer(), emotionSerializer],
+  snapshotSerializers: [createSerializer(), emotionCreateSerializer()],
 });
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ThemeProvider from '@emotion/provider';
+import { ThemeProvider } from 'emotion-theming';
 import styled from '@emotion/styled';
 import { configure, addDecorator, addParameters } from '@storybook/react';
 import { themes } from '@storybook/components';

diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
@@ -12,10 +12,8 @@
     "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ -s built-storybooks"
   },
   "devDependencies": {
-    "@emotion/core": "^0.13.1",
-    "@emotion/provider": "^0.11.2",
-    "@emotion/snapshot-serializer": "^0.8.2",
-    "@emotion/styled": "^0.10.6",
+    "@emotion/core": "^10.0.2",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addon-a11y": "4.1.0-alpha.11",
     "@storybook/addon-actions": "4.1.0-alpha.11",
     "@storybook/addon-backgrounds": "4.1.0-alpha.11",
@@ -40,13 +38,15 @@
     "@storybook/react": "4.1.0-alpha.11",
     "cors": "^2.8.4",
     "cross-env": "^5.2.0",
+    "emotion-theming": "^10.0.2",
     "enzyme-to-json": "^3.3.4",
     "eventemitter3": "^3.1.0",
     "express": "^4.16.3",
     "express-graphql": "^0.7.1",
     "format-json": "^1.0.3",
     "global": "^4.3.2",
     "graphql": "^14.0.2",
+    "jest-emotion": "^10.0.2",
     "paths.macro": "^2.0.2",
     "prop-types": "^15.6.2",
     "react-chromatic": "^0.8.4",

diff --git a/examples/official-storybook/tests/storyshots.test.js b/examples/official-storybook/tests/storyshots.test.js
@@ -1,5 +1,5 @@
 import path from 'path';
-import emotionSerializer from '@emotion/snapshot-serializer';
+import { createSerializer as emotionCreateSerializer } from 'jest-emotion';
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
 import { render as renderer } from 'enzyme';
 import { createSerializer } from 'enzyme-to-json';
@@ -12,5 +12,5 @@ initStoryshots({
   test: multiSnapshotWithOptions({
     renderer,
   }),
-  snapshotSerializers: [createSerializer(), emotionSerializer],
+  snapshotSerializers: [createSerializer(), emotionCreateSerializer()],
 });
diff --git a/jest.config.js b/jest.config.js
@@ -22,7 +22,7 @@ module.exports = {
     '<rootDir>/lib',
     '<rootDir>/examples/official-storybook',
   ],
-  snapshotSerializers: ['@emotion/snapshot-serializer'],
+  snapshotSerializers: ['jest-emotion'],
   transform: {
     '^.+\\.jsx?$': '<rootDir>/scripts/babel-jest.js',
   },

diff --git a/lib/components/package.json b/lib/components/package.json
@@ -22,12 +22,12 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
-    "@emotion/core": "^0.13.1",
-    "@emotion/provider": "^0.11.2",
-    "@emotion/styled": "^0.10.6",
+    "@emotion/core": "^10.0.2",
+    "@emotion/styled": "^10.0.2",
     "@reach/router": "^1.1.1",
     "@storybook/core-events": "4.1.0-alpha.11",
     "@storybook/addons": "4.1.0-alpha.11",
+    "emotion-theming": "^10.0.2",
     "global": "^4.3.2",
     "immer": "^1.5.0",
     "js-beautify": "^1.8.6",

diff --git a/lib/core/package.json b/lib/core/package.json
@@ -23,9 +23,8 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
-    "@emotion/core": "^0.13.1",
-    "@emotion/provider": "^0.11.2",
-    "@emotion/styled": "^0.10.6",
+    "@emotion/core": "^10.0.2",
+    "@emotion/styled": "^10.0.2",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/channel-postmessage": "4.1.0-alpha.11",
     "@storybook/client-logger": "4.1.0-alpha.11",
@@ -49,6 +48,7 @@
     "detect-port": "^1.2.3",
     "dotenv-webpack": "^1.5.7",
     "ejs": "^2.6.1",
+    "emotion-theming": "^10.0.2",
     "eventemitter3": "^3.1.0",
     "express": "^4.16.3",
     "file-loader": "^2.0.0",

diff --git a/lib/ui/package.json b/lib/ui/package.json
@@ -21,15 +21,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/core": "^0.13.1",
-    "@emotion/provider": "^0.11.2",
-    "@emotion/styled": "^0.10.6",
+    "@emotion/core": "^10.0.2",
+    "@emotion/styled": "^10.0.2",
     "@reach/router": "^1.1.1",
     "@storybook/addons": "4.1.0-alpha.11",
     "@storybook/client-logger": "4.1.0-alpha.11",
     "@storybook/components": "4.1.0-alpha.11",
     "@storybook/core-events": "4.1.0-alpha.11",
-    "emotion": "^9.2.8",
+    "emotion-theming": "^10.0.2",
     "eventemitter3": "^3.1.0",
     "fast-deep-equal": "^2.0.1",
     "fuse.js": "^3.3.0",

diff --git a/lib/ui/scripts/createDlls.js b/lib/ui/scripts/createDlls.js
@@ -21,14 +21,14 @@ const run = () =>
       entry: {
         storybook_ui: [
           '@emotion/core',
-          '@emotion/provider',
           '@emotion/styled',
           '@storybook/addons',
           '@storybook/components',
           '@storybook/core-events',
           'airbnb-js-shims',
           'core-js/es6/symbol',
           'core-js/fn/array/iterator',
+          'emotion-theming',
           'prop-types',
           'react-dom',
           'react',

diff --git a/lib/ui/src/components/layout/container.js b/lib/ui/src/components/layout/container.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { withCSSContext } from '@emotion/core';
+import { withTheme } from 'emotion-theming';
 import * as persistance from './persist';
 
 import { Draggable, Handle } from './draggers';
@@ -480,9 +480,10 @@ Layout.propTypes = {
   viewMode: PropTypes.oneOf(['components', 'info']),
   theme: PropTypes.shape({}).isRequired,
 };
+Layout.defaultProps = {
+  viewMode: undefined,
+};
 
-const themed = Comp => withCSSContext((props, { theme }) => <Comp {...props} theme={theme} />);
-
-const ThemedLayout = themed(Layout);
+const ThemedLayout = withTheme(Layout);
 
 export { ThemedLayout as Layout };