@vueless/storybook 0.0.1

package/.storybook/configs/main.config.js

@@ -0,0 +1,20 @@
+import vuelessDocsTheme from "../themes/vueless.docs.theme";
+import colors from "tailwindcss/colors";
+
+export const docs = {
+  theme: vuelessDocsTheme,
+  source: {
+    language: "html",
+  },
+};
+
+export const backgrounds = {
+  default: "white",
+  values: [
+    { name: "white", value: colors.white },
+    { name: "light", value: colors.gray[50] },
+    { name: "dark", value: colors.gray[900] },
+  ],
+};
+
+export const layout = "fullscreen";

package/.storybook/decorators/vue3SourceDecorator.js

@@ -0,0 +1,119 @@
+import { addons, makeDecorator } from "@storybook/preview-api";
+import { h, onMounted, watch } from "vue";
+import { setBrandColor } from "vueless/service.ui";
+
+export const vue3SourceDecorator = makeDecorator({
+  name: "vue3SourceDecorator",
+  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
+    // watch args and re-emit on change
+    return {
+      components: { story },
+      setup() {
+        onMounted(() => {
+          setSourceCode();
+        });
+
+        watch(context.args, () => {
+          setSourceCode();
+        });
+
+        setBrandColor();
+
+        function setSourceCode() {
+          try {
+            const src = context.originalStoryFn(context.args).template;
+            const code = templateSourceCode(src, context.args, context.argTypes);
+            const channel = addons.getChannel();
+
+            const emitFormattedTemplate = async () => {
+              const prettier = await import("prettier2");
+              const prettierHtml = await import("prettier2/parser-html");
+
+              const formattedCode = prettier.format(code, {
+                parser: "html",
+                plugins: [prettierHtml],
+                htmlWhitespaceSensitivity: "ignore",
+              });
+
+              // emits an event when the transformation is completed
+              channel.emit("storybook/docs/snippet-rendered", {
+                id: context.id,
+                args: context.args,
+                source: formattedCode,
+              });
+            };
+
+            emitFormattedTemplate();
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn("Failed to render code", e);
+          }
+        }
+
+        return () => h("div", { style: `padding: 2rem 1.5rem 3rem 1.5rem;` }, [h(story)]);
+      },
+    };
+  },
+});
+
+function templateSourceCode(templateSource, args, argTypes) {
+  const componentArgs = {};
+
+  for (const [key, val] of Object.entries(argTypes)) {
+    const value = args[key];
+
+    if (
+      typeof val !== "undefined" &&
+      val.table &&
+      val.table.category === "props" &&
+      value !== val.defaultValue
+    ) {
+      componentArgs[key] = val;
+    }
+  }
+
+  const slotTemplateCode =
+    // eslint-disable-next-line vue/max-len
+    '<template v-for="(slot, index) of slots" :key="index" v-slot:[slot]><template v-if="args[slot]">{{ args[slot] }}</template></template>';
+  const templateDefaultRegEx = /<template #default>([\s\S]*?)<\/template>/g;
+
+  return templateSource
+    .replace(/>[\s]+</g, "><")
+    .trim()
+    .replace(slotTemplateCode, "")
+    .replace(templateDefaultRegEx, "$1")
+    .replace(
+      'v-bind="args"',
+      Object.keys(componentArgs)
+        .map((key) => " " + propToSource(kebabCase(key), args[key]))
+        .join(""),
+    );
+}
+
+function propToSource(key, val) {
+  const type = typeof val;
+
+  switch (type) {
+    case "boolean":
+      return val ? key : "";
+    case "string":
+      return `${key}="${val}"`;
+    default:
+      return `:${key}="${val}"`;
+  }
+}
+
+function kebabCase(str) {
+  return str
+    .split("")
+    .map((letter, idx) => {
+      return letter.toUpperCase() === letter
+        ? `${idx !== 0 ? "-" : ""}${letter.toLowerCase()}`
+        : letter;
+    })
+    .join("");
+}

package/.storybook/main.js

