@topvisor/ui 0.0.34 → 0.0.35

package/.storybook/TopTheme.js

@@ -0,0 +1,82 @@
+import { global } from '@storybook/global';
+
+import light from '@/resources/styles/themes/light/theme.css?raw';
+import dark from '@/resources/styles/themes/dark/theme.css?raw';
+
+export const themes = {
+	light,
+	dark,
+};
+
+/**
+ * Загрузка выбранной темы
+ * Тема, указанная в адресной строке приоритетна
+ * @returns {keyof themes} - имя темы
+ */
+function load() {
+	let theme = location.search.match(/topTheme:(\w+)/)?.[1];
+	if (!theme) theme = localStorage.getItem('topTheme');
+	if (!theme) theme = 'light';
+
+	setCSS(theme);
+
+	return theme;
+}
+
+/**
+ * Сохранение выбранной темы
+ * @param {keyof themes} theme
+ */
+function save(theme) {
+	localStorage.setItem('topTheme', theme);
+
+	setCSS(theme);
+}
+
+/**
+ * Установить тему
+ * @param {keyof themes} theme
+ */
+function setCSS(theme) {
+	// см. preview-head.html
+	if (global.topThemeStyle.dataset.theme !== theme) {
+		global.topThemeStyle.dataset.theme = theme;
+
+		global.topThemeStyle.innerHTML = themes[theme];
+	}
+}
+
+/**
+ * Получить стили текущей темы
+ * @returns css стили
+ */
+export function getCurrentCSS() {
+	return global.topThemeStyle.innerHTML;
+}
+
+export const decorator = (story, context) => {
+	save(context.globals.topTheme);
+
+	return story(context);
+};
+
+export const type = {
+	description: 'Выбор темы',
+	defaultValue: load(),
+	toolbar: {
+		title: 'Выбор темы',
+		items: [
+			{
+				icon: 'sun',
+				title: 'light',
+				value: 'light'
+			},
+			{
+				icon: 'moon',
+				title: 'dark',
+				value: 'dark'
+			}
+		],
+		dynamicTitle: true
+	},
+};

package/.storybook/TopThemeManager.js

@@ -0,0 +1,44 @@
+import { create } from '@storybook/theming/create';
+
+/**
+ * Получение имени выбранной темы
+ */
+function getName() {
+	let theme = location.search.match(/topTheme:(\w+)/)?.[1];
+	if (!theme) theme = localStorage.getItem('topTheme');
+	if (!theme) theme = 'light';
+
+	return theme;
+}
+
+/**
+ * Получение настроек выбранной темы
+ * Для смены темы Storybook надо перезагружать страницу
+ */
+export function get() {
+	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+		return themes.dark;
+	}
+
+	return themes.light;
+}
+
+// https://storybook.js.org/docs/vue/configure/theming
+const themeBase = {
+	brandTitle: 'Topvisor Princip',
+	brandUrl: 'https://topvisor.com',
+	brandTarget: '_blank',
+}
+
+export const themes = {
+	light: create({
+		...themeBase,
+		base: 'light',
+		brandImage: 'https://topvisor.com/images/ru/logo/mods/light/tv.svg',
+	}),
+	dark: create({
+		...themeBase,
+		base: 'dark',
+		brandImage: 'https://topvisor.com/images/ru/logo/mods/dark/tv.svg',
+	})
+}

package/.storybook/main.ts

