tycho-components 0.21.18 → 0.22.0

package/dist/features/DocumentDrawer/DocumentExport/DocumentExport.d.ts

@@ -0,0 +1,7 @@
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    doc: Document;
+};
+export default function DocumentExport({ doc }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/DocumentExport/DocumentExport.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FileUtils from '../functions/FileUtils';
+import outputService from '../services/ExportService';
+import { EXPORT_TYPE_DISPLAY } from '../types/Export';
+import { saveAs } from 'file-saver';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMessageUtils } from '../deps';
+import { Icon } from 'tycho-storybook';
+import ExportInvalidSentences from './ExportInvalidSentences';
+import './style.scss';
+const timingCheck = 5000;
+export default function DocumentExport({ doc }) {
+    const { t } = useTranslation('export');
+    const { dispatchLoading, dispatchError, dispatchMessage, isLoading } = useMessageUtils();
+    const [invalidSentences, setInvalidSentences] = useState();
+    let intervalCheck = null;
+    const process = (thisType) => {
+        if (isLoading())
+            return;
+        dispatchLoading(true);
+        outputService
+            .execute(doc.uid, thisType)
+            .then((r) => {
+            intervalCheck = setInterval(() => check(r.data), timingCheck);
+        })
+            .catch((err) => {
+            dispatchError({ err, t });
+            dispatchLoading(false);
+        });
+    };
+    const forceZipDownload = (data) => {
+        window.open(data.url);
+    };
+    const check = (uid) => {
+        outputService
+            .check(uid)
+            .then((r) => {
+            if (!r.data?.completed)
+                return;
+            dispatchLoading(false);
+            dispatchMessage({ key: 'export.process.success', t });
+            const filename = FileUtils.getFileNameFromURL(r.data.url);
+            if (r.data.url.endsWith('.zip')) {
+                forceZipDownload(r.data);
+            }
+            else {
+                saveAs(r.data.url, filename);
+            }
+            clearInterval(intervalCheck);
+        })
+            .catch((err) => {
+            dispatchLoading(false);
+            clearInterval(intervalCheck);
+            handleError(err);
+        });
+    };
+    const handleError = (err) => {
+        const message = err.response.data.message || err.response.data.error;
+        if (message === 'psd.invalid.sentences') {
+            setInvalidSentences(err.response.data.details);
+        }
+        else {
+            dispatchError({
+                err: message.indexOf('\n') !== -1 ? message.split('\n')[0] : err,
+                t,
+            });
+        }
+    };
+    return (_jsxs("div", { className: "document-export-container", children: [_jsx("div", { className: "header", children: _jsx("div", { className: "title", children: t('export.label.title') }) }), _jsx("div", { className: "body", children: EXPORT_TYPE_DISPLAY.filter((t) => t.active).map((item) => (_jsxs("div", { className: "action-line", onClick: () => process(item.type), children: [_jsx("div", { className: "action-button", children: _jsx(Icon, { name: item.icon, size: "medium" }) }), _jsxs("div", { className: "action-desc", children: [_jsx("span", { className: "title", children: t(`export.label.${item.type.toLowerCase()}`) }), _jsx("span", { children: t(`export.desc.${item.type.toLowerCase()}`) })] })] }, item.icon))) }), invalidSentences && invalidSentences.length > 0 && (_jsx(ExportInvalidSentences, { sentences: invalidSentences, onClose: () => setInvalidSentences([]) }))] }));
+}

package/dist/features/DocumentDrawer/DocumentExport/ExportInvalidSentences.d.ts

