Storybook (#6)

Storybook fixed

gui/.storybook/main.js

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

gui/.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

gui/README.md

@@ -37,6 +37,8 @@ Instead, it will copy all the configuration files and the transitive dependencie
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
+### `npm run storybook`
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

gui/package.json

@@ -19,8 +19,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -39,12 +39,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addon-actions": "^6.0.21",
+    "@storybook/addon-essentials": "^6.0.21",
+    "@storybook/addon-links": "^6.0.21",
     "@storybook/addons": "^5.3.19",
+    "@storybook/node-logger": "^6.0.21",
     "@storybook/preset-create-react-app": "^3.1.4",
-    "@storybook/react": "^5.3.19",
+    "@storybook/react": "^6.0.21",
     "babel-loader": "8.1.0",
+    "react-is": "^16.13.1",
     "webpack": "4.42.0"
   }
 }

gui/src/components/HistoryStep.js

@@ -12,9 +12,10 @@ class HistoryStep extends React.Component {
         } else if (this.props.success === false) {
             finalStep = <div>Failure!</div>
         }
+        console.log("Props:", this.props)
         const answers = this.props.answers.map(a => {
                 let variant = a.selected ? "success" : "light";
-                // console.log(`${a.id} is selected: ${a.selected}, variant: ${variant}`);
+                console.log(`${a.id} is selected: ${a.selected}, variant: ${variant}`);
                 let path = Array.from(this.props.path);
                 path.push(this.props.id);
                 path.push(a.id);

gui/src/components/Quizz.js

@@ -26,20 +26,23 @@ class Quiz extends React.Component {
 
     loadState = (quizzId, path) => {
         console.log("Loading state for quizz " + quizzId + " and path " + path);
-        this.props.selectAction(quizzId, path)
-            .then(e => {
-                this.feedbackAction = (rate, comment) => {
-                    this.props.feedbackSendAction(rate, comment, quizzId, path)
-                };
-                this.setState({
-                    quizzState: e,
-                    feedbackSendAction: this.feedbackAction,
-                    history: e.history,
-                    loading: false
-                });
-                console.log("State loaded: ", this.state)
-                return e;
-            })
+        console.log(`calling`, this.props)
+        let x = this.props.selectAction(quizzId, path)
+        console.log("Action result", x)
+        x.then(e => {
+            console.log("State loaded")
+            this.feedbackAction = (rate, comment) => {
+                this.props.feedbackSendAction(rate, comment, quizzId, path)
+            };
+            this.setState({
+                quizzState: e,
+                feedbackSendAction: this.feedbackAction,
+                history: e.history,
+                loading: false
+            });
+            console.log("State loaded: ", this.state)
+            return e;
+        }).catch(e => console.log("ERROR!", e))
     };
 
     scrollToBottom = () => {
@@ -78,8 +81,8 @@ class Quiz extends React.Component {
                     <HistoryStep
                         quizzId={this.props.quizzId}
                         answers={h.answers}
-                        id = {h.id}
-                        path = {h.path}
+                        id={h.id}
+                        path={h.path}
                         question={h.question}
                         success={h.success}
                         action={(a, b) => alert("Not supported yet")}/>

gui/stories/index.stories.js → gui/src/stories/index.stories.js

@@ -1,14 +1,15 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
+import { MemoryRouter } from "react-router-dom"; // our router
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
-import Step from '../src/components/Step'
-import HistoryStep from '../src/components/HistoryStep'
-import Quizz from '../src/components/Quizz'
+import Step from '../components/Step'
+import HistoryStep from '../components/HistoryStep'
+import Quizz from '../components/Quizz'
 
 import { Button, Welcome } from '@storybook/react/demo';
-import Feedback from '../src/components/Feedback';
+import Feedback from '../components/Feedback';
 import 'bootstrap/dist/css/bootstrap.css';
 
 const answers = [
@@ -57,6 +58,7 @@ const quizzState = JSON.parse(`{
             "selected": true
           }
         ],
+        "path": [],
         "success": null
       },
       {
@@ -74,6 +76,7 @@ const quizzState = JSON.parse(`{
             "selected": true
           }
         ],
+        "path": [],
         "success": null
       },
       {
@@ -91,6 +94,7 @@ const quizzState = JSON.parse(`{
             "selected": false
           }
         ],
+        "path": [],
         "success": true
       }
     ]
@@ -120,6 +124,7 @@ const quizzStateFinish = JSON.parse(`{
             "selected": true
           }
         ],
+        "path": [],
         "success": null
       },
       {
@@ -137,6 +142,7 @@ const quizzStateFinish = JSON.parse(`{
             "selected": true
           }
         ],
+        "path": [],
         "success": null
       },
       {
@@ -154,21 +160,30 @@ const quizzStateFinish = JSON.parse(`{
             "selected": false
           }
         ],
+        "path": [],
         "success": true
       }
     ]
   }`)
 
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome!', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Components', module)
+    .addDecorator(story => (
+        <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+    ))
 
   .add("Step", () => <Step question="How do you feel today?" action={(a) => console.log("Selected ", a)} answers={answers}></Step>)
-  .add("Step success", () => <Step question="How do you feel today?" action={(a) => console.log("Selected ", a)} success={true} answers={[]}></Step>)
-  .add("Step failure", () => <Step question="How do you feel today?" action={(a) => console.log("Selected ", a)} success={false} answers={[]}></Step>)
-  .add("HistorStep", () => <HistoryStep question="How do you feel today?" answers={historyAnswers}></HistoryStep>)
-  .add("Feedback", () => <Feedback path="a;b;c" />)
-  .add("Quizz", () => <Quizz quizzId="q1" quizzState={quizzState} selectAction={(q, s) => new Promise((q, s) => quizzState)} />)
-  .add("Quizz finished", () => <Quizz quizzId="q1" quizzState={quizzStateFinish} selectAction={(q, s) => new Promise((q, s) => quizzStateFinish)} />)
+ .add("Step success", () => <Step question="How do you feel today?" action={(a) => console.log("Selected ", a)} success={true} answers={[]}></Step>)
+ .add("Step failure", () => <Step question="How do you feel today?" action={(a) => console.log("Selected ", a)} success={false} answers={[]}></Step>)
+ .add("HistoryStep", () => <HistoryStep
+     question="How do you feel today?"
+     answers={historyAnswers}
+     path={["a","b"]}
+     // selectAction={(quizzId,path)=>new Promise((q, s) => quizzState)}
+ ></HistoryStep>)
+ .add("Feedback", () => <Feedback path="a;b;c" />)
+ .add("Quizz", () => <Quizz quizzId="q1" path={["electricity;checkLocal"]} selectAction={(q, s) => new Promise((res, rej) => res(quizzState))} />)
+  .add("Quizz finished", () => <Quizz quizzId="q1" quizzState={quizzStateFinish} selectAction={(q, s) => new Promise((res, rej) => res(quizzStateFinish))} />)
   ;