feat: introduced compatibility with storybook 6

feat: introduced compatibility with storybook 6

.github/workflows/main.yml

@@ -0,0 +1,66 @@
+name: Main CI
+
+on:
+  workflow_dispatch:
+    inputs:
+        distTag:
+          description: 'Dist tag to publish'
+          required: true
+          default: 'latest'
+  pull_request:
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  build_and_testing:
+    runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+      BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}
+      GH_TOKEN: ${{ secrets.GH_TOKEN }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+
+      - name: Restore cache
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - uses: actions/setup-node@v2-beta
+        with:
+          always-auth: true
+          node-version: 12
+      - name: Creates local .npmrc
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
+
+      - name: Install
+        run: npm ci
+
+      - name: Build & Testing
+        run: |
+          npm run lint
+          npm run build
+          npm run test
+          npm run bundle-size
+
+      - name: Release
+        if: ${{github.event.inputs.distTag == 'latest' || github.event.inputs.distTag == 'next'}}
+        run: |
+          git config --global user.email "[email protected]"
+          git config --global user.name "CI"
+          npm run release && npm run publish-storybook
+
+      - name: Release Docs
+        if: ${{github.event.inputs.distTag == 'latest' || github.event.inputs.distTag == 'next'}}
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: example/storybook-static

.gitignore

@@ -2,6 +2,5 @@ node_modules
 dist
 coverage
 .cache
-package-lock.json
 .DS_Store
 pkg

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -6,15 +6,15 @@
 ![npm](https://img.shields.io/npm/dy/themeprovider-storybook.svg)
 ![GitHub](https://img.shields.io/github/license/semoal/themeprovider-storybook.svg)
 ![BundleSize](https://img.shields.io/bundlephobia/min/themeprovider-storybook)
-[![Greenkeeper badge](https://badges.greenkeeper.io/semoal/themeprovider-storybook.svg)](https://greenkeeper.io/)
 [![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](semanticrelease)
 
 This addon helps you to display a Styled-Components ThemeProvider or a custom one in your [Storybook](https://storybook.js.org).
 
+- Works on Storybook 5.x.x and 6.x.x (latest release)
 - Switches background color.
 - Works on iframes or visual regression testing.
 - Allows passing a custom implementation of your own theme provider.
-- Displays a popup with all the current keys of the theme.
+- Displays a popup with all the current keys of the theme. [If you want, you can disable it](#disable-popup)
 - You can copy individually a value from the theme.
 
 ![Screenshot](https://i.imgur.com/y1Je5xR.gif)
@@ -28,18 +28,21 @@ yarn add themeprovider-storybook --dev
 npm install --save-dev themeprovider-storybook
 ```
 
-Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
+Add this line to your addons array inside `main.js` file (create this file inside your storybook config directory if needed).
 
 ```js
-import 'themeprovider-storybook/register';
+module.exports = {
+  addons: [
+    "themeprovider-storybook/register"
+  ]
+}
 ```
 
 ### Set options globally
 
-Import and use the `addDecorator` in your `config.js` file.
+Import and use the `withThemesProvider` function in your `preview.js` file.
 
 ```js
-import { addDecorator, configure } from '@storybook/react';
 import { withThemesProvider } from "themeprovider-storybook";
 
 // Options:
@@ -55,9 +58,22 @@ const themes = [
     ..., // Your theme keys (Check example if you need some help)
   }
 ]
-addDecorator(withThemesProvider(themes));
 
-configure(() => require('./stories'), module);
+export const decorators = [withThemesProvider(themes)];
+```
+
+### Examples
+
+| version | documentation |
+|----------|:-------------:|
+| For Storybook v5.x.x  | [OLD readme](./v5_example/README.md) |
+| For Storybook v6.x.x  | [Current readme](./README.md) |
+
+
+### Disable popup
+
+```jsx
+export const decorators = [withThemesProvider(themes, { disableThemePreview: false })];
 ```
 
 ### How to use your own implementation of ThemeProvider

example/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+storybook-static

example/.storybook/main.js

@@ -1,16 +1,10 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.(tsx|ts)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links'],
-  webpackFinal: async config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-        },
-      ],
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
-    return config;
-  },
-};
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-docs",
+    "themeprovider-storybook/register"
+  ]
+}

example/.storybook/preview.js

@@ -0,0 +1,46 @@
+import { withThemesProvider } from "themeprovider-storybook"
+const THEMES = [
+  {
+    name: 'Light',
+    backgroundColor: '#fff',
+    palette: {
+      TextField: {
+        backgroundColor: '#f3f3f3',
+        fontColor: '#212e45',
+        borderColor: '#e2e6f3',
+        placeholderColor: '#999999',
+        opacityDisabled: 0.25,
+        borderError: '#e25a66',
+      },
+      Common: {
+        backgroundColor: '#1a213f',
+        fontColor: '#808ab1',
+        borderError: '#e25a66'
+      },
+    }
+  },
+  {
+    name: 'Dark',
+    backgroundColor: '#121833',
+    palette: {
+      TextField: {
+        backgroundColor: '#1a213f',
+        fontColor: '#808ab1',
+        borderColor: '#808ab1',
+        placeholderColor: '#808ab1',
+        opacityDisabled: 0.45,
+        borderError: '#e25a66'
+      },
+      Common: {
+        backgroundColor: '#1a213f',
+        fontColor: '#808ab1',
+        borderError: '#e25a66'
+      },
+    }
+  },
+]
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}
+export const decorators = [withThemesProvider(THEMES)];