feat: redesign export modal with file name input and v2 styling

public/locales/en/setting-modal.json

@@ -1,24 +1,18 @@
 {
-  "documentFormat": {
-    "name": "HTML Math Display",
-    "block": "block",
-    "inline": "inline"
-  },
-  "latexDelimiter": {
-    "name": "LaTeX delimiter",
-    "bracket": "bracket",
-    "dollar": "dollar"
-  },
   "documentColor": {
-    "name": "Color Scheme",
+    "name": "File Display",
     "light": "Light Mode",
     "dark": "Dark Mode"
   },
   "cancel": "Cancel",
-  "submit": "Export File",
-  "title": "Setting",
-  "exportType": "Export Type",
+  "submit": "Export",
+  "title": "Export File",
+  "exportType": "File Format",
   "a8m": "a8m",
   "zip": "zip",
+  "documentTitle": "Document Title",
+  "documentTitlePlaceholder": "Enter a name that summarizes the content of this document",
+  "fileName": "File Name",
+  "fileNamePlaceholder": "Enter a file name",
   "untitledDocument": "Untitled document"
 }

public/locales/zh-TW/setting-modal.json

@@ -1,24 +1,18 @@
 {
-  "documentFormat": {
-    "name": "版面格式",
-    "block": "塊級",
-    "inline": "行間"
-  },
-  "latexDelimiter": {
-    "name": "LaTeX 分隔符",
-    "bracket": "括號",
-    "dollar": "錢號"
-  },
   "documentColor": {
-    "name": "文件顏色",
+    "name": "檔案顯示",
     "light": "白底黑字",
     "dark": "黑底白字"
   },
   "submit": "匯出",
   "title": "匯出檔案",
   "cancel": "取消",
-  "exportType": "輸出格式",
+  "exportType": "檔案格式",
   "a8m": "a8m",
   "zip": "zip",
+  "documentTitle": "文件標題",
+  "documentTitlePlaceholder": "請輸入可以總結此文件內容的名稱",
+  "fileName": "檔案名稱",
+  "fileNamePlaceholder": "請輸入檔案名稱",
   "untitledDocument": "未命名文件"
 }

