From e728b1454a5ec3525809a4e0b91860f6d68e7cea Mon Sep 17 00:00:00 2001
From: Zhuliyan Penkov <penkov@progress.com>
Date: Thu, 14 Nov 2024 11:49:35 +0200
Subject: [PATCH] feat(html): add propertygrid spec

---
 packages/html/src/index.ts                    |  1 +
 packages/html/src/propertygrid/index.ts       |  3 +
 .../src/propertygrid/propertygrid.spec.tsx    | 33 +++++++
 .../templates/propertygrid-normal.tsx         | 98 +++++++++++++++++++
 .../templates/propertygrid-with-preview.tsx   | 14 +++
 .../src/propertygrid/tests/propertygrid.tsx   | 18 ++++
 6 files changed, 167 insertions(+)
 create mode 100644 packages/html/src/propertygrid/index.ts
 create mode 100644 packages/html/src/propertygrid/propertygrid.spec.tsx
 create mode 100644 packages/html/src/propertygrid/templates/propertygrid-normal.tsx
 create mode 100644 packages/html/src/propertygrid/templates/propertygrid-with-preview.tsx
 create mode 100644 packages/html/src/propertygrid/tests/propertygrid.tsx

diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index 1661fa55a08..ba26af177bd 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -104,6 +104,7 @@ export * from './grid/index';
 export * from './listview/index';
 export * from './spreadsheet/index';
 export * from './pivotgrid/index';
+export * from './propertygrid/index';
 export * from './treelist/index';
 export * from './filter/index';
 export * from './filemanager/index';
