first commit

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;