@@ -0,0 +1,25 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+export default {
+  stories: [
+    "../node_modules/vueless/**/*.stories.@(js|jsx|ts|tsx)",
+    "../node_modules/vueless/**/*.@(mdx)",
+    // TODO: Remove it later
+    "../.vueless/**/*.stories.@(js|jsx|ts|tsx)",
+    "../.vueless/**/*.@(mdx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  env: (config) => ({
+    ...config,
+    BASE_URL: "/",
+  }),
+};

package/.storybook/manager-head.html

@@ -0,0 +1,10 @@
+<!--
+Overrides content of storybook layout HTML page <head> tag,
+-->
+
+<!-- Styles overriding -->
+<style>
+ div[data-testid="tooltip"] a[id]:hover {
+   background-color: rgb(17 24 39 / 5%) !important;
+ }
+</style>

package/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import vuelessTheme from "./themes/vueless.theme";
+
+addons.setConfig({
+  theme: vuelessTheme,
+});

package/.storybook/preview-head.html

@@ -0,0 +1,72 @@
+<!--
+Overrides content of preview IFRAME HTML page's <head> tag,
+affecting rendered component(s) below Canvas and Docs tabs.
+-->
+<!-- Fonts overriding -->
+<link rel="dns-prefetch" href="https://fonts.googleapis.com">
+<link rel="dns-prefetch" href="https://fonts.gstatic.com">
+<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com">
+<link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
+<link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
+
+<!-- Styles overriding -->
+<style>
+  body {
+    font-family: Roboto, sans-serif;
+  }
+
+  #storybook-docs h2 {
+    margin-top: 32px !important;
+    margin-bottom: 24px !important;
+    padding-bottom: 8px !important;
+    font-weight: bold !important;
+  }
+
+  .docblock-argstable-body {
+    filter: none !important;
+    border-radius: 0.5rem !important;
+  }
+
+  .docblock-argstable-body tr:not([title]) > td {
+    background-color: white !important;
+  }
+
+  .docblock-argstable-body tr td {
+    border-radius: 0 !important;
+  }
+
+  .sbdocs-preview {
+    box-shadow: none !important;
+  }
+
+  .docblock-argstable [type='checkbox']:checked,
+  .docblock-argstable [type='radio']:checked {
+    background-color: rgb(17 24 39) !important;
+  }
+
+  .docblock-argstable [type='checkbox']:focus,
+  .docblock-argstable [type='radio']:focus {
+    @apply !ring-gray-300;
+  }
+
+  .markdown {
+    .docblock-source {
+      margin: 0px 0 24px !important;
+    }
+
+    code {
+      background-color: #f3f4f6 !important;
+      border-color: #d1d5db !important;
+    }
+
+    .sbdocs-a {
+      border-bottom: dashed 1px #4b5563;
+      color: #4b5563;
+    }
+
+    .sbdocs-a:hover {
+      border-bottom: none;
+      color: #4b5563;
+    }
+  }
+</style>

package/.storybook/preview.js

@@ -0,0 +1,50 @@
+import { setup } from "@storybook/vue3";
+import { backgrounds, docs, layout } from "./configs/main.config";
+import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";
+
+// Vue plugins
+import { createStore } from "vuex"; // TODO: remove it later
+import { createRouter, createWebHistory } from "vue-router";
+import NotifyServiceDefault from "vueless/ui.notify/services"; // TODO: move to UI components
+
+// Tailwind styles
+import "@/assets/css/index.pcss";
+
+// Common stores TODO: move to UI components
+import loader from "vueless/ui.loader-rendering/store";
+import loaderTop from "vueless/ui.loader-top/store";
+import breakpoint from "vueless/ui.viewport/store";
+
+// Create store instance
+const store = createStore({
+  modules: { loader, loaderTop, breakpoint },
+});
+
+// Create router instance
+const router = createRouter({
+  history: createWebHistory("/"),
+  routes: [{ path: "/:pathMatch(.*)*", component: () => import("vueless/ui.container-page") }],
+});
+
+// Create storybook app instance
+const storybookApp = (app) => {
+  app.use(store);
+  app.use(router);
+  app.use(new NotifyServiceDefault().notifyInstance);
+};
+
+// Setup storybook
+setup(storybookApp);
+
+// Set storybook config
+export default {
+  decorators: [vue3SourceDecorator],
+  parameters: {
+    layout,
+    docs,
+    backgrounds,
+    options: {
+      storySort: (a, b) => (a.id === b.id ? 0 : a.name === "Docs" && a.id.localeCompare(b.id, undefined, { numeric: true })),
+    },
+  },
+};