@@ -0,0 +1,43 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+import { dirname, join } from 'path';
+
+function getAbsolutePath (value: string): string {
+	return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config = {
+	stories: [
+		'../src/**/*.mdx',
+		'../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+	],
+	addons: [
+		// https://storybook.js.org/docs/react/essentials/introduction
+		// getAbsolutePath("@storybook/addon-backgrounds"),
+		getAbsolutePath('@storybook/addon-controls'),
+
+		// https://github.com/storybookjs/storybook/issues/23787
+		getAbsolutePath('@storybook/addon-actions'),
+		getAbsolutePath('@storybook/addon-docs'),
+		getAbsolutePath('@storybook/addon-highlight'),
+		getAbsolutePath('@storybook/addon-measure'),
+		getAbsolutePath('@storybook/addon-outline'),
+		getAbsolutePath('@storybook/addon-toolbars'),
+		getAbsolutePath('@storybook/addon-viewport'),
+
+		getAbsolutePath('@storybook/addon-links'),
+		getAbsolutePath('@storybook/addon-interactions'),
+		getAbsolutePath('@storybook/addon-a11y'),
+		getAbsolutePath('@storybook/addon-designs'),
+		getAbsolutePath('@storybook/theming'),
+		getAbsolutePath('storybook-addon-pseudo-states'),
+	],
+	framework: {
+		name: '@storybook/vue3-vite',
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+} satisfies StorybookConfig;
+
+export default config;

package/.storybook/manager.ts

@@ -0,0 +1,28 @@
+import { addons } from '@storybook/manager-api';
+import * as TopThemeManager from './TopThemeManager';
+
+addons.setConfig({
+	isFullscreen2: false,
+	showNav: true,
+	showPanel: true,
+	panelPosition: 'right',
+	enableShortcuts: true,
+	showToolbar: true,
+	theme: TopThemeManager.get(),
+	selectedPanel: undefined,
+	initialActive: 'sidebar',
+	sidebar: {
+		showRoots: true,
+		collapsedRoots: [
+			'docs',
+			'core',
+		],
+	},
+	toolbar: {
+		title: { hidden: false },
+		zoom: { hidden: false },
+		eject: { hidden: false },
+		copy: { hidden: false },
+		fullscreen: { hidden: false },
+	},
+});

package/.storybook/preview-head.html

@@ -0,0 +1,16 @@
+<link
+	href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap"
+	rel="stylesheet"
+	crossorigin="anonymous"
+>
+
+<link
+	href="/src/resources/styles/jquery-ui.min.css"
+	rel="stylesheet"
+	crossorigin="anonymous"
+>
+
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
+
+<style id="topThemeStyle"></style>

package/.storybook/preview.ts

@@ -0,0 +1,48 @@
+import type { Preview } from '@storybook/vue3';
+import * as TopTheme from './TopTheme';
+import * as TopThemeManager from './TopThemeManager';
+import vModelDecorator from './vue/vModelDecorator';
+import coreDecorator from './vue/coreDecorator';
+import Core from '@/core/core/core';
+
+Core.defineOptions({});
+
+import '@/resources/styles/storybook.css';
+import '@/resources/styles/core/core';
+import '@/resources/icomoon/style.css';
+
+const preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+		docs: {
+			theme: TopThemeManager.get(),
+		},
+		options: {
+			storySort: {
+				order: [
+					'Добро пожаловать',
+					'docs',
+					'core',
+					'components',
+				],
+			},
+		},
+	},
+	decorators: [
+		// если декораторы меняют args, то show code перестает работать и выводит {} satisfies Story
+		TopTheme.decorator,
+		coreDecorator,
+		vModelDecorator,
+	],
+	globalTypes: {
+		topTheme: TopTheme.type,
+	},
+} satisfies Preview;
+
+export default preview;

package/.storybook/vue/coreDecorator.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/vue3';
+import { getCurrentInstance } from 'vue';
+import Core from '@/core/core/core';
+
+type Decorator = Required<Preview>['decorators'][number];
+
+/**
+ * Подключение Core UI
+ */
+const coreDecorator: Decorator = (story, context) => {
+	const app = getCurrentInstance()?.appContext.app;
+	app?.use(Core, {
+		dateFormat: 'd.m.Y',
+	});
+
+	return story(context);
+};
+
+export default coreDecorator;

package/.storybook/vue/vModelDecorator.ts

@@ -0,0 +1,27 @@
+import type { Preview } from '@storybook/vue3';
+import { useArgs } from '@storybook/preview-api';
+
+type Decorator = Required<Preview>['decorators'][number];
+
+/**
+ * Двусторонняя привязка v-model vue и args storybook
+ */
+const vModelDecorator: Decorator = (story, context) => {
+	const [args, updateArgs] = useArgs();
+
+	if ('modelValue' in args) {
+		const onUpdate = args['onUpdate:model-value'] || args['onUpdate:modelValue'];
+		args['onUpdate:model-value'] = undefined;
+
+		args['onUpdate:modelValue'] = (...params) => {
+			onUpdate?.(...params);
+
+			const modelValue = params[0] === undefined ? null : params[0];
+			updateArgs({ modelValue });
+		};
+	}
+
+	return story(context);
+};
+
+export default vModelDecorator;

package/.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+    "recommendations": [
+        "ruakr.ftp-kr",
+        "unifiedjs.vscode-mdx",
+        "vue.vscode-typescript-vue-plugin",
+        "vue.volar",
+        "dbaeumer.vscode-eslint",
+        "bmewburn.vscode-intelephense-client",
+        "neilbrayfield.php-docblocker"
+    ]
+}

