@digitalservicebund/ris-ui 0.0.1

package/README.md

@@ -0,0 +1,150 @@
+# RIS UI
+
+**Component library for NeuRIS** | 👀 [Demo](https://digitalservicebund.github.io/ris-ui) | 🤖 [PrimeVue Docs](https://primevue.org)
+
+## Installation
+
+RUI UI contains two 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.
+
+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:
+
+```sh
+# Vue and PrimeVue if you haven't installed them already. Tailwind is optional.
+npm install vue primevue tailwindcss
+
+# RIS UI
+npm install @digitalservicebund/ris-ui
+```
+
+## Usage
+
+Import and apply the RIS UI theme and styling where you set up your application (typically `main.ts`):
+
+```diff
+  // main.ts
+  import { createApp } from "vue";
+  import PrimeVue from "primevue/config";
++ import { RisUiTheme } from "@digitalservicebund/ris-ui/primevue";
++ import "@digitalservicebund/ris-ui/primevue/style.css";
+
+  const app = createApp().use(PrimeVue, {
++   unstyled: true,
++   pt: RisUiTheme,
+  })
+```
+
+If you want, also install the Tailwind preset (for colors, spacings, etc.) and plugin (for typography classes, etc.):
+
+```diff
+  // tailwind.config.js
++ import { RisUiPreset, RisUiPlugin } from "@digitalservicebund/ris-ui/tailwind";
+
+  export default {
++   presets: [RisUiPreset],
++   plugins: [RisUiPlugin],
+
+    // your other configuration
+  };
+```
+
+## Development
+
+If you want to make changes to RIS UI, you'll need the current [Node.js LTS](https://nodejs.org/en/download/package-manager) as well as NPM installed on your machine.
+
+To get started, first clone this repository:
+
+```sh
+git clone https://github.com/digitalservicebund/ris-ui.git
+```
+
+Then install dependencies:
+
+```sh
+npm install
+```
+
+You can now run a local preview to see any changes you make to the code:
+
+```sh
+npm run storybook
+```
+
+Check out [package.json](./package.json) for additional scripts.
+
+### Repository contents
+
+RIS UI uses the following tools:
+
+- [Storybook](https://storybook.js.org/), a playground for previewing components and styling
+- [Tailwind](https://tailwindcss.com/) for styling
+- [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
+
+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                |
+
+### Tailwind IntelliSense
+
+If you're using VS Code with the [official Tailwind extension](https://tailwindcss.com/docs/editor-setup), you can get autocompletions and more by adding this to your VS Code settings:
+
+```jsonc
+{
+  // other settings
+  "tailwindCSS.experimental.classRegex": ["tw`([^`]*)`"],
+}
+```
+
+This will detect Tailwind CSS classes in template strings tagged with `tw` such as:
+
+```ts
+import { tw } from "@/lib/tags";
+
+const classes = tw`bg-blue-200 px-16`;
+```
+
+See [tags.ts](./src/lib/tags.ts) for more information.
+
+### Committing
+
+Before making your first commit, you'll need some additional prerequisites installed. These help us with code consistency and quality:
+
+- [GitHub CLI](https://cli.github.com/): Used for checking the pipeline status before pushing
+- [jq](https://jqlang.github.io/jq/): Used by our license check, which ensures all our dependencies use [allowed licenses](./allowed-licenses.json) only
+- [Lefthook](https://github.com/evilmartians/lefthook): Runs Git commit hooks
+- [Talisman](https://github.com/thoughtworks/talisman): Validates you're not accidentially committing secrets
+
+Once they're installed, run:
+
+```sh
+# In ./ris-ui
+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
+- 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).
+
+### Making a release
+
+> 🚜 Under construction
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md).

package/dist/lib/tags.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Tagged template string for HTML. The tag itself doesn't do anything, but
+ * using it will allow your editor to provide HTML-features for template
+ * strings in scripts, e.g. stories:
+ *
+ * ```ts
+ * const template = html`<div>Hello world</div>`
+ * ```
+ */
+export declare const html: (strings: TemplateStringsArray, ...expressions: unknown[]) => string;
+/**
+ * Tagges 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.
+ *
+ * ```ts
+ * const classes = tw`px-16 bg-blue-200`
+ * ```
+ */
+export declare const tw: (strings: TemplateStringsArray, ...expressions: unknown[]) => string;

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

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

package/dist/primevue/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c={root:({props:e,context:o,instance:l})=>{let t,r,n,a,s,u;return l.hasIcon&&e.size==="large"&&e.label&&(e.iconPos==="left"?t="pl-20 pr-24 gap-8":e.iconPos==="right"&&(t="pl-24 pr-20 gap-8")),l.hasIcon&&(!e.size||e.size==="small")&&e.label&&(e.iconPos==="left"?t="pl-12 pr-16 gap-4":e.iconPos==="right"&&(t="pl-16 pr-12 gap-4")),l.hasIcon&&!e.label&&(t="p-0 gap-0"),e.size==="large"?r=e.label?"py-20 px-24 text-[1.125rem] min-h-64":"w-64 h-64":r=e.label?"py-8 px-16 text-base min-h-48":"w-48 h-48",e.severity==="primary"&&(o.disabled?n="bg-gray-400 cursor-not-allowed text-gray-600 border-transparent":n="bg-blue-800 border-transparent text-white hover:bg-blue-700 active:bg-blue-500 active:text-blue-800 focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-4"),e.severity==="secondary"&&(o.disabled?a="bg-white cursor-not-allowed text-blue-800 text-opacity-50 border-blue-800 border-opacity-50":a="bg-white text-blue-800 border-solid border-blue-800 hover:bg-gray-200 active:bg-white active:text-blue-800 active:border-transparent focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-2 focus:bg-gray-200"),e.severity==="ghost"&&(o.disabled?s="cursor-not-allowed text-gray-800 text-opacity-50 border-transparent":s="bg-transparent text-blue-800 border-transparent hover:bg-white hover:border-gray-500 hover:border-2 hover:border-solid active:bg-white active:border-transparent focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-4 focus:bg-white focus:border-gray-500 focus:border-2 focus:border-solid"),l.hasIcon&&(e.iconPos==="left"?u="flex-row":e.iconPos==="right"&&(u="flex-row-reverse")),{class:["inline-flex","items-center","justify-center","font-bold","text-center","max-w-full","leading-24","rounded-none","box-border","border","border-2",!o.disabled&&"focus:outline-none focus:ring-4 focus:ring-offset-4",!e.size&&"py-8 px-16 text-base min-h-48",t,r,n,a,s,u]}},label:({props:e})=>({class:[{underline:e.severity==="ghost"},{"sr-only":!e.label}]})},g=(e,...o)=>{let l=e[0];for(let t=1,r=e.length;t<r;t++)l+=o[t-1],l+=e[t];return l},i=g,f={root:{class:i`has-[input:read-only]:curser-not-allowed inline-flex items-center gap-4 border-2 border-blue-800 bg-white px-16 py-0 outline-4 -outline-offset-4 outline-blue-800 has-[[aria-invalid]]:border-red-800 has-[input:disabled]:border-blue-500 has-[input:read-only]:border-blue-300 has-[[aria-invalid]]:bg-red-200 has-[input:disabled]:bg-white has-[input:read-only]:bg-blue-300 has-[[data-size=large]]:px-24 has-[input:disabled]:text-blue-500 has-[input:disabled]:outline-none has-[:focus]:outline has-[:hover]:outline has-[[aria-invalid]]:outline-red-800`}},h={root:{class:i`m-0 p-0`}},y={root:({props:e,parent:o})=>{const l=i`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`,t=i`[&[type=password]:not(:placeholder-shown)]:text-[28px] [&[type=password]:not(:placeholder-shown)]:tracking-[4px] [&[type=password]]:w-full`,r=o.instance.$name==="InputGroup",n=i`bg-transparent placeholder:text-gray-900 focus:outline-none`,a=i`w-full`,s=i`ris-body2-regular h-48 px-16 py-4`,u=i`ris-body1-regular h-64 px-24 py-4`,d=i`ris-body2-regular h-[44px] p-0`,b=i`ris-body1-regular h-[60px] p-0`;return{class:{[l]:!r,[n]:r,[a]:!!e.fluid,[t]:!0,[s]:(!e.size||e.size==="small")&&!r,[d]:(!e.size||e.size==="small")&&r,[u]:e.size==="large"&&!r,[b]:e.size==="large"&&r},"data-size":e.size??"small"}}},x={},v={button:c,inputText:y,inputGroup:f,inputGroupAddon:h,password:x};exports.RisUi=v;

package/dist/primevue/index.d.ts

@@ -0,0 +1,8 @@
+import "./global.css";
+export declare const RisUi: {
+    button: import("primevue/button").ButtonPassThroughOptions<any>;
+    inputText: import("primevue/inputtext").InputTextPassThroughOptions<any>;
+    inputGroup: import("primevue/inputgroup").InputGroupPassThroughOptions;
+    inputGroupAddon: import("primevue/inputgroupaddon").InputGroupAddonPassThroughOptions;
+    password: import("primevue/password").PasswordPassThroughOptions;
+};

package/dist/primevue/index.js

@@ -0,0 +1,75 @@
+const c = {
+  root: ({ props: e, context: o, instance: l }) => {
+    let r, t, n, a, s, u;
+    return l.hasIcon && e.size === "large" && e.label && (e.iconPos === "left" ? r = "pl-20 pr-24 gap-8" : e.iconPos === "right" && (r = "pl-24 pr-20 gap-8")), l.hasIcon && (!e.size || e.size === "small") && e.label && (e.iconPos === "left" ? r = "pl-12 pr-16 gap-4" : e.iconPos === "right" && (r = "pl-16 pr-12 gap-4")), l.hasIcon && !e.label && (r = "p-0 gap-0"), e.size === "large" ? t = e.label ? "py-20 px-24 text-[1.125rem] min-h-64" : "w-64 h-64" : t = e.label ? "py-8 px-16 text-base min-h-48" : "w-48 h-48", e.severity === "primary" && (o.disabled ? n = "bg-gray-400 cursor-not-allowed text-gray-600 border-transparent" : n = "bg-blue-800 border-transparent text-white hover:bg-blue-700 active:bg-blue-500 active:text-blue-800 focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-4"), e.severity === "secondary" && (o.disabled ? a = "bg-white cursor-not-allowed text-blue-800 text-opacity-50 border-blue-800 border-opacity-50" : a = "bg-white text-blue-800 border-solid border-blue-800 hover:bg-gray-200 active:bg-white active:text-blue-800 active:border-transparent focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-2 focus:bg-gray-200"), e.severity === "ghost" && (o.disabled ? s = "cursor-not-allowed text-gray-800 text-opacity-50 border-transparent" : s = "bg-transparent text-blue-800 border-transparent hover:bg-white hover:border-gray-500 hover:border-2 hover:border-solid active:bg-white active:border-transparent focus:outline-none focus:ring-blue-800 focus:ring-4 focus:ring-offset-4 focus:bg-white focus:border-gray-500 focus:border-2 focus:border-solid"), l.hasIcon && (e.iconPos === "left" ? u = "flex-row" : e.iconPos === "right" && (u = "flex-row-reverse")), {
+      class: [
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "font-bold",
+        "text-center",
+        "max-w-full",
+        "leading-24",
+        "rounded-none",
+        "box-border",
+        "border",
+        "border-2",
+        !o.disabled && "focus:outline-none focus:ring-4 focus:ring-offset-4",
+        !e.size && "py-8 px-16 text-base min-h-48",
+        r,
+        t,
+        n,
+        a,
+        s,
+        u
+      ]
+    };
+  },
+  label: ({ props: e }) => ({
+    class: [
+      { underline: e.severity === "ghost" },
+      { "sr-only": !e.label }
+    ]
+  })
+}, g = (e, ...o) => {
+  let l = e[0];
+  for (let r = 1, t = e.length; r < t; r++)
+    l += o[r - 1], l += e[r];
+  return l;
+}, i = g, f = {
+  root: {
+    class: i`has-[input:read-only]:curser-not-allowed inline-flex items-center gap-4 border-2 border-blue-800 bg-white px-16 py-0 outline-4 -outline-offset-4 outline-blue-800 has-[[aria-invalid]]:border-red-800 has-[input:disabled]:border-blue-500 has-[input:read-only]:border-blue-300 has-[[aria-invalid]]:bg-red-200 has-[input:disabled]:bg-white has-[input:read-only]:bg-blue-300 has-[[data-size=large]]:px-24 has-[input:disabled]:text-blue-500 has-[input:disabled]:outline-none has-[:focus]:outline has-[:hover]:outline has-[[aria-invalid]]:outline-red-800`
+  }
+}, h = {
+  root: {
+    class: i`m-0 p-0`
+  }
+}, y = {
+  root: ({ props: e, parent: o }) => {
+    const l = i`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`, r = i`[&[type=password]:not(:placeholder-shown)]:text-[28px] [&[type=password]:not(:placeholder-shown)]:tracking-[4px] [&[type=password]]:w-full`, t = o.instance.$name === "InputGroup", n = i`bg-transparent placeholder:text-gray-900 focus:outline-none`, a = i`w-full`, s = i`ris-body2-regular h-48 px-16 py-4`, u = i`ris-body1-regular h-64 px-24 py-4`, d = i`ris-body2-regular h-[44px] p-0`, b = i`ris-body1-regular h-[60px] p-0`;
+    return {
+      class: {
+        [l]: !t,
+        [n]: t,
+        [a]: !!e.fluid,
+        [r]: !0,
+        [s]: (!e.size || e.size === "small") && !t,
+        [d]: (!e.size || e.size === "small") && t,
+        [u]: e.size === "large" && !t,
+        [b]: e.size === "large" && t
+      },
+      "data-size": e.size ?? "small"
+    };
+  }
+}, x = {
+  // All styling moved to inputText.ts
+}, w = {
+  button: c,
+  inputText: y,
+  inputGroup: f,
+  inputGroupAddon: h,
+  password: x
+};
+export {
+  w as RisUi
+};

package/dist/primevue/inputGroup/inputGroup.d.ts

@@ -0,0 +1,3 @@
+import { InputGroupPassThroughOptions } from "primevue/inputgroup";
+declare const inputGroup: InputGroupPassThroughOptions;
+export default inputGroup;

package/dist/primevue/inputGroup/inputGroupAddon.d.ts

@@ -0,0 +1,3 @@
+import { InputGroupAddonPassThroughOptions } from "primevue/inputgroupaddon";
+declare const inputGroupAddon: InputGroupAddonPassThroughOptions;
+export default inputGroupAddon;

package/dist/primevue/inputText/inputText.d.ts

@@ -0,0 +1,4 @@
+import { InputTextPassThroughOptions } from "primevue/inputtext";
+import "./inputText.css";
+declare const inputText: InputTextPassThroughOptions;
+export default inputText;

package/dist/primevue/password/password.d.ts

@@ -0,0 +1,3 @@
+import { PasswordPassThroughOptions } from "primevue/password";
+declare const password: PasswordPassThroughOptions;
+export default password;