From b5b4deb7b17b77bc2c28d6fd10886ba531eb6ebe Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Sat, 13 Jul 2019 01:12:09 +0200
Subject: [PATCH] MOVE grid functionality to background addon

---
 addons/backgrounds/src/constants.ts           |   2 +
 .../src/containers/GridSelector.tsx           |  42 +++++++
 addons/backgrounds/src/register.tsx           |  14 ++-
 lib/ui/src/components/preview/background.js   | 110 ------------------
 lib/ui/src/components/preview/iframe.js       |   3 +-
 lib/ui/src/components/preview/preview.js      |  60 ++++------
 6 files changed, 76 insertions(+), 155 deletions(-)
 create mode 100644 addons/backgrounds/src/containers/GridSelector.tsx
 delete mode 100644 lib/ui/src/components/preview/background.js

diff --git a/addons/backgrounds/src/constants.ts b/addons/backgrounds/src/constants.ts
index 8154ba04725..b01ec4c5269 100644
--- a/addons/backgrounds/src/constants.ts
+++ b/addons/backgrounds/src/constants.ts
@@ -1,4 +1,6 @@
 export const ADDON_ID = 'storybook/background';
+export const BACKGROUND = `${ADDON_ID}/background`;
+export const GRID = `${ADDON_ID}/grid`;
 export const PARAM_KEY = 'backgrounds';
 
 export const EVENTS = {
diff --git a/addons/backgrounds/src/containers/GridSelector.tsx b/addons/backgrounds/src/containers/GridSelector.tsx
new file mode 100644
index 00000000000..5663dda589c
--- /dev/null
+++ b/addons/backgrounds/src/containers/GridSelector.tsx
@@ -0,0 +1,42 @@
+import React, { FunctionComponent } from 'react';
+
+import { useAddonState } from '@storybook/api';
+import { Global } from '@storybook/theming';
+import { Icons, IconButton } from '@storybook/components';
+
+import { GRID } from '../constants';
+
+const iframeId = 'storybook-preview-iframe';
+
+export const GridSelector: FunctionComponent = () => {
+  const [state, setState] = useAddonState<boolean>(GRID);
+
+  return (
+    <IconButton
+      key="background"
+      active={state}
+      title="Change the background of the preview"
+      onClick={() => setState(!state)}
+    >
+      <Icons icon="grid" />
+      {state ? (
+        <Global
+          styles={{
+            [`#${iframeId}`]: {
+              backgroundSize: '100px 100px, 100px 100px, 20px 20px, 20px 20px',
+              backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
+              backgroundBlendMode: 'difference',
+              backgroundImage: [
+                'linear-gradient(rgba(130, 130, 130,0.5) 1px,transparent 1px)',
+                'linear-gradient(90deg,rgb(130, 130, 130,0.5) 1px,transparent 1px)',
+                'linear-gradient(rgba(130, 130, 130, 0.25) 1px,transparent 1px)',
+                'linear-gradient(90deg,rgba(130, 130, 130, 0.25) 1px,transparent 1px)',
+              ].join(','),
+              // `linear-gradient(black 1px, transparent 1px), linear-gradient(90deg, black 1px, transparent 1px), linear-gradient(rgba(0,0,0,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.3) 1px, transparent 1px)`,
+            },
+          }}
+        />
+      ) : null}
+    </IconButton>
+  );
+};
diff --git a/addons/backgrounds/src/register.tsx b/addons/backgrounds/src/register.tsx
index 7dde13f9e16..1ad620622e1 100644
--- a/addons/backgrounds/src/register.tsx
+++ b/addons/backgrounds/src/register.tsx
@@ -1,14 +1,20 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { addons, types } from '@storybook/addons';
 
-import { ADDON_ID } from './constants';
+import { ADDON_ID, BACKGROUND, GRID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';
+import { GridSelector } from './containers/GridSelector';
 
 addons.register(ADDON_ID, api => {
-  addons.add(ADDON_ID, {
+  addons.add(BACKGROUND, {
     title: 'Backgrounds',
     type: types.TOOL,
     match: ({ viewMode }) => viewMode === 'story',
-    render: () => <BackgroundSelector api={api} />,
+    render: () => (
+      <Fragment>
+        <BackgroundSelector api={api} />
+        <GridSelector />
+      </Fragment>
+    ),
   });
 });
diff --git a/lib/ui/src/components/preview/background.js b/lib/ui/src/components/preview/background.js
deleted file mode 100644
index aad35b97a87..00000000000
--- a/lib/ui/src/components/preview/background.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { Component } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-
-const Context = React.createContext();
-
-class Provider extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-
-  state = {
-    grid: false,
-    value: 'transparent',
-  };
-
-  setValue = value => this.setState({ value });
-
-  setGrid = grid => this.setState({ grid });
-
-  render() {
-    const { setValue, setGrid } = this;
-    const { children } = this.props;
-    const { value, grid } = this.state;
-
-    return (
-      <Context.Provider value={{ value, setValue, grid, setGrid }}>{children}</Context.Provider>
-    );
-  }
-}
-
-const { Consumer } = Context;
-
-function createGridStyles(cellSize) {
-  const cellSizeDoubled = cellSize * 2;
-  const cellSizeSquared = cellSize ** 2;
-
-  const gridSVGEncoded = encodeURIComponent(
-    renderToStaticMarkup(
-      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <pattern id="smallGrid" width={cellSize} height={cellSize} patternUnits="userSpaceOnUse">
-            <path
-              d={`M ${cellSize} 0 L 0 0 0 ${cellSize}`}
-              fill="none"
-              stroke="gray"
-              strokeWidth="0.5"
-            />
-          </pattern>
-          <pattern
-            id="grid"
-            width={cellSizeSquared}
-            height={cellSizeSquared}
-            patternUnits="userSpaceOnUse"
-          >
-            <rect width={cellSizeSquared} height={cellSizeSquared} fill="url(#smallGrid)" />
-            <path
-              d={`M ${cellSizeSquared} 0 L 0 0 0 ${cellSizeSquared}`}
-              fill="none"
-              stroke="gray"
-              strokeWidth="1"
-            />
-          </pattern>
-        </defs>
-        <rect width="100%" height="100%" fill="url(#grid)" />
-      </svg>
-    )
-  );
-
-  return {
-    backgroundImage: `url("data:image/svg+xml,${gridSVGEncoded}")`,
-    backgroundSize: `${cellSizeSquared}px ${cellSizeSquared}px, ${cellSizeSquared}px ${cellSizeSquared}px, ${cellSizeDoubled}px ${cellSizeDoubled}px, ${cellSizeDoubled}px ${cellSizeDoubled}px`,
-    backgroundPosition: '-2px -2px',
-    mixBlendMode: 'difference',
-  };
-}
-
-const Grid = styled.div(
-  {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-  },
-  ({ theme }) => createGridStyles(theme.background.gridCellSize)
-);
-
-const Background = styled.div(
-  {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    minHeight: '100%',
-    transition: 'background .1s linear',
-    iframe: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      border: '0 none',
-    },
-  },
-  ({ theme }) => ({ background: theme.background.content })
-);
-
-export { Grid, Background, Consumer as BackgroundConsumer, Provider as BackgroundProvider };
diff --git a/lib/ui/src/components/preview/iframe.js b/lib/ui/src/components/preview/iframe.js
index ce2567fde7d..2f934f04c62 100644
--- a/lib/ui/src/components/preview/iframe.js
+++ b/lib/ui/src/components/preview/iframe.js
@@ -11,7 +11,8 @@ const StyledIframe = styled.iframe({
   height: '100%',
   width: '100%',
   border: '0 none',
-  transition: 'background .3s',
+  transition: 'all .3s, background-position 0s',
+  backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
 });
 
 export class IFrame extends Component {
diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
index 9381ab65f03..dbbf46926d7 100644
--- a/lib/ui/src/components/preview/preview.js
+++ b/lib/ui/src/components/preview/preview.js
@@ -16,7 +16,6 @@ import { Toolbar } from './toolbar';
 import * as S from './components';
 
 import { ZoomProvider, ZoomConsumer, Zoom } from './zoom';
-import { Grid, Background, BackgroundProvider, BackgroundConsumer } from './background';
 
 import { IFrame } from './iframe';
 
@@ -121,23 +120,6 @@ const getTools = memoize(10)(
           </Fragment>
         ),
       },
-      {
-        match: p => p.viewMode === 'story',
-        render: () => (
-          <BackgroundConsumer>
-            {({ setGrid, grid }) => (
-              <IconButton
-                active={!!grid}
-                key="grid"
-                onClick={() => setGrid(!grid)}
-                title="Toggle background grid"
-              >
-                <Icons icon="grid" />
-              </IconButton>
-            )}
-          </BackgroundConsumer>
-        ),
-      },
     ]);
 
     const extraTools = getElementList(getElements, types.TOOLEXTRA, [
@@ -294,28 +276,26 @@ class Preview extends Component {
     );
 
     return (
-      <BackgroundProvider>
-        <ZoomProvider>
-          <Fragment>
-            {id === 'main' && (
-              <Helmet key="description">
-                <title>{description ? `${description} ⋅ ` : ''}Storybook</title>
-              </Helmet>
-            )}
-            <Toolbar key="toolbar" shown={options.isToolshown} border>
-              <Fragment key="left">{left}</Fragment>
-              <Fragment key="right">{right}</Fragment>
-            </Toolbar>
-            <S.FrameWrap key="frame" offset={toolbarHeight}>
-              {panels.map(p => (
-                <Fragment key={p.id || p.key}>
-                  {p.render({ active: p.match({ storyId, viewMode, location, path }) })}
-                </Fragment>
-              ))}
-            </S.FrameWrap>
-          </Fragment>
-        </ZoomProvider>
-      </BackgroundProvider>
+      <ZoomProvider>
+        <Fragment>
+          {id === 'main' && (
+            <Helmet key="description">
+              <title>{description ? `${description} ⋅ ` : ''}Storybook</title>
+            </Helmet>
+          )}
+          <Toolbar key="toolbar" shown={options.isToolshown} border>
+            <Fragment key="left">{left}</Fragment>
+            <Fragment key="right">{right}</Fragment>
+          </Toolbar>
+          <S.FrameWrap key="frame" offset={toolbarHeight}>
+            {panels.map(p => (
+              <Fragment key={p.id || p.key}>
+                {p.render({ active: p.match({ storyId, viewMode, location, path }) })}
+              </Fragment>
+            ))}
+          </S.FrameWrap>
+        </Fragment>
+      </ZoomProvider>
     );
   }
 }