collaborative-ui/lib/JsonCrdtBlock/index.stories.js

React component library for building real-time collaborative editing applications.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const _1 = require(".");
const json_crdt_repo_1 = require("json-crdt-repo");
const Block_1 = require("./state/Block");
const JsonPatchStore_1 = require("json-joy/lib/json-crdt/json-patch/JsonPatchStore");
const Todos_1 = require("../examples/Todos");
const json_crdt_1 = require("json-joy/lib/json-crdt");
exports.default = {
    component: _1.JsonCrdtBlock,
    title: '<JsonCrdtBlock>',
};
const repo = new json_crdt_repo_1.JsonCrdtRepo();
const id = 'storybook-demo-todos';
const schema = json_crdt_1.s.obj({
    todos: json_crdt_1.s.obj({
        list: json_crdt_1.s.arr([]),
    }),
});
const { session } = repo.sessions.make({ id: ['demo', id], schema });
const block = new Block_1.Block(id, session, repo);
const store = new JsonPatchStore_1.JsonPatchStore(session.model, ['todos']);
exports.Default = {
    render: () => (React.createElement("div", null,
        React.createElement(Todos_1.Todos, { store: store }),
        React.createElement("br", null),
        React.createElement(_1.JsonCrdtBlock, { block: block }))),
};