@nu-art/thunderstorm-frontend 0.400.5

package/_ats/ATS_EditableItem/ATS_EditableItem.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ATS_Frontend } from '../../components/TS_AppTools/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TS_EditableContent } from '../../components/TS_EditableContent/TS_EditableContent.js';
+import { LL_V_L } from '../../components/Layouts/index.js';
+import { TS_PropRenderer } from '../../components/TS_PropRenderer/index.js';
+import { EditableDBItemV3 } from '../../utils/EditableItem.js';
+import { TS_DropDown } from '../../components/TS_Dropdown/index.js';
+import { SimpleListAdapter } from '../../components/adapter/Adapter.js';
+import { ModuleFE_EditableTest } from '../../_entity/editable-test/index.js';
+export class ATS_EditableItemTesting extends ComponentSync {
+    static defaultProps = {};
+    static screen = {
+        name: 'Editable Item Testing',
+        key: 'editable-item-testing',
+        modulesToAwait: [ModuleFE_EditableTest],
+        renderer: this,
+        group: ATS_Frontend
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.editableItem ??= this.getEditableItem();
+        return state;
+    }
+    getInitialItem() {
+        return ModuleFE_EditableTest.cache.allMutable()[0] ?? { a: '', b: '', c: '', d: '' };
+    }
+    getEditableItem() {
+        return new EditableDBItemV3(this.getInitialItem(), ModuleFE_EditableTest)
+            .setSaveAction(async (dbItem) => {
+            this.setState({ editableItem: this.state.editableItem });
+            return dbItem;
+        })
+            .setOnChanged(async (editable) => this.setState({ editableItem: editable })).setAutoSave(true);
+    }
+    render() {
+        return _jsx("div", { children: _jsx(EditableItemTestEditor, { editable: this.state.editableItem }) });
+    }
+}
+// const EditableInput = TS_InputV2.editable({type: 'text', saveEvent: ['accept', 'blur']});
+const Dropdown_Zevel = TS_DropDown.prepareEditable({
+    adapter: SimpleListAdapter(['ani', 'pah', 'zevel'], item => _jsx(_Fragment, { children: item.item })),
+    placeholder: 'select pah zevel'
+});
+class EditableItemTestEditor extends TS_EditableContent {
+    render() {
+        return _jsxs(LL_V_L, { children: [_jsxs(TS_PropRenderer.Vertical, { label: 'Prop A', children: [_jsx(Dropdown_Zevel, { editable: this.state.editable, prop: 'a' }), this.state.editable.get('a') === 'zevel' && _jsx("div", { children: this.state.editable.get('a') })] }), _jsx(TS_PropRenderer.Vertical, { label: 'Prop B', children: _jsx(Dropdown_Zevel, { editable: this.state.editable, prop: 'b' }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Prop C', children: _jsx(Dropdown_Zevel, { editable: this.state.editable, prop: 'c' }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Prop D', children: _jsx(Dropdown_Zevel, { editable: this.state.editable, prop: 'd' }) })] });
+    }
+}

package/_ats/ATS_IDBCacheComparison/ATS_IDBCacheComparison.d.ts

@@ -0,0 +1,18 @@
+import './ATS_IDBCacheComparison.scss';
+import { AppToolsScreen } from '../../components/TS_AppTools/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type State = {
+    collectionDetails: {
+        dbKey: string;
+        idbCount: number;
+        cacheCount: number;
+    }[];
+};
+type Props = {};
+export declare class ATS_IDBCacheComparison extends ComponentSync<Props, State> {
+    static screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: {}, state?: State): State;
+    private static getCollectionModules;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/ATS_IDBCacheComparison/ATS_IDBCacheComparison.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './ATS_IDBCacheComparison.scss';
+import { ATS_Frontend } from '../../components/TS_AppTools/index.js';
+import { RuntimeModules } from '@nu-art/ts-common';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { Component_CollectionGrid } from './Component_CollectionGrid.js';
+export class ATS_IDBCacheComparison extends ComponentSync {
+    static screen = {
+        name: 'IDB<>CACHE View',
+        key: 'idb<>cache',
+        renderer: this,
+        group: ATS_Frontend,
+        modulesToAwait: () => this.getCollectionModules()
+    };
+    // ######################## Life Cycle ########################
+    deriveStateFromProps(nextProps, state) {
+        state ??= this.state ? { ...this.state } : {};
+        return state;
+    }
+    static getCollectionModules() {
+        const modules = RuntimeModules().filter((module) => !!module.dbDef?.dbKey)
+            .filter(module => module.dbDef.dbKey !== 'data-input-logs');
+        return modules;
+    }
+    render() {
+        return _jsx("div", { className: 'ats__idb-cache', children: _jsx(Component_CollectionGrid, { modules: ATS_IDBCacheComparison.getCollectionModules() }) });
+    }
+}

