From b39ce856ade4d62d21f1f60ce500b0bc315e8c00 Mon Sep 17 00:00:00 2001 From: Andreas Philippi Date: Tue, 26 Nov 2024 11:37:22 +0100 Subject: [PATCH] docs: update outdated parts in readme + some clarifications --- README.md | 37 +++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 475b5ea..f4c5a8b 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,11 @@ ## Installation -RUI UI contains two things: +RUI UI contains three things: -- a theme for [Vue 3](https://vuejs.org) components from [PrimeVue 4](https://primevue.org); -- a preset and plugin for [Tailwind](https://tailwindcss.com) that sets some global styling and exposes the design tokens used by the theme, so you can build custom UI that looks consistent with the components. +- a [theme](./src/primevue/) for [Vue 3](https://vuejs.org) components from [PrimeVue 4](https://primevue.org); +- [custom components](./src/components/); +- a [preset and plugin](./src/tailwind/) for [Tailwind](https://tailwindcss.com) that sets some global styling and exposes the design tokens used by the theme, so you can build custom UI that looks consistent with the components. Vue and PrimeVue are required for RIS UI to work (you'll see a warning about missing peer dependencies if you're trying to use RIS UI without them). Tailwind is optional. To get started, install: @@ -21,6 +22,10 @@ npm install @digitalservicebund/ris-ui ### Vue setup +> [!NOTE] +> +> If you're using Nuxt, follow the instructions for [Nuxt](#nuxt-setup) below instead. + Import and apply the RIS UI theme, styling, and fonts where you set up your application (typically `main.ts`): ```diff @@ -89,7 +94,7 @@ Finally, add the styles (e.g. `assets/main.css`): If not using Tailwind, you may also add these styles directly to the `css` section of `nuxt.config.ts`. -## Tailwind usage +## With Tailwind If you want, also install the Tailwind preset (for colors, spacings, etc.) and plugin (for typography classes, etc.): @@ -107,11 +112,9 @@ If you want, also install the Tailwind preset (for colors, spacings, etc.) and p To avoid issues with conflicting `@layer` directives, make sure to integrate the `postcss-import` module in your PostCSS configuration: -See https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files - -### Using Nuxt +See [Adding custom styles - Tailwind CSS](https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files). -You may add the `postcss-import` module to your `nuxt.config.ts` file: +If you're using Nuxt, you may add the `postcss-import` module to your `nuxt.config.ts` file: ```diff // nuxt.config.ts @@ -162,19 +165,21 @@ RIS UI uses the following tools: - [Unplugin Icons](https://github.com/unplugin/unplugin-icons) for providing SVG icons as components - [TypeScript](https://www.typescriptlang.org/) - [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) for code consistency +- [Vitest](https://vitest.dev) as our test runner You can find more in [package.json](./package.json), but the above are the ones you'll work with the most. In terms of files and folders, you'll find: -| Folder | Contents | -| -------------- | ----------------------------------------- | -| (root) | General docs and configuration | -| `.github/` | GitHub Actions configuration | -| `.storybook/` | Storybook setup | -| `src/primevue` | The RIS UI preset for PrimeVue | -| `src/tailwind` | The RIS UI preset and plugin for Tailwind | -| `src/lib` | Internal tools and helpers | +| Folder | Contents | +| ---------------- | ----------------------------------------- | +| (root) | General docs and configuration | +| `.github/` | GitHub Actions configuration | +| `.storybook/` | Storybook setup | +| `src/components` | Custom Vue components | +| `src/primevue` | The RIS UI preset for PrimeVue | +| `src/tailwind` | The RIS UI preset and plugin for Tailwind | +| `src/lib` | Internal tools and helpers | ### Tailwind IntelliSense