Merge pull request #2279 from telerik/create-vite-app

Create vite app

.github/workflows/ci.yml

@@ -5,8 +5,6 @@ on:
   push:
     branches-ignore:
       - master
-    paths-ignore:
-      - 'knowledge-base/**'
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
@@ -55,6 +53,8 @@ jobs:
               - 'examples/react-coffee-warehouse/**'
             react-grid-live-data:
               - 'examples/react-grid-live-data/**'
+            knowledge-base:
+                - 'docs/knowledge-base/examples/**'
 
       - name: Build Coffee warehouse nextjs app
         working-directory: ./examples/coffee-warehouse-nextjs
@@ -146,6 +146,13 @@ jobs:
       - name: Build React Grid Live Data app
         working-directory: ./examples/react-grid-live-data
         if: steps.changes.outputs.react-grid-live-data == 'true'
+        run: |
+          npm ci
+          npm run build
+          
+      - name: Build Knowledge Base Vite app
+        working-directory: ./docs/knowledge-base
+        if: steps.changes.outputs.knowledge-base == 'true'
         run: |
           npm ci
           npm run build

docs/_app.tsx

@@ -0,0 +1,139 @@
+import {
+    TreeList, TreeListCellProps, TreeListColumnProps, TreeListExpandChangeEvent,
+    TreeListToolbar,
+    extendDataItem, mapTree, mapTreeItem
+} from '@progress/kendo-react-treelist';
+import React from 'react';
+import { useMemo, useState } from 'react';
+import { RouteObject } from 'react-router-dom';
+
+interface RootProps {
+    routes: RouteObject[];
+}
+
+interface Entry {
+    id: any;
+    name: string;
+    items?: Entry[];
+    route?: RouteObject;
+}
+
+function createTree(routes: RouteObject[]) {
+    const tree: any = { name: "", items: [] };
+    let id = 0;
+    for (const route of routes) {
+        let currentNode = tree;
+        const routeNodes = route.path?.split('/') || [];
+        for (const node of routeNodes) {
+            const idx = currentNode.items.findIndex((item: any) => item.name === node);
+            if (idx === -1) {
+                const item: Entry = { id: id++, name: node, items: [] };
+                currentNode.items.push(item);
+                currentNode = item;
+            } else {
+                currentNode = currentNode.items[idx];
+            };
+        }
+        currentNode.route = route;
+
+    }
+
+    return tree.items;
+}
+
+const subItemsField = 'items';
+const expandField = 'expanded';
+const MIN_AUTOEXPAND_FILTER_LENGTH = 3;
+
+export default function Index({ routes }: RootProps) {
+    const initialTreeData = useMemo(() => createTree(routes), [routes]);
+    const [treeData, setTreeData] = useState(initialTreeData);
+
+    const [filter, setFilter] = useState('');
+    const allItemKeys = useMemo(() => Array.from(Array(routes.length).keys()), [routes]);
+    const [expandedItems, setExpandedItems] = useState([] as number[]);
+
+    const columns: TreeListColumnProps[] = [{
+        expandable: true,
+        title: 'Path',
+        field: 'name',
+        width: '30%'
+    }, {
+        title: 'Example',
+        cell: (props: TreeListCellProps) => (
+            <td>
+                {props.dataItem.route ?
+                    <a href={props.dataItem.route.path} target="_blank">{props.dataItem.route.path}</a> :
+                    null
+                }
+            </td>
+        )
+    }];
+
+    const onExpandChange = (e: TreeListExpandChangeEvent) => {
+        const expanded = !e.value;
+        const nextTreeData = [...treeData];
+
+        mapTreeItem(nextTreeData, e.level, subItemsField, item =>
+            extendDataItem(item, subItemsField, { [expandField]: expanded })
+        );
+
+        const nextExpandedItems = e.value ?
+            expandedItems.filter(id => id !== (e.dataItem as Entry).id) :
+            [...expandedItems, e.dataItem.id];
+
+        setTreeData(nextTreeData);
+        setExpandedItems(nextExpandedItems);
+    };
+
+    const onFilter = (e: any) => {
+        const value = (e.target as HTMLInputElement).value;
+        setFilter(value);
+        applyFilter(value);
+    };
+
+    const applyFilter = (value) => {
+        if (!value) {
+            setTreeData(initialTreeData);
+            setExpandedItems([]);
+            return;
+        }
+
+        const autoExpand = value.length > MIN_AUTOEXPAND_FILTER_LENGTH;
+        setExpandedItems(autoExpand ? allItemKeys : []);
+
+        try {
+            const regexp = new RegExp(value);
+            setTreeData(createTree(routes.filter(({ path }) => path?.match(regexp))));
+        } catch (e) {
+            /* noop */
+        }
+    };
+
+    const callback = item => expandedItems.includes(item.id) ?
+        extendDataItem(item, subItemsField, { [expandField]: true }) : item;
+
+    return (
+        <div className="examples-list">
+            <TreeList
+                data={mapTree(treeData, subItemsField, callback)} 
+                expandField={expandField}
+                subItemsField={subItemsField}
+                onExpandChange={onExpandChange}
+                sortable={true}
+                columns={columns}
+                toolbar={
+                    <TreeListToolbar>
+                        <label>
+                            <input style={{ margin: '0 1em' }}
+                                autoFocus={true}
+                                value={filter}
+                                onInput={onFilter} />
+                            <span>Filter examples (<code>RegExp</code>)</span>
+                        </label>
+                    </TreeListToolbar>
+                }
+            />
+        </div>
+    );
+}

