@topvisor/ui 1.1.0 → 1.2.0

package/build/plugin/amdFix.ts

@@ -0,0 +1,83 @@
+import color from 'picocolors';
+import MagicString from 'magic-string';
+import type { Plugin } from 'vite';
+import type { RenderedChunk } from 'rollup';
+import { addImportCSSCodeAMD } from './autoloadCSS';
+
+/**
+ * Добавить импорт requre в amd модуль, необходимо для переопределения глобального require для относитльной навигации
+ * @param {MagicString} ms - код amd модуля
+ */
+const addLocalRequire = (ms: MagicString): MagicString => {
+	// ничего не делать, если локальный require уже определен
+	if (ms.toString().match(/[\[,]\s?'require'[,\]]/)) {
+		return ms;
+	}
+
+	// работа без define с зависимостями не поддерживается
+	if (!ms.toString().match(/define\(\[/)) {
+		return ms;
+	}
+
+	// полагаемся, что первое определение define() это то, что нам нужно
+	ms.replace('define([', `define(['require', `);
+
+	// полагаемся, что первое определение calback это то, что нам нужно
+	ms.replace(/function\s?\(/, 'function(require, ');
+
+	return ms;
+};
+
+/**
+ * Добавить импорт Vue в amd модуль
+ * @param {MagicString} ms - код amd модуля
+ */
+const fixVue = (ms: MagicString): MagicString => {
+	ms.replace(/'use strict';/g, '\'use strict\'; if(typeof vue === \'undefined\') var vue = window.Vue;');
+
+	return ms;
+};
+
+/**
+ * Удалить вставленные стили из amd модуля, которые долждны загружаться из файла
+ * @param {MagicString} ms - код amd модуля
+ */
+const removeInlineCSS = (ms: MagicString): MagicString => {
+	// amd as legacy: https://github.com/vitejs/vite/issues/2062#issuecomment-782388010
+	ms.replace(/var __vite_style__.*?document\.head\.appendChild\(__vite_style__\);/g, '');
+
+	return ms;
+};
+
+/**
+ * Опеределить значение переменной vue в импорте requriejs
+ *
+ * Vue не предоставляет export для amd
+ */
+export default (): Plugin => {
+	return {
+		name: 'vite:tv-amd-fix',
+		apply: 'build',
+		enforce: 'post',
+
+		renderChunk(code: string, chunk: RenderedChunk) {
+			if (chunk.fileName.includes('.amd.js') && code.includes('define(')) {
+				const ms = new MagicString(code);
+
+				console.log(`amdFix: ${color.yellow(chunk.name)}`);
+
+				// MagicString не должен содержать пересекающихся replace
+				// https://github.com/Rich-Harris/magic-string/issues/208
+				addLocalRequire(ms);
+				fixVue(ms);
+				removeInlineCSS(ms);
+				addImportCSSCodeAMD(ms, chunk.name);
+
+				return {
+					code: ms.toString(),
+					map: ms.generateMap(),
+				};
+			}
+		},
+	};
+}

package/build/plugin/autoloadCSS.ts

@@ -0,0 +1,155 @@
+import path from 'path';
+import color from 'picocolors';
+import MagicString from 'magic-string';
+import type { BuildOptions, LibraryOptions, Plugin, ResolvedConfig } from 'vite';
+import type { RenderedChunk } from 'rollup';
+
+export interface LibOptions extends LibraryOptions {
+	build?: BuildOptions;
+	rollupOptions?: BuildOptions['rollupOptions'];
+}
+
+// ассоциативный список ссылок на css по имени модуля
+const cssFileNamesByModuleName = new Map();
+
+/**
+ * Генерация js кода, который должен инициировать загрузку css при исполнении в js модуле
+ * @param fileName - относительный путь к файлу стилей от js модуля
+ */
+const addImportCSSCode = (ms: MagicString, moduleName: string, fileNames: Array<string>): MagicString => {
+	if (cssFileNamesByModuleName.has(moduleName)) {
+		throw new Error('Имя модуля уже испоьзуется, неохбодимо изменить алогортим сохранения css ссылок');
+	}
+
+	/**
+	 * forms является базовой бибилиотекой UI
+	 *
+	 * Стили forms не должны блокировать загрузку js
+	 *
+	 * Стили form должны грузиться в html страницы
+	 */
+	fileNames = fileNames.filter(fileName => fileName !== '../assets/forms.css');
+
+	cssFileNamesByModuleName.set(moduleName, fileNames);
+
+	console.log(`autoloadCSS: ${color.yellow(moduleName)} ${color.cyan(fileNames.join())}`);
+
+	if (!fileNames.length) {
+		console.log(`- no exists required css`);
+
+		return ms;
+	}
+
+	const importCSSCode = `
+		import { Core as _autoloadCSSCore } from '../core/app.js';
+		const fileNames = ['${fileNames.join(`', '`)}'].map(fileName => import.meta.resolve(fileName));
+		_autoloadCSSCore.insertCSSLinkToPage(fileNames, true);
+	`;
+
+	ms.prepend(importCSSCode + `\n`);
+
+	return ms;
+};
+
+/**
+ * Генерация js кода, который должен инициировать загрузку css при исполнении в js модуле
+ *
+ * Для amd модуля
+ */
+export const addImportCSSCodeAMD = (ms: MagicString, moduleName: string): MagicString => {
+	if (!cssFileNamesByModuleName.has(moduleName)) {
+		return ms;
+	}
+
+	// работа без define с зависимостями не поддерживается
+	if (!ms.toString().match(/define\(\[/)) {
+		return ms;
+	}
+
+	const fileNames = cssFileNamesByModuleName.get(moduleName);
+
+	if (!fileNames.length) {
+		return ms;
+	}
+
+	const dependenciesString = '\'../require/css.amd!' + fileNames.join('\', \'../require/css.amd!') + '\'';
+
+	// полагаемся, что "]" это то, что нам нужно в define()
+	ms.replace(/\]/, ', ' + dependenciesString + ']');
+
+	return ms;
+};
+
+/**
+ * Загрузить css через Page.addCss()
+ *
+ * Для ES
+ */
+export default (libOptions?: LibOptions): Plugin => {
+	let skipLoad = false;
+
+	return {
+		name: 'vite:tv-autoload-css',
+		apply: 'build',
+		enforce: 'post',
+
+		load(id: string) {
+			cssFileNamesByModuleName.clear();
+		},
+
+		configResolved({ build }: ResolvedConfig) {
+			const messages: string[] = [];
+
+			if (!build.lib) {
+				skipLoad = true;
+				messages.push('Current build is not in library mode, skip code injection.');
+			}
+
+			if (build.lib && !build.cssCodeSplit) {
+				messages.push(
+					'`config.build.cssCodeSplit` is set to `true` by the plugin internally in library mode, ' +
+					'but it seems to be `false` now. This may cause style code injection to fail, ' +
+					'please check the configuration to prevent this option from being modified.',
+				);
+			}
+
+			if (build.ssr && !build.ssrEmitAssets) {
+				messages.push(
+					'`config.build.ssrEmitAssets` is set to `true` by the plugin internally in library mode, ' +
+					'but it seems to be `false` now. This may cause style code injection to fail on SSR, ' +
+					'please check the configuration to prevent this option from being modified.',
+				);
+			}
+
+			messages.forEach(msg => console.log(`\n${color.cyan('[vite:lib-inject-css]:')} ${color.yellow(msg)}\n`));
+		},
+
+		renderChunk(code: string, chunk: RenderedChunk) {
+			if (skipLoad || !chunk.viteMetadata) {
+				return;
+			}
+
+			const { importedCss } = chunk.viteMetadata;
+
+			if (!importedCss.size) {
+				return;
+			}
+
+			const ms = new MagicString(code);
+			const cssFilePathes: string[] = [];
+			for (const cssFileName of importedCss) {
+				let cssFilePath = path.relative(path.dirname(chunk.fileName), cssFileName).replaceAll(/[\\/]+/g, '/'); // Replace all backslash or multiple slashes, fixed #9
+				cssFilePath = cssFilePath.startsWith('.') ? cssFilePath : `./${cssFilePath}`;
+
+				cssFilePathes.push(cssFilePath);
+			}
+
+			addImportCSSCode(ms, chunk.name, cssFilePathes);
+
+			return {
+				code: ms.toString(),
+				map: ms.generateMap(),
+			};
+		},
+	};
+}

package/build/rollup.config.ts

@@ -0,0 +1,37 @@
+import type { PreRenderedAsset, RollupOptions } from 'rollup';
+
+export default {
+	external: [
+		'vue',
+		'require',
+	],
+	output: {
+		globals: {
+			vue: 'Vue',
+			pinia: 'Pinia',
+		},
+
+		exports: 'named',
+
+		manualChunks: {
+			/**
+			 * forms это базовая бибилиотека, которая должна грузиться максмально быстро
+			 *
+			 * Объединить все js и css forms в один файл, необходимо для предзагрузки основных стилей UI на страницу
+			 *
+			 * При такой настройке в forms.js будут добавлены все ее зависимости
+			 */
+			forms: [
+				'./src/components/forms/forms.ts',
+			],
+		},
+		chunkFileNames: '.chunks/[name]-[hash].[format].js',
+		assetFileNames: (_chunkInfo: PreRenderedAsset) => {
+			if (_chunkInfo.originalFileName?.startsWith('src/resources/styles/themes/')) {
+				return `assets/themes/[name][extname]`;
+			}
+
+			return `assets/[name][extname]`;
+		},
+	},
+} satisfies RollupOptions;

package/package.json

@@ -1,9 +1,18 @@
 {
 	"name": "@topvisor/ui",
 	"private": false,
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"type": "module",
 	"description": "Topvisor UI-kit Vue",
+	"scripts": {
+		"storybook": "storybook dev -p 6006 --ci",
+		"storybook-net": "./storybook-dev.sh",
+		"preview": "concurrently \"vite build --mode preview --watch\" \"bash build/afterBuild.sh\" \"vite preview --mode preview --port 4173\"",
+		"ci-cd-genDocs": "bash build/genDocs.sh",
+		"ci-cd-build": "vite build && bash build/afterBuild.sh",
+		"ci-cd-publish": "cd ./dist/ && npm publish --tag latest",
+		"ci-cd-publish-beta": "cd ./dist/ && npm publish --tag beta"
+	},
 	"author": "Topvisor",
 	"keywords": [
 		"topvisor",
@@ -26,6 +35,52 @@
 		"./tabs/tabs.js": "./components/tabs/tabs.js",
 		"./tabsView/tabsView.js": "./components/tabsView/tabsView.js"
 	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^3.2.4",
+		"@faker-js/faker": "^9.5.0",
+		"@rollup/plugin-babel": "^6.0.4",
+		"@rollup/plugin-commonjs": "^28.0.2",
+		"@rollup/plugin-node-resolve": "^16.0.0",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@storybook/addon-a11y": "^8.5.8",
+		"@storybook/addon-controls": "^8.5.8",
+		"@storybook/addon-docs": "^8.5.8",
+		"@storybook/addon-essentials": "^8.5.8",
+		"@storybook/addon-interactions": "^8.5.8",
+		"@storybook/addon-links": "^8.5.8",
+		"@storybook/addon-storysource": "^8.5.8",
+		"@storybook/addon-toolbars": "^8.5.8",
+		"@storybook/blocks": "^8.5.8",
+		"@storybook/global": "^5.0.0",
+		"@storybook/manager-api": "^8.5.8",
+		"@storybook/theming": "^8.5.8",
+		"@storybook/vue3": "^8.5.8",
+		"@storybook/vue3-vite": "^8.5.8",
+		"@types/jquery": "^3.5.32",
+		"@types/jqueryui": "^1.12.23",
+		"@types/lodash-es": "^4.17.12",
+		"@vitejs/plugin-vue": "^5.2.1",
+		"@vueuse/core": "^12.7.0",
+		"clean-css-cli": "^5.6.3",
+		"concurrently": "^9.1.2",
+		"glob": "^11.0.1",
+		"lodash-es": "^4.17.21",
+		"magic-string": "^0.30.17",
+		"mdx-mermaid": "^2.0.3",
+		"picocolors": "^1.1.1",
+		"punycode": "^2.3.1",
+		"remark-gfm": "^4.0.1",
+		"standard-version": "^9.5.0",
+		"storybook": "^8.5.8",
+		"storybook-addon-pseudo-states": "^4.0.2",
+		"string-hash": "^1.1.3",
+		"topvisor-openapi": "github:topvisor/topvisor-openapi",
+		"typedoc-plugin-markdown": "^4.4.2",
+		"typedoc-plugin-mdn-links": "^4.0.13",
+		"vite": "^6.1.1",
+		"vite-plugin-dts": "^4.5.0",
+		"vite-plugin-dynamic-import": "^1.6.0"
+	},
 	"peerDependencies": {
 		"pinia": "2.3.1",
 		"vue": "3.5.13"

package/public/README.md

@@ -0,0 +1,82 @@
+# UI kit Topvisor Vue
+
+## Vue компоненты
+
+Компоненты поставляются в двух форматах:
+
+- amd (requirejs)
+- es
+
+Компоненты делятся на разные библиотеки и доступны через импорт этих библиотек.
+
+Каждая библиотека находится в отдельной папке, соответствующей имени библиотеки.
+
+Все стили модулей находятся в папке /assets/ в файлах соответствующих имени библиотеки.
+В этой же папке располагаются стили для асинхронно загружаемых компонентов.
+Все стили грузятся автоматически вместе с загрузкой компонента.
+
+Документация и описание всех компонентов: https://ui.topvisor.com/
+
+## Общие стили UI
+
+- /assets/core.css - основная палитра цветов и общие стили и модификаторы компонентов
+- /assets/themes/* - стили тем оформления
+
+## Подключение стилей
+
+Стили компонентов подгружаются автоматически.
+
+Стили UI core.css необходимо подгрузить на страницу вручную.
+
+```js
+import '@topvisor/ui/assets/core.css';
+```
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/core.css" rel="stylesheet">
+```
+
+## Подключение стилей темы
+
+Стили темы необходимо подгрузить на страницу вручную.
+
+Для смены темы необходимо подгрузить файл стилей необходимой темы и отключить стили предыдущей темы.
+
+```js
+import '@topvisor/ui/assets/themes/light.css';
+```
+
+```html
+
+<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/themes/light.css" rel="stylesheet">
+```
+
+## Внешние зависимсоти
+
+Стили icomoon добавлены в пакет и их необходимо подгрузить на страницу вручную.
+
+```js
+import '@topvisor/ui/icomoon/style.css';
+```
+
+```html
+
+<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/icomoon/style.css" rel="stylesheet">
+```
+
+## Подключение компонентов
+
+Пример подключения библиотеки Forms и компонента Button:
+
+```javascript
+require(['@topvisor/ui/forms/forms.amd'], ({ Button }) => {
+	console.log(Button);
+});
+
+require(['@topvisor/ui/forms/forms.amd'], Forms => {
+	const { Button } = Forms;
+
+	console.log(Forms);
+	console.log(Button);
+});
+```

package/src/components/charts/charts.ts

@@ -0,0 +1,8 @@
+import type { ComponentCustomProps } from 'vue';
+
+import MiniChart from './miniChart/miniChart.vue';
+import MiniCharts from './miniCharts/miniCharts.vue';
+
+export const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps;
+
+export const TopMiniCharts = MiniCharts as typeof MiniCharts & ComponentCustomProps;

package/src/components/charts/miniChart/miniChart.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { ref, watch } from 'vue';
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './miniChart.vue';
+import * as ComponentsConst from './miniChart';
+import ReadMe from './stories/README.md?raw';
+import { dates, activeDates, visibilities } from './stories/dummy';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		title: 'Видимость',
+		keysForDyn: {
+			start: 50,
+			end: 59,
+		},
+		valueSuffix: '%',
+		values: visibilities,
+		activeDates,
+		dates,
+	},
+	render: (args) => ({
+		components: {
+			TopMiniChart: Component,
+		},
+		setup() {
+			const item = ref(null);
+
+			watch(item, () => {
+				console.log(item.value);
+			});
+
+			return { args, item };
+		},
+		template: `
+			<div style="width: 400px; height: 100px; max-width: 100%;">
+				<TopMiniChart
+					:="args"
+					v-model="item"
+					:activeDates="args.activeDates"
+					:dates="args.dates"
+					:values="args.values"
+					:keysForDyn="args.keysForDyn"
+				/>
+			</div>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/charts/miniChart/miniChart.ts

@@ -0,0 +1,110 @@
+export interface Props {
+	/**
+	 * Имя графика
+	 */
+	title?: string;
+
+	/**
+	 * Иконка графика
+	 */
+	gIcon?: string;
+
+	/**
+	 * Цвет графика и иконки
+	 */
+	color?: Color;
+
+	/**
+	 * Список дат всех проверок (пример даты: 2020-01-01)
+	 */
+	dates: string[];
+
+	/**
+	 * Список значений параметра для каждой проверки (порядок соответсвует списку дат)
+	 */
+	values: number[];
+
+	/**
+	 * Список активных дат (пример даты: 2020-01-01)
+	 */
+	activeDates: string[];
+
+	/**
+	 * Индексы для получения значений из props.values.
+	 * Полученные значения используются для рассчета динамики изменения.
+	 * Если указан props.dynamic, то props.keysForDyn не используется в расчетах динамики.
+	 *
+	 * - start - индекс для получения значения в начале периода
+	 * - end - индекс для полученя значения в конце периода
+	 */
+	keysForDyn: {
+		start: number;
+		end: number;
+	};
+
+	/**
+	 * Динамика
+	 */
+	dynamic?: number;
+
+	/**
+	 * Необходимо ли инвертировать значения ячеек графика
+	 */
+	isInvert?: boolean;
+
+	/**
+	 * Кол-во столбцов всего
+	 */
+	numberCols?: number;
+
+	/**
+	 * Html для футера
+	 */
+	additionalHTML?: string;
+
+	/**
+	 * Выбранная проверка (колонка)
+	 */
+	modelValue?: Item | null;
+
+	/**
+	 * Суффикс для значения
+	 */
+	valueSuffix?: string;
+
+	/**
+	 * Скрыть график на адаптиве
+	 *
+	 * - true - скрыть
+	 * - false - показать
+	 */
+	hideChartInMobile?: boolean;
+}
+
+/**
+ * Интерфейс проверки (используется для передачи данных о выбранной проверке через v-model)
+ */
+export interface Item {
+	/**
+	 * Эл-т колонки выбранной проверки
+	 */
+	elCol: HTMLElement;
+
+	/**
+	 * Дата/время проверки
+	 */
+	date?: string;
+
+	/**
+	 * Значение параметра проверки
+	 */
+	value?: string;
+}
+
+export const colors = {
+	blue: 'blue',
+	orange: 'orange',
+	pink: 'pink',
+} as const;
+
+export type Color = typeof colors[keyof typeof colors];