@witchcraft/ui 0.3.26 → 0.4.0-beta.10

package/src/runtime/components/WCombobox/storyPlays.ts

@@ -0,0 +1,92 @@
+import { expect, userEvent, waitFor, within } from "@storybook/test"
+
+export const playBasic = async ({ canvasElement }: { canvasElement: HTMLElement, args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox") // More robust than LabelText
+	await userEvent.clear(input)
+
+	await userEvent.type(input, "A")
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent("A")
+
+	await userEvent.clear(input)
+	await userEvent.type(input, "[Esc]")
+	await expect(canvas.getByTestId("search-term")).toHaveTextContent("")
+
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent("A")
+}
+export const playBasicKeyboardSelect = async ({ canvasElement }: { canvasElement: HTMLElement, args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox")
+
+	await userEvent.clear(input)
+	await userEvent.type(input, "A")
+
+	await expect(canvas.getByRole("listbox")).toBeInTheDocument()
+
+	await userEvent.keyboard("{ArrowDown}")
+	const options = canvas.getAllByRole("option")
+
+	await expect(options[1]).toHaveAttribute("data-highlighted")
+
+	await userEvent.keyboard("{Enter}")
+	// it's the 0th element because of the filter
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent(options[0]!.textContent?.trim() ?? "")
+}
+export const playBasicClickSelect = async ({ canvasElement }: { canvasElement: HTMLElement, args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox")
+	await userEvent.clear(input)
+
+	await userEvent.click(input)
+
+	const option = canvas.getByRole("option", { name: "AB" })
+	await userEvent.click(option)
+
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent("AB")
+
+	await waitFor(() => {
+		expect(canvas.queryByRole("listbox")).not.toBeInTheDocument()
+	})
+}
+export const playValidation = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox")
+
+	await userEvent.clear(input)
+	await userEvent.type(input, "Invalid")
+
+	await userEvent.click(input)
+
+	const body = within(document.body)
+	await waitFor(() => {
+		expect(body.getByRole("alert")).toBeInTheDocument()
+	})
+}
+
+export const playAllowNewValues = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByRole("combobox")
+	await userEvent.clear(input)
+	const newValue = "New Custom Value"
+
+	await userEvent.type(input, newValue)
+
+	const body = within(document.body)
+	await waitFor(() => {
+		expect(body.getByText(/Press Enter to Add Value/i)).toBeInTheDocument()
+	})
+
+	await userEvent.keyboard("{Enter}")
+
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent(newValue)
+
+	await userEvent.clear(input)
+	await userEvent.type(input, newValue)
+	expect(body.queryByText(/Press Enter to Add Value/i)).not.toBeInTheDocument()
+
+	await userEvent.clear(input)
+	await userEvent.type(input, "New")
+	await waitFor(() => {
+		expect(body.getByRole("option", { name: newValue })).toBeInTheDocument()
+	})
+}

package/src/runtime/components/{LibDarkModeSwitcher/LibDarkModeSwitcher.stories.ts → WDarkModeSwitcher/WDarkModeSwitcher.stories.ts}

@@ -3,13 +3,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 
-import LibDarkModeSwitcher from "./LibDarkModeSwitcher.vue"
+import WDarkModeSwitcher from "./WDarkModeSwitcher.vue"
 
 // todo, maybe don't do this for perf reasons
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibDarkModeSwitcher> = {
-	component: LibDarkModeSwitcher,
+const meta: Meta<typeof WDarkModeSwitcher> = {
+	component: WDarkModeSwitcher,
 	title: "Components/DarkModeSwitcher",
 	args: {
 
@@ -17,7 +17,7 @@ const meta: Meta<typeof LibDarkModeSwitcher> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibDarkModeSwitcher>
+type Story = StoryObj<typeof WDarkModeSwitcher>
 
 
 export const Primary: Story = {
@@ -32,10 +32,10 @@ export const Primary: Story = {
 		},
 		template: `
 			Value: {{darkMode}}
-			<LibDarkModeSwitcher 
+			<WDarkModeSwitcher 
 				@update:darkMode="darkMode = $event"
 				v-bind="{...args}"
-			></LibDarkModeSwitcher>
+			></WDarkModeSwitcher>
 			<!-- workaround for style tag not being allowed -->
 			<component is="style">
 				{{args.css}}

package/src/runtime/components/{LibDarkModeSwitcher/LibDarkModeSwitcher.vue → WDarkModeSwitcher/WDarkModeSwitcher.vue}

@@ -1,23 +1,23 @@
 <template>
-<lib-button
+<WButton
 	v-bind="{ ...$attrs, class: undefined }"
-	:class="!($attrs as any).unstyle && twMerge(`
+	:class="!unstyle && twMerge(`
 			dark-mode-switcher
 			rounded-full
 			after:rounded-full
 		`,
 		($attrs as any)?.class
 	)"
-	:title="`${t('dark-mode-switcher.title')}${t(`dark-mode-switcher.${darkModeState}`)}`"
+	:aria-label="`${t('dark-mode-switcher.title')}${t(`dark-mode-switcher.${darkModeState}`)}`"
 	@click="cycleDarkMode"
 >
 	<!-- content-vertical-holder will keep the icon the height of a text line regardless of the svg used -->
 	<template #icon>
-		<icon
+		<WIcon
 			class="w-[1em] items-center content-vertical-holder"
 		>
 			<component :is="darkModeState==='dark' ? IFaSolidMoon : darkModeState==='light' ? IPhSunBold : IFa6SolidCircleHalfStroke"/>
-		</icon>
+		</WIcon>
 	</template>
 	<template
 		#default
@@ -27,7 +27,7 @@
 			{{ t(`dark-mode-switcher.${darkModeState}`) }}
 		</div>
 	</template>
-</lib-button>
+</Wbutton>
 </template>
 
 <script lang="ts" setup>
@@ -39,10 +39,10 @@ import IPhSunBold from "~icons/ph/sun-bold"
 
 import { useInjectedDarkMode } from "../../composables/useInjectedDarkMode.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import type { BaseInteractiveProps, 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"
 
 const t = useInjectedI18n()
 
@@ -54,7 +54,16 @@ const emit = defineEmits<{
 }>()
 const $attrs = useAttrs()
 
-withDefaults(defineProps<Props>(), { showLabel: true })
+withDefaults(defineProps<
+	& Pick<BaseInteractiveProps, "border">
+	& {
+		disabled?: boolean
+		unstyle?: boolean
+		showLabel?: boolean
+	}
+	& /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+>(), { showLabel: true })
 
 const {
 	darkMode,
@@ -70,23 +79,3 @@ onMounted(() => {
 })
 </script>
 
-<script lang="ts">
-export default {
-	name: "LibDarkModeSwitcher"
-}
-type RealProps = {
-	showLabel?: boolean
-}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled">
-	& TailwindClassProp
-	& {
-		disabled?: boolean
-		unstyle?: boolean
-	}>,
-	RealProps
-{ }
-</script>

package/src/runtime/components/{LibDatePicker/LibDatePicker.stories.ts → WDatePicker/WDatePicker.stories.ts}

@@ -9,46 +9,54 @@ import * as components from "../index.js"
 function html(strings: TemplateStringsArray, ...values: any[]): string {
 	return String.raw(strings, ...values)
 }
-const singleMeta: Meta<typeof components.LibDatePicker> = {
-	component: components.LibDatePicker,
+
+type ExtraTestArgs = {
+	_slot?: string
+	_timeZone?: string
+}
+const singleMeta: Meta<typeof components.WDatePicker> = {
+	component: components.WDatePicker,
 	title: "Components/DatePicker",
 	args: {
-		// @ts-expect-error custom prop just for story
-		slot: "",
-		timeZone: getLocalTimeZone()
+		...{
+			_slot: "",
+			_timeZone: getLocalTimeZone()
+		} satisfies ExtraTestArgs as any
 	}
 }
 
 export default singleMeta
-type Story = StoryObj<typeof components.LibDatePicker>
+type Story = StoryObj<typeof components.WDatePicker> & { args?: ExtraTestArgs }
 
 function toUTC(m: Date, timeZone: string) {
 	return toTimeZone(fromDate(m, timeZone), "UTC").toAbsoluteString()
 }
 export const Primary: Story = {
-	render: (args: any) => ({
-		components: {
-			...components
-		},
-		setup: () => {
-			const modelValue = ref(args.modelValue)
-			const timeZone = ref(args.timeZone)
-			const debugUtcDate = computed(() => {
-				const m = modelValue.value
-				const z = timeZone.value
-				return m instanceof Date
-					? toUTC(m, z)
-					: typeof m === "object"
-						? `Start: ${m.start ? toUTC(m.start,	z) : "undefined"}, End: ${m.end ? toUTC(m.end,	z) : "undefined"}`
-						: "undefined"
-			})
-			return { args, getLocalTimeZone, modelValue, timeZone, debugUtcDate }
-		},
-		template: `
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components: {
+				...components
+			},
+			setup: () => {
+				const modelValue = ref(args.modelValue)
+				const timeZone = ref(extraArgs._timeZone)
+				const debugUtcDate = computed(() => {
+					const m = modelValue.value
+					const z = timeZone.value!
+					return m instanceof Date
+						? toUTC(m, z)
+						: typeof m === "object"
+							? `Start: ${m.start ? toUTC(m.start,	z) : "undefined"}, End: ${m.end ? toUTC(m.end,	z) : "undefined"}`
+							: "undefined"
+				})
+				return { args, getLocalTimeZone, modelValue, timeZone, debugUtcDate }
+			},
+			template: `
 			<div>Date: {{modelValue ?? "undefined"}}</div>
 			<div>Date UTC: {{debugUtcDate}}</div>
 			<div>Detected timezone (via @internationalized/date): {{getLocalTimeZone()}}</div>
-			<LibTimeZonePicker
+			<WTimeZonePicker
 				v-model="timeZone"
 				label="Override Time Zone"
 				wrapper-class="[&_.suggestions]:max-h-[200px] [&_.suggestions]:overflow-y-auto"
@@ -57,12 +65,13 @@ export const Primary: Story = {
 				This component has no border, added here to see it's size.
 			</div>
 			<div class="border border-neutral-500">
-				<LibDatePicker v-bind="args" v-model="modelValue" :time-zone="timeZone">
-					${args.slot}
-				</LibDatePicker>
+				<WDatePicker v-bind="args" v-model="modelValue" :time-zone="timeZone">
+					${extraArgs._slot}
+				</WDatePicker>
 			</div>
 		`
-	})
+		}
+	}
 }
 
 export const DateRange: Story = {
@@ -76,17 +85,16 @@ export const IconTriggerFirst: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		class: "[&_.trigger]:order-first"
+		class: "[&_.date-picker--trigger]:order-first"
 	}
 }
 
 export const BottomSlot: Story = {
 	...Primary,
 	args: {
-		// @ts-expect-error see above
-		slot: html`
+		_slot: html`
 			<template #default="slotProps">
-				<LibButton>Custom content can be added here.</LibButton>
+				<WButton>Custom content can be added here.</WButton>
 				<p class="break-all">
 					Content has access to the internal temporary/suggested date value and can change it (e.g. set it to today).
 				</p>	

package/src/runtime/components/{LibDatePicker/LibDatePicker.vue → WDatePicker/WDatePicker.vue}

@@ -2,17 +2,15 @@
 import { getLocalTimeZone } from "@internationalized/date"
 import { computed, useAttrs } from "vue"
 
-import LibRangeDatePicker from "./LibRangeDatePicker.vue"
-import LibSingleDatePicker from "./LibSingleDatePicker.vue"
+import WRangeDatePicker from "./WRangeDatePicker.vue"
+import WSingleDatePicker from "./WSingleDatePicker.vue"
 
 import type { RangeDate, SingleDate } from "../../types/index.js"
-import { getFallbackId } from "../shared/props.js"
 
 const attrs = useAttrs()
 
 withDefaults(defineProps<{
 	showTime?: boolean
-	id?: string
 	/** The fallback suggested date when the modelValue is undefined (it will not update modelValue, it only serves as a suggestions and is used internally in the temporary value). If ignoring the time element, you should probably use the {@link createNoonTodayUtc} function (`createNonTodayUtc().toDate(())`) in the helpers, otherwise `new Date()` (the default) will do. */
 	fallbackDate?: Date
 	/** The local user's timezone, defaults to @internationalized/date's getLocalTimeZone(). */
@@ -23,7 +21,6 @@ withDefaults(defineProps<{
 	fallbackDate: () => new Date(),
 	timeZone: getLocalTimeZone()
 })
-const fallbackId = getFallbackId()
 
 /**
  * modelValue can be undefined or an object with start/end undefined, but it must be passed, otherwise we can't tell the difference between a single date and a range date.
@@ -38,12 +35,11 @@ const isRange = computed(() => date.value !== undefined && !(date.value instance
 
 <template>
 <component
-	:id="id ?? fallbackId"
 	v-bind="attrs"
 	:use-time="showTime"
 	:time-zone="timeZone"
 	:fallback-date="fallbackDate"
-	:is="isRange ? LibRangeDatePicker : LibSingleDatePicker"
+	:is="isRange ? WRangeDatePicker : WSingleDatePicker as any"
 	v-model="date as any"
 >
 	<template #default="slotProps">

package/src/runtime/components/{LibDatePicker/LibRangeDatePicker.vue → WDatePicker/WRangeDatePicker.vue}

@@ -7,16 +7,16 @@ import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
 
 import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js"
 
-import IRadixIconsCalendar from "~icons/radix-icons/calendar"
-import IRadixIconsChevronLeft from "~icons/radix-icons/chevron-left"
-import IRadixIconsChevronRight from "~icons/radix-icons/chevron-right"
-import IRadixIconsDoubleArrowLeft from "~icons/radix-icons/double-arrow-left"
-import IRadixIconsDoubleArrowRight from "~icons/radix-icons/double-arrow-right"
+import ILucideCalendarRange from "~icons/lucide/calendar-range"
+import ILucideChevronLeft from "~icons/lucide/chevron-left"
+import ILucideChevronRight from "~icons/lucide/chevron-right"
+import ILucideChevronsLeft from "~icons/lucide/chevrons-left"
+import ILucideChevronsRight from "~icons/lucide/chevrons-right"
 
 import { useInjectedLocale } from "../../composables/useInjectedLocale.js"
 import type { RangeDate } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
+import WIcon from "../WIcon/WIcon.vue"
 
 const attrs = useAttrs()
 
@@ -212,9 +212,9 @@ const locale = useInjectedLocale().timeLocale
 				dark:bg-neutral-800
 			"
 		>
-			<Icon>
-				<i-radix-icons-calendar/>
-			</Icon>
+			<WIcon>
+				<i-lucide-calendar-range/>
+			</WIcon>
 		</DateRangePickerTrigger>
 	</DateRangePickerField>
 
@@ -269,9 +269,9 @@ const locale = useInjectedLocale().timeLocale
 					"
 					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-double-arrow-left/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevrons-left/>
+					</WIcon>
 				</DateRangePickerPrev>
 				<DateRangePickerPrev
 					class="
@@ -286,9 +286,9 @@ const locale = useInjectedLocale().timeLocale
 							px-1
 						"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-chevron-left/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevron-left/>
+					</WIcon>
 				</DateRangePickerPrev>
 
 				<DateRangePickerHeading class="date-range-picker--heading min-w-[14ch] text-center"/>
@@ -305,9 +305,9 @@ const locale = useInjectedLocale().timeLocale
 						px-1
 					"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-chevron-right/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevron-right/>
+					</WIcon>
 				</DateRangePickerNext>
 				<DateRangePickerNext
 					class="
@@ -323,9 +323,9 @@ const locale = useInjectedLocale().timeLocale
 					"
 					:next-page="(date: DateValue) => date.add({ years: 1 })"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-double-arrow-right/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevrons-right/>
+					</WIcon>
 				</DateRangePickerNext>
 			</DateRangePickerHeader>
 			<div

package/src/runtime/components/{LibDatePicker/LibSingleDatePicker.vue → WDatePicker/WSingleDatePicker.vue}

@@ -5,16 +5,16 @@ import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
 
 import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js"
 
-import IRadixIconsCalendar from "~icons/radix-icons/calendar"
-import IRadixIconsChevronLeft from "~icons/radix-icons/chevron-left"
-import IRadixIconsChevronRight from "~icons/radix-icons/chevron-right"
-import IRadixIconsDoubleArrowLeft from "~icons/radix-icons/double-arrow-left"
-import IRadixIconsDoubleArrowRight from "~icons/radix-icons/double-arrow-right"
+import ILucideCalendarDays from "~icons/lucide/calendar-days"
+import ILucideChevronLeft from "~icons/lucide/chevron-left"
+import ILucideChevronRight from "~icons/lucide/chevron-right"
+import ILucideChevronsLeft from "~icons/lucide/chevrons-left"
+import ILucideChevronsRight from "~icons/lucide/chevrons-right"
 
 import { useInjectedLocale } from "../../composables/useInjectedLocale.js"
 import type { SingleDate } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
+import WIcon from "../WIcon/WIcon.vue"
 
 const attrs = useAttrs()
 
@@ -152,9 +152,9 @@ onBeforeUnmount(() => {
 				dark:bg-neutral-800
 			"
 		>
-			<Icon>
-				<i-radix-icons-calendar/>
-			</Icon>
+			<WIcon>
+				<i-lucide-calendar-days/>
+			</WIcon>
 		</DatePickerTrigger>
 	</DatePickerField>
 	<DatePickerContent
@@ -217,9 +217,9 @@ onBeforeUnmount(() => {
 					"
 					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-double-arrow-left/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevrons-left/>
+					</WIcon>
 				</DatePickerPrev>
 				<DatePickerPrev
 					class="
@@ -234,9 +234,9 @@ onBeforeUnmount(() => {
 						px-1
 					"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-chevron-left/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevron-left/>
+					</WIcon>
 				</DatePickerPrev>
 
 				<DatePickerHeading class="min-w-[14ch] text-center"/>
@@ -253,9 +253,9 @@ onBeforeUnmount(() => {
 						px-1
 					"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-chevron-right/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevron-right/>
+					</WIcon>
 				</DatePickerNext>
 				<DatePickerNext
 					class="
@@ -271,9 +271,9 @@ onBeforeUnmount(() => {
 					"
 					:next-page="(date: DateValue) => date.add({ years: 1 })"
 				>
-					<Icon class="scale-150">
-						<i-radix-icons-double-arrow-right/>
-					</Icon>
+					<WIcon class="scale-150">
+						<i-lucide-chevrons-right/>
+					</WIcon>
 				</DatePickerNext>
 			</DatePickerHeader>
 			<div

package/src/runtime/components/{LibDatePicker/LibTimeZonePicker.vue → WDatePicker/WTimeZonePicker.vue}

@@ -2,27 +2,20 @@
 import { getLocalTimeZone } from "@internationalized/date"
 
 import { getTimeZoneList } from "../../helpers/getTimeZoneList.js"
-import LibInputDeprecated from "../LibInputDeprecated/LibInputDeprecated.vue"
 
 const timeZone = defineModel<string>({ default: getLocalTimeZone() })
 const label = defineModel<string>("label", { default: "Time Zone" })
 </script>
 
 <template>
-<LibInputDeprecated
+<WCombobox
 	:restrict-to-suggestions="true"
 	:suggestions="getTimeZoneList()"
-	:suggestions-filter="(_, items) => items"
+	:ignore-filter="true"
 	class="w-full"
 	type="text"
+	:placeholder="label"
+	:aria-label="label"
 	v-model="timeZone"
->
-	<template #label>
-		<slot>
-			<span class="text-sm">
-				{{ label }}
-			</span>
-		</slot>
-	</template>
-</LibInputDeprecated>
+/>
 </template>

package/src/runtime/components/{LibDebug/LibDebug.stories.ts → WDebug/WDebug.stories.ts}

@@ -2,12 +2,12 @@
 import { crop } from "@alanscodelog/utils/crop"
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-import LibDebug from "./LibDebug.vue"
+import WDebug from "./WDebug.vue"
 
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibDebug> = {
-	component: LibDebug,
+const meta: Meta<typeof WDebug> = {
+	component: WDebug,
 	title: "Components/Debug",
 	args: {
 		value: { any: ["any", { value: "any" }] }
@@ -15,14 +15,14 @@ const meta: Meta<typeof LibDebug> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibDebug>
+type Story = StoryObj<typeof WDebug>
 
 export const Primary: Story = {
 	render: args => ({
 		components,
 		setup: () => ({ args }),
 		template: `
-			<lib-debug v-bind="args" />
+			<WDebug v-bind="args" />
 		`
 	})
 }