integrate Storybook for further frontend development

.storybook/main.cjs

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

.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="/build/protocol.css" />
+<link rel="stylesheet" href="/build/protocol-extra.css" />
+<link rel="stylesheet" href="/tokens.css" />
+<link rel="stylesheet" href="/rally.css" />

.storybook/preview.cjs

@@ -0,0 +1,14 @@
+export const parameters = {
+  actions: {
+    argTypesRegex: "^on[A-Z].*",
+    argTypesRegex: "^fetch[A-Z].*",
+    argTypesRegex: "^create[A-Z].*",
+    argTypesRegex: "^update[A-Z].*",
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

README.md

@@ -115,3 +115,11 @@ integration testing.
 `firebase.config.js` – contains our public firebase configuration for this application.
 
 `firebase.json` - contains the server-side configuration for this Firebase project.
+
+## Storybook
+
+To start storybook in development mode, run npm run storybook
+
+Test existing components by adding a "story" in `src/stories/components`, using the `stories.svelte` extension
+
+Please check [the Storybook documentation] https://storybook.js.org/docs/svelte/writing-stories/introduction for proper story definition

functions/src/index.ts

@@ -1,51 +1,51 @@
 import * as functions from "firebase-functions";
 import * as admin from "firebase-admin";
 
-import {studies} from "./studies";
-import {v4 as uuidv4} from "uuid";
+import { studies } from "./studies";
+import { v4 as uuidv4 } from "uuid";
 
 admin.initializeApp({
   credential: admin.credential.applicationDefault(),
 });
 
 export const rallytoken = functions.https.onRequest(
-    async (request, response) => {
-      response.set("Access-Control-Allow-Origin", "*");
-      response.set("Access-Control-Allow-Headers", "Content-Type");
-
-      if (request.method === "OPTIONS") {
-        response.set("Access-Control-Allow-Methods", "POST");
-        response.set("Access-Control-Allow-Headers", "Bearer, Content-Type");
-        response.status(204).send("");
-      } else if (request.method === "POST") {
-        functions.logger.info(
-            `body type: ${typeof request.body}`,
-            {payload: request.body}
-        );
-
-        try {
-          let idToken;
-          let studyId;
-          if (typeof request.body === "string") {
-            const body = JSON.parse(request.body);
-            idToken = body.idToken;
-            studyId = body.studyId;
-          } else {
-            idToken = request.body.idToken;
-            studyId = request.body.studyId;
-          }
-
-          const rallyToken = await generateToken(idToken, studyId);
-          functions.logger.info("OK");
-          response.status(200).send({rallyToken});
-        } catch (ex) {
-          functions.logger.error(ex);
-          response.status(500).send(ex.message);
+  async (request, response) => {
+    response.set("Access-Control-Allow-Origin", "*");
+    response.set("Access-Control-Allow-Headers", "Content-Type");
+
+    if (request.method === "OPTIONS") {
+      response.set("Access-Control-Allow-Methods", "POST");
+      response.set("Access-Control-Allow-Headers", "Bearer, Content-Type");
+      response.status(204).send("");
+    } else if (request.method === "POST") {
+      functions.logger.info(
+        `body type: ${typeof request.body}`,
+        { payload: request.body }
+      );
+
+      try {
+        let idToken;
+        let studyId;
+        if (typeof request.body === "string") {
+          const body = JSON.parse(request.body);
+          idToken = body.idToken;
+          studyId = body.studyId;
+        } else {
+          idToken = request.body.idToken;
+          studyId = request.body.studyId;
         }
-      } else {
-        response.status(500).send("Only POST and OPTIONS methods are allowed.");
+
+        const rallyToken = await generateToken(idToken, studyId);
+        functions.logger.info("OK");
+        response.status(200).send({ rallyToken });
+      } catch (ex) {
+        functions.logger.error(ex);
+        response.status(500).send(ex.message);
       }
+    } else {
+      response.status(500).send("Only POST and OPTIONS methods are allowed.");
     }
+  }
 );
 
 /**
@@ -63,41 +63,41 @@ async function generateToken(idToken: string, studyId: string) {
   // when the token is first used to sign-in.
   const uid = `${studyId}:${decodedToken.uid}`;
   const rallyToken = await admin.auth().createCustomToken(
-      uid, {firebaseUid: decodedToken.uid, studyId}
+    uid, { firebaseUid: decodedToken.uid, studyId }
   );
 
   return rallyToken;
 }
 
 exports.addRallyUserToFirestore = functions.auth.user().onCreate(
-    async (user) => {
-      functions.logger.info("addRallyUserToFirestore fired");
-      if (user.providerData.length == 0) {
-        functions.logger.info("Extension users do not get user docs.");
-        return;
-      }
+  async (user) => {
+    functions.logger.info("addRallyUserToFirestore fired");
+    if (user.providerData.length == 0) {
+      functions.logger.info("Extension users do not get user docs.");
+      return;
+    }
 
 
-      const newRallyId = uuidv4();
-      const extensionUserDoc = {rallyId: newRallyId};
-      admin
-          .firestore()
-          .collection("extensionUsers")
-          .doc(user.uid)
-          .set(extensionUserDoc, {merge: true});
-
-      const userDoc = {
-        createdOn: new Date(),
-        uid: user.uid,
-      };
-      admin
-          .firestore()
-          .collection("users")
-          .doc(user.uid)
-          .set(userDoc, {merge: true});
-
-      return true;
-    }
+    const newRallyId = uuidv4();
+    const extensionUserDoc = { rallyId: newRallyId };
+    admin
+      .firestore()
+      .collection("extensionUsers")
+      .doc(user.uid)
+      .set(extensionUserDoc, { merge: true });
+
+    const userDoc = {
+      createdOn: new Date(),
+      uid: user.uid,
+    };
+    admin
+      .firestore()
+      .collection("users")
+      .doc(user.uid)
+      .set(userDoc, { merge: true });
+
+    return true;
+  }
 );
 
 /**
@@ -106,20 +106,20 @@ exports.addRallyUserToFirestore = functions.auth.user().onCreate(
  * @param {object} study The study object.
  */
 function addRallyStudyToFirestore(index: string,
-    study: Record<string, unknown>) {
+  study: Record<string, unknown>) {
   admin
-      .firestore()
-      .collection("studies")
-      .doc(index)
-      .set(study, {merge: true});
+    .firestore()
+    .collection("studies")
+    .doc(index)
+    .set(study, { merge: true });
 }
 
 export const loadFirestore = functions.https.onRequest(
-    async (request, response) => {
-      for (const [index, study] of Object.entries(studies)) {
-        console.info(`Loading study ${index} into Firestore`);
-        addRallyStudyToFirestore(index, study);
-      }
-      response.status(200).send();
+  async (request, response) => {
+    for (const [index, study] of Object.entries(studies)) {
+      console.info(`Loading study ${index} into Firestore`);
+      addRallyStudyToFirestore(index, study);
     }
+    response.status(200).send();
+  }
 );