@@ -0,0 +1,7 @@
+import './style.scss';
+type Props = {
+    sentences: string[];
+    onClose: () => void;
+};
+export default function ExportInvalidSentences({ sentences, onClose }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/DocumentExport/ExportInvalidSentences.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { AppModal } from '../deps';
+import './style.scss';
+import { Icon } from 'tycho-storybook';
+export default function ExportInvalidSentences({ sentences, onClose }) {
+    const { t } = useTranslation('export');
+    const handleOpen = (s) => {
+        window.open(`/revision/tree/${s}`);
+    };
+    return (_jsxs(AppModal, { title: t('modal.title.invalid.sentences'), close: onClose, className: "modal-invalid-sentences", hideFooter: true, children: [_jsx("p", { children: t('modal.desc.invalid.sentences') }), sentences.map((s, idx) => (_jsxs("div", { className: "sentence", children: [_jsx("span", { className: "uid", children: s }), _jsx(Icon, { name: "open_in_new", onClick: () => handleOpen(s) })] }, idx.valueOf())))] }));
+}

package/dist/features/DocumentDrawer/DocumentExport/index.d.ts

@@ -0,0 +1,2 @@
+import DocumentExport from './DocumentExport';
+export default DocumentExport;

package/dist/features/DocumentDrawer/DocumentExport/index.js

@@ -0,0 +1,2 @@
+import DocumentExport from './DocumentExport';
+export default DocumentExport;

package/dist/features/DocumentDrawer/DocumentExport/style.scss

@@ -0,0 +1,31 @@
+.document-export-container {
+  .body {
+    height: 90vh;
+    overflow-y: auto;
+  }
+}
+
+.modal-invalid-sentences {
+  .body {
+    display: flex;
+    flex-wrap: wrap;
+
+    > .sentence {
+      display: flex;
+      flex: 0 0 50%;
+      box-sizing: border-box;
+      align-items: center;
+      border-bottom: 1px solid var(--border-subtle-2);
+      padding: 4px 0px;
+
+      .uid {
+        font-family: 'Courier New', Courier, monospace;
+      }
+
+      > .ds-icon {
+        margin-left: 8px;
+        cursor: pointer;
+      }
+    }
+  }
+}

package/dist/features/DocumentDrawer/DocumentLexicon/DocumentLexicon.d.ts

@@ -0,0 +1,7 @@
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+};
+export default function DocumentLexicon({ document }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/DocumentLexicon/DocumentLexicon.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import lexiconService from '../services/LexiconService';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppPlaceholder, useCorpusUtils } from '../deps';
+import './style.scss';
+export default function DocumentLexicon({ document }) {
+    const { t } = useTranslation('document');
+    const { getCorpus, hasParameter } = useCorpusUtils();
+    const [editions, setEditions] = useState();
+    const getAttributes = (edition) => {
+        return Object.entries(edition.ops)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join(', ');
+    };
+    useEffect(() => {
+        lexiconService.list(document).then((response) => {
+            setEditions(response.data);
+        });
+    }, []);
+    return (_jsxs("div", { className: "lexicon-container", children: [_jsx("div", { className: "header", children: _jsx("div", { className: "title", children: t('lexicon.label.title') }) }), _jsxs("div", { className: "body", children: [editions && editions.length > 0 && (_jsxs("table", { className: "lexicon-table table-striped", children: [_jsxs("colgroup", { children: [_jsx("col", { className: "word-col", span: 1 }), _jsx("col", { className: "value-col", span: 1 })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t('lexicon.label.word') }), hasParameter(getCorpus(), 'useEditionTiers') ? (_jsx("th", { children: t('lexicon.label.editions') })) : (_jsx("th", { children: t('lexicon.label.tag') }))] }) }), _jsx("tbody", { children: editions.map((edition, idx) => (_jsxs("tr", { children: [_jsx("td", { children: edition.value }), hasParameter(getCorpus(), 'useEditionTiers') ? (_jsx("td", { children: getAttributes(edition) })) : (_jsx("td", { children: edition.tag }))] }, idx.valueOf()))) })] })), editions && editions.length === 0 && (_jsx(AppPlaceholder, { text: t('placeholder.empty.lexicon') }))] })] }));
+}

package/dist/features/DocumentDrawer/DocumentLexicon/index.d.ts

@@ -0,0 +1,2 @@
+import DocumentLexicon from './DocumentLexicon';
+export default DocumentLexicon;

package/dist/features/DocumentDrawer/DocumentLexicon/index.js

@@ -0,0 +1,2 @@
+import DocumentLexicon from './DocumentLexicon';
+export default DocumentLexicon;

