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

package/src/components/helpersStories.ts

@@ -0,0 +1,331 @@
+import type { Component, ComponentInstance } from 'vue';
+import type { StoryObj, StorybookConfig } from '@storybook/vue3-vite';
+import type { InputType } from 'storybook/internal/types';
+import { faker, fakerRU } from '@faker-js/faker';
+import type { ComponentMeta } from 'vue-component-meta';
+
+faker.seed(1);
+fakerRU.seed(1);
+
+type ComponentMetaTV = ComponentMeta & { propByName: Record<string, ComponentMeta['props'][number]> };
+
+/**
+ * Получает информацию о компоненте и его типах
+ *
+ * Требуется настройка storybook: `framework.options.docgen.plugin = 'vue-component-meta'`.
+ */
+export function getComponentMeta(component: ComponentInstance<Component>): ComponentMetaTV | undefined {
+	const componentMeta = component.__docgenInfo as ComponentMeta;
+	if (!componentMeta) return;
+
+	const componentMetaTV = {
+		...componentMeta,
+		propByName: {},
+	};
+
+	if (componentMetaTV.props) {
+		componentMetaTV.props.forEach((prop) => {
+			if (prop.name) {
+				componentMetaTV.propByName[prop.name] = prop;
+			}
+		});
+	}
+
+	return componentMetaTV;
+}
+
+/**
+ * Парсит union type в формате строки (например: `"("a" | "b" | "c")[]"`)
+ *
+ * Возвращает возможные значения массива строк, например: ['a', 'b', 'c']
+ *
+ * Если объединение включает типы `string`, `number`, `boolean` - будут возвращены соответствующие объекты
+ *
+ * @param type строка из поля `type` или `schema.type`
+ *
+ * @see ComponentMeta
+ */
+export const parseComponentMetaUnionArrayType = (type: string) => {
+	// Удаляем приставку ( )[] и `... N more ...`
+	const typePrepared = type
+		.replace(/^\(\s*|\s*\)\[]$/g, '') // удаляет скобки
+		.replace(/\[]$/, '') // удаляет []
+		.replace(/\| \.\.\. \d+ more \.\.\./g, ''); // убирает `... N more ...`
+
+	const res = typePrepared
+		.split('|')
+		.map(v => v.trim())
+		.map(v => {
+			// строка
+			if (/^['"]/.test(v)) return v.slice(1, -1);
+
+			// число
+			if (!isNaN(Number(v))) return Number(v);
+
+			if (v === 'null') return null;
+			if (v === 'undefined') return undefined;
+			if (v === 'true') return true;
+			if (v === 'false') return false;
+			if (v === 'string') return String;
+			if (v === 'number') return Number;
+			if (v === 'boolean') return Boolean;
+
+			return v;
+		})
+		.filter(Boolean);
+
+	if (!res.length) return;
+
+	return res;
+};
+
+/**
+ * Генерация объекта ArgsTypes для Storybook
+ */
+export function genArgsTypes(
+	component: ComponentInstance<Component>,
+	readonly = false,
+) {
+	const argTypes: Record<string, InputType> = {};
+
+	const componentMeta = getComponentMeta(component);
+
+	// сделать slot по умолчанию в виде строки
+	// __docgenInfo может отсутствовать для новых компонентов
+	componentMeta?.slots.forEach((slot) => {
+		argTypes[slot.name] = {
+			control: 'text',
+			table: {
+				readonly,
+			},
+		};
+	});
+
+	const propsNames = Object.keys(component.props ?? []);
+	propsNames.forEach((name, n) => {
+		const prop = component.props[name];
+		const propDocGen = componentMeta?.props[n];
+
+		if (propDocGen && propDocGen.name !== prop.name) {
+			new Error('component.__docgenInfo вернул не корректный список props, требуется проверка алгоритма');
+		}
+
+		argTypes[name] = genInputType(prop, propDocGen);
+
+		argTypes[name].table ??= {};
+		argTypes[name].table.readonly = readonly;
+
+		// Строка перечисления
+		if (prop.type === String) {
+			// argTypes[name].control = 'text';
+		}
+
+		// Число перечисления
+		if (prop.type === Number) {
+			// argTypes[name].control = 'number';
+
+			// Обработка числовых enum, в версии storybook 9 в Control они не работают
+			argTypes[name].options = propDocGen?.schema['schema']?.map((numberInString) => Number(numberInString)).filter(item => !Number.isNaN(item));
+		}
+
+		// для controls необходимо указывать конкретный тип, выбрать первый
+		if (Array.isArray(prop.type)) {
+			const type = prop.type[0];
+
+			switch (type) {
+				case Boolean:
+					argTypes[name].control = 'boolean';
+
+					break;
+
+				case String:
+					argTypes[name].control = 'text';
+
+					break;
+
+				case Number:
+					argTypes[name].control = 'number';
+
+					break;
+			}
+		}
+	});
+
+	return argTypes;
+}
+
+/**
+ * Получить объектное описание типа пропса компонента
+ *
+ * Использует плагин vue-component-meta
+ *
+ * См. конфигурацию storybook
+ *
+ * @example genPropMetaType(TopInput, 'size').schema.schema
+ *
+ * @see config.framework.options.docgen.plugin
+ */
+export const genPropMetaType = (component: any, propName, excludeUndefined: boolean = true) => {
+	let prop: any = null;
+
+	component.__docgenInfo?.props.forEach((propI) => {
+		if (propI.name !== propName) return;
+
+		prop = propI;
+	});
+
+	if (!prop) {
+		throw new Error('В component.__docgenInfo не найден prop: ' + propName);
+	}
+
+	prop = { ...prop };
+
+	if (prop.schema?.schema) {
+		prop.schema = { ...prop.schema };
+		prop.schema.schema = [...prop.schema.schema];
+
+		if (excludeUndefined && prop.schema?.schema?.includes('undefined')) {
+			prop.schema.schema = prop.schema.schema.filter(item => item !== 'undefined');
+		}
+
+		// fix формата плагина: заменить `'"string"'`, заменить на `'string'`
+		if (prop.schema?.schema) {
+			prop.schema.schema = prop.schema.schema.map(item => item = item?.[0] === '"' ? JSON.parse(item) : item);
+		}
+	}
+
+	return prop;
+};
+
+/**
+ * Генерация элемента для объекта ArgsTypes для Storybook
+ */
+const genInputType = (
+	prop: { type?: Function | Function[]; required?: boolean; default?: any },
+	propDocGen?: ComponentMeta['props'][number],
+): InputType => {
+	const inputType: InputType = {
+		table: {},
+	};
+
+	if (prop.required) {
+		inputType.table!.category = 'required';
+	}
+
+	propDocGen?.tags.forEach((tag) => {
+		if (tag.name === 'category') {
+			inputType.table!.category = tag.text;
+		}
+
+		if (tag.name === 'subcategory') {
+			inputType.table!.subcategory = tag.text;
+		}
+	});
+
+	return inputType;
+};
+
+/**
+ * Сгенерировать историю обзора компонента
+ *
+ * Располагайте компонент OverviewComponent в папке stories, чтобы он не мешал основному компоненту
+ * @param options - парамтеры историии
+ * @param options.args - следует указавать только необходимые для демонстрации props, которых нет в шаблоне OverviewComponent
+ * @param OverviewComponent - компонент для вывода другого компонента в разных состояниях
+ * @returns возвращает историю обзора компонента
+ */
+export function genOverviewStory<Story>(options: Story & StoryObj, OverviewComponent: any): Story {
+	if (!options.args) {
+		options.args = {};
+	}
+
+	if (!options.parameters) {
+		options.parameters = {};
+	}
+	if (!options.parameters.controls) {
+		options.parameters.controls = {};
+	}
+	if (!options.parameters.controls.include) {
+		options.parameters.controls.include = Object.keys(options.args);
+	}
+
+	if (!options.render) {
+		options.render = (args) => ({
+			components: { OverviewComponent },
+			setup() {
+				return { args };
+			},
+			template: '<OverviewComponent :="args"/>',
+		});
+	}
+
+	return options satisfies StoryObj;
+}
+
+/**
+ * Получить объект с css переменными из css стилей
+ * @param css - стили css
+ * @return - словарь с css переменными
+ */
+export function parseCSSVariables(css: string): Map<string, string> {
+	const matches = css.matchAll(/--([^:]+):([^;]+)/g);
+
+	const cssVariables = new Map();
+
+	for (const match of matches) {
+		const name = match[1].trim();
+		const value = match[2].trim();
+
+		cssVariables.set(name, value);
+	}
+
+	return cssVariables;
+}
+
+/**
+ * Сгенерировать словарь css переменных с двойной вложенностью, определяемую разделителем '-' в имени переменной
+ * @param cssVariables - словарь css переменных
+ * @param searchStrings - вернуть только подходящие по имени переменные, по условию AND
+ * @return - словарь с группами css переменных
+ */
+export function genCSSVariablesGroups(
+	cssVariables: Map<string, string>,
+	searchStrings: string[] = [],
+): Map<string, Map<string, Map<string, string>>> {
+	const cssVariablesGroups2 = new Map();
+
+	cssVariables.forEach((value, name) => {
+		const parts = name.split('-');
+		const groupName = parts[0] ?? '';
+		const subgroupName = parts[1] ?? '';
+
+		for (const searchString of searchStrings) {
+			if (searchString) {
+				if (searchString[0] === '/') {
+					const regexpString = searchString.replaceAll('/', '');
+
+					const regExp = new RegExp(regexpString);
+
+					if (!regExp.test(name)) {
+						return;
+					}
+				} else {
+					if (name.indexOf(searchString) === -1) {
+						return;
+					}
+				}
+
+			}
+		}
+
+		const group: Map<string, Map<string, string>> = cssVariablesGroups2.get(groupName) || new Map();
+		const subgroup: Map<string, string> = group.get(subgroupName) || new Map();
+
+		subgroup.set(name, value);
+		group.set(subgroupName, subgroup);
+
+		cssVariablesGroups2.set(groupName, group);
+	});
+
+	return cssVariablesGroups2;
+}

package/src/components/layout/islandRows/islandRows.stories.ts

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './islandRows.vue';
+import ReadMe from './stories/README.md?raw';
+
+import TopRows from '../rows/rows.vue';
+import TopIslandRowsRow from '@/components/layout/islandRows/islandRowsRow/islandRowsRow.vue';
+import TopIslandRowsSubTitle from '@/components/layout/islandRows/islandRowsSubTitle/islandRowsSubTitle.vue';
+import { fakerRU } from '@faker-js/faker';
+import { ref } from 'vue';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		title: 'Заголовок',
+		default: `Тут должен быть вставлен TopRows`,
+	},
+} satisfies Story;
+
+export const Overview = {
+	render: () => ({
+		components: {
+			TopRows,
+			TopIslandRows: Component,
+			TopIslandRowsRow,
+			TopIslandRowsSubTitle,
+		},
+		setup: () => {
+			return {
+				isCheck: ref(false),
+				fakerRU,
+			};
+		},
+		template: `
+			<div style="max-width: 500px;">
+				<TopIslandRows>
+					<template #title>
+						Настройки профиля
+					</template>
+					<template #default>
+						<TopIslandRowsSubTitle>
+							Основные настройки
+						</TopIslandRowsSubTitle>
+
+						<TopRows gap="xs">
+							<TopIslandRowsRow>
+								<TopRows>
+									<TopRows gap="l">
+										<TopInput
+											modelValue=""
+											captionType="top"
+											title="First name"
+											:placeholder="fakerRU.person.firstName()"
+										/>
+
+										<TopInput
+											modelValue=""
+											captionType="top"
+											title="Last name"
+											:placeholder="fakerRU.person.lastName()"
+										/>
+									</TopRows>
+								</TopRows>
+							</TopIslandRowsRow>
+						</TopRows>
+
+						<TopRows>
+							<TopInput
+								modelValue=""
+								captionType="top"
+								title="E-mail"
+								type="email"
+							/>
+						</TopRows>
+
+						<TopIslandRowsSubTitle>
+							Прочие настройки
+						</TopIslandRowsSubTitle>
+
+						<TopIslandRowsRow>
+							<TopSwitcher
+								:modelValue="false"
+								description="Вы можете использовать бета версию для получение новых фичей раньше остальных. Внимание, бета версии означает, что функционал находится в стадии разработки."
+							>
+								Бета версия
+							</TopSwitcher>
+						</TopIslandRowsRow>
+
+						<TopRows>
+							<TopTextarea modelValue="" placeholder="Опишите ваши любимые литературные образы"/>
+
+							<div class="top-comment">&nbsp; Книги бывают очень интересны</div>
+						</TopRows>
+
+						<TopIslandRowsRow>
+							<TopRadio modelValue="Мужчина" value="Мужчина" name="sex">
+								Мужчина
+							</TopRadio>
+							<TopRadio modelValue="" value="Женщина" name="sex">
+								Женщина
+							</TopRadio>
+						</TopIslandRowsRow>
+
+						<TopIslandRowsRow>
+							<TopCheckbox v-model="isCheck">
+								Согласен
+							</TopCheckbox>
+						</TopIslandRowsRow>
+
+						<TopIslandRowsRow v-show="isCheck" v-top-scroll-into-view>
+							<TopButton color="blue" styling="soft">
+								<span data-top-icon=""></span>Сохранить
+							</TopButton>
+						</TopIslandRowsRow>
+					</template>
+				</TopIslandRows>
+			</div>`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/layout/islandRows/islandRows.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Slots } from './types';
+import TopRows from '../rows/rows.vue';
+
+defineSlots<Slots>();
+</script>
+
+<template>
+	<div class="top-islandRows">
+		<div
+			v-if="$slots.title"
+			class="top-islandRows_title"
+		>
+			<slot name="title"></slot>
+		</div>
+
+		<TopRows gap="l" class="top-islandRows_rows">
+			<slot></slot>
+		</TopRows>
+	</div>
+</template>
+
+<style>
+.top-islandRows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--top-gap-2);
+}
+
+.top-islandRows_title {
+	font-size: 20px;
+	font-weight: bold;
+}
+
+.top-islandRows_rows {
+	border-radius: var(--top-radius-4);
+	background: var(--color-bg-shading-2);
+	padding: var(--top-padding-3);
+}
+
+/* В islandRows у всех полей ввода внутри top-rows прозрачные рамки */
+.top-islandRows_rows .top-rows > .top-input,
+.top-islandRows_rows .top-rows > .top-textarea,
+.top-islandRows_rows .top-rows > .top-select { --top-forms-border-color: transparent }
+
+/* Размеры форм */
+.top-islandRows_rows .top-button,
+.top-islandRows_rows .top-input,
+.top-islandRows_rows .top-textarea,
+.top-islandRows_rows .top-select { width: auto; flex-grow: 1; display: flex; }
+
+.top-islandRows_rows .top-forms-optionWrapper { padding: 0; flex-grow: 1; }
+</style>

