v1.1.1: Resolve #10

.storybook/addons.ts

@@ -0,0 +1 @@
+import "../src/register";

.storybook/config.js → .storybook/config.ts

@@ -1,10 +1,9 @@
-import {addDecorator, configure} from '@storybook/react';
-import * as React from "react";
-import {withThemesProvider} from "../dist/src/index";
+import {addDecorator, configure} from "@storybook/react";
+import {withThemesProvider} from "../src";
 
 const defaultTheme = {
   name: "DEFAULT",
-  backgroundColor: 'azure',
+  backgroundColor: "azure",
   textColor: "dimgrey",
   borderRadius: "30px",
 };
@@ -23,7 +22,8 @@ export const getAllThemes = () => {
 addDecorator(withThemesProvider(getAllThemes()));
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../', true, /.stories.tsx/);
+// @ts-ignore
+const req = require.context("../", true, /.stories.tsx/);
 function loadStories() {
   req.keys().forEach((filename) => req(filename));
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-styled-component-theme",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "storybook addon with styled-components theme",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",

src/Themes.tsx

@@ -36,15 +36,17 @@ export const Themes = compose<BaseComponentProps, ThemeProps>(
     withState("theme", "setTheme", null),
     withState("themes", "setThemes", List()),
     withHandlers<ThemeProps & ThemeState, ThemeHandler>({
-        onSelectTheme: ({channel, setTheme}) => (theme) => {
+        onSelectTheme: ({channel, setTheme, api}) => (theme) => {
             setTheme(theme);
+            api.setQueryParams({theme: theme.name});
             channel.emit("selectTheme", theme);
         },
-        onReceiveThemes: ({setTheme, setThemes, channel}) => (newThemes: Theme[]) => {
+        onReceiveThemes: ({setTheme, setThemes, channel, api}) => (newThemes: Theme[]) => {
             const themes = List(newThemes);
+            const themeName = api.getQueryParam("theme");
             setThemes(List(themes));
             if (themes.count() > 0) {
-                const theme = themes.first();
+                const theme = themes.find((t) => t.name === themeName) || themes.first();
                 setTheme(theme);
                 channel.emit("selectTheme", theme);
             }