@topvisor/ui 1.0.42-dev.2 → 1.0.42-dev.4

package/PUBLISH.md

@@ -1,88 +0,0 @@
-# Публикация проекта @topvisor/ui в npm
-
-Не путать с публикацией Storybook. О том, как публиковать изменения в storybook на сайте, см. [STORYBOOK.md](./STORYBOOK.md)
-
-Ссылка на опубликованные версии: https://www.npmjs.com/package/@topvisor/ui.
-
-## Как опубликовать новую версию?
-
-Для запуска сборки и публикации необходимо **создать тег** с вашей версией и **запушить его**.
-
-- Выполните одну из команд, которая сама сменит версию и добавит тег:
-	- Для релиза: `npm run npm-release`
-	- Для пререлиза: `npm run npm-prerelease`
-	- Для пререлиза с именем, по желанию: `npm run npm-prerelease dialog`
-- Запушьте изменения, не забудьте запушить тег
-- После отправки тега в git, будет запущен pipeline, который выполнит сборку и публикацию npm пакета.
-  За процессом можно наблюдать на странице проекта в gitlab в разделе pipeline или tags.
-
-Перед каждой публикацией рекомендуется проверять и обновлять версию storybook.
-Периодически необходимо обновлять версии всех зависимостей и проверять работу компонентов после выполнения обновлений.
-
-### Чем отличается релиз от пререлиза?
-
-Для dev веток и небольших изминений используйте пререлизы. Пререлизы могут содержать незаконченный или не до конца проверенный фунционал.
-
-При работе в мастер ветке при пубилкации накомпленных изминений законченного и проверенного функционала используйте релизы.
-
-Релиз отличается от пререлиза следующим:
-
-* При релизе запускается дополнительная генерация документации, а именно: `npm run genDocs`
-* При релизе Версия npm пакета будет помечена тегом **latest**, она будет считаться стабильной
-
-## Как происходит публикация под капотом?
-
-Настройки и скрипты сборки см. в папке **./scripts/**.
-
-## Публикация в CDN
-
-Публикацию на CDN мы не производим.
-
-Однако после публикации в npm пакет будет автоматически доступен на публичных CDN, которые предоставляют доступ к npm, например:
-
-- https://unpkg.com/@topvisor/ui/
-- https://cdn.jsdelivr.net/npm/@topvisor/ui/
-
-## Ручная сборка
-
-Обычно сборка и публикация происходит автоматически, но вам может потребоваться производить сборку для проведения тестов.
-
-Если вам надо проверить то, как работает сборка, выполните команду: `npm run ci-cd-build`.
-
-После сборки весь код сборки будте доступен в папке `./dist/`.
-
-## Формат версий
-
-Версии генерируется в соответствие с соглашением: https://semver.org/lang/ru/
-
-**Релизы**:
-
-{{ major }}.{{ minor }}.{{ patch }}
-
-**Пререлизы**:
-
-{{ major }}.{{ minor }}.{{ patch }}-{{ prerelease }}
-
-prerelease может состоять только из номера версии или из имени и номера версии:
-
-- {{ devVersion }}
-- {{ devName }}.{{ devVersion }}
-
-В dev сборке базовая версия `{{ major }}.{{ minor }}.{{ patch }}` не изменяется и всегда берется из master,
-к ней через дефис версия пререлиза `{{ devName }}.{{ devVersion }}`.
-
-### Пример работы с версиями
-
-Правильный алгоритм упростит понимание того, с какой версией сейчас ведется работа и исключит случайное создание одинаковых версий.
-
-- вы сделали fork от `1.0.0`
-- вы что-то поменяли и сделали **пререлиз** без указания имени, теперь версия: `1.0.1-0`
-- вы что-то поменяли и сделали **пререлиз** с указанием имени пререлиза `myTask`, теперь версия: `1.0.1-myTask.0`
-- если вы сделаете еще раз **пререлиз**, то получите версию на 1 больше: `1.0.1-myTask.1`
-- если вы сделаете еще раз **пререлиз** с указанием другого имени `myTaskDocs`, то нумерация пойдет сначала с новым именем: `1.0.1-myTaskDocs.0`
-- master версия обновилась до `1.0.2` и вы ее загрузили в свою ветку
-- при мерже отдайте приоритет версии из мастера: `1.0.2`
-- если вы теперь сделаете **пререлиз** без имени, то получите версию: `1.0.2-0`
-- ваша ветка готова к релизу и ее смержили в master
-- на данном этапе в master могут быть смержены и другие ветки
-- выполнен **релиз**, теперь версия: `1.0.3`

package/STORYBOOK.md

@@ -1,41 +0,0 @@
-# Пубилкация проекта UI Storybook
-
-https://storybook.js.org/
-
-## Основные команды Storybook
-
-Информация о параметрах dev сервера и сборки: https://storybook.js.org/docs/react/api/cli-options
-
-- `npx storybook@latest upgrade`: обновить Storybook
-- `storybook dev`: запуск локального сервера Storybook
-- `storybook build`: запуск сборки Storybook
-
-## Локальный сервер разработки
-
-- `npm -i`: загрузить все зависимости проекта (выполнять один раз)
-- `npm run storybook`: запуск локального сервера Storybook
-- `npm run storybook-net`: запуск локального сервера Storybook в локальной сети, см. **On your network**
-
-В режиме **On your network** ссылку с этим адресом можно передавать другим пользователям в вашей
-сети и использовать для тестов с мобильного устройства.
-Однако обратите внимание, что не все функции браузера доступны по адресу без **https**, если это не **localhost**.
-
-## Сборка storybook в статический сайт
-
-Не путать со сборкой проекта **@topvisor/ui**.
-
-`storybook build`: выполнить сборку
-
-## Сборка storybook на сайт
-
-Сборка storybook производится автоматически через CI/CD и публикуется на сайте. Вам нет необходимости делать сборку самостоятельно.
-
-Для запуска сборки нужно поменять версию или любую другую информацию в файле package.json.
-О том. как правильно писать версии читайте в [PUBLISH.md](./PUBLISH.md)
-
-Адреса сайтов:
-
-- Основной дрес сайта storybook c UI: https://ui.topvisor.com/.
-- Dev сайт сайта со storybook c UI: https://{{ имя-ветки }}.ui.topvisor.com
-
-В названии веток могут быть только маленькие латинские буквы, цифры и знак "-". Ветки с некорректным названием в репозитории сохранены не будут.

package/USE_IN_PROJECT.md

@@ -1,32 +0,0 @@
-[![pipeline status](https://gitlab.topvisor.com/topvisor/ui/badges/master/pipeline.svg)](https://gitlab.topvisor.com/topvisor/ui/-/commits/master)
-[![npm version](https://badge.fury.io/js/@topvisor%2Fui.svg)](https://badge.fury.io/js/@topvisor%2Fui)
-
-# Использование в других проектах
-
-## Использование @topvisor/ui после публикации, пример с topvisor.com
-
-Опубликованный пакет можно сразу использовать через публичный [CDN](PUBLISH.md#публикация-в-cdn).
-
-Подключение js пактов в topvisor.com настраивается в
-файле [requirejs.json](https://gitlab.topvisor.com/topvisor/topvisor.com/-/tree/master/requirejs.json).
-
-## Тестирование сборки @topvisor/ui без публикации
-
-Для тестирования сборки используется локальный сервер предпросмотра **vite preview** с автосборкой vite build --watch.
-
-Получаемые файлы с этого сервера не кешируются.
-
-Режим автосборки автоматически пересобирает проект и новая сборка доступна на сервере предпросмотра.
-
-Адрес севера предпросмотра по умолчанию: http://localhost:4173
-
-- `npm run preview` - запустить сервер предпросмотра с автосборкой
-- пропишите в importmap: `"@localhost/@topvisor/ui/": "http://localhost:4173"`
-- на сайте **topvisor.dev** настроена автоматическое подключение `@localhost/@topvisor/ui/`, если сервер запущен
-
-Пример изменения в пути при запуске **vite preview**: `https://cdn.jsdelivr.net/npm/@topvisor/ui` => `http://localhost:4173`
-
-## Установка в качестве git submodule в topvisor.dev
-
-- ```git submodule init``` - инициализация подмодуля в проекте
-- ```git submodule update``` - загрузка подмодуля, будет произведен clone репозитория подмодуля

package/public/README.md

@@ -1,82 +0,0 @@
-# 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/rollup.config.ts

@@ -1,38 +0,0 @@
-import type { PreRenderedAsset, RollupOptions } from 'rollup';
-
-export default {
-	external: [
-		'vue',
-		'require',
-		'@rive-app/canvas-lite',
-	],
-	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/scripts/afterBuild.sh

@@ -1,13 +0,0 @@
-#!/bin/bash
-
-echo ''
-echo 'run afterBuild...'
-
-echo '- remove /dist/for-delete/'
-rm -rf dist/for-delete/
-
-echo '- make package.json'
-cp package.json dist/
-npm pkg --prefix dist delete scripts devDependencies
-
-cp web-types.json dist/

package/scripts/cssModules.ts

@@ -1,39 +0,0 @@
-import stringHash from 'string-hash';
-
-// https://github.com/madyankin/postcss-modules/blob/325f0b33f1b746eae7aa827504a5efd0949022ef/src/scoping.js#L36
-function generateScopedNameDefault(name: string, filename: string, css: string) {
-	const i = css.indexOf(`.${name}`);
-	const lineNumber = css.substr(0, i).split(/[\r\n]/).length;
-	const hash = stringHash(css).toString(36).substr(0, 5);
-
-	return `_${name}_${hash}_${lineNumber}`;
-}
-
-export default {
-	/**
-	 * Оставить глобальные классы без преобразования
-	 * С глобальными классами нельзя работать через css module
-	 * С глобальными классами можно работать, определяя их их в интерфесе vue css module
-	 * @param name - имя класса
-	 * @param filename - файл стилей
-	 * @param css - стили
-	 * @returns Имя класса после предкомпиляции
-	 */
-	generateScopedName: (name: string, filename: string, css: string) => {
-		const isGlobalCSS = (name: string, filename: string) => {
-			// классы topvisor-ui
-			if (name.indexOf('top-') === 0) return true;
-
-			return false;
-		};
-
-		if (isGlobalCSS(name, filename)) {
-			return name;
-		}
-
-		return generateScopedNameDefault(name, filename, css);
-	},
-	// globalModulePaths: [],
-	//	scopeBehaviour: 'global',
-	//	exportGlobals: true,
-};

