feat: dark theme (#8)

* fix: options & deps bump

* feat: dark theme

* chore: storybook 5.0.6

package.json

@@ -39,17 +39,17 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@babel/core": "7.3.4",
-    "@stoplight/ui-kit": "^1.46.1",
-    "@storybook/addon-actions": "5.0.3",
-    "@storybook/addon-knobs": "5.0.3",
-    "@storybook/addon-links": "5.0.3",
-    "@storybook/addon-options": "5.0.3",
-    "@storybook/addons": "5.0.3",
-    "@storybook/core": "5.0.3",
-    "@storybook/react": "5.0.3",
+    "@babel/core": "7.4.0",
+    "@stoplight/ui-kit": "^1.49.1",
+    "@storybook/addon-actions": "5.0.6",
+    "@storybook/addon-knobs": "5.0.6",
+    "@storybook/addon-links": "5.0.6",
+    "@storybook/addon-options": "5.0.6",
+    "@storybook/addons": "5.0.6",
+    "@storybook/core": "5.0.6",
+    "@storybook/react": "5.0.6",
     "@types/storybook__addon-actions": "3.4.x",
-    "@types/storybook__addon-knobs": "4.0.4",
+    "@types/storybook__addon-knobs": "4.0.5",
     "@types/storybook__addon-links": "3.3.x",
     "@types/storybook__addon-options": "4.0.x",
     "@types/storybook__react": "4.0.x",
@@ -58,18 +58,18 @@
     "webpack": "4.29.6"
   },
   "devDependencies": {
-    "@stoplight/scripts": "5.x.x",
+    "@stoplight/scripts": "^5.1.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.11.2",
     "enzyme-to-json": "^3.3.5",
     "jest": "24.5.0",
     "jest-enzyme": "^7.0.2",
     "lodash": "4.17.11",
-    "react": "16.8.4",
-    "react-dom": "16.8.4",
-    "ts-jest": "24.0.0",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "ts-jest": "24.0.1",
     "tslint": "5.14.0",
-    "typescript": "3.3.4000"
+    "typescript": "3.4.1"
   },
   "lint-staged": {
     "*.{ts,tsx}$": [

src/addons/withThemes/index.tsx

@@ -8,6 +8,11 @@ interface IThemeContainer {
   themes: string[];
 }
 
+const darkTheme = {
+  backgroundColor: '#111',
+  color: '#fff',
+};
+
 export const withThemes = ({ ThemeProvider, themes, zones }: any) =>
   makeDecorator({
     name: 'withThemes',
@@ -39,7 +44,11 @@ const ThemeContainer: React.FunctionComponent<IThemeContainer> = ({ channel, the
     [channel, setThemeName]
   );
 
-  return React.cloneElement(children, {
-    theme: { base: themeName },
-  });
+  return (
+    <div style={{ ...(themeName === 'dark' ? darkTheme : null), minHeight: '100vh', padding: '5px 10px' }}>
+      {React.cloneElement(children, {
+        theme: { base: themeName },
+      })}
+    </div>
+  );
 };

src/config.ts

@@ -12,8 +12,6 @@ addDecorator(
     showSearchBox: false,
     addonPanelInRight: true,
     sortStoriesByKind: true,
-    hierarchySeparator: /\//,
-    hierarchyRootSeparator: /:/,
     selectedAddonPanel: undefined,
   })
 );