@witchcraft/ui 0.0.1

package/src/runtime/components/LibNotifications/LibNotification.stories.ts

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+import LibNotification from "./LibNotification.vue"
+
+import { NotificationHandler } from "../../helpers/NotificationHandler.js"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const handler = new NotificationHandler()
+
+const meta: Meta<typeof LibNotification> = {
+	component: LibNotification,
+	title: "Components/Notification",
+	args: {
+
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof LibNotification>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components: { ...components, LibNotification },
+		setup() {
+			return { args }
+		},
+		backgrounds: { disable: true },
+		template: `
+			<lib-notification v-bind="args"/>
+		`,
+	}),
+	args: {
+		// @ts-expect-error calling protected method
+		notification: { ...handler._createEntry({
+			title: `Notification`,
+			message: `This is a notification. Pick an option:`,
+		}),
+			// eslint-disable-next-line @typescript-eslint/no-empty-function
+																		resolve: () => { } },
+	},
+}
+export const WithoutTitle: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...Primary.args!.notification,
+			title: undefined,
+		}),
+	},
+}
+export const WithCode: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...Primary.args!.notification,
+			code: "0001",
+		}),
+	},
+}
+export const RequiresAction: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...Primary.args!.notification,
+			requiresAction: true,
+		}),
+	},
+}
+
+/** Should not have cancel cross in top corner. */
+
+export const Uncancellable: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...Primary.args!.notification,
+			options: ["Ok"],
+			cancellable: false,
+		}),
+	},
+}
+
+export const CustomOptions: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...Primary.args!.notification,
+			options: ["Ok", "Default Answer", "Cancel"],
+		}),
+	},
+}
+export const CustomDefaultOption: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...CustomOptions.args!.notification,
+			default: "Default Answer",
+		}),
+	},
+}
+export const CustomDangerousOption: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...CustomOptions.args!.notification,
+			options: ["Ok", "Dangerous Option", "Cancel"],
+			dangerous: ["Dangerous Option"],
+		}),
+	},
+}
+export const CustomDefaultAndDangerousOption: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...CustomOptions.args!.notification,
+			options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
+			default: "Default Answer",
+			dangerous: ["Dangerous Option"],
+		}),
+	},
+}
+

package/src/runtime/components/LibNotifications/LibNotification.vue

