@witchcraft/ui 0.1.1 → 0.1.3

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

@@ -1,49 +1,69 @@
-<script setup>
-import { getLocalTimeZone } from "@internationalized/date";
-import { DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger } from "reka-ui";
-import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue";
-import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js";
-import { useInjectedLocale } from "../../composables/useInjectedLocale.js";
-import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-const attrs = useAttrs();
-const props = defineProps({
-  useTime: { type: Boolean, required: false, default: false },
-  id: { type: String, required: true },
-  fallbackDate: { type: Date, required: false, default: (_) => getNow({ withTime: _.useTime ?? false }).toDate(_.timeZone ?? getLocalTimeZone()) },
-  timeZone: { type: String, required: false, default: getLocalTimeZone() },
-  updateInterval: { type: Number, required: false, default: 1e4 }
-});
-const locale = useInjectedLocale().timeLocale;
-const date = defineModel({ type: null, ...{ required: true } });
-let justSet = false;
-const tempDate = ref();
+<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 "reka-ui"
+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 })
+
+let justSet = false
+const tempDate = ref()
 function updateTempDate() {
-  tempDate.value = convertDateWithFallback(date.value, props);
+	tempDate.value = convertDateWithFallback(date.value, props)
 }
-updateTempDate();
+
+updateTempDate()
+
 watch(date, () => {
-  if (!justSet) {
-    updateTempDate();
-  } else {
-    justSet = false;
-  }
-});
+	if (!justSet) {
+		updateTempDate()
+	} else {
+		justSet = false
+	}
+})
 watch(tempDate, () => {
-  justSet = true;
-  date.value = toEmittableDate(toRaw(tempDate.value));
-});
+	justSet = true
+	date.value = toEmittableDate(toRaw(tempDate.value as any))
+})
+
 watch(() => props.timeZone, () => {
-  updateTempDate();
-});
+	updateTempDate()
+})
+
 const interval = setInterval(() => {
-  if (!date.value) {
-    updateTempDate();
-  }
-}, props.updateInterval);
+	if (!date.value) {
+		// update suggested date if none is set
+		updateTempDate()
+	}
+}, props.updateInterval)
+
 onBeforeUnmount(() => {
-  clearInterval(interval);
-});
+	clearInterval(interval)
+})
+
 </script>
 
 <template>
