@nonsuch/component-library 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nonsuch
+
+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,105 @@
+# @nonsuch/component-library
+
+A Vue 3 component library built on top of [Quasar](https://quasar.dev), providing customized components with opinionated defaults.
+
+**Quasar components you haven't customized are used directly** — this library only adds or overrides the ones with Nonsuch-specific styling and behavior. Tree-shaking is fully preserved.
+
+## Installation
+
+```bash
+# Install the library and its peer dependencies
+pnpm add @nonsuch/component-library
+pnpm add quasar @quasar/extras @quasar/vite-plugin
+```
+
+### Vite Configuration
+
+In your `vite.config.ts`, register the Quasar Vite plugin as usual:
+
+```ts
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue({ template: { transformAssetUrls } }), quasar()],
+})
+```
+
+### App Entry
+
+Register Quasar in your Vue app:
+
+```ts
+import { createApp } from 'vue'
+import { Quasar } from 'quasar'
+import 'quasar/src/css/index.sass'
+
+const app = createApp(App)
+app.use(Quasar, { plugins: {} })
+```
+
+Then import custom components as needed:
+
+```ts
+import { NsButton } from '@nonsuch/component-library'
+```
+
+Or use Quasar components directly — they aren't re-exported through this library, so you import them from `quasar` as normal:
+
+```ts
+import { QInput, QSelect } from 'quasar'
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run Storybook (dev mode)
+pnpm dev
+
+# Run tests
+pnpm test
+pnpm test:watch
+
+# Build the library
+pnpm build
+
+# Build Storybook for deployment
+pnpm build:storybook
+```
+
+## Project Structure
+
+```markdown
+src/
+index.ts # Library entry — exports all custom components
+components/
+NsButton/
+NsButton.vue # Component implementation
+NsButton.stories.ts # Storybook story
+NsButton.test.ts # Vitest unit test
+index.ts # Re-export
+```
+
+Each custom component lives in its own directory with co-located story and test files. The `Ns` prefix distinguishes library components from Quasar's `Q` prefix.
+
+## Adding a New Component
+
+1. Create `src/components/NsMyComponent/NsMyComponent.vue`
+2. Add a story: `NsMyComponent.stories.ts`
+3. Add tests: `NsMyComponent.test.ts`
+4. Add a re-export: `index.ts`
+5. Export from `src/index.ts`
+
+## Architecture
+
+- **Quasar is a peer dependency** — consumers install it normally and get full tree-shaking via `@quasar/vite-plugin`
+- **Custom components compose Quasar** — they wrap or extend Quasar components with opinionated defaults
+- **Vite library mode** — builds to ES modules with externalized `vue` and `quasar`
+- **TypeScript** — strict mode with emitted `.d.ts` declarations
+
+## License
+
+MIT — see [LICENSE](./LICENSE)

package/dist/nonsuch-components.css

@@ -0,0 +1 @@
+.ns-button[data-v-5eac18a7]{font-weight:500;letter-spacing:.02em}

package/dist/nonsuch-components.js

@@ -0,0 +1,35 @@
+import r from "quasar/src/components/btn/QBtn.js";
+import { defineComponent as u, openBlock as d, createBlock as l, mergeProps as s, withCtx as c, renderSlot as f } from "vue";
+const p = /* @__PURE__ */ u({
+  __name: "NsButton",
+  props: {
+    color: { default: "primary" },
+    size: { default: "md" },
+    unelevated: { type: Boolean, default: !0 },
+    noCaps: { type: Boolean, default: !0 },
+    rounded: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    return (t, o) => (d(), l(r, s(t.$attrs, {
+      color: e.color,
+      size: e.size,
+      unelevated: e.unelevated,
+      "no-caps": e.noCaps,
+      rounded: e.rounded,
+      class: "ns-button"
+    }), {
+      default: c(() => [
+        f(t.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["color", "size", "unelevated", "no-caps", "rounded"]));
+  }
+}), i = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [n, a] of t)
+    o[n] = a;
+  return o;
+}, B = /* @__PURE__ */ i(p, [["__scopeId", "data-v-5eac18a7"]]);
+export {
+  B as NsButton
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@nonsuch/component-library",
+  "version": "0.1.0",
+  "description": "A Vue 3 component library built on Quasar with opinionated defaults and custom components.",
+  "type": "module",
+  "sideEffects": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nonsuch/componentLibrary.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/nonsuch-components.js",
+  "module": "./dist/nonsuch-components.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/nonsuch-components.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "build:storybook": "storybook build",
+    "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "preview": "vite preview",
+    "prepublishOnly": "pnpm lint && pnpm typecheck && pnpm test && pnpm build"
+  },
+  "peerDependencies": {
+    "@quasar/vite-plugin": "^1.8.0",
+    "quasar": "^2.17.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@quasar/vite-plugin": {
+      "optional": true
+    }
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@quasar/extras": "^1.17.0",
+    "@quasar/vite-plugin": "^1.10.0",
+    "@storybook/vue3-vite": "^10.2.7",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.7.0",
+    "happy-dom": "^20.5.3",
+    "prettier": "^3.8.1",
+    "quasar": "^2.18.6",
+    "sass-embedded": "^1.97.3",
+    "storybook": "^10.2.7",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.27",
+    "vue-tsc": "^3.2.4"
+  },
+  "packageManager": "pnpm@10.29.2"
+}