feat: removed & updated deps

example/package.json

@@ -19,7 +19,7 @@
     "prop-types": "15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "themeprovider-storybook": "^1.6.0",
+    "themeprovider-storybook": "file:../dist",
     "styled-components": "^5.1.1",
     "typescript": "^3.9.2",
     "webpack": "^4.43.0"

package.json

@@ -21,20 +21,19 @@
   "bundlesize": [
     {
       "path": "dist/**/*.{js,d.ts}",
-      "maxSize": "170 KB",
+      "maxSize": "10 KB",
       "compression": "none"
     }
   ],
   "dependencies": {
-    "immutable": "^4.0.0-rc.12",
     "react-json-view": "^1.19.1",
     "styled-react-modal": "^2.0.1"
   },
   "peerDependencies": {
     "@storybook/addons": "^5.x.x || ^6.x.x",
     "@storybook/react": "^5.x.x || ^6.x.x",
     "styled-components": "^4.x.x || ^5.x.x",
-    "react": "^16.x"
+    "react": "^16.x || ^17.x"
   },
   "devDependencies": {
     "@babel/core": "^7.11.4",
@@ -80,7 +79,7 @@
     "styled-components": "^5.0.1",
     "ts-jest": "^26.2.0",
     "ts-loader": "^8.0.3",
-    "typescript": "^3.9.7"
+    "typescript": "^4.1.3"
   },
   "repository": {
     "type": "git",

src/Background.tsx

@@ -1,12 +1,11 @@
 import addons from "@storybook/addons";
-import { List} from "immutable";
 import * as React from "react";
 import ReactJson from "react-json-view";
 import { Modal } from "./components/Modal";
 import { Theme } from "./types/Theme";
 
 export interface ThemesProviderProps {
-  themes: List<Theme>;
+  themes: Array<Theme>;
   children: React.ReactChild;
 }
 

src/Themes.tsx

@@ -1,4 +1,3 @@
-import { List } from "immutable";
 import * as React from "react";
 import { Button, Row } from "./components/Button";
 import SvgIcon from "./components/SvgIcon";
@@ -20,7 +19,7 @@ interface ButtonProps {
   theme: Theme;
   onOpenModal: () => void;
   settings: ThemesProviderSettings;
-  themes: List<Theme>;
+  themes: Array<Theme>;
 }
 
 const BaseComponent: React.FunctionComponent<ButtonProps> = ({
@@ -42,8 +41,7 @@ const BaseComponent: React.FunctionComponent<ButtonProps> = ({
           <span>{th.name}</span>
           {!settings.disableThemePreview && <SvgIcon name="info" onClick={() => onOpenModal()} />}
         </Button>
-      ))
-      .toArray()}
+    ))}
   </Row>
 );
 
@@ -53,16 +51,16 @@ export const Themes: React.FunctionComponent<ThemeProps> = ({
 }) => {
   const [theme, setTheme] = React.useState(null);
   const [settings, setSettings] = React.useState<ThemesProviderSettings>({ disableThemePreview: false });
-  const [themes, setThemes] = React.useState(List());
+  const [themes, setThemes] = React.useState([]);
 
   const onReceiveThemes = (newThemes: Theme[]) => {
     // tslint:disable-next-line: no-shadowed-variable
-    const themes = List(newThemes);
+    const themes = [...newThemes];
     const themeSaved = JSON.parse(localStorage.getItem("themeprovider-storybook-selected-theme") || null);
     setThemes(themes);
-    if (themes.count() > 0) {
+    if (themes.length > 0) {
       // tslint:disable-next-line: no-shadowed-variable
-      const theme = themes.find((t) => t.name === themeSaved) || themes.first();
+      const theme = themes.find((t) => t.name === themeSaved) || themes[0];
       setTheme(theme);
 
       if (theme.backgroundColor && window?.location?.search.includes("story")) {

src/ThemesProvider.tsx

@@ -1,12 +1,11 @@
 import addons from "@storybook/addons";
-import { List } from "immutable";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import { Theme } from "./types/Theme";
 import { ThemesProviderSettings } from "./withThemesProvider";
 
 export interface ThemesProviderProps {
-  themes: List<Theme>;
+  themes: Array<Theme>;
   settings: ThemesProviderSettings;
   CustomThemeProvider?: React.ComponentType<{ theme: Theme }>;
   story?: any;
@@ -33,10 +32,10 @@ export const ThemesProvider: React.FunctionComponent<ThemesProviderProps> = ({ s
   }, []);
 
   if (CustomThemeProvider) {
-    if (!theme && story) return <CustomThemeProvider theme={themes.first()}>{children}</CustomThemeProvider>;
+    if (!theme && story) return <CustomThemeProvider theme={themes[0]}>{children}</CustomThemeProvider>;
     return <CustomThemeProvider theme={theme}>{children}</CustomThemeProvider>;
   }
 
-  if (!theme && story) return <ThemeProvider theme={themes.first()}>{children}</ThemeProvider>;
+  if (!theme && story) return <ThemeProvider theme={themes[0]}>{children}</ThemeProvider>;
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };

src/__tests__/__snapshots__/Themes.spec.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Themes spec Should render proper 1`] = `"<Component channel={{...}} active={true} theme={{...}} />"`;
+exports[`Themes spec Should render proper 1`] = `"<Themes channel={{...}} active={true} theme={{...}} />"`;

src/withThemesProvider.tsx

@@ -1,4 +1,3 @@
-import { List } from "immutable";
 import * as React from "react";
 
 import { BackgroundHelper } from "./Background";
@@ -21,12 +20,12 @@ export const withThemesProvider = (
   ) => (story: any): JSX.Element => {
 
   return (
-    <ThemesProvider settings={settings} CustomThemeProvider={CustomThemeProvider} story={story} themes={List(themes)}>
+    <ThemesProvider settings={settings} CustomThemeProvider={CustomThemeProvider} story={story} themes={themes}>
       {settings?.disableThemePreview ? (
-        <BackgroundHelper themes={List(themes)}>{story()}</BackgroundHelper>
+        <BackgroundHelper themes={themes}>{story()}</BackgroundHelper>
       ): (
         <ModalProvider>
-          <BackgroundHelper themes={List(themes)}>{story()}</BackgroundHelper>
+          <BackgroundHelper themes={themes}>{story()}</BackgroundHelper>
         </ModalProvider>
       )}
     </ThemesProvider>