@witchcraft/ui 0.0.1

package/dist/runtime/vue/VueComponentsPlugin.js

@@ -0,0 +1,10 @@
+import { registerComponents } from "./registerComponents.js";
+import { registerDirectives } from "./registerDirectives.js";
+import * as components from "../components/index.js";
+import * as directives from "../directives/index.js";
+export const VueComponentsPlugin = {
+  install(app) {
+    registerComponents(app, components);
+    registerDirectives(app, directives);
+  }
+};

package/dist/runtime/vue/registerComponents.d.ts

@@ -0,0 +1,19 @@
+import type { App } from "vue";
+/**
+ * Register only specific components. Will register components as both snake case and pascal case.
+ *
+ * ```ts
+ * import {SomeComponent} from "@witchcraft/ui/components/SomeComponent"
+ * const components = { SomeComponent }
+ * createApp(App)
+ * 	.use({
+ * 		install(app: typeof App) {
+ * 			// will register optional-prefix-some-component and optionalPrefixSomeComponent
+ * 			// note it doesn't matter what you call the component in the Object
+ * 			// its name is set internally already
+ * 			registerComponents(app, components, "optional-prefix-")
+ * 		},
+ *	})
+ * ```
+ */
+export declare const registerComponents: (app: App, components: Record<string, any>, prefix?: string) => void;

package/dist/runtime/vue/registerComponents.js

@@ -0,0 +1,10 @@
+import { capitalize } from "@alanscodelog/utils/capitalize.js";
+export const registerComponents = (app, components, prefix = "") => {
+  for (const key of Object.keys(components)) {
+    const component = components[key];
+    const name = prefix + component.name;
+    const capitalizedName = name.split("-").map((_) => capitalize(_)).join("");
+    app.component(name, component);
+    app.component(capitalizedName, component);
+  }
+};

package/dist/runtime/vue/registerDirectives.d.ts

@@ -0,0 +1,3 @@
+import type { App } from "vue";
+/** Like registerComponents but for directives. Directives given must have a directiveName property, else they will be ignored. */
+export declare const registerDirectives: (app: App, directives: Record<string, any>, prefix?: string) => void;

package/dist/runtime/vue/registerDirectives.js

@@ -0,0 +1,9 @@
+export const registerDirectives = (app, directives, prefix = "") => {
+  for (const key of Object.keys(directives)) {
+    const directive = directives[key];
+    if (!directive.directiveName) continue;
+    const name = prefix + directive.directiveName;
+    const kebabCasedName = name.split("-").map((_) => _.toLowerCase()).join("-");
+    app.directive(kebabCasedName, directive);
+  }
+};

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'

package/package.json

