@volverjs/ui-vue 0.0.9-beta.4 → 0.0.9-beta.5

package/src/composables/alert/useAlert.ts

@@ -0,0 +1,103 @@
+import {
+	DEFAULT_ALERT_AUTO_CLOSE,
+	DEFAULT_ALERT_DISMISSABLE,
+	DEFAULT_ALERT_GROUP,
+	DEFAULT_ALERT_MODIFIERS,
+	DEFAULT_ALERT_INFO_ICON,
+	DefaultAlertIconMap,
+} from '@/constants'
+import type { Alert, AlertModifiers } from '@/types/alert'
+
+const groups = reactive(
+	new Map<string, Map<string, Alert>>([
+		[DEFAULT_ALERT_GROUP, new Map<string, Alert>()],
+	]),
+)
+
+/**
+ * @description Composable to access alert groups, alerts and functions to add, remove and get alerts by group.
+ * @example
+ *  const { groups, alerts, addAlert, removeAlert, getAlerts } = useAlert()
+ *  addAlert({
+ *      title: 'Success!',
+ *      modifiers: 'success',
+ *  })
+ *
+ *  `<vv-alert-group :items="alerts" :onClose="removeAlert" />`
+ *
+ *  @returns  {
+ *      alerts: ComputedRef<Alert[]> reactive list of alerts default group,
+ *      groups: ReactiveRef<Map<string, Map<string, Alert>>>,
+ *      addAlert: Function to add alert,
+ *      removeAlert: Function to remove alert,
+ *      getAlerts: Function to get alerts by group
+ *  }
+ */
+export const useAlert = () => {
+	const addAlert = (
+		{
+			id = crypto.randomUUID(),
+			group = DEFAULT_ALERT_GROUP,
+			title,
+			icon = DEFAULT_ALERT_INFO_ICON,
+			content,
+			footer,
+			modifiers = DEFAULT_ALERT_MODIFIERS,
+			dismissable = DEFAULT_ALERT_DISMISSABLE,
+			autoClose = DEFAULT_ALERT_AUTO_CLOSE,
+		} = {} as Partial<Alert>,
+	) => {
+		if (!groups.has(group)) {
+			groups.set(group, new Map<string, Alert>())
+		}
+		const groupMap = groups.get(group)
+		const normalizedModifiers =
+			typeof modifiers === 'string' ? modifiers.split(' ') : modifiers
+
+		if (!icon) {
+			const alertModifier = normalizedModifiers.find((modifier) =>
+				DefaultAlertIconMap.has(modifier as AlertModifiers),
+			) as AlertModifiers | undefined
+
+			if (alertModifier) {
+				icon = DefaultAlertIconMap.get(alertModifier) as string
+			}
+		}
+		groupMap?.set(id.toString(), {
+			id,
+			group,
+			title,
+			icon,
+			content,
+			footer,
+			modifiers,
+			dismissable,
+			autoClose,
+			timestamp: Date.now(),
+		})
+	}
+
+	const removeAlert = (id: string | number, group = DEFAULT_ALERT_GROUP) => {
+		const groupMap = groups.get(group)
+		groupMap?.delete(id.toString())
+	}
+
+	const getAlerts = (group = DEFAULT_ALERT_GROUP) => {
+		return computed(() => {
+			const groupMap = groups.get(group)
+			return groupMap && groupMap instanceof Map
+				? Array.from(groupMap?.values()).sort(
+						(a, b) => a.timestamp - b.timestamp,
+				  )
+				: []
+		})
+	}
+
+	return {
+		groups,
+		alerts: getAlerts(),
+		addAlert,
+		removeAlert,
+		getAlerts,
+	}
+}

package/src/composables/index.ts

@@ -0,0 +1,3 @@
+import { useAlert } from './alert/useAlert'
+
+export { useAlert }

package/src/constants.ts

@@ -1,6 +1,7 @@
 import type { InjectionKey, Ref } from 'vue'
 import type { Emitter } from 'mitt'
 import type { Volver } from './Volver'
+import type { AlertModifiers } from './types/alert'
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
@@ -110,3 +111,23 @@ export const INJECTION_KEY_ALERT_GROUP = Symbol.for(
 	name?: Ref<string | undefined>
 	bus?: Emitter<{ close: string }>
 }>
+export const DEFAULT_ALERT_AUTO_CLOSE = 10000
+export const DEFAULT_ALERT_MODIFIERS = 'info'
+export const DEFAULT_ALERT_DISMISSABLE = true
+export const DEFAULT_ALERT_GROUP = 'default'
+export const DEFAULT_ALERT_INFO_ICON = 'information'
+export const DEFAULT_ALERT_SUCCESS_ICON = 'check-circle'
+export const DEFAULT_ALERT_WARNING_ICON = 'warning'
+export const DEFAULT_ALERT_DANGER_ICON = 'error'
+export const DefaultAlertIconMap = new Map<AlertModifiers, string>([
+	['success', DEFAULT_ALERT_SUCCESS_ICON],
+	['info', DEFAULT_ALERT_INFO_ICON],
+	['warning', DEFAULT_ALERT_WARNING_ICON],
+	['danger', DEFAULT_ALERT_DANGER_ICON],
+])
+// {
+// 	success: DEFAULT_ALERT_SUCCESS_ICON,
+// 	info: DEFAULT_ALERT_INFO_ICON,
+// 	warning: DEFAULT_ALERT_WARNING_ICON,
+// 	danger: DEFAULT_ALERT_DANGER_ICON,
+// }

