@witchcraft/ui 0.0.1

package/src/runtime/components/LibDatePicker/LibSingleDatePicker.vue

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import { type DateValue, getLocalTimeZone } from "@internationalized/date"
+import { DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger } from "radix-vue"
+import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
+
+import { convertDateWithFallback, getNow,toEmittableDate } from "./helpers.js"
+
+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"
+
+const attrs = useAttrs()
+
+const props = withDefaults(defineProps<{
+	useTime?: boolean
+	id: string
+	fallbackDate?: Date
+	timeZone?: string
+	updateInterval?: number
+}>(), {
+	timeZone: getLocalTimeZone(),
+	useTime: false,
+	fallbackDate: _ => getNow({ withTime: _.useTime ?? false }).toDate(_.timeZone ?? getLocalTimeZone()),
+	updateInterval: 10000
+})
+
+const locale = useInjectedLocale().timeLocale
+
+const date = defineModel<SingleDate>({ required: true })
+const tempDate = ref(convertDateWithFallback(date.value, props))
+watch(() => props.timeZone, () => {
+	tempDate.value = convertDateWithFallback(date.value, props)
+})
+
+watch(tempDate, () => {
+	date.value = toEmittableDate(toRaw(tempDate.value as any))
+})
+
+const interval = setInterval(() => {
+	if (!date.value) {
+		// update suggested date if none is set
+		tempDate.value = convertDateWithFallback(date.value, props)
+	}
+}, props.updateInterval)
+
+onBeforeUnmount(() => {
+	clearInterval(interval)
+})
+
+</script>
+
+<template>
+<DatePickerRoot
+	:id="id"
+	:locale="locale"
+	class="root"
+	v-model="tempDate as DateValue"
+>
+	<DatePickerField
+		v-slot="{ segments }"
+		:class="twMerge(`
+			container
+			flex items-center justify-between
+			select-none
+			data-[invalid]:border-red-500
+			metadata-input-border
+			rounded-sm
+		`,
+			(attrs as any).class)
+		"
+	>
+		<div :class="twMerge(`segments flex items-center overflow-scroll scrollbar-hidden whitespace-nowrapa`, date === undefined && 'text-neutral-400')">
+			<template
+				v-for="item in segments"
+				:key="item.part"
+			>
+				<DatePickerInput
+					v-if="item.part === 'literal'"
+					:part="item.part"
+					class="input-literal"
+				>
+					{{ item.value }}
+				</DatePickerInput>
+				<DatePickerInput
+					v-else
+					:part="item.part"
+					class="
+						input
+						focus-outline-hidden
+						border
+						border-transparent
+						group
+					"
+				>
+					<div
+						class="
+							group-focus:z-[2]
+							group-focus:bg-accent-500/50
+							group-focus:rounded-xs
+							px-[2px]
+						"
+					>
+						{{ item.value }}
+					</div>
+				</DatePickerInput>
+			</template>
+		</div>
+
+		<DatePickerTrigger
+			class="
+				trigger
+				px-1
+				focus-outline
+				rounded-tr-sm
+				rounded-br-sm
+				bg-bg
+				border-l
+				border-neutral-300
+				dark:border-neutral-700
+				dark:bg-neutral-800
+			"
+		>
+			<Icon>
+				<i-radix-icons-calendar/>
+			</Icon>
+		</DatePickerTrigger>
+	</DatePickerField>
+
+	<!-- @vue-expect-error to exists -->
+	<DatePickerContent
+		:side-offset="4"
+		to="#root"
+		class="
+				mx-2
+				rounded-sm
+				bg-bg
+				dark:bg-neutral-800
+				border
+				border-neutral-300
+				dark:border-neutral-700
+				shadow-lg
+				will-change-[transform,opacity]
+				data-[state=open]:data-[side=top]:animate-slideDownAndFade
+				data-[state=open]:data-[side=right]:animate-slideLeftAndFade
+				data-[state=open]:data-[side=bottom]:animate-slideUpAndFade
+				data-[state=open]:data-[side=left]:animate-slideRightAndFade
+				text-fg
+				dark:text-neutral-200
+			"
+	>
+		<DatePickerArrow class="fill-neutral-500"/>
+		<!-- We set some max-width so it's not so hard to style the slot (which otherwise grows the calendar really wide. The min width is the header (4 icons + their padding + 14ch month), hence the complicated formula. -->
+		<DatePickerCalendar
+			v-slot="{ weekDays, grid }"
+			class="p-2 flex flex-col max-w-[calc(1.2em*4+var(--spacing)*8+14ch)]"
+		>
+			<DatePickerHeader class="flex items-center justify-between">
+				<DatePickerPrev
+					class="
+							inline-flex
+							items-center
+							cursor-pointer
+							active:scale-125
+							justify-center
+							rounded-sm
+							outlined
+							px-1
+						"
+					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
+				>
+					<Icon class="scale-150">
+						<i-radix-icons-double-arrow-left/>
+					</Icon>
+				</DatePickerPrev>
+				<DatePickerPrev
+					class="
+							inline-flex
+							items-center
+							cursor-pointer
+							active:scale-125
+							justify-center
+							rounded-sm
+							outlined
+							px-1
+						"
+				>
+					<Icon class="scale-150">
+						<i-radix-icons-chevron-left/>
+					</Icon>
+				</DatePickerPrev>
+
+				<DatePickerHeading class="min-w-[14ch] text-center"/>
+				<DatePickerNext
+					class="
+							inline-flex
+							items-center
+							cursor-pointer
+							active:scale-125
+							justify-center
+							rounded-sm
+							outlined
+							px-1
+						"
+				>
+					<Icon class="scale-150">
+						<i-radix-icons-chevron-right/>
+					</Icon>
+				</DatePickerNext>
+				<DatePickerNext
+					class="
+							inline-flex
+							items-center
+							cursor-pointer
+							active:scale-125
+							justify-center
+							rounded-sm
+							outlined
+							px-1
+						"
+					:next-page="(date: DateValue) => date.add({ years: 1 })"
+				>
+					<Icon class="scale-150">
+						<i-radix-icons-double-arrow-right/>
+					</Icon>
+				</DatePickerNext>
+			</DatePickerHeader>
+			<div
+				class="
+						flex
+						flex-col
+						pt-4
+					"
+			>
+				<DatePickerGrid
+					class="border-collapse select-none"
+					v-for="month in grid"
+					:key="month.value.toString()"
+				>
+					<DatePickerGridHead>
+						<DatePickerGridRow class="mb-1 flex justify-between">
+							<DatePickerHeadCell
+								class="
+										w-6
+										rounded-md
+										text-xs
+										text-accent-500
+									"
+								v-for="day in weekDays"
+								:key="day"
+							>
+								{{ day }}
+							</DatePickerHeadCell>
+						</DatePickerGridRow>
+					</DatePickerGridHead>
+					<DatePickerGridBody>
+						<DatePickerGridRow
+							class="flex w-full justify-between my-1"
+							v-for="(weekDates, index) in month.rows"
+							:key="`weekDate-${index}`"
+						>
+							<DatePickerCell
+								:date="weekDate"
+								v-for="weekDate in weekDates"
+								:key="weekDate.toString()"
+							>
+								<DatePickerCellTrigger
+									:day="weekDate"
+									:month="month.value"
+									class="
+											relative
+											flex
+											items-center
+											justify-center
+											whitespace-nowrap
+											rounded-sm
+											border
+											border-transparent
+											bg-transparent
+											text-sm
+											w-6
+											h-6
+											focus:shadow
+											focus-outline
+											hover:border-accent-500
+											data-[selected]:bg-accent-700
+											data-[selected]:shadow
+											data-[disabled]:text-neutral-500
+											data-[selected]:text-white
+											data-[unavailable]:pointer-events-none
+											data-[unavailable]:text-neutral-500
+											data-[unavailable]:line-through
+											before:absolute
+											before:bottom-[1px]
+											before:hidden
+											before:rounded-full
+											before:w-4
+											before:h-[2px]
+											before:bg-white
+											data-[today]:before:block
+											data-[today]:before:bg-accent-500
+											data-[selected]:before:bg-white
+										"
+								/>
+							</DatePickerCell>
+						</DatePickerGridRow>
+					</DatePickerGridBody>
+				</DatePickerGrid>
+			</div>
+			<slot v-bind="{tempValue: tempDate}"/>
+		</DatePickerCalendar>
+	</DatePickerContent>
+</DatePickerRoot>
+</template>

package/src/runtime/components/LibDatePicker/LibTimeZonePicker.vue

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

package/src/runtime/components/LibDatePicker/helpers.ts

@@ -0,0 +1,55 @@
+// todo move to helpers
+import {
+	type CalendarDate,
+	fromDate,
+	getLocalTimeZone,
+	Time,
+	toCalendarDate,
+	toCalendarDateTime,
+	today,
+	toZoned,
+	ZonedDateTime } from "@internationalized/date"
+
+import { createNoonUtcDate } from "../../helpers/createNoonUtcDate.js"
+
+/**
+ * @internal
+ *
+ * Converts the input date to a @internationalized/date instance we can use internally.
+ */
+export function convertDateWithFallback(
+	date: Date | undefined,
+	{
+		fallbackDate,
+		timeZone = getLocalTimeZone(),
+		useTime
+	}: { fallbackDate: Date, timeZone: string, useTime: boolean }
+): ZonedDateTime | CalendarDate {
+	const finalDate = fromDate(date ?? fallbackDate, timeZone)
+	return useTime ? finalDate : toCalendarDate(finalDate)
+}
+
+/**
+ * @internal
+ *
+ * Converts the internal temporary date values to js dates. If the value is a CalendarDate, the time is set to 12 noon and the timezone to UTC so that regardless of what timezone it's converted to, the date itself won't change and the time component can be safely discarded.
+ */
+export function toEmittableDate(date: ZonedDateTime | CalendarDate): Date {
+	return date instanceof ZonedDateTime
+		? date.toDate()
+		: toZoned(toCalendarDateTime(date, new Time(12, 0, 0)), "UTC").toDate()
+}
+
+
+/**
+ * @internal
+ *
+ * Gets the current date, if `withTime` is true, it will return a ZonedDateTime (with the time set to noon), otherwise it will return a CalendarDate (without the time).
+ */
+export function getNow(opts: { withTime: boolean }): ZonedDateTime | CalendarDate {
+	if (opts.withTime) {
+		return createNoonUtcDate(today(getLocalTimeZone()))
+	}
+	return today(getLocalTimeZone())
+}
+

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

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { crop } from "@alanscodelog/utils/crop.js"
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+import LibDebug from "./LibDebug.vue"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof LibDebug> = {
+	component: LibDebug,
+	title: "Components/Debug",
+	args: {
+		value: { any: ["any", { value: "any" }]},
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof LibDebug>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+			<lib-debug v-bind="args" />
+		`,
+	}),
+}
+export const WithCustomTab: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		value: { any: ["any", { value: "any" }]},
+		tab: 2,
+	},
+}
+export const NoValue: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		value: undefined,
+	},
+}
+export const StringWithWhitespace: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		value: crop`
+	 		Manually
+	 			Indented
+	 				String
+	 	`,
+	},
+}
+

