Merge branch 'master' into pico-v2

.eslintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
     "eslint:recommended",
     "@vue/eslint-config-typescript",
     "@vue/eslint-config-prettier",
+    "plugin:storybook/recommended",
   ],
   overrides: [
     {

.gitignore

@@ -17,6 +17,8 @@ coverage
 /cypress/videos/
 /cypress/screenshots/
 
+storybook-static
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -29,4 +31,4 @@ coverage
 *.njsproj
 *.sln
 *.sw?
-.env
+.env

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/vue3-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,39 @@
+import type { Preview } from "@storybook/vue3";
+import "@/assets/main.css";
+
+import i18n from "../src/locales/i18n";
+import { setup } from "@storybook/vue3";
+import { type App } from "vue";
+import { EventsPlugin } from "../src/eventBus/events";
+import { createPinia } from "pinia";
+import { navIsLoading } from "../src/router";
+import { vueRouter } from "storybook-vue3-router";
+
+setup((app: App) => {
+  app.use(createPinia());
+  app.use(i18n);
+  app.use(EventsPlugin);
+
+  /** We need to set navIsLoading to false otherwise it never resolves becasuse the router guards don't seem to be called @todo check this */
+  navIsLoading.value = false;
+});
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+preview.decorators = [
+  /* this is the basic setup with no params passed to the decorator */
+  vueRouter(),
+];
+
+
+export default preview;

README.md

@@ -4,6 +4,14 @@ Arguably the most important parts of an app (authentication and handling payment
 
 ![Screenshot](screenshot.png)
 
+## Demo
+https://vue3-starter-demo.netlify.app **(Note: this is a pure clien-side demo so there is no backend - you won't be able to login)**
+
+See the components below for a more detailed preview.
+
+## Preview components in Storybook
+https://vue3-starter-storybook.netlify.app/index.html
+
 ## Comes with
 
 - [Vue Router](https://router.vuejs.org) for routing
@@ -36,6 +44,7 @@ Arguably the most important parts of an app (authentication and handling payment
 - Global event bus for easy communication with things like Analytics services
 - Syncing of authentication states and languages across tabs using broadcastMessage (if you change it on one tab, all other open tabs with the same app running will also update)
 - VSCode launch configuration so you can use breakpoints in your debugging
+- Includes Storybook for easy isolated component preview and development
 
 ### Pages and routing
 
@@ -190,6 +199,16 @@ npm run translation-key-check
 
 Note, if you expand the supported languages, make sure to update the `.vue-translation.js` file to include the new language.
 
+### Storybook
+
+```sh
+npm run storybook
+```
+
+This will start the Storybook server and open a new tab in your browser.
+
+You can read more about Storybook [here](https://storybook.js.org/).
+
 ## Backend setup
 
 This starter kit was designed to work with a Laravel based backend, but any backend that implements the required functionality would work.