From 3589c687b3d125568d465f2450e544ba1cf4c4a8 Mon Sep 17 00:00:00 2001 From: Philipp Reinking Date: Sun, 11 Oct 2026 17:49:37 +0200 Subject: [PATCH 1/2] docs: rewrite the README for any package manager (BITS-221) Install for npm, pnpm, yarn and bun; Tailwind 3 setup, icons and a first component for apps; develop and release steps from package.json and release.sh. Co-Authored-By: Claude Opus 5.5 --- README.md | 117 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 106 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 6ac42d9..a558962 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,119 @@ -# ui +# @deck9/ui -## Project setup +Vue 3 components for Deck9 apps such as [Input](https://github.com/deck9/input), styled with Tailwind CSS 3. Storybook is the component reference: run `npm run storybook` in this repo. + +## Install + +```sh +npm install @deck9/ui +pnpm add @deck9/ui +yarn add @deck9/ui +bun add @deck9/ui ``` -yarn install + +Vue 3.3 or newer is a peer dependency. Pre-releases are on the `next` tag: `npm install @deck9/ui@next`. + +The steps below use npm. With another package manager, swap `npm install` for `pnpm add`, `yarn add` or `bun add`. + +## Use it in an app + +### Tailwind + +The package ships no CSS: its components use Tailwind 3 classes, and the app's Tailwind build creates them. In a new app, set up Tailwind 3: + +```sh +npm install -D tailwindcss@3 postcss autoprefixer @tailwindcss/forms +npx tailwindcss init -p ``` -### Compiles and hot-reloads for development +In `tailwind.config.js`, add the package's bundle to `content`, plus the `grey` color and the forms plugin the components use: + +```js +import colors from "tailwindcss/colors"; +import forms from "@tailwindcss/forms"; + +export default { + content: [ + "./index.html", + "./src/**/*.{vue,js,ts}", + "./node_modules/@deck9/ui/dist/src/ui.mjs", + ], + theme: { + extend: { + colors: { grey: colors.slate }, + }, + }, + plugins: [forms], +}; ``` -yarn serve + +Put Tailwind's layers in the app's main CSS file (in a Vite app: `src/style.css`): + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; ``` -### Compiles and minifies for production +### Icons + +The components draw icons with Font Awesome 6 and register only the few they use themselves. The app registers every other icon. Install Font Awesome 6, so the app and the components share one copy: + +```sh +npm install @fortawesome/fontawesome-svg-core@6 @fortawesome/free-solid-svg-icons@6 ``` -yarn build + +Register the icons once before the app mounts, for example in `src/main.js`: + +```js +import { library } from "@fortawesome/fontawesome-svg-core"; +import { faRocket } from "@fortawesome/free-solid-svg-icons"; + +library.add(faRocket); +``` + +Brand icons work the same way with `@fortawesome/free-brands-svg-icons@6`. + +### A first component + +```vue + + + ``` -### Lints and fixes files +Icon names are Font Awesome's names in kebab-case, without `fa`: `faChevronDown` is `chevron-down`. + +## Develop + +The repo uses npm (`package-lock.json`) and the Node version in `.nvmrc`. + +```sh +npm ci +npm run storybook # Storybook on http://localhost:6006 +npm test # Vitest +npm run lint # ESLint +npm run check # type check +npm run build # builds dist/, the files npm publishes ``` -yarn lint + +## Release + +Run `release.sh` on main. It takes the same arguments as `npm version`: + +```sh +./release.sh preminor --preid next # 0.17.0 → 0.18.0-next.0 +./release.sh prerelease # 0.18.0-next.0 → 0.18.0-next.1 +./release.sh minor # 0.18.0-next.1 → 0.18.0 +./release.sh patch # 0.18.0 → 0.18.1 +./release.sh major # 0.18.1 → 1.0.0 ``` -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +It pulls main, builds, bumps the version, pushes the commit and tag, and creates a GitHub release. You need push rights on main and a logged-in `gh`. The GitHub release starts the publish workflow, which publishes to npm through trusted publishing, without an npm token. + +A version with a dash, like `0.18.0-next.1`, is a pre-release: it goes to the `next` tag. Every other version goes to `latest`, which is what `npm install @deck9/ui` installs. From be13e045913956572ca54bee46051a237a86db42 Mon Sep 17 00:00:00 2001 From: Philipp Reinking Date: Sun, 11 Oct 2026 17:57:55 +0200 Subject: [PATCH 2/2] docs: set darkMode to class in the README's Tailwind config (BITS-221) Tailwind 3 defaults to "media", so the components' dark: classes turned D9Input dark slate on a white page whenever the computer was in dark mode. Co-Authored-By: Claude Opus 5.5 --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a558962..8275b8f 100644 --- a/README.md +++ b/README.md @@ -26,13 +26,14 @@ npm install -D tailwindcss@3 postcss autoprefixer @tailwindcss/forms npx tailwindcss init -p ``` -In `tailwind.config.js`, add the package's bundle to `content`, plus the `grey` color and the forms plugin the components use: +In `tailwind.config.js`, add the package's bundle to `content`, plus the `grey` color and the forms plugin the components use. `darkMode: "class"` keeps the components light until the app sets a `dark` class. Without it, they turn dark whenever the computer is in dark mode. ```js import colors from "tailwindcss/colors"; import forms from "@tailwindcss/forms"; export default { + darkMode: "class", content: [ "./index.html", "./src/**/*.{vue,js,ts}",