package/.storybook/themes/vueless.docs.theme.js

@@ -0,0 +1,41 @@
+import { create } from "@storybook/theming/create";
+import colors from "tailwindcss/colors";
+
+export default create({
+  base: "light",
+  // Typography
+  fontBase: '"Roboto", sans-serif',
+  fontCode: "monospace",
+
+  // Main colors
+  colorPrimary: colors.gray["900"],
+  colorSecondary: colors.gray["500"],
+
+  // UI
+  appBg: colors.gray["100"],
+  appPreviewBg: colors.gray["50"],
+  appBorderColor: colors.gray["200"],
+  appContentBg: colors.gray["50"],
+  appBorderRadius: 8,
+
+  // Text colors
+  textColor: colors.gray["900"],
+  textInverseColor: colors.gray["50"],
+
+  // Toolbar default and active colors
+  barTextColor: colors.gray["500"],
+  barHoverColor: colors.gray["600"],
+  barSelectedColor: colors.gray["700"],
+  barBg: colors.white,
+
+  // Form colors
+  inputBg: colors.white,
+  inputBorder: colors.gray["300"],
+  inputTextColor: colors.gray["900"],
+  inputBorderRadius: 4,
+
+  buttonBg: colors.gray["100"],
+  buttonBorder: colors.gray["200"],
+  booleanBg: colors.gray["50"],
+  booleanSelectedBg: colors.gray["200"],
+});

package/.storybook/themes/vueless.theme.js

@@ -0,0 +1,45 @@
+import { create } from "@storybook/theming/create";
+import colors from "tailwindcss/colors";
+
+export default create({
+  base: "light",
+  // Typography
+  fontBase: '"Roboto", sans-serif',
+  fontCode: "monospace",
+
+  brandTitle: "Vueless UI",
+  brandUrl: "https://vueless.com",
+  brandImage: "/static/storybook/vueless-logo.png",
+  brandTarget: "_blank",
+
+  // Main colors
+  colorPrimary: colors.gray["900"],
+  colorSecondary: colors.gray["500"],
+
+  // UI
+  appBg: colors.white,
+  appPreviewBg: colors.gray["50"],
+  appBorderColor: colors.gray["300"],
+  appBorderRadius: 0,
+
+  // Text colors
+  textColor: colors.gray["900"],
+  textInverseColor: colors.gray["50"],
+
+  // Toolbar default and active colors
+  barTextColor: colors.gray["500"],
+  barHoverColor: colors.gray["600"],
+  barSelectedColor: colors.gray["700"],
+  barBg: colors.gray["50"],
+
+  // Form colors
+  inputBg: colors.white,
+  inputBorder: colors.gray["300"],
+  inputTextColor: colors.gray["900"],
+  inputBorderRadius: 4,
+
+  buttonBg: colors.gray["100"],
+  buttonBorder: colors.gray["100"],
+  booleanBg: colors.white,
+  booleanSelectedBg: colors.gray["100"],
+});

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 vueless
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Vueless Storybook preset
+
+The package simplifies Storybook configuration for `vueless` UI library.

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@vueless/storybook",
+  "version": "0.0.1",
+  "description": "The package simplifies Storybook configuration for Vueless UI library.",
+  "homepage": "https://vueless.com",
+  "author": "Johnny Grid",
+  "license": "MIT",
+  "type": "module",
+  "main": "index.js",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuelessjs/vueless-storybook.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vuelessjs/vueless-storybook/issues"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
+    "@storybook/vue3": "^8.0.0",
+    "@storybook/vue3-vite": "^8.0.0",
+    "prettier2": "npm:prettier@2.8.8",
+    "storybook": "^8.0.0",
+    "tailwindcss": "^3.3.3"
+  },
+  "peerDependencies": {
+    "vueless": "^0.0.3"
+  }
+}