Skip to content

Commit e289280

Browse files
chrisalatdeleonio
chrisalat
authored and
deleonio
committed
(#6140) First version component overview (not final)
1 parent 8228b31 commit e289280

File tree

6 files changed

+337
-3
lines changed

6 files changed

+337
-3
lines changed

‎dev/docs/30-components/index.md

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎dev/docs/30-components/index.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Komponenten
3+
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.
4+
tags:
5+
- Beispiele
6+
---
7+
8+
import { ComponentList } from '@site/src/components/docs/ComponentList';
9+
10+
# Komponenten
11+
12+
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.
13+
14+
<ComponentList />

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import type { FC, MouseEvent, KeyboardEvent } from 'react';
2+
import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react';
3+
import { useHistory } from 'react-router-dom';
4+
import { KolCard } from '@public-ui/react';
5+
6+
import type { Component } from '../../shares/component';
7+
import { components } from '../../shares/component';
8+
9+
// iFrame styles
10+
const STYLES = {
11+
width: '100%',
12+
height: '250px',
13+
border: '0',
14+
overflow: 'hidden',
15+
pointerEvents: 'none' as 'none',
16+
};
17+
18+
const LazyLoadComponent: FC<Component> = ({ name, sample }) => {
19+
const history = useHistory();
20+
const ref = useRef<HTMLDivElement>(null);
21+
const [isVisible, setIsVisible] = useState<boolean>(false);
22+
23+
useEffect(() => {
24+
const observer = new IntersectionObserver((entries, obs) => {
25+
entries.forEach((entry) => {
26+
if (entry.isIntersecting) {
27+
setIsVisible(true);
28+
obs.disconnect();
29+
}
30+
})
31+
});
32+
observer.observe(ref.current as Element);
33+
}, []);
34+
35+
const sampleUrl = `/sample-react/#/${name}/${sample}?hideMenus`;
36+
const formattedComponentName = name.charAt(0).toUpperCase() + name.slice(1);
37+
38+
const handleRedirect = useCallback((event: MouseEvent<HTMLAnchorElement> | KeyboardEvent<HTMLAnchorElement>) => {
39+
if (event.type === 'click' || (event.type === 'keydown' && (event as React.KeyboardEvent).key === 'Enter')) {
40+
event.preventDefault();
41+
history.push(`/docs/next/components/${formattedComponentName}`)
42+
}
43+
return event
44+
}, [formattedComponentName])
45+
46+
const iframe = useMemo(() => (
47+
<iframe
48+
src={sampleUrl}
49+
style={STYLES}
50+
tabIndex={-1}
51+
title="kolibri-public-ui-code-samples"
52+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
53+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
54+
/>
55+
), [sampleUrl]);
56+
return (
57+
<div ref={ref} className="components-overview-item">
58+
{isVisible ? (
59+
<a
60+
tabIndex={0}
61+
onKeyDown={handleRedirect}
62+
onClick={handleRedirect}
63+
>
64+
<KolCard _level={2} _label={formattedComponentName}>
65+
{iframe}
66+
</KolCard>
67+
</a>
68+
) : <div className="skeleton"></div>}
69+
</div>
70+
);
71+
};
72+
73+
export const ComponentList: FC = () => (
74+
<div className="components-overview">
75+
{components.map(({ name, sample }) => (
76+
<LazyLoadComponent key={name} name={name} sample={sample} />
77+
))}
78+
</div>
79+
);

‎dev/src/css/custom.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,3 +146,15 @@ kol-link-button {
146146
color: #cc0000;
147147
background-color: #ffe6e6;
148148
}
149+
150+
/* Components Overview */
151+
152+
.components-overview {
153+
display: grid;
154+
grid-template-columns: 1fr 1fr;
155+
gap: 1rem;
156+
}
157+
158+
.components-overview-item {
159+
min-height: 250px;
160+
}

‎dev/src/css/loader.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,34 @@
5454
animation-duration: 3s;
5555
}
5656
}
57+
58+
/* Skeleton */
59+
60+
.skeleton {
61+
width: 100%;
62+
height: 100%;
63+
background-color: #e0e0e0;
64+
position: relative;
65+
overflow: hidden;
66+
}
67+
68+
.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;
78+
}
79+
80+
@keyframes skeleton-loading {
81+
0% {
82+
left: -100%;
83+
}
84+
100% {
85+
left: 100%;
86+
}
87+
}

