Merge branch 'develop' of https://github.com/cyrinermd/kolibri into 5…

…744_Bug/appointment-form

.github/workflows/draft-deploy.yml

@@ -6,6 +6,7 @@ on:
 
 jobs:
   deploy:
+    if: ${{ github.event.pull_request.base.repo.clone_url == github.event.pull_request.head.repo.clone_url }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

.github/workflows/test-deploy.yml

@@ -0,0 +1,52 @@
+name: Netlify Test Deploy - Deploy stable branches under fixed aliases
+
+on:
+  push:
+    branches:
+      - 'develop'
+      - 'release/*'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      # https://github.com/pnpm/action-setup#use-cache-to-reduce-installation-time
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        id: pnpm-install
+        with:
+          version: 8
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store
+      - name: Install
+        run: pnpm i --no-frozen-lockfile --no-verify-store-integrity
+
+      - name: Build
+        run: pnpm --filter @public-ui/sample-react... build
+
+      - name: Netlify Deploy
+        uses: netlify/actions/cli@master
+        id: netlify
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ vars.NETLIFY_SITE_ID }}
+        with:
+          args: deploy --filter=@public-ui/sample-react --alias="$GITHUB_REF_NAME" # Netlify conveniently sanitizes the alias for us. E.g. `release/1.7` becomes `release-1-7`

.gitignore

@@ -1,12 +1,12 @@
 /.husky/
+/.idea/
+/.nx/
 /license-reports/*.html
 /packages/**/pnpm-lock.yaml
+
+# in all sub folders
+.DS_Store/
 dist/
 node_modules/
-
-package-lock.json
-.DS_Store
-.nx/
-CHANGELOG.*
 *.log
 *.tgz

CONTRIBUTING.md

