vueless 0.0.13 → 0.0.14

package/README.md

@@ -1,174 +1,55 @@
-## How to run the project locally
+![logo.png](public/images/vueless-logo-git.png)
 
-- Install **node.js 16.XX** version (see [instructions](https://nodejs.org/en/download/package-manager/) for your OS).
+## Vueless UI
 
-- Install globally [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable):
+* [Documentation](https://docs.vueless.com/)
+* [UI Components](https://ui.vueless.com/)
+* [Website](http://vueless.com/)
 
-```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
-```
+## Quick Start
 
-- Create environment file:
+1. Install `vueless` UI library packages.
 
 ```bash
-#  for local environment
-cp .env.local.example .env.local
+npm install vueless @vueless/plugin-vite
 ```
 
-- 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):
+2. Create `vueless.config.js` at the root of the project.
 
-  - 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
+```javascript filename="vueless.config.js" title="vueless.config.js"
+export default {
+  color: {},
+  component: {},
+};
 ```
 
-- Run code-style check / formatting:
+3. Add TailwindCSS preset.
 
-```bash
-# check code style (only show errors)
-yarn lint
-
-# check code style and fix all possible errors
-yarn lint:fix
+```javascript
+import { vuelessPreset } from "vueless/preset.tailwind";
 
-# check code style of given file paths (fail pipeline if at least 1 error or warning appears)
-yarn lint:ci
+export default {
+  presets: [vuelessPreset],
+  ...
+};
 ```
 
-- Run auto tests:
+4. Add Vite plugins.
 
-```bash
-# start unit tests
-yarn test:unit
+```javascript
+import { Vueless, VuelessUnpluginComponents } from "@vueless/plugin-vite";
 
-# start end to end tests
-yarn test:e2e
-
-# start end to end tests in headless mode (no UI)
-yarn test:e2e-ci
+export default defineConfig({
+  plugins: [
+    ...
+    Vueless(),
+    VuelessUnpluginComponents(),
+  ],
+  ...
+})
 ```
 
-- Build application:
+That's it! You can use components in your app now ✨
 
-```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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -19,7 +19,7 @@
     "sb:build": "STORYBOOK_VUELESS_ENV=1 storybook build",
     "sb:preview": "vite preview --host --outDir=storybook-static",
     "vueless:update": "yarn add -D file:../vite-plugin-vueless file:../vueless-storybook",
-    "vueless:prepare": "rm -rf dist && mkdir -p dist && cp -r src/* package.json LICENSE web-types.json README.md  dist/ && node .web-types-gen"
+    "vueless:prepare": "node .web-types-gen && rm -rf dist && mkdir -p dist && cp -r src/* package.json LICENSE web-types.json README.md  dist/"
   },
   "dependencies": {
     "@kyvg/vue3-notification": "^3.2.1",
@@ -59,9 +59,6 @@
     "vite-plugin-eslint": "^1.8.1",
     "vue": "^3.4.19"
   },
-  "resolutions": {
-    "string-width": ">=4.2.3"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuelessjs/vueless.git"

package/preset.tailwind/index.js

@@ -0,0 +1,95 @@
+import colors from "tailwindcss/colors.js";
+import forms from "@tailwindcss/forms";
+import vuelessConfig from "../../../vueless.config.js";
+
+export const grayColors = ["slate", "gray", "zinc", "neutral", "stone"];
+export const brandColors = [
+  "brand",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+];
+
+/**
+ * Generates preset for TailwindCSS base on Vueless config.
+ * @returns {Object}
+ */
+export function vuelessPreset() {
+  const isProd = process.env.NODE_ENV === "production";
+  const brandColor = twColorWithOpacity("--color-brand");
+  const { brand, gray } = vuelessConfig;
+
+  let brandPalette = brandColors.includes(brand) ? colors[brand] : colors.green;
+  let grayPalette = grayColors.includes(gray) ? colors[gray] : colors.zinc;
+
+  if (brand === "grayscale") {
+    brandPalette = grayPalette;
+  }
+
+  const prodSafelist = getSafelist();
+  const devSafelist = [
+    {
+      pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
+      variants: ["hover", "focus", "focus-within", "active"],
+    },
+  ];
+
+  return {
+    content: [
+      "./index.html",
+      "./src/**/*.{js,ts,jsx,tsx,vue}",
+      "./vueless.config.{js,ts}",
+      "./node_modules/vueless/**/*.{js,ts,vue}",
+    ],
+    safelist: isProd ? prodSafelist : devSafelist,
+    theme: {
+      extend: {
+        colors: {
+          brand: { ...brandPalette, DEFAULT: brandColor },
+          gray: grayPalette,
+        },
+        fontSize: {
+          "2xs": ["0.625rem", "0.875rem"], //  10px
+        },
+      },
+    },
+    plugins: [forms],
+  };
+}
+
+/**
+ * Transform CSS variable with RGB numbers into CSS color.
+ * @returns {Function}
+ */
+function twColorWithOpacity(variableName) {
+  return ({ opacityValue }) => {
+    return opacityValue !== undefined
+      ? `rgba(var(${variableName}), ${opacityValue})`
+      : `rgb(var(${variableName}))`;
+  };
+}
+
+/**
+ * Convert sting patterns to RegExp.
+ * @returns {Array} - TailwindCSS safelist.
+ */
+function getSafelist() {
+  return JSON.parse(process.env.SAFELIST_JSON || "[]").map((rule) => ({
+    ...rule,
+    pattern: new RegExp(rule.pattern),
+  }));
+}

package/service.storybook/index.js

@@ -1,4 +1,4 @@
-import { contributions } from "/web-types.json";
+import { contributions } from "../web-types.json";
 
 const getComponentData = (componentName) => {
   return contributions.html.tags.find((item) => item.name === componentName);

package/service.ui/index.js

@@ -2,7 +2,7 @@ import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
 import colors from "tailwindcss/colors";
-import { brandColors, grayColors } from "../service.tailwind";
+import { brandColors, grayColors } from "../preset.tailwind";
 import vuelessConfig from "../../../vueless.config.js";
 
 /*

package/ui.navigation-stepper/index.vue

@@ -46,7 +46,7 @@ import colors from "tailwindcss/colors";
 
 import UHeader from "../ui.text-header";
 import UIService from "../service.ui";
-import { grayColors } from "../service.tailwind";
+import { grayColors } from "../preset.tailwind";
 
 import { UStepper } from "./constants/index";
 import defaultConfig from "./configs/default.config";

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.8",
+  "version": "0.0.14",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/service.tailwind/index.js

@@ -1,103 +0,0 @@
-import colors from "tailwindcss/colors.js";
-import forms from "@tailwindcss/forms";
-import vuelessConfig from "../../vueless.config.js";
-
-export const grayColors = ["slate", "gray", "zinc", "neutral", "stone"];
-export const brandColors = [
-  "brand",
-  "red",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose",
-];
-
-export default class TailwindServiceDefault {
-  constructor() {
-    this.vuelessPreset = this.get();
-  }
-
-  /**
-   * Transform CSS variable with RGB numbers into CSS color.
-   * @returns {Function}
-   */
-  static twColorWithOpacity(variableName) {
-    return ({ opacityValue }) => {
-      return opacityValue !== undefined
-        ? `rgba(var(${variableName}), ${opacityValue})`
-        : `rgb(var(${variableName}))`;
-    };
-  }
-
-  /**
-   * Convert sting patterns to RegExp.
-   * @returns {Array} - TailwindCSS safelist.
-   */
-  static getSafelist() {
-    return JSON.parse(process.env.SAFELIST_JSON || "[]").map((rule) => ({
-      ...rule,
-      pattern: new RegExp(rule.pattern),
-    }));
-  }
-
-  /**
-   * Generates preset for TailwindCSS base on Vueless config.
-   * @returns {Object}
-   */
-  get() {
-    const isProd = process.env.NODE_ENV === "production";
-    const brandColor = TailwindServiceDefault.twColorWithOpacity("--color-brand");
-    const { brand, gray } = vuelessConfig;
-
-    let brandPalette = brandColors.includes(brand) ? colors[brand] : colors.green;
-    let grayPalette = grayColors.includes(gray) ? colors[gray] : colors.zinc;
-
-    if (brand === "grayscale") {
-      brandPalette = grayPalette;
-    }
-
-    const prodSafelist = TailwindServiceDefault.getSafelist();
-    const devSafelist = [
-      {
-        pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
-        variants: ["hover", "focus", "focus-within", "active"],
-      },
-    ];
-
-    return {
-      content: [
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx,vue}",
-        "./vueless.config.{js,ts}",
-        "./node_modules/vueless/**/*.{js,ts,vue}",
-      ],
-      safelist: isProd ? prodSafelist : devSafelist,
-      theme: {
-        extend: {
-          colors: {
-            brand: { ...brandPalette, DEFAULT: brandColor },
-            gray: grayPalette,
-          },
-          fontSize: {
-            "2xs": ["0.625rem", "0.875rem"], //  10px
-          },
-        },
-      },
-      plugins: [forms],
-    };
-  }
-}
-
-export const { vuelessPreset } = new TailwindServiceDefault();