package/src/components/layout/islandRows/islandRowsRow/islandRowsRow.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+</script>
+
+<template>
+	<div class="top-islandRows_row">
+		<slot></slot>
+	</div>
+</template>
+
+<style>
+.top-islandRows_row {
+	outline-offset: 2px;
+	border-radius: 8px;
+	background: var(--color-layout-front-1);
+	padding: var(--top-padding-3);
+	display: flex;
+	gap: var(--top-gap-2);
+}
+
+/* Фокус форм */
+.top-islandRows_row:has(> .top-forms-optionWrapper .top-forms-focusable:focus-visible) {
+	outline: 2px solid var(--color-line-primary-1);
+	outline-offset: 2px;
+}
+
+/* Фокус форм, стили top-error оставить у форм, иначе они будут конфликтовать со стилями фокуса, так как у top-islandRows_row нет border */
+.top-islandRows_row > .top-forms-optionWrapper .top-forms-focusable:not(.top-error) {
+	outline: none;
+	animation: none;
+}
+
+/* Отмена прозрачных рамок у полей ввода внутри islandRows, если top-rows расположен в islandRowsRow */
+.top-islandRows_row .top-rows > .top-input,
+.top-islandRows_row .top-rows > .top-textarea,
+.top-islandRows_row .top-rows > .top-select { --top-forms-border-color: inherit }
+</style>