package/.vscode/keybindings.example.json

@@ -0,0 +1,121 @@
+[
+    {
+        "key": "ctrl+shift+alt+u",
+        "command": "git.pull"
+    },
+    {
+        "key": "ctrl+alt+r",
+        "command": "git.cleanAll"
+    },
+    {
+        "key": "ctrl+alt+s",
+        "command": "git.commit"
+    },
+    {
+        "key": "ctrl+shift+alt+s",
+        "command": "git.push"
+    },
+    {
+        "key": "ctrl+shift+alt+e",
+        "command": "git.openChange"
+    },
+    {
+        "key": "ctrl+q",
+        "command": "workbench.action.navigateToLastEditLocation"
+    },
+    {
+        "key": "f4",
+        "command": "workbench.action.toggleZenMode"
+    },
+    {
+        "key": "f7",
+        "command": "outline.focus"
+    },
+    {
+        "key": "alt+1",
+        "command": "workbench.files.action.showActiveFileInExplorer"
+    },
+    {
+        "key": "alt+2",
+        "command": "copyRelativeFilePath"
+    },
+    {
+        "key": "alt+3",
+        "command": "revealFileInOS"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.commits.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.commits/"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.branches.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.branches/"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.fileHistory.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.fileHistory/"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.contributors.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.contributors/"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.lineHistory.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.lineHistory/"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.remotes.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.remotes/"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.repositories.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.repositories/"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.searchAndCompare.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.searchAndCompare\\b/"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.stashes.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.stashes/"
+    },
+    {
+        "key": "ctrl+c",
+        "command": "-gitlens.views.tags.copy",
+        "when": "gitlens:enabled && focusedView =~ /^gitlens\\.views\\.tags/"
+    },
+    {
+        "key": "ctrl+shift+d",
+        "command": "ftpkr.download"
+    },
+    {
+        "key": "ctrl+shift+u",
+        "command": "ftpkr.upload"
+    },
+    {
+        "key": "ctrl+shift+alt+r",
+        "command": "git.revertSelectedRanges"
+    },
+    {
+        "key": "ctrl+k ctrl+r",
+        "command": "-git.revertSelectedRanges",
+        "when": "isInDiffEditor && !operationInProgress"
+    },
+    {
+        "key": "alt+4",
+        "command": "-workbench.action.openEditorAtIndex4"
+    },
+    {
+        "key": "alt+4",
+        "command": "gl.openActiveFile"
+    }
+]

package/.vscode/settings.json