@@ -0,0 +1,207 @@
+{
+	"name": "@witchcraft/ui",
+	"version": "0.0.1",
+	"description": "Vue component library.",
+	"type": "module",
+	"main": "./dist/runtime/main.lib.js",
+	"types": "./types/index.d.ts",
+	"sideEffects": false,
+	"exports": {
+		".": {
+			"types": "./types/index.d.ts",
+			"import": "./dist/runtime/main.lib.js"
+		},
+		"./*": {
+			"import": "./dist/runtime/*",
+			"types": "./dist/runtime/*"
+		},
+		"./components": {
+			"types": "./dist/runtime/components/index.d.ts",
+			"import": "./dist/runtime/components/index.js"
+		},
+		"./components/*": {
+			"types": "./dist/runtime/components/*/*.vue.d.ts",
+			"import": "./dist/runtime/components/*/*.vue"
+		},
+		"./composables/*": {
+			"types": "./dist/runtime/composables/*",
+			"import": "./dist/runtime/composables/*"
+		},
+		"./composables": {
+			"types": "./dist/runtime/composables/index.d.ts",
+			"import": "./dist/runtime/composables/index.js"
+		},
+		"./directives": {
+			"types": "./dist/runtime/directives/index.d.ts",
+			"import": "./dist/runtime/directives/index.js"
+		},
+		"./directives/*": {
+			"types": "./dist/runtime/directives/*",
+			"import": "./dist/runtime/directives/*"
+		},
+		"./helpers": {
+			"types": "./dist/runtime/helpers/index.d.ts",
+			"import": "./dist/runtime/helpers/index.js"
+		},
+		"./helpers/*": {
+			"types": "./dist/runtime/helpers/*",
+			"import": "./dist/runtime/helpers/*"
+		},
+		"./build/*": {
+			"types": "./dist/runtime/build/*.d.ts",
+			"import": "./dist/runtime/build/*"
+		},
+		"./style.css": "./src/runtime/assets/style.css",
+		"./base.css": "./src/runtime/assets/base.css",
+		"./nuxt": {
+			"import": "./dist/module.mjs",
+			"require": "./dist/module.cjs"
+		},
+		"./types": {
+			"types": "./dist/runtime/types/index.d.ts",
+			"import": "./dist/runtime/types/index.js"
+		}
+	},
+	"unbuild": {
+		"failOnWarn": false
+	},
+	"scripts": {
+		"//prepare": "echo Needed so that if we pull the package from git it will get built and installed properly.",
+		"prepare": "husky && pnpm gen:theme && pnpm build",
+		"build": "nuxt-module-build prepare && nuxt-module-build build && pnpm build:playground",
+		"build:playground": "cd playground && pnpm link:module && pnpm generate",
+		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+		"dev": "nuxi dev playground",
+		"storybook": "BROWSER=none storybook dev -p 6006",
+		"storybook:clear-cache": "BROWSER=none storybook dev -p 6006 --no-manager-cache",
+		"storybook:build": "pnpm nuxt prepare && storybook build -o docs/storybook",
+		"storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook\"",
+		"test": "pnpm storybook:test",
+		"test:types": "vue-tsc --noEmit --pretty --project tsconfig.types.json",
+		"doc": "pnpm test && pnpm storybook:build",
+		"doc:dev": "pnpm storybook",
+		"lint:eslint": "eslint \"{src,test,playground/app}/**/*.{js,ts,vue,cjs}\" \"*.{js,ts}\" --max-warnings=0 --report-unused-disable-directives",
+		"lint:types": "pnpm test:types",
+		"lint:commits": "commitlint --from $(git rev-list --max-parents=0 HEAD) --to HEAD --verbose",
+		"lint:imports": "madge --circular --extensions ts ./src",
+		"lint": "pnpm lint:types && pnpm lint:eslint",
+		"//actions:debug": "echo For debugging github build action locally with nektos/act. Requires act and docker. Note: Cache will never work locally because of https://github.com/nektos/act/issues/285",
+		"actions:debug": "act -r -j release",
+		"gen:exports": "indexit update --ignore **.d.ts **.stories.ts **.vue -o '${path}.js'",
+		"gen:theme": "echo src/runtime/build/generateTheme.ts"
+	},
+	"peerDependencies": {
+		"tailwindcss": "^4.0.17",
+		"vue": "^3.2.47"
+	},
+	"peerDependenciesMeta": {
+		"tailwindcss": {
+			"optional": true
+		},
+		"vue": {
+			"optional": false
+		}
+	},
+	"dependencies": {
+		"@alanscodelog/utils": "^5.0.0",
+		"@egoist/vue-to-react": "^1.2.0",
+		"@iconify/json": "^2.2.323",
+		"@nuxt/kit": "^3.16.2",
+		"@nuxt/schema": "^3.16.2",
+		"@nuxt/types": "^2.17.3",
+		"@tailwindcss/vite": "^4.1.0",
+		"@witchcraft/nuxt-utils": "^0.0.1",
+		"colord": "^2.9.3",
+		"colorjs.io": "0.6.0-alpha.1",
+		"defu": "^6.1.4",
+		"fast-glob": "^3.3.2",
+		"metamorphosis": "^0.4.1",
+		"tailwind-merge": "^3.1.0",
+		"unplugin-icons": "^22.1.0",
+		"unplugin-vue-components": "^28.4.1",
+		"vue-component-type-helpers": "^2.0.29"
+	},
+	"devDependencies": {
+		"@alanscodelog/commitlint-config": "^3.0.2",
+		"@alanscodelog/eslint-config": "^5.0.0",
+		"@alanscodelog/semantic-release-config": "^5.0.1",
+		"@alanscodelog/tsconfigs": "^5.0.0",
+		"@alanscodelog/vite-config": "^0.0.5",
+		"@chromatic-com/storybook": "^3.2.6",
+		"@commitlint/cli": "^19.3.0",
+		"@internationalized/date": "^3.1.0",
+		"@nuxt/eslint-config": "^1.3.0",
+		"@nuxt/module-builder": "^0.8.4",
+		"@nuxtjs/i18n": "^9.5.3",
+		"@rollup/plugin-node-resolve": "^16.0.1",
+		"@storybook/addon-a11y": "^8.6.12",
+		"@storybook/addon-actions": "^8.6.12",
+		"@storybook/addon-essentials": "^8.6.12",
+		"@storybook/addon-interactions": "^8.6.12",
+		"@storybook/addon-links": "^8.6.12",
+		"@storybook/addon-storysource": "^8.6.12",
+		"@storybook/blocks": "^8.6.12",
+		"@storybook/manager-api": "^8.6.12",
+		"@storybook/test": "^8.6.12",
+		"@storybook/test-runner": "^0.22.0",
+		"@storybook/vue3": "^8.6.12",
+		"@storybook/vue3-vite": "^8.6.12",
+		"@tailwindcss/postcss": "^4.1.2",
+		"@types/node": "^22.14.0",
+		"@vitejs/plugin-vue": "^5.0.4",
+		"@vue/runtime-core": "^3.4.27",
+		"@playwright/test": "=1.50.0",
+		"playwright": "=1.50.0",
+		"@vue/runtime-dom": "^3.4.27",
+		"@vueuse/components": "^13.0.0",
+		"@vueuse/core": "^13.0.0",
+		"autoprefixer": "^10.4.19",
+		"concurrently": "^9.1.2",
+		"eslint": "=9.12.0",
+		"eslint-plugin-jsdoc": "^48.0.0",
+		"http-server": "^14.1.1",
+		"husky": "^9.0.11",
+		"indexit": "2.1.0-beta.3",
+		"madge": "^7.0.0",
+		"nuxt": "^3.16.2",
+		"radix-vue": "^1.9.11",
+		"semantic-release": "^24.1.2",
+		"storybook": "^8.6.12",
+		"storybook-dark-mode": "^4.0.2",
+		"tailwindcss": "^4.1.2",
+		"ts-node": "^10.9.2",
+		"typescript": "~5.8.2",
+		"unbuild": "^3.5.0",
+		"vite": "^6.2.5",
+		"vite-plugin-externalize-deps": "^0.9.0",
+		"vite-tsconfig-paths": "^5.0.1",
+		"playwright-core": "=1.50.0",
+		"vue": "^3.5.13",
+		"vue-tsc": "^2.0.19",
+		"wait-on": "^8.0.3"
+	},
+	"author": "Alan <alanscodelog@gmail.com>",
+	"repository": "https://github.com/witchcraftjs/ui",
+	"license": "MIT",
+	"files": [
+		"src",
+		"dist",
+		"types"
+	],
+	"release": {
+		"extends": [
+			"@alanscodelog/semantic-release-config"
+		]
+	},
+	"commitlint": {
+		"extends": [
+			"@alanscodelog"
+		]
+	},
+	"engines": {
+		"node": ">=20.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/src/module.ts

@@ -0,0 +1,176 @@
+import { crop, indent } from "@alanscodelog/utils"
+import {
+	addComponent,
+	addImports, addTemplate, addTypeTemplate,
+	createResolver,
+	defineNuxtModule,
+	installModule,
+	useLogger,
+} from "@nuxt/kit"
+import tailwindcss from "@tailwindcss/vite"
+import { addImportsCustom, globFiles } from "@witchcraft/nuxt-utils/utils"
+import { defu } from "defu"
+import fs from "fs"
+import { themeAsTailwindCss } from "metamorphosis/tailwind"
+import IconsResolver from "unplugin-icons/resolver"
+import Icons from "unplugin-icons/vite"
+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"
+const knownDirectives = ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"] as const
+
+const { resolve, resolvePath } = createResolver(import.meta.url)
+
+const componentsInfo: { name: string, filepath: string }[] = globFiles([
+	`${resolve("./runtime/components")}/**/*.vue*`,
+	`!**/Template/**.vue`,
+],[], (filepath: string, name: string) => ({
+	name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
+	filepath,
+}))
+
+declare module "@nuxt/schema" {
+	interface PublicRuntimeConfig {
+		witchcraftUi: Pick<ModuleOptions, "directives">
+	}
+}
+
+ 
+export interface ModuleOptions {
+/**
+ * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
+ *
+ * @default true
+ */
+	includeUnpluginIconsPlugins?: boolean
+	directives: (typeof knownDirectives[number])[]
+	/**
+		* Which components (without a prefix) to register for auto-importing globally.
+		*/
+	globalComponents: string[]
+	/**
+	 * @default "W"
+	 */
+	componentPrefix: string
+	debug?: boolean
+	/**
+	 * @default "~/assets/css/tailwind.css"
+	 */
+	mainCssFile?: string
+}
+
+export default defineNuxtModule<ModuleOptions>({
+	meta: {
+		name: "witchcraftUi",
+		configKey: "witchcraftUi",
+	},
+	defaults: {
+		includeUnpluginIconsPlugins: true,
+		directives: [ ...knownDirectives ],
+		globalComponents: [
+			...componentsInfo.map(_ => _.name.slice("PREFIX".length)),
+		],
+		componentPrefix: "W",
+		debug: true,
+		mainCssFile: "~/assets/css/tailwind.css",
+	},
+	async setup(options, nuxt) {
+		const moduleName = "@witchcraft/ui"
+		const logger = useLogger(moduleName, { level: options.debug ? 10 : 0 })
+
+		const filteredComponentsInfo: typeof componentsInfo = []
+		for (const component of componentsInfo) {
+			const prefixless = component.name.slice("PREFIX".length)
+			component.name = options.componentPrefix + prefixless
+			if (options.globalComponents.includes(prefixless)) {
+				filteredComponentsInfo.push(component)
+			}
+		}
+
+
+		const unknownDirectives = options.directives.filter(_ => !knownDirectives.includes(_))
+		if (unknownDirectives.length > 0) {
+			throw new Error(`Witchcraft Components: Directives list contains unknown directives: ${unknownDirectives.join(",")}`)
+		}
+		nuxt.options.runtimeConfig.public.witchcraftUi = defu(
+			nuxt.options.runtimeConfig.public.witchcraftUi,
+			{
+				directives: options.directives,
+			}
+		)
+
+
+		const contents = [
+			...componentsInfo.map(_ => _.filepath)
+		]
+		addTemplate({
+			filename: "witchcraft-ui.css",
+			write: true,
+			getContents: () => crop`
+				${indent(themeAsTailwindCss(theme, themeConvertionOpts), 4)}
+				@import "@witchcraft/ui/style.css";
+				@import "@witchcraft/ui/base.css";
+				${indent(contents.map(_ => `@source "${_}";`).join("\n"), 4)}
+			`,
+		})
+		
+		
+		await Promise.all(filteredComponentsInfo
+			.map(async entry => addComponent({
+				filePath: entry.filepath,
+				name: entry.name,
+				global: options.globalComponents.includes(entry.name.slice(options.componentPrefix.length)),
+			}))
+		)
+
+		logger.info(`Added components: ${filteredComponentsInfo.map(_ => _.name).join(", ")}`)
+
+		const added: string[] = []
+		addImportsCustom([
+			`${resolve("runtime/composables")}/**/*`,
+			`${resolve("runtime/utils")}/**/*`,
+		], [],(filePath: string, name: string) => {
+			added.push(name)
+			return addImports({
+				name,
+				from: filePath,
+			})
+		})
+		logger.info(`Added imports: ${added.join(", ")}`)
+
+		nuxt.hook("vite:extendConfig", async config => {
+			if (options.includeUnpluginIconsPlugins) {
+				logger.info(`Adding unplugin-icons`)
+				config.plugins ??= []
+				config.plugins = [
+					// we must prepend or the custom style options don't work when the module is used
+					ViteComponents({
+						resolvers: [
+							IconsResolver(),
+							// we don't need our resolver since we use nuxt instead
+						],
+					}),
+					Icons({
+						...unpluginIconViteOptions,
+					}),
+					tailwindcss() as any,
+					...config.plugins,
+				]
+			}
+		})
+		nuxt.options.css.push(await resolvePath(options.mainCssFile!, nuxt.options.alias))
+		// we need to hook in first before it does, otherwise the plugins don't load correctly
+		await installModule("unplugin-icons/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(),
+		})
+	},
+})

package/src/runtime/assets/base.css

@@ -0,0 +1,67 @@
+.v-enter-active,
+.v-leave-active {
+	transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+	opacity: 0;
+}
+
+.list-move,
+/* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+	transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+	opacity: 0;
+	transform: translateX(30px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+animations can be calculated correctly. */
+.list-leave-active {
+	position: absolute;
+}
+
+/* prevent accidental selection/clicks on moving/disappearing elements */
+.list-move,
+.list-leave-to {
+	pointer-events: none;
+	user-select: none;
+}
+
+/* Animations */
+@keyframes blink {
+	0% {
+		opacity: 0;
+	}
+
+	25% {
+		opacity: 1;
+	}
+
+	75% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes slide {
+	0% {
+		background-position:0%;
+	}
+	100% {
+		background-position: 100%;
+	}
+}
+
+a {
+	@apply link-like;
+}

package/src/runtime/assets/locales/en.json

@@ -0,0 +1,33 @@
+{
+	"witchcraft-ui": {
+		"file-input.accepted-formats": "Accepted Formats",
+		"file-input.compact-choose-file": "Choose File",
+		"file-input.compact-choose-file-plural": "Choose Files",
+		"file-input.non-compact-choose-file": "Drag & Drop File",
+		"file-input.non-compact-choose-file-plural": "Drag & Drop Files",
+		"color-picker.pick-color": "Pick Color",
+		"cancel": "Cancel",
+		"save": "Save",
+		"copy": "Copy",
+		"color-picker.aria": "Color Picker",
+		"color-picker.aria.saturation": "Saturation",
+		"color-picker.aria.hue": "Hue",
+		"color-picker.aria.value": "Value",
+		"color-picker.aria.hue-slider": "Hue Slider",
+		"color-picker.aria.alpha-slider": "Alpha Slider",
+		"color-picker.aria.description": "Use the arrow keys to move the handle, or use shift to move in 10 pixel increments.",
+		"dark-mode-switcher.title": "Switch dark mode type, current: ",
+		"dark-mode-switcher.system": "System",
+		"dark-mode-switcher.dark": "Dark",
+		"dark-mode-switcher.light": "Light",
+		"pagination.aria": "Pagination Navigation",
+		"pagination.aria.go-to-previous-page": "Go to previous page. Page {count}",
+		"pagination.aria.go-to-next-page": "Go to next page. Page {count}",
+		"pagination.aria.go-to-page": "Go to page {count}",
+		"pagination.aria.current-page": "Current page {count}",
+		"pagination.previous-page": "Prev",
+		"pagination.next-page": "Next",
+		"recorder.recording": "Recording",
+		"":"hate forgetting json can't handle a trailing comma"
+	}
+}