@digitalservicebund/ris-ui 3.21.2 → 4.0.0

package/README.md

@@ -4,10 +4,9 @@
 
 ## Installation
 
-RIS UI contains three things:
+RIS UI contains two things:
 
 - a [theme](./src/primevue/) for [Vue 3](https://vuejs.org) components from [PrimeVue 4](https://primevue.org);
-- [custom components](./src/components/);
 - a [configuration](./src/tailwind/global.css) file for [Tailwind](https://tailwindcss.com) that includes design tokens, typography, and global component styles, ensuring consistency across custom UI and PrimeVue components.
 
 Vue, PrimeVue and Tailwind 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). To get started, install:
@@ -20,13 +19,7 @@ pnpm install vue primevue tailwindcss
 pnpm install @digitalservicebund/ris-ui
 ```
 
-### Vue (SPA with Vite, Vue CLI or similar)
-
-> [!NOTE]
->
-> If you're using Nuxt, follow the instructions for [Nuxt](#nuxt-setup) below instead.
-
-Import and apply the RIS UI theme and fonts where you set up your application (typically `main.ts`):
+Import and apply the RIS UI theme and fonts where you set up your application (typically `main.ts` or a [Nuxt plugin](https://nuxt.com/docs/4.x/directory-structure/app/plugins)):
 
 ```diff
   // main.ts
@@ -55,85 +48,6 @@ Then, extend your Tailwind configuration for RIS UI:
   /* other config and styles */
 ```
 
-### Nuxt setup
-
-If using Nuxt, skip the Vue setup above.
-
-Install the Nuxt PrimeVue module:
-
-```sh
-pnpm install @primevue/nuxt-module
-```
-
-Add the PrimeVue module and configure it in `nuxt.config.ts`:
-
-```diff
-  // nuxt.config.ts
-+ import tailwindcss from "@tailwindcss/vite";
-  export default defineNuxtConfig({
-    // your other configuration
-    modules: [
-+     "@primevue/nuxt-module",
-    ],
-+   primevue: {
-+      usePrimeVue: false, // configured in plugins/ris-ui.ts
-+   },
-    vite: {
-      plugins: [
-+       tailwindcss(),
-      ],
-    }
-  })
-```
-
-Add a new Nuxt plugin to configure PrimeVue:
-
-```typescript
-// plugins/ris-ui.ts
-import { RisUiTheme, RisUiLocale } from "@digitalservicebund/ris-ui/primevue";
-import PrimeVue from "primevue/config";
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(PrimeVue, {
-    pt: RisUiTheme,
-    unstyled: true,
-    locale: RisUiLocale.deDE,
-  });
-});
-```
-
-Continue with the next step, _Tailwind CSS Configuration_.
-
-## Getting started
-
-To get you started, here's an example how to use a RIS UI button in your ui component. The Storybook code snippet is hiding some essential parts from you. Here is an an example `StartPage.vue`:
-
-```vue
-<script lang="ts" setup>
-import { useRouter } from "vue-router";
-import Button from "primevue/button";
-import IconAdd from "~icons/material-symbols/add";
-
-const router = useRouter();
-</script>
-
-<template>
-  <Button
-    :disabled="false"
-    :loading="false"
-    :text="false"
-    label="Neue Dokumentationseinheit"
-    @click="router.push({ path: '/documentUnit/new' })"
-  >
-    <template #icon>
-      <IconAdd />
-    </template>
-  </Button>
-</template>
-```
-
-In addition to the installation steps, the icon is being provided by [unplugin-icons](https://www.npmjs.com/package/unplugin-icons) in conjunction with [@iconify-json/material-symbols](https://www.npmjs.com/package/@iconify-json/material-symbols).
-
 ## Development
 
 To make changes to RIS UI, you'll need the current [Node.js LTS](https://nodejs.org/en/download/package-manager) along with pnpm installed on your machine.
@@ -171,22 +85,20 @@ RIS UI uses the following tools:
 - [Vite](https://vitejs.dev/) as our dev server and bundler
 - [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
+- [Oxlint](https://oxc.rs/docs/guide/usage/linter.html) and [Oxfmt](https://oxc.rs/docs/guide/usage/formatter.html) for code consistency
 
 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/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                |
+| 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                |
 
 ### Tailwind IntelliSense
 
@@ -228,8 +140,8 @@ lefthook install
 
 When you make a commit now, Lefthook will ensure your changes and commit message adhere to our coding guidelines:
 
-- Code is formatted with Prettier
-- ESLint passes without warnings
+- Code is formatted
+- Linter passes without warnings
 - The commit message follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification. If you're making changes to a component, please use the component name as the scope (multiple scopes are allowed).
 
 Keep in mind that your commit messages will be used for generating changelogs and inferring version numbers when making a release. If you made multiple changes, please consider squashing them to keep the history, as well as the changelogs, tidy and readable.

package/dist/config/locale.d.ts

@@ -1,2 +1,2 @@
-import { PrimeVueLocaleOptions } from "primevue/config";
+import type { PrimeVueLocaleOptions } from "primevue/config";
 export declare const deDE: PrimeVueLocaleOptions;

package/dist/lib/tags.d.ts

@@ -12,7 +12,7 @@ export declare const html: (strings: TemplateStringsArray, ...values: unknown[])
  * Tagged template string for Tailwind classes. The tag itself doesn't do
  * anything, but using it will allow your editor to provide Tailwind
  * Intellisense for template strings in scripts, as well as automatic class
- * sorting via Prettier.
+ * sorting.
  *
  * ```ts
  * const classes = tw`px-16 bg-blue-200`

