@cratis/components 0.1.19 → 1.0.3

package/dist/esm/SchemaEditor/TypeCell.js

@@ -0,0 +1,81 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Button } from 'primereact/button';
+import { Dropdown } from 'primereact/dropdown';
+import * as faIcons from 'react-icons/fa6';
+
+const CONTAINER_TYPES = [
+    { label: 'array', value: 'array' },
+    { label: 'object', value: 'object' }
+];
+const TypeCell = ({ rowData, isEditMode, typeFormats, onUpdateProperty, onUpdateArrayItemType, onNavigateToProperty, onNavigateToArrayItems, onRemoveProperty }) => {
+    const DEFAULT_TYPE_OPTIONS = [
+        { label: 'string', value: 'string' },
+        { label: 'integer', value: 'integer' },
+        { label: 'number', value: 'number' },
+        { label: 'boolean', value: 'boolean' }
+    ];
+    const formatOptions = typeFormats.length > 0
+        ? typeFormats.map(tf => {
+            const format = (!tf.format || tf.format === '' ? tf.jsonType : tf.format);
+            return { label: format, value: format };
+        })
+        : DEFAULT_TYPE_OPTIONS;
+    const allTypeOptions = [
+        ...formatOptions,
+        ...CONTAINER_TYPES
+    ];
+    const displayValue = rowData.format || rowData.type || 'string';
+    const currentValue = rowData.format || rowData.type || 'string';
+    const handleTypeChange = (value, propertyName, isArrayItem = false) => {
+        if (value === 'array' || value === 'object') {
+            if (isArrayItem) {
+                onUpdateArrayItemType(propertyName, value);
+            }
+            else {
+                onUpdateProperty(propertyName, 'type', value, { format: undefined });
+            }
+        }
+        else {
+            const typeFormat = typeFormats.find(tf => {
+                const effectiveFormat = (!tf.format || tf.format === '' ? tf.jsonType : tf.format);
+                return effectiveFormat === value;
+            });
+            if (typeFormat) {
+                if (isArrayItem) {
+                    onUpdateArrayItemType(propertyName, typeFormat.jsonType);
+                }
+                else {
+                    if (typeFormat.format && typeFormat.format !== '') {
+                        onUpdateProperty(propertyName, 'type', typeFormat.jsonType, { format: value });
+                    }
+                    else {
+                        onUpdateProperty(propertyName, 'type', typeFormat.jsonType, { format: undefined });
+                    }
+                }
+            }
+            else {
+                if (isArrayItem) {
+                    onUpdateArrayItemType(propertyName, value);
+                }
+                else {
+                    onUpdateProperty(propertyName, 'type', value, { format: undefined });
+                }
+            }
+        }
+    };
+    if (!isEditMode) {
+        if (rowData.type === 'array') {
+            const itemType = rowData.items?.type || 'string';
+            const isNavigable = itemType === 'object';
+            return (jsxs("div", { className: "flex align-items-center gap-2 w-full", style: { height: '100%' }, "data-pr-tooltip": isNavigable ? 'Click to navigate to item definition' : undefined, "data-pr-position": "top", children: [jsxs("span", { children: ["Array of ", itemType] }), isNavigable && (jsxs(Fragment, { children: [jsx("div", { style: { flex: 1 } }), jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: jsx(faIcons.FaArrowRight, { style: { fontSize: '1rem', color: 'var(--primary-color)' } }) })] }))] }));
+        }
+        else if (rowData.type === 'object') {
+            return (jsxs("div", { className: "flex align-items-center gap-2 w-full", style: { height: '100%' }, "data-pr-tooltip": "Click to navigate to object properties", "data-pr-position": "top", children: [jsx("span", { children: "Object" }), jsx("div", { style: { flex: 1 } }), jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: jsx(faIcons.FaArrowRight, { style: { fontSize: '1rem', color: 'var(--primary-color)' } }) })] }));
+        }
+        return displayValue;
+    }
+    return (jsxs("div", { className: "flex align-items-center gap-2 w-full", style: { minHeight: '2.5rem' }, children: [jsx(Dropdown, { value: currentValue, options: allTypeOptions, onChange: (e) => handleTypeChange(e.value, rowData.name || ''), className: "flex-1" }), rowData.type === 'array' && rowData.items && (jsxs(Fragment, { children: [jsx("span", { style: { whiteSpace: 'nowrap', display: 'flex', alignItems: 'center' }, children: "of" }), jsx(Dropdown, { value: rowData.items.type || 'string', options: allTypeOptions, onChange: (e) => handleTypeChange(e.value, rowData.name || '', true), className: "flex-1" })] })), jsxs("div", { style: { marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [rowData.type === 'array' && rowData.items?.type === 'object' && rowData.name && (jsx(Button, { icon: jsx(faIcons.FaArrowRight, {}), className: "p-button-text p-button-sm", onClick: () => onNavigateToArrayItems(rowData.name), tooltip: "Navigate to item definition", tooltipOptions: { position: 'top' } })), rowData.type === 'object' && rowData.name && (jsx(Button, { icon: jsx(faIcons.FaArrowRight, {}), className: "p-button-text p-button-sm", onClick: () => onNavigateToProperty(rowData.name), tooltip: "Navigate to object properties", tooltipOptions: { position: 'top' } })), rowData.name && (jsx(Button, { icon: jsx(faIcons.FaTrash, {}), className: "p-button-text p-button-danger p-button-sm", onClick: () => onRemoveProperty(rowData.name), tooltip: "Delete property", tooltipOptions: { position: 'top' } }))] })] }));
+};
+
+export { TypeCell };
+//# sourceMappingURL=TypeCell.js.map

