@witchcraft/ui 0.4.0 → 0.4.2

package/src/runtime/components/{LibNotifications/LibNotification.stories.ts → WNotifications/WNotification.stories.ts}

@@ -1,15 +1,16 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-import LibNotification from "./LibNotification.vue"
+import WNotification from "./WNotification.vue"
+import WNotificationTestMessageComponent from "./WNotificationTestMessageComponent.vue"
 
 import { NotificationHandler } from "../../helpers/NotificationHandler.js"
 import * as components from "../index.js"
 
 const handler = new NotificationHandler()
 
-const meta: Meta<typeof LibNotification> = {
-	component: LibNotification,
+const meta: Meta<typeof WNotification> = {
+	component: WNotification,
 	title: "Components/Notification",
 	args: {
 
@@ -17,17 +18,21 @@ const meta: Meta<typeof LibNotification> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibNotification>
+type Story = StoryObj<typeof WNotification>
 
 export const Primary: Story = {
 	render: args => ({
-		components: { ...components, LibNotification },
+		components: {
+			...components,
+			WNotification,
+			WNotificationTestMessageComponent
+		},
 		setup() {
 			return { args }
 		},
 		backgrounds: { disable: true },
 		template: `
-			<lib-notification v-bind="args"/>
+			<WNotification v-bind="args"/>
 		`
 	}),
 	args: {
@@ -136,3 +141,34 @@ export const CustomDefaultAndDangerousOption: Story = {
 		})
 	}
 }
+
+
+export const CustomMessageComponent: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...Primary.args!.notification,
+			component: WNotificationTestMessageComponent,
+			componentProps: {
+				customProp: "Custom Prop"
+			}
+		})
+	}
+}
+
+export const CustomNotificationProps: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...Primary.args!.notification,
+			message: "Should be 300px wide",
+			notificationProps: {
+				class: "w-[300px]!"
+			}
+		})
+	}
+}

package/src/runtime/components/{LibNotifications/LibNotification.vue → WNotifications/WNotification.vue}

@@ -1,9 +1,11 @@
 <template>
 <div
 	v-if="notification"
+	:role="notification.requiresAction ? 'alertdialog' : 'status'"
+	:aria-labelledby="notification.title ? `title-${notification.id}` : undefined"
+	:aria-describedby="notification.message ? `msg-${notification.id}` : undefined"
 	:class="twMerge(`
 		notification
-		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
 		text-fg
@@ -19,10 +21,15 @@
 		p-1
 		text-sm
 		focus:border-accent-500
+		focus-within:border-accent-500
 	`,
-		($attrs as any).class)"
-	v-bind="{ ...$attrs, class: undefined }"
+		($attrs as any).class,
+		notification.notificationAttrs?.class
+	)
+	"
+	v-bind="{ ...$attrs, ...(notification?.notificationAttrs ?? {}), class: undefined }"
 	tabindex="0"
+	:data-id="notification.id"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
@@ -30,27 +37,29 @@
 		name="top"
 		:notification="notification"
 	/>
+
+
 	<div
 		class="
-			notification--header
-			flex-reverse
-			flex
-			justify-between
-			items-center
-		"
+		notification--header
+		flex-reverse
+		flex
+		justify-between
+		items-center
+	"
 	>
 		<slot
 			v-if="notification.title"
 			name="title"
 			v-bind="setSlotVar('title', {
+				id: `title-${notification.id}`,
 				title: notification.title,
 				class: `
 					notification--title
 					focus-outline
 					rounded-sm
 					font-bold
-				`,
-				tabindex: 0
+				`
 			})"
 		>
 			<div
@@ -60,9 +69,10 @@
 			</div>
 		</slot>
 		<div class="notification--spacer flex-1"/>
-		<div class="actions flex">
-			<LibButton
+		<div class="notification--actions flex">
+			<WButton
 				:border="false"
+				aria-label="Copy notification content"
 				class="
 					notification--title-button
 					notification--copy-button
@@ -71,10 +81,11 @@
 				"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
-				<icon><i-fa6-regular-copy/></icon>
-			</LibButton>
-			<lib-button
+				<WIcon><i-lucide-copy/></WIcon>
+			</WButton>
+			<WButton
 				v-if="notification.cancellable"
+				aria-label="Dismiss notification"
 				class="
 					notification--title-button
 					notification--cancel-button
