feat: uberschrift for Vue (#8) + changesets #10

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/fuzzy-items-listen.md

@@ -0,0 +1,17 @@
+---
+"@uberschrift/vite-chakra-ui-example": minor
+"@uberschrift/vite-mui-example": minor
+"@uberschrift/vite-example": minor
+"@uberschrift/eslint-config": minor
+"vue-vite-example": minor
+"uberschrift": minor
+"vueberschrift": minor
+"@uberschrift/docs": minor
+"nextjs-example": minor
+"@uberschrift/tsconfig": minor
+---
+
+Substantial eco system changes:
+
+-   add vueberschrift package for Vue.js
+-   Make use of changesets

.github/workflows/release.yml → .github/workflows/changeset.yml

@@ -1,28 +1,36 @@
-name: "🚀 Release to npm"
+name: 🐕 changeset
+
 on:
   push:
     branches:
       - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
-  publish:
+  release:
+    name: changesets-pr
     runs-on: ubuntu-latest
     steps:
       - name: 🧺 checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: 🐱 use .nvmrc
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
           cache: "npm"
       - name: 📌 npm install
         run: npm ci --prefer-offline --no-audit
       - name: 🕵️ npm test
         run: npm test
-      - name: 🚀 release
+      - name: 😘 npm run build
+        run: npm run build
+      - name: ✨ create release PR
+        uses: changesets/action@v1
+        with:
+          commit: "chore: 🚀 release"
+          title: "chore: 🚀 release"
+          publish: npm run release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: |
-          cd packages/react
-          npm run build
-          npx semantic-release

.github/workflows/integration_test_main.yml

@@ -0,0 +1,24 @@
+name: "🔬 PR: integration test"
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency:
+  group: integration_test_main.tests@${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  integration-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🧺 checkout
+        uses: actions/checkout@v4
+      - name: 🐱 use .nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "npm"
+      - name: 🧲 run integration test script
+        run: ./integration-test/run.sh

.github/workflows/integration_test_pr.yml

@@ -0,0 +1,30 @@
+name: "🔬 PR: integration test"
+
+on:
+  pull_request:
+    types: [labeled, ready_for_review, opened, synchronize, reopened]
+
+concurrency:
+  group: integration_test_pr.tests@${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  no-draft:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.draft == false
+    steps:
+      - run: echo "🗞"
+
+  integration-test:
+    runs-on: ubuntu-latest
+    needs: [no-draft]
+    steps:
+      - name: 🧺 checkout
+        uses: actions/checkout@v4
+      - name: 🐱 use .nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "npm"
+      - name: 🧲 run integration test script
+        run: ./integration-test/run.sh local

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 packages/react/dist/
 apps/**/dist/
+packages/**/dist/
 
 # misc
 .DS_Store

apps/docs/.eslintrc.json

@@ -1,4 +1,4 @@
 {
 	"root": true,
-	"extends": ["@uberschrift/eslint-config/base.js"]
+	"extends": ["@uberschrift/eslint-config/react.js"]
 }

apps/react-vite-chakra-ui-example/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+	"root": true,
+	"extends": ["@uberschrift/eslint-config/react.js"]
+}

apps/react-vite-example/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+	"root": true,
+	"extends": ["@uberschrift/eslint-config/react.js"]
+}

apps/react-vite-mui-example/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+	"root": true,
+	"extends": ["@uberschrift/eslint-config/react.js"]
+}

apps/vue-vite-example/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+	"root": true,
+	"extends": ["@uberschrift/eslint-config/vue.js"]
+}

apps/vue-vite-example/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

apps/vue-vite-example/README.md

@@ -0,0 +1,9 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended Setup
+
+-   [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+
+-   Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.

apps/vue-vite-example/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + Vue + TS</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>

apps/vue-vite-example/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "vue-vite-example",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vue-tsc && vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"vueberschrift": "*",
+		"vue": "^3.4.21"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-vue": "^5.0.4",
+		"typescript": "^5.2.2",
+		"vite": "^5.2.0",
+		"vue-tsc": "^2.0.6"
+	}
+}

apps/vue-vite-example/src/App.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Hx, HxBoundary } from "vueberschrift";
+</script>
+
+<template>
+	<main className="prose max-w-screen-lg m-auto py-8">
+		<Hx>Vite — Main Title (h1)</Hx>
+
+		<HxBoundary>
+			<p>
+				Lorem ipsum dolor sit amet convallis dictumst duis risus nulla
+				aliqua tortor.
+			</p>
+
+			<Hx>Chapter 1 (h2)</Hx>
+
+			<p>
+				Senectus netus aliquet nunc egestas habitasse sapien morbi eu
+				sagittis adipiscing. Maecenas diam tellus nulla ac incididunt
+				molestie libero.
+			</p>
+
+			<HxBoundary>
+				<Hx>Chapter 1.1 (h3)</Hx>
+				<p>
+					Lorem ipsum dolor sit amet pulvinar venenatis eiusmod
+					feugiat dapibus duis. Aenean fusce nunc hendrerit mollis
+					senectus consectetur magna fames at convallis.
+				</p>
+
+				<SubComponent />
+
+				<p>Lorem ipsum dolor sit amet ac consequat netus mi.</p>
+			</HxBoundary>
+
+			<Hx>Chapter 2 (h2)</Hx>
+
+			<p>
+				Urna senectus lobortis risus consequat laoreet quam volutpat
+				convallis. Fermentum ullamcorper duis vel consequat incididunt
+				donec nisl vestibulum. Auctor egestas pretium erat arcu
+				adipiscing eros et libero nunc.
+			</p>
+		</HxBoundary>
+	</main>
+</template>

apps/vue-vite-example/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import "./style.css";
+import App from "./App.vue";
+
+createApp(App).mount("#app");

apps/vue-vite-example/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

apps/vue-vite-example/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/vue-vite-example/tsconfig.json

@@ -0,0 +1,4 @@
+{
+	"extends": "@uberschrift/tsconfig/base.json",
+	"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

apps/vue-vite-example/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [vue()],
+});