Skip to content

feat(preview): Add interactive TreePreview component #674

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(preview): Add interactive TreePreview component #674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 5 additions & 37 deletions docs/30-components/tree.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ tags:
---

import Readme from '../../readmes/tree/readme.md';
import TreePreview from '@site/src/components/previews/components/Tree';
import { ExampleLink } from '@site/src/components/ExampleLink';

# Tree
Expand All @@ -17,43 +18,10 @@ Synonyme: List, Navigation

Die **Tree**-Komponente stellt eine hierarchische Liste dar, in der jedes Element untergeordnete Einträge enthalten kann. Elemente mit Kindelementen lassen sich ein- oder ausklappen, um die untergeordnete Ebene anzuzeigen oder auszublenden.

### Code

```html
<kol-tree _label="Sitemap">
<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
<kol-tree-item _label="Page 1" _href="#" _open>
<kol-tree-item _label="Subpage 1" _href="#" _open>
<kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
</kol-tree-item>
<kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
<kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
<kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
</kol-tree-item>
<kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
</kol-tree>
```

### Beispiel

<kol-tree _label="Sitemap">
<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
<kol-tree-item _label="Page 1" _href="#" _open>
<kol-tree-item _label="Subpage 1" _href="#" _open>
<kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
</kol-tree-item>
<kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
<kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
<kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
</kol-tree-item>
<kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
</kol-tree>
<TreePreview
codeCollapsable
codeCollapsed
/>

## Verwendung

Expand Down
9 changes: 9 additions & 0 deletions i18n/de/code.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,6 +519,15 @@
"preview.component.image.label": {
"message": "Beispielbild"
},
"preview.component.tree.label": {
"message": "Sitemap"
},
"preview.component.tree.items.edit": {
"message": "Einträge bearbeiten"
},
"preview.component.tree.items.closeedit": {
"message": "Bearbeitung schließen"
},
"preview.property.remove": {
"message": "Entfernen"
},
Expand Down
9 changes: 9 additions & 0 deletions i18n/en/code.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,6 +519,15 @@
"preview.component.image.label": {
"message": "Sample image"
},
"preview.component.tree.label": {
"message": "Sitemap"
},
"preview.component.tree.items.edit": {
"message": "Edit Items"
},
"preview.component.tree.items.closeedit": {
"message": "Close Editor"
},
"preview.property.remove": {
"message": "Remove"
},
Expand Down
42 changes: 5 additions & 37 deletions i18n/en/docusaurus-plugin-content-docs/current/30-components/tree.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ description: Description, specification and examples for the Tree component.
---

import Readme from '/readmes/tree/readme.md';
import TreePreview from '@site/src/components/previews/components/Tree';
import { ExampleLink } from '@site/src/components/ExampleLink';

#Tree
Expand All @@ -12,43 +13,10 @@ Synonyms: cunning, navigation

The **Tree** component represents a hierarchical list in which each element can contain child entries. Elements with child elements can be collapsed or expanded to show or hide the child level.

### Code

```html
<kol-tree _label="Sitemap">
<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
<kol-tree-item _label="Page 1" _href="#" _open>
<kol-tree-item _label="Subpage 1" _href="#" _open>
<kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
</kol-tree-item>
<kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
<kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
<kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
</kol-tree-item>
<kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
</kol-tree>
```

### Example

<kol-tree _label="Sitemap">
<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
<kol-tree-item _label="Page 1" _href="#" _open>
<kol-tree-item _label="Subpage 1" _href="#" _open>
<kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
<kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
</kol-tree-item>
<kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
<kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
<kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
</kol-tree-item>
<kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
</kol-tree>
<TreePreview
codeCollapsable
codeCollapsed
/>

## Usage

Expand Down
109 changes: 109 additions & 0 deletions src/components/previews/components/Tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import React from 'react';
import Preview, { PreviewLayout } from '../Preview';
import type { JSX } from '@public-ui/components';
import { KolInputText, KolTree, KolTreeItem } from '@public-ui/react-v19';
import TreeItemsProperty from '../properties/TreeItemsProperty';
import type { TreeItemData } from '../properties/TreeItemsProperty';
import { translate } from '@docusaurus/Translate';

type TreePreviewProps = JSX.KolTree & { _items?: TreeItemData[] };

interface TreePreviewComponentProps {
initialProps?: TreePreviewProps;
visibleProperties?: (keyof JSX.KolTree | '_items')[];
codeCollapsable?: boolean;
codeCollapsed?: boolean;
}

const TreePreview: React.FC<TreePreviewComponentProps> = (props) => {
const defaultProps = React.useMemo<TreePreviewProps>(
() => ({
_label: translate({ id: 'preview.component.tree.label' }),
_items: [],
}),
[],
);

const formatSource = (currentProps: TreePreviewProps): string => {
const { _items, ...treeProps } = currentProps;
const items = _items ?? [];

const propsString = Object.entries(treeProps as Record<string, unknown>)
.filter(([, value]) => value !== undefined && value !== null && value !== '')
.map(([key, value]) => {
if (typeof value === 'string') return `\n ${key}="${value}"`;
if (typeof value === 'boolean') return value ? `\n ${key}` : '';
if (typeof value === 'number') return `\n ${key}={${value}}`;
return `\n ${key}={${JSON.stringify(value)}}`;
})
.sort()
.join('');

const formatItem = (item: TreeItemData, indent: number): string => {
const pad = ' '.repeat(indent);
const { _children, ...rest } = item;
const itemProps = Object.entries(rest as Record<string, unknown>)
.filter(([, value]) => value !== undefined && value !== null && value !== '')
.map(([key, value]) => {
if (typeof value === 'string') return ` ${key}="${value}"`;
if (typeof value === 'boolean') return value ? ` ${key}` : '';
if (typeof value === 'number') return ` ${key}={${value}}`;
return ` ${key}={${JSON.stringify(value)}}`;
})
.join('');

if (_children && _children.length > 0) {
const childrenString = _children.map((child) => formatItem(child, indent + 1)).join('\n');
return `${pad}<KolTreeItem${itemProps}>\n${childrenString}\n${pad}</KolTreeItem>`;
}
return `${pad}<KolTreeItem${itemProps} />`;
};

const itemsString = items.map((item) => formatItem(item, 1)).join('\n');

return `<KolTree${propsString}\n>\n${itemsString}\n</KolTree>`;
};

return (
<Preview<TreePreviewProps>
propertyComponents={{
_label: <KolInputText _label="Label" />,
_items: <TreeItemsProperty label="Items" />,
}}
initialProps={{ ...defaultProps, ...props.initialProps }}
componentName="KolTree"
visibleProperties={props.visibleProperties}
codeCollapsable={props.codeCollapsable}
codeCollapsed={props.codeCollapsed}
layout={PreviewLayout.DEFAULT}
sourceFormatter={formatSource}
>
{(componentProps) => {
const { _items, ...treeProps } = componentProps;
const items = _items ?? [];

const renderItem = (item: TreeItemData, index: number): React.ReactNode => {
const { _children, _href = '', ...itemProps } = item;
if (_children && _children.length > 0) {
return (
<KolTreeItem key={index} _href={_href} {...itemProps}>
{_children.map((child, childIndex) => renderItem(child, childIndex))}
</KolTreeItem>
);
}
return <KolTreeItem key={index} _href={_href} {...itemProps} />;
};

return (
<div className="min-h-44">
<KolTree {...treeProps}>
{items.map((item, index) => renderItem(item, index))}
</KolTree>
</div>
);
}}
</Preview>
);
};

export default TreePreview;
Loading
Loading