package/scripts/genDocs.sh

@@ -1,20 +0,0 @@
-#!/bin/bash
-
-echo "📚 Генерация документации по js функциям"
-
-git diff --quiet --cached || echo 'В репозитории не должно быть не закомиченных изменений'
-git diff --quiet --cached || exit 1
-
-npx typedoc --entryPoints "src/core/utils/*.ts" --out "src/core/utils/References" --publicPath "?path=/docs/core-utils-references"
-
-echo ''
-echo 'replace file link to storybook path format'
-
-sed -i 's/%5C/\//g' src/core/utils/References/*.mdx
-sed -i 's/%5C/\//g' src/core/utils/References/*/*.mdx
-
-sed -i 's/\(core-utils-references\)\/\(.\{1,99\}\)\/\(\w\{1,99\}\).mdx/\1-\2-\3--docs/' src/core/utils/References/*.mdx
-sed -i 's/\(core-utils-references\)\/\(.\{1,99\}\)\/\(\w\{1,99\}\)\/\(\w\{1,99\}\).mdx/\1-\2-\3-\4--docs/' src/core/utils/References/*/*.mdx
-
-git add src/core/utils/References
-git diff --quiet --cached || git commit -m "docs(js utils): Обновлена документация по утилитам"

package/scripts/plugin/amdFix.ts

@@ -1,83 +0,0 @@
-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/scripts/plugin/autoloadCSS.ts

@@ -1,155 +0,0 @@
-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/src/CHANGELOG.md.mdx

@@ -1,4 +0,0 @@
-import { Markdown } from '@storybook/addon-docs/blocks';
-import CHANGELOG from '../CHANGELOG.md?raw';
-
-<Markdown>{ CHANGELOG }</Markdown>

package/src/components/charts/charts.ts

@@ -1,8 +0,0 @@
-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;