package/_ats/ATS_IDBCacheComparison/ATS_IDBCacheComparison.scss

@@ -0,0 +1,7 @@
+@use '@nu-art/ts-styles' as styles;
+
+.ats__idb-cache {
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+}

package/_ats/ATS_IDBCacheComparison/Component_CollectionGrid.d.ts

@@ -0,0 +1,23 @@
+import { TypedMap } from '@nu-art/ts-common';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ModuleFE_BaseDB } from '../../modules/db-api-gen/ModuleFE_BaseDB.js';
+import './Component_CollectionGrid.scss';
+type Props = {
+    modules: ModuleFE_BaseDB<any>[];
+};
+type State = {
+    modules: ModuleFE_BaseDB<any>[];
+    idbCountMap: TypedMap<number>;
+    cacheCountMap: TypedMap<number>;
+};
+export declare class Component_CollectionGrid extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void;
+    private refreshCountMaps;
+    private getSortedDBKeys;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderHeaders;
+    private renderDataForKey;
+}
+export {};

package/_ats/ATS_IDBCacheComparison/Component_CollectionGrid.js

@@ -0,0 +1,66 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { compare, filterInstances, sortArray } from '@nu-art/ts-common';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { Grid } from '../../components/Layouts/index.js';
+import './Component_CollectionGrid.scss';
+import { _className } from '../../utils/tools.js';
+export class Component_CollectionGrid extends ComponentSync {
+    // ######################## Life Cycle ########################
+    deriveStateFromProps(nextProps, state) {
+        state.modules = nextProps.modules;
+        state.cacheCountMap ??= {};
+        state.idbCountMap ??= {};
+        return state;
+    }
+    componentDidMount() {
+        this.refreshCountMaps();
+    }
+    componentDidUpdate(prevProps, prevState) {
+        const prevModuleKeys = prevState.modules.map(module => module.dbDef.dbKey);
+        const currentModuleKeys = this.state.modules.map(module => module.dbDef.dbKey);
+        if (!compare(prevModuleKeys, currentModuleKeys))
+            this.refreshCountMaps();
+    }
+    // ######################## Logic ########################
+    refreshCountMaps = async () => {
+        const idbCountMap = {};
+        const cacheCountMap = {};
+        for (const module of this.props.modules) {
+            idbCountMap[module.dbDef.dbKey] = await module.IDB.count();
+            cacheCountMap[module.dbDef.dbKey] = module.cache._array.length;
+        }
+        this.setState({ idbCountMap, cacheCountMap });
+    };
+    getSortedDBKeys = () => {
+        const keys = filterInstances(this.state.modules.map(module => {
+            const dbKey = module.dbDef?.dbKey;
+            if (!dbKey) {
+                this.logWarning(`Skipping ${module.getName()}, because it has no dbKey`);
+                return;
+            }
+            return dbKey;
+        }));
+        //Sort alphabetically
+        sortArray(keys);
+        //Bring mismatch items to the top
+        return sortArray(keys, key => {
+            const idbCount = this.state.idbCountMap[key];
+            const cacheCount = this.state.cacheCountMap[key];
+            return idbCount !== cacheCount ? 0 : 1;
+        });
+    };
+    // ######################## Render ########################
+    render() {
+        const dbKeys = this.getSortedDBKeys();
+        return _jsxs(Grid, { className: 'collections-grid', onClick: () => this.refreshCountMaps(), children: [this.renderHeaders(), dbKeys.map(this.renderDataForKey)] });
+    }
+    renderHeaders = () => {
+        return _jsxs(Grid, { className: 'collections-grid__row header', children: [_jsx("div", { className: 'collections-grid__header', children: "DB Key" }), _jsx("div", { className: 'collections-grid__header', children: "IDB Count" }), _jsx("div", { className: 'collections-grid__header', children: "Cache Count" })] });
+    };
+    renderDataForKey = (dbKey) => {
+        const idbCount = this.state.idbCountMap[dbKey];
+        const cacheCount = this.state.cacheCountMap[dbKey];
+        const className = _className('collections-grid__row', idbCount !== cacheCount && 'count-mismatch');
+        return _jsxs(Grid, { className: className, children: [_jsx("div", { className: 'collections-grid__value', children: dbKey }), _jsx("div", { className: 'collections-grid__value', children: idbCount ?? 'N/A' }), _jsx("div", { className: 'collections-grid__value', children: cacheCount ?? 'N/A' })] }, dbKey);
+    };
+}