diff --git a/packages/html/src/propertygrid/index.ts b/packages/html/src/propertygrid/index.ts
new file mode 100644
index 00000000000..d78dec1781b
--- /dev/null
+++ b/packages/html/src/propertygrid/index.ts
@@ -0,0 +1,3 @@
+export * from './propertygrid.spec';
+export * from './templates/propertygrid-normal';
+export * from './templates/propertygrid-with-preview';
diff --git a/packages/html/src/propertygrid/propertygrid.spec.tsx b/packages/html/src/propertygrid/propertygrid.spec.tsx
new file mode 100644
index 00000000000..64f551d57e2
--- /dev/null
+++ b/packages/html/src/propertygrid/propertygrid.spec.tsx
@@ -0,0 +1,33 @@
+import { classNames } from '../misc';
+import { KendoGridProps } from '../grid';
+import { TreeList } from '../treelist';
+
+const PROPERTYGRID_CLASSNAME = 'k-property-grid';
+
+const states = [];
+
+const options = {};
+
+const defaultOptions = {};
+
+export const PropertyGrid = (
+    props: KendoGridProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => (
+    <TreeList
+        {...props}
+        className={classNames(
+            PROPERTYGRID_CLASSNAME,
+            props.className
+        )}
+    >
+        {props.children}
+    </TreeList>
+);
+
+PropertyGrid.states = states;
+PropertyGrid.options = options;
+PropertyGrid.className = PROPERTYGRID_CLASSNAME;
+PropertyGrid.defaultOptions = defaultOptions;
+
+export default PropertyGrid;
diff --git a/packages/html/src/propertygrid/templates/propertygrid-normal.tsx b/packages/html/src/propertygrid/templates/propertygrid-normal.tsx
new file mode 100644
index 00000000000..fa79bf9e941
--- /dev/null
+++ b/packages/html/src/propertygrid/templates/propertygrid-normal.tsx
@@ -0,0 +1,98 @@
+import { PropertyGrid } from "..";
+import { Button } from "../../button";
+import { DropdownList } from "../../dropdownlist";
+import { GridToolbar, GridContainer, GridContent, GridTable } from "../../grid";
+import { Icon } from "../../icon";
+import { TableTbody, TableRow, TableTd } from "../../table";
+import { Textbox } from "../../textbox";
+
+export const PropertyGridNormal = ({ content, ...other }: any) => (
+    <PropertyGrid
+        style={{ height: "450px" }}
+        toolbar={(
+            <GridToolbar resizable>
+                <Textbox prefix={<Icon icon="search" />} placeholder="Search..." />
+                <DropdownList value="Default Sort" />
+                <Button icon="categorize" />
+                <Button icon="info-circle" />
+            </GridToolbar>
+        )}
+        {...other}
+    >
+        <GridContainer>
+            {content ||
+                <GridContent className="k-auto-scrollable">
+                    <GridTable>
+                        <colgroup>
+                            <col style={{ width: "200px" }} />
+                            <col style={{ width: "250px" }} />
+                        </colgroup>
+                        <TableTbody>
+                            <TableRow>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    size
+                                </TableTd>
+                                <TableTd><b>medium</b></TableTd>
+                            </TableRow>
+                            <TableRow className="k-alt" alt>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    themeColor
+                                </TableTd>
+                                <TableTd><b>base</b></TableTd>
+                            </TableRow>
+                            <TableRow>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    fillMode
+                                </TableTd>
+                                <TableTd><b>solid</b></TableTd>
+                            </TableRow>
+                            <TableRow className="k-alt" alt>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    rounded
+                                </TableTd>
+                                <TableTd><b>medium</b></TableTd>
+                            </TableRow>
+                            <TableRow>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    icon
+                                </TableTd>
+                                <TableTd><Icon icon="star" /></TableTd>
+                            </TableRow>
+                            <TableRow className="k-alt" alt>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="caret-alt-down"></Icon>
+                                    font
+                                </TableTd>
+                                <TableTd>Roboto 400</TableTd>
+                            </TableRow>
+                            <TableRow>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    font-weight
+                                </TableTd>
+                                <TableTd><b>400</b></TableTd>
+                            </TableRow>
+                            <TableRow className="k-alt" alt>
+                                <TableTd>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    <Icon className="k-treelist-toggle" icon="none"></Icon>
+                                    font-family
+                                </TableTd>
+                                <TableTd><b>Roboto</b></TableTd>
+                            </TableRow>
+                            <TableRow className="k-hidden k-bottom k-sticky k-footer-template">
+                                <TableTd colspan="2"><span>&nbsp;</span></TableTd>
+                            </TableRow>
+                        </TableTbody>
+                    </GridTable>
+                </GridContent>
+            }
+        </GridContainer>
+    </PropertyGrid>
+);
diff --git a/packages/html/src/propertygrid/templates/propertygrid-with-preview.tsx b/packages/html/src/propertygrid/templates/propertygrid-with-preview.tsx
new file mode 100644
index 00000000000..164ba6306ee
--- /dev/null
+++ b/packages/html/src/propertygrid/templates/propertygrid-with-preview.tsx
@@ -0,0 +1,14 @@
+import { PropertyGridNormal } from "..";
+import { Button } from "../../button";
+import { Splitter, SplitterPane } from "../../splitter";
+
+export const PropertyGridWithPreview = ({ content, ...other }: any) => (
+    <Splitter>
+        <SplitterPane scrollable flexBasis="215px">
+            <Button icon="star">Button</Button>
+        </SplitterPane>
+        <SplitterPane scrollable>
+            <PropertyGridNormal {...other} content={content} />
+        </SplitterPane>
+    </Splitter>
+);
diff --git a/packages/html/src/propertygrid/tests/propertygrid.tsx b/packages/html/src/propertygrid/tests/propertygrid.tsx
new file mode 100644
index 00000000000..95ab1b9ec85
--- /dev/null
+++ b/packages/html/src/propertygrid/tests/propertygrid.tsx
@@ -0,0 +1,18 @@
+import { PropertyGridWithPreview } from "..";
+
+const styles = `
+    .k-pane:nth-child(1) {
+        text-align: center;
+        margin-top: 10%;
+    }
+`;
+
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <PropertyGridWithPreview />
+        </div>
+    </>
+);