@@ -82,31 +93,49 @@
 				:border="false"
 				@click="NotificationHandler.dismiss(notification)"
 			>
-				<icon><i-fa6-solid-xmark/></icon>
-			</lib-button>
+				<WIcon><i-lucide-x/></WIcon>
+			</Wbutton>
 		</div>
 	</div>
 	<slot
-		v-if="notification.message"
+		v-if="notification.message && !notification.component"
 		name="message"
 		v-bind="setSlotVar('message', {
 			class: `
 				notification--message
+				shrink-1
+				overflow-auto
 				whitespace-pre-wrap
 				text-neutral-800
 				dark:text-neutral-200
 				mb-1
 			`,
-			message: notification.message,
-			tabindex: 0
+			message: notification.message
 		})"
 	>
 		<div
 			v-bind="slotVars.message"
+			:id="`msg-${notification.id}`"
 		>
 			{{ notification.message }}
 		</div>
 	</slot>
+	<Component
+		v-if="notification.component"
+		:is="notification.component"
+		v-bind="{
+			notification,
+			message: notification.message,
+			messageClasses: `
+					notification--message
+					whitespace-pre-wrap
+					text-neutral-800
+					dark:text-neutral-200
+					mb-1
+				`,
+			...(notification.componentProps ?? {})
+		}"
+	/>
 	<div class="notification--footer flex items-end justify-between">
 		<div
 			v-if="notification.code"
@@ -125,7 +154,7 @@
 				gap-2
 			"
 		>
-			<lib-button
+			<WButton
 				:label="option"
 				:class="twMerge(`
 					notification--button
@@ -147,19 +176,19 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes, onMounted, ref, useAttrs } from "vue"
 
-import IFa6RegularCopy from "~icons/fa6-regular/copy"
-import IFa6SolidXmark from "~icons/fa6-solid/xmark"
+import ILucideCopy from "~icons/lucide/copy"
+import ILucideX from "~icons/lucide/x"
 
 import { useSlotVars } from "../../composables/useSlotVars.js"
 import { copy } from "../../helpers/copy.js"
 import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
+import type { TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
-import LibButton from "../LibButton/LibButton.vue"
-import type { TailwindClassProp } from "../shared/props.js"
+import WButton from "../WButton/WButton.vue"
+import WIcon from "../WIcon/WIcon.vue"
 
 defineOptions({
-	name: "LibNotification",
+	name: "WNotification",
 	inheritAttrs: false
 })
 const $attrs = useAttrs()
@@ -167,10 +196,18 @@ const $attrs = useAttrs()
 const { setSlotVar, slotVars } = useSlotVars()
 
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<
+	& {
+		notification: NotificationEntry
+		handler?: NotificationHandler
+	}
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
 	handler: undefined
 })
 
+
 const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => {
 	return notification.dangerous.includes(option)
 		? "danger"
@@ -179,31 +216,21 @@ const getColor = (notification: NotificationEntry, option: string): "ok" | "prim
 			: "secondary"
 }
 
-/* Todo make this more flexible? */
 
+/* Todo make this more flexible? */
 const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
 
 const notificationEl = ref<null | HTMLElement>(null)
+
 onMounted(() => {
-	notificationEl.value?.focus()
+	if (props.notification.requiresAction) {
+		notificationEl.value?.focus()
+	}
 })
+
 defineExpose({
 	focus: () => {
 		notificationEl.value?.focus()
 	}
 })
 </script>
-
-<script lang="ts">
-type RealProps = {
-	notification: NotificationEntry
-	handler?: NotificationHandler
-}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
-	RealProps
-{}
-</script>

package/src/runtime/components/WNotifications/WNotificationTestMessageComponent.vue

@@ -0,0 +1,27 @@
+<template>
+<div class="border-2 border-accent-500 p-1 px-2 rounded-sm bg-accent-500/10">
+	<div class="text-lg">
+		Custom Message Component
+	</div>
+	<div class="font-bold">
+		Original message:
+	</div>
+	<div
+		:class="props.messageClasses"
+	>
+		{{ props.message }}
+	</div>
+	<div class="font-bold">
+		Custom Prop:
+	</div>
+	<div>
+		{{ props.customProp }}
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import type { CustomNotificationComponentProps } from "../../types/index.js"
+
+const props = defineProps<CustomNotificationComponentProps & { customProp: string }>()
+</script>