package/_ats/ATS_IDBCacheComparison/Component_CollectionGrid.scss

@@ -0,0 +1,52 @@
+.collections-grid {
+  width: 100%;
+  height: fit-content;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 30px;
+  position: relative;
+
+  .collections-grid__row {
+    grid-template-columns: subgrid;
+    grid-column: 1/-1;
+    background: white;
+    border-bottom: 1px solid black;
+
+    .collections-grid__header {
+      height: 100%;
+      line-height: 30px;
+      padding-inline: 10px;
+      font: {
+        size: 16px;
+        weight: bold;
+      }
+
+      &:not(:last-child) {
+        border-right: 2px solid black;
+      }
+    }
+
+    .collections-grid__value {
+      height: 100%;
+      line-height: 30px;
+      padding-inline: 10px;
+      font: {
+        size: 16px;
+      }
+
+      &:not(:last-child) {
+        border-right: 2px solid black;
+      }
+    }
+
+    &.header {
+      background: gray;
+      border-width: 2px;
+      position: sticky;
+      top: 0;
+    }
+
+    &.count-mismatch {
+      background: rgb(256, 0, 0, 0.5);
+    }
+  }
+}

package/_ats/ATS_IDBCacheComparison/Dialog_IDBCacheComparison.d.ts

@@ -0,0 +1,17 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ModuleFE_BaseDB } from '../../modules/db-api-gen/ModuleFE_BaseDB.js';
+import { ResolvableContent } from '@nu-art/ts-common';
+import './Dialog_IDBCacheComparison.scss';
+import { DefaultProps } from '../../utils/types.js';
+type Props = {
+    modules: ResolvableContent<ModuleFE_BaseDB<any>[]>;
+};
+type State = {};
+export declare class Dialog_IDBCacheComparison extends ComponentSync<Props, State> {
+    static defaultProps: DefaultProps<Dialog_IDBCacheComparison>;
+    static show: (props?: Props) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_Header;
+    private render_Grid;
+}
+export {};

package/_ats/ATS_IDBCacheComparison/Dialog_IDBCacheComparison.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ModuleFE_Dialog } from '../../component-modules/ModuleFE_Dialog.js';
+import { LL_H_C, LL_V_L } from '../../components/Layouts/index.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { Component_CollectionGrid } from './Component_CollectionGrid.js';
+import { RuntimeModules, exists, resolveContent } from '@nu-art/ts-common';
+import './Dialog_IDBCacheComparison.scss';
+export class Dialog_IDBCacheComparison extends ComponentSync {
+    static defaultProps = {
+        modules: () => RuntimeModules().filter(module => exists(module.dbDef?.dbKey)),
+    };
+    static show = (props) => {
+        ModuleFE_Dialog.show({
+            content: _jsx(Dialog_IDBCacheComparison, { ...props }),
+        });
+    };
+    render() {
+        return _jsxs(LL_V_L, { id: 'dialog__idb-cache-comp', children: [this.render_Header(), this.render_Grid()] });
+    }
+    render_Header = () => {
+        return _jsxs(LL_H_C, { className: 'dialog__idb-cache-comp__header', children: [_jsx("div", { className: 'dialog__idb-cache-comp__header__title', children: 'IDB <-> Cache Comparison' }), _jsx(TS_Icons.x.component, { onClick: () => {
+                        ModuleFE_Dialog.close();
+                    } })] });
+    };
+    render_Grid = () => {
+        const modules = resolveContent(this.props.modules);
+        return _jsx("div", { className: 'dialog__idb-cache-comp__grid-wrapper', children: _jsx(Component_CollectionGrid, { modules: modules }) });
+    };
+}

package/_ats/ATS_IDBCacheComparison/Dialog_IDBCacheComparison.scss

@@ -0,0 +1,25 @@
+#dialog__idb-cache-comp {
+  width: 50vw;
+  height: 90vh;
+  background: white;
+  border: 2px solid black;
+
+  .dialog__idb-cache-comp__header {
+    width: 100%;
+    height: 40px;
+    justify-content: space-between;
+    padding: 0 20px;
+
+    .dialog__idb-cache-comp__header__title {
+      font: {
+        size: 20px;
+      }
+    }
+  }
+
+  .dialog__idb-cache-comp__grid-wrapper {
+    width: 100%;
+    height: calc(100% - 40px);
+    overflow-y: overlay;
+  }
+}

