moulify 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mouli Bheemaneti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,190 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: moulify
+- Description: My new Nuxt module
+-->
+
+# moulify
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+moulify is a Nuxt module that provides a small, opinionated UI layer with:
+
+- Auto-registered Vue components (Button, Icon)
+- A Fantasticon-generated icon font wired into Nuxt via a plugin
+- Simple theming via color configuration and component prefixing
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [🏀 Online playground](https://stackblitz.com/github/moulibheemaneti/moulify?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+- Auto-imports components from the module:
+  - `<moulify-button>` (or with your own prefix)
+  - `<moulify-icon>`
+- Configurable prefix for auto-registered components
+- Simple color theming exposed as module options
+- Icon component backed by a generated icon font with type-safe icon names
+- Nuxt plugin that automatically injects the icon CSS
+
+## Quick setup
+
+Install the module to your Nuxt application with:
+
+```bash
+npx nuxt module add moulify
+```
+
+This will install `moulify` and add it to the `modules` section of your `nuxt.config`.
+
+### Manual installation
+
+If you prefer to wire things up yourself:
+
+```bash
+npm install moulify
+# or
+pnpm add moulify
+# or
+yarn add moulify
+```
+
+Then enable the module in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['moulify'],
+
+  moulify: {
+    // Optional: override defaults
+    prefix: 'moulify',
+    colors: {
+      primary: '#0076ff',
+      secondary: '#000000',
+      tertiary: '#888888',
+    },
+  },
+})
+```
+
+The module will:
+
+- Register a Nuxt plugin that imports the generated icon CSS
+- Auto-register all Vue components from the module using the configured `prefix`
+
+## Configuration
+
+Module options are available under the `moulify` key in your `nuxt.config`:
+
+```ts
+interface ModuleOptions {
+  prefix?: string
+  colors?: {
+    primary?: string
+    secondary?: string
+    tertiary?: string
+  }
+}
+```
+
+- `prefix` (default: `'moulify'`): controls the tag names of auto-imported components.
+  - For example, with `prefix: 'nc'` you will use `<nc-button>` instead of `<moulify-button>`.
+- `colors`: simple color tokens you can use in your own styling or future theme extensions.
+
+## Components
+
+### `<moulify-button>`
+
+A simple, flex-centered button that can render icons on the left and/or right.
+
+With the default prefix:
+
+```vue
+<template>
+  <moulify-button icon-left="home" icon-right="arrow-right">
+    Get started
+  </moulify-button>
+</template>
+```
+
+Props:
+
+- `iconLeft?: IconsId` – optional icon name rendered before the button content.
+- `iconRight?: IconsId` – optional icon name rendered after the button content.
+
+These icon names are derived from the generated icon font (`IconsId` union type). The corresponding icons are rendered via `<moulify-icon>`.
+
+### `<moulify-icon>`
+
+A lightweight icon component backed by the Fantasticon-generated font family.
+
+With the default prefix:
+
+```vue
+<template>
+  <moulify-icon name="home" :size="32" color="#00DC82" />
+</template>
+```
+
+Props:
+
+- `name: IconsId` – required icon name, type-safe union of all available icons.
+- `size?: number` (default: `24`) – font size in pixels.
+- `color?: string` (default: `'currentColor'`) – CSS color to apply.
+
+If an invalid icon name is passed, the component will fall back to rendering the `name` as uppercase text so you can easily spot configuration issues in the UI.
+
+The required CSS for the icon font is automatically imported by the module’s Nuxt plugin, so you don’t need to manually include any styles.
+
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/moulify/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/moulify
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/moulify.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/moulify
+
+[license-src]: https://img.shields.io/npm/l/moulify.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/moulify
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com

package/dist/chunks/package.mjs

@@ -0,0 +1,3 @@
+const version = "0.0.1";
+
+export { version };

package/dist/module.d.mts

@@ -0,0 +1,50 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Prefix used for auto-registered components.
+     *
+     * Example:
+     * - prefix: 'nc'    -> <nc-button>, <nc-header>
+     * - prefix: 'moulify' (default) -> <moulify-button>, <moulify-header>
+     */
+    prefix?: string;
+    /**
+     * Colors used for the module.
+     *
+     * Example:
+     * - colors: { primary: '#000', secondary: '#fff', tertiary: '#000' }
+     * - colors: { primary: '#000', secondary: '#fff', tertiary: '#000' }
+     */
+    colors?: MoulifyModuleColors;
+}
+interface MoulifyModuleColors {
+    /**
+     * Primary color used for the module.
+     *
+     * Example:
+     * - primary: '#000'
+     * - primary: '#000'
+     */
+    primary?: string;
+    /**
+     * Secondary color used for the module.
+     *
+     * Example:
+     * - secondary: '#fff'
+     * - secondary: '#fff'
+     */
+    secondary?: string;
+    /**
+     * Tertiary color used for the module.
+     *
+     * Example:
+     * - tertiary: '#000'
+     * - tertiary: '#000'
+     */
+    tertiary?: string;
+}
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "moulify",
+  "configKey": "moulify",
+  "version": "0.0.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,37 @@
+import { defineNuxtModule, createResolver, addPlugin, addComponentsDir } from '@nuxt/kit';
+
+const versionFromPackageJson = (await import('./chunks/package.mjs')).version;
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "moulify",
+    configKey: "moulify",
+    version: versionFromPackageJson
+  },
+  defaults: {
+    prefix: "moulify",
+    colors: {
+      primary: "#0076ff",
+      // little element plus default blue
+      secondary: "#000",
+      // black
+      tertiary: "#888"
+      // grey
+    }
+  },
+  setup(options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addPlugin(resolver.resolve("./runtime/plugin"));
+    addComponentsDir({
+      // points to src/runtime/app/components
+      path: resolver.resolve("runtime/app/components"),
+      // optional: control naming
+      pathPrefix: false,
+      // prefix controls auto-imported component names, e.g. <nc-button>, <moulify-button>
+      prefix: options.prefix,
+      // optional: restrict to .vue files (types.ts will be ignored anyway)
+      extensions: [".vue"]
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/app/components/Button/index.d.vue.ts

@@ -0,0 +1,17 @@
+import type { ButtonProps } from './types.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+    iconLeft: import("../../../../assets/generated/fonts/icons.js").IconsId;
+    iconRight: import("../../../../assets/generated/fonts/icons.js").IconsId;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/Button/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <button class="moulify-btn">
+    <moulify-icon v-if="props.iconLeft" :name="props.iconLeft" />
+    <slot />
+    <moulify-icon v-if="props.iconRight" :name="props.iconRight" />
+  </button>
+</template>
+
+<script setup>
+const props = defineProps({
+  iconLeft: { type: String, required: false, default: void 0 },
+  iconRight: { type: String, required: false, default: void 0 }
+});
+</script>
+
+<style>
+.moulify-btn {
+  background-color: black;
+  align-items: center;
+  color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+</style>

package/dist/runtime/app/components/Button/index.vue.d.ts

@@ -0,0 +1,17 @@
+import type { ButtonProps } from './types.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+    iconLeft: import("../../../../assets/generated/fonts/icons.js").IconsId;
+    iconRight: import("../../../../assets/generated/fonts/icons.js").IconsId;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/Button/types.d.ts

@@ -0,0 +1,5 @@
+import type { IconsId } from '../../../../assets/generated/fonts/icons.js';
+export interface ButtonProps {
+    iconLeft?: IconsId;
+    iconRight?: IconsId;
+}

package/dist/runtime/app/components/Header/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Header/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <header class="moulify-header">
+    Header component
+  </header>
+</template>
+
+<style>
+.moulify-header{background-color:#000;border-radius:5px;color:#fff;padding:10px}
+</style>

package/dist/runtime/app/components/Header/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Icon/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {
+    size: number;
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Icon/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <i v-if="isIconValid" :class="`icon icon--${name}`" />
+
+  <!-- Fallback: Showing uppercase text -->
+  <span v-else class="icon-fallback"> {{ props.name }}</span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { ALL_ICONS } from "../../../../utils/constants";
+defineOptions({ name: "NcIcon" });
+const props = defineProps({
+  name: { type: String, required: true },
+  size: { type: Number, required: false, default: 24 },
+  color: { type: String, required: false, default: "white" }
+});
+const isIconValid = computed(() => ALL_ICONS.includes(props.name));
+const iconStyle = computed(() => ({
+  // fontSize: pixelToRem(props.size),
+  fontSize: `${props.size}px`,
+  color: props.color
+}));
+</script>
+
+<style>
+.icon {
+  display: inline-block;
+  line-height: 0;
+  color: v-bind("iconStyle.color");
+  font-size: v-bind("iconStyle.fontSize");
+}
+
+.icon-fallback {
+  text-transform: uppercase;
+}
+</style>

package/dist/runtime/app/components/Icon/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {
+    size: number;
+    color: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Icon/types.d.ts

@@ -0,0 +1,23 @@
+import type { IconsId } from '~/src/assets/generated/fonts/icons';
+/**
+ * Props for the Icon component.
+ *
+ * Defines the properties required to render an icon from the Fantasticon-generated font family,
+ * including the icon's name, optional size, and optional color.
+ */
+export interface IconProps {
+    /** Icon name from the Fantasticon-generated font family. */
+    name: IconsId;
+    /**
+     * Font size for the icon.
+     *
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Color of the icon.
+     *
+     * @default "currentColor" - Depending on SVG color.
+     */
+    color?: string;
+}

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,3 @@
+import '../assets/generated/fonts/icons.css.js';
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "#app";
+import "../assets/generated/fonts/icons.css";
+export default defineNuxtPlugin((_nuxtApp) => {
+  console.log("Plugin injected by moulify!");
+});

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/types.d.mts

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

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "moulify",
+  "version": "0.0.1",
+  "description": "My new Nuxt module",
+  "repository": "https://github.com/moulibheemaneti/moulify",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "workspaces": [
+    "playground"
+  ],
+  "scripts": {
+    "build:icons": "bun run scripts/generate-icon-fonts.ts",
+    "prepare": "husky",
+    "prepack": "nuxt-module-build build",
+    "clean": "rm -rf playground/node_modules .nuxt dist node_modules bun.lock playground/dist",
+    "clean-install": "bun run clean && bun i",
+    "dev": "bun run dev:prepare && nuxt dev playground",
+    "dev:clean": "bun run clean-install && bun run dev",
+    "dev:build": "nuxt build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.3.1",
+    "vue": "^3.5.29"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^3.2.1",
+    "@nuxt/eslint-config": "^1.15.1",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.3.1",
+    "@nuxt/test-utils": "^4.0.0",
+    "@types/node": "latest",
+    "changelogen": "^0.6.2",
+    "husky": "^9.0.0",
+    "@commitlint/cli": "^19.0.0",
+    "@commitlint/config-conventional": "^19.0.0",
+    "eslint": "^10.0.1",
+    "fantasticon": "^4.1.0",
+    "nuxt": "^4.3.1",
+    "sass": "^1.97.3",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.18",
+    "vue-tsc": "^3.2.5"
+  }
+}