diff --git a/.changeset/readme-package-managers.md b/.changeset/readme-package-managers.md new file mode 100644 index 0000000..605331e --- /dev/null +++ b/.changeset/readme-package-managers.md @@ -0,0 +1,14 @@ +--- +'@wirecore/wirelayer-vue': patch +'@wirecore/wirelayer-react': patch +'@wirecore/wirelayer-native': patch +'@wirecore/wirelayer-css': patch +'@wirecore/wirelayer-recipes': patch +'@wirecore/wirelayer-tokens': patch +'@wirecore/wirelayer-blocks-vue': patch +'@wirecore/wirelayer-blocks-react': patch +'@wirecore/wirelayer-mcp': patch +--- + +READMEs and the guide "Getting started": installation with npm, pnpm, Yarn and Bun (React Native: also +`npx expo install`). diff --git a/README.md b/README.md index 318a42e..b7dbc0c 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,87 @@ - +

+ +

+ +

WireLayer

+ +

+ Accessible components for Vue, React, React Native and HTML – one look, one API.
+ Built on Tailwind CSS v4, Ark UI, Uniwind and Lucide · WCAG 2.2 AA +

+ +

+ Storybook · + Quick start · + Components · + llms.txt · + Contributing +

+ +

+ npm version + CI + WCAG 2.2 AA + License: MIT +