docs/_error.tsx

@@ -0,0 +1,15 @@
+import { useRouteError } from 'react-router-dom';
+
+export default function ErrorPage() {
+    const error = useRouteError() as { statusText: string; message: string };
+    console.error(error);
+
+    return (
+        <div id="error-page">
+            <h1>Error</h1>
+            <p>
+                <code>{error.statusText || error.message}</code>
+            </p>
+        </div>
+    );
+}

docs/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React</title>
+  <base href="/" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <link rel="stylesheet" href="./styles.scss" />
+</head>
+
+<body>
+  <my-app>
+    <script type="module" src="./main.tsx"></script>
+  </my-app>
+</body>
+
+</html>

knowledge-base/add-custom-event-to-the-editor.md → docs/knowledge-base/add-custom-event-to-the-editor.md

@@ -36,5 +36,5 @@ This is an example showcasing how to attach the onColumnMenu, onBlur and onClick
 
 {% meta height:340 %}
 {% embed_file editor/attach-events/app.jsx preview %}
-{% embed_file editor/attach-events/main.jsx preview %}
+{% embed_file editor/attach-events/main.jsx %}
 {% endmeta %}

knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools.md → docs/knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools.md

@@ -40,7 +40,8 @@ We need to create a tool, that will insert text content and add the built-in sty
 This is an example showcasing how to achieve this:
 
 {% meta height:420 %}
-{% embed_file editor/add-span-with-class/main.jsx preview %}
+{% embed_file editor/add-span-with-class/app.jsx preview %}
+{% embed_file editor/add-span-with-class/main.jsx %}
 {% endmeta %}
 
 ## Insert Non Editable Node
