vueless 0.0.3 → 0.0.5

package/README.md

@@ -0,0 +1,174 @@
+## How to run the project locally
+
+- Install **node.js 16.XX** version (see [instructions](https://nodejs.org/en/download/package-manager/) for your OS).
+
+- Install globally [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable):
+
+```bash
+npm install --global yarn
+```
+
+- Create project folder and clone files from Git into:
+
+```bash
+# download project from remote repository
+git clone origin git@gitlab.com:<project_name>.git
+
+# go to project folder
+cd <project_name>
+```
+
+- Install project dependencies (node_modules):
+
+```bash
+yarn install
+```
+
+- Create environment file:
+
+```bash
+#  for local environment
+cp .env.local.example .env.local
+```
+
+- Run the app in **development** mode:
+
+```bash
+yarn dev
+```
+
+- The project is ready!
+
+## REST API
+
+- Public URL: https://fine.gitbook.io/api/
+
+- Development URL (same but editable):
+
+  - URL: https://app.gitbook.com/s/-MAVM-6BL-A_fpwuMsE1/
+  - Login: i.ivan.gridnev@gmail.com
+  - Password: XZQnUtFEZ4v9PML
+
+Section **AUTH & APPS** contains **Main** application endpoints, while section **APP INSTANCE** contains **Business** application endpoints.
+
+
+## Additional commands
+
+- Open Storybook (frontend base UI components documentation):
+
+```bash
+# run Storybook in development mode (with docs and stories):
+# It's good for debugging components.
+yarn sb:dev-full
+
+# run Storybook in development mode (with docs only):
+yarn sb:dev
+
+# build Storybook (to publish in the web):
+yarn sb:build
+
+# Run the built application from a `/storybook-static` folder in production mode:
+yarn sb:preview
+```
+
+- Run code-style check / formatting:
+
+```bash
+# check code style (only show errors)
+yarn lint
+
+# check code style and fix all possible errors
+yarn lint:fix
+
+# check code style of given file paths (fail pipeline if at least 1 error or warning appears)
+yarn lint:ci
+```
+
+- Run auto tests:
+
+```bash
+# start unit tests
+yarn test:unit
+
+# start end to end tests
+yarn test:e2e
+
+# start end to end tests in headless mode (no UI)
+yarn test:e2e-ci
+```
+
+- Build application:
+
+```bash
+# for the dev / test / production servers
+cp .env.example .env
+
+yarn build
+# TIP: 📐
+# to analise and reduce the build size see the report.html in a project root folder.
+```
+
+- Run the built application from a `/dist` folder in **production mode**:
+
+```bash
+yarn preview
+```
+
+- Automated releases (new app release in GitLab and increase app version number):
+
+```bash
+# increase third app version number (0.0.X).
+yarn release
+
+# increase second app version number (0.X.0).
+yarn release:production
+
+# increase first app version number (X.0.0).
+release:production-major
+```
+
+- Update browserslist DB to the latest version (it changes yarn.lock only):
+
+```bash
+npx browserslist@latest --update-db
+```
+
+- **Note**: `yarn` automatically calls the` postinstall` command,
+  which generate components web-types for IDE (props autocomplete).
+If you need to do this manually, just use the command below:
+
+```bash
+node .mono/our.library.web-types-gen
+```
+
+## Capacitor (iOS & Android apps)
+
+- Update app src after `dist` or `capacitor.config.js` file changes:
+
+```bash
+npx cap copy
+```
+
+- Open iOS app locally:
+
+```bash
+npx cap open ios
+```
+
+- Open Android app locally:
+
+```bash
+npx cap open android
+```
+
+- Sync the app after new capacitor plugin installation:
+
+```bash
+npx cap sync
+```
+
+- Generate app icons and splash screens ([docs](https://github.com/ionic-team/capacitor-assets)):
+
+```bash
+npx @capacitor/assets generate --assetPath 'public/static/capacitor' --iconBackgroundColor '#FFFFFF' --iconBackgroundColorDark '#111827' --splashBackgroundColor '#F3F4F6' --splashBackgroundColorDark '#1F2937' --ios --android
+```

package/index.pcss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/package.json

@@ -1,53 +1,70 @@
 {
   "name": "vueless",
-  "version": "0.0.3",
-  "description": "Vue Styleless Component Framework",
-  "homepage": "https://github.com/vuelessjs/vueless#readme",
-  "author": "Johnny Grid",
+  "version": "0.0.5",
   "license": "MIT",
+  "description": "Vue Styleless Component Framework.",
+  "homepage": "https://vueless.com",
+  "author": "Johnny Grid",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vuelessjs/vueless.git"
-  },
-  "bugs": {
-    "url": "https://github.com/vuelessjs/vueless/issues"
+    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/ tests/",
+    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/ tests/",
+    "lint:ci": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore --max-warnings=0",
+    "release": "release-it patch --ci",
+    "release:production": "release-it minor --ci",
+    "release:production-major": "release-it major --ci",
+    "sb:dev-full": "STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
+    "sb:dev": "storybook dev -p 6006 --docs --no-open",
+    "sb:build": "NO_PWA=1 storybook build --docs",
+    "sb:preview": "vite preview --host --outDir=storybook-static",
+    "vueless:update": "yarn add -D file:../vite-plugin-vueless file:../vueless-storybook",
+    "postinstall": "node .web-types-gen"
   },
   "dependencies": {
+    "@kyvg/vue3-notification": "^3.2.1",
+    "@material-symbols/svg-500": "^0.14.3",
+    "@tailwindcss/forms": "^0.5.4",
     "@uppy/core": "^3.3.1",
     "@uppy/drag-drop": "^3.0.2",
     "@uppy/vue": "^1.0.2",
     "cva": "^1.0.0-beta.1",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.get": "^4.4.2",
-    "lodash.isequal": "^4.5.0",
-    "lodash.merge": "^4.6.2",
-    "lodash.pick": "^4.4.0",
-    "lodash.range": "^3.2.0",
+    "lodash-es": "^4.17.21",
     "tailwind-merge": "^2.1.0",
-    "vue-tippy": "^6.0.0-beta.0"
+    "tailwindcss": "^3.3.3",
+    "vue-tippy": "^6.0.0-beta.0",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@material-symbols/svg-500": "^0.14.3",
-    "@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",
-    "@tailwindcss/forms": "^0.5.4",
-    "autoprefixer": "^10.4.5",
-    "prettier2": "npm:prettier@2.8.8",
-    "storybook": "^8.0.0",
-    "svgo": "^3.2.0",
-    "tailwindcss": "^3.3.3"
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "^3.4.19",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vueless/storybook": "file:../vueless-storybook",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.55.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-tailwindcss": "^3.14.0",
+    "eslint-plugin-vue": "^9.19.2",
+    "globby": "^13.2.2",
+    "postcss": "^8.4.7",
+    "prettier": "^3.1.0",
+    "prettier-eslint": "^16.3.0",
+    "vite": "^5.1.1",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-vueless": "file:../vite-plugin-vueless",
+    "vue": "^3.4.19",
+    "vue-i18n": "^9.9.1",
+    "vue-router": "^4.2.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuelessjs/vueless.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vuelessjs/vueless/issues"
   },
   "web-types": "./web-types.json"
 }

package/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
+  },
+};

package/{composable.ui → src/composable.ui}/index.js

@@ -8,7 +8,7 @@ import {
   Text,
   Fragment,
 } from "vue";
-import { cx, globalComponentConfig, strategy } from "vueless/service.ui";
+import { cx, globalComponentConfig, strategy } from "../service.ui";
 
 const strategyType = {
   merge: "merge",
@@ -63,6 +63,9 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
       "child-config-key": isDev && attrs.component ? configKey : null,
     };
 
+    // Delete value key to prevent v-model overwrite
+    delete commonAttrs.value;
+
     watchEffect(() => {
       const configKeyValue = config.value[configKey];
       const isObject = typeof configKeyValue === "object";

package/src/library.web-types-gen/index.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+import minimist from "minimist";
+import { extractConfig } from "./lib/config.js";
+import build from "./lib/build.js";
+
+const {
+  _: pathArray,
+  configFile,
+  watch,
+  cwd,
+} = minimist(process.argv.slice(2), {
+  alias: { c: "configFile", w: "watch" },
+});
+
+const conf = await extractConfig(cwd || process.cwd(), watch, configFile, pathArray);
+
+build(conf);

package/src/library.web-types-gen/lib/build.js

@@ -0,0 +1,252 @@
+import path from "path";
+import { globbySync } from "globby";
+import * as chokidar from "chokidar";
+import { parse } from "vue-docgen-api";
+import * as fs from "fs";
+import mkdirp from "mkdirp";
+import _ from "lodash-es";
+import { merge } from "lodash-es";
+
+export default async function build(config) {
+  config.componentsRoot = path.resolve(config.cwd, config.componentsRoot);
+  config.outFile = path.resolve(config.cwd, config.outFile);
+
+  // then create the watcher if necessary
+  const { watcher, componentFiles } = getSources(config.components, config.componentsRoot);
+
+  // eslint-disable-next-line no-console
+  console.log("Building web-types to " + config.outFile);
+
+  const cache = {};
+  const buildWebTypesBound = rebuild.bind(null, config, componentFiles, cache, watcher);
+
+  try {
+    await buildWebTypesBound();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error("Error building web-types: " + e.message);
+    await watcher.close();
+
+    return;
+  }
+
+  if (config.watch) {
+    watcher
+      .on("add", buildWebTypesBound)
+      .on("change", buildWebTypesBound)
+      .on("unlink", async (filePath) => {
+        // eslint-disable-next-line no-console
+        console.log("Rebuilding on file removal " + filePath);
+        delete cache[filePath];
+        await writeDownWebTypesFile(config, Object.values(cache), config.outFile);
+      });
+  } else {
+    await watcher.close();
+  }
+}
+
+function getSources(components, cwd) {
+  const watcher = chokidar.watch(components, { cwd });
+
+  const allComponentFiles = globbySync(components, { cwd });
+
+  return { watcher, componentFiles: allComponentFiles };
+}
+
+async function rebuild(config, files, cachedContent, watcher, changedFilePath) {
+  const cacheWebTypesContent = async (filePath) => {
+    cachedContent[filePath.replace(/\\/g, "/")] = await extractInformation(
+      path.join(config.componentsRoot, filePath),
+      config,
+    );
+
+    return true;
+  };
+
+  if (changedFilePath) {
+    // eslint-disable-next-line no-console
+    console.log("Rebuilding on update file " + changedFilePath);
+
+    try {
+      // if in chokidar mode (watch), the path of the file that was just changed
+      // is passed as an argument. We only affect the changed file and avoid re-parsing the rest
+      await cacheWebTypesContent(changedFilePath);
+    } catch (e) {
+      throw new Error(
+        `Error building file ${config.outFile} when file ${changedFilePath} has changed: ${e.message}`,
+      );
+    }
+  } else {
+    try {
+      // if we are initializing the current file, parse all components
+      await Promise.all(files.map(cacheWebTypesContent));
+    } catch (e) {
+      throw new Error(`Error building file ${config.outFile}: ${e.message}`);
+    }
+  }
+
+  // and finally save all concatenated values to the markdown file
+  await writeDownWebTypesFile(config, Object.values(cachedContent), config.outFile);
+}
+
+async function writeDownWebTypesFile(config, definitions, destFilePath) {
+  const destFolder = path.dirname(destFilePath);
+
+  await mkdirp(destFolder);
+  let writeStream = fs.createWriteStream(destFilePath);
+  const contents = {
+    framework: "vue",
+    name: config.packageName,
+    version: config.packageVersion,
+    contributions: {
+      html: {
+        "description-markup": config.descriptionMarkup,
+        "types-syntax": config.typesSyntax,
+        tags: _(definitions)
+          .flatMap((d) => d.tags || [])
+          .orderBy("name", "asc")
+          .value(),
+        attributes: _(definitions)
+          .flatMap((d) => d.attributes || [])
+          .orderBy("name", "asc")
+          .value(),
+        "vue-filters": _(definitions)
+          .flatMap((d) => d["vue-filters"] || [])
+          .orderBy("name", "asc")
+          .value(),
+      },
+    },
+  };
+
+  const html = contents.contributions.html;
+
+  if (html.tags?.length == 0) html.tags = undefined;
+  if (html.attributes?.length == 0) html.attributes = undefined;
+  if (html["vue-filters"]?.length == 0) html["vue-filters"] = undefined;
+
+  writeStream.write(JSON.stringify(contents, null, 2));
+
+  // close the stream
+  writeStream.close();
+}
+
+function ensureRelative(path) {
+  // The .replace() is a fix for paths that end up like "./src\\components\\General\\VerticalButton.vue" on windows machines.
+  return (path.startsWith("./") || path.startsWith("../") ? path : "./" + path).replace(/\\/g, "/");
+}
+
+async function extractInformation(absolutePath, config) {
+  const doc = await parse(absolutePath, config.apiOptions);
+  const name = doc.name || doc.displayName;
+  let description = doc.description?.trim() ?? "";
+
+  // Get default component config
+  const configPath = path.join(path.dirname(absolutePath), "configs/default.config.js");
+  let globalConfig = null;
+  let defaultConfig = null;
+  let defaultValues = null;
+
+  if (fs.existsSync(configPath)) {
+    const defaultConfigFile = fs.readFileSync(configPath).toString();
+    const globalConfigFile = fs.readFileSync(config.cwd + "/vueless.config.js").toString();
+
+    defaultConfig = getDefaultConfigJson(defaultConfigFile);
+    globalConfig = getGlobalConfigJson(globalConfigFile, name);
+    defaultValues = merge(defaultConfig.defaultVariants, globalConfig[name]?.defaultVariants);
+  }
+
+  function getDefaultConfigJson(fileContents) {
+    const objectStartIndex = fileContents.indexOf("{");
+    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}:`);
+
+    // 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 stringWithoutComments = rawString.replace(/\/\/.*$/gm, "");
+
+    // Check if final JSON string is valid: TODO: find better solution
+    if (!stringWithoutComments.includes("}")) return {};
+
+    const jsonString = `{${stringWithoutComments}\n}}`
+      .replace(/[`']/g, '"')
+      .replace(/(\w+)\s*: /g, '"$1":')
+      .replace(/,\s*}/g, "}");
+
+    return JSON.parse(jsonString);
+  }
+
+  doc.docsBlocks?.forEach((block) => {
+    if (description.length > 0) {
+      if (config.descriptionMarkup === "html") {
+        description += "<br/><br/>";
+      } else {
+        description += "\n\n";
+      }
+    }
+
+    description += block;
+  });
+
+  return {
+    tags: [
+      {
+        name,
+        description,
+        attributes: doc.props?.map((prop) => ({
+          name: prop.name,
+          required: prop.required,
+          description: prop.tags?.ignore ? "@ignore: " + prop.description : prop.description,
+          value: {
+            kind: "expression",
+            type: prop.values ? `'${prop.values.join("' | '")}'` : prop.type?.name ?? "any",
+          },
+          default:
+            defaultValues && prop.name in defaultValues
+              ? defaultValues[prop.name].toString()
+              : prop.defaultValue?.value.toString(),
+        })),
+        events: doc.events?.map((event) => ({
+          name: event.name,
+          description: event.description,
+        })),
+        slots: doc.slots?.map((slot) => ({
+          name: slot.name,
+          description: slot.description,
+        })),
+        source: {
+          module: ensureRelative(path.relative(config.cwd, absolutePath)).substring(1), // TODO: maybe substring should be removed when it turns to package
+          symbol: doc.exportName,
+        },
+      },
+    ],
+  };
+}