@@ -0,0 +1,121 @@
+<template>
+<div :class="twMerge(`notification
+		max-w-700px
+		bg-neutral-50
+		dark:bg-neutral-950
+		text-fg
+		dark:text-bg
+		border
+		border-neutral-400
+		rounded-sm
+		focus-outline
+		flex-flex-col
+		gap-2
+		p-2 m-2
+	`,
+	($attrs as any).class)"
+	v-bind="{ ...$attrs, class: undefined }"
+	tabindex="0"
+	ref="notificationEl"
+	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
+>
+	<div class="header flex-reverse flex justify-between">
+		<div v-if="notification.title"
+			tabindex="0"
+			class="title
+				focus-outline flex
+				rounded-sm
+				font-bold
+			"
+		>
+			{{ notification.title }}
+		</div>
+		<div class="flex-1"/>
+		<div class="actions flex">
+			<LibButton :border="false"
+				class="copy text-neutral-700"
+				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
+			>
+				<icon><i-fa6-regular-copy/></icon>
+			</LibButton>
+			<lib-button v-if="notification.cancellable" :border="false" @click="NotificationHandler.dismiss(notification)">
+				<icon><i-fa6-solid-xmark/></icon>
+			</lib-button>
+		</div>
+	</div>
+	<div class="message whitespace-pre-wrap" tabindex="0">
+		{{ notification.message }}
+	</div>
+	<div class="bottom flex items-end justify-between">
+		<div v-if="notification.code" class="code text-xs text-neutral-700 dark:text-neutral-300">
+			Code: {{ notification.code }}
+		</div>
+		<div class="flex-1 py-1"/>
+		<div v-if="notification.options"
+			class="options
+				flex flex-wrap justify-end
+				gap-2
+			"
+		>
+			<lib-button :label="option"
+				:class="buttonColors[i] == 'secondary' ? 'p-0': undefined"
+				:border="buttonColors[i] !== 'secondary'"
+				:color="buttonColors[i]"
+				v-for="option, i in notification.options"
+				:key="option"
+				@click="notification.resolve(option)"
+			/>
+		</div>
+	</div>
+</div>
+</template>
+<script setup lang="ts">
+import { computed, type HTMLAttributes,ref, useAttrs } from "vue"
+
+import { copy } from "../../helpers/copy.js"
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.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"
+
+
+defineOptions({
+	name: "lib-notification",
+	inheritAttrs: false,
+})
+const $attrs = useAttrs()
+
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	handler: undefined,
+})
+
+const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary"
+
+/* Todo make this more flexible? */
+// eslint-disable-next-line @stylistic/space-in-parens
+const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
+
+const notificationEl = ref<null | HTMLElement>(null)
+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/LibNotifications/LibNotifications.stories.ts

@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { reactive, ref } from "vue"
+
+import LibNotifications from "./LibNotifications.vue"
+
+import { NotificationHandler } from "../../helpers/NotificationHandler.js"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof LibNotifications> = {
+	component: LibNotifications,
+	title: "Components/Notifications",
+	args: {
+	// @ts-expect-error story only arg
+		withTitle: true,
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof LibNotifications>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup() {
+			const handler = reactive(new NotificationHandler())
+
+			let count = 0
+
+			const withTitle = ref(args.withTitle)
+			const disableTimeout = ref(false)
+
+			const notifyRequiresAction = () => {
+				count++
+				void handler.notify({
+					title: withTitle.value ? `Notification(${count})` : undefined,
+					message: `This is a notification that requires action. Pick an option:`,
+					requiresAction: true,
+					options: ["Ok", "Default Answer", "Cancel"],
+					default: "Default Answer",
+				})
+			}
+			const notifyWithDangerousOption = () => {
+				count++
+				void handler.notify({
+					title: withTitle.value ? `Notification(${count})` : undefined,
+					message: `This is a notification that has a dangerous option. Pick an option:`,
+					options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
+					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:`,
+					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:`,
+					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.`,
+					timeout: disableTimeout.value ? false : 2000,
+				})
+			}
+			return {
+				notifyRequiresAction,
+				notifyTimeoutable,
+				notifyNonCancellable,
+				notifyWithDangerousOption,
+				notifyNonCancellableRequiresAction,
+				handler,
+				withTitle,
+				disableTimeout,
+				args: {
+					outline: false,
+					...args,
+				},
+			}
+		},
+		backgrounds: { disable: true },
+		// <lib-debug>{{args.handler}}</lib-debug>
+		template: `
+	<test-wrapper :outline="args.outline">
+		<lib-button :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></lib-button>
+		<lib-button :label="'Notify RequiresAction'" @click="notifyRequiresAction()"></lib-button>
+		<lib-button :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></lib-button>
+		<lib-button :label="'Notify With Dangerous Option'" @click="notifyWithDangerousOption()"></lib-button>
+		<lib-button :label="'Notify Non-Cancellable'" @click="notifyNonCancellable()"></lib-button>
+		<input type="checkbox" v-model="withTitle"/> With Title
+		<input type="checkbox" v-model="disableTimeout"/> Disable Timeout
+			<lib-notifications :handler="handler" />
+		History:
+		<lib-debug>
+			<template v-for="entry in handler.history">
+				Message: {{entry.message}}
+				Resolution: {{entry.resolution}}
+				<br>
+			</template>
+		</lib-debug>
+	</test-wrapper>
+	`,
+	}),
+}
+

package/src/runtime/components/LibNotifications/LibNotifications.vue