+ +## Highlights + +- **One API, four targets:** Vue and React with the same props and the same DOM (checked by parity tests), React Native + with the prop names of the web, `.wc-*` classes for HTML without JavaScript. The packages are called + `@wirecore/wirelayer-*`. +- **Accessible:** WCAG 2.2 AA – keyboard, focus, roles and contrast; axe runs on every story in every mode and theme. +- **Light, dark and themes** from design tokens; every part of a component can be restyled. +- **Only what you use:** large features live in subpaths with optional peer dependencies, and the CSS can contain only + the classes of the components you import. +- **14 languages** with right-to-left support, and docs for AI assistants: `llms.txt` in every package and an MCP + server. + +## Quick start + +**1. Install** – Tailwind CSS v4.1 or newer is required (Vue 3.5+ or React 19+). -# WireLayer Component Library +```sh +npm install @wirecore/wirelayer-vue +pnpm add @wirecore/wirelayer-vue +yarn add @wirecore/wirelayer-vue +bun add @wirecore/wirelayer-vue +``` -Component library for **Vue**, **React**, **React Native** and **HTML**, built on **Tailwind CSS v4**, **Ark UI**, -**Uniwind** and **Lucide** – one look, one API, accessible according to WCAG 2.2 AA. The packages are called -`@wirecore/wirelayer-*`. +For React use `@wirecore/wirelayer-react`, for React Native / Expo `@wirecore/wirelayer-native` (its peer dependencies: +[packages/native](packages/native/README.md)). -## Installation +**2. Add the styles** after Tailwind: -Tailwind CSS v4.1 or newer is required. +```css +@import 'tailwindcss'; +@import '@wirecore/wirelayer-vue/styles.css'; /* or @wirecore/wirelayer-react/styles.css */ +``` -```sh -pnpm add @wirecore/wirelayer-vue # or -pnpm add @wirecore/wirelayer-react # or -pnpm add @wirecore/wirelayer-native # React Native / Expo +For a smaller CSS file with only the classes of the components you use, add the Vite plugin and import `theme.css` +instead – it adds the classes of every WireLayer import it finds in your sources: + +```ts +// vite.config.ts – before Tailwind's plugin +import tailwindcss from '@tailwindcss/vite'; +import { wirelayer } from '@wirecore/wirelayer-recipes/vite'; + +export default { plugins: [wirelayer(), tailwindcss()] }; ``` ```css @import 'tailwindcss'; -@import '@wirecore/wirelayer-vue/styles.css'; /* or @wirecore/wirelayer-react/styles.css */ +@import '@wirecore/wirelayer-vue/theme.css'; +@import '@wirecore/wirelayer-vue/fonts.css'; ``` -For a smaller CSS file, import `styles-core.css` instead and only the classes of the components you use -(`@wirecore/wirelayer-vue/sources/Button.css` …) – Storybook › Getting started › Welcome. +**3. Use the components** – the same components and props in Vue and React (`v-model` ↔ `value`/`onChange`): ```vue ``` -Setup for Nuxt, Next.js, Expo and plain HTML, themes and customization: Storybook › Getting started. +```tsx +import { Button, Field, Input } from '@wirecore/wirelayer-react'; +import { useState } from 'react'; + +export function Signup() { + const [email, setEmail] = useState(''); + return ( + <> + + setEmail(event.target.value)} type="email" /> + + + + ); +} +``` + +Setup for Nuxt, Next.js, Expo and plain HTML, themes and customization: +[Storybook › Getting started](https://wirecore.github.io/WireLayer/?path=/docs/getting-started-welcome--docs). ## Components +**Vue and React** – around 180 components with an identical prop API and identical DOM; **React Native** around 145; +**HTML** the `.wc-*` classes; plus **page blocks**. All components and props: +[Storybook](https://wirecore.github.io/WireLayer/), `llms.txt` (also inside each package: +`node_modules/@wirecore/wirelayer-vue/llms.txt` …) or the MCP server `@wirecore/wirelayer-mcp` for AI assistants +(`claude mcp add wirelayer -- npx -y -p @wirecore/wirelayer-mcp wirelayer-mcp`). + +
+Overview of the components + **Vue and React** – around 180 components with an identical prop API and identical DOM, among them: - **Forms:** Field, Input, Select/MultiSelect/Combobox/Autocomplete (arbitrary values, groups, search, loading more), @@ -68,13 +150,15 @@ recipes. ModeToggle, AuthForm, AuthLayout and ConditionBuilder (nested AND/OR rules, also as the editor of the advanced DataTable filter: `renderAdvancedFilter` or the slot `#advancedFilter`). -All components and props: Storybook and `llms.txt` (also inside each package: `node_modules/@wirecore/wirelayer-vue/llms.txt` …), or the MCP server `@wirecore/wirelayer-mcp` for AI assistants -(`claude mcp add wirelayer -- npx -y -p @wirecore/wirelayer-mcp wirelayer-mcp`). +
### Subpaths with optional peer dependencies What a large library needs lives in its own subpaths – it only ends up in the bundle when the app imports it, and then -needs the respective peer dependency: +needs the respective peer dependency. + +
+Subpaths and their peer dependencies | Subpath | Vue / React | React Native (`@wirecore/wirelayer-native/…`) | | ----------------- | ------------------------------------------------------------------ | ---------------------------------------------------- | @@ -88,6 +172,11 @@ needs the respective peer dependency: | `/locales/` | Language modules (see below) | Language modules | | `/expo-*` | – | `expo-sharing`, `expo-clipboard`, file/image pickers | +
+ +Setup of the PDF viewer (pdf.js stylesheet and worker, license **Apache-2.0**): +[Storybook › Getting started › PDF viewer](https://wirecore.github.io/WireLayer/?path=/docs/getting-started-welcome--docs#pdf-viewer). + ## Languages English (default) is built in. More languages are available as separate modules and only end up in the bundle when an @@ -113,14 +202,6 @@ English; the writing direction (`ar`, `he`, `fa`, `ur` → right to left) follow complete `Translations` object – the TypeScript type reports missing texts. The bundled translations should be reviewed by native speakers before use. -## PDF viewer - -`PdfViewer` from `@wirecore/wirelayer-vue/pdf` or `@wirecore/wirelayer-react/pdf` is built on `pdfjs-dist` (optional -peer dependency, license **Apache-2.0**, compatible with MIT projects). The app includes -`pdfjs-dist/legacy/web/pdf_viewer.css` once and passes the URL of the worker (`workerSrc`) – recipes for Vite, Nuxt and -Next.js in Storybook › Getting started. The sample PDFs of the stories (`apps/storybook/public/pdf`) are generated by -`node apps/storybook/scripts/sample-pdf.ts`. - ## Development Docker is the only requirement – Node and pnpm run in the container. @@ -140,6 +221,9 @@ docker compose up | http://localhost:3000 | Nuxt demo app (`docker compose --profile apps up`) | | http://localhost:3001 | Next.js demo app (`docker compose --profile apps up`) | +The sample PDFs of the stories (`apps/storybook/public/pdf`) are generated by +`node apps/storybook/scripts/sample-pdf.ts`. + Commands, the workflow for new components and the Definition of Done: [CONTRIBUTING.md](CONTRIBUTING.md). Background: [architecture and decisions](docs/architecture.md), [accessibility](docs/accessibility.md), [implementation notes](docs/implementation-notes.md), [roadmap and known limitations](docs/roadmap.md). diff --git a/apps/storybook/src/Introduction.mdx b/apps/storybook/src/Introduction.mdx index 3c39775..e09248c 100644 --- a/apps/storybook/src/Introduction.mdx +++ b/apps/storybook/src/Introduction.mdx @@ -13,14 +13,17 @@ are shown here with react-native-web. ## Installation -The packages are published on npm: +The packages are published on npm – install them with npm, pnpm, Yarn or Bun: ```sh -pnpm add @wirecore/wirelayer-vue # or -pnpm add @wirecore/wirelayer-react # or -pnpm add @wirecore/wirelayer-native +npm install @wirecore/wirelayer-vue +pnpm add @wirecore/wirelayer-vue +yarn add @wirecore/wirelayer-vue +bun add @wirecore/wirelayer-vue ``` +The same for `@wirecore/wirelayer-react` and `@wirecore/wirelayer-native` (React Native / Expo). + ## Adding the styles Tailwind CSS v4.1 or newer is required. The library ships the theme, the fonts and the classes of the components: diff --git a/packages/blocks-react/README.md b/packages/blocks-react/README.md index 0189810..b70be4d 100644 --- a/packages/blocks-react/README.md +++ b/packages/blocks-react/README.md @@ -8,8 +8,13 @@ Page blocks for React built on `@wirecore/wirelayer-react`: SiteHeader, CtaSecti ## Installation +With npm, pnpm, Yarn or Bun: + ```sh +npm install @wirecore/wirelayer-blocks-react @wirecore/wirelayer-react pnpm add @wirecore/wirelayer-blocks-react @wirecore/wirelayer-react +yarn add @wirecore/wirelayer-blocks-react @wirecore/wirelayer-react +bun add @wirecore/wirelayer-blocks-react @wirecore/wirelayer-react ``` ## Usage diff --git a/packages/blocks-vue/README.md b/packages/blocks-vue/README.md index 38a58ab..d987621 100644 --- a/packages/blocks-vue/README.md +++ b/packages/blocks-vue/README.md @@ -8,8 +8,13 @@ Page blocks for Vue built on `@wirecore/wirelayer-vue`: SiteHeader, CtaSection, ## Installation +With npm, pnpm, Yarn or Bun: + ```sh +npm install @wirecore/wirelayer-blocks-vue @wirecore/wirelayer-vue pnpm add @wirecore/wirelayer-blocks-vue @wirecore/wirelayer-vue +yarn add @wirecore/wirelayer-blocks-vue @wirecore/wirelayer-vue +bun add @wirecore/wirelayer-blocks-vue @wirecore/wirelayer-vue ``` ## Usage diff --git a/packages/css/README.md b/packages/css/README.md index 0d8b514..b05f374 100644 --- a/packages/css/README.md +++ b/packages/css/README.md @@ -8,8 +8,13 @@ The WireLayer components as plain CSS classes (`.wc-*`) for HTML and server temp ## Installation +With npm, pnpm, Yarn or Bun: + ```sh +npm install @wirecore/wirelayer-css pnpm add @wirecore/wirelayer-css +yarn add @wirecore/wirelayer-css +bun add @wirecore/wirelayer-css ``` ## Usage diff --git a/packages/mcp/data/components.json b/packages/mcp/data/components.json index 4ea8150..2f8bcdb 100644 --- a/packages/mcp/data/components.json +++ b/packages/mcp/data/components.json @@ -37567,7 +37567,7 @@ { "id": "introduction-installation", "title": "Installation", - "text": "The packages are published on npm:\n\n```sh\npnpm add @wirecore/wirelayer-vue # or\npnpm add @wirecore/wirelayer-react # or\npnpm add @wirecore/wirelayer-native\n```" + "text": "The packages are published on npm – install them with npm, pnpm, Yarn or Bun:\n\n```sh\nnpm install @wirecore/wirelayer-vue\npnpm add @wirecore/wirelayer-vue\nyarn add @wirecore/wirelayer-vue\nbun add @wirecore/wirelayer-vue\n```\n\nThe same for `@wirecore/wirelayer-react` and `@wirecore/wirelayer-native` (React Native / Expo)." }, { "id": "introduction-adding-the-styles", diff --git a/packages/native/README.md b/packages/native/README.md index 4bdadad..6a8fd8b 100644 --- a/packages/native/README.md +++ b/packages/native/README.md @@ -8,10 +8,17 @@ Around 145 accessible React Native (Expo) components with the prop names of the ## Installation +With npm, pnpm, Yarn or Bun: + ```sh +npm install @wirecore/wirelayer-native uniwind tailwindcss lucide-react-native react-native-svg expo-font pnpm add @wirecore/wirelayer-native uniwind tailwindcss lucide-react-native react-native-svg expo-font +yarn add @wirecore/wirelayer-native uniwind tailwindcss lucide-react-native react-native-svg expo-font +bun add @wirecore/wirelayer-native uniwind tailwindcss lucide-react-native react-native-svg expo-font ``` +In an Expo app, `npx expo install @wirecore/wirelayer-native uniwind tailwindcss lucide-react-native react-native-svg expo-font` picks the versions that fit your SDK. + ## Usage ```css diff --git a/packages/react/README.md b/packages/react/README.md index 6c16274..84292ca 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -8,8 +8,13 @@ Around 180 accessible React components on Ark UI and Tailwind CSS v4 – forms, ## Installation +With npm, pnpm, Yarn or Bun: + ```sh +npm install @wirecore/wirelayer-react pnpm add @wirecore/wirelayer-react +yarn add @wirecore/wirelayer-react +bun add @wirecore/wirelayer-react ``` ## Usage diff --git a/packages/recipes/README.md b/packages/recipes/README.md index ce291d8..693b4b3 100644 --- a/packages/recipes/README.md +++ b/packages/recipes/README.md @@ -8,8 +8,13 @@ Framework-agnostic recipes (tailwind-variants) and logic of the WireLayer compon ## Installation +With npm, pnpm, Yarn or Bun: + ```sh +npm install @wirecore/wirelayer-recipes pnpm add @wirecore/wirelayer-recipes +yarn add @wirecore/wirelayer-recipes +bun add @wirecore/wirelayer-recipes ``` ## Usage diff --git a/packages/tokens/README.md b/packages/tokens/README.md index 6f60ae8..1926cb5 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -8,8 +8,13 @@ Design tokens of WireLayer – colors, radii, typography, size grid, local fonts ## Installation +With npm, pnpm, Yarn or Bun: + ```sh +npm install @wirecore/wirelayer-tokens pnpm add @wirecore/wirelayer-tokens +yarn add @wirecore/wirelayer-tokens +bun add @wirecore/wirelayer-tokens ``` ## Usage diff --git a/packages/vue/README.md b/packages/vue/README.md index 8e6a9a8..cf5fd09 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -8,8 +8,13 @@ Around 180 accessible Vue 3 components on Ark UI and Tailwind CSS v4 – forms, ## Installation +With npm, pnpm, Yarn or Bun: + ```sh +npm install @wirecore/wirelayer-vue pnpm add @wirecore/wirelayer-vue +yarn add @wirecore/wirelayer-vue +bun add @wirecore/wirelayer-vue ``` ## Usage