@@ -0,0 +1,46 @@
+{
+    "git.autofetch": true,
+    "git.confirmSync": false,
+    "git.enableSmartCommit": true,
+    "zenMode.hideActivityBar": false,
+    "zenMode.hideLineNumbers": false,
+    "[json]": {
+        "editor.defaultFormatter": "vscode.json-language-features"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "intelephense.phpdoc.useFullyQualifiedNames": true,
+    "intelephense.format.braces": "k&r",
+    "explorer.confirmDelete": false,
+    "zenMode.hideStatusBar": false,
+    "zenMode.hideTabs": false,
+    "zenMode.centerLayout": false,
+    "zenMode.fullScreen": false,
+    "editor.lineHeight": 17,
+    // "editor.hover.enabled": false,
+    "editor.hover.delay": 1000,
+    "workbench.tree.indent": 24,
+    "workbench.editor.pinnedTabSizing": "shrink",
+    "workbench.editor.highlightModifiedTabs": true,
+    "editor.rulers": [
+        150
+    ],
+    "editor.formatOnType": true,
+    "git.allowForcePush": false,
+    "npm.packageManager": "npm",
+    "files.eol": "auto",
+    "html.format.wrapAttributes": "force-expand-multiline",
+    "css.format.newlineBetweenRules": false,
+    "css.format.maxPreserveNewLines": 2,
+    "css.format.spaceAroundSelectorSeparator": true,
+    "css.lint.emptyRules": "ignore",
+    "vue.codeLens.enabled": false,
+    "git.useEditorAsCommitInput": false,
+    "git.postCommitCommand": "sync",
+    "files.exclude": {
+        "**/nbproject": true,
+        "**/node_modules": true,
+    },
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

package/Dockerfile

@@ -0,0 +1,3 @@
+FROM nginx:alpine
+
+COPY ./storybook-static /usr/share/nginx/html

package/NPM.md

@@ -0,0 +1,25 @@
+# Введение в npm
+
+Скачать node.js (npm входит в состав node.js): https://nodejs.org/ru/download
+
+Описание файлов:
+
+- **package.json** - настройки разрабатываемого пакета, а также его зависимости, [документация](https://docs.npmjs.com/cli/v9/configuring-npm/package-json)
+- **package-lock.json** - информация об установленных версиях пакетов, [документация](https://docs.npmjs.com/cli/v9/configuring-npm/package-lock-json)
+
+Описание команд:
+
+> `npm i` - является сокращенной командой `npm install`
+
+> `npm i -D` - является сокращенной командой `npm install --save-dev`
+
+- `npm i -g npm@latest` - обновление npm до последней версии
+- `npm i` - установка зависимостей из файла **package.json**
+- `npm- ci i` - установка зависимостей из файла **package-lock.json**
+- `npm i {{ name }}` - установка конкретного пакета
+- `npm i -D {{ name }}` - установка конкретного пакета как dev зависимости
+
+Команду **npm ci** необходимо использовать в случаях, когда есть необходимость загрузки конкретных версий.
+Обычно это нужно для отладки и в сценариях CI/CD, которые обязаны использовать указанные вами версии.
+
+Если вы не знакомы с **npm** рекомендуется прочитать статью на хабре: [npm, package.json и package-lock.json](https://habr.com/ru/companies/ruvds/articles/423703/)

package/PUBLISH.md

@@ -0,0 +1,18 @@
+# Публикация в npm
+
+Не путать с публикацией Storybook.
+
+https://www.npmjs.com/package/topvisor-ui.
+
+Настройки и скрипты сборки см. в папке [build/](build/)
+
+- `npm run build` - выполнить сбоку
+- убедиться, что в сборке нет приватных данных, после публикации все файлы в /dist/ доступны в открытом доступе
+- `npm run publish` - запустить публикацию
+
+## Публикация в CDN
+
+После публикации в npm пакет будет автоматически доступен на следующих CDN:
+
+- https://unpkg.com/@topvisor/ui/
+- https://cdn.jsdelivr.net/npm/@topvisor/ui/

package/README.md

@@ -1,63 +1,30 @@
-# UI kit Topvisor Vue
 
-## Vue компоненты
+[![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 kit, Vue 3
 
-- amd (requirejs)
-- es
+Документация по работе с UI-kit и разработке компонентов см. здесь: https://ui.topvisor.com/.
 
-Компоненты делятся на разные модули и доступны через импорт этих модулей.
+npm пакет см. здесь: https://www.npmjs.com/package/@topvisor/ui
 
-Каждый модуль находится в отдельной папке, соответствующей имени модулю.
+В проекте необходимо использовать самую свежую версию node.js LTS и npm.
 
-Все стили модулей находятся в корневой папке в файлах соответствующих имени модулю.
+- [Введение в npm](NPM.md)
+- [Storybook](STORYBOOK.md)
+- [Публикация новой версии](PUBLISH.md)
+- [Использование в проектах](USE_IN_PROJECT.md)
 
-Список всех компонентов см. на [npmjs](https://www.npmjs.com/package/topvisor-ui?activeTab=code).
+## Локальный сервер разработки
 
-## Другие ресурсы
+Для проверки написанных компонентов в проекте предусмотрена интеграция со Storybook.
 
-- [core.css](core.css) - основная палитра цветов и стили компонентов
-- [light.css](light.css) - светлая тема
-- [dark.css](dark.css) - темная тема
+Storybook настроен для работы с Vite и Vue с поддержкой Hot Module Replacement.
 
-## Подключение стилей
+Шаги для быстрой настройке локального сервера:
 
-Стили компонентов подгружаются автоматически.
-
-Стили core.css необходимо подгрузить на страницу.
-
-```js
-import '@topvisor/ui/core.css';
-```
-
-Стили темы необходимо подгрузить на страницу.
-
-Для смены темы необходимо подгрузить файл стилей необходимой темы и сразу отключить стили предыдущей темы.
-
-```js
-import '@topvisor/ui/light.css';
-```
-
-Стили icomoon необходимо подгрузить на страницу.
-
-```js
-import '@topvisor/ui/icomoon/style.css';
-```
-
-## Подключение компонентов
-
-Пример подключения библиотеки Forms и компонента Button:
-
-```javascript
-requirejs(['@topvisor/ui/forms/forms.amd'], ({Button}) => {
-	console.log(Button);
-});
-
-requirejs(['@topvisor/ui/forms/forms.amd'], Forms => {
-	const { Button } = Forms;
-
-	console.log(Forms);
-	console.log(Button);
-});
-```
+1. Установить node.js (npm входит в состав node.js): https://nodejs.org/ru/download
+2. `git clone https://gitlab.topvisor.com/topvisor/ui.git` - склонировать проект или установить его другим удобным способом
+3. `npm i -g npm@latest` - обновить до последней версии npm
+4. `npm i` - установить зависимости
+5. `npm run storybook` - запустить локальный сервер Storybook

package/STORYBOOK.md

@@ -0,0 +1,27 @@
+# Storybook
+
+https://storybook.js.org/
+
+## Основные команды Storybook
+
+Информация о параметрах dev сервера и сборки: https://storybook.js.org/docs/react/api/cli-options
+
+- `npx storybook@latest init` - установка файлов Storybook в проект (в этом проекте повторно не выполнять)
+- `npx storybook@latest upgrade` - обновить Storybook в случае необходимости
+- `storybook dev` - запуск локального сервера Storybook
+- `storybook build` - запуск сборки Storybook
+
+## Локальный сервер разработки
+
+- `npm -i` - загрузить все зависимости проекта (выполнять один раз)
+- `npx storybook@latest upgrade` - обновить Storybook (в случае необходимости)
+- `npm run storybook` - запуск локального сервера Storybook
+
+## Сборка storybook в статический сайт
+
+Не путать со сборкой проекта @topvisor/ui.
+
+`storybook build` - выполнить сборку
+
+Сборка Storybook производится автоматически через CI/CD и публикуется по адресу: https://ui.topvisor.com/.
+Вам нет необходимости делать сборку самостоятельно.