draft: Integrate grist databases into docs (Panographix - HackDays 2025)

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to
 - ✨(backend) allow setting session cookie age via env var #977
 - ✨(backend) allow theme customnization using a configuration file #948
 - ✨(frontend) Add a custom callout block to the editor #892
+- ✨(frontend) Add a custom database block to the editor #892
 - 🚩(frontend) version MIT only #911
 - ✨(backend) integrate maleware_detection from django-lasuite #936
 - 🏗️(frontend) Footer configurable #959

src/frontend/apps/impress/.env

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_API_ORIGIN=
 NEXT_PUBLIC_SW_DEACTIVATED=
 NEXT_PUBLIC_PUBLISH_AS_MIT=true
+NEXT_PUBLIC_GRIST_API_KEY=

src/frontend/apps/impress/.env.development

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
 NEXT_PUBLIC_PUBLISH_AS_MIT=false
 NEXT_PUBLIC_SW_DEACTIVATED=true
+NEXT_PUBLIC_GRIST_API_KEY=

src/frontend/apps/impress/package.json

@@ -32,7 +32,9 @@
     "@react-pdf/renderer": "4.3.0",
     "@sentry/nextjs": "9.22.0",
     "@tanstack/react-query": "5.77.1",
+    "ag-grid-react": "^33.3.1",
     "canvg": "4.0.3",
+    "chart.js": "^4.4.9",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
     "crisp-sdk-web": "1.0.25",
@@ -44,15 +46,22 @@
     "lodash": "4.17.21",
     "luxon": "3.6.1",
     "next": "15.3.2",
+    "plotly": "^1.0.6",
+    "plotly.js": "^3.0.1",
     "posthog-js": "1.246.0",
     "react": "*",
     "react-aria-components": "1.9.0",
+    "react-chart-editor": "^0.46.1",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "*",
     "react-i18next": "15.5.2",
     "react-intersection-observer": "9.16.0",
     "react-select": "5.10.1",
     "styled-components": "6.1.18",
     "use-debounce": "10.0.4",
+    "vega": "^6.1.2",
+    "vega-embed": "^7.0.2",
+    "vega-lite": "^6.1.0",
     "y-protocols": "1.0.6",
     "yjs": "*",
     "zustand": "5.0.5"

src/frontend/apps/impress/src/api/config.ts

@@ -20,3 +20,5 @@ export const backendUrl = () =>
  */
 export const baseApiUrl = (apiVersion: string = '1.0') =>
   `${backendUrl()}/api/v${apiVersion}/`;
+
+export const gristApiUrl = () => 'http://localhost:8484/api/';

src/frontend/apps/impress/src/api/gristApi.ts

@@ -0,0 +1,16 @@
+import { gristApiUrl } from './config';
+
+export const gristFetchApi = async (input: string, init?: RequestInit) => {
+  const apiUrl = `${gristApiUrl()}${input}`;
+  const bearerToken = `Bearer ${process.env.NEXT_PUBLIC_GRIST_API_KEY}`;
+
+  const headers = {
+    'Content-Type': 'application/json',
+    Authorization: bearerToken,
+  };
+
+  return await fetch(apiUrl, {
+    ...init,
+    headers,
+  });
+};

src/frontend/apps/impress/src/api/index.ts

@@ -1,6 +1,7 @@
 export * from './APIError';
 export * from './config';
 export * from './fetchApi';