package/_ats/ATS_Printables/ATS_AbstractPrintable.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './ATS_Printable.scss';
+import { ResolvableContent } from '@nu-art/ts-common';
+type Created = {
+    toPrintRef: ResolvableContent<ReactNode, [(ref: HTMLElement) => void]>;
+    toPrintNode: ResolvableContent<ReactNode>;
+};
+export declare class ATS_AbstractPrintable extends ComponentSync<Created> {
+    private printableRef1;
+    private printableRef2;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_Printable1;
+    private render_Printable3;
+}
+export {};

package/_ats/ATS_Printables/ATS_AbstractPrintable.js

@@ -0,0 +1,37 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { LL_H_C, LL_V_L } from '../../components/Layouts/index.js';
+import { TS_AppTools } from '../../components/TS_AppTools/index.js';
+import './ATS_Printable.scss';
+import { TS_PropRenderer } from '../../components/TS_PropRenderer/index.js';
+import { Button } from '../../components/Button/Button.js';
+import { ModuleFE_Print } from '../../modules/ModuleFE_Print.js';
+import { TS_Printable } from '../../components/TS_Printable/index.js';
+import { resolveContent } from '@nu-art/ts-common';
+export class ATS_AbstractPrintable extends ComponentSync {
+    printableRef1;
+    printableRef2;
+    // static Screen: AppToolsScreen = {
+    // 	key: 'ats-ts-printable',
+    // 	name: 'Printable',
+    // 	group: thunderstormCapabilitiesGroup,
+    // 	renderer: this,
+    // };
+    //
+    render() {
+        return _jsxs(LL_V_L, { id: 'ats__printable', children: [TS_AppTools.renderPageHeader('Printable'), _jsxs(LL_H_C, { className: 'ats__printable__printables', children: [this.render_Printable1(), this.render_Printable3()] })] });
+    }
+    render_Printable1 = () => {
+        return _jsxs(TS_PropRenderer.Vertical, { label: 'Same Content Printable', children: [resolveContent(this.props.toPrintRef, (ref) => this.printableRef1 = ref), _jsx(Button, { variant: 'primary', onClick: async () => {
+                        const div = this.printableRef1;
+                        if (!div)
+                            return;
+                        await ModuleFE_Print.printElement(div);
+                    }, children: "Print" })] });
+    };
+    render_Printable3 = () => {
+        return _jsxs(TS_PropRenderer.Vertical, { label: 'With TS Printable', children: [_jsx(TS_Printable, { className: 'ats__printable__printable-content-wrapper', printable: async (ref) => {
+                        this.printableRef2 = ref;
+                    }, children: resolveContent(this.props.toPrintNode) }), _jsx(Button, { variant: 'primary', onClick: () => ModuleFE_Print.printElement(this.printableRef2), children: "Print" })] });
+    };
+}

package/_ats/ATS_Printables/ATS_Printable.d.ts

@@ -0,0 +1,13 @@
+import { AppToolsScreen } from '../../components/TS_AppTools/types.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './ATS_Printable.scss';
+export declare class ATS_Printable extends ComponentSync {
+    private readonly sameContentRef;
+    private printableRef;
+    static Screen: AppToolsScreen;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_Printable1;
+    private render_Printable2;
+    private render_Printable3;
+    private differentContentRenderer;
+}

package/_ats/ATS_Printables/ATS_Printable.js

