vueless 0.0.3 → 0.0.4

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.4",
   "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/src/composable.ui/index.js

@@ -0,0 +1,395 @@
+import {
+  ref,
+  watchEffect,
+  getCurrentInstance,
+  toValue,
+  useAttrs,
+  Comment,
+  Text,
+  Fragment,
+} from "vue";
+import { cx, globalComponentConfig, strategy } from "../service.ui";
+
+const strategyType = {
+  merge: "merge",
+  replace: "replace",
+  overwrite: "overwrite",
+};
+
+/**
+  Merging component configs in a given sequence (bigger number = bigger priority):
+  1. Default component config
+  2. Custom global component config (/vueless.config.js)
+  3. Component config (:config="{...}" props)
+  4. Component classes (class="...")
+ */
+export default function useUI(defaultConfig = {}, propsConfigGetter = null, topLevelClassKey) {
+  const { name: componentName } = getCurrentInstance().type;
+  const globalConfig = globalComponentConfig[componentName];
+
+  const isStrategyValid = strategy && Object.values(strategyType).includes(strategy);
+  const vuelessStrategy = isStrategyValid ? strategy : strategyType.merge;
+
+  const [firstClassKey] = Object.keys(defaultConfig);
+  const config = ref({});
+  const attrs = useAttrs();
+
+  watchEffect(() => {
+    const propsConfig = propsConfigGetter && propsConfigGetter();
+
+    const mergedConfig = getMergedConfig({
+      defaultConfig,
+      globalConfig,
+      propsConfig,
+      vuelessStrategy,
+    });
+
+    config.value = mergeClassesIntoConfig(mergedConfig, topLevelClassKey || firstClassKey, attrs);
+  });
+
+  function getAttrs(configKey, options) {
+    const cvaClasses = options?.classes || "";
+    const isComponent = options?.isComponent;
+
+    const attrs = useAttrs();
+    const isDev = import.meta.env.DEV;
+    const vuelessAttrs = ref({});
+
+    const commonAttrs = {
+      ...attrs,
+      component: isDev && (attrs.component || componentName || null),
+      "config-key": isDev && (attrs["config-key"] || configKey || null),
+      "child-component": isDev && attrs.component ? componentName : null,
+      "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";
+
+      const configAttrs = {
+        config: configKeyValue,
+        ...configKeyValue?.defaultVariants,
+      };
+
+      const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
+
+      const attrClass = isTopLevelClassKey && !isComponent ? attrs.class : "";
+      const configKeyClass = isObject ? configKeyValue.base : configKeyValue;
+
+      vuelessAttrs.value = {
+        ...commonAttrs,
+        class: cx([configKeyClass, toValue(cvaClasses), attrClass]),
+        ...((isObject && configAttrs) || {}),
+      };
+    });
+
+    return vuelessAttrs;
+  }
+
+  return {
+    config,
+    getAttrs,
+    setColor,
+    hasSlotContent,
+  };
+}
+
+/**
+  Get merged config based on config merging strategy.
+  @param {Object} defaultConfig
+  @param {Object} globalConfig
+  @param {Object} propsConfig
+  @param {string} vuelessStrategy - vueless top level merge strategy.
+
+  @returns {Object}
+ */
+function getMergedConfig({ defaultConfig, globalConfig, propsConfig, vuelessStrategy }) {
+  defaultConfig = cloneDeep(defaultConfig);
+
+  const strategy =
+    !globalConfig && !propsConfig
+      ? strategyType.merge
+      : propsConfig?.strategy || globalConfig?.strategy || vuelessStrategy;
+
+  if (strategy === strategyType.merge) {
+    return mergeConfigs({ defaultConfig, globalConfig, propsConfig });
+  }
+
+  if (strategy === strategyType.replace) {
+    return mergeConfigs({ defaultConfig, globalConfig, propsConfig, isReplace: true });
+  }
+
+  if (strategy === strategyType.overwrite) {
+    const isGlobalConfig = globalConfig && Object.keys(globalConfig).length;
+    const isPropsConfig = propsConfig && Object.keys(propsConfig).length;
+
+    return isPropsConfig ? propsConfig : isGlobalConfig ? globalConfig : defaultConfig;
+  }
+}
+
+/**
+  Recursively merge config objects with removing tailwind classes duplicates.
+  @param {Object} defaultConfig
+  @param {Object} globalConfig
+  @param {Object} propsConfig
+  @param {Object} config - final merged config.
+  @param {boolean} isReplace - enables class replacement instead of merge.
+
+  @returns {Object}
+ */
+function mergeConfigs({
+  defaultConfig,
+  globalConfig,
+  propsConfig,
+  config = {},
+  isReplace = false,
+}) {
+  globalConfig = globalConfig || {};
+  propsConfig = propsConfig || {};
+
+  const isGlobalConfig = Object.keys(globalConfig).length;
+  const isPropsConfig = Object.keys(propsConfig).length;
+
+  // Add unique keys from defaultConfig to composedConfig
+  let composedConfig = cloneDeep(defaultConfig);
+
+  // Add unique keys from globalConfig to composedConfig
+  for (let key in globalConfig) {
+    if (!Object.keys(composedConfig).includes(key)) {
+      composedConfig[key] = globalConfig[key];
+    }
+  }
+
+  // Add unique keys from propsConfig to composedConfig
+  for (let key in propsConfig) {
+    if (!Object.keys(composedConfig).includes(key)) {
+      composedConfig[key] = propsConfig[key];
+    }
+  }
+
+  for (let key in composedConfig) {
+    if (isGlobalConfig || isPropsConfig) {
+      if (key === "strategy") {
+        config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
+      } else if (key === "defaultVariants") {
+        config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };
+      } else if (key === "compoundVariants") {
+        config[key] = mergeCompoundVariants({
+          defaultConfig: composedConfig,
+          globalConfig,
+          propsConfig,
+          isReplace,
+          key,
+        });
+      } else {
+        const isObjectComposedConfig = typeof composedConfig[key] === "object";
+        const isObjectGlobalConfig = typeof globalConfig[key] === "object";
+        const isObjectPropsConfig = typeof propsConfig[key] === "object";
+
+        const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
+        const isEmpty = composedConfig[key] === null;
+        const isIconName = /^.*(iconName|IconName)$/.test(key);
+        const isI18n = key === "i18n";
+
+        config[key] =
+          isObject && !isEmpty && !isI18n
+            ? mergeConfigs({
+                defaultConfig: stringToObject(composedConfig[key]),
+                globalConfig: stringToObject(globalConfig[key]),
+                propsConfig: stringToObject(propsConfig[key]),
+                config: stringToObject(composedConfig[key]),
+                isReplace,
+              })
+            : isReplace || isIconName || isI18n
+              ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
+              : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
+      }
+    } else {
+      config[key] = composedConfig[key];
+    }
+  }
+
+  return config;
+}
+
+/**
+  Turn simplified nested component config to regular config.
+  @param {Object | String} value
+  @returns {Object}
+ */
+function stringToObject(value) {
+  return typeof value === "object" ? value : { base: value };
+}
+
+/**
+  Merge CVA compound variants arrays.
+  @param {Object} defaultConfig
+  @param {Object} globalConfig
+  @param {Object} propsConfig
+  @param {string} key
+  @param {boolean} isReplace - enables class replacement instead of merge.
+
+  @returns {Array}
+ */
+function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, key, isReplace }) {
+  if (
+    (globalConfig[key] && !Array.isArray(globalConfig[key])) ||
+    (propsConfig[key] && !Array.isArray(propsConfig[key])) ||
+    (defaultConfig[key] && !Array.isArray(defaultConfig[key]))
+  ) {
+    // eslint-disable-next-line no-console
+    console.error("CompoundVariants should be an array.");
+  }
+
+  let globalConfigUniqueItems = cloneDeep(globalConfig[key] || []);
+  let propsConfigUniqueItems = cloneDeep(propsConfig[key] || []);
+
+  const config = defaultConfig[key].map((defaultConfigItem) => {
+    /**
+     Compare two objects by keys for match.
+     @param {Object} configItem
+     @returns {Boolean}
+     */
+    function isSameItem(configItem) {
+      const hasConfigItemKeys = Object.keys(defaultConfigItem)
+        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+        .every((item) => !!item);
+
+      const hasDefaultConfigItemKeys = Object.keys(configItem)
+        .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+        .every((item) => !!item);
+
+      return hasConfigItemKeys && hasDefaultConfigItemKeys;
+    }
+
+    /**
+     Find the same compound variant item in custom config if exist.
+     @param {Object} config
+     @returns {Object|undefined}
+     */
+    function findItem(config = []) {
+      const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
+      const propsConfigUniqueItemIndex = propsConfigUniqueItems.findIndex(isSameItem);
+
+      if (~globalConfigUniqueItemIndex) {
+        globalConfigUniqueItems.splice(globalConfigUniqueItemIndex, 1);
+      }
+
+      if (~propsConfigUniqueItemIndex) {
+        propsConfigUniqueItems.splice(propsConfigUniqueItemIndex, 1);
+      }
+
+      return config.find(isSameItem);
+    }
+
+    const globalConfigItem = findItem(globalConfig[key]);
+    const propsConfigItem = findItem(propsConfig[key]);
+
+    return globalConfigItem || propsConfigItem
+      ? {
+          ...defaultConfigItem,
+          class: isReplace
+            ? propsConfigItem?.class || globalConfigItem?.class || defaultConfigItem.class
+            : cx([defaultConfigItem.class, globalConfigItem?.class, propsConfigItem?.class]),
+        }
+      : defaultConfigItem;
+  });
+
+  return [...config, ...globalConfigUniqueItems, ...propsConfigUniqueItems];
+}
+
+/**
+  Merge component classes from "class" attribute into final config.
+  @param {Object} config
+  @param {Object} attrs
+  @param {string} topLevelClassKey
+
+  @returns {Object}
+ */
+function mergeClassesIntoConfig(config, topLevelClassKey, attrs) {
+  if (typeof config[topLevelClassKey] === "object") {
+    config[topLevelClassKey].base = cx([config[topLevelClassKey]?.base, attrs.class]);
+  } else {
+    config[topLevelClassKey] = cx([config[topLevelClassKey], attrs.class]);
+  }
+
+  return config;
+}
+
+/**
+  Check if slot defined, and have a content.
+  @param slot
+  @param props
+
+  @returns {boolean}
+ */
+function hasSlotContent(slot, props = {}) {
+  const asArray = (arg) => (Array.isArray(arg) ? arg : arg != null ? [arg] : []);
+
+  const isVNodeEmpty = (vnode) => {
+    return (
+      !vnode ||
+      asArray(vnode).every(
+        (vnode) =>
+          vnode.type === Comment ||
+          (vnode.type === Text && !vnode.children?.length) ||
+          (vnode.type === Fragment && !vnode.children?.length),
+      )
+    );
+  };
+
+  return !isVNodeEmpty(slot?.(props));
+}
+
+/**
+ Deeply clone given object (same as lodash.cloneDeep).
+ @param {Object} entity
+ @param cache
+
+ @returns {Object}
+ */
+function cloneDeep(entity, cache = new WeakMap()) {
+  const referenceTypes = ["Array", "Object", "Map", "Set", "Date"];
+  const entityType = Object.prototype.toString.call(entity);
+
+  if (
+    !new RegExp(referenceTypes.join("|")).test(entityType) ||
+    entity instanceof WeakMap ||
+    entity instanceof WeakSet
+  ) {
+    return entity;
+  }
+
+  if (cache.has(entity)) {
+    return cache.get(entity);
+  }
+
+  const c = new entity.constructor();
+
+  if (entity instanceof Map) {
+    entity.forEach((value, key) => c.set(cloneDeep(key), cloneDeep(value)));
+  }
+
+  if (entity instanceof Set) {
+    entity.forEach((value) => c.add(cloneDeep(value)));
+  }
+
+  if (entity instanceof Date) {
+    return new Date(entity);
+  }
+
+  cache.set(entity, c);
+
+  return Object.assign(
+    c,
+    ...Object.keys(entity).map((prop) => ({ [prop]: cloneDeep(entity[prop], cache) })),
+  );
+}
+
+function setColor(classes, color) {
+  return classes?.replaceAll("{color}", color);
+}