package/dist/features/DocumentDrawer/DocumentLexicon/style.scss

@@ -0,0 +1,38 @@
+.lexicon-container {
+  width: 100%;
+
+  .body {
+    width: 100%;
+    height: 90vh;
+    overflow-y: auto;
+
+    .placeholder-container {
+      @include label-large-1;
+      height: auto;
+    }
+
+    .lexicon-table {
+      border: none;
+      width: 100%;
+      max-width: 100%;
+      table-layout: fixed;
+      border-collapse: collapse;
+
+      col.word-col {
+        width: 35%;
+      }
+
+      col.value-col {
+        width: 65%;
+      }
+
+      th,
+      td {
+        box-sizing: border-box;
+        padding: 8px;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+      }
+    }
+  }
+}

package/dist/features/DocumentDrawer/DocumentRemove/DocumentRemove.d.ts

@@ -0,0 +1,12 @@
+import CatalogSearchFilter from '../types/CatalogSearchFilter';
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    onClose: () => void;
+    useGrid: boolean;
+    setFilter: (p: CatalogSearchFilter) => void;
+    setOpenFile: (b: boolean) => void;
+};
+export default function DocumentRemove({ document, onClose, useGrid, setFilter, setOpenFile, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/DocumentRemove/DocumentRemove.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { emptyCatalogSearchFilter, } from '../types/CatalogSearchFilter';
+import DocumentService from '../services/DocumentService';
+import { useTranslation } from 'react-i18next';
+import { AppModalConfirm, DateUtils, useMessageUtils } from '../deps';
+import './style.scss';
+export default function DocumentRemove({ document, onClose, useGrid, setFilter, setOpenFile, }) {
+    const { t } = useTranslation('actions');
+    const { dispatchLoading, isLoading } = useMessageUtils();
+    const handleRemove = () => {
+        if (isLoading())
+            return;
+        dispatchLoading(true);
+        DocumentService.remove(document.uid)
+            .then((r) => {
+            setOpenFile(false);
+            onClose();
+            setFilter({
+                ...emptyCatalogSearchFilter(useGrid),
+                seed: DateUtils.millis(),
+            });
+        })
+            .finally(() => {
+            dispatchLoading(false);
+        });
+    };
+    return (_jsx(AppModalConfirm, { title: t('modal.remove.title'), subtitle: t('message:generic.remove.message'), onClose: onClose, onConfirm: handleRemove }));
+}

package/dist/features/DocumentDrawer/DocumentRemove/index.d.ts

@@ -0,0 +1,2 @@
+import DocumentRemove from './DocumentRemove';
+export default DocumentRemove;

package/dist/features/DocumentDrawer/DocumentRemove/index.js

@@ -0,0 +1,2 @@
+import DocumentRemove from './DocumentRemove';
+export default DocumentRemove;

package/dist/features/DocumentDrawer/Github/Github.d.ts

@@ -0,0 +1,8 @@
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    setOpenFile: (b: boolean) => void;
+};
+export default function Github({ document, setOpenFile }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/Github/Github.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from 'tycho-storybook';
+import GithubCommit from './GithubCommit';
+import './style.scss';
+export default function Github({ document, setOpenFile }) {
+    const { t } = useTranslation('github');
+    const [openCommit, setOpenCommit] = useState(false);
+    return (_jsxs("div", { className: "github-actions-container", children: [_jsx("div", { className: "header", children: _jsx("div", { className: "title", children: t('label.title') }) }), _jsx("div", { className: "body", children: _jsxs("div", { className: "action-line", onClick: () => setOpenCommit(true), children: [_jsx("div", { className: "action-button", children: _jsx(Icon, { name: "commit", size: "medium" }) }), _jsxs("div", { className: "action-desc", children: [_jsx("span", { className: "title", children: t('label.commit.title') }), _jsx("span", { children: t('label.commit.description') })] })] }, "commit") }), openCommit && (_jsx(GithubCommit, { document: document, onClose: () => setOpenCommit(false) }))] }));
+}

package/dist/features/DocumentDrawer/Github/GithubCommit.d.ts

@@ -0,0 +1,8 @@
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    onClose: () => void;
+};
+export default function GithubCommit({ document, onClose }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/Github/GithubCommit.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import ExportService from '../services/ExportService';
+import GithubService from '../services/GithubService';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppModal, useCorpusUtils, useMessageUtils } from '../deps';
+import './style.scss';
+const timingCheck = 5000;
+export default function GithubCommit({ document, onClose }) {
+    const { t } = useTranslation('github');
+    const { dispatchLoading, dispatchError, dispatchMessage, isLoading } = useMessageUtils();
+    const { getCorpus, hasCorpus } = useCorpusUtils();
+    const [exportId, setExportId] = useState('');
+    const [openPush, setOpenPush] = useState(false);
+    let intervalCheck = null;
+    const handleExport = () => {
+        if (isLoading())
+            return;
+        dispatchLoading(true);
+        ExportService.executeForGithub(document.uid, document.githubFormat)
+            .then((r) => {
+            setExportId(r.data);
+        })
+            .catch((err) => {
+            console.log(err);
+            dispatchError({ err, t });
+            dispatchLoading(false);
+        });
+    };
+    const handleCommit = () => {
+        if (isLoading() || !hasCorpus())
+            return;
+        GithubService.commit(getCorpus())
+            .then(() => {
+            setOpenPush(true);
+        })
+            .catch((err) => {
+            dispatchError({ err, t });
+            dispatchLoading(false);
+        });
+    };
+    const handlePush = () => {
+        if (isLoading() || !hasCorpus())
+            return;
+        dispatchLoading(true);
+        GithubService.push(getCorpus())
+            .then(() => {
+            dispatchMessage({ key: 'push.success', t });
+            onClose();
+            setOpenPush(false);
+        })
+            .catch((err) => {
+            dispatchError({ err, t });
+        })
+            .finally(() => {
+            dispatchLoading(false);
+        });
+    };
+    const check = () => {
+        ExportService.check(exportId)
+            .then((r) => {
+            if (!r.data)
+                return;
+            clearInterval(intervalCheck);
+            if (r.data.status === 'SUCCESS') {
+                handleCommit();
+            }
+            else {
+                dispatchError({ err: r.data.error, t });
+            }
+        })
+            .catch(() => {
+            dispatchError({ err: 'export.process.error', t });
+            clearInterval(intervalCheck);
+        });
+    };
+    useEffect(() => {
+        if (!exportId)
+            return;
+        intervalCheck = setInterval(check, timingCheck);
+    }, [exportId]);
+    return (_jsx(_Fragment, { children: !openPush ? (_jsx(AppModal, { title: t('modal.commit.title'), className: "modal-github", close: onClose, confirm: handleExport, children: _jsxs("div", { className: "body", children: [_jsx("p", { children: t('modal.commit.description') }), _jsxs("div", { className: "line", children: [_jsx("b", { children: t('modal.label.github.file') }), _jsx("span", { children: document.github })] }), _jsxs("div", { className: "line", children: [_jsx("b", { children: t('modal.label.github.format') }), _jsx("span", { children: document.githubFormat })] })] }) })) : (_jsx(AppModal, { title: t('modal.push.title'), className: "modal-github", close: () => {
+                setOpenPush(false);
+                onClose();
+            }, confirm: handlePush, children: _jsx("div", { className: "body", children: _jsx("p", { children: t('modal.push.description') }) }) })) }));
+}

package/dist/features/DocumentDrawer/Github/index.d.ts

@@ -0,0 +1,2 @@
+import Github from './Github';
+export default Github;

package/dist/features/DocumentDrawer/Github/index.js

@@ -0,0 +1,2 @@
+import Github from './Github';
+export default Github;

package/dist/features/DocumentDrawer/Github/style.scss

@@ -0,0 +1,31 @@
+.github-actions-container {
+  .body {
+    height: 90vh;
+    overflow-y: auto;
+  }
+}
+
+.modal-github {
+  width: 50vw;
+  max-width: 50vw;
+
+  .modal-body {
+    padding: 0px;
+
+    > .body {
+      padding: 16px;
+
+      > p {
+        text-align: center;
+      }
+
+      > .line {
+        margin-bottom: 4px;
+
+        > b {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+}

package/dist/features/DocumentDrawer/ImageGallery/GalleryImage.d.ts

@@ -0,0 +1,8 @@
+declare enum ImageGalleryType {
+    COVER = "Cover"
+}
+export default ImageGalleryType;
+export default interface GalleryImage {
+    type: string;
+    url: string;
+}

package/dist/features/DocumentDrawer/ImageGallery/GalleryImage.js

@@ -0,0 +1,5 @@
+var ImageGalleryType;
+(function (ImageGalleryType) {
+    ImageGalleryType["COVER"] = "Cover";
+})(ImageGalleryType || (ImageGalleryType = {}));
+export default ImageGalleryType;

package/dist/features/DocumentDrawer/ImageGallery/GalleryRemoval.d.ts

@@ -0,0 +1,9 @@
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    onClose: () => void;
+    onRemove: () => void;
+};
+export default function GalleryRemoval({ document, onClose, onRemove }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/ImageGallery/GalleryRemoval.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ImageService from '../services/ImageService';
+import { useTranslation } from 'react-i18next';
+import { AppModalConfirm } from '../deps';
+import './style.scss';
+export default function GalleryRemoval({ document, onClose, onRemove }) {
+    const { t } = useTranslation('document');
+    const handleRemove = () => {
+        ImageService.removeDocument(document.uid).then(() => {
+            onRemove();
+        });
+    };
+    return (_jsx(AppModalConfirm, { title: t('message:generic.remove.title'), subtitle: t('message:generic.remove.message'), onClose: onClose, onConfirm: handleRemove }));
+}

package/dist/features/DocumentDrawer/ImageGallery/ImageGallery.d.ts

@@ -0,0 +1,9 @@
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    setDocument: (d: Document) => void;
+    handleChange: (document: Document) => void;
+};
+export default function ImageGallery({ document, setDocument, handleChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/ImageGallery/ImageGallery.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import ImageService from '../services/ImageService';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppCard, AppDropzone, AppPicture, AppPlaceholder, useCorpusUtils, useMessageUtils, } from '../deps';
+import { Button, IconButton } from 'tycho-storybook';
+import GalleryRemoval from './GalleryRemoval';
+import './style.scss';
+export default function ImageGallery({ document, setDocument, handleChange, }) {
+    const { t } = useTranslation('document');
+    const { dispatchMessage } = useMessageUtils();
+    const { getCorpus, hasCorpus } = useCorpusUtils();
+    const [images, setImages] = useState([]);
+    const [removal, setRemoval] = useState();
+    const [openUpload, setOpenUpload] = useState(false);
+    const handleSuccess = (response) => {
+        const image = {
+            ...response,
+            type: 'COVER',
+        };
+        ImageService.updateDocument(document.uid, image).then(() => {
+            dispatchMessage({ key: 'update.success', t });
+            setDocument({ ...document, picture: response.url });
+            setImages((prevState) => [...prevState, image]);
+            updateImageAtList(response.url);
+            setOpenUpload(false);
+        });
+    };
+    const updateImageAtList = (value) => {
+        handleChange({ ...document, picture: value });
+    };
+    useEffect(() => {
+        if (document.picture)
+            setImages([{ url: document.picture, type: 'COVER' }]);
+    }, [document]);
+    return (_jsxs("div", { className: "images-container", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('images.label.title') }), !document.picture && (_jsx(Button, { size: "small", onClick: () => setOpenUpload(true), text: t('images.tooltip.add'), icon: "add", mode: "outlined" }))] }), _jsxs("div", { className: "body", children: [images.map((image, idx) => (_jsx(AppCard, { footer: _jsxs(_Fragment, { children: [_jsx("span", { children: t('images.label.card') }), _jsx(IconButton, { onClick: () => setRemoval(image), title: t('images.tooltip.remove'), name: "delete", mode: "ghost", size: "small" })] }), children: _jsx(AppPicture, { src: image.url }) }, idx.valueOf()))), images.length === 0 && (_jsx(AppPlaceholder, { text: t('placeholder.empty.images') }))] }), openUpload && hasCorpus() && (_jsx(AppDropzone, { folder: `/${getCorpus().uploadDir}/documents`, onSuccess: handleSuccess, onClose: () => setOpenUpload(false), accept: {
+                    'image/jpeg': [],
+                    'image/png': [],
+                } })), removal && (_jsx(GalleryRemoval, { document: document, onClose: () => setRemoval(undefined), onRemove: () => {
+                    setDocument({ ...document, picture: '' });
+                    setImages(images.filter((i) => i.type !== removal.type));
+                    setRemoval(undefined);
+                    updateImageAtList('');
+                } }))] }));
+}