+export * from './gristApi';
 export * from './helpers';
 export * from './types';
 export * from './utils';

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -1,4 +1,5 @@
 import {
+  CSSProperties,
   PropsWithChildren,
   ReactNode,
   useEffect,
@@ -38,6 +39,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
 export interface DropButtonProps {
   button: ReactNode;
   buttonCss?: BoxProps['$css'];
+  buttonStyle?: CSSProperties;
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   label?: string;
@@ -46,6 +48,7 @@ export interface DropButtonProps {
 export const DropButton = ({
   button,
   buttonCss,
+  buttonStyle,
   isOpen = false,
   onOpenChange,
   children,
@@ -77,6 +80,7 @@ export const DropButton = ({
           ${buttonCss};
         `}
         className="--docs--drop-button"
+        style={buttonStyle}
       >
         {button}
       </StyledButton>

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -10,6 +10,7 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
@@ -27,14 +28,25 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, DividerBlock } from './custom-blocks';
+import {
+  CalloutBlock,
+  DatabaseBlock,
+  DividerBlock,
+  GristChartBlock,
+  ReactEmbedBlock,
+} from './custom-blocks';
+
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
     blockSpecs: {
       ...defaultBlockSpecs,
       callout: CalloutBlock,
+      database: DatabaseBlock,
       divider: DividerBlock,
+      embed: ReactEmbedBlock,
+      grist_chart: GristChartBlock,
     },
   }),
 );

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx

@@ -13,13 +13,17 @@ import { DocsBlockSchema } from '../types';
 
 import {
   getCalloutReactSlashMenuItems,
+  getDatabaseReactSlashMenuItems,
   getDividerReactSlashMenuItems,
+  getEmbedReactSlashMenuItems,
+  getGristChartReactSlashMenuItems,
 } from './custom-blocks';
 
 export const BlockNoteSuggestionMenu = () => {
   const editor = useBlockNoteEditor<DocsBlockSchema>();
   const { t } = useTranslation();
   const basicBlocksName = useDictionary().slash_menu.page_break.group;
+  const advancedBlocksName = useDictionary().slash_menu.table.group;
 
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) =>
@@ -29,12 +33,15 @@ export const BlockNoteSuggestionMenu = () => {
             getDefaultReactSlashMenuItems(editor),
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
+            getDatabaseReactSlashMenuItems(editor, t, advancedBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
+            getEmbedReactSlashMenuItems(editor, t, advancedBlocksName),
+            getGristChartReactSlashMenuItems(editor, t, basicBlocksName),
           ),
           query,
         ),
       );
-  }, [basicBlocksName, editor, t]);
+  }, [basicBlocksName, advancedBlocksName, editor, t]);
 
   return (
     <SuggestionMenuController

src/frontend/apps/impress/src/features/docs/doc-editor/components/DatabaseSelector.tsx

@@ -0,0 +1,134 @@
+import { Button } from '@openfun/cunningham-react';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Box, Icon, Text } from '@/components';
+import { DatabaseSourceSelector } from '@/docs/doc-editor/components/DatabaseSourceSelector';
+import { useGristCreateDocAndTable } from '@/features/grist/useGristCreateTable';
+
+import { useDocStore } from '../../doc-management';
+
+type DatabaseSelectorProps = {
+  onDatabaseSelected: (args: { documentId: string; tableId: string }) => void;
+  allowCreateSource?: boolean;
+};
+
+export const DatabaseSelector = ({
+  onDatabaseSelected,
+  allowCreateSource = false,
+}: DatabaseSelectorProps) => {
+  const { createTable } = useGristCreateDocAndTable();
+  const { currentDoc } = useDocStore();
+
+  const handleCreateNewDatabase = () => {
+    if (!currentDoc) {
+      console.error('No current document found to create a new database.');
+      return;
+    }
+    createTable(currentDoc.title ?? currentDoc.id)
+      .then(({ documentId, tableId }) => {
+        onDatabaseSelected({ documentId, tableId });
+      })
+      .catch((error) => {
+        console.error('Error creating new database:', error);
+      });
+  };
+
+  return (
+    <Wrapper>
+      <Box
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: 20,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'rgb(133, 184, 255)',
+        }}
+      >
+        <Icon iconName="storage" color="rgb(62, 152, 255)" />
+      </Box>
+      <Title>Source de données</Title>
+      {allowCreateSource && (
+        <Description>Choisissez votre méthode de création</Description>
+      )}
+      <OptionsWrapper>
+        {allowCreateSource && (
+          <>
+            <Option>
+              <Box
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Box>
+                  <OptionTitle>
+                    Créer une nouvelle base de données vide
+                  </OptionTitle>
+                  <Description>
+                    Partir d&apos;une base de données vierge
+                  </Description>
+                </Box>
+                <Button
+                  onClick={handleCreateNewDatabase}
+                  icon={<Icon iconName="add" $color="white" />}
+                ></Button>
+              </Box>
+            </Option>
+            <Text style={{ fontWeight: 600, fontSize: 14 }}>ou</Text>
+          </>
+        )}
+        <Option>
+          <Box style={{ marginBottom: 10 }}>
+            <OptionTitle>
+              Sélectionner une base de données existante
+            </OptionTitle>
+            <Description>
+              Connecter une base de données Grist déjà créée
+            </Description>
+          </Box>
+          <DatabaseSourceSelector onSourceSelected={onDatabaseSelected} />
+        </Option>
+      </OptionsWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(Box)`
+  border: 2px solid rgb(160, 207, 255);
+  background-color: rgb(230, 243, 255);
+  border-radius: 4px;
+  width: 100%;
+  padding: 16px;
+  align-items: center;
+  gap: 10px;
+`;
+
+const Title = styled(Text)`
+  font-weight: 800;
+  font-size: 18px;
+`;
+
+const Description = styled(Text)`
+  color: rgb(110, 110, 110);
+  font-size: 14px;
+`;
+
+const OptionTitle = styled(Text)`
+  font-weight: 600;
+  font-size: 14px;
+`;
+
+const Option = styled(Box)`
+  width: 100%;
+  border: 1px solid rgb(180, 180, 180);
+  border-radius: 4px;
+  padding: 8px 16px;
+`;
+
+const OptionsWrapper = styled(Box)`
+  width: 100%;
+  gap: 5px;
+  align-items: center;
+`;

src/frontend/apps/impress/src/features/docs/doc-editor/components/DatabaseSourceSelector.tsx

@@ -0,0 +1,78 @@
+import { Spinner } from '@gouvfr-lasuite/ui-kit';
+import { Select } from '@openfun/cunningham-react';
+import { useState } from 'react';
+
+import { Box, Text } from '@/components';
+import { useListGristTables } from '@/features/grist';
+import { Doc, useListGristDocs } from '@/features/grist/useListGristDocs';
+
+type DatabaseSourceSelectorProps = {
+  onSourceSelected: (args: { documentId: string; tableId: string }) => void;
+};
+
+const TableSelector = ({
+  documentId,
+  onSourceSelected,
+}: { documentId: number } & DatabaseSourceSelectorProps) => {
+  const { tables, isLoading } = useListGristTables(documentId);
+  if (tables) {
+    return (
+      <Select
+        label="Sélectionner une table Grist existante"
+        options={tables.map(({ id }) => ({
+          label: id,
+          value: id,
+          render: () => <Text style={{ padding: 10 }}>{id}</Text>,
+        }))}
+        onChange={(e) => {
+          // TODO: handle better :)
+          // @ts-expect-error wip
+          onSourceSelected({ documentId, tableId: e.target.value });
+        }}
+      />
+    );
+  }
+  if (isLoading) {
+    return (
+      <Box style={{ flexDirection: 'row', alignItems: 'center', gap: '10px' }}>
+        <Spinner /> <Text>Chargement des tables...</Text>
+      </Box>
+    );
+  }
+  return (
+    <Box>
+      <Text>No tables available</Text>
+    </Box>
+  );
+};
+
+export const DatabaseSourceSelector = ({
+  onSourceSelected,
+}: DatabaseSourceSelectorProps) => {
+  const [selectedDoc, setSelectedDoc] = useState<Doc>();
+  const { docs } = useListGristDocs();
+
+  return (
+    <Box style={{ flexDirection: 'row', alignItems: 'center', gap: '10px' }}>
+      <Select
+        label={selectedDoc?.name ?? 'Sélectionner un document Grist'}
+        options={docs.map((doc) => ({
+          label: doc.name,
+          value: doc.id.toString(),
+          render: () => <Text style={{ padding: 10 }}>{doc.name}</Text>,
+        }))}
+        onChange={(e) =>
+          setSelectedDoc(
+            docs.find((doc) => doc.id.toString() === e.target.value),
+          )
+        }
+      />
+      {selectedDoc && (
+        <TableSelector
+          documentId={selectedDoc.id}
+          onSourceSelected={onSourceSelected}
+        />
+      )}
+    </Box>
+  );
+};