@@ -0,0 +1,45 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { thunderstormCapabilitiesGroup } from '../../consts.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { LL_H_C, LL_V_L } from '../../components/Layouts/index.js';
+import { TS_AppTools } from '../../components/TS_AppTools/index.js';
+import './ATS_Printable.scss';
+import { TS_PropRenderer } from '../../components/TS_PropRenderer/index.js';
+import { Button } from '../../components/Button/Button.js';
+import { ModuleFE_Print } from '../../modules/ModuleFE_Print.js';
+import { TS_Printable } from '../../components/TS_Printable/index.js';
+import { generateArray } from '@nu-art/ts-common';
+export class ATS_Printable extends ComponentSync {
+    sameContentRef = React.createRef();
+    printableRef;
+    static Screen = {
+        key: 'ats-ts-printable',
+        name: 'Printable',
+        group: thunderstormCapabilitiesGroup,
+        renderer: this,
+    };
+    render() {
+        return _jsxs(LL_V_L, { id: 'ats__printable', children: [TS_AppTools.renderPageHeader('Printable'), _jsxs(LL_H_C, { className: 'ats__printable__printables', children: [this.render_Printable1(), this.render_Printable2(), this.render_Printable3()] })] });
+    }
+    render_Printable1 = () => {
+        return _jsxs(TS_PropRenderer.Vertical, { label: 'Same Content Printable', children: [_jsxs("div", { className: 'ats__printable__printable-content-wrapper', ref: this.sameContentRef, children: ["Expect to see this text in the print dialog!", generateArray(2, id => _jsx("img", { src: `https://picsum.photos/id/${id}/200/300`, alt: '' }, id))] }), _jsx(Button, { variant: 'primary', onClick: async () => {
+                        const div = this.sameContentRef.current;
+                        if (!div)
+                            return;
+                        await ModuleFE_Print.printElement(div);
+                    }, children: "Print" })] });
+    };
+    render_Printable2 = () => {
+        return _jsxs(TS_PropRenderer.Vertical, { label: 'Different Content Printable', children: [_jsx("div", { className: 'ats__printable__printable-content-wrapper', children: "Expect to see something else in the print dialog" }), _jsx(Button, { variant: 'primary', onClick: () => ModuleFE_Print.printNode(this.differentContentRenderer()), children: "Print" })] });
+    };
+    render_Printable3 = () => {
+        return _jsxs(TS_PropRenderer.Vertical, { label: 'With TS Printable', children: [_jsx(TS_Printable, { className: 'ats__printable__printable-content-wrapper', printable: async (ref) => {
+                        this.printableRef = ref;
+                    }, children: "Expect to see this text in the print dialog!" }), _jsx(Button, { variant: 'primary', onClick: () => ModuleFE_Print.printElement(this.printableRef), children: "Print" })] });
+    };
+    differentContentRenderer = () => {
+        const urls = generateArray(200, id => _jsx("img", { src: `https://picsum.photos/id/${id}/200/300`, alt: '' }, id));
+        return _jsx(LL_V_L, { children: urls });
+    };
+}

package/_ats/ATS_Printables/ATS_Printable.scss

@@ -0,0 +1,40 @@
+#ats__printable {
+  height: 100%;
+  width: 100%;
+  gap: 20px;
+  padding: 20px;
+
+  .app-tools-page__page__header {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ats__printable__printables {
+    width: 100%;
+    flex-grow: 1;
+    gap: 20px;
+    padding: 20px;
+
+    .ts-prop-renderer {
+      height: 100%;
+      width: 300px;
+    }
+
+    .ats__printable__printable-content-wrapper {
+      width: 100%;
+      flex-grow: 1;
+      border: 1px solid black;
+      border-radius: 6px;
+      padding: 10px;
+      white-space: pre-wrap;
+    }
+  }
+}
+
+#printable-example {
+  width: 500px;
+  height: 100px;
+  border: 2px solid black;
+  color: red;
+}

package/_ats/ATS_ProtoComponent/ATS_ProtoComponent.d.ts