package/src/components/layout/islandRows/islandRowsRow/types.ts

@@ -0,0 +1 @@
+export interface Props {}

package/src/components/layout/islandRows/islandRowsSubTitle/islandRowsSubTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+</script>
+
+<template>
+	<div class="top-islandRows_subTitle">
+		<slot></slot>
+	</div>
+</template>
+
+<style>
+.top-islandRows_subTitle {
+	width: 100%;
+	font-size: 16px;
+	font-weight: bold;
+}
+</style>

package/src/components/layout/islandRows/stories/README.md

@@ -0,0 +1,8 @@
+Компонент ялвяется помощником для вывода элементов строчками друг под другом с заголовком.
+
+Для вывода строчек использует **TopRows** со своей стилизацией.
+
+## Подкомпоненты
+
+- **TopIslandRowsRow**: Вставка в список подстроки, добавляет отступы и фон
+- **TopIslandRowsSubTitle**: Подзаголовок, для ручной всатвки заголовков строчек в нужное место

package/src/components/layout/islandRows/types.ts

@@ -0,0 +1,11 @@
+export interface Slots {
+	/**
+	 * Заголовок
+	 */
+	title?(props: {}): any;
+
+	/**
+	 * Содержимое TopRows
+	 */
+	default(props: {}): any;
+}