package/src/runtime/components/LibDebug/LibDebug.vue

@@ -0,0 +1,91 @@
+<template>
+<div class="lib-debug
+		text-fg
+		dark:text-bg
+		flex
+		flex-col
+		rounded-sm
+		border
+		border-danger-500
+		p-2
+		overflow-auto
+	"
+>
+	<div class="flex justify-between">
+		<span class="font-bold">{{ title }}</span>
+		<LibButton class="w-min-content" @click="copy()">
+			<icon><i-fa6-regular-copy/></icon>
+		</LibButton>
+	</div>
+	<pre v-if="value"
+		:class="`
+			[tab-size:${tab}]
+		`
+		"
+	>{{ getStringValue(value) }}</pre>
+	<pre v-if="value === undefined"><slot/></pre>
+</div>
+</template>
+
+
+<script setup lang="ts">
+import { type PropType, useSlots } from "vue"
+
+import Icon from "../Icon/Icon.vue"
+import LibButton from "../LibButton/LibButton.vue"
+
+const $slots = useSlots()
+
+const props = withDefaults(defineProps<{
+	/** The value to debug, can be anything. */
+	// eslint-disable-next-line vue/no-restricted-props
+	value?: any
+	/** Sets the tab size in css. Defaults to 3. */
+	tab?: number
+	title?: string
+}>(), {
+	tab: 3,
+	title: "Debug",
+	value: undefined,
+})
+
+const getStringValue = (value: any): string => value === undefined
+	? "undefined"
+	: typeof value === "string"
+		? value
+		: JSON.stringify(value, null, "\t")
+
+const findText = (children: any[]): string => {
+	let res = ""
+	for (const child of children) {
+		if (child.children) {
+			if (typeof child.children === "string") res += child.children as string
+			else res += findText(child.children)
+		} else {
+			res += "\n"
+		}
+	}
+	return res
+}
+const copy = (): void => {
+	if (navigator.clipboard) {
+		const text = props.value ? getStringValue(props.value) : findText([...$slots.default!()![0].children as any[]])
+		navigator.clipboard.writeText(text).catch(() => { })
+	}
+}
+</script>
+
+<script lang="ts">
+
+/**
+ * Simple debug component for displaying objects and strings with whitespace.
+ *
+ * In the case of objects, it JSON.stringifies them with a tab character. The tab width can be controlled with the `tab` prop, which will set the `tab-size` css property on the element.
+ *
+ * The value can be undefined, it will just display undefined.
+ */
+export default {
+	name: "lib-debug",
+	// https://v3.vuejs.org/guide/typescript-support.html#annotating-props
+}
+</script>

package/src/runtime/components/LibDevOnly/LibDevOnly.vue

@@ -0,0 +1,53 @@
+<template>
+<DevOnly>
+	<slot v-if="doShow && $attrs?.['as-child'] !== undefined"/>
+	<div v-else-if="doShow"
+
+
+		:class="twMerge(`
+			border
+			border-dashed
+			border-red-500
+			px-2
+			py-1
+			never-packaged
+		`,
+			($attrs.class as string)
+		)"
+		v-bind="{...$attrs, class: undefined}"
+	>
+		<slot/>
+	</div>
+</DevOnly>
+</template>
+<script lang="ts" setup>
+import { computed, inject, ref, useAttrs } from "vue"
+
+import { showDevOnlyInjectionKey } from "../../composables/useShowDevOnlyKey.js"
+import { twMerge } from "../../utils/twMerge.js"
+const $attrs = useAttrs()
+
+const props = withDefaults(defineProps<{
+	show?: boolean
+}>(), {
+	show: false
+})
+
+const injectedShow = inject(showDevOnlyInjectionKey, ref(false))
+const doShow = computed(() => props.show || injectedShow.value)
+
+</script>
+<script lang="ts">
+interface Props {
+	show?: boolean
+	asChild?: boolean
+}
+
+// Not sure why nuxt's types aren't correctly getting detected
+// This should be enough to bypass the type lint error.
+declare module "vue" {
+	export interface GlobalComponents {
+		DevOnly: any
+	}
+}
+</script>

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

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+import LibFileInput from "./LibFileInput.vue"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof LibFileInput> = {
+	component: LibFileInput,
+	title: "Components/FileInput",
+	args: {
+
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof LibFileInput>
+
+
+export const SingleFile: Story = {
+	render: args => ({
+		components,
+		setup: () => {
+			function errorHandler(e: any): void {
+				// eslint-disable-next-line no-console
+				console.log(e)
+			}
+			return { args, errorHandler }
+		},
+		template: `
+			<lib-file-input v-bind="{...args}" @errors="errorHandler"></lib-file-input>
+		`,
+	}),
+}
+
+export const MultipleFile: Story = {
+	...SingleFile,
+	args: {
+		...SingleFile.args,
+		multiple: true,
+	},
+}
+
+export const AnyFormat: Story = {
+	...SingleFile,
+	args: {
+		...SingleFile.args,
+		multiple: true,
+		formats: [],
+	},
+}
+
+export const Compact: Story = {
+	...SingleFile,
+	args: {
+		...SingleFile.args,
+		compact: true,
+	},
+}
+
+export const ErrorHandling: Story = {
+	render: args => ({
+		components,
+		setup: () => {
+			const errors = ref([])
+			const errorHandler = (e: any) => errors.value = e
+			return {
+				args, errors, errorHandler,
+			}
+		},
+		template: `
+			<lib-debug :title="'Errors'">{{errors}}</lib-debug>
+			<lib-file-input v-bind="{...args}"  @errors="errorHandler"></lib-file-input>
+		`,
+	}),
+}