optimize build tool chain.

src/common/Loading.module.css

@@ -7,14 +7,16 @@
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 9999;
 }
-.spinner-container {
+
+.spinnerContainer {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10000;
 }
-.spinner-container .spinner {
+
+.spinnerContainer .spinner {
   font-size: 10px;
   width: 1em;
   height: 1em;
@@ -24,6 +26,7 @@
   animation: mulShdSpin 1.1s infinite ease;
   transform: translateZ(0);
 }
+
 @keyframes mulShdSpin {
   0%,
   100% {

src/common/stringUtils.ts

@@ -0,0 +1,7 @@
+export const naturalCompare = (a: string, b: string): number => {
+  const locales = new Set<string>([...navigator.languages, 'en-US', 'ja-JP']);
+  return new Intl.Collator(Array.from(locales), {
+    sensitivity: 'variant',
+    numeric: true,
+  }).compare(a, b);
+};

src/common/types.ts

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

src/config/Settings.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
 import { KintoneRestAPIClient } from '@kintone/rest-api-client';
-import { Properties as KintoneFormFieldProperties } from '@kintone/rest-api-client/lib/src/client/types';
 import moize from 'moize';
 import invariant from 'tiny-invariant';
 import { PLUGIN_ID } from '../common/global';
+import { naturalCompare } from '../common/stringUtils';
+import { KintoneFormFieldProperties } from '../common/types';
 import KintonePluginAlert from '../common/ui/KintonePluginAlert';
 import KintonePluginButton from '../common/ui/KintonePluginButton';
 import KintonePluginDesc from '../common/ui/KintonePluginDesc';
@@ -27,7 +28,9 @@ const Settings: React.FC = () => {
   const appId = kintone.app.getId();
   invariant(appId, 'The app ID is not available. Please ensure you are on a Kintone app page.');
   const properties = React.use(cachedFormFieldsProperties(appId));
-  const fileFields = Object.values(properties).filter((property) => property.type === 'FILE');
+  const fileFields = Object.values(properties)
+    .filter((property) => property.type === 'FILE')
+    .sort((a, b) => naturalCompare(`${a.label} (${a.code})`, `${b.label} (${b.code})`));
   const options: KintonePluginSelectOptionData[] = [
     { value: '', label: 'Select a File field', disabled: true }, // Default option
     ...fileFields.map((property) => ({

src/desktop/MenuPanel.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { KintoneFormFieldProperty, KintoneRestAPIClient } from '@kintone/rest-api-client';
-import { Properties as KintoneFormFieldProperties } from '@kintone/rest-api-client/lib/src/client/types';
 import { KintoneRecord } from '@shin-chan/kypes/types/page';
 import dayjs from 'dayjs';
 import Docxtemplater from 'docxtemplater';
@@ -11,6 +10,7 @@ import moize from 'moize';
 import PizZip from 'pizzip';
 import invariant from 'tiny-invariant';
 import { DOCX_CONTENT_TYPE, LANGUAGE, PLUGIN_ID } from '../common/global';
+import { KintoneFormFieldProperties } from '../common/types';
 import KintonePluginAlert from '../common/ui/KintonePluginAlert';
 import KintonePluginButton from '../common/ui/KintonePluginButton';
 

src/kintone-env.d.ts

@@ -7,11 +7,6 @@ declare module '*.module.css' {
   const classes: CSSModuleClasses;
   export default classes;
 }
-declare module '*.module.scss' {
-  const classes: CSSModuleClasses;
-  export default classes;
-}
 
 // CSS
 declare module '*.css' {}
-declare module '*.scss' {}