Merge pull request #5535 from gaetanmaisse/ts-migration/addon-backgro…

…unds

Migrate addon backgrounds to TS

addons/backgrounds/package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "author": "jbaxleyiii",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -30,13 +30,14 @@
     "@storybook/core-events": "5.0.0-rc.4",
     "@storybook/theming": "5.0.0-rc.4",
     "core-js": "^2.6.2",
-    "eventemitter3": "^3.1.0",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
-    "prop-types": "^15.6.2",
     "react": "^16.8.1",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/util-deprecate": "^1.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

addons/backgrounds/src/components/ColorIcon.tsx

@@ -0,0 +1,9 @@
+import { styled } from '@storybook/theming';
+
+export const ColorIcon = styled.span(({ background }: { background: string }) => ({
+  borderRadius: '1rem',
+  display: 'block',
+  height: '1rem',
+  width: '1rem',
+  background,
+}));

addons/backgrounds/src/components/index.ts

@@ -0,0 +1 @@
+export * from './ColorIcon';

addons/backgrounds/src/constants.js → addons/backgrounds/src/constants.ts

@@ -1,7 +1,7 @@
 export const ADDON_ID = 'storybook/background';
 export const PARAM_KEY = 'backgrounds';
 
-export default {
+export const EVENTS = {
   SET: `${ADDON_ID}:set`,
   UNSET: `${ADDON_ID}:unset`,
 };

addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -0,0 +1,165 @@
+import React, { Component, Fragment } from 'react';
+import memoize from 'memoizerific';
+
+import { Global } from '@storybook/theming';
+
+import { SET_STORIES } from '@storybook/core-events';
+
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+
+import { PARAM_KEY } from '../constants';
+import { ColorIcon } from '../components';
+import { BackgroundConfig, BackgroundSelectorItem } from '../models';
+
+const iframeId = 'storybook-preview-background';
+
+const createBackgroundSelectorItem = memoize(1000)(
+  (
+    id: string,
+    name: string,
+    value: string,
+    hasSwatch: boolean,
+    change: (arg: { selected: string; expanded: boolean }) => void
+  ): BackgroundSelectorItem => ({
+    id: id || name,
+    title: name,
+    onClick: () => {
+      change({ selected: value, expanded: false });
+    },
+    value,
+    right: hasSwatch ? <ColorIcon background={value} /> : undefined,
+  })
+);
+
+const getSelectedBackgroundColor = (
+  list: BackgroundConfig[],
+  currentSelectedValue: string
+): string => {
+  if (!list.length) {
+    return 'transparent';
+  }
+
+  if (currentSelectedValue === 'transparent') {
+    return currentSelectedValue;
+  }
+
+  if (list.find(i => i.value === currentSelectedValue)) {
+    return currentSelectedValue;
+  }
+
+  if (list.find(i => i.default)) {
+    return list.find(i => i.default).value;
+  }
+
+  return 'transparent';
+};
+
+const getDisplayableState = memoize(10)(
+  (props: BackgroundToolProps, state: BackgroundToolState, change) => {
+    const data = props.api.getCurrentStoryData();
+    const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
+
+    const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected);
+
+    let availableBackgroundSelectorItems: BackgroundSelectorItem[] = [];
+
+    if (selectedBackgroundColor !== 'transparent') {
+      availableBackgroundSelectorItems.push(
+        createBackgroundSelectorItem('reset', 'Clear background', 'transparent', false, change)
+      );
+    }
+
+    if (list.length) {
+      availableBackgroundSelectorItems = [
+        ...availableBackgroundSelectorItems,
+        ...list.map(({ name, value }) =>
+          createBackgroundSelectorItem(null, name, value, true, change)
+        ),
+      ];
+    }
+
+    return {
+      items: availableBackgroundSelectorItems,
+      selectedBackgroundColor,
+    };
+  }
+);
+
+interface BackgroundToolProps {
+  api: {
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+    getCurrentStoryData(): any;
+  };
+}
+
+interface BackgroundToolState {
+  items: BackgroundSelectorItem[];
+  selected: string;
+  expanded: boolean;
+}
+
+export class BackgroundSelector extends Component<BackgroundToolProps, BackgroundToolState> {
+  private listener = () => {
+    this.setState({ selected: null });
+  };
+
+  constructor(props: BackgroundToolProps) {
+    super(props);
+
+    this.state = {
+      items: [],
+      selected: null,
+      expanded: false,
+    };
+  }
+
+  componentDidMount() {
+    const { api } = this.props;
+    api.on(SET_STORIES, this.listener);
+  }
+
+  componentWillUnmount() {
+    const { api } = this.props;
+    api.off(SET_STORIES, this.listener);
+  }
+
+  change = (args: { selected: string; expanded: boolean }) => this.setState(args);
+
+  render() {
+    const { expanded } = this.state;
+    const { items, selectedBackgroundColor } = getDisplayableState(
+      this.props,
+      this.state,
+      this.change
+    );
+
+    return items.length ? (
+      <Fragment>
+        {selectedBackgroundColor ? (
+          <Global
+            styles={{
+              [`#${iframeId}`]: {
+                background: selectedBackgroundColor,
+              },
+            }}
+          />
+        ) : null}
+        <WithTooltip
+          placement="top"
+          trigger="click"
+          tooltipShown={expanded}
+          onVisibilityChange={(newVisibility: boolean) =>
+            this.setState({ expanded: newVisibility })
+          }
+          tooltip={<TooltipLinkList links={items} />}
+          closeOnClick
+        >
+          <IconButton key="background" title="Backgrounds">
+            <Icons icon="photo" />
+          </IconButton>
+        </WithTooltip>
+      </Fragment>
+    ) : null;
+  }
+}

addons/backgrounds/src/containers/index.ts

@@ -0,0 +1 @@
+export * from './BackgroundSelector';