first commit

src/common/ErrorFallback.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import KintonePluginAlert from './ui/KintonePluginAlert';
+
+interface Props {
+  error: Error;
+}
+
+const ErrorFallback: React.FC<Props> = (props) => {
+  const { error } = props;
+  return (
+    <KintonePluginAlert>
+      <p>Something went wrong:</p>
+      <pre>{error.message}</pre>
+    </KintonePluginAlert>
+  );
+};
+export default ErrorFallback;

src/common/Loading.css

@@ -0,0 +1,196 @@
+.loading {
+  margin: 100px auto;
+  font-size: 25px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  -webkit-animation: loadingKeyframes 1.1s infinite ease;
+  animation: loadingKeyframes 1.1s infinite ease;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+@-webkit-keyframes loadingKeyframes {
+  0%,
+  100% {
+    box-shadow:
+      0em -2.6em 0em 0em #000000,
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.5),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
+  }
+  12.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.7),
+      1.8em -1.8em 0 0em #000000,
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
+  }
+  25% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.5),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7),
+      2.5em 0em 0 0em #000000,
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  37.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.7),
+      1.75em 1.75em 0 0em #000000,
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  50% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.5),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7),
+      0em 2.5em 0 0em #000000,
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  62.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.7),
+      -1.8em 1.8em 0 0em #000000,
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  75% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.5),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7),
+      -2.6em 0em 0 0em #000000,
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  87.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.7),
+      -1.8em -1.8em 0 0em #000000;
+  }
+}
+@keyframes loadingKeyframes {
+  0%,
+  100% {
+    box-shadow:
+      0em -2.6em 0em 0em #000000,
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.5),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
+  }
+  12.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.7),
+      1.8em -1.8em 0 0em #000000,
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
+  }
+  25% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.5),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7),
+      2.5em 0em 0 0em #000000,
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  37.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.7),
+      1.75em 1.75em 0 0em #000000,
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  50% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.5),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7),
+      0em 2.5em 0 0em #000000,
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  62.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.7),
+      -1.8em 1.8em 0 0em #000000,
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  75% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.5),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7),
+      -2.6em 0em 0 0em #000000,
+      -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+  }
+  87.5% {
+    box-shadow:
+      0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
+      1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
+      1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
+      -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.7),
+      -1.8em -1.8em 0 0em #000000;
+  }
+}

src/common/Loading.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import './Loading.css';
+
+const Loading: React.FC = () => {
+  return <div className="loading">Loading...</div>;
+};
+export default Loading;

src/common/global.ts

@@ -0,0 +1,4 @@
+import invariant from 'tiny-invariant';
+
+export const PLUGIN_ID = kintone.$PLUGIN_ID;
+invariant(PLUGIN_ID, 'The PLUGIN_ID is not available. Please ensure you are on a Kintone plugin page.');

src/common/ui/KintonePluginAlert.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+interface KintonePluginAlertProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const KintonePluginAlert: React.FC<KintonePluginAlertProps> = (props) => {
+  const { className, children } = props;
+  return (
+    <div className={clsx('kintoneplugin-alert', className)} role="alert">
+      {children}
+    </div>
+  );
+};
+export default KintonePluginAlert;

src/common/ui/KintonePluginButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+interface KintonePluginButtonProps {
+  className?: string;
+  variant: 'normal' | 'disabled' | 'dialog-ok' | 'dialog-cancel';
+  type?: 'button' | 'submit' | 'reset';
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  children: React.ReactNode;
+}
+
+const KintonePluginButton: React.FC<KintonePluginButtonProps> = (props) => {
+  const { className, variant, type, onClick, children } = props;
+  return (
+    <button
+      className={clsx(`kintoneplugin-button-${variant}`, className)}
+      type={type}
+      onClick={onClick}
+      disabled={variant === 'disabled'}
+    >
+      {children}
+    </button>
+  );
+};
+export default KintonePluginButton;

src/common/ui/KintonePluginDesc.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+interface KintonePluginDescProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const KintonePluginDesc: React.FC<KintonePluginDescProps> = (props) => {
+  const { className, children } = props;
+  return <div className={clsx('kintoneplugin-desc', className)}>{children}</div>;
+};
+export default KintonePluginDesc;

src/common/ui/KintonePluginLabel.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+interface KintonePluginLabelProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const KintonePluginLabel: React.FC<KintonePluginLabelProps> = (props) => {
+  const { className, children } = props;
+  return <div className={clsx('kintoneplugin-label', className)}>{children}</div>;
+};
+export default KintonePluginLabel;

src/common/ui/KintonePluginRequire.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+interface KintonePluginRequire {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const KintonePluginRequire: React.FC<KintonePluginRequire> = (props) => {
+  const { className, children } = props;
+  return <span className={clsx('kintoneplugin-require', className)}>{children}</span>;
+};
+export default KintonePluginRequire;

src/common/ui/KintonePluginRow.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+interface KintonePluginRowProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const KintonePluginRow: React.FC<KintonePluginRowProps> = (props) => {
+  const { className, children } = props;
+  return <div className={clsx('kintoneplugin-row', className)}>{children}</div>;
+};
+export default KintonePluginRow;

src/common/ui/KintonePluginSelect.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+export interface KintonePluginSelectOptionData {
+  key: string;
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface KintonePluginSelectProps {
+  className?: string;
+  defaultValue?: string;
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  options: KintonePluginSelectOptionData[];
+}
+
+const KintonePluginSelect: React.FC<KintonePluginSelectProps> = (props) => {
+  const { className, defaultValue, onChange, options } = props;
+  if (!options || options.length === 0) {
+    return null; // Return null if no options are provided
+  }
+  return (
+    <div className={clsx('kintoneplugin-select-outer', className)}>
+      <div className="kintoneplugin-select">
+        <select defaultValue={defaultValue} onChange={onChange}>
+          {options.map((option) => (
+            <option key={option.key} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+export default KintonePluginSelect;

src/common/ui/KintonePluginTitle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+interface KintonePluginTitleProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const KintonePluginTitle: React.FC<KintonePluginTitleProps> = (props) => {
+  const { className, children } = props;
+  return <div className={clsx('kintoneplugin-title', className)}>{children}</div>;
+};
+export default KintonePluginTitle;