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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Quill = exports.BlogPost = exports.Todo = exports.Textarea = exports.Monaco = exports.Default = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const _1 = require(".");
const fixtures_1 = require("../__tests__/fixtures");
const json_crdt_extensions_1 = require("json-joy/lib/json-crdt-extensions");
const MonacoEditor_1 = require("../MonacoEditor");
const CollaborativeInput_1 = require("../CollaborativeInput");
const opt_1 = require("../util/opt");
const Todos_1 = require("../examples/Todos");
const Blogpost_1 = require("../examples/Blogpost");
const JsonPatchStore_1 = require("json-joy/lib/json-crdt/json-patch/JsonPatchStore");
const json_crdt_extensions_2 = require("json-joy/lib/json-crdt-extensions");
const Log_1 = require("json-joy/lib/json-crdt/log/Log");
const CollaborativeQuill_1 = require("collaborative-quill/lib/CollaborativeQuill");
exports.default = {
    component: _1.JsonCrdtLog,
    title: '<JsonCrdtLog>',
};
exports.Default = {
    render: () => React.createElement(_1.JsonCrdtLog, { log: fixtures_1.log2 }),
};
const MonacoDemo = () => {
    const [model, setModel] = React.useState();
    return (React.createElement("div", null,
        React.createElement("div", null, !!model && (React.createElement(MonacoEditor_1.CollaborativeMonaco, { str: () => model.api.str([]), style: {
                width: '100%',
                height: '75vh',
            } }))),
        React.createElement(_1.JsonCrdtLog, { log: fixtures_1.log2, onModel: (model) => setModel(model) })));
};
exports.Monaco = {
    render: () => React.createElement(MonacoDemo, null),
};
const TextareaDemo = () => {
    const [model, setModel] = React.useState();
    return (React.createElement("div", null,
        React.createElement("div", null, !!model && !!(0, opt_1.opt)(() => model.api.str([])) && (React.createElement(CollaborativeInput_1.CollaborativeInput, { multiline: true, str: () => (0, opt_1.opt)(() => model.api.str([])), style: {
                width: '100%',
                height: '50vh',
            } }))),
        React.createElement(_1.JsonCrdtLog, { log: fixtures_1.log2, onModel: (model) => setModel(model) })));
};
exports.Textarea = {
    render: () => React.createElement(TextareaDemo, null),
};
const TodoDemo = () => {
    const [store, setStore] = React.useState();
    return (React.createElement("div", null,
        React.createElement("div", null, !!store && React.createElement(Todos_1.Todos, { store: store })),
        React.createElement(_1.JsonCrdtLog, { log: fixtures_1.log3, onModel: (model) => setStore(new JsonPatchStore_1.JsonPatchStore(model)) })));
};
exports.Todo = {
    render: () => React.createElement(TodoDemo, null),
};
const BlogPostDemo = () => {
    const [model, setModel] = React.useState();
    return (React.createElement("div", null,
        React.createElement("button", { type: 'button', onClick: async () => {
                const res = await fetch('https://appsets.jsonjoy.com/traces/todos.seq.cbor.gz');
                console.log('res', res);
                const blob = await res.blob();
                console.log('blob', blob);
            } }, "Load adsfsadf asdf"),
        React.createElement("div", null, !!model && React.createElement(Blogpost_1.Blogpost, { model: model })),
        React.createElement(_1.JsonCrdtLog, { log: fixtures_1.log4, onModel: (model) => setModel(model) })));
};
exports.BlogPost = {
    render: () => React.createElement(BlogPostDemo, null),
};
const QuillDemo = () => {
    const [model, setModel] = React.useState();
    // biome-ignore lint: manual dependency list
    const log = React.useMemo(() => {
        const model = json_crdt_extensions_2.ModelWithExt.create(json_crdt_extensions_2.ModelWithExt.ext.quill.new(''));
        const log = Log_1.Log.fromNewModel(model);
        const start = log.start;
        log.start = () => {
            const model = start();
            model.ext.register(json_crdt_extensions_1.ext.quill);
            return model;
        };
        log.end.ext.register(json_crdt_extensions_1.ext.quill);
        log.end.api.autoFlush();
        return log;
    }, ['']);
    return (React.createElement("div", null,
        React.createElement("div", null, !!model && (React.createElement(CollaborativeQuill_1.CollaborativeQuill, { api: () => model.s.toExt(), style: {
                width: '100%',
                height: '300px',
            } }))),
        React.createElement("br", null),
        React.createElement(_1.JsonCrdtLog, { log: log, onModel: (model) => setModel(model) })));
};
exports.Quill = {
    render: () => React.createElement(QuillDemo, null),
};