Add docx generate button to analysis story popup

app/views/PillarAnalysis/DocumentGeneratorModal/index.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback, useState } from 'react';
+import {
+    Modal,
+    Button,
+    CheckListInput,
+} from '@the-deep/deep-ui';
+import { unified } from 'unified';
+import markdown from 'remark-parse';
+import docx from 'remark-docx';
+import { saveAs } from 'file-saver';
+
+import {
+    PartialFormType,
+} from '../schema';
+
+const astProcessor = unified().use(markdown).use(docx, { output: 'blob' });
+
+const keySelector = (item: NonNullable<PartialFormType['statements']>[number]) => item.clientId ?? '';
+const labelSelector = (
+    item: NonNullable<PartialFormType['statements']>[number],
+) => ((item.statement?.length ?? 0) > 100 ? (`${item.statement?.slice(0, 100)}...`) : (item.statement ?? ''));
+
+interface Props {
+    value: PartialFormType | undefined;
+    title: string | undefined;
+    onClose: () => void;
+}
+
+function DocumentGeneratorModal(props: Props) {
+    const {
+        value,
+        title,
+        onClose,
+    } = props;
+
+    const [selectedStories, setSelectedStories] = useState<string[]>();
+
+    const handleExport = useCallback(async () => {
+        const statements = value
+            ?.statements
+            ?.filter((item) => selectedStories?.includes(item.clientId ?? ''))
+            .map((item) => item.reportText)
+            .join('\n');
+        const doc = await astProcessor.process(statements);
+        const blob = await doc.result as Blob;
+
+        saveAs(blob, `${title ?? 'analysis'}.docx`);
+        onClose();
+    }, [
+        title,
+        onClose,
+        value,
+        selectedStories,
+    ]);
+
+    return (
+        <Modal
+            heading="Generate Docx"
+            onCloseButtonClick={onClose}
+            footerActions={(
+                <Button
+                    name={undefined}
+                    disabled={(selectedStories?.length ?? 0) === 0}
+                    onClick={handleExport}
+                >
+                    Generate
+                </Button>
+            )}
+        >
+            <CheckListInput
+                label="Select analytical statement columns"
+                name={undefined}
+                value={selectedStories}
+                options={value?.statements}
+                keySelector={keySelector}
+                labelSelector={labelSelector}
+                direction="vertical"
+                onChange={setSelectedStories}
+            />
+        </Modal>
+    );
+}
+
+export default DocumentGeneratorModal;

app/views/PillarAnalysis/index.tsx

@@ -114,6 +114,7 @@ import {
     defaultFormValues,
     PartialAnalyticalStatementType,
 } from './schema';
+import DocumentGeneratorModal from './DocumentGeneratorModal';
 
 import EntryContext from './context';
 import AutoClustering from './AutoClustering';
@@ -657,6 +658,12 @@ function PillarAnalysis() {
         toggleStatementAndInfoGaps,
     ] = useBooleanState(false);
 
+    const [
+        docxModalShown,
+        showDocxModal,
+        hideDocxModal,
+    ] = useBooleanState(false);
+
     const [
         filtersShown,
         showFilter,
@@ -1208,6 +1215,13 @@ function PillarAnalysis() {
                 homeLinkShown
                 defaultActions={(
                     <>
+                        <Button
+                            name={undefined}
+                            onClick={showDocxModal}
+                            variant="tertiary"
+                        >
+                            Generate Docx
+                        </Button>
                         <Button
                             name={undefined}
                             onClick={toggleStatementAndInfoGaps}
@@ -1289,6 +1303,13 @@ function PillarAnalysis() {
                             </div>
                         </div>
                     )}
+                    {docxModalShown && (
+                        <DocumentGeneratorModal
+                            title={analysisPillarDetails?.title}
+                            value={value}
+                            onClose={hideDocxModal}
+                        />
+                    )}
                     <div className={styles.filterContainer}>
                         <Button
                             name={undefined}

package.json

@@ -53,6 +53,7 @@
         "@togglecorp/toggle-request": "^0.0.2",
         "@turf/boolean-valid": "^6.5.0",
         "@turf/meta": "^6.5.0",
+        "@types/file-saver": "^2.0.7",
         "@types/geojson": "^7946.0.14",
         "@uiw/react-md-editor": "^3.20.5",
         "apollo-link": "^1.2.14",
@@ -63,6 +64,7 @@
         "d3-brush": "^3.0.0",
         "d3-scale-chromatic": "^3.0.0",
         "d3-selection": "^3.0.0",
+        "file-saver": "^2.0.5",
         "graphql": "^16.2.0",
         "history": "^4.9.0",
         "html2canvas": "^1.4.1",
@@ -82,8 +84,11 @@
         "react-slider": "^2.0.4",
         "recharts": "^2.5.0",
         "rehype-sanitize": "^5.0.1",
+        "remark-docx": "^0.1.6",
+        "remark-parse": "^11.0.0",
         "resize-observer-polyfill": "^1.5.1",
         "string-similarity": "^4.0.4",
+        "unified": "^11.0.5",
         "victory": "^36.6.8",
         "xlsx": "^0.18.5"
     },