first commit

src/config/ConfigApp.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { ErrorBoundary } from 'react-error-boundary';
+import ErrorFallback from '../common/ErrorFallback';
+import Loading from '../common/Loading';
+import Settings from './Settings';
+
+const ConfigApp: React.FC = () => {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <React.Suspense fallback={<Loading />}>
+        <Settings />
+      </React.Suspense>
+    </ErrorBoundary>
+  );
+};
+export default ConfigApp;

src/config/Settings.module.css

@@ -0,0 +1,3 @@
+.buttons > *:not(:last-child) {
+  margin-right: 0.5em;
+}

src/config/Settings.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+import { kintonePrettyFields } from 'kintone-pretty-fields';
+import moize from 'moize';
+import invariant from 'tiny-invariant';
+import { PLUGIN_ID } from '../common/global';
+import KintonePluginAlert from '../common/ui/KintonePluginAlert';
+import KintonePluginButton from '../common/ui/KintonePluginButton';
+import KintonePluginDesc from '../common/ui/KintonePluginDesc';
+import KintonePluginLabel from '../common/ui/KintonePluginLabel';
+import KintonePluginRequire from '../common/ui/KintonePluginRequire';
+import KintonePluginRow from '../common/ui/KintonePluginRow';
+import KintonePluginSelect, { KintonePluginSelectOptionData } from '../common/ui/KintonePluginSelect';
+import KintonePluginTitle from '../common/ui/KintonePluginTitle';
+
+import styles from './Settings.module.css';
+
+const cachedFields = moize.promise(async (appId: number) => {
+  const client = new KintoneRestAPIClient();
+  const fields = await kintonePrettyFields.getFields({ client, app: appId, lang: 'en', preview: false });
+  return fields;
+});
+
+const Settings: React.FC = () => {
+  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+  const appId = kintone.app.getId();
+  invariant(appId, 'The app ID is not available. Please ensure you are on a Kintone app page.');
+  const { fields } = React.use(cachedFields(appId));
+  const fileFields = fields.filter(kintonePrettyFields.isFile);
+  const options: KintonePluginSelectOptionData[] = [
+    { key: '-', value: '', label: 'Select a File field', disabled: true }, // Default option
+    ...fileFields.map((field) => ({
+      key: field.code,
+      value: field.code,
+      label: field.label,
+    })),
+  ];
+
+  const [template, setTemplate] = React.useState<string>(config.template ?? '');
+
+  const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    kintone.plugin.app.setConfig({ template }, () => {
+      alert('The plug-in settings have been saved. Please update the app!');
+      window.location.href = `../../flow?app=${appId}`;
+    });
+  };
+
+  const handleOnChangeTemplate = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setTemplate(e.target.value);
+  };
+
+  const handleOnClickCancel = () => {
+    window.location.href = `../../${appId}/plugin/`;
+  };
+
+  return (
+    <section className="settings">
+      <KintonePluginLabel>Settings for the Kintone Word output plugin</KintonePluginLabel>
+      <form onSubmit={handleOnSubmit}>
+        <KintonePluginRow>
+          <KintonePluginTitle>
+            Template<KintonePluginRequire>*</KintonePluginRequire>
+          </KintonePluginTitle>
+          <KintonePluginDesc>Select a file field that contains the WORD template file.</KintonePluginDesc>
+          {fileFields.length === 0 ? (
+            <KintonePluginAlert>
+              No file fields found in the app. Please add a file field to use this plugin.
+            </KintonePluginAlert>
+          ) : (
+            <KintonePluginSelect defaultValue={template} onChange={handleOnChangeTemplate} options={options} />
+          )}
+        </KintonePluginRow>
+        <KintonePluginRow className={styles.buttons}>
+          <KintonePluginButton variant="dialog-cancel" type="button" onClick={handleOnClickCancel}>
+            Cancel
+          </KintonePluginButton>
+          <KintonePluginButton variant="dialog-ok" type="submit">
+            Save
+          </KintonePluginButton>
+        </KintonePluginRow>
+      </form>
+    </section>
+  );
+};
+export default Settings;

src/config/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import ReactDOM from 'react-dom/client';
+import invariant from 'tiny-invariant';
+import ConfigApp from './ConfigApp';
+
+import '../common/ui/51-modern-default.css';
+
+const root = document.getElementById('plugin-config-root');
+invariant(root, 'The plugin configuration root element "plugin-config-root" is not found.');
+
+ReactDOM.createRoot(root).render(
+  <React.StrictMode>
+    <ConfigApp />
+  </React.StrictMode>,
+);