package/src/components/layout/layout.ts

@@ -0,0 +1,11 @@
+import type { ComponentCustomProps } from 'vue';
+
+import IslandRows from './islandRows/islandRows.vue';
+import IslandRowsRow from './islandRows/islandRowsRow/islandRowsRow.vue';
+import IslandRowsSubTitle from './islandRows/islandRowsSubTitle/islandRowsSubTitle.vue';
+import Rows from './rows/rows.vue';
+
+export const TopIslandRows = IslandRows as typeof IslandRows & ComponentCustomProps;
+export const TopIslandRowsRow = IslandRowsRow as typeof IslandRowsRow & ComponentCustomProps;
+export const TopIslandRowsSubTitle = IslandRowsSubTitle as typeof IslandRowsSubTitle & ComponentCustomProps;
+export const TopRows = Rows as typeof Rows & ComponentCustomProps;

package/src/components/layout/rows/rows.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './rows.vue';
+import ReadMe from './stories/README.md?raw';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		gap: 'm',
+	},
+	render: (args) => ({
+		components: {
+			Rows: Component,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<Rows :gap="args.gap">
+				<div>Элемент 1</div>
+				<div>Элемент 2</div>
+				<div>Элемент 3</div>
+				<div>Элемент 4</div>
+				<div>Элемент 5</div>
+			</Rows>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;