@witchcraft/ui 0.2.1-beta.3 → 0.2.2

package/src/module.ts

@@ -4,21 +4,23 @@ import {
 	addImports, addTemplate, addTypeTemplate,
 	createResolver,
 	defineNuxtModule,
-	installModule,
-	useLogger,
+	useLogger
 } from "@nuxt/kit"
 import tailwindcss from "@tailwindcss/vite"
 import { addImportsCustom } from "@witchcraft/nuxt-utils/utils/addImportsCustom"
 import { globFiles } from "@witchcraft/nuxt-utils/utils/globFiles"
 import { defu } from "defu"
-import fs from "fs"
 import { themeAsTailwindCss } from "metamorphosis/tailwind"
+import fs from "node:fs"
 import IconsResolver from "unplugin-icons/resolver"
 import ViteComponents from "unplugin-vue-components/vite"
 
 import { unpluginIconViteOptions } from "./runtime/build/unpluginIconViteOptions.js"
 import { themeConvertionOpts } from "./runtime/tailwind/themeConvertionOpts.js"
 import { theme } from "./runtime/theme.js"
+
+import pkg from "../package.json" assert { type: "json" }
+
 const knownDirectives = ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"] as const
 
 const { resolve, resolvePath } = createResolver(import.meta.url)
@@ -29,11 +31,11 @@ const componentsInfo: {
 	filepath: string
 }[] = globFiles([
 	`${resolve("./runtime/components")}/**/*.vue*`,
-	`!**/Template/**.vue`,
-],[], (filepath: string, name: string) => ({
+	`!**/Template/**.vue`
+], [], (filepath: string, name: string) => ({
 	originalName: name,
 	name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
-	filepath,
+	filepath
 }))
 
 declare module "@nuxt/schema" {
@@ -42,7 +44,6 @@ declare module "@nuxt/schema" {
 	}
 }
 
- 
 export interface ModuleOptions {
 /**
  * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
@@ -71,18 +72,27 @@ export interface ModuleOptions {
 export default defineNuxtModule<ModuleOptions>({
 	meta: {
 		name: "witchcraftUi",
-		configKey: "witchcraftUi",
+		configKey: "witchcraftUi"
 	},
 	defaults: {
 		includeUnpluginIconsPlugins: true,
-		directives: [ ...knownDirectives ],
+		directives: [...knownDirectives],
 		globalComponents: [
-			...componentsInfo.map(_ => _.name.slice("PREFIX".length)),
+			...componentsInfo.map(_ => _.name.slice("PREFIX".length))
 		],
 		componentPrefix: "W",
 		debug: true,
 		mainCssFile: "~/assets/css/tailwind.css",
-		_playgroundWorkaround: false,
+		_playgroundWorkaround: false
+	},
+	moduleDependencies: {
+		"unplugin-icons/nuxt": {
+			version: pkg.dependencies["unplugin-icons"],
+			defaults: unpluginIconViteOptions as any
+		},
+		"reka-ui/nuxt": {
+			version: pkg.dependencies["reka-ui"]
+		}
 	},
 	async setup(options, nuxt) {
 		const moduleName = "@witchcraft/ui"
@@ -97,7 +107,6 @@ export default defineNuxtModule<ModuleOptions>({
 			}
 		}
 
-
 		const unknownDirectives = options.directives.filter(_ => !knownDirectives.includes(_))
 		if (unknownDirectives.length > 0) {
 			throw new Error(`Witchcraft Components: Directives list contains unknown directives: ${unknownDirectives.join(",")}`)
@@ -105,11 +114,10 @@ export default defineNuxtModule<ModuleOptions>({
 		nuxt.options.runtimeConfig.public.witchcraftUi = defu(
 			nuxt.options.runtimeConfig.public.witchcraftUi,
 			{
-				directives: options.directives,
+				directives: options.directives
 			}
 		)
 
-
 		addTemplate({
 			filename: "witchcraft-ui.css",
 			write: true,
@@ -127,13 +135,12 @@ export default defineNuxtModule<ModuleOptions>({
 					${indent(filteredComponentsInfo.map(_ => `@source "${_.filepath}";`).join("\n"), 5)}
 				`
 		})
-		
-		
+
 		await Promise.all(filteredComponentsInfo
 			.map(async entry => addComponent({
 				filePath: entry.filepath,
 				name: entry.name,
-				global: options.globalComponents.includes(entry.name.slice(options.componentPrefix.length)),
+				global: options.globalComponents.includes(entry.name.slice(options.componentPrefix.length))
 			}))
 		)
 
@@ -142,12 +149,12 @@ export default defineNuxtModule<ModuleOptions>({
 		const added: string[] = []
 		addImportsCustom([
 			`${resolve("runtime/composables")}/**/*`,
-			`${resolve("runtime/utils")}/**/*`,
-		], [],(filePath: string, name: string) => {
+			`${resolve("runtime/utils")}/**/*`
+		], [], (filePath: string, name: string) => {
 			added.push(name)
 			return addImports({
 				name,
-				from: filePath,
+				from: filePath
 			})
 		})
 		logger.info(`Added imports: ${added.join(", ")}`)
@@ -161,26 +168,31 @@ export default defineNuxtModule<ModuleOptions>({
 						options.includeUnpluginIconsPlugins
 							? [
 								// we must prepend or the custom style options don't work when the module is used
-								ViteComponents({
-									resolvers: [
-										IconsResolver({ prefix: "i" }),
-									],
-								}),
+									ViteComponents({
+										resolvers: [
+											IconsResolver({ prefix: "i" })
+										]
+									})
 								// Icons({
 								// 	compiler: "vue3",
 								// 	...unpluginIconViteOptions,
 								// }),
-							]
+								]
 							: []
 					),
 					tailwindcss() as any,
-					...config.plugins,
+					...config.plugins
 				]
 				config.optimizeDeps ??= {}
 				config.optimizeDeps.exclude ??= []
 				config.optimizeDeps.exclude.push("~icons")
 			}
 		})
+
+		nuxt.options.typescript.tsConfig.compilerOptions ??= {}
+		nuxt.options.typescript.tsConfig.compilerOptions.types ??= []
+		nuxt.options.typescript.tsConfig.compilerOptions.types.push("unplugin-icons/types/vue3")
+
 		const mainCssFile = await resolvePath(options.mainCssFile!, nuxt.options.alias)
 
 		const exists = fs.existsSync(mainCssFile)
@@ -188,17 +200,13 @@ export default defineNuxtModule<ModuleOptions>({
 			nuxt.options.css.push(mainCssFile)
 		}
 
-		// we need to hook in first before it does, otherwise the plugins don't load correctly
-		await installModule("unplugin-icons/nuxt", unpluginIconViteOptions)
-		await installModule("reka-ui/nuxt")
-
 		// todo make names more specific
 		// addImportsDir(resolve("helpers"))
 		nuxt.options.alias["#witchcraft-ui"] = resolve("runtime")
 		nuxt.options.alias["#witchcraft-ui-helpers"] = resolve("runtime/helpers")
 		addTypeTemplate({
 			filename: "types/witchcraft-ui.d.ts",
-			getContents: () => fs.readFileSync(resolve("../types/global.d.ts")).toString(),
+			getContents: () => fs.readFileSync(resolve("../types/global.d.ts")).toString()
 		})
-	},
+	}
 })

package/src/runtime/build/WitchcraftUiResolver.ts

@@ -1,17 +1,17 @@
-import { type ComponentResolver } from "unplugin-vue-components"
+import type { ComponentResolver } from "unplugin-vue-components"
 
 const prefixless = ["Icon", "Aria"]
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const WitchcraftUiResolver = (
 	{
 		prefix = "W",
-		filter = () => true,
+		filter = () => true
 	}: {
 		prefix?: string
 		filter?: (name: string) => boolean
 	} = {}
 ): ComponentResolver => (
-	componentName: string,
+	componentName: string
 ): { from: string } | undefined => {
 	if (componentName.startsWith(prefix)) {
 		const n = componentName.slice(1)

package/src/runtime/build/generateTheme.ts

@@ -1,11 +1,12 @@
 import { themeAsTailwindCss } from "metamorphosis/tailwind"
 import fs from "node:fs"
-import { resolve } from "path"
+import { resolve } from "node:path"
 
 import { themeConvertionOpts } from "../tailwind/themeConvertionOpts.js"
 import { theme } from "../theme.js"
+
 const css = themeAsTailwindCss(theme, themeConvertionOpts)
-import url from "url"
+import url from "node:url"
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url))
 const filepath = resolve(__dirname, "../assets/theme.css")

package/src/runtime/build/unpluginIconViteOptions.ts

@@ -7,5 +7,5 @@ export const unpluginIconViteOptions: Parameters<typeof Icons>[0] = {
 	},
 	// note that we can't use tailwind classes
 	// i mean we could, but we have to tell it to include them manually (pain)
-	defaultStyle: "vertical-align: -0.125em; height: 1em; display: inline-block; width:auto;",
+	defaultStyle: "vertical-align: -0.125em; height: 1em; display: inline-block; width:auto;"
 }

package/src/runtime/components/Aria/Aria.vue

@@ -1,14 +1,13 @@
 <template>
-<div tabindex="0">{{ value }}</div>
+<div tabindex="0">
+	{{ value }}
+</div>
 </template>
 
 <script  setup lang="ts">
-import type { PropType } from "vue"
-
-
-defineOptions({ name: "aria" })
+defineOptions({ name: "Aria" })
 defineProps<{
-	// eslint-disable-next-line vue/no-restricted-props
+
 	value: string
 }>()
 </script>

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

@@ -2,7 +2,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { onMounted, ref } from "vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "./index.js"
 // TODO move docs to composable
 /**
@@ -11,8 +10,8 @@ import * as components from "./index.js"
 const meta: Meta = {
 	title: "Other/Focus",
 	args: {
-		outline: true,
-	},
+		outline: true
+	}
 }
 const template = `
 			<div class="focus-outline-no-offset border border-accent-600" tabindex="0">focus-outline-no-offset (outlined i.e. outlined-focus-visible)</div>
@@ -37,32 +36,32 @@ export const Primary: Story = {
 			})
 			return { ...args, el }
 		},