@@ -51,13 +71,11 @@ onBeforeUnmount(() => {
 	:id="id"
 	:locale="locale"
 	class="date-picker--root"
-	v-model="tempDate"
+	v-model="tempDate as DateValue"
 >
 	<DatePickerField
 		v-slot="{ segments }"
-		:class="
-  twMerge(
-    `
+		:class="twMerge(`
 			date-picker--field
 			flex items-center justify-between
 			select-none
@@ -65,9 +83,8 @@ onBeforeUnmount(() => {
 			metadata-input-border
 			rounded-sm
 		`,
-    attrs.class
-  )
-"
+			(attrs as any).class)
+		"
 	>
 		<div :class="twMerge(`
 			date-picker--segment
@@ -76,7 +93,7 @@ onBeforeUnmount(() => {
 			overflow-scroll
 			scrollbar-hidden
 			whitespace-nowrap
-		`, date === void 0 && 'text-neutral-400')"
+		`, date === undefined && 'text-neutral-400')"
 		>
 			<template
 				v-for="item in segments"
@@ -192,7 +209,7 @@ onBeforeUnmount(() => {
 						outlined
 						px-1
 					"
-					:prev-page="(date2) => date2.subtract({ years: 1 })"
+					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-double-arrow-left/>
@@ -246,7 +263,7 @@ onBeforeUnmount(() => {
 						outlined
 						px-1
 					"
-					:next-page="(date2) => date2.add({ years: 1 })"
+					:next-page="(date: DateValue) => date.add({ years: 1 })"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-double-arrow-right/>
@@ -358,7 +375,7 @@ onBeforeUnmount(() => {
 					</DatePickerGridBody>
 				</DatePickerGrid>
 			</div>
-			<slot v-bind="{ tempValue: tempDate }"/>
+			<slot v-bind="{tempValue: tempDate}"/>
 		</DatePickerCalendar>
 	</DatePickerContent>
 </DatePickerRoot>

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

@@ -1,11 +1,11 @@
-<script setup>
-import { getLocalTimeZone } from "@internationalized/date";
-import { getTimeZoneList } from "../../helpers/getTimeZoneList.js";
-import LibInputDeprecated from "../LibInputDeprecated/LibInputDeprecated.vue";
-const timeZone = defineModel({ type: String, ...{ default: getLocalTimeZone() } });
-const label = defineModel("label", { type: String, ...{ default: "Time Zone" } });
-</script>
+<script setup lang="ts">
+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
 	:restrict-to-suggestions="true"
@@ -24,3 +24,4 @@ const label = defineModel("label", { type: String, ...{ default: "Time Zone" } }
 	</template>
 </LibInputDeprecated>
 </template>
+

package/dist/runtime/components/LibDebug/LibDebug.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibDebug from "./LibDebug.vue.js";
+declare const meta: Meta<typeof LibDebug>;
+export default meta;
+type Story = StoryObj<typeof LibDebug>;
+export declare const Primary: Story;
+export declare const WithCustomTab: Story;
+export declare const NoValue: Story;
+export declare const StringWithWhitespace: Story;

package/dist/runtime/components/LibDebug/LibDebug.stories.js

@@ -0,0 +1,46 @@
+import { crop } from "@alanscodelog/utils/crop.js";
+import LibDebug from "./LibDebug.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibDebug,
+  title: "Components/Debug",
+  args: {
+    value: { any: ["any", { value: "any" }] }
+  }
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => ({ args }),
+    template: `
+			<lib-debug v-bind="args" />
+		`
+  })
+};
+export const WithCustomTab = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    value: { any: ["any", { value: "any" }] },
+    tab: 2
+  }
+};
+export const NoValue = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    value: void 0
+  }
+};
+export const StringWithWhitespace = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    value: crop`
+	 		Manually
+	 			Indented
+	 				String
+	 	`
+  }
+};

package/dist/runtime/components/LibDebug/LibDebug.vue

@@ -18,56 +18,84 @@
 		</LibButton>
 	</div>
 	<pre v-if="value"
-		:class="
-  `
+		:class="`
 			debug--value
 			[tab-size:${tab}]
 		`
-"
+		"
 	>{{ getStringValue(value) }}</pre>
-	<pre v-if="value === void 0"><slot/></pre>
+	<pre v-if="value === undefined"><slot/></pre>
 </div>
 </template>
 
-<script setup>
-import { useSlots } from "vue";
-import Icon from "../Icon/Icon.vue";
-import LibButton from "../LibButton/LibButton.vue";
-const $slots = useSlots();
-const props = defineProps({
-  value: { type: null, required: false, default: void 0 },
-  tab: { type: Number, required: false, default: 3 },
-  title: { type: String, required: false, default: "Debug" }
-});
-const getStringValue = (value) => value === void 0 ? "undefined" : typeof value === "string" ? value : JSON.stringify(value, null, "	");
-const findText = (children) => {
-  let res = "";
-  for (const child of children) {
-    if (child.children) {
-      if (typeof child.children === "string") res += child.children;
-      else res += findText(child.children);
-    } else {
-      res += "\n";
-    }
-  }
-  return res;
-};
-const copy = () => {
-  if (navigator.clipboard) {
-    const text = props.value ? getStringValue(props.value) : $slots.default?.()?.[0]?.children ? findText([...$slots.default()[0].children]) : void 0;
-    if (text === void 0) {
-      console.warn("Cannot copy text, can't generate string value from `getStringValue` or `the default slot`.");
-      return;
-    }
-    navigator.clipboard.writeText(text).catch(() => {
-    });
-  }
-};
+
+<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)
+			: $slots.default?.()?.[0]?.children
+			? findText([...$slots.default()[0]!.children as any[]])
+			: undefined
+		if (text === undefined) {
+			// eslint-disable-next-line no-console
+			console.warn("Cannot copy text, can't generate string value from `getStringValue` or `the default slot`.")
+			return
+		}
+		navigator.clipboard.writeText(text).catch(() => { })
+	}
+}
 </script>
 
-<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
-};
+	name: "lib-debug",
+	// https://v3.vuejs.org/guide/typescript-support.html#annotating-props
+}
 </script>

package/dist/runtime/components/LibDevOnly/LibDevOnly.vue

@@ -1,9 +1,8 @@
 <template>
 <DevOnly>
-	<slot v-if="doShow && $attrs?.['as-child'] !== void 0"/>
+	<slot v-if="doShow && $attrs?.['as-child'] !== undefined"/>
 	<div v-else-if="doShow"
-		:class="twMerge(
-  `
+		:class="twMerge(`
 			dev-only
 			border
 			border-dashed
@@ -12,27 +11,41 @@
 			py-1
 			never-packaged
 		`,
-  $attrs.class
-)"
-		v-bind="{ ...$attrs, class: void 0 }"
+			($attrs.class as string)
+		)"
+		v-bind="{...$attrs, class: undefined}"
 	>
 		<slot/>
 	</div>
 </DevOnly>
 </template>
+<script lang="ts" setup>
+import { computed, inject, ref, useAttrs } from "vue"
 
-<script 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 = defineProps({
-  show: { type: Boolean, required: false, default: false }
-});
-const injectedShow = inject(showDevOnlyInjectionKey, ref(false));
-const doShow = computed(() => props.show || injectedShow.value);
-</script>
+import { showDevOnlyInjectionKey } from "../../composables/useShowDevOnlyKey.js"
+import { twMerge } from "../../utils/twMerge.js"
+const $attrs = useAttrs()
+
+const props = withDefaults(defineProps<{
+	show?: boolean
+}>(), {
+	show: false
+})
 
-<script>
+const injectedShow = inject(showDevOnlyInjectionKey, ref(false))
+const doShow = computed(() => props.show || injectedShow.value)
+
+</script>
+<script lang="ts">
+interface Props {
+	show?: 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/dist/runtime/components/LibFileInput/LibFileInput.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibFileInput from "./LibFileInput.vue.js";
+declare const meta: Meta<typeof LibFileInput>;
+export default meta;
+type Story = StoryObj<typeof LibFileInput>;
+export declare const SingleFile: Story;
+export declare const MultipleFile: Story;
+export declare const AnyFormat: Story;
+export declare const Compact: Story;
+export declare const ErrorHandling: Story;

package/dist/runtime/components/LibFileInput/LibFileInput.stories.js

@@ -0,0 +1,63 @@
+import { ref } from "vue";
+import LibFileInput from "./LibFileInput.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibFileInput,
+  title: "Components/FileInput",
+  args: {}
+};
+export default meta;
+export const SingleFile = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      function errorHandler(e) {
+        console.log(e);
+      }
+      return { args, errorHandler };
+    },
+    template: `
+			<lib-file-input v-bind="{...args}" @errors="errorHandler"></lib-file-input>
+		`
+  })
+};
+export const MultipleFile = {
+  ...SingleFile,
+  args: {
+    ...SingleFile.args,
+    multiple: true
+  }
+};
+export const AnyFormat = {
+  ...SingleFile,
+  args: {
+    ...SingleFile.args,
+    multiple: true,
+    formats: []
+  }
+};
+export const Compact = {
+  ...SingleFile,
+  args: {
+    ...SingleFile.args,
+    compact: true
+  }
+};
+export const ErrorHandling = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      const errors = ref([]);
+      const errorHandler = (e) => 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>
+		`
+  })
+};