(#6140) Changed version logic for component list, added combobox and small bugfixes

Author: chrisalat

dev/src/components/docs/ComponentList.tsx

@@ -1,7 +1,8 @@
 import type { FC, MouseEvent, KeyboardEvent } from 'react';
 import React, { Suspense, useEffect, useState, useRef, useCallback } from 'react';
+import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import { useHistory } from 'react-router-dom';
-import { KolCard } from '@public-ui/react';
+import { KolCard, KolHeading } from '@public-ui/react';
 
 import type { Language } from '../../shares/language';
 import type { Version } from '../../shares/version';
@@ -12,7 +13,9 @@ type Props = Language & {
     version?: Version
 }
 
-const LazyLoadComponent: FC<Component & Language> = ({ name, lang, loadComponent }) => {
+const LazyLoadComponent: FC<Component & Language & {
+    path?: string
+}> = ({ name, lang, path, loadComponent }) => {
     const history = useHistory();
     const ref = useRef<HTMLDivElement>(null);
     const [isVisible, setIsVisible] = useState<boolean>(false);
@@ -33,10 +36,10 @@ const LazyLoadComponent: FC<Component & Language> = ({ name, lang, loadComponent
     const handleRedirect = useCallback((event: MouseEvent<HTMLAnchorElement> | KeyboardEvent<HTMLAnchorElement>) => {
         if (event.type === 'click' || (event.type === 'keydown' && (event as React.KeyboardEvent).key === 'Enter')) {
             event.preventDefault();
-            history.push(`/docs/next/components/${formattedComponentName}`)
+            history.push(`${path ?? "/docs/next"}/components/${formattedComponentName}`)
         }
         return event
-    }, [formattedComponentName])
+    }, [path, formattedComponentName])
 
     const SampleComponent = loadComponent();
     if (!loadComponent) {
@@ -63,14 +66,21 @@ const LazyLoadComponent: FC<Component & Language> = ({ name, lang, loadComponent
     );
 };
 
-export const ComponentList: FC<Props> = ({ lang, version }) => {
+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}`
     return (
-        <div className="components-overview">
-            {components.map(({ name, loadComponent }) => (
-                <LazyLoadComponent key={name} name={name} lang={lang} loadComponent={loadComponent} />
-            ))}
-        </div>
+        <>
+            <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} />
+                ))}
+            </div>
+        </>
     )
 };

dev/src/components/samplePreviews/Combobox.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { KolCombobox } from '@public-ui/react';
+
+const COUNTRY_SUGGESTIONS = [
+    "Dänemark",
+    "Deutschland",
+    "Dominica",
+]
+
+const Combobox = () => <KolCombobox _touched _label="Label" _placeholder="Placeholder" _required _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} />;
+
+export default Combobox;

dev/src/components/samplePreviews/version/1.7.tsx

@@ -177,10 +177,6 @@ export const COMPONENTS_17 = [
 		name: 'toaster',
 		loadComponent: () => lazy(() => import('../Toaster')),
 	},
-	{
-		name: 'toolbar',
-		loadComponent: () => lazy(() => import('../Toolbar')),
-	},
 	{
 		name: 'tooltip',
 		loadComponent: () => lazy(() => import('../Tooltip')),

dev/src/components/samplePreviews/version/2.0.tsx

@@ -177,10 +177,6 @@ export const COMPONENTS_20 = [
 		name: 'toaster',
 		loadComponent: () => lazy(() => import('../Toaster')),
 	},
-	{
-		name: 'toolbar',
-		loadComponent: () => lazy(() => import('../Toolbar')),
-	},
 	{
 		name: 'tooltip',
 		loadComponent: () => lazy(() => import('../Tooltip')),

dev/src/components/samplePreviews/version/2.1.tsx

@@ -177,10 +177,6 @@ export const COMPONENTS_21 = [
 		name: 'toaster',
 		loadComponent: () => lazy(() => import('../Toaster')),
 	},
-	{
-		name: 'toolbar',
-		loadComponent: () => lazy(() => import('../Toolbar')),
-	},
 	{
 		name: 'tooltip',
 		loadComponent: () => lazy(() => import('../Tooltip')),

dev/src/components/samplePreviews/version/current.tsx

@@ -41,6 +41,10 @@ export const COMPONENTS_CURRENT = [
 		name: 'card',
 		loadComponent: () => lazy(() => import('../Card')),
 	},
+	{
+		name: 'combobox',
+		loadComponent: () => lazy(() => import('../Combobox')),
+	},
 	{
 		name: 'details',
 		loadComponent: () => lazy(() => import('../Details')),

dev/src/css/custom.css

@@ -153,6 +153,7 @@ kol-link-button {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	gap: 1rem;
+	padding-top: 1rem;
 }
 
 .components-overview-item {

dev/versioned_docs/version-1.7/30-components/index.md

@@ -1,3 +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/versioned_docs/version-2.0/30-components/index.md

@@ -1,3 +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/versioned_docs/version-2.1/30-components/index.md

@@ -1,3 +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" />