package/dist/esm/SchemaEditor/TypeCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeCell.js","sources":["../../../SchemaEditor/TypeCell.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Button } from 'primereact/button';\nimport { Dropdown } from 'primereact/dropdown';\nimport * as faIcons from 'react-icons/fa6';\nimport { TypeFormat } from '../types/TypeFormat';\nimport { JsonSchemaProperty } from '../types/JsonSchema';\n\nexport interface TypeCellProps {\n    rowData: JsonSchemaProperty;\n    isEditMode: boolean;\n    typeFormats: TypeFormat[];\n    onUpdateProperty: (oldName: string, field: keyof JsonSchemaProperty, value: unknown, additionalUpdates?: Partial<JsonSchemaProperty>) => void;\n    onUpdateArrayItemType: (propertyName: string, itemType: string) => void;\n    onNavigateToProperty: (propertyName: string) => void;\n    onNavigateToArrayItems: (propertyName: string) => void;\n    onRemoveProperty: (propertyName: string) => void;\n}\n\nconst CONTAINER_TYPES = [\n    { label: 'array', value: 'array' },\n    { label: 'object', value: 'object' }\n];\n\nexport const TypeCell = ({\n    rowData,\n    isEditMode,\n    typeFormats,\n    onUpdateProperty,\n    onUpdateArrayItemType,\n    onNavigateToProperty,\n    onNavigateToArrayItems,\n    onRemoveProperty\n}: TypeCellProps) => {\n    const DEFAULT_TYPE_OPTIONS = [\n        { label: 'string', value: 'string' },\n        { label: 'integer', value: 'integer' },\n        { label: 'number', value: 'number' },\n        { label: 'boolean', value: 'boolean' }\n    ];\n\n    const formatOptions = typeFormats.length > 0\n        ? typeFormats.map(tf => {\n            const format = (!tf.format || tf.format === '' ? tf.jsonType : tf.format);\n            return { label: format, value: format };\n        })\n        : DEFAULT_TYPE_OPTIONS;\n\n    const allTypeOptions = [\n        ...formatOptions,\n        ...CONTAINER_TYPES\n    ];\n\n    const displayValue = rowData.format || rowData.type || 'string';\n    const currentValue = rowData.format || rowData.type || 'string';\n\n    const handleTypeChange = (value: string, propertyName: string, isArrayItem: boolean = false) => {\n        if (value === 'array' || value === 'object') {\n            if (isArrayItem) {\n                onUpdateArrayItemType(propertyName, value);\n            } else {\n                onUpdateProperty(propertyName, 'type', value, { format: undefined });\n            }\n        } else {\n            const typeFormat = typeFormats.find(tf => {\n                const effectiveFormat = (!tf.format || tf.format === '' ? tf.jsonType : tf.format);\n                return effectiveFormat === value;\n            });\n\n            if (typeFormat) {\n                if (isArrayItem) {\n                    onUpdateArrayItemType(propertyName, typeFormat.jsonType);\n                } else {\n                    if (typeFormat.format && typeFormat.format !== '') {\n                        onUpdateProperty(propertyName, 'type', typeFormat.jsonType, { format: value });\n                    } else {\n                        onUpdateProperty(propertyName, 'type', typeFormat.jsonType, { format: undefined });\n                    }\n                }\n            } else {\n                if (isArrayItem) {\n                    onUpdateArrayItemType(propertyName, value);\n                } else {\n                    onUpdateProperty(propertyName, 'type', value, { format: undefined });\n                }\n            }\n        }\n    };\n\n    if (!isEditMode) {\n        if (rowData.type === 'array') {\n            const itemType = rowData.items?.type || 'string';\n            const isNavigable = itemType === 'object';\n            return (\n                <div\n                    className=\"flex align-items-center gap-2 w-full\"\n                    style={{ height: '100%' }}\n                    data-pr-tooltip={isNavigable ? 'Click to navigate to item definition' : undefined}\n                    data-pr-position=\"top\"\n                >\n                    <span>Array of {itemType}</span>\n                    {isNavigable && (\n                        <>\n                            <div style={{ flex: 1 }} />\n                            <span style={{ display: 'flex', alignItems: 'center' }}>\n                                <faIcons.FaArrowRight style={{ fontSize: '1rem', color: 'var(--primary-color)' }} />\n                            </span>\n                        </>\n                    )}\n                </div>\n            );\n        } else if (rowData.type === 'object') {\n            return (\n                <div\n                    className=\"flex align-items-center gap-2 w-full\"\n                    style={{ height: '100%' }}\n                    data-pr-tooltip=\"Click to navigate to object properties\"\n                    data-pr-position=\"top\"\n                >\n                    <span>Object</span>\n                    <div style={{ flex: 1 }} />\n                    <span style={{ display: 'flex', alignItems: 'center' }}>\n                        <faIcons.FaArrowRight style={{ fontSize: '1rem', color: 'var(--primary-color)' }} />\n                    </span>\n                </div>\n            );\n        }\n        return displayValue;\n    }\n\n    return (\n        <div className=\"flex align-items-center gap-2 w-full\" style={{ minHeight: '2.5rem' }}>\n            <Dropdown\n                value={currentValue}\n                options={allTypeOptions}\n                onChange={(e) => handleTypeChange(e.value, rowData.name || '')}\n                className=\"flex-1\"\n            />\n            {rowData.type === 'array' && rowData.items && (\n                <>\n                    <span style={{ whiteSpace: 'nowrap', display: 'flex', alignItems: 'center' }}>of</span>\n                    <Dropdown\n                        value={rowData.items.type || 'string'}\n                        options={allTypeOptions}\n                        onChange={(e) => handleTypeChange(e.value, rowData.name || '', true)}\n                        className=\"flex-1\"\n                    />\n                </>\n            )}\n            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>\n                {rowData.type === 'array' && rowData.items?.type === 'object' && rowData.name && (\n                    <Button\n                        icon={<faIcons.FaArrowRight />}\n                        className=\"p-button-text p-button-sm\"\n                        onClick={() => onNavigateToArrayItems(rowData.name!)}\n                        tooltip=\"Navigate to item definition\"\n                        tooltipOptions={{ position: 'top' }}\n                    />\n                )}\n                {rowData.type === 'object' && rowData.name && (\n                    <Button\n                        icon={<faIcons.FaArrowRight />}\n                        className=\"p-button-text p-button-sm\"\n                        onClick={() => onNavigateToProperty(rowData.name!)}\n                        tooltip=\"Navigate to object properties\"\n                        tooltipOptions={{ position: 'top' }}\n                    />\n                )}\n                {rowData.name && (\n                    <Button\n                        icon={<faIcons.FaTrash />}\n                        className=\"p-button-text p-button-danger p-button-sm\"\n                        onClick={() => onRemoveProperty(rowData.name!)}\n                        tooltip=\"Delete property\"\n                        tooltipOptions={{ position: 'top' }}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/esm/SchemaEditor/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SchemaEditor';
+export * from '../types/JsonSchema';
+export * from '../types/TypeFormat';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/SchemaEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../SchemaEditor/index.ts"],"names":[],"mappings":"AAGA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/esm/SchemaEditor/index.js

@@ -0,0 +1,3 @@
+export { SchemaEditor } from './SchemaEditor.js';
+export { DEFAULT_TYPE_FORMATS } from '../types/TypeFormat.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/TimeMachine/EventsView.stories.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { EventsView } from './EventsView';
+declare const meta: Meta<typeof EventsView>;
+export default meta;
+type Story = StoryObj<typeof EventsView>;
+export declare const Default: Story;
+export declare const SingleEvent: Story;
+export declare const EmptyEvents: Story;
 //# sourceMappingURL=EventsView.stories.d.ts.map

package/dist/esm/TimeMachine/EventsView.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventsView.stories.d.ts","sourceRoot":"","sources":["../../../TimeMachine/EventsView.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAAyE;AAEzE,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"EventsView.stories.d.ts","sourceRoot":"","sources":["../../../TimeMachine/EventsView.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAMjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAwDzC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC"}

package/dist/esm/TimeMachine/EventsView.stories.js

@@ -1,6 +1,82 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './EventsView';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'TimeMachine/EventsView', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { EventsView } from './EventsView';
+const meta = {
+    title: 'TimeMachine/EventsView',
+    component: EventsView,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const sampleEvents = [
+    {
+        sequenceNumber: 1,
+        type: 'UserRegistered',
+        occurred: new Date('2024-02-10T09:00:00'),
+        content: {
+            userId: 'user-001',
+            email: 'john.doe@example.com',
+            username: 'john.doe',
+            role: 'user'
+        }
+    },
+    {
+        sequenceNumber: 2,
+        type: 'ProfileUpdated',
+        occurred: new Date('2024-02-10T10:15:00'),
+        content: {
+            userId: 'user-001',
+            firstName: 'John',
+            lastName: 'Doe',
+            bio: 'Software developer'
+        }
+    },
+    {
+        sequenceNumber: 3,
+        type: 'RoleChanged',
+        occurred: new Date('2024-02-10T11:30:00'),
+        content: {
+            userId: 'user-001',
+            oldRole: 'user',
+            newRole: 'admin'
+        }
+    },
+    {
+        sequenceNumber: 4,
+        type: 'PasswordChanged',
+        occurred: new Date('2024-02-10T12:45:00'),
+        content: {
+            userId: 'user-001',
+            timestamp: new Date('2024-02-10T12:45:00')
+        }
+    },
+    {
+        sequenceNumber: 5,
+        type: 'EmailVerified',
+        occurred: new Date('2024-02-10T13:00:00'),
+        content: {
+            userId: 'user-001',
+            email: 'john.doe@example.com',
+            verifiedAt: new Date('2024-02-10T13:00:00')
+        }
+    }
+];
+export const Default = {
+    args: {
+        events: sampleEvents,
+    },
+    render: (args) => (_jsx("div", { style: { height: '600px', background: '#1a1a1a' }, children: _jsx(EventsView, { ...args }) }))
+};
+export const SingleEvent = {
+    args: {
+        events: [sampleEvents[0]],
+    },
+    render: (args) => (_jsx("div", { style: { height: '600px', background: '#1a1a1a' }, children: _jsx(EventsView, { ...args }) }))
+};
+export const EmptyEvents = {
+    args: {
+        events: [],
+    },
+    render: (args) => (_jsx("div", { style: { height: '600px', background: '#1a1a1a' }, children: _jsx(EventsView, { ...args }) }))
+};
 //# sourceMappingURL=EventsView.stories.js.map

package/dist/esm/TimeMachine/EventsView.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventsView.stories.js","sourceRoot":"","sources":["../../../TimeMachine/EventsView.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,cAAc,CAAC;AACrC,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAA4E,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAuE,CAAC;AAE1R,eAAe,EAAE,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAEzE,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"EventsView.stories.js","sourceRoot":"","sources":["../../../TimeMachine/EventsView.stories.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,MAAM,IAAI,GAA4B;IAClC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE;QACR,MAAM,EAAE,YAAY;KACvB;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,YAAY,GAAY;IAC1B;QACI,cAAc,EAAE,CAAC;QACjB,IAAI,EAAE,gBAAgB;QACtB,QAAQ,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;QACzC,OAAO,EAAE;YACL,MAAM,EAAE,UAAU;YAClB,KAAK,EAAE,sBAAsB;YAC7B,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,MAAM;SACf;KACJ;IACD;QACI,cAAc,EAAE,CAAC;QACjB,IAAI,EAAE,gBAAgB;QACtB,QAAQ,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;QACzC,OAAO,EAAE;YACL,MAAM,EAAE,UAAU;YAClB,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,KAAK;YACf,GAAG,EAAE,oBAAoB;SAC5B;KACJ;IACD;QACI,cAAc,EAAE,CAAC;QACjB,IAAI,EAAE,aAAa;QACnB,QAAQ,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;QACzC,OAAO,EAAE;YACL,MAAM,EAAE,UAAU;YAClB,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,OAAO;SACnB;KACJ;IACD;QACI,cAAc,EAAE,CAAC;QACjB,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;QACzC,OAAO,EAAE;YACL,MAAM,EAAE,UAAU;YAClB,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;SAC7C;KACJ;IACD;QACI,cAAc,EAAE,CAAC;QACjB,IAAI,EAAE,eAAe;QACrB,QAAQ,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;QACzC,OAAO,EAAE;YACL,MAAM,EAAE,UAAU;YAClB,KAAK,EAAE,sBAAsB;YAC7B,UAAU,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;SAC9C;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,MAAM,EAAE,YAAY;KACvB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAClD,KAAC,UAAU,OAAK,IAAI,GAAI,GACtB,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,IAAI,EAAE;QACF,MAAM,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;KAC5B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAClD,KAAC,UAAU,OAAK,IAAI,GAAI,GACtB,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,IAAI,EAAE;QACF,MAAM,EAAE,EAAE;KACb;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAClD,KAAC,UAAU,OAAK,IAAI,GAAI,GACtB,CACT;CACJ,CAAC"}

package/dist/esm/TimeMachine/Properties.stories.d.ts

@@ -1,8 +1,10 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { Properties } from './Properties';
+declare const meta: Meta<typeof Properties>;
+export default meta;
+type Story = StoryObj<typeof Properties>;
+export declare const Default: Story;
+export declare const LeftAligned: Story;
+export declare const RightAligned: Story;
+export declare const WithNullValues: Story;
 //# sourceMappingURL=Properties.stories.d.ts.map

package/dist/esm/TimeMachine/Properties.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Properties.stories.d.ts","sourceRoot":"","sources":["../../../TimeMachine/Properties.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAAyE;AAEzE,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"Properties.stories.d.ts","sourceRoot":"","sources":["../../../TimeMachine/Properties.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAGjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAczC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC"}

package/dist/esm/TimeMachine/Properties.stories.js

@@ -1,6 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './Properties';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'TimeMachine/Properties', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { Properties } from './Properties';
+const meta = {
+    title: 'TimeMachine/Properties',
+    component: Properties,
+};
+export default meta;
+const sampleData = {
+    userId: 'user-12345',
+    username: 'john.doe',
+    email: 'john.doe@example.com',
+    age: 30,
+    isActive: true,
+    lastLogin: new Date('2024-02-10T10:30:00'),
+    role: 'administrator',
+    permissions: ['read', 'write', 'delete'],
+    metadata: { theme: 'dark', language: 'en' }
+};
+export const Default = {
+    args: {
+        data: sampleData,
+    },
+    render: (args) => (_jsx("div", { style: { padding: '20px', background: '#1a1a1a', minHeight: '400px' }, children: _jsx(Properties, { ...args }) }))
+};
+export const LeftAligned = {
+    args: {
+        data: sampleData,
+        align: 'left',
+    },
+    render: (args) => (_jsx("div", { style: { padding: '20px', background: '#1a1a1a', minHeight: '400px' }, children: _jsx(Properties, { ...args }) }))
+};
+export const RightAligned = {
+    args: {
+        data: sampleData,
+        align: 'right',
+    },
+    render: (args) => (_jsx("div", { style: { padding: '20px', background: '#1a1a1a', minHeight: '400px' }, children: _jsx(Properties, { ...args }) }))
+};
+export const WithNullValues = {
+    args: {
+        data: {
+            name: 'John Doe',
+            email: null,
+            phone: undefined,
+            age: 30,
+            isActive: false,
+        },
+    },
+    render: (args) => (_jsx("div", { style: { padding: '20px', background: '#1a1a1a', minHeight: '400px' }, children: _jsx(Properties, { ...args }) }))
+};
 //# sourceMappingURL=Properties.stories.js.map

package/dist/esm/TimeMachine/Properties.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Properties.stories.js","sourceRoot":"","sources":["../../../TimeMachine/Properties.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,cAAc,CAAC;AACrC,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAA4E,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAuE,CAAC;AAE1R,eAAe,EAAE,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAEzE,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"Properties.stories.js","sourceRoot":"","sources":["../../../TimeMachine/Properties.stories.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,IAAI,GAA4B;IAClC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,UAAU;CACxB,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,UAAU,GAAG;IACf,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,sBAAsB;IAC7B,GAAG,EAAE,EAAE;IACP,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;IAC1C,IAAI,EAAE,eAAe;IACrB,WAAW,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC;IACxC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;CAC9C,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,IAAI,EAAE,UAAU;KACnB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,YACtE,KAAC,UAAU,OAAK,IAAI,GAAI,GACtB,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,IAAI,EAAE;QACF,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,MAAM;KAChB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,YACtE,KAAC,UAAU,OAAK,IAAI,GAAI,GACtB,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IAC/B,IAAI,EAAE;QACF,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,OAAO;KACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,YACtE,KAAC,UAAU,OAAK,IAAI,GAAI,GACtB,CACT;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACjC,IAAI,EAAE;QACF,IAAI,EAAE;YACF,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE,EAAE;YACP,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,YACtE,KAAC,UAAU,OAAK,IAAI,GAAI,GACtB,CACT;CACJ,CAAC"}

package/dist/esm/TimeMachine/ReadModelView.stories.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { ReadModelView } from './ReadModelView';
+declare const meta: Meta<typeof ReadModelView>;
+export default meta;
+type Story = StoryObj<typeof ReadModelView>;
+export declare const Default: Story;
+export declare const SingleVersion: Story;
 //# sourceMappingURL=ReadModelView.stories.d.ts.map

package/dist/esm/TimeMachine/ReadModelView.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReadModelView.stories.d.ts","sourceRoot":"","sources":["../../../TimeMachine/ReadModelView.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAA4E;AAE5E,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"ReadModelView.stories.d.ts","sourceRoot":"","sources":["../../../TimeMachine/ReadModelView.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAMpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AA6F5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

package/dist/esm/TimeMachine/ReadModelView.stories.js

@@ -1,6 +1,80 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './ReadModelView';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'TimeMachine/ReadModelView', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ReadModelView } from './ReadModelView';
+import { Properties } from './Properties';
+const meta = {
+    title: 'TimeMachine/ReadModelView',
+    component: ReadModelView,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const sampleVersions = [
+    {
+        id: 'v1',
+        timestamp: new Date('2024-02-10T08:00:00'),
+        label: 'v1 - Initial State',
+        content: (_jsx(Properties, { data: {
+                userId: 'user-001',
+                username: 'john.doe',
+                email: 'john.doe@example.com',
+                role: 'user',
+                isActive: false
+            } })),
+        events: []
+    },
+    {
+        id: 'v2',
+        timestamp: new Date('2024-02-10T09:00:00'),
+        label: 'v2 - User Activated',
+        content: (_jsx(Properties, { data: {
+                userId: 'user-001',
+                username: 'john.doe',
+                email: 'john.doe@example.com',
+                role: 'user',
+                isActive: true
+            } })),
+        events: [
+            {
+                sequenceNumber: 1,
+                type: 'UserActivated',
+                occurred: new Date('2024-02-10T09:00:00'),
+                content: { userId: 'user-001' }
+            }
+        ]
+    },
+    {
+        id: 'v3',
+        timestamp: new Date('2024-02-10T10:00:00'),
+        label: 'v3 - Role Changed',
+        content: (_jsx(Properties, { data: {
+                userId: 'user-001',
+                username: 'john.doe',
+                email: 'john.doe@example.com',
+                role: 'admin',
+                isActive: true
+            } })),
+        events: [
+            {
+                sequenceNumber: 2,
+                type: 'RoleChanged',
+                occurred: new Date('2024-02-10T10:00:00'),
+                content: { userId: 'user-001', oldRole: 'user', newRole: 'admin' }
+            }
+        ]
+    }
+];
+const ReadModelViewWrapper = ({ versions }) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [hoveredIndex] = useState(null);
+    const [isHoveringCard, setIsHoveringCard] = useState(false);
+    return (_jsxs("div", { style: { height: '800px', background: '#0a0a0a', position: 'relative' }, children: [_jsx(ReadModelView, { versions: versions, selectedIndex: selectedIndex, hoveredIndex: hoveredIndex, onVersionSelect: setSelectedIndex, onHoveringCardChange: setIsHoveringCard }), _jsxs("div", { style: { position: 'absolute', bottom: 20, left: 20, color: 'white', background: 'rgba(0,0,0,0.7)', padding: '10px', borderRadius: '5px' }, children: [_jsxs("p", { children: ["Selected Version: ", selectedIndex + 1, " of ", versions.length] }), _jsxs("p", { children: ["Hovering Card: ", String(isHoveringCard)] }), _jsx("p", { children: "Click on cards to select, scroll to navigate" })] })] }));
+};
+export const Default = {
+    render: () => _jsx(ReadModelViewWrapper, { versions: sampleVersions })
+};
+export const SingleVersion = {
+    render: () => _jsx(ReadModelViewWrapper, { versions: [sampleVersions[0]] })
+};
 //# sourceMappingURL=ReadModelView.stories.js.map

package/dist/esm/TimeMachine/ReadModelView.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReadModelView.stories.js","sourceRoot":"","sources":["../../../TimeMachine/ReadModelView.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,iBAAiB,CAAC;AACxC,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAA4E,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAuE,CAAC;AAE1R,eAAe,EAAE,KAAK,EAAE,2BAA2B,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAE5E,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"ReadModelView.stories.js","sourceRoot":"","sources":["../../../TimeMachine/ReadModelView.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/TimeMachine/TimeMachine.stories.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { TimeMachine } from './TimeMachine';
+declare const meta: Meta<typeof TimeMachine>;
+export default meta;
+type Story = StoryObj<typeof TimeMachine>;
+export declare const Default: Story;
+export declare const StartAtLatestVersion: Story;
+export declare const HighScrollSensitivity: Story;
 //# sourceMappingURL=TimeMachine.stories.d.ts.map

package/dist/esm/TimeMachine/TimeMachine.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeMachine.stories.d.ts","sourceRoot":"","sources":["../../../TimeMachine/TimeMachine.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAA0E;AAE1E,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"TimeMachine.stories.d.ts","sourceRoot":"","sources":["../../../TimeMachine/TimeMachine.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAMlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAkG1C,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC"}

package/dist/esm/TimeMachine/TimeMachine.stories.js

@@ -1,6 +1,115 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './TimeMachine';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'TimeMachine/TimeMachine', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { TimeMachine } from './TimeMachine';
+import { Properties } from './Properties';
+const meta = {
+    title: 'TimeMachine/TimeMachine',
+    component: TimeMachine,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const sampleVersions = [
+    {
+        id: 'v1',
+        timestamp: new Date('2024-02-10T08:00:00'),
+        label: 'Version 1 - Initial State',
+        content: (_jsx(Properties, { data: {
+                userId: 'user-001',
+                username: 'alice.smith',
+                email: 'alice@example.com',
+                role: 'user',
+                isActive: false,
+                credits: 0
+            } })),
+        events: []
+    },
+    {
+        id: 'v2',
+        timestamp: new Date('2024-02-10T09:00:00'),
+        label: 'Version 2 - User Activated',
+        content: (_jsx(Properties, { data: {
+                userId: 'user-001',
+                username: 'alice.smith',
+                email: 'alice@example.com',
+                role: 'user',
+                isActive: true,
+                credits: 100
+            } })),
+        events: [
+            {
+                sequenceNumber: 1,
+                type: 'UserActivated',
+                occurred: new Date('2024-02-10T09:00:00'),
+                content: { userId: 'user-001', credits: 100 }
+            }
+        ]
+    },
+    {
+        id: 'v3',
+        timestamp: new Date('2024-02-10T10:00:00'),
+        label: 'Version 3 - Credits Added',
+        content: (_jsx(Properties, { data: {
+                userId: 'user-001',
+                username: 'alice.smith',
+                email: 'alice@example.com',
+                role: 'user',
+                isActive: true,
+                credits: 500
+            } })),
+        events: [
+            {
+                sequenceNumber: 2,
+                type: 'CreditsAdded',
+                occurred: new Date('2024-02-10T10:00:00'),
+                content: { userId: 'user-001', amount: 400, newBalance: 500 }
+            }
+        ]
+    },
+    {
+        id: 'v4',
+        timestamp: new Date('2024-02-10T11:00:00'),
+        label: 'Version 4 - Promoted to Admin',
+        content: (_jsx(Properties, { data: {
+                userId: 'user-001',
+                username: 'alice.smith',
+                email: 'alice@example.com',
+                role: 'admin',
+                isActive: true,
+                credits: 500
+            } })),
+        events: [
+            {
+                sequenceNumber: 3,
+                type: 'RoleChanged',
+                occurred: new Date('2024-02-10T11:00:00'),
+                content: { userId: 'user-001', oldRole: 'user', newRole: 'admin' }
+            }
+        ]
+    }
+];
+export const Default = {
+    args: {
+        versions: sampleVersions,
+        currentVersionIndex: 0,
+        scrollSensitivity: 50,
+    },
+    render: (args) => (_jsx("div", { style: { height: '100vh', width: '100vw' }, children: _jsx(TimeMachine, { ...args }) }))
+};
+export const StartAtLatestVersion = {
+    args: {
+        versions: sampleVersions,
+        currentVersionIndex: sampleVersions.length - 1,
+        scrollSensitivity: 50,
+    },
+    render: (args) => (_jsx("div", { style: { height: '100vh', width: '100vw' }, children: _jsx(TimeMachine, { ...args }) }))
+};
+export const HighScrollSensitivity = {
+    args: {
+        versions: sampleVersions,
+        currentVersionIndex: 0,
+        scrollSensitivity: 100,
+    },
+    render: (args) => (_jsx("div", { style: { height: '100vh', width: '100vw' }, children: _jsx(TimeMachine, { ...args }) }))
+};
 //# sourceMappingURL=TimeMachine.stories.js.map

package/dist/esm/TimeMachine/TimeMachine.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeMachine.stories.js","sourceRoot":"","sources":["../../../TimeMachine/TimeMachine.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,eAAe,CAAC;AACtC,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAA4E,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAuE,CAAC;AAE1R,eAAe,EAAE,KAAK,EAAE,yBAAyB,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"TimeMachine.stories.js","sourceRoot":"","sources":["../../../TimeMachine/TimeMachine.stories.tsx"],"names":[],"mappings":"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"}