@abyss-project/commons-front-core 9.6.0 → 10.1.0

package/catalog/catalog-entries.ts

@@ -116,6 +116,8 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('ContextSelector', 'inputs', 'context-selector', RESPONSIVE),
   entry('DropZone', 'inputs', 'drop-zone', RESPONSIVE),
   entry('ImportButton', 'inputs', 'import-button'),
+  entry('MarkdownEditor', 'inputs', 'markdown-editor', RESPONSIVE),
+  entry('PdfEditor', 'inputs', 'pdf-editor', RESPONSIVE),
   entry('ExpressionSearch', 'inputs', 'expression-search', {
     mobileCapture: true,
   }),

package/catalog/pages/MarkdownEditor.tsx

@@ -0,0 +1,48 @@
+import { MarkdownEditor } from '../../src/components/editors/MarkdownEditor/MarkdownEditor';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const NOTE = `# Compte rendu de la revue
+
+Les points à **retenir** : le budget reste *stable*, et le lien vers le [tableau de bord](https://abyss.example) est à jour.
+
+- Valider le périmètre
+- Relire les \`conditions\`
+- Envoyer le résumé
+
+> La prochaine revue a lieu jeudi.
+
+\`\`\`ts
+const total = lignes.reduce((somme, ligne) => somme + ligne.montant, 0);
+\`\`\`
+
+| Poste | Montant |
+| --- | --- |
+| Hébergement | 1 200 |
+| Licences | 840 |
+`;
+
+export const MarkdownEditorPage = () => {
+  const { log } = useEventLog();
+
+  return (
+    <Showcase
+      family="Saisie"
+      name="MarkdownEditor"
+      description="Éditeur Markdown de l'écosystème : Crepe, aux couleurs et aux polices du design system, libellés traduits. Un « / » ouvre le menu des blocs ; la poignée à gauche d'un bloc l'ajoute ou le déplace. Sur un écran tactile, la poignée et les boutons font 44 px."
+    >
+      <Example title="Édition d'une note" maxWidth={880}>
+        <MarkdownEditor
+          defaultValue={NOTE}
+          onChange={(markdown) => log(`${markdown.length} caractères`)}
+        />
+      </Example>
+      <Example title="Document vide" maxWidth={880}>
+        <MarkdownEditor />
+      </Example>
+      <Example title="Lecture seule" maxWidth={880}>
+        <MarkdownEditor defaultValue={NOTE} readOnly />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/PdfEditor.tsx

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useState } from 'react';
+import { AssetKind } from '@abyss-project/main';
+import { PDFDocument, StandardFonts } from 'pdf-lib';
+import { styled } from '@mui/material/styles';
+import { PdfEditor } from '../../src/components/editors/PdfEditor/PdfEditor';
+import { hairline, px } from '../../src/theme/components/shared';
+import type {
+  AssetPalette,
+  ExportRequest,
+  OperationsAdapter,
+  PdfSource,
+} from '../../src/components/editors/PdfEditor/engine/types';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const FILE_NAME = 'contrat-de-prestation.pdf';
+
+const PARAGRAPHS = [
+  'Article 1 : objet du contrat',
+  'Le prestataire réalise la refonte du portail client.',
+  'Article 2 : durée',
+  'Le contrat prend effet à la signature, pour douze mois.',
+  'Article 3 : prix',
+  'Le prix est payé en trois échéances égales.',
+];
+
+/** A three-page A4 contract, built in the browser so the catalog needs no fixture file. */
+const buildContract = async (): Promise<ArrayBuffer> => {
+  const doc = await PDFDocument.create();
+  const font = await doc.embedFont(StandardFonts.Helvetica);
+  const bold = await doc.embedFont(StandardFonts.HelveticaBold);
+  for (let index = 0; index < 3; index += 1) {
+    const page = doc.addPage([595.28, 841.89]);
+    page.drawText(`Contrat de prestation, page ${index + 1}`, {
+      x: 56,
+      y: 780,
+      size: 18,
+      font: bold,
+    });
+    PARAGRAPHS.forEach((line, row) => {
+      page.drawText(line, { x: 56, y: 720 - row * 28, size: 12, font });
+    });
+  }
+  const bytes = await doc.save();
+  return bytes.slice().buffer;
+};
+
+/** A drawn signature, as the saved assets of a signed-in user would carry one. */
+const SIGNATURE_SVG = `data:image/svg+xml;utf8,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80'><path d='M10 60 C 40 10, 60 10, 80 50 S 130 80, 150 30 S 200 20, 230 55' fill='none' stroke='navy' stroke-width='3'/></svg>",
+)}`;
+
+const PALETTE: AssetPalette = {
+  personal: [
+    {
+      id: 'signature',
+      kind: AssetKind.SIGNATURE,
+      name: 'Signature',
+      downloadUrl: SIGNATURE_SVG,
+    },
+    {
+      id: 'mention',
+      kind: AssetKind.TEXT_BLOCK,
+      name: 'Mention',
+      downloadUrl: null,
+      textContent: 'Lu et approuvé',
+    },
+  ],
+  organizations: [{ id: 'acme', name: 'Acme', items: [] }],
+};
+
+const Frame = styled('div')(({ theme }) => ({
+  height: 720,
+  border: hairline(theme.design.tokens['border.subtle']),
+  borderRadius: px(theme.design.radii.md),
+  overflow: 'hidden',
+}));
+
+export const PdfEditorPage = () => {
+  const { log } = useEventLog();
+  const [source, setSource] = useState<PdfSource | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void buildContract().then((data) => {
+      if (!cancelled) {
+        setSource({ kind: 'BLOB', data, fileName: FILE_NAME });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const onExport = useCallback(
+    async (request: ExportRequest) => log(`export ${request.kind}`),
+    [log],
+  );
+  const operationsAdapter = useCallback<OperationsAdapter>(
+    async ({ operations }) => log(`${operations.length} opérations`),
+    [log],
+  );
+
+  return (
+    <Showcase
+      family="Saisie"
+      name="PdfEditor"
+      description="Éditeur PDF de l'écosystème : barre en groupes (Annoter, Signer et remplir, Pages, Sécurité, Fichier), pages et vignettes blanches dans les deux thèmes, signatures dessinées, importées ou enregistrées. Sous 768 px, un groupe s'ouvre en feuille du bas et les pages passent en tiroir."
+    >
+      {source !== null && (
+        <>
+          <Example title="Session connectée, éléments enregistrés et AbyssCloud">
+            <Frame>
+              <PdfEditor
+                source={source}
+                mode="session-cloud-bridge"
+                exportOptions={['DOWNLOAD', 'CLOUD_NEW_FILE']}
+                onExport={onExport}
+                operationsAdapter={operationsAdapter}
+                assetPalette={PALETTE}
+                onSaveSignature={async ({ name }) =>
+                  log(`signature enregistrée : ${name}`)
+                }
+                manageAssetsUrl="https://abyss.example/account/assets"
+              />
+            </Frame>
+          </Example>
+          <Example title="Page publique, sans compte">
+            <Frame>
+              <PdfEditor
+                source={source}
+                mode="anonymous-client"
+                exportOptions={['DOWNLOAD']}
+                onExport={onExport}
+              />
+            </Frame>
+          </Example>
+          <Example title="Lecture seule">
+            <Frame>
+              <PdfEditor
+                source={source}
+                mode="anonymous-shared"
+                exportOptions={['DOWNLOAD']}
+                onExport={onExport}
+                readOnly
+              />
+            </Frame>
+          </Example>
+        </>
+      )}
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/index.ts

@@ -36,6 +36,7 @@ import { ImportButtonPage } from './ImportButton';
 import { ImportFromCloudModalPage } from './ImportFromCloudModal';
 import { InfectedDownloadModalPage } from './InfectedDownloadModal';
 import { KeyValueListPage } from './KeyValueList';
+import { MarkdownEditorPage } from './MarkdownEditor';
 import { MenuPage } from './Menu';
 import { MethodBadgePage } from './MethodBadge';
 import { MobileShellPage } from './MobileShell';
@@ -43,6 +44,7 @@ import { ModalPage } from './Modal';
 import { NotificationsMenuPage } from './NotificationsMenu';
 import { NumberFieldPage } from './NumberField';
 import { PageHeaderPage } from './PageHeader';
+import { PdfEditorPage } from './PdfEditor';
 import { PageStatePage } from './PageState';
 import { PreviewDrawerPage } from './PreviewDrawer';
 import { ProductTourPage } from './ProductTour';
@@ -108,6 +110,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   ImportFromCloudModal: ImportFromCloudModalPage,
   InfectedDownloadModal: InfectedDownloadModalPage,
   KeyValueList: KeyValueListPage,
+  MarkdownEditor: MarkdownEditorPage,
   Menu: MenuPage,
   MethodBadge: MethodBadgePage,
   MobileShell: MobileShellPage,
@@ -115,6 +118,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   NotificationsMenu: NotificationsMenuPage,
   NumberField: NumberFieldPage,
   PageHeader: PageHeaderPage,
+  PdfEditor: PdfEditorPage,
   PageState: PageStatePage,
   PreviewDrawer: PreviewDrawerPage,
   ProductTour: ProductTourPage,