package/src/library.web-types-gen/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/{plugin.vite → src/plugin.vite}/services/iconResolver.service.js

@@ -11,7 +11,7 @@
 import fs from "fs";
 import path from "path";
 import { createRequire } from "node:module";
-import merge from "lodash.merge";
+import { merge } from "lodash-es";
 
 import vuelessConfig from "../../../vueless.config.js";
 

package/{plugin.vite → src/plugin.vite}/services/tailwindSafelist.service.js

@@ -68,8 +68,6 @@ export function createTailwindSafelist() {
   });
 
   process.env.SAFELIST_JSON = JSON.stringify(safelist);
-
-  console.log(process.env.SAFELIST_JSON);
 }
 
 function getFiles(dirPath, extension, fileList) {

package/{service.tailwind → src/service.tailwind}/index.js

@@ -81,6 +81,8 @@ export default class TailwindServiceDefault {
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx,vue}",
         "./vueless.config.{js,ts}",
+        "./node_modules/vueless/**/*.{js,ts,vue}",
+        // TODO: remove it after creating the package
         "./.vueless/**/*.{js,ts,vue}",
         "./.vueless-layouts/**/*.{js,ts,vue}",
         "./.vueless-services/**/*.{js,ts,vue}",

package/{service.ui → src/service.ui}/index.js

@@ -1,4 +1,4 @@
-import merge from "lodash.merge";
+import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
 import colors from "tailwindcss/colors";

package/{ui.button-toggle-item → src/ui.button}/Docs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "vueless/service.storybook";
+import { getSource } from "../service.storybook";
 
 import * as stories from "./index.stories";
 import defaultConfig from "./configs/default.config?raw"

package/{ui.button → src/ui.button}/composables/attrs.composable.js

@@ -1,6 +1,6 @@
 import { computed } from "vue";
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 

package/{ui.button → src/ui.button}/configs/default.config.js

@@ -150,6 +150,7 @@ export default /*tw*/ {
     variant: "primary",
     size: "md",
     pill: false,
+    block: false,
     square: false,
     filled: false,
     loading: false,

package/{ui.button → src/ui.button}/index.stories.js

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-import UGroup from "vueless/ui.container-group";
+import UButton from "../ui.button";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "1010",