feat: init 'Toast' (909222d3) · Commits · Дмитрий Малюгин / UI_storybook

src/common/interfaces/componentsProp.ts

+2 −0

Original line number	Diff line number	Diff line
		@@ -118,3 +118,5 @@ export interface ISliderOptions {
		color?: TThemeColor;
		darknessColor?: TDarkness;
		}

		export type TToastType = 'success' \| 'info' \| 'warn' \| 'error';

src/common/interfaces/componentsProps.ts

+10 −0

Original line number	Diff line number	Diff line
		@@ -19,6 +19,7 @@ import type {
		ISliderOptions,
		ITableColumn,
		ITreeItem,
		TToastType,
		} from '@interfaces/componentsProp';

		export interface ITableProps {
		@@ -288,6 +289,15 @@ export interface ITSProps {
		disabled?: boolean;
		}

		export interface IToastProps {
		type?: TToastType;
		theme?: TThemeColor;
		size?: TSize;
		text?: string;
		header?: string;
		icon?: TIcon;
		}

		export interface ITagProps {
		value?: string;
		size?: TSize;

src/components/Toast/Toast.stories.ts

0 → 100644

+59 −0

Original line number	Diff line number	Diff line
		import type { Meta, StoryObj } from '@storybook/vue3';

		import Toast from './Toast.vue';

		const meta: Meta = {
		title: 'Components/Toast',
		component: Toast,
		tags: ['small_data'],
		parameters: {
		docs: {
		description: {
		component: 'A component is used to categorize content. Can be used with icons.',
		},
		},
		},
		argTypes: {
		size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
		theme: {
		control: 'select',
		options: [
		'white',
		'blue',
		'sky',
		'cyan',
		'teal',
		'green',
		'yellow',
		'orange',
		'pink',
		'fuchsia',
		'purple',
		'indigo',
		'rose',
		'red',
		'black',
		],
		},
		},
		args: {},
		} satisfies Meta<typeof Toast>;

		export default meta;

		type Story = StoryObj<typeof meta>;

		export const Simple: Story = {
		args: {
		active: true,
		},
		};

		export const Small: Story = {
		args: {
		size: 'small',
		theme: 'red',
		value: 'Dangerous',
		iconRight: 'Age18Icon',
		},
		};

src/components/Toast/Toast.vue

0 → 100644

+68 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import type { IToastProps } from '@interfaces/componentsProps';
		import { computed } from 'vue';
		import { convertThemeToColor } from '@helpers/common';
		import type { TToastType } from '@interfaces/componentsProp';

		const props = withDefaults(defineProps<IToastProps>(), {
		type: 'success',
		text: 'This is a toast about success.',
		size: 'normal',
		theme: 'green',
		});

		const typeToHeader: Record<TToastType, string> = {
		success: 'Success Message',
		info: 'Info Message',
		warn: 'Warn Message',
		error: 'Error Message',
		};

		const header = computed<string>(() => props.header ?? typeToHeader[props.type]);

		const color = computed(() => convertThemeToColor(props.theme, '400'));
		const whiteOrBlack = computed(() => (props.theme === 'white' ? 'black' : 'white'));
		const backgroundColor = computed(() =>
		convertThemeToColor(props.theme === 'white' ? 'black' : props.theme === 'black' ? 'white' : props.theme, '700'),
		);
		const borderColor = computed(() => convertThemeToColor(props.theme, '500'));
		const fontSize = computed(() => {
		const size = props.size;
		if (size === 'normal') return '16px';
		if (size === 'large') return '20px';
		if (size === 'huge') return '24px';
		return '12px';
		});
		const padding = computed(() => {
		const size = props.size;
		if (size === 'normal') return '5px 11px';
		if (size === 'large') return '6px 13px';
		if (size === 'huge') return '7px 16px';
		return '3px 7px';
		});
		</script>

		<template>
		<section class="toast-container">
		<h3 class="toast-header" :style="`font-size: calc(${fontSize} + 4px)`">{{ header }}</h3>
		<p class="toast-text">{{ text }}</p>
		</section>
		</template>

		<style scoped>
		.toast-container {
		position: absolute;
		padding: v-bind(padding);
		border: 1px solid v-bind(borderColor);
		border-radius: 5px;
		background-color: v-bind(backgroundColor);
		}
		.toast-header {
		color: v-bind(color);
		margin-bottom: 5px;
		}
		.toast-text {
		color: v-bind(whiteOrBlack);
		font-size: v-bind(fontSize);
		}
		</style>

src/postponed/Cropper/Cropper.stories.ts

+45 −45

Original line number	Diff line number	Diff line
		// import type { Meta, StoryObj } from '@storybook/vue3';
		//
		// import Cropper from './Cropper.vue';
		//
		// const meta: Meta = {
		// title: 'Components/Cropper',
		// component: Cropper,
		// tags: ['pick'],
		// parameters: {
		// docs: {
		// description: {
		// component: 'A component to pick color. Can be with button.',
		// },
		// },
		// },
		// argTypes: {
		// menuPosition: { control: 'select', options: ['top', 'right', 'bottom', 'left'] },
		// src: { control: 'text' },
		// width: { control: 'number' },
		// height: { control: 'number' },
		// },
		// } satisfies Meta<typeof Cropper>;
		//
		// export default meta;
		//
		// type Story = StoryObj<typeof meta>;
		//
		// export const Simple: Story = {
		// args: {
		// src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoFRQjM-wM_nXMA03AGDXgJK3VeX7vtD3ctA&s',
		// },
		// };
		//
		// export const Full: Story = {
		// args: {
		// buttonProps: {
		// label: 'Pick color!',
		// theme: 'red',
		// textStyle: 'bold',
		// },
		//
		// size: 'large',
		// sameButtonColor: true,
		// },
		// };
		import type { Meta, StoryObj } from '@storybook/vue3';

		import Cropper from './Cropper.vue';

		const meta: Meta = {
		title: 'Components/Cropper',
		component: Cropper,
		tags: ['pick'],
		parameters: {
		docs: {
		description: {
		component: 'A component to pick color. Can be with button.',
		},
		},
		},
		argTypes: {
		menuPosition: { control: 'select', options: ['top', 'right', 'bottom', 'left'] },
		src: { control: 'text' },
		width: { control: 'number' },
		height: { control: 'number' },
		},
		} satisfies Meta<typeof Cropper>;

		export default meta;

		type Story = StoryObj<typeof meta>;

		export const Simple: Story = {
		args: {
		src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoFRQjM-wM_nXMA03AGDXgJK3VeX7vtD3ctA&s',
		},
		};

		export const Full: Story = {
		args: {
		buttonProps: {
		label: 'Pick color!',
		theme: 'red',
		textStyle: 'bold',
		},

		size: 'large',
		sameButtonColor: true,
		},
		};