refactor: update VSCode configurations and scripts for improved compatibility and performance

.cspell.json

@@ -13,11 +13,21 @@
     "Ligh",
     "moize",
     "officedocument",
+    "OKUMURA",
     "openxmlformats",
+    "pcss",
     "pizzip",
     "rspack",
+    "styl",
     "SUBTABLE",
-    "wordprocessingml"
+    "wordprocessingml",
+    "Yoshihiro"
   ],
-  "ignorePaths": [".env"]
+  "ignorePaths": [
+    ".env",
+    "dist",
+    "node_modules",
+    "scripts",
+    "plugin"
+  ]
 }

.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": true,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 120,
-  "trailingComma": "all"
-}

.vscode/extensions.json

@@ -1,8 +1,7 @@
 {
   "recommendations": [
-    "esbenp.prettier-vscode",
+    "biomejs.biome",
     "streetsidesoftware.code-spell-checker",
-    "dbaeumer.vscode-eslint",
     "jawandarajbir.react-vscode-extension-pack"
   ]
 }

.vscode/settings.json

@@ -1,39 +1,40 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
+    "source.fixAll.biome": "explicit",
+    "quickfix.biome": "explicit",
     "source.organizeImports": "explicit"
   },
+  "[css]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
   "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[jsonc]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  // Extensions - Biome
+  // - see: biome.json
   // Exteions - cSpell
   // - see: .cspell.json
+  // Extensions - ESLint
+  "eslint.enable": false,
   // Extensions - HTML
   "html.format.wrapLineLength": 0,
-  // Extentions - Prettier
-  // - see: .prettierrc.json
   // Extentions - Typescript
   "javascript.updateImportsOnFileMove.enabled": "always",
-  "typescript.updateImportsOnFileMove.enabled": "always"
+  "typescript.updateImportsOnFileMove.enabled": "always",
 }

biome.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["src/**", "scripts/**"]
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "lineEnding": "lf",
+    "indentWidth": 2,
+    "lineWidth": 120,
+    "attributePosition": "auto"
+  },
+  "linter": {
+    "enabled": true,
+    "domains": {
+      "react": "recommended"
+    },
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

eslint.config.mjs

@@ -1,17 +0,0 @@
-import presetsPrettier from '@cybozu/eslint-config/flat/presets/react-typescript-prettier.js';
-import globals from 'globals';
-
-/** @type {import("eslint").Linter.Config[]} */
-export default [
-  ...presetsPrettier,
-  {
-    languageOptions: {
-      globals: {
-        ...globals.node,
-      },
-    },
-    rules: {
-      'spaced-comment': ['error', 'always', { markers: ['/'] }],
-    },
-  },
-];

package.json

@@ -10,45 +10,45 @@
     "prebuild:prod": "npm run gen",
     "build": "cross-env NODE_ENV=development rspack build",
     "build:prod": "cross-env NODE_ENV=production rspack build",
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "cspell": "cspell .",
+    "lint": "biome lint .",
+    "format": "biome check --write .",
     "upload": "env-cmd --silent kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000"
   },
   "dependencies": {
-    "@kintone/rest-api-client": "^5.7.4",
-    "angular-expressions": "^1.5.0",
+    "@kintone/rest-api-client": "^5.7.5",
+    "angular-expressions": "^1.5.1",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
-    "docxtemplater": "^3.65.1",
+    "dayjs": "^1.11.18",
+    "docxtemplater": "^3.66.4",
     "file-saver": "^2.0.5",
-    "i18next": "^25.3.0",
+    "i18next": "^25.5.2",
     "moize": "^6.1.6",
     "pizzip": "^3.2.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-error-boundary": "^6.0.0",
-    "react-i18next": "^15.6.0",
+    "react-i18next": "^16.0.0",
     "tiny-invariant": "^1.3.3"
   },
   "devDependencies": {
-    "@cybozu/eslint-config": "^24.0.0",
-    "@kintone/dts-gen": "^8.1.2",
+    "@biomejs/biome": "^2.2.4",
+    "@kintone/dts-gen": "^8.1.3",
     "@kintone/plugin-uploader": "^9.1.5",
     "@kintone/webpack-plugin-kintone-plugin": "^8.0.11",
-    "@rspack/cli": "^1.4.3",
-    "@rspack/core": "^1.4.3",
-    "@shin-chan/kypes": "^0.0.7",
+    "@rspack/cli": "^1.5.8",
+    "@rspack/core": "^1.5.8",
     "@types/file-saver": "^2.0.7",
-    "@types/node": "^24.0.10",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "cross-env": "^7.0.3",
-    "env-cmd": "^10.1.0",
-    "eslint": "^9.30.1",
-    "eslint-plugin-react": "^7.37.5",
-    "globals": "^16.3.0",
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "cross-env": "^10.1.0",
+    "cspell": "^9.2.1",
+    "env-cmd": "^11.0.0",
+    "globals": "^16.4.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.6.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.2"
   }
 }