-		template,
-	}),
+		template
+	})
 }
 /* As in force allow, not force show. */
 export const OutlineForcedTrue: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		forceOutline: true,
-	},
+		forceOutline: true
+	}
 }
 export const OutlineFalse: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		outline: false,
-	},
+		outline: false
+	}
 }
-/* We can also allow focus-visible outlines regardless of the state of outline, by wrapping in `.group.outlined-visible`. This is the default for the test wrapper.*/
+/* We can also allow focus-visible outlines regardless of the state of outline, by wrapping in `.group.outlined-visible`. This is the default for the test wrapper. */
 export const AlwaysAllowFocusVisible: Story = {
 	render: args => ({
 		components,
 		setup: () => args,
 		template: `
 		<div class="outlined-visible group">${template}</div>
-		`,
+		`
 
-	}),
+	})
 }

package/src/runtime/components/Icon/Icon.vue

@@ -1,28 +1,25 @@
 <template>
 <div
 	:class="twMerge('icon inline-block', $attrs?.class)"
-	v-bind="{...$attrs, class:undefined}"
+	v-bind="{ ...$attrs, class: undefined }"
 >
 	<slot/>
 </div>
 </template>
 
 <script setup lang="ts">
-import { computed, type HTMLAttributes,useAttrs } from "vue"
+import { type HTMLAttributes, useAttrs } from "vue"
 
 import { twMerge } from "../../utils/twMerge.js"
 
 defineOptions({
-	name: "icon",
-	inheritAttrs: false,
+	name: "Icon",
+	inheritAttrs: false
 })
 
-
 const $attrs = useAttrs() as any
 
-const props = defineProps<Props>()
-
-
+/* const props =  */defineProps<Props>()
 </script>
 
 <script lang="ts">
@@ -40,4 +37,3 @@ interface Props
 	Partial<Omit<HTMLAttributes, "class">
 	> { }
 </script>
-

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

@@ -4,29 +4,26 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 
 import IconFaSolidBell from "~icons/fa-solid/bell"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof components.LibButton> = {
 	component: components.LibButton,
 	title: "Components/Button",
 	args: {
 		label: "Label",
 		// @ts-expect-error - custom prop for story
-		_iconAfter: true,
-	},
+		_iconAfter: true
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof components.LibButton>
 
-
 export const Primary: Story = {
 	render: (args: any) => ({
 		components: {
 			...components,
-			IconFaSolidBell,
+			IconFaSolidBell
 		},
 		setup: () => ({ args, capitalize }),
 		template: `
@@ -42,16 +39,18 @@ export const Primary: Story = {
 		<div class="flex flex-col gap-4 pt-10">
 			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary']">
 				<lib-button v-bind="{...args, color: type , label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false') }">
-					${args._iconAfter ? `
+					${args._iconAfter
+			? `
 						<template #icon-after>
 							<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
 						</template>
-					` : ``}
+					`
+			: ``}
 				</lib-button>
 			</template>
 		</div>
-		`,
-	}),
+		`
+	})
 }
 
 export const IconAfter: Story = {
@@ -59,38 +58,38 @@ export const IconAfter: Story = {
 	args: {
 		...Primary.args,
 		// @ts-expect-error - .
-		_iconAfter: true,
-	},
+		_iconAfter: true
+	}
 }
 
 export const OnlyIcon: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		label: undefined,
-	},
+		label: undefined
+	}
 }
 export const Disabled: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		disabled: true,