package/dist/features/DocumentDrawer/ImageGallery/index.d.ts

@@ -0,0 +1,2 @@
+import ImageGallery from './ImageGallery';
+export default ImageGallery;

package/dist/features/DocumentDrawer/ImageGallery/index.js

@@ -0,0 +1,2 @@
+import ImageGallery from './ImageGallery';
+export default ImageGallery;

package/dist/features/DocumentDrawer/ImageGallery/style.scss

@@ -0,0 +1,41 @@
+.images-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  > .body {
+    display: flex;
+    flex-wrap: wrap;
+    max-height: 90vh;
+    overflow-y: auto;
+    padding: 16px;
+    gap: 16px;
+
+    > .ds-placeholder {
+      margin: 0 auto;
+    }
+
+    > .ds-app-card {
+      flex: 0 0 calc(50% - 16px);
+
+      > .body {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 20vh;
+        overflow: hidden;
+
+        img {
+          max-height: 20vh;
+          max-width: 230px;
+        }
+      }
+
+      > .footer {
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+  }
+}

package/dist/features/DocumentDrawer/Info/Info.d.ts

@@ -0,0 +1,10 @@
+import Category from '../types/Category';
+import { Document } from '../deps';
+import './style.scss';
+type Props = {
+    document: Document;
+    categoriesHierarchy: Category[];
+    handleChange: (document: Document) => void;
+};
+export default function Info({ document, categoriesHierarchy, handleChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/DocumentDrawer/Info/Info.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DocumentEdit, { getDocumentFields } from '../DocumentEdit/DocumentEdit';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppCopyText, AppFormInfo } from '../deps';
+import { Button } from 'tycho-storybook';
+import './style.scss';
+export default function Info({ document, categoriesHierarchy, handleChange, }) {
+    const { t } = useTranslation(['document', 'actions']);
+    const [editOpen, setEditOpen] = useState(false);
+    const categoryName = categoriesHierarchy.find((category) => category.uid === document.category)
+        ?.name ?? document.category;
+    const documentInfoData = { ...document, category: categoryName };
+    return (_jsxs("div", { className: "info-container", children: [_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: t('document.label.title') }), _jsx(Button, { size: "small", onClick: () => setEditOpen(true), text: t('document.button.edit'), icon: "edit", mode: "outlined" })] }), _jsx("div", { className: "body", children: _jsx(AppFormInfo, { fields: getDocumentFields(categoriesHierarchy, t).filter((field) => field.attr !== 'category' ||
+                        (categoriesHierarchy?.length ?? 0) > 0), data: documentInfoData }) }), _jsx("div", { className: "footer", children: _jsx(AppCopyText, { content: document.uid }) }), editOpen && (_jsx(DocumentEdit, { document: document, categoriesHierarchy: categoriesHierarchy, onClose: () => setEditOpen(false), onSave: handleChange }))] }));
+}

package/dist/features/DocumentDrawer/Info/index.d.ts

@@ -0,0 +1,2 @@
+import Info from './Info';
+export default Info;

package/dist/features/DocumentDrawer/Info/index.js

@@ -0,0 +1,2 @@
+import Info from './Info';
+export default Info;