Skip to content

Commit 796ad97

Browse files
deleoniodeleonio
authored
Added synonyms to component list (#220)
2 parents bf0698e + 40a482e commit 796ad97

29 files changed

+173
-90
lines changed

‎dev/src/components/BitvTestResults.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import BrowserOnly from '@docusaurus/BrowserOnly';
22
import { KolTable } from '@public-ui/react';
3-
import type { FC} from 'react';
3+
import type { FC } from 'react';
44
import React, { useEffect, useState } from 'react';
55
import { getDataFromExcel } from '../shares/fetch-excel';
66

‎dev/src/components/Configurator.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { KolLink, KolTabs } from '@public-ui/react';
2-
import type { FC} from 'react';
2+
import type { FC } from 'react';
33
import React, { useState } from 'react';
44

55
type CodeSandboxProps = {

‎dev/src/components/HomepageFeatures.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { KolIcon, KolLink, KolLinkButton } from '@public-ui/react';
33
import { translate } from '@docusaurus/Translate';
4+
import Heading from '@theme/Heading';
45

56
type FeatureItem = {
67
icon: string;
@@ -83,7 +84,9 @@ function Feature({ title, icon, description, button }: FeatureItem) {
8384
return (
8485
<div className="grid gap-4 content-baseline text-center justify-items-center">
8586
<KolIcon className="text-8xl text-gray-700" _label="" _icons={icon}></KolIcon>
86-
<h3 className="m-0">{title}</h3>
87+
<Heading as="h3" className="m-0">
88+
{title}
89+
</Heading>
8790
<div className="grid gap-2">{description}</div>
8891
<div className="grid sm:inline">{button}</div>
8992
</div>

‎dev/src/components/LiveEditorCompact/Configuration.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import type { Attribute, Slot, TagName } from '../LiveEditorCompact/types';
33
import allElements from '@public-ui/components/custom-elements.json';
4-
import { KolHeading } from '@public-ui/react';
4+
import Heading from '@theme/Heading';
55
import { AttributeInput } from './AttributeInput';
66
import { AttributeBlackList } from './lists';
77
import { SlotInput } from './attributeInputs/SlotInput';
@@ -26,7 +26,9 @@ export function Configuration(props: Props) {
2626
{showDescription ? (
2727
<details className="flex">
2828
<summary className="cursor-pointer">
29-
<h2 className="inline">Konfiguration von {element.name}</h2>
29+
<Heading as="h2" className="inline">
30+
Konfiguration von {element.name}
31+
</Heading>
3032
</summary>
3133
<p>{element.description}</p>
3234
</details>
@@ -56,7 +58,7 @@ export function Configuration(props: Props) {
5658
))}
5759
</>
5860
) : (
59-
<KolHeading _level={2} _label={`Der Übergebene Tag '${tag}' ist inkorrekt.`} />
61+
<Heading as="h2">{`Der Übergebene Tag '${tag}' ist inkorrekt.`}</Heading>
6062
)}
6163
</>
6264
);

‎dev/src/components/LiveEditorCompact/attributeInputs/Icon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from 'react';
22
import type { Attribute } from '../../LiveEditorCompact/types';
33
import { KolButton, KolDetails } from '@public-ui/react';
4-
import type { KoliBriAllIcons } from '@public-ui/schema';
4+
import type { KoliBriIconsProp } from '@public-ui/components';
55

66
type Props = {
77
attribute: Attribute;
@@ -42,7 +42,7 @@ export function Icon(props: Props) {
4242
if (left && !right && !top && !bottom) {
4343
update(attribute.name, `codicon codicon-${left}`);
4444
} else {
45-
const result: KoliBriAllIcons = {};
45+
const result: KoliBriIconsProp = {};
4646
if (left) result.left = `codicon codicon-${left}`;
4747
if (right) result.right = `codicon codicon-${right}`;
4848
if (top) result.top = `codicon codicon-${top}`;

‎dev/src/components/Mermaid.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { FunctionComponent} from 'react';
1+
import type { FunctionComponent } from 'react';
22
import React, { useEffect } from 'react';
33
import mermaid from 'mermaid';
44

‎dev/src/components/PlaygroundCards.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { KolLinkButton } from '@public-ui/react';
22
import React from 'react';
33
import type { FunctionComponent } from 'react';
4+
import Heading from '@theme/Heading';
45

56
interface Playground {
67
name: string;
@@ -26,7 +27,7 @@ const PLAYGROUNDS: Playground[] = [
2627

2728
const PlaygroundCard: FunctionComponent<Playground> = ({ name, image, url, description }) => (
2829
<div className="grid gap-2">
29-
<h3>{name}</h3>
30+
<Heading as="h3">{name}</Heading>
3031
<img src={`/assets/playgrounds/${image}`} alt={`Vorschau des Playground ${name}'s`} />
3132
<p>{description}</p>
3233
<div className="text-center">

‎dev/src/components/docs/ComponentList.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import type { FC } from 'react';
22
import React, { Suspense, useEffect, useState, useRef, useCallback } from 'react';
33
import { useDocsPreferredVersion } from '@docusaurus/theme-common';
44
import Link from '@docusaurus/Link';
5-
import { KolCard, KolHeading } from '@public-ui/react';
5+
import { KolBadge, KolCard, KolHeading } from '@public-ui/react';
66

77
import type { Language } from '../../shares/language';
88
import type { Version } from '../../shares/version';
9+
import { COMPONENT_SYNONYMS } from '../../shares/synonyms';
910
import type { Component } from '../samplePreviews';
1011
import { COMPONENT_VERSIONS } from '../samplePreviews/version';
1112

@@ -33,6 +34,7 @@ const LazyLoadComponent: FC<
3334
if (!loadComponent) {
3435
throw new Error(`Example component for ${name} not found`);
3536
}
37+
const badges = COMPONENT_SYNONYMS?.[name];
3638
return (
3739
<div ref={ref} className="components-overview-item">
3840
{isVisible && (
@@ -46,6 +48,15 @@ const LazyLoadComponent: FC<
4648
_label={formattedComponentName}
4749
>
4850
<SampleComponent lang={lang} />
51+
{badges && badges?.length > 0 && (
52+
<div className="absolute bottom-2 p-1">
53+
<div className="flex flex-wrap gap-2">
54+
{badges?.map((label) => (
55+
<KolBadge key={label} _color="#dadde1" _label={label}></KolBadge>
56+
))}
57+
</div>
58+
</div>
59+
)}
4960
</KolCard>
5061
</Suspense>
5162
)}
@@ -54,9 +65,9 @@ const LazyLoadComponent: FC<
5465
};
5566

5667
export const ComponentList: FC<Props> = ({ lang }) => {
57-
const { preferredVersion } = useDocsPreferredVersion();
58-
const version = preferredVersion?.name as Version;
59-
const components = COMPONENT_VERSIONS?.[version ?? 'current'] as Component[];
68+
const docVersion = useDocsPreferredVersion();
69+
const version = docVersion?.preferredVersion?.name as Version;
70+
const components = COMPONENT_VERSIONS?.[version ?? 'current'];
6071
if (components?.length <= 0) return null;
6172
const componentLength = components.length;
6273
const headline = lang === 'de' ? `Anzahl Komponenten: ${componentLength}` : `Components sum: ${componentLength}`;
@@ -82,7 +93,7 @@ export const ComponentList: FC<Props> = ({ lang }) => {
8293
key={name}
8394
name={name}
8495
lang={lang}
85-
path={preferredVersion?.path}
96+
path={(docVersion?.preferredVersion?.path as string) ?? ''}
8697
loadComponent={loadComponent}
8798
observer={observer}
8899
/>

‎dev/src/components/samplePreviews/Combobox.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import React from 'react';
22
import { KolCombobox } from '@public-ui/react';
33

4-
const COUNTRY_SUGGESTIONS = [
5-
"Dänemark",
6-
"Deutschland",
7-
"Dominica",
8-
]
4+
const COUNTRY_SUGGESTIONS = ['Dänemark', 'Deutschland', 'Dominica'];
95

10-
const Combobox = () => <KolCombobox _touched _label="Label" _placeholder="Placeholder" _required _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} />;
6+
const Combobox = () => (
7+
<KolCombobox
8+
_touched
9+
_label="Label"
10+
_placeholder="Placeholder"
11+
_required
12+
_suggestions={COUNTRY_SUGGESTIONS}
13+
_value={'Deutschland'}
14+
/>
15+
);
1116

1217
export default Combobox;

‎dev/src/components/samplePreviews/Dialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { KolImage } from '@public-ui/react';
33

4-
const Dialog = () => <KolImage _src="/assets/samples/modal.png" _alt="" _sizes="20vw"/>;
4+
const Dialog = () => <KolImage _src="/assets/samples/modal.png" _alt="" _sizes="20vw" />;
55

66
export default Dialog;

‎dev/src/components/samplePreviews/Modal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { KolImage } from '@public-ui/react';
33

4-
const Modal = () => <KolImage _src="/assets/samples/modal.png" _alt="" _sizes="20vw"/>;
4+
const Modal = () => <KolImage _src="/assets/samples/modal.png" _alt="" _sizes="20vw" />;
55

66
export default Modal;

‎dev/src/components/samplePreviews/Popover.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { KolImage } from '@public-ui/react';
33

4-
const Popover = () => <KolImage _src="/assets/samples/split-button.png" _alt="" _sizes="20vw"/>;
4+
const Popover = () => <KolImage _src="/assets/samples/split-button.png" _alt="" _sizes="20vw" />;
55

66
export default Popover;

‎dev/src/components/samplePreviews/SkipNav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { KolImage } from '@public-ui/react';
33

4-
const SkipNav = () => <KolImage _src="/assets/samples/skip-nav.png" _alt="" _sizes="20vw"/>;
4+
const SkipNav = () => <KolImage _src="/assets/samples/skip-nav.png" _alt="" _sizes="20vw" />;
55

66
export default SkipNav;

‎dev/src/components/samplePreviews/SplitButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { KolImage } from '@public-ui/react';
33

4-
const SplitButton = () => <KolImage _src="/assets/samples/split-button.png" _alt="" _sizes="20vw"/>;
4+
const SplitButton = () => <KolImage _src="/assets/samples/split-button.png" _alt="" _sizes="20vw" />;
55

66
export default SplitButton;

‎dev/src/components/samplePreviews/Toaster.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { KolAlert } from '@public-ui/react';
33

44
const Toaster = () => (
5-
<KolAlert _label="Title" _level={5} _type="error" _variant="card">
5+
<KolAlert _label="Title" _level={5} _type="error" _variant="card">
66
Content
77
</KolAlert>
88
);

‎dev/src/components/samplePreviews/Tooltip.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { KolImage } from '@public-ui/react';
33

4-
const Tooltip = () => <KolImage _src="/assets/samples/tooltip.png" _alt="" _sizes="20vw"/>;
4+
const Tooltip = () => <KolImage _src="/assets/samples/tooltip.png" _alt="" _sizes="20vw" />;
55

66
export default Tooltip;

‎dev/src/components/samplePreviews/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import type { Version } from "../../shares/version"
2-
import { COMPONENT_VERSIONS } from "./version"
1+
import type { Version } from '../../shares/version';
2+
import { COMPONENT_VERSIONS } from './version';
33

4-
export type ComponentName = (typeof COMPONENT_VERSIONS["current"])[number]['name'];
4+
export type ComponentName = (typeof COMPONENT_VERSIONS)['current'][number]['name'];
55

66
export const getComponentByName = (name: ComponentName, version?: Version) => {
7-
const component = COMPONENT_VERSIONS?.[version ?? "current"]?.find((el) => el.name === name);
7+
const component = COMPONENT_VERSIONS?.[version ?? 'current']?.find((el) => el.name === name);
88
if (!component) {
99
throw new Error(`Component with name ${name} not found`);
1010
}
1111
return component;
1212
};
1313

14-
export type Component = (typeof COMPONENT_VERSIONS["current"])[number];
14+
export type Component = (typeof COMPONENT_VERSIONS)['current'][number];

‎dev/src/components/samplePreviews/version/1.5.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const COMPONENTS_15 = [];
1+
export const COMPONENTS_15 = [];

‎dev/src/components/samplePreviews/version/1.6.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const COMPONENTS_16 = [];
1+
export const COMPONENTS_16 = [];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,4 +186,4 @@ export const COMPONENTS_17 = [
186186
loadComponent: () => lazy(() => import('../Tree')),
187187
},
188188
// Add other components as needed
189-
];
189+
];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,4 +186,4 @@ export const COMPONENTS_20 = [
186186
loadComponent: () => lazy(() => import('../Tree')),
187187
},
188188
// Add other components as needed
189-
];
189+
];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,4 +186,4 @@ export const COMPONENTS_21 = [
186186
loadComponent: () => lazy(() => import('../Tree')),
187187
},
188188
// Add other components as needed
189-
];
189+
];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,4 +194,4 @@ export const COMPONENTS_CURRENT = [
194194
loadComponent: () => lazy(() => import('../Tree')),
195195
},
196196
// Add other components as needed
197-
];
197+
];

‎dev/src/components/samplePreviews/version/index.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { COMPONENTS_15 } from "./1.5";
2-
import { COMPONENTS_16 } from "./1.6";
3-
import { COMPONENTS_17 } from "./1.7";
4-
import { COMPONENTS_20 } from "./2.0";
5-
import { COMPONENTS_21 } from "./2.1";
6-
import { COMPONENTS_CURRENT } from "./current";
1+
import { COMPONENTS_15 } from './1.5';
2+
import { COMPONENTS_16 } from './1.6';
3+
import { COMPONENTS_17 } from './1.7';
4+
import { COMPONENTS_20 } from './2.0';
5+
import { COMPONENTS_21 } from './2.1';
6+
import { COMPONENTS_CURRENT } from './current';
77

88
export const COMPONENT_VERSIONS = {
9-
"1.5": COMPONENTS_15,
10-
"1.6": COMPONENTS_16,
11-
"1.7": COMPONENTS_17,
12-
"2.0": COMPONENTS_20,
13-
"2.1": COMPONENTS_21,
14-
"current": COMPONENTS_CURRENT
15-
}
9+
'1.5': COMPONENTS_15,
10+
'1.6': COMPONENTS_16,
11+
'1.7': COMPONENTS_17,
12+
'2.0': COMPONENTS_20,
13+
'2.1': COMPONENTS_21,
14+
current: COMPONENTS_CURRENT,
15+
};

‎dev/src/css/custom.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ kol-link-button {
158158

159159
.components-overview-item {
160160
position: relative;
161-
height: 300px;
161+
height: 350px;
162162
}
163163

164164
.components-overview-item a {

‎dev/src/css/loader.css

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -58,30 +58,35 @@
5858
/* Skeleton */
5959

6060
.skeleton {
61-
width: 100%;
62-
height: 100%;
63-
background-color: #e0e0e0;
64-
position: relative;
65-
overflow: hidden;
61+
width: 100%;
62+
height: 100%;
63+
background-color: #e0e0e0;
64+
position: relative;
65+
overflow: hidden;
6666
}
6767

6868
.skeleton::after {
69-
content: '';
70-
display: block;
71-
position: absolute;
72-
top: 0;
73-
left: -100%;
74-
height: 100%;
75-
width: 100%;
76-
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
77-
animation: skeleton-loading 1.5s infinite;
69+
content: '';
70+
display: block;
71+
position: absolute;
72+
top: 0;
73+
left: -100%;
74+
height: 100%;
75+
width: 100%;
76+
background: linear-gradient(
77+
90deg,
78+
rgba(255, 255, 255, 0) 0%,
79+
rgba(255, 255, 255, 0.8) 50%,
80+
rgba(255, 255, 255, 0) 100%
81+
);
82+
animation: skeleton-loading 1.5s infinite;
7883
}
7984

8085
@keyframes skeleton-loading {
81-
0% {
82-
left: -100%;
83-
}
84-
100% {
85-
left: 100%;
86-
}
86+
0% {
87+
left: -100%;
88+
}
89+
100% {
90+
left: 100%;
91+
}
8792
}

0 commit comments

Comments
 (0)