@@ -0,0 +1,33 @@
+import { AppToolsScreen } from '../../components/TS_AppTools/index.js';
+import './ATS_ProtoComponent.scss';
+import { UniqueId } from '@nu-art/ts-common';
+import { ProtoComponent, ProtoComponentDef } from '../../core/proto-component/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type Keys = 'selectedNumber' | 'selectedExampleId';
+type ComponentDef1 = ProtoComponentDef<Keys, {
+    selectedNumber: number;
+    selectedExampleId: UniqueId;
+}>;
+type State = {
+    selectedNumber?: number;
+    selectedExampleId?: UniqueId;
+};
+export declare class ATS_ProtoComponent extends ProtoComponent<ComponentDef1, {}, State> {
+    static defaultProps: Partial<ComponentDef1['props']>;
+    protected deriveStateFromProps(nextProps: ComponentDef1['props'], state: ComponentDef1['state'] & State): {
+        previousResultsObject?: {
+            selectedNumber: number;
+            selectedExampleId: string;
+        } | undefined;
+    } & State;
+    static screen: AppToolsScreen;
+    private selectRandomData;
+    private renderNumberDropDown;
+    private renderExampleDropDown;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export declare class ATS_ProtoComponentDouble extends ComponentSync {
+    static screen: AppToolsScreen;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/ATS_ProtoComponent/ATS_ProtoComponent.js

@@ -0,0 +1,80 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ATS_Frontend } from '../../components/TS_AppTools/index.js';
+import { LL_H_C, LL_V_L } from '../../components/Layouts/index.js';
+import './ATS_ProtoComponent.scss';
+import { generateArray } from '@nu-art/ts-common';
+import { TS_PropRenderer } from '../../components/TS_PropRenderer/index.js';
+import { TS_DropDown } from '../../components/TS_Dropdown/index.js';
+import { SimpleListAdapter } from '../../components/adapter/Adapter.js';
+import { ProtoComponent } from '../../core/proto-component/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { Button } from '../../components/Button/Button.js';
+const examples = [
+    {
+        id: '111',
+        str: 'example 1',
+        num: 10
+    },
+    {
+        id: '222',
+        str: 'example 2'
+    },
+    {
+        id: '333',
+        str: 'example 3',
+        num: 30
+    }
+];
+export class ATS_ProtoComponent extends ProtoComponent {
+    static defaultProps = {
+        keys: ['selectedNumber', 'selectedExampleId'],
+    };
+    deriveStateFromProps(nextProps, state) {
+        state = super.deriveStateFromProps(nextProps, state);
+        state.selectedNumber = this.getQueryParam('selectedNumber');
+        state.selectedExampleId = this.getQueryParam('selectedExampleId');
+        return state;
+    }
+    static screen = {
+        name: 'ProtoComponent',
+        key: 'proto-component',
+        renderer: this,
+        group: ATS_Frontend,
+    };
+    selectRandomData = () => {
+        const selectedNumber = Math.floor(Math.random() * 9);
+        const selectedExample = examples[Math.floor(Math.random() * (examples.length - 1))];
+        this.setQueryParams({
+            selectedNumber,
+            selectedExampleId: selectedExample.id
+        });
+    };
+    renderNumberDropDown = () => {
+        const numbers = generateArray(10);
+        const adapter = SimpleListAdapter(numbers, item => _jsx(_Fragment, { children: item.item }));
+        return _jsxs(TS_PropRenderer.Vertical, { label: 'Number Dropdown', children: [_jsx(TS_DropDown, { adapter: adapter, selected: this.state.selectedNumber, onSelected: number => {
+                        this.setQueryParam('selectedNumber', number);
+                    } }), _jsx(Button, { onClick: () => this.deleteQueryParam('selectedNumber'), children: "Clear Selected Number" })] });
+    };
+    renderExampleDropDown = () => {
+        const adapter = SimpleListAdapter(examples, i => _jsx(_Fragment, { children: i.item.str }));
+        const selected = examples.find(i => i.id === this.state.selectedExampleId);
+        return _jsxs(_Fragment, { children: [_jsxs(TS_PropRenderer.Vertical, { label: 'Example Dropdown', children: [_jsx(TS_DropDown, { adapter: adapter, selected: selected, onSelected: selected => {
+                                this.setQueryParam('selectedExampleId', selected.id);
+                            } }), _jsx(Button, { onClick: () => this.deleteQueryParam('selectedExampleId'), children: "Clear Selected Example" })] }), _jsxs(TS_PropRenderer.Vertical, { label: 'Selected Example Data', children: [_jsxs("div", { children: ["id: ", selected?.id ?? '-'] }), _jsxs("div", { children: ["str: ", selected?.str ?? '-'] }), _jsxs("div", { children: ["num: ", selected?.num ?? '-'] })] })] });
+    };
+    render() {
+        return _jsxs(LL_V_L, { id: 'ats-proto-component', children: [_jsx(Button, { onClick: this.selectRandomData, children: "Select Random Data" }), this.renderNumberDropDown(), this.renderExampleDropDown()] });
+    }
+}
+export class ATS_ProtoComponentDouble extends ComponentSync {
+    static screen = {
+        name: 'ProtoComponent Double',
+        key: 'proto-component-double',
+        renderer: this,
+        group: ATS_Frontend,
+    };
+    render() {
+        return _jsxs(LL_H_C, { children: [_jsx(ATS_ProtoComponent, {}), _jsx(ATS_ProtoComponent, {})] });
+    }
+}

package/_ats/ATS_ProtoComponent/ATS_ProtoComponent.scss

@@ -0,0 +1,19 @@
+#ats-proto-component {
+  width: 100%;
+  height: 100%;
+
+  padding: 20px;
+  gap: 20px;
+
+  .ts-button {
+    margin: 0;
+  }
+
+  .ts-dropdown {
+    width: 300px;
+  }
+
+  .ts-prop-renderer {
+    row-gap: 10px;
+  }
+}