@topvisor/ui 1.0.42-dev.2 → 1.0.42-policy.0

package/src/components/helpersStories.ts

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

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

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

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

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

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

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

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

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

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

package/src/components/layout/layout.ts

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

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