(#6140) Component overview (#217)

Author: sdvg

dev/docs/30-components/index.md

@@ -0,0 +1,14 @@
+---
+title: Komponenten
+description: Auf den folgenden Seiten finden Sie eine Übersicht über alle Komponenten, die in KoliBri zur Verfügung stehen. Die Komponenten sind in verschiedene Kategorien unterteilt, die Sie über das Menü links erreichen können.
+tags:
+  - Beispiele
+---
+
+import { ComponentList } from '@site/src/components/docs/ComponentList';
+
+# Komponenten
+
+Auf den folgenden Seiten finden Sie eine Übersicht über alle Komponenten, die in KoliBri zur Verfügung stehen. Die Komponenten sind in verschiedene Kategorien unterteilt, die Sie über das Menü links erreichen können.
+
+<ComponentList lang="de" />

dev/docs/30-components/index.mdx

@@ -1,14 +1,14 @@
 {
   "title": {
     "message": "Blog",
-    "description": "The title for the blog used in SEO"
+    "description": "Der Titel für den Blog, der im SEO verwendet wird"
   },
   "description": {
     "message": "Blog",
-    "description": "The description for the blog used in SEO"
+    "description": "Die Beschreibung für den Blog, die im SEO verwendet wird"
   },
   "sidebar.title": {
     "message": "Neuste Beiträge",
-    "description": "The label for the left sidebar"
+    "description": "Die Bezeichnung für die linke Seitenleiste"
   }
 }

dev/i18n/de/code.json

@@ -1,38 +1,38 @@
 {
   "version.label": {
     "message": "Next",
-    "description": "The label for version current"
+    "description": "Die Bezeichnung für die aktuelleste Version"
   },
   "sidebar.tutorialSidebar.category.Motivation": {
     "message": "Motivation"
   },
   "sidebar.tutorialSidebar.category.Motivation.link.generated-index.description": {
-    "message": "5 minutes to learn the most important Docusaurus concepts."
+    "message": "5 Minuten, um die wichtigsten Docusaurus-Konzepte zu lernen."
   },
   "sidebar.tutorialSidebar.category.Tutorial - Basics": {
-    "message": "Tutorial - Basics"
+    "message": "Tutorial - Grundlagen"
   },
   "sidebar.tutorialSidebar.category.Tutorial - Basics.link.generated-index.description": {
-    "message": "5 minutes to learn the most important Docusaurus concepts."
+    "message": "5 Minuten, um die wichtigsten Docusaurus-Konzepte zu lernen."
   },
   "sidebar.tutorialSidebar.category.Tutorial - Extras": {
     "message": "Tutorial - Extras"
   },
   "sidebar.tutorialSidebar.category.Get Started": {
     "message": "Get Started",
-    "description": "The label for category Get Started in sidebar tutorialSidebar"
+    "description": "Die Bezeichnung für die Kategorie Get Started in der Seitenleiste tutorialSidebar."
   },
   "sidebar.tutorialSidebar.category.Konzepte": {
     "message": "Konzepte",
-    "description": "The label for category Konzepte in sidebar tutorialSidebar"
+    "description": "Die Bezeichnung für die Kategorie Konzepte in der Seitenleiste tutorialSidebar."
   },
   "sidebar.tutorialSidebar.category.Styling & Design": {
     "message": "Styling & Design",
-    "description": "The label for category Styling & Design in sidebar tutorialSidebar"
+    "description": "Die Bezeichnung für die Kategorie Styling & Design in der Seitenleiste tutorialSidebar."
   },
   "sidebar.tutorialSidebar.category.Komponenten": {
     "message": "Komponenten",
-    "description": "The label for category Komponenten in sidebar tutorialSidebar"
+    "description": "Die Bezeichnung für die Kategorie Komponenten in der Seitenleiste tutorialSidebar."
   },
   "sidebar.tutorialSidebar.category.components": {
     "message": "components"

dev/i18n/de/docusaurus-plugin-content-blog/options.json

@@ -1,23 +1,23 @@
 {
   "link.title.Inhalte": {
     "message": "Inhalte",
-    "description": "The title of the footer links column with title=Inhalte in the footer"
+    "description": "Der Titel der Fußzeilen-Linkspalte mit dem Titel=Inhalte in der Fußzeile"
   },
   "link.title.Community": {
     "message": "Community",
-    "description": "The title of the footer links column with title=Community in the footer"
+    "description": "Der Titel der Fußzeilen-Linkspalte mit dem Titel=Community in der Fußzeile"
   },
   "link.title.Mehr": {
     "message": "Mehr",
-    "description": "The title of the footer links column with title=Mehr in the footer"
+    "description": "Der Titel der Fußzeilen-Linkspalte mit dem Titel=Mehr in der Fußzeile"
   },
   "link.item.label.Dokumentation": {
     "message": "Dokumentation",
-    "description": "The label of footer link with label=Dokumentation linking to /docs"
+    "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Dokumentation, die auf /docs verweist"
   },
   "link.item.label.Blog": {
     "message": "Blog",
-    "description": "The label of footer link with label=Blog linking to /blog"
+    "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Blog, die auf /blog verweist"
   },
   "link.item.label.Designer": {
     "message": "Designer"
@@ -33,34 +33,34 @@
   },
   "link.item.label.GitHub": {
     "message": "GitHub",
-    "description": "The label of footer link with label=GitHub linking to https://github.com/public-ui"
+    "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=GitHub, die auf https://github.com/public-ui verweist"
   },
   "link.item.label.ITZBund": {
     "message": "ITZBund",
-    "description": "The label of footer link with label=ITZBund linking to https://itzbund.de"
+    "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=ITZBund, die auf https://itzbund.de verweist"
   },
   "link.item.label.Portal Barrierefreiheit": {
     "message": "Portal Barrierefreiheit",
-    "description": "The label of footer link with label=Portal Barrierefreiheit linking to https://www.barrierefreiheit-dienstekonsolidierung.bund.de/"
+    "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Portal Barrierefreiheit, die auf https://www.barrierefreiheit-dienstekonsolidierung.bund.de/ verweist"
   },
   "copyright": {
     "message": "© Informationstechnikzentrum Bund (ITZBund) 2020 - 2023",
-    "description": "The footer copyright"
+    "description": "Das Fußzeilen-Copyright"
   },
   "link.item.label.FAQ": {
     "message": "FAQ",
-    "description": "The label of footer link with label=FAQ linking to https://github.com/public-ui/kolibri/discussions"
+    "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=FAQ, die auf https://github.com/public-ui/kolibri/discussions verweist"
   },
   "link.item.label.Mastodon": {
     "message": "Mastodon",
-    "description": "The label of footer link with label=Mastodon linking to https://social.bund.de/@kolibri"
+    "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Mastodon, die auf https://social.bund.de/@kolibri verweist"
   },
   "link.item.label.Impressum": {
     "message": "Impressum",
-    "description": "The label of footer link with label=Impressum linking to /docs/impressum"
+    "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Impressum, die auf /docs/impressum verweist"
   },
   "link.item.label.Community of Practices": {
     "message": "Community of Practices",
-    "description": "The label of footer link with label=Community of Practices linking to https://github.com/public-ui/kolibri/discussions/516"
+    "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Community of Practices, die auf https://github.com/public-ui/kolibri/discussions/516 verweist"
   }
 }

dev/i18n/de/docusaurus-plugin-content-docs/current.json

@@ -1,15 +1,15 @@
 {
   "title": {
     "message": "KoliBri",
-    "description": "The title in the navbar"
+    "description": "Der Titel in der Navigationsleiste"
   },
   "item.label.Dokumentation": {
     "message": "Dokumentation",
-    "description": "Navbar item with label Dokumentation"
+    "description": "Navigationsleisten-Element mit der Bezeichnung Dokumentation"
   },
   "item.label.Blog": {
     "message": "Blog",
-    "description": "Navbar item with label Blog"
+    "description": "Navigationsleisten-Element mit der Bezeichnung Blog"
   },
   "item.label.Designer": {
     "message": "Designer"
@@ -19,6 +19,6 @@
   },
   "logo.alt": {
     "message": "KoliBri Logo",
-    "description": "The alt text of navbar logo"
+    "description": "Der Alt-Text des Navigationsleisten-Logos"
   }
 }

dev/i18n/de/docusaurus-theme-classic/footer.json

@@ -0,0 +1,14 @@
+---
+title: Components
+description: On the following pages, you will find an overview of all the components available in KoliBri. The components are divided into different categories, which you can access via the menu on the left.
+tags:
+  - Examples
+---
+
+import { ComponentList } from '@site/src/components/docs/ComponentList';
+
+# Components
+
+On the following pages, you will find an overview of all the components available in KoliBri. The components are divided into different categories, which you can access via the menu on the left.
+
+<ComponentList lang="en" />

dev/i18n/de/docusaurus-theme-classic/navbar.json

@@ -0,0 +1,14 @@
+---
+title: Components
+description: On the following pages, you will find an overview of all the components available in KoliBri. The components are divided into different categories, which you can access via the menu on the left.
+tags:
+  - Examples
+---
+
+import { ComponentList } from '@site/src/components/docs/ComponentList';
+
+# Components
+
+On the following pages, you will find an overview of all the components available in KoliBri. The components are divided into different categories, which you can access via the menu on the left.
+
+<ComponentList lang="en" />

dev/i18n/en/docusaurus-plugin-content-docs/current/30-components/index.mdx

@@ -0,0 +1,14 @@
+---
+title: Components
+description: On the following pages, you will find an overview of all the components available in KoliBri. The components are divided into different categories, which you can access via the menu on the left.
+tags:
+  - Examples
+---
+
+import { ComponentList } from '@site/src/components/docs/ComponentList';
+
+# Components
+
+On the following pages, you will find an overview of all the components available in KoliBri. The components are divided into different categories, which you can access via the menu on the left.
+
+<ComponentList lang="en" />

dev/i18n/en/docusaurus-plugin-content-docs/version-1.7/30-components/index.mdx

@@ -0,0 +1,14 @@
+---
+title: Components
+description: On the following pages, you will find an overview of all the components available in KoliBri. The components are divided into different categories, which you can access via the menu on the left.
+tags:
+  - Examples
+---
+
+import { ComponentList } from '@site/src/components/docs/ComponentList';
+
+# Components
+
+On the following pages, you will find an overview of all the components available in KoliBri. The components are divided into different categories, which you can access via the menu on the left.
+
+<ComponentList lang="en" />

dev/i18n/en/docusaurus-plugin-content-docs/version-2.0/30-components/index.mdx

@@ -0,0 +1,93 @@
+import type { FC } from 'react';
+import React, { Suspense, useEffect, useState, useRef, useCallback } from 'react';
+import { useDocsPreferredVersion } from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import { KolCard, KolHeading } from '@public-ui/react';
+
+import type { Language } from '../../shares/language';
+import type { Version } from '../../shares/version';
+import type { Component } from '../samplePreviews';
+import { COMPONENT_VERSIONS } from '../samplePreviews/version';
+
+type Props = Language & {
+	version?: Version;
+};
+
+const LazyLoadComponent: FC<
+	Component &
+		Language & {
+			path?: string;
+			observer: (cb: () => void) => IntersectionObserver;
+		}
+> = ({ name, lang, path, loadComponent, observer }) => {
+	const ref = useRef<HTMLDivElement>(null);
+	const [isVisible, setIsVisible] = useState<boolean>(false);
+
+	useEffect(() => {
+		observer(() => setIsVisible(true)).observe(ref.current as Element);
+	}, [observer]);
+
+	const formattedComponentName = name.charAt(0).toUpperCase() + name.slice(1);
+
+	const SampleComponent = loadComponent();
+	if (!loadComponent) {
+		throw new Error(`Example component for ${name} not found`);
+	}
+	return (
+		<div ref={ref} className="components-overview-item">
+			{isVisible && (
+				<Suspense fallback={<div className="skeleton"></div>}>
+					<Link tabIndex={0} to={`${path ?? '/docs/next'}/components/${formattedComponentName}`} />
+					<KolCard
+						tabIndex={-1}
+						aria-label={formattedComponentName}
+						role="img"
+						_level={2}
+						_label={formattedComponentName}
+					>
+						<SampleComponent lang={lang} />
+					</KolCard>
+				</Suspense>
+			)}
+		</div>
+	);
+};
+
+export const ComponentList: FC<Props> = ({ lang }) => {
+	const { preferredVersion } = useDocsPreferredVersion();
+	const version = preferredVersion?.name as Version;
+	const components = COMPONENT_VERSIONS?.[version ?? 'current'] as Component[];
+	if (components?.length <= 0) return null;
+	const componentLength = components.length;
+	const headline = lang === 'de' ? `Anzahl Komponenten: ${componentLength}` : `Components sum: ${componentLength}`;
+	const observer = useCallback(
+		(cb: () => void) =>
+			new IntersectionObserver((entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						cb();
+					}
+				});
+			}),
+		[]
+	);
+	return (
+		<>
+			<KolHeading _label={headline} _level={3}>
+				{headline}
+			</KolHeading>
+			<div className="components-overview">
+				{components.map(({ name, loadComponent }) => (
+					<LazyLoadComponent
+						key={name}
+						name={name}
+						lang={lang}
+						path={preferredVersion?.path}
+						loadComponent={loadComponent}
+						observer={observer}
+					/>
+				))}
+			</div>
+		</>
+	);
+};