package/src/runtime/components/WNotifications/WNotifications.stories.ts

@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { faker } from "@faker-js/faker"
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { computed, ref } from "vue"
+
+import WNotifications from "./WNotifications.vue"
+
+import { NotificationHandler } from "../../helpers/NotificationHandler.js"
+import * as components from "../index.js"
+
+type ExtraTestArgs = {
+	_withTitle?: boolean
+}
+const meta: Meta<typeof WNotifications> = {
+	component: WNotifications,
+	title: "Components/Notifications",
+	args: {
+		_withTitle: true
+	} satisfies ExtraTestArgs as any
+}
+
+export default meta
+
+type Story = StoryObj<typeof WNotifications> & {
+	args?: ExtraTestArgs
+}
+
+export const Primary: Story = {
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup() {
+				const handler = new NotificationHandler({})
+
+				let count = 0
+
+				const withTitle = ref(extraArgs._withTitle)
+				const disableTimeout = ref(false)
+				const lotsOfText = ref(false)
+				const paragraphs = `\n Simulating lots of text:\n${faker.lorem.paragraphs(20)}`
+				const extraText = computed(() => lotsOfText.value ? paragraphs : "")
+
+				const notifyRequiresAction = (options: any) => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a cancellable notification that requires action. Pick an option:${extraText.value}`,
+						requiresAction: true,
+						options: ["Ok", "Default Answer", "Cancel"],
+						default: "Default Answer",
+						cancellable: true,
+						...options
+					})
+				}
+
+				const notifyWithDangerousOption = () => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a cancellable notification that has a dangerous option. Pick an option:${extraText.value}`,
+						options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
+						cancellable: true,
+						default: "Default Answer",
+						dangerous: ["Dangerous Option"]
+					})
+				}
+				const notifyNonCancellable = () => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a non-cancellable notification. Pick an option:${extraText.value}`,
+						options: ["Ok", "Default Answer"],
+						default: "Default Answer",
+						cancellable: false
+					})
+				}
+				const notifyNonCancellableRequiresAction = () => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a non-cancellable notification. Pick an option:${extraText.value}`,
+						requiresAction: true,
+						options: ["Ok", "Default Answer"],
+						default: "Default Answer",
+						cancellable: false
+					})
+				}
+				const notifyTimeoutable = () => {
+					count++
+					void handler.notify({
+						title: withTitle.value ? `Notification(${count})` : undefined,
+						message: `This is a notification. No action required.${extraText.value}`,
+						timeout: disableTimeout.value ? false : 5000
+					})
+				}
+				return {
+					notifyRequiresAction,
+					notifyTimeoutable,
+					notifyNonCancellable,
+					notifyWithDangerousOption,
+					notifyNonCancellableRequiresAction,
+					handler,
+					withTitle,
+					disableTimeout,
+					lotsOfText,
+					args: {
+						outline: false,
+						...args
+					}
+				}
+			},
+			backgrounds: { disable: true },
+			// <WDebug>{{args.handler}}</WDebug>
+			template: `
+	<WRoot :outline="args.outline" :notification-handler="handler">
+		<WButton :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></WButton>
+		<WButton :label="'Notify RequiresAction (Cancellable)'" @click="notifyRequiresAction()"></WButton>
+		<WButton :label="'Notify RequiresAction (Cancellable) - Custom Width'" @click="notifyRequiresAction({cancellable:true,notificationProps: {class: 'sm:max-w-[90dvw]'}})"></WButton>
+		<WButton :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></WButton>
+		<WButton :label="'Notify With Dangerous Option (Cancellable)'" @click="notifyWithDangerousOption()"></WButton>
+		<WButton :label="'Notify Non-Cancellable'" @click="notifyNonCancellable()"></WButton>
+		<WCheckbox v-model="lotsOfText">Use lots of text</WCheckbox>
+		<WCheckbox v-model="disableTimeout">Disable Timeout</WCheckbox>
+		<WCheckbox v-model="withTitle">With Title</WCheckbox>
+		<WNotifications :handler="handler" />
+		History:
+		<WDebug>
+			<template v-for="entry in handler.history">
+				Message: {{entry.message}}
+				Resolution: {{entry.resolution}}
+				<br>
+			</template>
+		</WDebug>
+	</WRoot>
+	`
+		}
+	}
+}