Merge branch 'main' into feat/574-Implement-input-label-message-tooltip

.changeset/brave-owls-help.md

@@ -0,0 +1,10 @@
+---
+"@sit-onyx/nuxt": patch
+"docs": patch
+---
+
+feat: add nuxt module to easily integrate onyx into nuxt projects
+
+- Add the global styles to the nuxt project
+- Auto imports all onyx components
+- Add nuxt section to the getting started guide

.changeset/pre.json

@@ -12,14 +12,16 @@
     "docs": "0.0.0",
     "@sit-onyx/eslint-plugin": "0.0.0",
     "alpha-test-app": "0.0.0",
-    "playground": "0.0.0"
+    "playground": "0.0.0",
+    "@sit-onyx/nuxt": "0.0.0"
   },
   "changesets": [
     "afraid-avocados-hear",
     "angry-teachers-tickle",
     "big-coins-join",
     "big-ears-cheer",
     "brave-lobsters-wonder",
+    "brave-owls-help",
     "bright-bats-refuse",
     "bright-toys-retire",
     "brown-monkeys-promise",

.gitignore

@@ -29,6 +29,7 @@ blob-report/
 **/.vitepress/config.ts.timestamp-*.mjs
 storybook-static
 eslint-results.sarif
+.nuxt
 
 # Development config
 .env*

apps/docs/CHANGELOG.md

@@ -1,5 +1,15 @@
 # docs
 
+## 0.1.0-alpha.1
+
+### Patch Changes
+
+- 25893ed: feat: add nuxt module to easily integrate onyx into nuxt projects
+
+  - Add the global styles to the nuxt project
+  - Auto imports all onyx components
+  - Add nuxt section to the getting started guide
+
 ## 0.1.0-alpha.0
 
 ### Minor Changes

apps/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "type": "module",
   "private": true,
   "scripts": {

apps/docs/src/.vitepress/config.ts

@@ -141,6 +141,7 @@ export default defineConfig({
             { text: "Figma utilities", link: "/figma-utils" },
             { text: "Headless composables", link: "/headless" },
             { text: "Icons", link: "/icons" },
+            { text: "Nuxt", link: "/nuxt" },
             { text: "Storybook utilities", link: "/storybook-utils" },
             { text: "VitePress theme", link: "/vitepress-theme" },
           ],

apps/docs/src/development/packages/changelogs/[name].md

@@ -47,6 +47,12 @@ const { params } = useData();
 
 </div>
 
+<div v-else-if="params.name === 'nuxt'">
+
+<!--@include: @/../../../packages/nuxt/CHANGELOG.md-->
+
+</div>
+
 <div v-else>
   <h1>Changelogs</h1>
   <p>No changelog found for package "{{ params.name }}".</p>

apps/docs/src/development/packages/nuxt.md

@@ -0,0 +1,36 @@
+---
+outline: [2, 3]
+---
+
+<script lang="ts" setup>
+import packageJson from "../../../../../packages/nuxt/package.json";
+</script>
+
+# @sit-onyx/nuxt
+
+<div class="hide-external-link">
+
+[![npm version](https://badge.fury.io/js/@sit-onyx%2Fnuxt.svg)](https://www.npmjs.com/package/@sit-onyx/nuxt)
+
+</div>
+
+{{ packageJson.description }}.
+
+## Changelog
+
+A full changelog can be found [here](/development/packages/changelogs/nuxt).
+
+## Features
+
+- Auto import of all onyx components
+- Automatic setup of global styles
+
+## Quick Setup
+
+Install the module in your [Nuxt Js](https://nuxt.com/) application with one command:
+
+```bash
+npx nuxi module add @sit-onyx/nuxt
+```
+
+Afterwards you're able to just use all onyx components inside your app and the global styles will automatically be set up for you.

packages/nuxt/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @sit-onyx/nuxt
+
+## 0.0.1-alpha.0
+
+### Patch Changes
+
+- 25893ed: feat: add nuxt module to easily integrate onyx into nuxt projects
+
+  - Add the global styles to the nuxt project
+  - Auto imports all onyx components
+  - Add nuxt section to the getting started guide

packages/nuxt/README.md

@@ -0,0 +1,26 @@
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
+    <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg" width="160px">
+  </picture>
+</div>
+
+<br>
+
+# @sit-onyx/nuxt
+
+A Nuxt module to easily integrate onyx into [Nuxt Js](https://nuxt.com/) projects.
+Created by [Schwarz IT](https://it.schwarz).
+
+## Adding it to a nuxt project
+
+Install the module in your Nuxt application with one command:
+
+```bash
+npx nuxi module add @sit-onyx/nuxt
+```
+
+## Documentation
+
+You can find our documentation [here](https://onyx.schwarz/development/packages/nuxt.html).

packages/nuxt/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sit-onyx/nuxt",
+  "version": "0.0.1-alpha.0",
+  "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
+  "author": "Schwarz IT KG",
+  "license": "Apache-2.0",
+  "homepage": "https://onyx.schwarz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SchwarzIT/onyx",
+    "directory": "packages/nuxt"
+  },
+  "bugs": {
+    "url": "https://github.com/SchwarzIT/onyx/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "build": "pnpm run dev:prepare && nuxt-module-build build",
+    "type-check": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.11.2"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^1.3.3",
+    "@nuxt/module-builder": "~0.7.0",
+    "@nuxt/schema": "^3.11.2",
+    "@nuxt/test-utils": "^3.13.1",
+    "nuxt": "^3.11.2"
+  },
+  "peerDependencies": {
+    "sit-onyx": "workspace:^"
+  }
+}

packages/nuxt/playground/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <OnyxHeadline is="h1">Nuxt module playground!</OnyxHeadline>
+  </div>
+</template>
+
+<script setup></script>

packages/nuxt/playground/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  modules: ["../src/module"],
+  devtools: { enabled: true },
+});

packages/nuxt/playground/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "onyx-nuxt-playground",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "generate": "nuxi generate"
+  },
+  "dependencies": {
+    "nuxt": "^3.11.2"
+  }
+}

packages/nuxt/playground/server/tsconfig.json

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

packages/nuxt/playground/tsconfig.json

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

packages/nuxt/src/module.ts

@@ -0,0 +1,25 @@
+import { addComponent, defineNuxtModule } from "@nuxt/kit";
+import * as onyx from "sit-onyx";
+
+export interface ModuleOptions {}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: "onyx-nuxt",
+    configKey: "onyx",
+  },
+  defaults: {},
+  setup(_options, nuxt) {
+    nuxt.options.css.push("sit-onyx/style.css");
+
+    Object.keys(onyx)
+      .filter((namedExport) => namedExport.startsWith("Onyx"))
+      .forEach((component) => {
+        addComponent({
+          filePath: "sit-onyx",
+          name: component,
+          export: component,
+        });
+      });
+  },
+});

