@avakhula/ui 0.0.506-alpha-spa.3 → 0.0.506-alpha-spa.5

package/.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.eslintrc.cjs

@@ -0,0 +1,22 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+    root: true,
+    extends: [
+        "plugin:vue/vue3-essential",
+        "eslint:recommended",
+        "@vue/eslint-config-prettier",
+        "plugin:storybook/recommended",
+    ],
+    parserOptions: {
+        ecmaVersion: "latest",
+    },
+    globals: {
+      lang: "readonly",
+      langComponents: "readonly",
+    },
+    rules: {
+      "indent": ["warm", 2]
+    },
+};

package/.nvmrc

@@ -0,0 +1 @@
+v16.18.1

package/.prettierrc.json

@@ -0,0 +1 @@
+{}

package/.storybook/intelliboardTheme.js

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming';
+import logo from '../static/Logo.svg';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Intelliboard UI',
+  brandUrl: 'https://intelliboard.net/',
+  brandImage: logo,
+  brandTarget: '_self',
+});

package/.storybook/main.js

@@ -0,0 +1,25 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+    "@storybook/addon-mdx-gfm",
+  ],
+  staticDirs: ['../static'],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  async viteFinal(config, options) {
+    return config;
+  },
+  features: {
+    storyStoreV7: true,
+  },
+  docs: {
+    autodocs: true,
+  },
+};

package/.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import IntelliboardTheme from "./intelliboardTheme";
+addons.setConfig({
+  theme: IntelliboardTheme,
+  isFullscreen: false,
+  panelPosition: 'right',
+});

package/.storybook/preview-head.html

@@ -0,0 +1,12 @@
+<script
+  type="module"
+  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
+></script>
+<script
+  nomodule
+  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
+></script>
+<script>
+  window.global = window;
+  window.lang = (key, component, params = {}) => key
+</script>

package/.storybook/preview.js

@@ -0,0 +1,25 @@
+import { setup } from '@storybook/vue3';
+import { withSource } from "./withSource";
+import EventEmitter from "../src/EventEmmiter";
+import "./scss-loader.scss";
+
+setup((app) => {
+  app.config.globalProperties.$globalEvents = new EventEmitter();
+  app.config.globalProperties.$emitEvent = function(event, ...args) {
+    this.$emit.apply(this, arguments);
+    this.$emit('all', {event, args})
+  };
+});
+
+const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+const decorators = [withSource];
+export default { parameters, decorators };

package/.storybook/scss-loader.scss

@@ -0,0 +1,6 @@
+@import '../src/assets/scss/style.scss';
+
+// Style for documentation
+table {
+    width: 100%;
+}

package/.storybook/withSource.js

@@ -0,0 +1,97 @@
+import { addons, makeDecorator } from "@storybook/addons";
+import kebabCase from "lodash.kebabcase"
+import { h, onMounted } from "vue";
+
+// this value doesn't seem to be exported by addons-docs
+export const SNIPPET_RENDERED = `storybook/docs/snippet-rendered`;
+
+function templateSourceCode (
+  templateSource,
+  args,
+  argTypes,
+  replacing = 'v-bind="args"',
+) {
+  const componentArgs = {}
+  for (const [k, t] of Object.entries(argTypes)) {
+    const val = args[k]
+    if (typeof val !== 'undefined' && t.table && t.table.category === 'props' && val !== t.defaultValue) {
+      componentArgs[k] = val
+    }
+  }
+
+  const propToSource = (key, val) => {
+    const type = typeof val
+    switch (type) {
+      case "boolean":
+        return val ? key : ""
+      case "string":
+        return `${key}="${val}"`
+      default:
+        return `:${key}="${val}"`
+    }
+  }
+
+  return templateSource.replace(
+    replacing,
+    Object.keys(componentArgs)
+      .map((key) => " " + propToSource(kebabCase(key), args[key]))
+      .join(""),
+  )
+}
+
+export const withSource = makeDecorator({
+  name: "withSource",
+  wrapper: (storyFn, context) => {
+    const story = storyFn(context);
+
+    // this returns a new component that computes the source code when mounted
+    // and emits an events that is handled by addons-docs
+    // this approach is based on the vue (2) implementation
+    // see https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/sourceDecorator.ts
+    return {
+      components: {
+        Story: story,
+      },
+
+      setup() {
+        onMounted(() => {
+          try {
+            // get the story source
+            const src = context.originalStoryFn().template;
+            
+            // generate the source code based on the current args
+            const code = templateSourceCode(
+              src,
+              context.args,
+              context.argTypes
+            );
+
+            const channel = addons.getChannel();
+
+            const emitFormattedTemplate = async () => {
+              const prettier = await import("prettier/standalone");
+              const prettierHtml = await import("prettier/parser-html");
+
+              // emits an event  when the transformation is completed
+              channel.emit(
+                SNIPPET_RENDERED,
+                (context || {}).id,
+                prettier.format(`<template>${code}</template>`, {
+                  parser: "vue",
+                  plugins: [prettierHtml],
+                  htmlWhitespaceSensitivity: "ignore",
+                })
+              );
+            };
+
+            setTimeout(emitFormattedTemplate, 0);
+          } catch (e) {
+            console.warn("Failed to render code", e);
+          }
+        });
+
+        return () => h(story);
+      },
+    };
+  },
+});