@@ -49,8 +49,13 @@ We work according to the Git flow: https://medium.com/android-news/gitflow-with-
 6. Create a new branch for your changes
 7. [Install PNPM](https://pnpm.io/installation) on you local machine
 8. Install all packages with `pnpm i`
-9. Navigate to the desired package in our monorepo
-10. Start the project with “pnpm start”
+9. Build all packages within the mono repository `pnpm -r build`
+10. Navigate to the desired package in our monorepo
+11. When you want to start the project navigate to `packages/components/` and run pnpm start
+
+### Develop new component
+
+Refer to [new component](docs/tutorials/NEW_COMPONENT.md) tutorial.
 
 ### Switching between branches
 

docs/tutorials/NEW_COMPONENT.md

@@ -7,45 +7,49 @@
 Folgende Grundprinzipien gelten für das Schreiben von Quellcode:
 
 - Auflistungen werden immer alphabetisch sortiert
-- Wiederverwendete Algorithmen (z.B. Property-Validatoren) werden in statische Funktionen ausgelagert (z.B. `src/utils/validators/<prop-name>.ts`)
+- Wiederverwendete Algorithmen (z.B. Property-Validatoren) werden in statische Funktionen ausgelagert (z.B. `packages/schema/src/validators/<prop-name>.ts`)
 - ...
 
 ## Checkliste
 
-| Schritt | Kurzbeschreibung                                                                                                                        |
-| :-----: | --------------------------------------------------------------------------------------------------------------------------------------- |
-|    0    | Name im Schema hinterlegen                                                                                                              |
-|    1    | Verzeichnis anlegen<br>- component.tsx(optional)<br>- readme.md<br>- shadow.tsx: Komponente mit Shadow DOM<br>- styles.css<br>- types.ts |
-|    2    | API spezifizieren                                                                                                                       |
-|    3    | Klasse zur API implementieren<br>- Props<br>- State<br>- Watcher<br>- Initialer Hook<br>- Render-Methode                                |
-|    4    | Styling anlegen                                                                                                                         |
-|    5    | Beispiele in `index.html` aufnehmen                                                                                                     |
-|    6    | readme.md vervollständigen                                                                                                              |
-|.   7.   | Component-Identifier in die `stencil.config.js` eintragen                                                                               |
-|   ...   | ...                                                                                                                                     |
-|   ...   | Klasse in Komponenten-Liste für Tests aufnehmen (packages/components/src/components/component-list.ts)                                  |
-|   ...   | Alle autogeneierten Daten zur Komponente mit einchecken                                                                                |
+| Schritt | Kurzbeschreibung                                                                                                                         |
+|:-------:|------------------------------------------------------------------------------------------------------------------------------------------|
+|    0    | Projekt starten                                                                                                                          |
+|    1    | Name im Schema hinterlegen                                                                                                               |
+|    2    | Verzeichnis anlegen<br>- component.tsx(optional)<br>- readme.md<br>- shadow.tsx: Komponente mit Shadow DOM<br>- styles.css<br>- types.ts |
+|    3    | API spezifizieren                                                                                                                        |
+|    4    | Klasse zur API implementieren<br>- Props<br>- State<br>- Watcher<br>- Initialer Hook<br>- Render-Methode                                 |
+|    5    | Styling anlegen                                                                                                                          |
+|    6    | Beispiele in `index.html` aufnehmen                                                                                                      |
+|    7    | readme.md vervollständigen                                                                                                               |
+|   ...   | ...                                                                                                                                      |
+|   ...   | Klasse in Komponenten-Liste für Tests aufnehmen (packages/components/src/components/component-list.ts)                                   |
+|   ...   | Alle autogeneierten Daten zur Komponente mit einchecken                                                                                  |
 
 ## Schritt 0
 
-Als erstes wird der **Name** der neuen Komponenten in der **Schema**-Datei (`src/schema/tag-names.ts`) hinterlegt.
+Projekt starten, wie in [Contribution](../../CONTRIBUTING.md) beschrieben.
 
-## Schritt 1 - Verzeichnis anlegen
+## Schritt 1
 
-Eine Vorlage ist unter `/docs/tutorials/component` zu finden. Ziel: `/packages/components/src/components/[component-name]`.
+Als erstes wird der **Name** der neuen Komponenten in der **Schema**-Datei (`packages/schema/tag-names.ts`) hinterlegt.
+
+## Schritt 2 - Verzeichnis anlegen
+
+Eine Vorlage ist unter `/docs/tutorials/new-component` zu finden. Ziel: `/packages/components/src/components/[component-name]`.
 Sofern eine Variante ohne Shadow DOM für andere Komponenten benötigt wird, ist die Komponente selbst, mit `shadow: false` anzulegen und diese Komponente in `shadow.tsx` einzubinden.
 Andernfalls ist die Komponente direkt mit `shadow: true` in `shadow.tsx` zu implementieren.
 Ziel: shadow.tsx existiert immer und liefert die Komponente mit Shadow DOM.
 Die `readme.md` wird automatisch bei `pnpm build` erzeugt, sollte sie bereits existieren wird der automatisch generierte Inhalt angehängt.
 
-## Schritt 2 - API spezifizieren
+## Schritt 3 - API spezifizieren
 
 Datei: `types.ts`;
 Inhalt: `RequiredProps`, `OptionalProps`, `RequiredStates`, `OptionalStates`, `States` und `ComponentApi`
 
-## Schritt 3 - Klasse Implementieren
+## Schritt 4 - Klasse Implementieren
 
-Datei: `shadow.tsx` ooder/und `component.tsx`;
+Datei: `shadow.tsx` oder/und `component.tsx`;
 Inhalt:
 
 - `@Component` (außerhalb der Klasse),
@@ -55,21 +59,21 @@ Inhalt:
 - `public componentWillLoad()`: Initialer Hook, alle Validierungsmethoden hier aufrufen
 - `public render()`: Render-Methode, erstellt das HTML, das gerendert werden soll
 
-## Schritt 4 - Styling anlegen
+## Schritt 5 - Styling anlegen
 
 Datei: `styles.css`;
 Wichtig: `packages/components/src/components/README.md` beachten.
 Sofern Styling für mehrere Komponenten verwendet werden soll, Datei passend benennen und direkt unter `/packages/components/src/components/` erstellen und in styles.css importieren.
 
-## Schritt 5 - Beispiel in index.html erstellen
+## Schritt 6 - Beispiel in index.html erstellen
 
 Datei: `/packages/components/src/index.html`;
 Unter body > main > ol ein li mit dem Beispielcode erstellen.
 Aus dem Verzeichnis `/packages/components` kann mit `pnpm start` der dev-server gestartet werden.
 Andere li können vorrübergehend entfernt werden, dafür ist die `index.bak.html` da.
 Nach Beendigung der Entwicklung ist die `index.html` zurückzusetzen, abgesehen des neuen Beispiels, welches in die `index.bak.html` ebenfalls einzufügen ist.
 
-## Schritt 6 - readme.md vervollständigen
+## Schritt 7 - readme.md vervollständigen
 
 Datei: `readme.md`;
 Die von `pnpm build` (in `/packages/components` ausgeführt) erzeugte `readme.md` mit sinnvollen Informationen vervollständigen.

docs/tutorials/new-component/component.tsx

@@ -1,12 +1,13 @@
 // https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml
 
-import { Component, Host, JSX, Prop, State, Watch } from '@stencil/core';
+import type { JSX } from '@stencil/core';
+import { Component, Host, Prop, State, Watch, h } from '@stencil/core';
 
-import { HeadingLevel } from '../../types/heading-level';
+import type { HeadingLevel } from '@public-ui/schema';
 import { nonce } from '../../utils/dev.utils';
-import { setState, watchBoolean, watchString } from '../../utils/prop.validators';
+import { setState, watchBoolean, watchString } from '@public-ui/schema';
 import { watchHeadingLevel } from '../heading/validation';
-import { NewComponentAPI } from './styles';
+import type { KoliBriNewComponentCallbacks, NewComponentAPI, NewComponentStates } from './types';
 
 /**
  * @class NewComponent - Ermöglicht das Stylen des äußeren Container des NewComponents.
@@ -35,10 +36,11 @@ export class KolNewComponent implements NewComponentAPI {
 				<div
 					class={{
 						'new-component': true,
-						open: this.state._open,
+						open: !!this.state._open,
 						close: !this.state._open,
 					}}
 				>
+					<kol-button _label="Toggle" _on={{ onClick: this.toggle }}></kol-button>
 					<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>
 					<div
 						aria-hidden={this.state._open ? undefined : 'true'}
@@ -85,7 +87,7 @@ export class KolNewComponent implements NewComponentAPI {
 	/**
 	 * @see: components/abbr/component.tsx (@State)
 	 */
-	@State() public state: States = {
+	@State() public state: NewComponentStates = {
 		_heading: '…', // ⚠ required
 		_level: 1,
 	};
@@ -135,8 +137,7 @@ export class KolNewComponent implements NewComponentAPI {
 		this.validateOn(this._on);
 		this.validateOpen(this._open);
 	}
-
-	private onClick = (event: Event) => {
+	private toggle = (event: Event) => {
 		this._open = !this._open;
 
 		/**
@@ -148,7 +149,7 @@ export class KolNewComponent implements NewComponentAPI {
 		const timeout = setTimeout(() => {
 			clearTimeout(timeout);
 			if (typeof this.state._on?.onClick === 'function') {
-				this.state._on.onClick(event, this._open);
+				this.state._on.onClick(event, !!this._open);
 			}
 		});
 	};

docs/tutorials/new-component/readme.md

@@ -1,24 +1,31 @@
 # New-Component
 
->kurze Beschreibung der gerenderten Komponente (nicht technisch)
+> kurze Beschreibung der gerenderten Komponente (nicht technisch)
 
->wann diese Komponente einzusetzen ist
+> wann diese Komponente einzusetzen ist
 
 ## Konstruktion
 
 ### Code
 
->Beispielcode, wird als Code in der Dokumentation angezeigt
+> Beispielcode, wird als Code in der Dokumentation angezeigt
+
 ```html
-  <kol-new-component _heading="Element 1">
-    <div slot="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
-    <div slot="header">Inhalt eines Header</div>
-  </kol-new-component>
+<kol-new-component _heading="Element 1">
+	<div slot="content">
+		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+		At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
+		dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
+		et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+	</div>
+	<div slot="header">Inhalt eines Header</div>
+</kol-new-component>
 ```
 
 ### Beispiel
 
->Beispiel, wird gerendert; Empfehlung: selber code wie oben, eventuell mit Wrapper
+> Beispiel, wird gerendert; Empfehlung: selber code wie oben, eventuell mit Wrapper
+
 <div class="grid gap-2">
   <kol-new-component _heading="Element 1">
     <div slot="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
@@ -28,7 +35,7 @@
 
 ## Verwendung
 
->Erläuterungen der Attribute und Slots
+> Erläuterungen der Attribute und Slots
 
 ### Best practices
 
@@ -42,31 +49,55 @@
 
 ## Barrierefreiheit
 
-
-
 ### Tastatursteuerung
 
 | Taste   | Funktion                           |
-| ------- | -----------------------------------|
+| ------- | ---------------------------------- |
 | `Tab`   | Springt die einzelnen Elemente an. |
 | `Enter` | Tut Dinge.                         |
 
 ## Links und Referenzen
 
 - Liste von hilfreichen Links
 
->Der folgende Teil wird automatisch beim build generiert. Die Überschriften sind als Hilfe, was man nicht manuell einfügen muss.
+> Der folgende Teil wird automatisch beim build generiert. Die Überschriften sind als Hilfe, was man nicht manuell einfügen muss.
+
 <!-- Auto Generated Below -->
 
 ## Properties
 
+| Property                | Attribute  | Description                                               | Type                                                                                 | Default     |
+| ----------------------- | ---------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------- |
+| `_heading` _(required)_ | `_heading` | Gibt die Überschrift des NewComponents an.                | `string`                                                                             | `undefined` |
+| `_level`                | `_level`   | Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                       | `1`         |
+| `_on`                   | --         | Gibt die EventCallback-Funktionen an.                     | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
+| `_open`                 | `_open`    | Gibt an, ob das NewComponent geöffnet ist.                | `boolean \| undefined`                                                               | `false`     |
+
 ## Slots
 
-## Shadow Parts
+| Slot        | Description                                                                                                                                             |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"content"` | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des NewComponents. (wenn nur ein slot verwendet wird, kann der Name weggelassen werden) |
 
 ## Dependencies
 
 ### Depends on
 
+- [kol-button](../button)
+- [kol-heading-wc](../heading)
+
 ### Graph
 
+```mermaid
+graph TD;
+  kol-new-component --> kol-button
+  kol-new-component --> kol-heading-wc
+  kol-button --> kol-button-wc
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip-wc
+  kol-span-wc --> kol-icon
+  kol-tooltip-wc --> kol-span-wc
+  style kol-new-component stroke:#333,stroke-width:4px
+```
+
+---

docs/tutorials/new-component/style.css

@@ -9,6 +9,7 @@
 /* Außer ':host' verlässt kein Selektor den shadow-DOM, diese Regel gilt also nur für Elemente innerhalb der Komponente */
 * {
 	display: flex;
+	flex-direction: column;
 }
 
 /* Komponenten sollten keine Farben oder Abstände definieren, ein Zurücksetzen auf 0 ist erlaubt. */