package/dist/primevue/autocomplete/autocomplete.d.ts

@@ -1,3 +1,3 @@
-import { AutoCompletePassThroughOptions } from "primevue/autocomplete";
+import type { AutoCompletePassThroughOptions } from "primevue/autocomplete";
 declare const autocomplete: AutoCompletePassThroughOptions;
 export default autocomplete;

package/dist/primevue/breadcrumb/breadcrumb.d.ts

@@ -1,3 +1,3 @@
-import { BreadcrumbPassThroughOptions } from "primevue/breadcrumb";
+import type { BreadcrumbPassThroughOptions } from "primevue/breadcrumb";
 declare const breadcrumb: BreadcrumbPassThroughOptions;
 export default breadcrumb;

package/dist/primevue/button/button.d.ts

@@ -1,3 +1,3 @@
-import { ButtonPassThroughOptions } from "primevue/button";
+import type { ButtonPassThroughOptions } from "primevue/button";
 declare const button: ButtonPassThroughOptions;
 export default button;

package/dist/primevue/checkbox/checkbox.d.ts

@@ -1,3 +1,3 @@
-import { CheckboxPassThroughOptions } from "primevue/checkbox";
+import type { CheckboxPassThroughOptions } from "primevue/checkbox";
 declare const checkbox: CheckboxPassThroughOptions;
 export default checkbox;

package/dist/primevue/chip/chip.d.ts

@@ -1,3 +1,3 @@
-import { ChipPassThroughOptions } from "primevue";
+import type { ChipPassThroughOptions } from "primevue";
 declare const chip: ChipPassThroughOptions;
 export default chip;

package/dist/primevue/confirmDialog/confirmDialog.d.ts

@@ -1,3 +1,3 @@
-import { ConfirmDialogPassThroughOptions } from "primevue/confirmdialog";
+import type { ConfirmDialogPassThroughOptions } from "primevue/confirmdialog";
 declare const confirmDialog: ConfirmDialogPassThroughOptions;
 export default confirmDialog;

package/dist/primevue/dataTable/dataTable.d.ts

@@ -1,3 +1,3 @@
-import { DataTablePassThroughOptions } from "primevue/datatable";
+import type { DataTablePassThroughOptions } from "primevue/datatable";
 declare const dataTable: DataTablePassThroughOptions;
 export default dataTable;

package/dist/primevue/dialog/dialog.d.ts

@@ -1,3 +1,3 @@
-import { DialogPassThroughOptions } from "primevue/dialog";
+import type { DialogPassThroughOptions } from "primevue/dialog";
 declare const dialog: DialogPassThroughOptions;
 export default dialog;

package/dist/primevue/fileUpload/fileUpload.d.ts

@@ -1,3 +1,3 @@
-import { FileUploadPassThroughOptions } from "primevue/fileupload";
+import type { FileUploadPassThroughOptions } from "primevue/fileupload";
 declare const fileUpload: FileUploadPassThroughOptions;
 export default fileUpload;