@peers-app/peers-ui 0.0.14

package/dist/components/group-switcher.js

@@ -0,0 +1,301 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupSwitcher = GroupSwitcher;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../hooks");
+function GroupSwitcher({ colorMode }) {
+    const [showDropdown, setShowDropdown] = (0, react_1.useState)(false);
+    const [showCreateModal, setShowCreateModal] = (0, react_1.useState)(false);
+    const [allGroups, setAllGroups] = (0, react_1.useState)([]);
+    const userContext = (0, hooks_1.usePromise)(peers_sdk_1.getUserContext);
+    // Load groups from user context
+    (0, react_1.useEffect)(() => {
+        if (!userContext)
+            return;
+        const loadGroups = async () => {
+            const groupsTable = (0, peers_sdk_1.Groups)(userContext.userDataContext);
+            const groupsList = await groupsTable.list({ disabled: { $ne: true } });
+            setAllGroups(groupsList);
+        };
+        loadGroups();
+    }, [userContext]);
+    // Use useMemo to recompute currentGroup when either currentGroupId or allGroups changes
+    const currentGroup = react_1.default.useMemo(() => {
+        const currentGroupId = userContext?.currentlyActiveGroupId();
+        if (!currentGroupId)
+            return null;
+        return allGroups.find((g) => g.groupId === currentGroupId) || null;
+    }, [allGroups, userContext?.currentlyActiveGroupId()]);
+    const handleGroupSelect = (group) => {
+        if (!userContext)
+            return;
+        // Set the active group through user context
+        userContext.currentlyActiveGroupId(group?.groupId || '');
+        setShowDropdown(false);
+    };
+    const handleCreateClick = () => {
+        setShowDropdown(false);
+        setShowCreateModal(true);
+    };
+    const getGroupIcon = (group) => {
+        if (!group)
+            return 'bi-person-fill'; // Personal group icon
+        return group.iconClassName || 'bi-people-fill';
+    };
+    const getGroupName = (group) => {
+        if (!group)
+            return 'Personal';
+        return group.name;
+    };
+    const isDark = colorMode === 'dark';
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "dropdown" },
+            react_1.default.createElement("button", { className: "btn btn-sm me-2 d-flex align-items-center", onClick: () => setShowDropdown(!showDropdown), title: `Current group: ${getGroupName(currentGroup)}`, style: {
+                    padding: '4px 8px',
+                    fontSize: '12px',
+                    borderRadius: '6px',
+                    border: 'none',
+                    background: 'transparent',
+                    color: isDark ? '#adb5bd' : '#6c757d'
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = isDark ? '#495057' : '#f8f9fa';
+                    e.currentTarget.style.color = isDark ? '#ffffff' : '#0d6efd';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                    e.currentTarget.style.color = isDark ? '#adb5bd' : '#6c757d';
+                } },
+                react_1.default.createElement("i", { className: `${getGroupIcon(currentGroup)} me-1`, style: { fontSize: '14px' } }),
+                react_1.default.createElement("span", { className: "text-truncate", style: { maxWidth: '80px' } }, getGroupName(currentGroup)),
+                react_1.default.createElement("i", { className: "bi-chevron-down ms-1", style: { fontSize: '10px' } })),
+            showDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${isDark ? 'dropdown-menu-dark' : ''}`, style: {
+                    left: 0,
+                    top: '100%',
+                    zIndex: 1000,
+                    minWidth: '200px',
+                    maxHeight: '300px',
+                    overflowY: 'auto'
+                } },
+                react_1.default.createElement("div", { className: `dropdown-item d-flex align-items-center ${!currentGroup ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => handleGroupSelect(null) },
+                    react_1.default.createElement("i", { className: "bi-person-fill me-2" }),
+                    react_1.default.createElement("span", null, "Personal")),
+                allGroups.length > 0 && (react_1.default.createElement("div", { className: "dropdown-divider" })),
+                allGroups
+                    .filter((g) => !g.disabled)
+                    .map((group) => (react_1.default.createElement("div", { key: group.groupId, className: `dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => handleGroupSelect(group) },
+                    react_1.default.createElement("i", { className: `${getGroupIcon(group)} me-2` }),
+                    react_1.default.createElement("span", { className: "text-truncate" }, group.name)))),
+                react_1.default.createElement("div", { className: "dropdown-divider" }),
+                react_1.default.createElement("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: 'pointer' }, onClick: handleCreateClick },
+                    react_1.default.createElement("i", { className: "bi-plus-circle me-2" }),
+                    react_1.default.createElement("span", null, "Create Group")))),
+            showDropdown && (react_1.default.createElement("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowDropdown(false) }))),
+        showCreateModal && userContext && (react_1.default.createElement(CreateGroupModal, { colorMode: colorMode, userContext: userContext, onClose: () => setShowCreateModal(false), onGroupCreated: async (groupId) => {
+                // Refresh groups list
+                const groupsTable = (0, peers_sdk_1.Groups)(userContext.userDataContext);
+                const groupsList = await groupsTable.list({ disabled: { $ne: true } });
+                setAllGroups(groupsList);
+                // Switch to new group
+                userContext.currentlyActiveGroupId(groupId);
+                setShowCreateModal(false);
+            } }))));
+}
+function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }) {
+    const [groupName, setGroupName] = (0, react_1.useState)('');
+    const [iconClassName, setIconClassName] = (0, react_1.useState)('bi-people-fill');
+    const [description, setDescription] = (0, react_1.useState)('');
+    const [isCreating, setIsCreating] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const isDark = colorMode === 'dark';
+    const handleCreate = async () => {
+        // Validate
+        const trimmedName = groupName.trim();
+        if (!trimmedName) {
+            setError('Group name is required');
+            return;
+        }
+        if (trimmedName.length > 100) {
+            setError('Group name must be 100 characters or less');
+            return;
+        }
+        setIsCreating(true);
+        setError(null);
+        try {
+            const groupId = (0, peers_sdk_1.newid)();
+            const me = await (0, peers_sdk_1.getMe)();
+            // Generate cryptographic keys for the group
+            const groupKeys = (0, peers_sdk_1.newKeys)();
+            // Create group data context
+            const groupDataContext = userContext.getDataContext(groupId);
+            // Store groupKeys.secretKey securely for this group
+            const persistentVarsTable = userContext.userDataContext.tableContainer.getTableByName('PersistentVars');
+            const groupSecretKeyVarName = 'groupSecretKey_' + groupDataContext.dataContextId;
+            await persistentVarsTable.save({
+                persistentVarId: (0, peers_sdk_1.newid)(),
+                name: groupSecretKeyVarName,
+                scope: 'groupUser',
+                isSecret: true,
+                value: { value: groupKeys.secretKey },
+            });
+            // Add current user to the group's users table as trusted
+            await (0, peers_sdk_1.Users)(groupDataContext).save({
+                ...me,
+                trustLevel: peers_sdk_1.TrustLevel.Trusted
+            });
+            // Create group in both user's and group's context
+            const groupsTable = (0, peers_sdk_1.Groups)(userContext.userDataContext);
+            const newGroup = await groupsTable.save({
+                groupId,
+                name: trimmedName,
+                description: description.trim(),
+                iconClassName: iconClassName.trim() || 'bi-people-fill',
+                founderUserId: me.userId,
+                disabled: false,
+                publicKey: groupKeys.publicKey,
+                publicBoxKey: groupKeys.publicBoxKey,
+                signature: '', // Will be signed by save()
+            });
+            await (0, peers_sdk_1.Groups)(groupDataContext).save(newGroup);
+            // Notify parent
+            onGroupCreated(newGroup.groupId);
+        }
+        catch (err) {
+            console.error('Failed to create group:', err);
+            setError(err.message || 'Failed to create group. Please try again.');
+            setIsCreating(false);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey && groupName.trim()) {
+            e.preventDefault();
+            handleCreate();
+        }
+        else if (e.key === 'Escape') {
+            onClose();
+        }
+    };
+    return (react_1.default.createElement("div", { className: "position-fixed w-100 h-100 d-flex align-items-start justify-content-center", style: {
+            top: 0,
+            left: 0,
+            zIndex: 1050,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            backdropFilter: 'blur(4px)',
+            paddingTop: '10vh'
+        }, onClick: (e) => {
+            if (e.target === e.currentTarget) {
+                onClose();
+            }
+        } },
+        react_1.default.createElement("div", { className: `${isDark ? 'bg-dark text-light' : 'bg-white text-dark'}`, style: {
+                width: '90%',
+                maxWidth: '500px',
+                borderRadius: '12px',
+                boxShadow: isDark
+                    ? '0 20px 40px rgba(0, 0, 0, 0.5)'
+                    : '0 20px 40px rgba(0, 0, 0, 0.1)',
+                border: isDark ? '1px solid #495057' : '1px solid #dee2e6',
+                overflow: 'hidden'
+            } },
+            react_1.default.createElement("div", { className: "p-3 border-bottom d-flex align-items-center justify-content-between", style: {
+                    borderBottomColor: isDark ? '#495057' : '#dee2e6'
+                } },
+                react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                    react_1.default.createElement("i", { className: "bi-people-fill me-2", style: { fontSize: '20px' } }),
+                    react_1.default.createElement("h6", { className: "mb-0" }, "Create New Group")),
+                react_1.default.createElement("button", { className: "btn btn-sm p-0", style: {
+                        border: 'none',
+                        background: 'none',
+                        fontSize: '24px',
+                        lineHeight: '1',
+                        opacity: 0.6
+                    }, onClick: onClose, disabled: isCreating, onMouseEnter: (e) => e.currentTarget.style.opacity = '1', onMouseLeave: (e) => e.currentTarget.style.opacity = '0.6' },
+                    react_1.default.createElement("i", { className: "bi-x" }))),
+            react_1.default.createElement("div", { className: "p-3" },
+                error && (react_1.default.createElement("div", { className: "alert alert-danger py-2 px-3 mb-3", style: { fontSize: '14px' } },
+                    react_1.default.createElement("i", { className: "bi-exclamation-triangle me-2" }),
+                    error)),
+                react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement("label", { className: "form-label small mb-1" },
+                        "Group Name ",
+                        react_1.default.createElement("span", { className: "text-danger" }, "*")),
+                    react_1.default.createElement("input", { type: "text", className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "Enter group name", value: groupName, onChange: (e) => {
+                            setGroupName(e.target.value);
+                            setError(null);
+                        }, onKeyDown: handleKeyDown, autoFocus: true, disabled: isCreating, maxLength: 100, style: {
+                            fontSize: '14px',
+                            backgroundColor: isDark ? '#343a40' : '#ffffff'
+                        } }),
+                    react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '11px' } },
+                        groupName.length,
+                        "/100 characters")),
+                react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement("label", { className: "form-label small mb-1" }, "Icon"),
+                    react_1.default.createElement("div", { className: "input-group" },
+                        react_1.default.createElement("span", { className: `input-group-text ${isDark ? 'bg-dark text-light border-secondary' : ''}`, style: { backgroundColor: isDark ? '#343a40' : undefined } },
+                            react_1.default.createElement("i", { className: iconClassName || 'bi-people-fill' })),
+                        react_1.default.createElement("input", { type: "text", className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "bi-people-fill", value: iconClassName, onChange: (e) => setIconClassName(e.target.value), onKeyDown: handleKeyDown, disabled: isCreating, style: {
+                                fontSize: '14px',
+                                backgroundColor: isDark ? '#343a40' : '#ffffff'
+                            } })),
+                    react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '11px' } }, "Bootstrap icon class name (e.g., bi-star-fill, bi-house-fill)")),
+                react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement("label", { className: "form-label small mb-1" }, "Description (optional)"),
+                    react_1.default.createElement("textarea", { className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "Enter group description", value: description, onChange: (e) => setDescription(e.target.value), disabled: isCreating, rows: 3, maxLength: 500, style: {
+                            fontSize: '14px',
+                            backgroundColor: isDark ? '#343a40' : '#ffffff',
+                            resize: 'none'
+                        } }),
+                    react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '11px' } },
+                        description.length,
+                        "/500 characters"))),
+            react_1.default.createElement("div", { className: "p-3 border-top d-flex justify-content-end gap-2", style: {
+                    borderTopColor: isDark ? '#495057' : '#dee2e6'
+                } },
+                react_1.default.createElement("button", { className: `btn btn-sm ${isDark ? 'btn-outline-light' : 'btn-outline-secondary'}`, onClick: onClose, disabled: isCreating, style: { minWidth: '80px' } }, "Cancel"),
+                react_1.default.createElement("button", { className: "btn btn-sm btn-primary", onClick: handleCreate, disabled: isCreating || !groupName.trim(), style: { minWidth: '80px' } }, isCreating ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
+                    "Creating...")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("i", { className: "bi-plus-circle me-1" }),
+                    "Create")))),
+            react_1.default.createElement("div", { className: `px-3 py-2 small text-muted border-top`, style: {
+                    borderTopColor: isDark ? '#495057' : '#dee2e6',
+                    fontSize: '11px'
+                } },
+                react_1.default.createElement("kbd", { className: "small" }, "\u21B5"),
+                " to create \u2022 ",
+                react_1.default.createElement("kbd", { className: "small" }, "esc"),
+                " to cancel"))));
+}

package/dist/components/input-date.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Observable } from "@peers-app/peers-sdk";
+interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    date: Observable<Date | undefined> | Date | undefined;
+}
+export declare const InputDate: (props: IProps) => React.JSX.Element;
+export {};

package/dist/components/input-date.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputDate = void 0;
+const react_1 = __importDefault(require("react"));
+const moment_timezone_1 = __importDefault(require("moment-timezone"));
+const hooks_1 = require("../hooks");
+const InputDate = (props) => {
+    const [date, setDate] = (0, hooks_1.useObservable)(props.date);
+    const inputProps = { ...props };
+    // @ts-ignore
+    delete inputProps.date;
+    return (react_1.default.createElement("input", { ...inputProps, type: 'date', value: date?.toISOString?.().substring(0, 10) ?? '', onChange: evt => {
+            setDate(evt.currentTarget.value ? (0, moment_timezone_1.default)(new Date(evt.currentTarget.value)).startOf('day').add(1, 'day').toDate() : undefined);
+        } }));
+};
+exports.InputDate = InputDate;

package/dist/components/input-datetime.d.ts

@@ -0,0 +1,7 @@
+import { Observable } from "@peers-app/peers-sdk";
+import React from "react";
+interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    datetime: Observable<Date | undefined> | Date | undefined;
+}
+export declare const InputDatetime: (props: IProps) => React.JSX.Element;
+export {};

package/dist/components/input-datetime.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputDatetime = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../hooks");
+const InputDatetime = (props) => {
+    const [datetime, setDatetime] = (0, hooks_1.useObservable)(props.datetime);
+    const inputProps = { ...props };
+    // @ts-ignore
+    delete inputProps.datetime;
+    return (react_1.default.createElement("input", { ...inputProps, type: 'datetime-local', value: (() => {
+            if (!datetime)
+                return;
+            if (String(datetime) === 'Invalid Date')
+                return;
+            return datetime.toISOString?.()?.substring(0, 16);
+        })(), onChange: e => {
+            let value = e.target.value;
+            if (value) {
+                value += (new Date()).toISOString().substring(value.length);
+                const dt = new Date(value);
+                if (String(dt) !== 'Invalid Date') {
+                    setDatetime(new Date(value));
+                    return;
+                }
+            }
+            setDatetime(undefined);
+            if (props.onChange)
+                props.onChange(e);
+        } }));
+};
+exports.InputDatetime = InputDatetime;

package/dist/components/input-number.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    value: any;
+    format?: 'money';
+    precision?: number;
+    refPassthrough?: any;
+}
+export declare function InputNumber(props: IProps): React.JSX.Element;
+export {};

package/dist/components/input-number.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputNumber = InputNumber;
+const lodash_1 = __importStar(require("lodash"));
+const react_1 = __importStar(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const hooks_1 = require("../hooks");
+function InputNumber(props) {
+    let { format, precision, refPassthrough } = props;
+    if (!lodash_1.default.isNumber(precision)) {
+        precision = 2;
+    }
+    let propsPassthrough = { ...props };
+    // @ts-ignore
+    ['value', 'format', 'precision', 'refPassthrough'].forEach(name => (delete propsPassthrough[name]));
+    const [value, setValue] = (0, hooks_1.useObservable)(props.value);
+    let [displayValue, setDisplayValue] = (0, react_1.useState)(() => {
+        if (isNaN(Number(value)) || value === null || String(value).trim() === '') {
+            return '';
+        }
+        if (format === 'money') {
+            return (0, peers_sdk_1.formatMoney)(Number((0, peers_sdk_1.unwrapObservable)(props.value)), precision);
+        }
+        return String(value);
+    });
+    function onChange(evt) {
+        let _value = evt.target.value;
+        setDisplayValue(_value);
+        // convert blank to null
+        if (String(_value).trim() === '') {
+            setValue(null);
+            return;
+        }
+        _value = _value.replace(/\$/g, '');
+        _value = Number(_value);
+        if ((0, lodash_1.isNumber)(_value) && !isNaN(_value)) {
+            setValue(_value);
+        }
+    }
+    function onBlur(evt) {
+        if (format === 'money' && !isNaN(Number(value)) && value !== null && String(value).trim() !== '') {
+            const fmtMoney = (0, peers_sdk_1.formatMoney)(value, precision);
+            setDisplayValue(fmtMoney);
+        }
+        else if (value === null) {
+            setDisplayValue('');
+        }
+        else {
+            setDisplayValue(String(value));
+        }
+        // todo if not money format precision and set display
+    }
+    return (react_1.default.createElement("input", { ...propsPassthrough, ref: refPassthrough, value: displayValue, onChange: onChange, onBlur: onBlur }));
+}

package/dist/components/input.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    value: any;
+    type?: React.HTMLInputTypeAttribute;
+}
+export declare function Input(props: IProps): React.JSX.Element;
+export {};

package/dist/components/input.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = Input;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../hooks");
+function Input(props) {
+    const [value, setValue] = (0, hooks_1.useObservable)(props.value);
+    const type = props.type ?? (typeof value);
+    function onChange(evt) {
+        let _value = evt.target.value;
+        if (type === 'number') {
+            _value = Number(_value);
+        }
+        setValue(_value);
+    }
+    return (react_1.default.createElement("input", { onChange: onChange, type: type, ...props, value: value }));
+}

package/dist/components/io-schema-values.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { IOSchema, Observable } from "@peers-app/peers-sdk";
+interface IOSchemaValuesProps {
+    ioSchema: IOSchema;
+    values: Record<string, any>;
+    q: Observable<number>;
+    excludeFields?: string[];
+}
+export declare const IOSchemaValues: (props: IOSchemaValuesProps) => React.JSX.Element;
+export declare const IOSchemaValue: (props: {
+    field: IOSchema["fields"][0];
+    values: Record<string, any>;
+    q: Observable<number>;
+}) => React.JSX.Element;
+export {};

package/dist/components/io-schema-values.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IOSchemaValue = exports.IOSchemaValues = void 0;
+const react_1 = __importStar(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const tooltip_1 = require("./tooltip");
+const editor_inline_1 = require("./markdown-editor/editor-inline");
+const input_1 = require("./input");
+const input_number_1 = require("./input-number");
+const checkbox_1 = require("./checkbox");
+const hooks_1 = require("../hooks");
+const IOSchemaValues = (props) => {
+    const { ioSchema, values, q } = props;
+    return (react_1.default.createElement("div", null, ioSchema.fields.map((field, i) => {
+        if (props.excludeFields?.includes(field.name)) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { key: i, className: 'mt-2' },
+            react_1.default.createElement("small", { className: "text-body-secondary" },
+                (0, peers_sdk_1.camelCaseToSpaces)(field.name),
+                ":",
+                react_1.default.createElement("small", null,
+                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: field.description ?? '' }))),
+            react_1.default.createElement(exports.IOSchemaValue, { field: field, values: values, q: q })));
+    })));
+};
+exports.IOSchemaValues = IOSchemaValues;
+const IOSchemaValue = (props) => {
+    const { field, values, q } = props;
+    const [valueObs] = (0, react_1.useState)(() => {
+        const obs = (0, peers_sdk_1.observable)(values[field.name] ?? '');
+        return obs;
+    });
+    (0, react_1.useEffect)(() => {
+        const sub = valueObs.subscribe(() => {
+            values[field.name] = valueObs();
+            q(q() + 1);
+        });
+        return () => {
+            sub.dispose();
+        };
+    });
+    (0, hooks_1.useSubscription)(q, () => {
+        valueObs(values[field.name] ?? '');
+    }, true);
+    const valueType = field.type;
+    // TODO isArray
+    // TODO UI Types - text:secret, date:time, date:date, date:datetime, enum
+    if (valueType === 'string') {
+        if (field.subType === 'markdown' || (!field.subType && field.name.toLowerCase().includes('body'))) {
+            return (react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: valueObs, maxHeight: '250px' }));
+        }
+        else {
+            return (react_1.default.createElement(input_1.Input, { className: 'form-control', value: valueObs }));
+        }
+    }
+    else if (valueType === 'number') {
+        return (react_1.default.createElement(input_number_1.InputNumber, { className: 'form-control', value: valueObs }));
+    }
+    else if (valueType === 'boolean') {
+        return (react_1.default.createElement(checkbox_1.Checkbox, { className: 'form-control', checked: valueObs }));
+    }
+    else if (valueType === 'Date') {
+        return (react_1.default.createElement(input_1.Input, { className: 'form-control', value: valueObs, type: 'date' }));
+    }
+    else {
+        return react_1.default.createElement("div", null,
+            "Unknown type: ",
+            valueType);
+    }
+};
+exports.IOSchemaValue = IOSchemaValue;

package/dist/components/io-schema.d.ts

@@ -0,0 +1,13 @@
+import { IOSchema, Observable } from "@peers-app/peers-sdk";
+import React from "react";
+export declare const IOSchemaEditor: (props: {
+    ioSchema: Observable<IOSchema>;
+    simpleValueName: string;
+}) => React.JSX.Element;
+export declare const SimpleInputSchema: (props: {
+    ioSchema: Observable<IOSchema>;
+    simpleValueName: string;
+}) => React.JSX.Element;
+export declare const ComplexInputSchema: (props: {
+    ioSchema: Observable<IOSchema>;
+}) => React.JSX.Element;