package/src/stories/AlertGroup/AlertGroup.test.ts

@@ -6,6 +6,8 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(
 		'element',
 	)) as HTMLElement
+	const buttons =
+		canvasElement.getElementsByClassName('buttons-container')?.[0]
 
 	expect(element).toHaveClass('vv-alert-group')
 
@@ -71,6 +73,17 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		expect(element.lastElementChild?.innerHTML).toEqual(div.innerHTML)
 	}
 
+	if (buttons) {
+		// click every button child and expect to have alert with correct css class
+		for (let i = 0; i < buttons.children.length; i++) {
+			const button = buttons.children[i] as HTMLElement
+			await button.click()
+			expect(alertGroupList.lastElementChild).toHaveClass(
+				`vv-alert--${button.id}`,
+			)
+		}
+	}
+
 	// check accessibility
 	await expect(element).toHaveNoViolations()
 }

package/src/stories/AlertGroup/AlertGroupSlots.stories.ts

@@ -1,11 +1,11 @@
 import type { Meta } from '@storybook/vue3'
-import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
 import { defaultArgs, argTypes } from './AlertGroup.settings'
 import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 
-const meta: Meta<typeof VvAlert> = {
+const meta: Meta<typeof VvAlertGroup> = {
 	title: 'Components/AlertGroup/Slots',
-	component: VvAlert,
+	component: VvAlertGroup,
 	args: defaultArgs,
 	argTypes,
 }

package/src/stories/AlertGroup/AlertGroupWithComposable.stories.ts

@@ -0,0 +1,118 @@
+import type { Meta } from '@storybook/vue3'
+import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultArgs, argTypes } from './AlertGroup.settings'
+import { Default as DefaultStory, type Story } from './AlertGroup.stories'
+import { useAlert } from '@/composables/alert/useAlert'
+
+const meta: Meta<typeof VvAlertGroup> = {
+	title: 'Components/AlertGroup/UseComposable',
+	component: VvAlertGroup,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+export const UseComposable: Story = {
+	...DefaultStory,
+	parameters: {
+		docs: {
+			source: {
+				type: 'code',
+				language: 'html',
+				code: /* html */ `
+<div class="flex gap-md">
+	<vv-button label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
+	<vv-button label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
+	<vv-button label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
+	<vv-button label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
+</div>
+<vv-alert-group v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
+
+<script setup lang='ts'>
+	import { useAlert } from '@volverjs/ui-vue/composables'
+
+	const { addAlert, removeAlert, alerts } = useAlert()
+
+	function showSuccess() {
+		addAlert({
+			title: 'Success!',
+			modifiers: 'success',
+		})
+	}
+	function showDanger() {
+		addAlert({
+			title: 'Danger!',
+			modifiers: 'danger',
+		})
+	}
+	function showWarning() {
+		addAlert({
+			title: 'Warning!',
+			modifiers: 'warning',
+		})
+	}
+	function showInfo() {
+		addAlert({
+			title: 'Info!',
+			modifiers: 'info',
+		})
+	}
+</script>
+				`,
+			},
+		},
+	},
+	render: (args) => ({
+		components: { VvAlertGroup, VvButton },
+		setup() {
+			const { addAlert, removeAlert, alerts } = useAlert()
+
+			function showSuccess() {
+				addAlert({
+					title: 'Success!',
+					modifiers: 'success',
+				})
+			}
+			function showDanger() {
+				addAlert({
+					title: 'Danger!',
+					modifiers: 'danger',
+				})
+			}
+			function showWarning() {
+				addAlert({
+					title: 'Warning!',
+					modifiers: 'warning',
+				})
+			}
+			function showInfo() {
+				addAlert({
+					title: 'Info!',
+					modifiers: 'info',
+				})
+			}
+
+			return {
+				args,
+				alerts,
+				removeAlert,
+				showSuccess,
+				showDanger,
+				showWarning,
+				showInfo,
+			}
+		},
+		template: /* html */ `
+			<div class="buttons-container flex gap-md" >
+				<vv-button id="success" label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
+				<vv-button id="danger" label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
+				<vv-button id="warning" label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
+				<vv-button id="info" label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
+			</div>
+			<vv-alert-group v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
+        `,
+	}),
+}

package/src/types/alert.d.ts

@@ -0,0 +1,20 @@
+export type AlertModifiers =
+	| 'success'
+	| 'info'
+	| 'warning'
+	| 'danger'
+	| 'brand'
+	| 'accent'
+
+export type Alert = {
+	id: string | number
+	group: string
+	title?: string
+	icon: string | Record<string, unknown>
+	content?: string
+	footer?: string
+	modifiers: AlertModifiers
+	dismissable: boolean
+	autoClose: number
+	timestamp: number
+}