‎dev/src/shares/component.ts

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
2+
export const components = [
3+
{
4+
name: 'abbr',
5+
sample: 'basic',
6+
},
7+
{
8+
name: 'accordion',
9+
sample: 'basic',
10+
},
11+
{
12+
name: 'alert',
13+
sample: 'basic',
14+
},
15+
{
16+
name: 'avatar',
17+
sample: 'basic',
18+
},
19+
{
20+
name: 'badge',
21+
sample: 'basic',
22+
},
23+
{
24+
name: 'breadcrumb',
25+
sample: 'basic',
26+
},
27+
{
28+
name: 'button',
29+
sample: 'basic',
30+
},
31+
{
32+
name: 'button-group',
33+
sample: 'basic',
34+
},
35+
{
36+
name: 'button-link',
37+
sample: 'basic',
38+
},
39+
{
40+
name: 'card',
41+
sample: 'basic',
42+
},
43+
// {
44+
// name: 'combobox',
45+
// sample: 'basic',
46+
// },
47+
{
48+
name: 'details',
49+
sample: 'basic',
50+
},
51+
{
52+
name: 'dialog',
53+
sample: 'basic',
54+
},
55+
{
56+
name: 'form',
57+
sample: 'basic',
58+
},
59+
{
60+
name: 'heading',
61+
sample: 'basic',
62+
},
63+
{
64+
name: 'icon',
65+
sample: 'basic',
66+
},
67+
{
68+
name: 'image',
69+
sample: 'basic',
70+
},
71+
{
72+
name: 'indented-text',
73+
sample: 'basic',
74+
},
75+
{
76+
name: 'input-checkbox',
77+
sample: 'basic',
78+
},
79+
{
80+
name: 'input-color',
81+
sample: 'basic',
82+
},
83+
{
84+
name: 'input-date',
85+
sample: 'basic',
86+
},
87+
{
88+
name: 'input-email',
89+
sample: 'basic',
90+
},
91+
{
92+
name: 'input-file',
93+
sample: 'basic',
94+
},
95+
{
96+
name: 'input-number',
97+
sample: 'basic',
98+
},
99+
{
100+
name: 'input-password',
101+
sample: 'basic',
102+
},
103+
{
104+
name: 'input-radio',
105+
sample: 'basic',
106+
},
107+
{
108+
name: 'input-range',
109+
sample: 'basic',
110+
},
111+
{
112+
name: 'input-text',
113+
sample: 'basic',
114+
},
115+
{
116+
name: 'link',
117+
sample: 'basic',
118+
},
119+
{
120+
name: 'link-button',
121+
sample: 'basic',
122+
},
123+
{
124+
name: 'link-group',
125+
sample: 'basic',
126+
},
127+
{
128+
name: 'modal',
129+
sample: 'basic',
130+
},
131+
{
132+
name: 'nav',
133+
sample: 'basic',
134+
},
135+
{
136+
name: 'pagination',
137+
sample: 'basic',
138+
},
139+
{
140+
name: 'popover',
141+
sample: 'basic',
142+
},
143+
{
144+
name: 'progress',
145+
sample: 'basic',
146+
},
147+
{
148+
name: 'quote',
149+
sample: 'basic',
150+
},
151+
{
152+
name: 'select',
153+
sample: 'basic',
154+
},
155+
{
156+
name: 'skip-nav',
157+
sample: 'basic',
158+
},
159+
{
160+
name: 'spin',
161+
sample: 'basic',
162+
},
163+
{
164+
name: 'split-button',
165+
sample: 'basic',
166+
},
167+
{
168+
name: 'table',
169+
sample: 'basic',
170+
},
171+
{
172+
name: 'tabs',
173+
sample: 'basic',
174+
},
175+
{
176+
name: 'textarea',
177+
sample: 'basic',
178+
},
179+
{
180+
name: 'toaster',
181+
sample: 'basic',
182+
},
183+
{
184+
name: 'toolbar',
185+
sample: 'basic',
186+
},
187+
{
188+
name: 'tooltip',
189+
sample: 'basic',
190+
},
191+
{
192+
name: 'tree',
193+
sample: 'basic',
194+
},
195+
];
196+
197+
export type ComponentName = typeof components[number]['name'];
198+
199+
export const getComponentByName = (name: ComponentName) => components.find(el => el.name === name)
200+
201+
export type Component = typeof components[number];

0 commit comments

Comments
 (0)