src/components/home/setting-modal/helpers.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export const useForm = ({ config, isOpen }) => {
   const [localConfig, setLocalConfig] = useState(config);
@@ -15,53 +15,3 @@ export const useForm = ({ config, isOpen }) => {
 
   return { localConfig, updateLocalConfig };
 };
-
-// TODO: add change layout color
-export const useOptionGroup = (t) => {
-  return useMemo(() => {
-    return [
-      {
-        configName: 'documentFormat',
-        configLabel: t('documentFormat.name'),
-        options: [
-          {
-            value: 'block',
-            label: t('documentFormat.block'),
-          },
-          {
-            value: 'inline',
-            label: t('documentFormat.inline'),
-          },
-        ],
-      },
-      {
-        configName: 'latexDelimiter',
-        configLabel: t('latexDelimiter.name'),
-        options: [
-          {
-            value: 'bracket',
-            label: t('latexDelimiter.bracket'),
-          },
-          {
-            value: 'dollar',
-            label: t('latexDelimiter.dollar'),
-          },
-        ],
-      },
-      {
-        configName: 'documentColor',
-        configLabel: t('documentColor.name'),
-        options: [
-          {
-            value: 'light',
-            label: t('documentColor.light'),
-          },
-          {
-            value: 'dark',
-            label: t('documentColor.dark'),
-          },
-        ],
-      },
-    ];
-  }, [t]);
-};

src/components/home/setting-modal/index.js

@@ -1,25 +1,33 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { useTranslation } from '@/lib/i18n';
 import BasicModal from '@/components/core/modal/basic-modal';
+import TextInput from '@/components/core/text-input';
+import RadioGroup from '@/components/core/radio-group';
 
-import { useOptionGroup, useForm } from './helpers';
+import { useForm } from './helpers';
 
 const SettingModal = ({ isOpen, onClose, onSubmit, displayConfig, exportType, setExportType }) => {
   const t = useTranslation('setting-modal');
 
-  const optionGroup = useOptionGroup(t);
-
   const { localConfig, updateLocalConfig } = useForm({
     isOpen,
     config: displayConfig,
   });
 
+  const [fileName, setFileName] = useState('');
+
+  useEffect(() => {
+    if (isOpen) {
+      setFileName('');
+    }
+  }, [isOpen]);
+
   const onConfirm = useCallback(() => {
-    onSubmit(localConfig, exportType);
+    onSubmit(localConfig, exportType, fileName);
     onClose();
-  }, [onSubmit, onClose, localConfig, exportType]);
+  }, [onSubmit, onClose, localConfig, exportType, fileName]);
 
   return (
     <BasicModal
@@ -32,53 +40,42 @@ const SettingModal = ({ isOpen, onClose, onSubmit, displayConfig, exportType, se
       cancelLabel={t('cancel')}
       confirmLabel={t('submit')}
     >
-      <form>
-        {optionGroup.map(({ configName, configLabel, options }) => {
-          return (
-            <div key={configName} className="grid grid-cols-12 items-center gap-4 p-3">
-              <label className="col-span-4 text-lg font-semibold text-gray-900">
-                {configLabel}：
-              </label>
-              <fieldset className="col-span-8">
-                <legend className="sr-only">{configLabel}</legend>
-                <select
-                  className="block w-full text-md bg-cyanLight border-gray-300 rounded-md focus:outline-none focus:ring-indigo-600 sm:text-sm p-3"
-                  value={localConfig[configName]}
-                  onChange={(e) => {
-                    updateLocalConfig(configName, e.target.value);
-                  }}
-                  aria-label={configLabel}
-                >
-                  {options.map(({ value, label }) => (
-                    <option key={value} value={value}>
-                      {label}
-                    </option>
-                  ))}
-                </select>
-              </fieldset>
-            </div>
-          );
-        })}
-        <div className="grid grid-cols-12 items-center gap-4 p-3">
-          <label className="col-span-4 text-lg font-semibold text-gray-900">
-            {t('exportType')}：
-          </label>
-          <fieldset className="col-span-8">
-            <legend className="sr-only">{t('exportType')}</legend>
-            <select
-              className="block w-full text-md bg-cyanLight border-gray-300 rounded-md focus:outline-none focus:ring-indigo-600 sm:text-sm p-3"
-              value={exportType}
-              onChange={(e) => {
-                setExportType(e.target.value);
-              }}
-              aria-label={t('exportType')}
-            >
-              <option value="zip">{t('zip')}</option>
-              <option value="a8m">{t('a8m')}</option>
-            </select>
-          </fieldset>
-        </div>
-      </form>
+      <div className="flex flex-col gap-6">
+        <TextInput
+          id="setting-document-title"
+          label={t('documentTitle')}
+          value={localConfig.title || ''}
+          onChange={(val) => updateLocalConfig('title', val)}
+          placeholder={t('documentTitlePlaceholder')}
+        />
+        <TextInput
+          id="setting-file-name"
+          label={t('fileName')}
+          value={fileName}
+          onChange={setFileName}
+          placeholder={t('fileNamePlaceholder')}
+        />
+        <RadioGroup
+          name="setting-export-type"
+          legend={t('exportType')}
+          options={[
+            { value: 'zip', label: t('zip') },
+            { value: 'a8m', label: t('a8m') },
+          ]}
+          value={exportType}
+          onChange={setExportType}
+        />
+        <RadioGroup
+          name="setting-document-color"
+          legend={t('documentColor.name')}
+          options={[
+            { value: 'light', label: t('documentColor.light') },
+            { value: 'dark', label: t('documentColor.dark') },
+          ]}
+          value={localConfig.documentColor}
+          onChange={(val) => updateLocalConfig('documentColor', val)}
+        />
+      </div>
     </BasicModal>
   );
 };
@@ -88,11 +85,14 @@ SettingModal.propTypes = {
   onClose: PropTypes.func,
   onSubmit: PropTypes.func,
   displayConfig: PropTypes.shape({
+    title: PropTypes.string,
     documentFormat: PropTypes.string,
     latexDelimiter: PropTypes.string,
     exportType: PropTypes.string,
     documentColor: PropTypes.string,
   }),
+  exportType: PropTypes.string,
+  setExportType: PropTypes.func,
 };
 
 export default SettingModal;

src/lib/file.js

@@ -128,7 +128,12 @@ const extractEntryData = ({ config, contents }) => {
 
 const genConfigJs = (raw) => `window.contentConfig = ${raw}`;
 
-export const saveContentAsWebsite = (sourceText, configInput = {}, imagesToExport = {}) => {
+export const saveContentAsWebsite = (
+  sourceText,
+  configInput = {},
+  imagesToExport = {},
+  fileName = ''
+) => {
   const config = {
     ...configInput,
     sourceText,
@@ -153,14 +158,22 @@ export const saveContentAsWebsite = (sourceText, configInput = {}, imagesToExpor
           imagesFolder.file(fileName, imageBlob);
         }
 
+        const saveName =
+          fileName.trim() || config.title || i18n.t('untitledDocument', { ns: 'setting-modal' });
+
         zip.generateAsync({ type: 'blob' }).then((newZipData) => {
-          saveAs(newZipData, `${config.title}.zip`);
+          saveAs(newZipData, `${saveName}.zip`);
         });
       });
     });
 };
 
-export const saveContentAsOriginalFile = async (sourceText, config, imagesToExport) => {
+export const saveContentAsOriginalFile = async (
+  sourceText,
+  config,
+  imagesToExport,
+  fileName = ''
+) => {
   const { entry } = config;
   const images = Object.entries(imagesToExport).reduce((acc, [fileId, { fileName }]) => {
     const key = fileId;
@@ -191,12 +204,11 @@ export const saveContentAsOriginalFile = async (sourceText, config, imagesToExpo
 
   zip.file(CONFIG_JSON_FILE_NAME, configBlob);
   zip.file(entry, markdownBlob);
+
+  const saveName =
+    fileName.trim() || config.title || i18n.t('untitledDocument', { ns: 'setting-modal' });
+
   zip.generateAsync({ type: 'blob' }).then((newZipData) => {
-    saveAs(
-      newZipData,
-      `${
-        config.title || i18n.t('untitledDocument', { ns: 'setting-modal' })
-      }.${ORIGINAL_FILE_EXTENSION}`
-    );
+    saveAs(newZipData, `${saveName}.${ORIGINAL_FILE_EXTENSION}`);
   });
 };

src/pages/home/home.js

@@ -276,17 +276,17 @@ export default function Home() {
   );
 
   const exportFileAction = useCallback(
-    (updatedConfig, exportType) => {
+    (updatedConfig, exportType, fileName) => {
       setDisplayConfig(updatedConfig);
       // FIXME: get back the cleaning feature
       const cleanedImages = imagesToExportRef.current;
 
       switch (exportType) {
         case ExportType.ZIP:
-          saveContentAsWebsite(data, asConfigData(updatedConfig), cleanedImages);
+          saveContentAsWebsite(data, asConfigData(updatedConfig), cleanedImages, fileName);
           break;
         case ExportType.A8M:
-          saveContentAsOriginalFile(data, asConfigData(updatedConfig), cleanedImages);
+          saveContentAsOriginalFile(data, asConfigData(updatedConfig), cleanedImages, fileName);
           break;
         default:
           console.error('Unsupported export type');