rspack.config.ts

@@ -17,12 +17,12 @@ export default defineConfig({
     filename: '[name].js',
   },
   resolve: {
-    extensions: ['...', '.ts', '.tsx', '.jsx'],
+    extensions: ['...', '.ts', '.tsx'],
   },
   module: {
     rules: [
       {
-        test: /\.(jsx?|tsx?)$/,
+        test: /\.(tsx?)$/,
         use: [
           {
             loader: 'builtin:swc-loader',
@@ -64,7 +64,6 @@ export default defineConfig({
     css: true,
   },
   performance: {
-    maxEntrypointSize: 1024000,
-    maxAssetSize: 1024000,
+    hints: false,
   },
 });

scripts/generate-private-key.js

@@ -1,7 +1,4 @@
-/* eslint-env node */
-'use strict';
-
-const fs = require('fs');
+const fs = require('node:fs');
 const RSA = require('node-rsa');
 
 const privateKeyFile = './private.ppk';

scripts/npm-start.js

@@ -1,6 +1,3 @@
-/* eslint-env node */
-'use strict';
-
 const runAll = require('npm-run-all');
 
 runAll(['develop', 'upload'], {

src/common/DynamicPortal.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import ReactDOM from 'react-dom';
 import invariant from 'tiny-invariant';
 
@@ -21,8 +20,7 @@ const DynamicPortal: React.FC<DynamicPortalProps> = (props) => {
         el.parentNode.removeChild(el);
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [el]);
   return ReactDOM.createPortal(children, el);
 };
 export default DynamicPortal;

src/common/ErrorFallback.tsx

@@ -1,5 +1,5 @@
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
 import React from 'react';
-
 import KintonePluginAlert from './ui/KintonePluginAlert';
 
 interface Props {

src/common/Loading.tsx

@@ -1,5 +1,5 @@
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
 import React from 'react';
-
 import DynamicPortal from './DynamicPortal';
 
 import styles from './Loading.module.css';

src/common/kintoneLanguageDetector.ts

@@ -1,4 +1,4 @@
-import { LanguageDetectorModule } from 'i18next';
+import type { LanguageDetectorModule } from 'i18next';
 
 const KintoneLanguageDetector: LanguageDetectorModule = {
   type: 'languageDetector',

src/common/types.ts

@@ -1,4 +1,4 @@
-import { KintoneFormFieldProperty } from '@kintone/rest-api-client';
+import type { KintoneFormFieldProperty } from '@kintone/rest-api-client';
 
 export type KintoneFormFieldProperties = {
   [fieldCode: string]: KintoneFormFieldProperty.OneOf;

src/common/ui/KintonePluginAlert.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-
 import clsx from 'clsx';
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
+import React from 'react';
 
 export type KintonePluginAlertProps = React.PropsWithChildren<{
   className?: string;

src/common/ui/KintonePluginButton.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-
 import clsx from 'clsx';
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
+import React from 'react';
 
 export type KintonePluginButtonProps = React.PropsWithChildren<{
   className?: string;

src/common/ui/KintonePluginDesc.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-
 import clsx from 'clsx';
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
+import React from 'react';
 
 export type KintonePluginDescProps = React.PropsWithChildren<{
   className?: string;

src/common/ui/KintonePluginLabel.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-
 import clsx from 'clsx';
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
+import React from 'react';
 
 export type KintonePluginLabelProps = React.PropsWithChildren<{
   className?: string;

src/common/ui/KintonePluginRequire.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-
 import clsx from 'clsx';
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
+import React from 'react';
 
 export type KintonePluginRequire = React.PropsWithChildren<{
   className?: string;

src/common/ui/KintonePluginRow.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-
 import clsx from 'clsx';
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
+import React from 'react';
 
 export type KintonePluginRowProps = React.PropsWithChildren<{
   className?: string;

src/common/ui/KintonePluginSelect.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-
 import clsx from 'clsx';
+import React from 'react';
 
 export type KintonePluginSelectOptionData = {
   value: string;

src/common/ui/KintonePluginTitle.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-
 import clsx from 'clsx';
+// biome-ignore lint/style/useImportType: React is required in scope for the old JSX transform.
+import React from 'react';
 
 export type KintonePluginTitleProps = React.PropsWithChildren<{
   className?: string;

src/config/ConfigApp.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { ErrorBoundary } from 'react-error-boundary';
 import ErrorFallback from '../common/ErrorFallback';
 import Loading from '../common/Loading';

src/config/Settings.tsx

@@ -1,18 +1,17 @@
-import React from 'react';
-
 import { KintoneRestAPIClient } from '@kintone/rest-api-client';
 import moize from 'moize';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import invariant from 'tiny-invariant';
 import { naturalCompare } from '../common/stringUtils';
-import { KintoneFormFieldProperties } from '../common/types';
+import type { KintoneFormFieldProperties } from '../common/types';
 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 KintonePluginSelect, { type KintonePluginSelectOptionData } from '../common/ui/KintonePluginSelect';
 import KintonePluginTitle from '../common/ui/KintonePluginTitle';
 
 import styles from './Settings.module.css';

src/config/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import ReactDOM from 'react-dom/client';
 import invariant from 'tiny-invariant';
 import ConfigApp from './ConfigApp';

src/desktop/DesktopApp.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { ErrorBoundary } from 'react-error-boundary';
 import ErrorFallback from '../common/ErrorFallback';
 import Loading from '../common/Loading';

src/desktop/MenuPanel.tsx

@@ -1,25 +1,15 @@
-import React from 'react';
-
-import { KintoneFormFieldProperty, KintoneRestAPIClient } from '@kintone/rest-api-client';
-import { KintoneRecord } from '@shin-chan/kypes/types/page';
-import dayjs from 'dayjs';
-import Docxtemplater from 'docxtemplater';
-import expressionParser from 'docxtemplater/expressions';
-import { saveAs } from 'file-saver';
+import { KintoneRestAPIClient } from '@kintone/rest-api-client';
+import saveAs from 'file-saver';
 import moize from 'moize';
-import PizZip from 'pizzip';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import invariant from 'tiny-invariant';
 import { DOCX_CONTENT_TYPE } from '../common/constants';
-import { KintoneFormFieldProperties } from '../common/types';
+import type { KintoneFormFieldProperties } from '../common/types';
 import KintonePluginAlert from '../common/ui/KintonePluginAlert';
 import KintonePluginButton from '../common/ui/KintonePluginButton';
+import generateWordFileData from './generateWordFileData';
 
-interface TemplateData {
-  [key: string]: TemplateData | TemplateData[] | string | string[];
-}
-
-interface MenuPanelProps {
+export interface MenuPanelProps {
   pluginId: string;
   event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent;
 }
@@ -30,166 +20,6 @@ const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<
   return properties;
 });
 
-const formatNumberValue = (value: string, digit: boolean, scale?: number): string => {
-  if (value !== '' && !isNaN(Number(value))) {
-    const numberValue = Number(value);
-    const options: Intl.NumberFormatOptions = {
-      useGrouping: digit,
-    };
-    if (scale != null && scale >= 0) {
-      options.minimumFractionDigits = scale;
-      options.maximumFractionDigits = scale;
-    }
-    return new Intl.NumberFormat('en-US', options).format(numberValue);
-  }
-  return value;
-};
-
-const formatValueWithUnit = (
-  value: string,
-  property: KintoneFormFieldProperty.Number | KintoneFormFieldProperty.Calc,
-): string => {
-  if (value !== '' && property.unit !== '') {
-    if (property.unitPosition === 'BEFORE') {
-      return `${property.unit} ${value}`;
-    } else if (property.unitPosition === 'AFTER') {
-      return `${value} ${property.unit}`;
-    }
-  }
-  return value;
-};
-
-const formatNumberRecordValue = (
-  value: string,
-  property: KintoneFormFieldProperty.Number | KintoneFormFieldProperty.Lookup,
-): string => {
-  if ('lookup' in property) {
-    return value;
-  }
-  const scale = property.displayScale !== '' ? Number(property.displayScale) : undefined;
-  const digit = property.digit ?? false;
-  const formattedValue = formatNumberValue(value, digit, scale);
-  return formatValueWithUnit(formattedValue, property);
-};
-
-const formatCalculatedRecordValue = (
-  value: string,
-  property: KintoneFormFieldProperty.Calc,
-  language: string,
-): string => {
-  const { format } = property;
-  if (value === '') {
-    return '';
-  }
-  const scale = property.displayScale !== '' ? Number(property.displayScale) : undefined;
-  let formattedValue: string;
-  if (format === 'NUMBER') {
-    formattedValue = formatNumberValue(value, false, scale);
-  } else if (format === 'NUMBER_DIGIT') {
-    formattedValue = formatNumberValue(value, true, scale);
-  } else if (format === 'DATETIME') {
-    // "2025-05-30T00:00:00Z" -> "2025-05-30 9:00" (browser local timezone)
-    const date = new Date(value);
-    invariant(!isNaN(date.getTime()), `Expected value to be a valid date string, but got ${value}`);
-    formattedValue = dayjs(date).format('YYYY-MM-DD h:mm');
-  } else if (format === 'DATE') {
-    // "2025-05-30T00:00:00Z" -> "2025-05-30" (browser local timezone)
-    const date = new Date(value);
-    invariant(!isNaN(date.getTime()), `Expected value to be a valid date string, but got ${value}`);
-    formattedValue = dayjs(date).format('YYYY-MM-DD');
-  } else if (format === 'TIME') {
-    // "00:30" -> "0:30"
-    const [hours, minutes] = value.split(':').map((v) => Number(v));
-    invariant(
-      !isNaN(hours) && !isNaN(minutes),
-      `Expected hours and minutes to be numbers, but got hours: ${hours}, minutes: ${minutes}`,
-    );
-    formattedValue = `${hours}:${String(minutes).padStart(2, '0')}`;
-  } else if (format === 'HOUR_MINUTE') {
-    // "49:30" -> en:"49 hours 30 minutes", ja: "49時間30分"
-    const [hours, minutes] = value.split(':').map((v) => Number(v));
-    invariant(
-      !isNaN(hours) && !isNaN(minutes),
-      `Expected hours and minutes to be numbers, but got hours: ${hours}, minutes: ${minutes}`,
-    );
-    formattedValue = language === 'ja' ? `${hours}時間${minutes}分` : `${hours} hours ${minutes} minutes`;
-  } else if (format === 'DAY_HOUR_MINUTE') {
-    // "49:30" -> en: "2 days 1 hour 30 minutes", ja: "2日1時間30分
-    const [hours, minutes] = value.split(':').map((v) => Number(v));
-    invariant(
-      !isNaN(hours) && !isNaN(minutes),
-      `Expected hours and minutes to be numbers, but got hours: ${hours}, minutes: ${minutes}`,
-    );
-    const days = Math.floor(Number(hours) / 24);
-    const remainingHours = Number(hours) % 24;
-    formattedValue =
-      language === 'ja'
-        ? `${days}日${remainingHours}時間${minutes}分`
-        : `${days} days ${remainingHours} hours ${minutes} minutes`;
-  } else {
-    // DATETIME, DATE, TIME
-    formattedValue = value;
-  }
-  return formatValueWithUnit(formattedValue, property);
-};
-
-const record2data = (
-  properties: KintoneFormFieldProperties,
-  record: Partial<KintoneRecord>,
-  language: string,
-): TemplateData => {
-  const data: TemplateData = {};
-  for (const key in record) {
-    if (Object.prototype.hasOwnProperty.call(record, key) && Object.prototype.hasOwnProperty.call(properties, key)) {
-      const item = record[key];
-      const property = properties[key];
-      if (item == null) continue;
-      const { type, value } = item;
-      if (value == null) {
-        data[key] = '';
-      } else if (type === 'CREATOR' || type === 'MODIFIER') {
-        data[key] = {
-          name: value.name,
-          code: value.code,
-        };
-      } else if (type === 'NUMBER') {
-        invariant(property.type === 'NUMBER', `Expected property type to be NUMBER, but got ${property.type}`);
-        data[key] = formatNumberRecordValue(value, property);
-      } else if (type === 'CALC') {
-        invariant(property.type === 'CALC', `Expected property type to be CALC, but got ${property.type}`);
-        data[key] = formatCalculatedRecordValue(value, property, language);
-      } else if (type === 'CHECK_BOX' || type === 'MULTI_SELECT' || type === 'CATEGORY') {
-        data[key] = value.map((v) => v);
-      } else if (
-        type === 'USER_SELECT' ||
-        type === 'ORGANIZATION_SELECT' ||
-        type === 'GROUP_SELECT' ||
-        type === 'STATUS_ASSIGNEE'
-      ) {
-        data[key] = value.map((v) => {
-          return { name: v.name, code: v.code };
-        });
-      } else if (type === 'SUBTABLE') {
-        invariant(property.type === 'SUBTABLE', `Expected property type to be SUBTABLE, but got ${property.type}`);
-        data[key] = value.map((subRecord) => record2data(property.fields, subRecord.value, language));
-      } else if (type === 'FILE') {
-        invariant(property.type === 'FILE', `Expected property type to be FILE, but got ${property.type}`);
-        data[key] = value.map((file) => ({
-          name: file.name,
-          size: file.size,
-          contentType: file.contentType,
-          fileKey: file.fileKey,
-        }));
-      } else {
-        // RECORD_NUMBER, __ID__, __REVISION__, CREATED_TIME, UPDATED_TIME
-        // SINGLE_LINE_TEXT, MULTI_LINE_TEXT, RICH_TEXT, RADIO_BUTTON, DROP_DOWN, DATE, TIME, DATETIME, LINK, STATUS
-        data[key] = value;
-      }
-    }
-  }
-  return data;
-};
-
 const MenuPanel: React.FC<MenuPanelProps> = (props) => {
   const { pluginId, event } = props;
   const { t } = useTranslation();
@@ -250,15 +80,7 @@ const MenuPanel: React.FC<MenuPanelProps> = (props) => {
     client.file
       .downloadFile({ fileKey })
       .then((content) => {
-        const zip = new PizZip(content);
-        const doc = new Docxtemplater(zip, {
-          paragraphLoop: true,
-          linebreaks: true,
-          parser: expressionParser,
-          nullGetter: () => '',
-        });
-        doc.render(record2data(properties, event.record, language));
-        const out = doc.getZip().generate({ type: 'blob', mimeType: DOCX_CONTENT_TYPE });
+        const out = generateWordFileData(content, properties, event.record, language);
         saveAs(out, 'output.docx');
       })
       .catch((error) => {

src/desktop/generateWordFileData.ts

@@ -0,0 +1,192 @@
+import type { KintoneFormFieldProperty } from '@kintone/rest-api-client';
+import dayjs from 'dayjs';
+import Docxtemplater from 'docxtemplater';
+import expressionParser from 'docxtemplater/expressions';
+import PizZip from 'pizzip';
+import invariant from 'tiny-invariant';
+import { DOCX_CONTENT_TYPE } from '../common/constants';
+import type { KintoneFormFieldProperties } from '../common/types';
+
+interface TemplateData {
+  [key: string]: TemplateData | TemplateData[] | string | string[];
+}
+
+const formatNumberValue = (value: string, digit: boolean, scale?: number): string => {
+  if (value !== '' && !Number.isNaN(Number(value))) {
+    const numberValue = Number(value);
+    const options: Intl.NumberFormatOptions = {
+      useGrouping: digit,
+    };
+    if (scale != null && scale >= 0) {
+      options.minimumFractionDigits = scale;
+      options.maximumFractionDigits = scale;
+    }
+    return new Intl.NumberFormat('en-US', options).format(numberValue);
+  }
+  return value;
+};
+
+const formatValueWithUnit = (
+  value: string,
+  property: KintoneFormFieldProperty.Number | KintoneFormFieldProperty.Calc,
+): string => {
+  if (value !== '' && property.unit !== '') {
+    if (property.unitPosition === 'BEFORE') {
+      return `${property.unit} ${value}`;
+    } else if (property.unitPosition === 'AFTER') {
+      return `${value} ${property.unit}`;
+    }
+  }
+  return value;
+};
+
+const formatNumberRecordValue = (
+  value: string,
+  property: KintoneFormFieldProperty.Number | KintoneFormFieldProperty.Lookup,
+): string => {
+  if ('lookup' in property) {
+    return value;
+  }
+  const scale = property.displayScale !== '' ? Number(property.displayScale) : undefined;
+  const digit = property.digit ?? false;
+  const formattedValue = formatNumberValue(value, digit, scale);
+  return formatValueWithUnit(formattedValue, property);
+};
+
+const formatCalculatedRecordValue = (
+  value: string,
+  property: KintoneFormFieldProperty.Calc,
+  language: string,
+): string => {
+  const { format } = property;
+  if (value === '') {
+    return '';
+  }
+  const scale = property.displayScale !== '' ? Number(property.displayScale) : undefined;
+  let formattedValue: string;
+  if (format === 'NUMBER') {
+    formattedValue = formatNumberValue(value, false, scale);
+  } else if (format === 'NUMBER_DIGIT') {
+    formattedValue = formatNumberValue(value, true, scale);
+  } else if (format === 'DATETIME') {
+    // "2025-05-30T00:00:00Z" -> "2025-05-30 9:00" (browser local timezone)
+    const date = new Date(value);
+    invariant(!Number.isNaN(date.getTime()), `Expected value to be a valid date string, but got ${value}`);
+    formattedValue = dayjs(date).format('YYYY-MM-DD h:mm');
+  } else if (format === 'DATE') {
+    // "2025-05-30T00:00:00Z" -> "2025-05-30" (browser local timezone)
+    const date = new Date(value);
+    invariant(!Number.isNaN(date.getTime()), `Expected value to be a valid date string, but got ${value}`);
+    formattedValue = dayjs(date).format('YYYY-MM-DD');
+  } else if (format === 'TIME') {
+    // "00:30" -> "0:30"
+    const [hours, minutes] = value.split(':').map((v) => Number(v));
+    invariant(
+      !Number.isNaN(hours) && !Number.isNaN(minutes),
+      `Expected hours and minutes to be numbers, but got hours: ${hours}, minutes: ${minutes}`,
+    );
+    formattedValue = `${hours}:${String(minutes).padStart(2, '0')}`;
+  } else if (format === 'HOUR_MINUTE') {
+    // "49:30" -> en:"49 hours 30 minutes", ja: "49時間30分"
+    const [hours, minutes] = value.split(':').map((v) => Number(v));
+    invariant(
+      !Number.isNaN(hours) && !Number.isNaN(minutes),
+      `Expected hours and minutes to be numbers, but got hours: ${hours}, minutes: ${minutes}`,
+    );
+    formattedValue = language === 'ja' ? `${hours}時間${minutes}分` : `${hours} hours ${minutes} minutes`;
+  } else if (format === 'DAY_HOUR_MINUTE') {
+    // "49:30" -> en: "2 days 1 hour 30 minutes", ja: "2日1時間30分
+    const [hours, minutes] = value.split(':').map((v) => Number(v));
+    invariant(
+      !Number.isNaN(hours) && !Number.isNaN(minutes),
+      `Expected hours and minutes to be numbers, but got hours: ${hours}, minutes: ${minutes}`,
+    );
+    const days = Math.floor(Number(hours) / 24);
+    const remainingHours = Number(hours) % 24;
+    formattedValue =
+      language === 'ja'
+        ? `${days}日${remainingHours}時間${minutes}分`
+        : `${days} days ${remainingHours} hours ${minutes} minutes`;
+  } else {
+    // DATETIME, DATE, TIME
+    formattedValue = value;
+  }
+  return formatValueWithUnit(formattedValue, property);
+};
+
+const record2templateData = (
+  properties: KintoneFormFieldProperties,
+  record: Partial<kintone.types.GenericFields>,
+  language: string,
+): TemplateData => {
+  const data: TemplateData = {};
+  for (const key in record) {
+    // biome-ignore lint/suspicious/noPrototypeBuiltins: avoid prototype pollution
+    if (Object.prototype.hasOwnProperty.call(record, key) && Object.prototype.hasOwnProperty.call(properties, key)) {
+      const item = record[key];
+      const property = properties[key];
+      if (item == null) continue;
+      const { type, value } = item;
+      if (value == null) {
+        data[key] = '';
+      } else if (type === 'CREATOR' || type === 'MODIFIER') {
+        data[key] = {
+          name: value.name,
+          code: value.code,
+        };
+      } else if (type === 'NUMBER') {
+        invariant(property.type === 'NUMBER', `Expected property type to be NUMBER, but got ${property.type}`);
+        data[key] = formatNumberRecordValue(value, property);
+      } else if (type === 'CALC') {
+        invariant(property.type === 'CALC', `Expected property type to be CALC, but got ${property.type}`);
+        data[key] = formatCalculatedRecordValue(value, property, language);
+      } else if (type === 'CHECK_BOX' || type === 'MULTI_SELECT' || type === 'CATEGORY') {
+        data[key] = value.map((v) => v);
+      } else if (
+        type === 'USER_SELECT' ||
+        type === 'ORGANIZATION_SELECT' ||
+        type === 'GROUP_SELECT' ||
+        type === 'STATUS_ASSIGNEE'
+      ) {
+        data[key] = value.map((v) => {
+          return { name: v.name, code: v.code };
+        });
+      } else if (type === 'SUBTABLE') {
+        invariant(property.type === 'SUBTABLE', `Expected property type to be SUBTABLE, but got ${property.type}`);
+        data[key] = value.map((subRecord) => record2templateData(property.fields, subRecord.value, language));
+      } else if (type === 'FILE') {
+        invariant(property.type === 'FILE', `Expected property type to be FILE, but got ${property.type}`);
+        data[key] = value.map((file) => ({
+          name: file.name,
+          size: file.size,
+          contentType: file.contentType,
+          fileKey: file.fileKey,
+        }));
+      } else {
+        // RECORD_NUMBER, __ID__, __REVISION__, CREATED_TIME, UPDATED_TIME
+        // SINGLE_LINE_TEXT, MULTI_LINE_TEXT, RICH_TEXT, RADIO_BUTTON, DROP_DOWN, DATE, TIME, DATETIME, LINK, STATUS
+        data[key] = value;
+      }
+    }
+  }
+  return data;
+};
+
+const generateWordFileData = (
+  content: ArrayBuffer,
+  properties: KintoneFormFieldProperties,
+  record: kintone.types.GenericFields,
+  language: string,
+) => {
+  const zip = new PizZip(content);
+  const doc = new Docxtemplater(zip, {
+    paragraphLoop: true,
+    linebreaks: true,
+    parser: expressionParser,
+    nullGetter: () => '',
+  });
+  doc.render(record2templateData(properties, record, language));
+  return doc.getZip().generate({ type: 'blob', mimeType: DOCX_CONTENT_TYPE });
+};
+
+export default generateWordFileData;

src/desktop/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import ReactDOM from 'react-dom/client';
 import invariant from 'tiny-invariant';
 import DesktopApp from './DesktopApp';

src/kintone-env.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="@shin-chan/kypes" />
-
-// CSS modules
-type CSSModuleClasses = { readonly [key: string]: string };
-
-declare module '*.module.css' {
-  const classes: CSSModuleClasses;
-  export default classes;
-}
-
-// CSS
-declare module '*.css' {}

src/types/css-modules.d.ts

@@ -0,0 +1,93 @@
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: string };
+
+declare module '*.module.css' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.less' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.styl' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.stylus' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.pcss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+declare module '*.module.sss' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}
+
+// CSS
+declare module '*.css' {
+  /**
+   * @deprecated Use `import style from './style.css?inline'` instead.
+   */
+  const css: string;
+  export default css;
+}
+declare module '*.scss' {
+  /**
+   * @deprecated Use `import style from './style.scss?inline'` instead.
+   */
+  const css: string;
+  export default css;
+}
+declare module '*.sass' {
+  /**
+   * @deprecated Use `import style from './style.sass?inline'` instead.
+   */
+  const css: string;
+  export default css;
+}
+declare module '*.less' {
+  /**
+   * @deprecated Use `import style from './style.less?inline'` instead.
+   */
+  const css: string;
+  export default css;
+}
+declare module '*.styl' {
+  /**
+   * @deprecated Use `import style from './style.styl?inline'` instead.
+   */
+  const css: string;
+  export default css;
+}
+declare module '*.stylus' {
+  /**
+   * @deprecated Use `import style from './style.stylus?inline'` instead.
+   */
+  const css: string;
+  export default css;
+}
+declare module '*.pcss' {
+  /**
+   * @deprecated Use `import style from './style.pcss?inline'` instead.
+   */
+  const css: string;
+  export default css;
+}
+declare module '*.sss' {
+  /**
+   * @deprecated Use `import style from './style.sss?inline'` instead.
+   */
+  const css: string;
+  export default css;
+}

src/types/cybozu.d.ts

@@ -0,0 +1,30 @@
+declare namespace cybozu.data {
+  namespace types {
+    type SchemaDataField = {
+      id: string;
+      label: string; // field name
+      properties: Record<string, string>;
+      type: string;
+      var: string; // field code
+    };
+    type SchemaDataTable = cybozu.data.types.SchemaDataField & {
+      fieldList: Record<string, cybozu.data.types.SchemaDataField>;
+    };
+    type SchemaDataSubtable = Record<string, cybozu.data.types.SchemaDataTable>;
+    type SchemaDataGroups = Array<{
+      table: cybozu.data.types.SchemaDataTable;
+      subTable: cybozu.data.types.SchemaDataSubtable;
+    }>;
+    type SchemaData = {
+      groups: cybozu.data.types.SchemaDataGroups;
+      revision: string;
+      table: cybozu.data.types.SchemaDataTable;
+      subTable: cybozu.data.types.SchemaDataSubtable;
+    };
+  }
+  namespace page {
+    const FORM_DATA: {
+      schema: cybozu.data.types.SchemaData;
+    };
+  }
+}

src/types/kintone.d.ts

@@ -0,0 +1,93 @@
+declare namespace kintone {
+  namespace fieldTypes {
+    interface Category {
+      type?: 'CATEGORY';
+      value: Array<string>;
+    }
+    interface Status {
+      type?: 'STATUS';
+      value: string;
+    }
+    interface StatusAssignee {
+      type?: 'STATUS_ASSIGNEE';
+      value: kintone.fieldTypes.UserSelect['value'];
+    }
+    type InSubtableFieldTypes =
+      | kintone.fieldTypes.SingleLineText
+      | kintone.fieldTypes.RichText
+      | kintone.fieldTypes.MultiLineText
+      | kintone.fieldTypes.Number
+      | kintone.fieldTypes.Calc
+      | kintone.fieldTypes.RadioButton
+      | kintone.fieldTypes.DropDown
+      | kintone.fieldTypes.Date
+      | kintone.fieldTypes.Time
+      | kintone.fieldTypes.DateTime
+      | kintone.fieldTypes.Link
+      | kintone.fieldTypes.CheckBox
+      | kintone.fieldTypes.MultiSelect
+      | kintone.fieldTypes.UserSelect
+      | kintone.fieldTypes.OrganizationSelect
+      | kintone.fieldTypes.GroupSelect
+      | kintone.fieldTypes.File;
+    type SystemFieldTypes =
+      | kintone.fieldTypes.Id
+      | kintone.fieldTypes.Revision
+      | kintone.fieldTypes.Modifier
+      | kintone.fieldTypes.Creator
+      | kintone.fieldTypes.RecordNumber
+      | kintone.fieldTypes.UpdatedTime
+      | kintone.fieldTypes.CreatedTime;
+    type SubtableValue<T extends string> = {
+      id: string;
+      value: Record<T, kintone.fieldTypes.InSubtableFieldTypes>;
+    };
+    type Subtable<T extends string> = {
+      type: 'SUBTABLE';
+      value: Array<SubtableValue<T>>;
+    };
+    type ExtraFieldTypes = Category | Status | StatusAssignee;
+    type GenericFieldTypes = InSubtableFieldTypes | SystemFieldTypes | Subtable<string> | ExtraFieldTypes;
+  }
+  namespace types {
+    type GenericFields = Record<string, kintone.fieldTypes.GenericFieldTypes>;
+  }
+
+  namespace events {
+    interface AppRecordIndexEditShowEvent {
+      type: 'app.record.index.edit.show';
+      appId: number;
+      recordId: number;
+      record: kintone.types.SavedFields;
+    }
+    interface AppRecordCreateShowEvent {
+      type: 'app.record.create.show';
+      appId: number;
+      record: kintone.types.Fields;
+      reuse: boolean;
+    }
+    interface AppRecordEditShowEvent {
+      type: 'app.record.edit.show';
+      appId: number;
+      recordId: number;
+      record: kintone.types.SavedFields;
+    }
+    interface AppRecordDetailShowEvent {
+      type: 'app.record.detail.show';
+      appId: number;
+      recordId: number;
+      record: kintone.types.SavedFields;
+    }
+    interface MobileAppRecordDetailShowEvent {
+      type: 'mobile.app.record.detail.show';
+      appId: number;
+      recordId: number;
+      record: kintone.types.SavedFields;
+    }
+  }
+
+  namespace app {
+    function getFormFields(): Promise<unknown>;
+    function getFormLayout(): Promise<unknown>;
+  }
+}

tsconfig.json

@@ -19,7 +19,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true
   },
-  "include": ["src/**/*", "./node_modules/@kintone/dts-gen/kintone.d.ts"],
+  "files": ["./node_modules/@kintone/dts-gen/kintone.d.ts"],
+  "include": ["src/**/*"],
   "ts-node": {
     "compilerOptions": {
       "module": "CommonJS"