packages/nuxt/test/component-imports.test.ts

@@ -0,0 +1,20 @@
+import { fileURLToPath } from "node:url";
+import { describe, it, expect } from "vitest";
+import { setup, $fetch } from "@nuxt/test-utils/e2e";
+
+describe("auto imports", async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL("./fixtures/basic", import.meta.url)),
+  });
+
+  it("renders the page containing an auto imported onyx component and it's styles", async () => {
+    // Get response to a server-rendered page with `$fetch`.
+    const html = await $fetch("/");
+
+    // There should be a style definition for the onyx css variable if the styles were added globally
+    expect(html).toContain("--onyx-font-family");
+
+    // The rendered page should contain a h1 with the onyx classes if the component was auto imported correctly
+    expect(html).toContain('<h1 class="onyx-headline onyx-headline--h1">');
+  });
+});

packages/nuxt/test/fixtures/basic/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <OnyxHeadline is="h1">Hello onyx</OnyxHeadline>
+</template>

packages/nuxt/test/fixtures/basic/nuxt.config.ts

@@ -0,0 +1,5 @@
+import MyModule from "../../../src/module";
+
+export default defineNuxtConfig({
+  modules: [MyModule],
+});

packages/nuxt/test/fixtures/basic/package.json

@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "name": "basic",
+  "type": "module"
+}

packages/nuxt/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": ["dist", "node_modules", "playground"]
+}

packages/nuxt/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineVitestConfig } from "@nuxt/test-utils/config";
+
+export default defineVitestConfig({
+  test: {
+    coverage: {
+      include: ["src"],
+    },
+  },
+});