@topvisor/ui 0.0.34 → 0.0.35

package/USE_IN_PROJECT.md

@@ -0,0 +1,29 @@
+[![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` - запустить сервер предпросмотра с автосборкой
+- в нужном проекте замените путь к @topvisor/ui на сервер предпросмотра
+
+Например: `https://cdn.jsdelivr.net/npm/@topvisor/ui` => `http://localhost:4173`
+
+## Использование topvisor-ui в другом проекте без публикации, пример с topvisor.dev
+
+- ```git submodule init``` - инициализация подмодуля в проекте
+- ```git submodule update``` - загрузка подмодуля, будет произведен clone репозитория подмодуля

package/build/afterBuild.sh

@@ -0,0 +1,12 @@
+echo ''
+echo 'run afterBuild...'
+
+echo '- remove /dist/for-delete/'
+rm -rf dist/for-delete/
+
+echo '- add icomoon'
+cp -r src/resources/icomoon dist/
+
+echo '- make package.json'
+cp package.json dist/
+npm pkg --prefix dist delete scripts devDependencies

package/build/cssModules.ts

@@ -0,0 +1,39 @@
+import stringHash from "string-hash";
+
+// https://github.com/madyankin/postcss-modules/blob/325f0b33f1b746eae7aa827504a5efd0949022ef/src/scoping.js#L36
+function generateScopedNameDefault(name, filename, css) {
+	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 {type} name - имя класса
+	 * @param {type} filename - файл стилей
+	 * @param {type} css - стили
+	 * @returns {String} - имя класса после предкомпиляции
+	 */
+	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/build/plugin/amdFix.ts

@@ -0,0 +1,46 @@
+import glob from 'glob';
+import fs from 'fs';
+import type { UserConfig } from 'vite'
+
+/**
+ * опеределить значение переменной vue в импорте requriejs
+ * vue не предоставляет export для amd
+ */
+export default () => {
+	return {
+		name: 'amd-fix',
+
+		async closeBundle() {
+			console.log('fix amd')
+
+			const amdFilenames = glob.sync('dist/**/*.amd.js');
+
+			const fixAMDFile = async (amdFilename: string) => {
+				console.log(amdFilename);
+
+				const data = await fs.promises.readFile(amdFilename, 'utf8');
+				const result = data.replace(/"use strict";/g, '"use strict"; if(typeof vue === "undefined") var vue = window.Vue;');
+				await fs.promises.writeFile(amdFilename, result, 'utf8');
+			}
+
+			console.time('amd-fix');
+
+			const tasks = amdFilenames.map((amdFilename) => fixAMDFile(amdFilename));
+
+			await Promise.all(tasks);
+
+			console.timeEnd('amd-fix');
+		},
+
+		config(config: UserConfig, env: { mode: string, command: string }) {
+			// в режиме watch запись в папку и ее очистка одновременно работать не будут
+			if (!config.build?.watch) return;
+
+			return {
+				build: {
+					emptyOutDir: false
+				}
+			}
+		}
+	}
+}

package/build/rollup.config.ts

@@ -0,0 +1,18 @@
+import type { RollupOptions } from 'rollup';
+
+export default {
+	external: ['vue'],
+	output: {
+		globals: {
+			vue: 'Vue',
+		},
+
+		// часто используемые компоненты вручную группируются по файлам
+		manualChunks: {
+			forms: [
+				'./src/components/forms/forms.ts',
+			],
+		},
+		chunkFileNames: '.chunks/[name]-[hash].[format].js',
+	},
+} satisfies RollupOptions;

package/nbproject/project.properties

@@ -0,0 +1,11 @@
+auxiliary.org-netbeans-modules-css-prep.less_2e_compiler_2e_options=
+auxiliary.org-netbeans-modules-css-prep.less_2e_enabled=false
+auxiliary.org-netbeans-modules-css-prep.less_2e_mappings=/less:/css
+auxiliary.org-netbeans-modules-css-prep.sass_2e_compiler_2e_options=
+auxiliary.org-netbeans-modules-css-prep.sass_2e_enabled=false
+auxiliary.org-netbeans-modules-css-prep.sass_2e_mappings=/scss:/css
+auxiliary.org-netbeans-modules-javascript2-json.json_2e_comments=true
+auxiliary.org-netbeans-modules-javascript2-requirejs.enabled=true
+files.encoding=UTF-8
+site.root.folder=
+source.folder=

package/nbproject/project.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://www.netbeans.org/ns/project/1">
+    <type>org.netbeans.modules.web.clientproject</type>
+    <configuration>
+        <data xmlns="http://www.netbeans.org/ns/clientside-project/1">
+            <name>topvisor-ui</name>
+        </data>
+    </configuration>
+</project>

package/package.json

@@ -1,19 +1,68 @@
-{
-  "name": "@topvisor/ui",
-  "private": false,
-  "version": "0.0.34",
-  "type": "module",
-  "description": "Topvisor UI-kit Vue",
-  "author": "Topvisor",
-  "keywords": [
-    "topvisor",
-    "vue",
-    "ui framework",
-    "component framework",
-    "component library"
-  ],
-  "license": "MIT",
-  "peerDependencies": {
-    "vue": "^3.3.4"
-  }
-}
+{
+  "name": "@topvisor/ui",
+  "private": false,
+  "version": "0.0.35",
+  "type": "module",
+  "description": "Topvisor UI-kit Vue",
+  "scripts": {
+    "storybook": "storybook dev -p 6006 --ci",
+    "preview": "concurrently \"npx vite build -w\" \"bash build/afterBuild.sh\" \"npx vite preview --port 4173\"",
+    "build": "vite build && bash build/afterBuild.sh",
+    "publish-without-change-version": "npm run build && cd dist/ && npm config set registry https://registry.npmjs.org/ && npm login && npm publish --access=public",
+    "publish": "npm version patch && npm run publish-without-change-version"
+  },
+  "author": "Topvisor",
+  "keywords": [
+    "topvisor",
+    "vue",
+    "ui framework",
+    "component framework",
+    "component library"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-console": "^2.0.0",
+    "@storybook/addon-controls": "^7.4.6",
+    "@storybook/addon-designs": "^7.0.5",
+    "@storybook/addon-docs": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-mdx-gfm": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/addon-toolbars": "^7.4.6",
+    "@storybook/addons": "^7.4.6",
+    "@storybook/api": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-vite": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.4.6",
+    "@storybook/vue3": "^7.4.6",
+    "@storybook/vue3-vite": "^7.4.6",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
+    "@whitespace/storybook-addon-html": "^5.1.6",
+    "clean-css-cli": "^5.6.2",
+    "concurrently": "^8.2.1",
+    "lightningcss": "^1.21.8",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.4.6",
+    "storybook-addon-pseudo-states": "^2.1.1",
+    "string-hash": "^1.1.3",
+    "vite": "^4.4.11"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.4"
+  }
+}

package/public/README.md

@@ -0,0 +1,63 @@
+# UI kit Topvisor Vue
+
+## Vue компоненты
+
+Компоненты поставляются в двух форматах:
+
+- amd (requirejs)
+- es
+
+Компоненты делятся на разные модули и доступны через импорт этих модулей.
+
+Каждый модуль находится в отдельной папке, соответствующей имени модулю.
+
+Все стили модулей находятся в корневой папке в файлах соответствующих имени модулю.
+
+Список всех компонентов см. на [npmjs](https://www.npmjs.com/package/topvisor-ui?activeTab=code).
+
+## Другие ресурсы
+
+- [core.css](core.css) - основная палитра цветов и стили компонентов
+- [light.css](light.css) - светлая тема
+- [dark.css](dark.css) - темная тема
+
+## Подключение стилей
+
+Стили компонентов подгружаются автоматически.
+
+Стили 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);
+});
+```

package/src/components/common/common.ts

@@ -0,0 +1 @@
+// export { default as Icon } from './icon/icon.vue'

package/src/components/common/icon/icon.ts

@@ -0,0 +1,4 @@
+export interface Props {
+	icon?: string
+	icon2?: string
+}

package/src/components/common/icon/icon.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Props } from './icon'
+
+defineProps<Props>()
+</script>
+
+<template>
+    <div
+        :data-top-icon="icon"
+        :data-top-icon2="icon2"
+    ></div>
+</template>
+
+<!-- см resources/styles/core/icon.css -->
+<style></style>

package/src/components/component.ts

@@ -0,0 +1,133 @@
+import DOM from '@/core/utils/dom';
+
+/**
+ * Базовый компонент для js компонентов, не имеет отношения к Vue
+ */
+class Component {
+
+	static componentName = 'Top';
+
+	componentName: string | undefined; // имя класса компонента
+	className: string | undefined; // имя css класса компонента
+	uid: string | undefined; // уникальный id компонента
+	el: Element | undefined; // элемент, связанный с компонентом
+	options = {}; // параметры компонента
+
+	unmountEls: Element[] = [];
+	unmountEvents: any[] = [];
+
+	// переопредлять нельзя
+	// если компонент инициирован, необходимо сразу его вернуть и выполнить reInit() вместо mount()
+	// используется init вместо constructor, так как super constructor выполняется до Object.defineProperty() параметров класса
+	init (componentName: string, el: Element, options: object): Component | void {
+		if (!el) {
+			throw componentName + ': el is undefined';
+		}
+
+		const component = Component.getComponent(el, componentName);
+
+		if (component) {
+			component.reInit(options);
+
+			return component;
+		}
+
+		this.componentName = componentName;
+		this.className = 'top' + componentName[0].toUpperCase() + componentName.substring(1);
+		this.uid = this.componentName + (Math.random() + '').replace('.', '');
+
+		this._setComponent(el);
+		this.el = el;
+		this.el.classList.add(this.className);
+		this.options = Object.assign(this.options, options);
+
+		this.mount();
+	}
+
+	// получить инициированный компонент
+	static getComponent (el: Element, componentName: string): any {
+		return DOM.storage(el, '#' + componentName);
+	}
+
+	// устанвоить компонент
+	_setComponent (el: Element) {
+		DOM.storage(el, '#' + this.componentName, this);
+	}
+
+	// функция подключения компонента
+	mount (): void {
+		throw 'Please, add method mount() to component: ' + this.componentName;
+	}
+
+	// функция отключения компонента
+	unmount (): void {
+		DOM.storage(this.el, '#' + this.componentName, null);
+
+		this.unmountEls.forEach((el) => {
+			el.remove();
+		});
+
+		this.unmountEls = [];
+
+		this.unmountEvents.forEach((eventData) => {
+			eventData.el.removeEventListener(eventData.type, eventData.listener, eventData.options);
+		});
+
+		this.unmountEvents = [];
+	}
+
+	// указание новые элементы, которые должны будут удалиться после unmount
+	registerElForUnmount (el: Element): void {
+		this.unmountEls.push(el);
+	}
+
+	// указание новые события, которые должны будут удалиться после unmount
+	addEventListenerWithUnmount (
+		el: Element | Document,
+		type: keyof GlobalEventHandlersEventMap,
+		listener: (this: Element, e: Event) => any,
+		options?: any,
+	): void {
+		el.addEventListener(type, listener, options);
+
+		this.registerEventForUnmount(el, type, listener, options);
+	}
+
+	// указание новые события, которые должны будут удалиться после unmount
+	registerEventForUnmount (
+		el: Element | Document,
+		type: keyof GlobalEventHandlersEventMap,
+		listener: (this: Element, e: Event) => any,
+		options?: any
+	): void {
+		const eventData = {
+			el: el,
+			type: type,
+			listener: listener,
+			options: options,
+		};
+
+		this.unmountEvents.push(eventData);
+	}
+
+	// функция перенастройки уже подключенного компонента
+	reInit (_options: object): void {
+		throw 'Please, add method reInit() to component: ' + this.componentName;
+	}
+
+	static detach (nodes: Node[]): void
+	static detach (nodes: Element): void
+
+	// удалить элементы из DOM, но не из памяти
+	static detach (nodes: any): void {
+		if (nodes.forEach) {
+			nodes.forEach((node: Node) => node.parentElement?.removeChild(node));
+		} else {
+			const el = nodes;
+			el.parentElement?.removeChild(el);
+		}
+	}
+
+}
+
+export default Component;

package/src/components/forms/button/button.stories.ts

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './button.vue';
+import * as ComponentsConst from './button';
+import ReadMe from './stories/README.md?raw';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst, true);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/M7y5HgfqK3JK3Nyy7XnCJx/Princip-Design-components?type=design&node-id=2505%3A69049&mode=design&t=J7nDcOXsvdJ3b4wE-1',
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		disabled: false,
+		isSubmit: false,
+		isActive: false,
+		isProgress: false,
+		href: '',
+		icon: '😊',
+		icon2: '😁',
+	},
+}, OverviewComponent);
+
+export const Regular = {
+	args: {
+		default: 'Первостепенная цветная',
+		title: 'Стандартня кнопка первостепенного значения, цвет настраивается через props color',
+		color: 'blue',
+	},
+} satisfies Story;
+
+export const RegularTheme = {
+	args: {
+		default: 'Второстепенная Theme',
+		title: 'Стандартня кнопка второстепенного значения, цвет Theme',
+		color: 'theme',
+	},
+} satisfies Story;
+
+export const Soft = {
+	args: {
+		default: 'Мягкая цветная',
+		title: 'Для выраженных второстепенных кнопок',
+		color: 'blue',
+		styling: 'soft',
+	},
+} satisfies Story;
+
+export const SoftTheme = {
+	args: {
+		default: 'Мягкая Theme',
+		title: 'Для выраженных второстепенных кнопок',
+		color: 'theme',
+		styling: 'soft',
+	},
+} satisfies Story;
+
+export const Outline = {
+	args: {
+		default: 'Без фона цветная',
+		title: 'Для кнопок дополнительного функционала',
+		color: 'blue',
+		styling: 'outline',
+	},
+} satisfies Story;
+
+export const OutlineTheme = {
+	args: {
+		default: 'Без фона Theme',
+		title: 'Для кнопок дополнительного функционала',
+		color: 'theme',
+		styling: 'outline',
+	},
+} satisfies Story;
+
+export const Icons = {
+	args: {
+		default: 'Кнопка с иконками',
+		title: 'В качестве иконок можно вставлять emoji или символы шрифта с иконками. Меняйте props icon и icon2',
+		icon: '😊',
+		icon2: '😁',
+	},
+} satisfies Story;
+
+export const OnlyOneIcons = {
+	args: {
+		title: 'Кнопка с иконкой без текста',
+		icon: '😊',
+	},
+} satisfies Story;
+
+export default meta;

package/src/components/forms/button/button.ts

@@ -0,0 +1,51 @@
+import type { Size } from '@/components/forms/helpers';
+import { sizes } from '@/components/forms/helpers';
+
+/**
+ * Определение параметров
+ */
+export interface Props {
+	color?: Color;
+	styling?: Style; // bug: name = style init with object type
+	size?: Size;
+
+	name?: string;
+	title?: string;
+	icon?: string;
+	icon2?: string;
+
+	href?: string; // если установлена ссылка, isSubmit не может быть true
+	// value?: string
+
+	disabled?: boolean;
+	isSubmit?: boolean;
+	isActive?: boolean;
+	isProgress?: boolean;
+}
+
+/**
+ * Определение событий
+ */
+export interface Emits {}
+
+export const colors = {
+	theme: 'theme',
+	blue: 'blue',
+	green: 'green',
+	orange: 'orange',
+	red: 'red',
+	pink: 'pink',
+} as const;
+
+export type Color = typeof colors[keyof typeof colors];
+
+export const styles = {
+	Regular: '',
+	Outline: 'outline',
+	Soft: 'soft',
+	Transparent: 'transparent',
+} as const;
+
+export type Style = typeof styles[keyof typeof styles];
+
+export { sizes };