dev/i18n/en/docusaurus-plugin-content-docs/version-2.1/30-components/index.mdx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { KolAbbr } from '@public-ui/react';
+
+const Abbr = () => (
+	<p>
+		Lorem ipsum{' '}
+		<KolAbbr _label="Abkürzung" _tooltipAlign="right">
+			z.B.
+		</KolAbbr>{' '}
+		dolor sit amet.
+	</p>
+);
+
+export default Abbr;

dev/src/components/docs/ComponentList.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { KolAccordion } from '@public-ui/react';
+
+const Accordion = () => (
+	<>
+		<KolAccordion _label="Accordion" _level={1} _open={true}>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+		</KolAccordion>
+		<KolAccordion _label="Accordion 2" _level={1}>
+			Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+		</KolAccordion>
+	</>
+);
+
+export default Accordion;

dev/src/components/samplePreviews/Abbr.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { KolAlert } from '@public-ui/react';
+
+const Alert = () => (
+	<KolAlert _label="Title" _level={5} _type="warning" _variant="card">
+		Content
+	</KolAlert>
+);
+
+export default Alert;

dev/src/components/samplePreviews/Accordion.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { KolAvatar } from '@public-ui/react';
+
+const Avatar = () => <KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />;
+
+export default Avatar;

dev/src/components/samplePreviews/Alert.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { KolBadge } from '@public-ui/react';
+
+const Badge = () => <KolBadge _color="#214f86" _label="Label" />;
+
+export default Badge;