Fix storybooks

Author: glowacki-dev

.github/dependabot.yml

@@ -3,4 +3,7 @@ updates:
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
-      interval: "daily"
+      interval: "weekly"
+      day: "thursday"
+    ignore:
+      - dependency-name: "@storybook*"

.github/workflows/ci.yaml

@@ -14,15 +14,25 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: "14"
-      - run: npm install
+      - run: npm ci
       - run: npm run prettier-ci
 
+  storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - run: npm ci
+      - run: npm run storybook-ci
+
   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
           node-version: "14"
-      - run: npm install
+      - run: npm ci
       - run: npm run build --if-present

.storybook/main.js

@@ -1,10 +1,11 @@
 module.exports = {
-  stories: ["../src/**/*.stories.js"],
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/preset-create-react-app",
     "@storybook/addon-actions",
+    "@storybook/addon-links",
     "@storybook/addon-storysource",
+    "@storybook/addon-essentials",
     "@storybook/addon-knobs/register",
-    "@storybook/addon-viewport/register",
   ],
 };

.storybook/preview.js

@@ -1,5 +1,6 @@
 import React, { Suspense } from "react";
 import { addParameters, addDecorator } from "@storybook/react";
+import { QueryClient, QueryClientProvider } from "react-query";
 import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
 import { withKnobs } from "@storybook/addon-knobs";
 import StoryRouter from "storybook-react-router";
@@ -11,12 +12,17 @@ import "../src/i18n";
 import "semantic-ui-css/semantic.min.css";
 import "../src/index.css";
 
+const queryClient = new QueryClient();
+
 addDecorator(withKnobs);
 addDecorator(StoryRouter());
 addDecorator((storyFn) => <Suspense fallback="Loading...">{storyFn()}</Suspense>);
 addDecorator((storyFn) => <MediaContextProvider>{storyFn()}</MediaContextProvider>);
 addDecorator((storyFn) => <HelmetProvider>{storyFn()}</HelmetProvider>);
 addDecorator((storyFn) => <UserContextMock>{storyFn()}</UserContextMock>);
+addDecorator((storyFn) => (
+  <QueryClientProvider client={queryClient}>{storyFn()}</QueryClientProvider>
+));
 addDecorator((storyFn) => <Suspense fallback="Loading">{storyFn()}</Suspense>);
 
 const customViewports = {
@@ -46,3 +52,7 @@ addParameters({
     },
   },
 });
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+};

README.md

@@ -21,7 +21,7 @@ Sometimes you may want to run parts of application on their own. You can do this
 - Run firebase emulators with `npx firebase emulators:start`.
 - Run react dev server with `npm run start:client`.
 - Run game server with: `node -r esm src/server.js`.
-- Run storybook wiht: `npm run storybook`.
+- Run storybook wiht: `npm run start:storybook`.
 
 ## Note