middleware packages

packages/stories/package.json

@@ -48,6 +48,8 @@
     "react-test-renderer": "^17.0.1",
     "storybook-addon-react-docgen": "^1.2.42",
     "synergies": "^1.1.1",
+    "synergies-logging-middleware": "^1.0.0",
+    "synergies-storybook-middleware": "^1.0.0",
     "ts-jest": "^26.4.4",
     "typescript": "^4.1.2"
   }

packages/stories/src/multiple-middlewares.stories.tsx

@@ -7,6 +7,8 @@ import {
 import { Button } from "@blueprintjs/core";
 import React from "react";
 import { action } from "@storybook/addon-actions";
+import { StorybookMiddlewareProvider } from "synergies-storybook-middleware";
+import { LoggingMiddlewareProvider } from "synergies-logging-middleware";
 
 const countAtom = createAtom(0, "count");
 const useIncrease = countAtom.createAction(() => value => {
@@ -51,7 +53,7 @@ const middleware3: Middleware = next => atoms => {
   next(atoms);
 };
 
-export const Example = () => (
+export const MultiMiddlewares = () => (
   <MiddlewareProvider middlewares={[middleware3, middleware2, middleware1]}>
     <SynergyProvider atoms={[countAtom]}>
       <CounterButton />
@@ -64,6 +66,24 @@ export const Example = () => (
   </MiddlewareProvider>
 );
 
+export const LoggingMiddlewareExample = () => (
+  <LoggingMiddlewareProvider>
+    <SynergyProvider atoms={[countAtom]}>
+      <CounterButton />
+      See console for the middleware logs.
+    </SynergyProvider>
+  </LoggingMiddlewareProvider>
+);
+
+export const StorybookMiddlewareExample = () => (
+  <StorybookMiddlewareProvider>
+    <SynergyProvider atoms={[countAtom]}>
+      <CounterButton />
+      See actions tab for middleware action logs.
+    </SynergyProvider>
+  </StorybookMiddlewareProvider>
+);
+
 export default {
-  title: "Multiple Middlewares",
+  title: "Middlewares",
 };

packages/stories/src/server-calls.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { createAtom, createSynergy, SynergyProvider } from "synergies";
+import { StorybookMiddlewareProvider } from "synergies-storybook-middleware";
 import { Button } from "@blueprintjs/core";
-import { StorybookActionsMiddleware } from "./helpers";
 
 const isLoadingAtom = createAtom(false, "isLoading");
 const dataAtom = createAtom<{
@@ -54,11 +54,11 @@ export default {
   title: "Async Server Calls",
   decorators: [
     Story => (
-      <StorybookActionsMiddleware>
+      <StorybookMiddlewareProvider>
         <SynergyProvider atoms={[isLoadingAtom, dataAtom]}>
           <Story />
         </SynergyProvider>
-      </StorybookActionsMiddleware>
+      </StorybookMiddlewareProvider>
     ),
   ],
 };

packages/stories/src/todo-list.stories.tsx

@@ -1,7 +1,7 @@
 import { createAtom, createSynergy, SynergyProvider } from "synergies";
 import { Button, Checkbox, ControlGroup, InputGroup } from "@blueprintjs/core";
 import React from "react";
-import { StorybookActionsMiddleware } from "./helpers";
+import { StorybookMiddlewareProvider } from "synergies-storybook-middleware";
 
 // Atom name is optional and for debugging through middleware
 const filterAtom = createAtom(false, "filter");
@@ -83,7 +83,7 @@ export const Example = () => (
   // We don't have to nest the providers so extremely, but this demonstrates how you can inject
   // atoms at any place in the hierarchy and they can still communicate upwards with other
   // atoms.
-  <StorybookActionsMiddleware>
+  <StorybookMiddlewareProvider>
     <SynergyProvider atoms={[filterAtom]}>
       <FilterButton />
       <SynergyProvider atoms={[itemsAtom]}>
@@ -93,7 +93,7 @@ export const Example = () => (
         </SynergyProvider>
       </SynergyProvider>
     </SynergyProvider>
-  </StorybookActionsMiddleware>
+  </StorybookMiddlewareProvider>
 );
 
 export default {

packages/synergies-logging-middleware/.npmignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

packages/synergies-logging-middleware/README.md

@@ -0,0 +1,3 @@
+# Synergies Logging Middleware
+
+See https://synergies.js.org for more details.

packages/synergies-logging-middleware/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("../../config/jest.config");

packages/synergies-logging-middleware/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "synergies-logging-middleware",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:lukasbach/synergies.git",
+    "directory": "packages/synergies-logging-middleware"
+  },
+  "sideEffects": false,
+  "author": "Lukas Bach",
+  "license": "MIT",
+  "private": false,
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "esnext": "lib/esnext/index.js",
+  "typings": "lib/types/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "build:all": "run-p \"build:cjs\" \"build:esm\" \"build:esnext\" \"build:types\"",
+    "build:cjs": "tsc -m commonjs --outDir lib/cjs",
+    "build:types": "tsc --declaration true --emitDeclarationOnly --outDir lib/types",
+    "build:esm": "tsc -m es2015 --outDir lib/esm",
+    "build:esnext": "tsc -m esnext --outDir lib/esnext",
+    "start": "tsc -w",
+    "test": "jest --passWithNoTests",
+    "prepublish": "yarn build:all && yarn test"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@testing-library/dom": "^8.13.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^14.0.4",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.0",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "npm-run-all": "^4.1.5",
+    "react-test-renderer": "^17.0.1",
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.1.2"
+  },
+  "peerDependencies": {
+    "synergies": "*"
+  }
+}