REFACTOR ensure so it warns users of missing theme properties

lib/theming/package.json

@@ -23,8 +23,13 @@
   "dependencies": {
     "@emotion/core": "^10.0.7",
     "@emotion/styled": "^10.0.5",
+    "@storybook/client-logger": "5.0.0-beta.3",
+    "common-tags": "^1.8.0",
+    "deep-object-diff": "^1.1.0",
     "emotion-theming": "^10.0.7",
     "global": "^4.3.2",
+    "lodash.isequal": "^4.5.0",
+    "lodash.mergewith": "^4.6.1",
     "memoizerific": "^1.11.3",
     "polished": "^2.3.3",
     "prop-types": "^15.6.2",

lib/theming/src/ensure.ts

@@ -1,35 +1,49 @@
+import { logger } from '@storybook/client-logger';
+
+import { deletedDiff } from 'deep-object-diff';
+import { stripIndent } from 'common-tags';
+
+import mergeWith from 'lodash.mergewith';
+import isEqual from 'lodash.isequal';
+
 import light from './themes/light';
 import { Theme } from './base';
 
-export const ensure = (input: any): Theme =>
-  !input
-    ? light
-    : {
-        base: input.base,
-        color: input.color || light.color,
-        background: input.background || light.background,
-        typography: input.typography || light.typography,
-        animation: input.animation || light.animation,
-        easing: input.easing || light.easing,
+// merge with concatenating arrays, but no duplicates
+const merge = (a: any, b: any) =>
+  mergeWith({}, a, b, (objValue: any, srcValue: any) => {
+    if (Array.isArray(srcValue) && Array.isArray(objValue)) {
+      srcValue.forEach(s => {
+        const existing = objValue.find(o => o === s || isEqual(o, s));
+        if (!existing) {
+          objValue.push(s);
+        }
+      });
 
-        input: input.input || light.input,
+      return objValue;
+    }
+    if (Array.isArray(objValue)) {
+      return objValue;
+    }
+    return undefined;
+  });
 
-        // UI
-        layoutMargin: input.layoutMargin || light.layoutMargin,
-        appBorderColor: input.appBorderColor || light.appBorderColor,
-        appBorderRadius: input.appBorderRadius || light.appBorderRadius,
+export const ensure = (input: any): Theme => {
+  if (!input) {
+    return light;
+  } else {
+    const missing = deletedDiff(light, input);
+    if (Object.keys(missing).length) {
+      logger.warn(
+        stripIndent`
+          Your theme is missing properties, you should update your theme!
 
-        // Toolbar default/active colors
-        barTextColor: input.barTextColor || light.barTextColor,
-        barSelectedColor: input.barSelectedColor || light.barSelectedColor,
-        barBg: input.barBg || light.barBg,
+          theme-data missing:
+        `,
+        missing
+      );
+    }
 
-        // Brand logo/text
-        brand: input.brand || light.brand,
-
-        code: input.code || light.code,
-
-        // Addon actions theme
-        // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
-        addonActionsTheme: input.addonActionsTheme || light.addonActionsTheme,
-      };
+    return merge(light, input);
+  }
+};

lib/theming/src/typings.d.ts

@@ -1,2 +1,4 @@
 // todo the following packages need definition files or a TS migration
 declare module 'react-inspector';
+declare module 'lodash.mergewith';
+declare module 'lodash.isequal';

package.json

@@ -66,6 +66,7 @@
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@types/common-tags": "^1.8.0",
     "@types/jest": "^24.0.6",
     "@types/node": "^10.12.19",
     "@types/react": "^16.7.22",

yarn.lock

@@ -1933,6 +1933,11 @@
   version "0.1.30"
   resolved "https://registry.yarnpkg.com/@types/clone/-/clone-0.1.30.tgz#e7365648c1b42136a59c7d5040637b3b5c83b614"
 
+"@types/common-tags@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@types/common-tags/-/common-tags-1.8.0.tgz#79d55e748d730b997be5b7fce4b74488d8b26a6b"
+  integrity sha512-htRqZr5qn8EzMelhX/Xmx142z218lLyGaeZ3YR8jlze4TATRU9huKKvuBmAJEW4LCC4pnY1N6JAm6p85fMHjhg==
+
 "@types/core-js@^2.5.0":
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-2.5.0.tgz#35cc282488de6f10af1d92902899a3b8ca3fbc47"
@@ -6988,6 +6993,11 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
+deep-object-diff@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
+  integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
+
 deepmerge@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.0.0.tgz#ca7903b34bfa1f8c2eab6779280775a411bfc6ba"