-	},
+		disabled: true
+	}
 }
 export const Borderless: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		border: false,
-	},
+		border: false
+	}
 }
 export const BorderlessDisabled: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
 		border: false,
-		disabled: true,
-	},
+		disabled: true
+	}
 }
 export const WithDivInside: Story = {
 	render: (args: any) => ({
@@ -102,6 +101,6 @@ export const WithDivInside: Story = {
 				<div>Div inside button still has a pointer cursor.</div>
 			</lib-button>
 		</div>
-		`,
-	}),
+		`
+	})
 }

package/src/runtime/components/LibButton/LibButton.vue

@@ -55,12 +55,11 @@
 			dark:hover:shadow-accent-950/30
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
-			dark:bg-neutral-800
 			dark:border-neutral-900
 			dark:disabled:border-neutral-800
 			dark:disabled:bg-neutral-900
 		`,
-		border && ( !color || color === `secondary` ) && `
+		border && (!color || color === `secondary`) && `
 			after:shadow-bg/90
 			hover:after:shadow-bg
 			dark:after:shadow-bg/20
@@ -164,14 +163,20 @@
 		...autoTitle,
 		...$attrs,
 		class: undefined,
-		...ariaLabel,
+		...ariaLabel
 	}"
 >
-	<slot name="label" v-bind="{id:`label-${id ?? fallbackId}`, classes:'button--label pointer-events-none flex flex-1 items-center justify-center gap-1'}">
-		<label :id="`label-${id ?? fallbackId}`" class="button--label pointer-events-none flex flex-1 items-center justify-center gap-1">
+	<slot
+		name="label"
+		v-bind="{ id: `label-${id ?? fallbackId}`, classes: 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1' }"
+	>
+		<label
+			:id="`label-${id ?? fallbackId}`"
+			class="button--label pointer-events-none flex flex-1 items-center justify-center gap-1"
+		>
 			<slot name="icon"/>
 			<slot
-				v-bind="{ label}"
+				v-bind="{ label }"
 			>
 				<span v-if="label && !isBlank(label!)">
 					{{ label }}
@@ -185,18 +190,16 @@
 
 <script setup  lang="ts">
 import { isBlank } from "@alanscodelog/utils/isBlank"
-import { type ButtonHTMLAttributes,computed, useAttrs } from "vue"
+import { type ButtonHTMLAttributes, computed, useAttrs } from "vue"
 
 import { useAriaLabel } from "../../composables/useAriaLabel.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, type ButtonProps,getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
+import { type BaseInteractiveProps, type ButtonProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 const $attrs = useAttrs()
 
-
 defineOptions({
-	name: "lib-button",
+	name: "LibButton"
 })
 
 const fallbackId = getFallbackId()
@@ -204,33 +207,32 @@ const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props>(), {
 	color: false,
 	label: "",
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 
-
 const ariaLabel = useAriaLabel(props, fallbackId)
 const autoTitle = computed(() => ({
 	title: props.autoTitleFromAria
 		? ($attrs["aria-label"] ?? props.label) as string
-		: undefined,
+		: undefined
 }))
-
 </script>
 
 <script lang="ts">
-type RealProps =
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& ButtonProps
+type RealProps
+	= & LinkableByIdProps
+		& LabelProps
+		& BaseInteractiveProps
+		& ButtonProps
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes,"class" | "color" | "disabled">
+	Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled">
 	& TailwindClassProp
 	& {
 		// why is this not already a part of button?
+		// eslint-disable-next-line @typescript-eslint/naming-convention
 		"aria-label": string
 	}>,
 	RealProps {}

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

@@ -1,23 +1,20 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta = {
 	component: components.LibCheckbox,
 	title: "Components/Checkbox",
 	args: {
 		modelValue: true,
-		label: "Label",
-	},
+		label: "Label"
+	}
 } satisfies Meta<typeof components.LibCheckbox> & Meta<{ custom: string }>
 
 export default meta
 type Story = StoryObj<typeof components.LibCheckbox> // & StoryObj<typeof extraArgs>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -28,14 +25,13 @@ export const Primary: Story = {
 			Opposite State:
 			<br>
 			<lib-checkbox v-bind="args" :modelValue="!args.modelValue" @update:modelValue="args.modelValue = !$event"></lib-checkbox>
-		`,
-	}),
+		`
+	})
 }
 
-
 export const Disabled = {
 	...Primary,
 	args: {
-		disabled: true,
-	},
+		disabled: true
+	}
 }