Merge branch 'refactor/vite-docs' into origin/master

.eslintrc.js

@@ -2,14 +2,11 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    es2022: true,
   },
   extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
+    'plugin:vue/vue3-recommended',
   ],
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-  },
   rules: {
     'no-console': 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -21,15 +18,4 @@ module.exports = {
     indent: 'off',
     'no-param-reassign': ['error', { props: false }],
   },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)',
-      ],
-      env: {
-        jest: true,
-      },
-    },
-  ],
 };

.gitignore

@@ -1,13 +1,9 @@
 .DS_Store
 node_modules
 /dist
-/docs-dist
+/docs/.vitepress/cache
+/docs/.vitepress/dist
 /coverage
-demo.html
-jest.json
-
-docs/node_modules
-docs/dist
 
 # local env files
 .env.local

docs/.vitepress/config.mjs

@@ -0,0 +1,54 @@
+import { globbySync } from 'globby';
+import path from 'path';
+import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
+import { defineConfig } from 'vitepress';
+
+const sidebarHowTo = globbySync('pages/docs/how-to/**/Readme.md', { cwd: path.resolve(__dirname, '../') });
+const sidebarComponents = globbySync('pages/webitel-ui/components/**/Readme.md', { cwd: path.resolve(__dirname, '../') });
+const sidebarValidators = globbySync('pages/webitel-ui/validators/**/Readme.md', { cwd: path.resolve(__dirname, '../') });
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'Webitel UI',
+  description: 'Webitel UI docs',
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@import "./src/css/main.scss";`,
+        },
+      },
+    },
+    plugins: [
+      createSvgSpritePlugin({
+        include: '**/sprite/*.svg',
+      }),
+    ],
+  },
+
+  // additionalData: `@import "../../src/css/main.scss";`,
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+    ],
+    sidebar: [
+      { text: 'How To', items: sidebarHowTo },
+      { text: 'Components', items: sidebarComponents },
+      { text: 'Validators', items: sidebarValidators },
+    ].map(({ text, items }) => (
+      {
+        text,
+        items: items.map(doc => {
+          return {
+            text: doc.split('/').at(-2), // get only folder name, where Readme.md is located
+            link: '/' + doc.replace(/\.md$/, ''),
+          };
+        }),
+      })),
+
+    // socialLinks: [
+    //   { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+    // ]
+  },
+});

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,26 @@
+<!-- .vitepress/theme/Layout.vue -->
+
+<script setup>
+import { useData } from 'vitepress';
+import DefaultTheme from 'vitepress/theme';
+import { provide } from 'vue';
+
+const { isDark } = useData();
+
+const toggleComponentsDarkTheme = (value) => {
+  const html = document.querySelector('html');
+  if (value) html.classList.add('theme--dark');
+  else html.classList.remove('theme--dark');
+};
+
+toggleComponentsDarkTheme(isDark.value);
+
+provide('toggle-appearance', () => {
+  isDark.value = !isDark.value;
+  toggleComponentsDarkTheme(isDark.value);
+});
+</script>
+
+<template>
+  <DefaultTheme.Layout />
+</template>

docs/.vitepress/theme/index.js

@@ -0,0 +1,22 @@
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme';
+import WebitelUI from '../../../src/install.js';
+import i18n from '../../../src/locale/i18n';
+import sharedComponents from '../../shared';
+import '../../../src/assets//icons/sprite';
+import 'prismjs/themes/prism.min.css';
+import Layout from './Layout.vue';
+
+/** @type {import('vitepress').Theme} */
+export default {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp({ app }) {
+    app.use(i18n);
+    WebitelUI.install(app, {});
+    Object.keys(sharedComponents).forEach((name) => {
+      app.component(name, sharedComponents[name]);
+    });
+    return app;
+  },
+};

docs/index.md

@@ -0,0 +1 @@
+# Webitel UI Docs