@@ -52,7 +53,8 @@ How to insert non editable predefined node in the Editor?
 This can be achieved by creating a tool that will insert a non editable [Node](https://prosemirror.net/docs/ref/#model.Node). This Node will function as a single element and will be removed with a single key press.
 
 {% meta height:420 %}
-{% embed_file editor/add-non-editable-element/main.jsx preview %}
+{% embed_file editor/add-non-editable-element/app.jsx preview %}
+{% embed_file editor/add-non-editable-element/main.jsx %}
 {% embed_file editor/add-non-editable-element/InsertShortcodeTool.jsx %}
 {% endmeta %}
 
@@ -65,7 +67,8 @@ How to make a tool that will apply custom font size to the selected content.
 This can be achieved with a custom [DropDownList tool]({% slug api_editor_EditorTools_createstyledropdownlist %}) that will apply the custom font-size based on array of font-size values.
 
 {% meta height:420 %}
-{% embed_file editor/custom-font-size-tool/main.jsx preview %}
+{% embed_file editor/custom-font-size-tool/app.jsx preview %}
+{% embed_file editor/custom-font-size-tool/main.jsx %}
 {% embed_file editor/custom-font-size-tool/customFontSize.jsx %}
 {% endmeta %}
 
@@ -86,7 +89,8 @@ How to create a tool that clears the inline formatting?
 This example show how to add the background color, font color and clear format tools:
 
 {% meta height:420 %}
-{% embed_file editor/custom-tools/main.jsx preview %}
+{% embed_file editor/custom-tools/app.jsx preview %}
+{% embed_file editor/custom-tools/main.jsx %}
 {% embed_file editor/custom-tools/backgroundColorTool.jsx %}
 {% embed_file editor/custom-tools/clearAll.jsx %}
 {% embed_file editor/custom-tools/myColorTool.jsx %}

knowledge-base/bottomnavigation-change-content.md → docs/knowledge-base/bottomnavigation-change-content.md

@@ -32,5 +32,6 @@ I want to change the main content when the BottomNavigation selection changes
 For achieving the desired result the onSelect event of the BottomNavigation can be used for determining which item was selected. Based on that selection the main rendered content (component) can be changed
 
 {% meta id height:360 %}
-{% embed_file layout/bottomnavigation-change-content/main.jsx preview %}
+{% embed_file layout/bottomnavigation-change-content/app.jsx preview %}
+{% embed_file layout/bottomnavigation-change-content/main.jsx %}
 {% endmeta %}

knowledge-base/chart-color-by-category.md → docs/knowledge-base/chart-color-by-category.md

@@ -35,6 +35,7 @@ The color property of the ChartSeriesItem accepts function where the dataItem is
 This is an example showcasing how to limit the value:
 
 {% meta id:index height:760 %}
-{% embed_file charts/chart-color-by-category/main.jsx preview %}
-{% embed_file charts/chart-color-by-category/bubble-data.json preview %}
+{% embed_file charts/chart-color-by-category/app.jsx preview %}
+{% embed_file charts/chart-color-by-category/main.jsx %}
+{% embed_file charts/chart-color-by-category/bubble-data.json %}
 {% endmeta %}

knowledge-base/chart-heatmap-custom-series-item.md → docs/knowledge-base/chart-heatmap-custom-series-item.md

@@ -35,5 +35,6 @@ Set custom visual for ChartSeriesItem and draw custom shape with border radius.
 This is an example demonstrating the above approach:
 
 {% meta id height:660 %}
-{% embed_file charts/heatmap-custom-series-item/main.jsx preview %}
+{% embed_file charts/heatmap-custom-series-item/app.jsx preview %}
+{% embed_file charts/heatmap-custom-series-item/main.jsx %}
 {% endmeta %}

knowledge-base/chart-limiting-axis-labels-count.md → docs/knowledge-base/chart-limiting-axis-labels-count.md

@@ -35,6 +35,7 @@ Limiting the number of the axis labels can be achieved by setting the "ChartCate
 Here is an example with the described approach:
 
 {% meta id height:340 %}
-{% embed_file charts/limiting-axis-labels-count/main.jsx preview %}
+{% embed_file charts/limiting-axis-labels-count/app.jsx preview %}
+{% embed_file charts/limiting-axis-labels-count/main.jsx %}
 {% endmeta %}
 

knowledge-base/chart-rounded-bar-corners.md → docs/knowledge-base/chart-rounded-bar-corners.md

@@ -35,5 +35,6 @@ Changing the rendering of the Chart elements can be achieved by defining custom
 This is an example showcasing how to limit the value:
 
 {% meta id height:540 %}
-{% embed_file charts/chart-rounded-bar-corners/main.jsx preview %}
+{% embed_file charts/chart-rounded-bar-corners/app.jsx preview %}
+{% embed_file charts/chart-rounded-bar-corners/main.jsx %}
 {% endmeta %}

knowledge-base/chart-set-multiple-x-axes.md → docs/knowledge-base/chart-set-multiple-x-axes.md

@@ -35,5 +35,6 @@ How can I set multiple x-axes for a chart?
 Use the [axisCrossingValue](https://www.telerik.com/kendo-react-ui/components/charts/api/ChartCategoryAxisItemProps/#toc-axiscrossingvalue) in order to pass the values for the overlapping axes:
 
 {% meta id:index height:600 %}
-{% embed_file charts/set-multiple-x-axes/main.jsx preview %}
+{% embed_file charts/set-multiple-x-axes/app.jsx preview %}
+{% embed_file charts/set-multiple-x-axes/main.jsx %}
 {% endmeta %}

knowledge-base/chart-set-plotbands-on-plot-click.md → docs/knowledge-base/chart-set-plotbands-on-plot-click.md

@@ -41,5 +41,6 @@ Optional: In order to avoid the Chart to play animations each time the PlotBands
 
 
 {% meta id height:520 %}
-{% embed_file charts/set-plotbands-on-plot-area-click/main.jsx preview %}
+{% embed_file charts/set-plotbands-on-plot-area-click/app.jsx preview %}
+{% embed_file charts/set-plotbands-on-plot-area-click/main.jsx %}
 {% endmeta %}

knowledge-base/chat-croll-to-bottom.md → docs/knowledge-base/chat-croll-to-bottom.md

@@ -34,5 +34,6 @@ When the user sends the first message, the Conversational UI scrolls to the bott
 This can be achieved by adjusting the scrollTop of the `.k-message-list` container on the [onMessageSend](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/ChatProps/#toc-onmessagesend) event:
 
 {% meta id:index height:900 %}
-{% embed_file conversational-ui/chat-scroll-to-bottom/main.jsx preview %}
+{% embed_file conversational-ui/chat-scroll-to-bottom/app.jsx preview %}
+{% embed_file conversational-ui/chat-scroll-to-bottom/main.jsx %}
 {% endmeta %}

knowledge-base/chat-maxlength-char-count.md → docs/knowledge-base/chat-maxlength-char-count.md

@@ -33,5 +33,6 @@ How to show the number of characters as the user types and set a maxLength for t
 To set a `maxLength` render a custom [`Input`]({% slug overview_textbox %}) component and set the value for the [`maxLength`]({% slug api_inputs_input %}#toc-maxLength) prop to the preferred value. To see the character count as the user types, display the [`value`]({% slug api_inputs_input %}#toc-value) variable in the custom component markup. For more information on how to customize the Chat component refer to the [`customization`]({% slug custom-rendering_chat %})
 
 {% meta id:index height:900 %}
-{% embed_file conversational-ui/chat-maxlength-char-count/main.tsx preview %}
+{% embed_file conversational-ui/chat-maxlength-char-count/app.tsx preview %}
+{% embed_file conversational-ui/chat-maxlength-char-count/main.tsx %}
 {% endmeta %}

knowledge-base/combobox-open-on-focus-and-tab.md → docs/knowledge-base/combobox-open-on-focus-and-tab.md

@@ -35,5 +35,6 @@ Handle the onFocus event of the ComboBox and within a setTimeout function check
 Here is an example demonstrating this approach:
 
 {% meta id height:560 %}
-{% embed_file dropdowns/combobox-open-on-focus-and-tab/main.jsx preview %}
+{% embed_file dropdowns/combobox-open-on-focus-and-tab/app.jsx preview %}
+{% embed_file dropdowns/combobox-open-on-focus-and-tab/main.jsx %}
 {% endmeta %}

knowledge-base/combobox-open-popup-initially.md → docs/knowledge-base/combobox-open-popup-initially.md

@@ -35,5 +35,6 @@ For manually opening the popup of the ComboBox after the initialization we can u
 Here is an example demonstrating this approach:
 
 {% meta id height:480 %}
-{% embed_file dropdowns/combobox-open-popup-initially/main.jsx preview %}
+{% embed_file dropdowns/combobox-open-popup-initially/app.jsx preview %}
+{% embed_file dropdowns/combobox-open-popup-initially/main.jsx %}
 {% endmeta %}

knowledge-base/custom-colors-in-chart-series.md → docs/knowledge-base/custom-colors-in-chart-series.md

@@ -31,5 +31,6 @@ How can I use the API for implementations such as using assigned customized colo
 Use the [`color`]({% slug api_charts_chartseriesitemprops %}#toc-color) or the [`colorField`]({% slug api_charts_chartseriesitemprops %}#toc-colorfield) props of the `ChartSeriesItem`.
 
 {% meta id height:500 %}
-{% embed_file charts/set-colors/main.jsx preview %}
+{% embed_file charts/set-colors/app.jsx preview %}
+{% embed_file charts/set-colors/main.jsx %}
 {% endmeta %}

knowledge-base/custom-expand-collapse-column.md → docs/knowledge-base/custom-expand-collapse-column.md

@@ -40,6 +40,7 @@ To modify the expand/collapse column of the Grid:
 Following is an example demonstrating this approach:
 
 {% meta id height:540 %}
-{% embed_file grid/custom-expand-collapse-column/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/custom-expand-collapse-column/app.jsx preview %}
+{% embed_file grid/custom-expand-collapse-column/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}

knowledge-base/daterangepicker-error-message-invalid-date.md → docs/knowledge-base/daterangepicker-error-message-invalid-date.md

@@ -35,7 +35,8 @@ You can achieve this by custom rendering the date inputs which allows you to get
 Here is an example demonstrating this approach:
 
 {% meta id height:480 %}
-{% embed_file dropdowns/daterangepicker-validation/main.jsx preview %}
+{% embed_file dropdowns/daterangepicker-validation/app.jsx preview %}
+{% embed_file dropdowns/daterangepicker-validation/main.jsx %}
 {% embed_file dropdowns/daterangepicker-validation/customStartDateInput.jsx %}
 {% embed_file dropdowns/daterangepicker-validation/customEndDateInput.jsx %}
 {% endmeta %}

knowledge-base/daterangepicker-predefined-ranges.md → docs/knowledge-base/daterangepicker-predefined-ranges.md

@@ -35,6 +35,7 @@ For achieving the desired result a custom Popup must be defined for the DateRang
 This is an example showcasing how to limit the value:
 
 {% meta id:index height:560 %}
-{% embed_file dateinputs/daterangepicker-predefined-ranges/main.jsx preview %}
+{% embed_file dateinputs/daterangepicker-predefined-ranges/app.jsx preview %}
+{% embed_file dateinputs/daterangepicker-predefined-ranges/main.jsx %}
 {% embed_file dateinputs/daterangepicker-predefined-ranges/styles.css %}
 {% endmeta %}

knowledge-base/daterangepicker-validate-range.md → docs/knowledge-base/daterangepicker-validate-range.md

@@ -35,5 +35,6 @@ Set the "valid" property of the DateRangePicker to a state variable that can be
 This is an example showcasing the approach:
 
 {% meta id height:560 %}
-{% embed_file dateinputs/daterangepicker-validate-range/main.jsx preview %}
+{% embed_file dateinputs/daterangepicker-validate-range/app.jsx preview %}
+{% embed_file dateinputs/daterangepicker-validate-range/main.jsx %}
 {% endmeta %}