@@ -0,0 +1,133 @@
+<template>
+<TransitionGroup name="list"
+	tag="div"
+	:class="twMerge(`notifications
+			fixed
+			z-50
+			inset-y-0 right-0
+			w-1/3
+			min-w-[300px]
+			pointer-events-none
+			overflow-hidden
+		`, ($attrs as any).class)"
+	v-bind="{ ...$attrs, class: undefined }"
+>
+	<lib-notification class="pointer-events-auto"
+		:handler="handler"
+		tabindex="0"
+		:notification="notification"
+		v-for="notification of notifications"
+		:key="notification.id"
+	/>
+</TransitionGroup>
+<Transition>
+	<div v-show="topNotifications.length > 0"/>
+</Transition>
+<Transition>
+	<dialog v-show="topNotifications.length > 0"
+		:id="id"
+		class="modal
+			bg-transparent
+			p-0
+			backdrop:bg-black/50
+			backdrop:p-5
+		"
+		ref="dialogEl"
+		@click.self.prevent="NotificationHandler.dismiss(topNotifications[0])"
+	>
+		<form>
+			<lib-notification v-if="topNotifications.length > 0"
+				:handler="handler"
+				class="top-notification"
+				:notification="topNotifications[0]"
+				ref="topNotificationComp"
+			/>
+		</form>
+	</dialog>
+</Transition>
+</template>
+<script setup lang="ts">
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
+import { type HTMLAttributes,nextTick, onBeforeUnmount, type PropType, ref, shallowReactive } from "vue"
+
+import LibNotification from "./LibNotification.vue"
+
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
+import { twMerge } from "../../utils/twMerge.js"
+import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js"
+
+defineOptions({
+	name: "lib-notifications",
+	inheritAttrs: false,
+})
+
+
+// eslint-disable-next-line no-use-before-define
+const props = defineProps<Props>()
+
+const dialogEl = ref<HTMLDialogElement | null>(null)
+
+const isOpen = ref(false)
+const notifications = shallowReactive<NotificationEntry[]>([])
+const topNotifications = shallowReactive<NotificationEntry[]>([])
+const open = () => {
+	if (!isOpen.value) {
+		void nextTick(() => {
+			dialogEl.value!.showModal()
+			isOpen.value = true
+		})
+	}
+}
+const close = () => {
+	if (isOpen.value && topNotifications.length === 0) {
+		dialogEl.value!.close()
+		isOpen.value = false
+	}
+}
+
+const addNotification = (entry: NotificationEntry) => {
+	if (entry.resolution === undefined) {
+		if (entry.requiresAction) {
+			topNotifications.push(entry)
+			open()
+			entry.promise.then(() => {
+				removeIfIn(topNotifications, entry)
+				close()
+			})
+		} else {
+			notifications.splice(0, 0, entry)
+			entry.promise.then(() => {
+				removeIfIn(notifications, entry)
+			})
+		}
+	}
+}
+
+const notificationListener = (entry: NotificationEntry, type: "added" | "resolved" | "deleted"): void => {
+	if (type === "added") {
+		addNotification(entry)
+	}
+}
+props.handler.addNotificationListener(notificationListener)
+
+for (const entry of props.handler.queue) { addNotification(entry) }
+onBeforeUnmount(() => {
+	props.handler.removeNotificationListener(notificationListener)
+})
+
+</script>
+<script lang="ts">
+
+type RealProps =
+& LinkableByIdProps
+& {
+	handler: NotificationHandler
+}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	RealProps
+{}
+</script>

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

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+import LibPagination from "./LibPagination.vue"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof LibPagination> = {
+	component: LibPagination,
+	title: "Components/Pagination",
+	args: {
+		total: 10,
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof LibPagination>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup() {
+			const num = ref(1)
+			const changePage = ($event: any, i: any) => {
+				$event.preventDefault()
+				if (i >= 10) num.value = 10
+				if (i <= 1) num.value = 1
+				num.value = i
+			}
+
+			return {
+				changePage,
+				args,
+				num,
+			}
+		},
+		template: `
+			<lib-pagination v-bind="{...args, current: num, route:'#'}">
+				<template #link="linkProps">
+					<a v-bind="linkProps" @click="changePage($event, linkProps.i)">{{ linkProps.text ?? linkProps.i }}</a>
+				</template>
+			</lib-pagination>
+			<lib-input :label="'Change Page'" :modelValue="num.toString()" @update:modelValue="num = parseInt($event)" type="number" min="0" :max="args.total">
+
+			</lib-input>
+		`,
+	}),
+}
+