vueless 0.0.2 → 0.0.4

package/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintignore

@@ -0,0 +1,7 @@
+/node_modules
+/dist
+/storybook-static
+
+# allow to format hidden folders
+!/.storybook
+!/.mono

package/.eslintrc.js

@@ -0,0 +1,59 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+    es2020: true,
+  },
+  plugins: ["tailwindcss"],
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "@vue/prettier",
+    "plugin:prettier/recommended",
+    "plugin:tailwindcss/recommended",
+  ],
+  rules: {
+    "no-console": process.env.PROD ? "error" : "warn",
+    "no-debugger": process.env.PROD ? "error" : "warn",
+    "arrow-parens": ["error", "always"],
+    curly: ["error", "multi-line"],
+    "padding-line-between-statements": [
+      "error",
+      { blankLine: "always", prev: ["const", "let", "var"], next: "*" },
+      { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"] },
+      { blankLine: "always", prev: "directive", next: "*" },
+      { blankLine: "any", prev: "directive", next: "directive" },
+      { blankLine: "always", prev: "block-like", next: "*" },
+      { blankLine: "always", prev: "*", next: "block-like" },
+      { blankLine: "always", prev: "*", next: "return" },
+    ],
+    "vue/multi-word-component-names": [
+      "error",
+      { ignores: ["index", "Component", "Modal", "Page"] },
+    ],
+    "vue/max-len": ["error", { code: 120, template: 960, ignoreComments: true, ignoreUrls: true }],
+    "vue/padding-line-between-blocks": ["error", "always"],
+    "vue/v-on-event-hyphenation": ["error", "never"],
+    "vue/no-v-html": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "prettier/prettier": ["warn", { printWidth: 100, tabWidth: 2 }],
+  },
+  overrides: [
+    {
+      files: [".storybook/preview.{js,ts}"],
+      rules: {
+        "vue/max-len": ["error", { code: 280 }],
+        "prettier/prettier": ["warn", { printWidth: 280, tabWidth: 2 }],
+      },
+    },
+    {
+      files: ["**/*.{stories}.{js,ts,jsx,tsx}"],
+      extends: ["plugin:storybook/recommended"],
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    module: "esnext",
+  },
+};

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 "../../src/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,20 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+export default {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)", "../src/**/*.@(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";
+import { createRouter, createWebHistory } from "vue-router";
+import NotifyServiceDefault from "../src/ui.notify/services";
+
+// Tailwind styles
+import "../index.pcss";
+
+// Common stores
+import loader from "../src/ui.loader-rendering/store";
+import loaderTop from "../src/ui.loader-top/store";
+import breakpoint from "../src/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("../src/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: "/images/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/{library.web-types-gen → .web-types-gen}/lib/build.js

@@ -157,25 +157,48 @@ async function extractInformation(absolutePath, config) {
 
   function getDefaultConfigJson(fileContents) {
     const objectStartIndex = fileContents.indexOf("{");
-    const objectString = fileContents.substring(objectStartIndex).replace("};", "}");
+    const variablePattern = /([^:]+):\s*(?!true|false|undefined)([a-zA-Z_]\w*)/g;
+    let objectString = fileContents
+      .substring(objectStartIndex)
+      .replace("};", "}")
+      .replace(/undefined/g, '"undefined"')
+      .replace(variablePattern, (match, key) => key + ": {}");
 
     return eval("(" + objectString + ")"); // Converting into JS object
   }
 
   function getGlobalConfigJson(fileContents, componentName) {
     const startIndex = fileContents.indexOf(`${componentName}:`);
-    const endIndex = fileContents.indexOf("}", startIndex) + 1;
+
+    // find index of the last closing bracket
+    let endIndex = -1;
+    let braceCount = 0;
+
+    for (let i = startIndex; i < fileContents.length; i++) {
+      if (fileContents[i] === "{") {
+        braceCount++;
+      } else if (fileContents[i] === "}") {
+        braceCount--;
+
+        if (braceCount === 0) {
+          endIndex = i;
+          break;
+        }
+      }
+    }
+
+    // Get component config raw string
     const rawString = fileContents.slice(startIndex, endIndex);
 
     // If the stings are present in config but commented - remove them
-    const cleanContents = rawString.replace(/\/\/.*\n?/g, "");
+    const stringWithoutComments = rawString.replace(/\/\/.*$/gm, "");
 
     // Check if final JSON string is valid: TODO: find better solution
-    if (!cleanContents.includes("}")) return {};
+    if (!stringWithoutComments.includes("}")) return {};
 
-    const jsonString = `{${rawString}\n}}`
-      .replace(/'/g, '"')
-      .replace(/(\w+)\s*:/g, '"$1":')
+    const jsonString = `{${stringWithoutComments}\n}}`
+      .replace(/[`']/g, '"')
+      .replace(/(\w+)\s*: /g, '"$1":')
       .replace(/,\s*}/g, "}");
 
     return JSON.parse(jsonString);
@@ -201,12 +224,15 @@ async function extractInformation(absolutePath, config) {
         attributes: doc.props?.map((prop) => ({
           name: prop.name,
           required: prop.required,
-          description: prop.description,
+          description: prop.tags?.ignore ? "@ignore: " + prop.description : prop.description,
           value: {
             kind: "expression",
             type: prop.values ? `'${prop.values.join("' | '")}'` : prop.type?.name ?? "any",
           },
-          default: (defaultValues && defaultValues[prop.name]) || prop.defaultValue?.value,
+          default:
+            defaultValues && prop.name in defaultValues
+              ? defaultValues[prop.name].toString()
+              : prop.defaultValue?.value.toString(),
         })),
         events: doc.events?.map((event) => ({
           name: event.name,

package/{library.web-types-gen → .web-types-gen}/lib/config.js

@@ -1,5 +1,5 @@
-import * as path from "path";
-import * as fs from "fs";
+import path from "path";
+import fs from "fs";
 import { readFile } from "fs/promises";
 
 export async function extractConfig(cwd, watch = false, configFileFromCmd, pathArray = []) {
@@ -11,6 +11,12 @@ export async function extractConfig(cwd, watch = false, configFileFromCmd, pathA
   const fileContent = await readFile(path.join(cwd, "package.json"), "utf-8");
   const packageJson = JSON.parse(fileContent);
 
+  let additionalConfig = {};
+
+  if (fs.existsSync(configFilePath)) {
+    additionalConfig = await import(configFilePath);
+  }
+
   return {
     cwd,
     watch,
@@ -21,6 +27,6 @@ export async function extractConfig(cwd, watch = false, configFileFromCmd, pathA
     packageVersion: packageJson["version"],
     typesSyntax: "typescript",
     descriptionMarkup: "markdown",
-    ...(fs.existsSync(configFilePath) ? require(configFilePath) : undefined),
+    ...additionalConfig,
   };
 }

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 vuelessjs
+
+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.