@gumigumih/react-calculator-input-form 1.1.5 → 2.0.1

package/README.md

@@ -1,255 +1,301 @@
-# 🧮 React Calculator Input Form Plugin
-
-[![npm version](https://badge.fury.io/js/@gumigumih/react-calculator-input-form.svg)](https://badge.fury.io/js/@gumigumih/react-calculator-input-form)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)
-[![React](https://img.shields.io/badge/React-18+-blue.svg)](https://reactjs.org/)
-[![Plugin](https://img.shields.io/badge/Plugin-React-blue.svg)](https://reactjs.org/)
-
-> **React専用電卓入力フォームプラグイン** - 税込税抜計算機能付きで、あらゆる金額入力シーンに対応！
-
-## ✨ 特徴
-
-- ⚛️ **React専用プラグイン**（React 18+完全対応）
-- 🧮 **基本的な電卓機能**（四則演算）
-- 💰 **税込計算**（8%、10%）
-- 📊 **税抜計算**（8%、10%）
-- 🔢 **小数点以下対応**
-- 📈 **3桁区切り表示**
-- 🔗 **react-number-format完全対応**（通貨記号、カスタムフォーマット等）
-- ⌨️ **キーボードショートカット対応**
-- 🔧 **TypeScript対応**
-- ⚙️ **カスタマイズ可能なオプション設定**
-- 🎨 **スタイルの自動読み込み**（別途CSSファイルの読み込み不要）
-
-## 🚀 インストール
-
-```bash
-npm install @gumigumih/react-calculator-input-form
-```
-
-```bash
-yarn add @gumigumih/react-calculator-input-form
-```
-
-```bash
-pnpm add @gumigumih/react-calculator-input-form
-```
-
-## 🎯 クイックスタート
-
-### 最も簡単な使用方法（推奨）
-
-```tsx
-import { CalculatorInputForm } from '@gumigumih/react-calculator-input-form';
-
-function App() {
-  const [amount, setAmount] = useState('');
-
-  return (
-    <div>
-      <CalculatorInputForm
-        value={amount}
-        onChange={setAmount}
-        title="金額入力"
-        description="税込・税抜や小数計算に対応"
-        className="w-full px-3 py-2 border border-gray-300 rounded-md"
-        placeholder="クリックして金額を入力"
-      />
-      <p>金額: {amount}円</p>
-    </div>
-  );
-}
-```
-
-### 高度な使用方法
-
-```tsx
-import { Calculator } from '@gumigumih/react-calculator-input-form';
-
-function App() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [amount, setAmount] = useState('');
-
-  const handleCalculate = (value: string) => {
-    setAmount(value);
-    setIsOpen(false);
-  };
-
-  return (
-    <div>
-      <button onClick={() => setIsOpen(true)}>電卓を開く</button>
-      <p>金額: {amount}</p>
-      
-      <Calculator
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        onCalculate={handleCalculate}
-        initialValue={amount}
-        title="金額入力"
-        description="税込・税抜や小数計算に対応"
-      />
-    </div>
-  );
-}
-```
-
-## ⚙️ オプション設定
-
-### CalculatorInputForm オプション
-
-```tsx
-<CalculatorInputForm
-  value={amount}
-  onChange={setAmount}
-  // 税計算の有効/無効
-  enableTaxCalculation={false}
-  // 小数点以下の桁数
-  decimalPlaces={2}
-  // 数値フォーマットオプション
-  numberFormatOptions={{
-    thousandSeparator: true,    // 3桁区切り
-    allowNegative: false,       // 負の値を許可
-    allowLeadingZeros: false,   // 先頭の0を許可
-    decimalScale: 2,            // 小数点以下の最大桁数
-    prefix: "¥",                // 通貨記号（前）
-    suffix: ""                  // 通貨記号（後）
-  }}
-/>
-```
-
-## 🔗 react-number-format対応
-
-このプラグインは**react-number-format**ライブラリと完全に統合されており、豊富な数値フォーマット機能を提供します。
-
-### 主要なフォーマット機能
-
-- **通貨記号**: `prefix: "¥"`, `suffix: "$"` など
-- **3桁区切り**: `thousandSeparator: true`
-- **小数点制御**: `decimalScale: 2`, `allowDecimal: true`
-- **負の値制御**: `allowNegative: true/false`
-- **先頭ゼロ制御**: `allowLeadingZeros: true/false`
-- **カスタム区切り文字**: `thousandSeparator: ","`, `decimalSeparator: "."`
-
-### 使用例
-
-```tsx
-// 日本円フォーマット
-<CalculatorInputForm
-  value={amount}
-  onChange={setAmount}
-  numberFormatOptions={{
-    prefix: "¥",
-    thousandSeparator: true,
-    decimalScale: 0,
-    allowNegative: false
-  }}
-/>
-
-// ドルフォーマット
-<CalculatorInputForm
-  value={amount}
-  onChange={setAmount}
-  numberFormatOptions={{
-    prefix: "$",
-    thousandSeparator: ",",
-    decimalSeparator: ".",
-    decimalScale: 2,
-    suffix: " USD"
-  }}
-/>
-
-// パーセントフォーマット
-<CalculatorInputForm
-  value={amount}
-  onChange={setAmount}
-  numberFormatOptions={{
-    suffix: "%",
-    decimalScale: 2,
-    allowNegative: false
-  }}
-/>
-```
-
-### 利用可能な全オプション
-
-react-number-formatの**すべてのプロパティ**が利用可能です。詳細は[公式ドキュメント](https://www.npmjs.com/package/react-number-format)をご覧ください。
-
-## 📋 Props
-
-| プロパティ | 型 | 必須 | デフォルト | 説明 |
-|------------|----|------|------------|------|
-| `value` | string | ✓ | - | 入力値 |
-| `onChange` | (value: string) => void | ✓ | - | 値変更時のコールバック |
-| `placeholder` | string | | "クリックして金額を入力" | プレースホルダーテキスト |
-| `className` | string | | - | 入力フィールドのCSSクラス |
-| `title` | string | | "金額入力" | モーダルのタイトル |
-| `description` | string | | "税込・税抜や小数計算に対応" | モーダルの説明文 |
-| `enableTaxCalculation` | boolean | | true | 税計算機能の有効/無効 |
-| `decimalPlaces` | number | | 6 | 小数点以下の最大桁数 |
-| `numberFormatOptions` | object | | {} | 数値フォーマットの詳細設定 |
-
-## ⌨️ キーボードショートカット
-
-- `+`, `-`, `*`, `/`: 演算子
-- `Enter`, `=`: 計算実行
-- `Escape`: 電卓を閉じる
-- `C`: クリア
-- `Backspace`: バックスペース
-- `.`: 小数点入力
-
-## 🎨 デモ
-
-実際の動作を確認したい場合は、以下のドキュメントページをご覧ください：
-
-```bash
-# ルートディレクトリから
-npm run docs:dev
-
-# または、docsディレクトリ内で
-cd docs
-npm install
-npm run dev
-```
-
-📚 **[詳細なドキュメントとデモはこちら](./docs/)**
-
-## 🛠️ 開発
-
-```bash
-# 依存関係のインストール
-npm install
-
-# 開発モード
-npm run dev
-
-# ビルド
-npm run build
-```
-
-📖 **[開発ルールとガイドライン](./DEVELOPMENT.md)**
-
-### コミットメッセージのルール
-このプロジェクトでは、セマンティックコミットメッセージを使用しています：
-
-- `feat:` - 新機能追加
-- `fix:` - バグ修正
-- `docs:` - ドキュメント更新
-- `style:` - コードスタイル変更
-- `refactor:` - リファクタリング
-- `test:` - テスト追加・修正
-- `chore:` - その他の変更
-
-詳細は[開発ルール](./DEVELOPMENT.md)をご覧ください。
-
-## 📄 ライセンス
-
-MIT License - 詳細は [LICENSE](LICENSE) ファイルをご覧ください。
-
-## 🤝 コントリビューション
-
-バグ報告や機能要望、プルリクエストを歓迎します！
-
----
-
-**Made with ❤️ by [gumigumih](https://github.com/gumigumih)**
+# 🧮 React Calculator Input Form Plugin
+
+[![npm version](https://badge.fury.io/js/@gumigumih/react-calculator-input-form.svg)](https://badge.fury.io/js/@gumigumih/react-calculator-input-form)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-18+-blue.svg)](https://reactjs.org/)
+[![Plugin](https://img.shields.io/badge/Plugin-React-blue.svg)](https://reactjs.org/)
+
+> **React専用電卓入力フォームプラグイン** - 税込税抜計算機能付きで、あらゆる金額入力シーンに対応！
+
+## ✨ 特徴
+
+- ⚛️ **React専用プラグイン**（React 18+完全対応）
+- 🧮 **基本的な電卓機能**（四則演算）
+- 💰 **税込計算**（8%、10%）
+- 📊 **税抜計算**（8%、10%）
+- 🔢 **小数点以下対応**
+- 📈 **3桁区切り表示**
+- 🔗 **react-number-format完全対応**（通貨記号、カスタムフォーマット等）
+- ⌨️ **キーボードショートカット対応**
+- 🔧 **TypeScript対応**
+- ⚙️ **カスタマイズ可能なオプション設定**
+- 🎨 **スタイルの自動読み込み**（別途CSSファイルの読み込み不要）
+
+## 🚀 インストール
+
+```bash
+npm install @gumigumih/react-calculator-input-form
+```
+
+あわせて `react`, `react-dom`, `react-number-format` が必要です。
+
+```bash
+yarn add @gumigumih/react-calculator-input-form
+```
+
+```bash
+pnpm add @gumigumih/react-calculator-input-form
+```
+
+## 🎯 クイックスタート
+
+### 最も簡単な使用方法（推奨）
+
+```tsx
+import { CalculatorInputForm } from '@gumigumih/react-calculator-input-form';
+
+function App() {
+  const [amount, setAmount] = useState('');
+
+  return (
+    <div>
+      <CalculatorInputForm
+        value={amount}
+        onChange={setAmount}
+        title="金額入力"
+        description="税込・税抜や小数計算に対応"
+        className="w-full px-3 py-2 border border-gray-300 rounded-md"
+        placeholder="クリックして金額を入力"
+      />
+      <p>金額: {amount}円</p>
+    </div>
+  );
+}
+```
+
+### 高度な使用方法
+
+```tsx
+import { Calculator } from '@gumigumih/react-calculator-input-form';
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [amount, setAmount] = useState('');
+
+  const handleCalculate = (value: string) => {
+    setAmount(value);
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(true)}>電卓を開く</button>
+      <p>金額: {amount}</p>
+      
+      <Calculator
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onCalculate={handleCalculate}
+        initialValue={amount}
+        title="金額入力"
+        description="税込・税抜や小数計算に対応"
+      />
+    </div>
+  );
+}
+```
+
+## ⚙️ オプション設定
+
+### CalculatorInputForm オプション
+
+```tsx
+<CalculatorInputForm
+  value={amount}
+  onChange={setAmount}
+  // 税計算の有効/無効
+  enableTaxCalculation={false}
+  // 小数点以下の桁数
+  decimalPlaces={2}
+  // 数値フォーマットオプション
+  numberFormatOptions={{
+    thousandSeparator: true,    // 3桁区切り
+    allowNegative: false,       // 負の値を許可
+    allowLeadingZeros: false,   // 先頭の0を許可
+    decimalScale: 2,            // 小数点以下の最大桁数
+    prefix: "¥",                // 通貨記号（前）
+    suffix: ""                  // 通貨記号（後）
+  }}
+/>
+```
+
+## 🔗 react-number-format対応
+
+このプラグインは**react-number-format**ライブラリと完全に統合されており、豊富な数値フォーマット機能を提供します。
+
+### 主要なフォーマット機能
+
+- **通貨記号**: `prefix: "¥"`, `suffix: "$"` など
+- **3桁区切り**: `thousandSeparator: true`
+- **小数点制御**: `decimalScale: 2`, `allowDecimal: true`
+- **負の値制御**: `allowNegative: true/false`
+- **先頭ゼロ制御**: `allowLeadingZeros: true/false`
+- **カスタム区切り文字**: `thousandSeparator: ","`, `decimalSeparator: "."`
+
+### 使用例
+
+```tsx
+// 日本円フォーマット
+<CalculatorInputForm
+  value={amount}
+  onChange={setAmount}
+  numberFormatOptions={{
+    prefix: "¥",
+    thousandSeparator: true,
+    decimalScale: 0,
+    allowNegative: false
+  }}
+/>
+
+// ドルフォーマット
+<CalculatorInputForm
+  value={amount}
+  onChange={setAmount}
+  numberFormatOptions={{
+    prefix: "$",
+    thousandSeparator: ",",
+    decimalSeparator: ".",
+    decimalScale: 2,
+    suffix: " USD"
+  }}
+/>
+
+// パーセントフォーマット
+<CalculatorInputForm
+  value={amount}
+  onChange={setAmount}
+  numberFormatOptions={{
+    suffix: "%",
+    decimalScale: 2,
+    allowNegative: false
+  }}
+/>
+```
+
+### 利用可能な全オプション
+
+react-number-formatの**すべてのプロパティ**が利用可能です。詳細は[公式ドキュメント](https://www.npmjs.com/package/react-number-format)をご覧ください。
+
+## 📋 Props
+
+| プロパティ | 型 | 必須 | デフォルト | 説明 |
+|------------|----|------|------------|------|
+| `value` | string | ✓ | - | 入力値 |
+| `onChange` | (value: string) => void | ✓ | - | 値変更時のコールバック |
+| `placeholder` | string | | "クリックして金額を入力" | プレースホルダーテキスト |
+| `className` | string | | - | 入力フィールドのCSSクラス |
+| `title` | string | | "金額入力" | モーダルのタイトル |
+| `description` | string | | "税込・税抜や小数計算に対応" | モーダルの説明文 |
+| `enableTaxCalculation` | boolean | | false | 税計算機能の有効/無効 |
+| `decimalPlaces` | number | | 6 | 小数点以下の最大桁数 |
+| `numberFormatOptions` | `Partial<NumericFormatProps>` | | `{}` | 数値フォーマットの詳細設定 |
+| `colors` | object | | - | 色のカスタマイズ設定 |
+| `theme` | object | | - | `colors` の互換エイリアス |
+
+### colors
+
+```tsx
+<CalculatorInputForm
+  value={amount}
+  onChange={setAmount}
+  colors={{
+    primaryColor: '#7c3aed',
+    operatorColor: '#f97316',
+    successColor: '#10b981',
+    dangerColor: '#ef4444',
+    surfaceColor: '#ffffff',
+  }}
+/>
+```
+
+`theme` でも同じ指定ができますが、今後は `colors` を推奨します。
+
+## 🎨 スタイル
+
+このパッケージはインポート時に自動で基本スタイルを読み込みます。個別に明示したい場合は以下も使えます。
+
+```tsx
+import '@gumigumih/react-calculator-input-form/styles';
+```
+
+## 📦 公開 API
+
+外部利用向けに公開しているのは以下です。
+
+- `CalculatorInputForm`
+- `Calculator`
+- `CalculatorDisplay`
+- `CalculatorKeypad`
+
+内部実装寄りの `Button` / `Icon` は公開していません。
+
+## ⌨️ キーボードショートカット
+
+- `+`, `-`, `*`, `/`: 演算子
+- `Enter`, `=`: 計算実行
+- `Escape`: 電卓を閉じる
+- `C`: クリア
+- `Backspace`: バックスペース
+- `.`: 小数点入力
+
+## 🧮 計算方式
+
+この電卓は、一般的な手元電卓と同じく左から順に計算する逐次計算方式です。  
+`1 + 2 × 3` のような式は、数学の優先順位ではなく入力順に処理されます。
+
+## 🎨 デモ
+
+実際の動作を確認したい場合は、以下のドキュメントページをご覧ください：
+
+```bash
+# ルートディレクトリから
+npm run docs:dev
+
+# または、docsディレクトリ内で
+cd docs
+npm install
+npm run dev
+```
+
+📚 **[詳細なドキュメントとデモはこちら](./docs/)**
+
+## 🛠️ 開発
+
+```bash
+# 依存関係のインストール
+npm install
+
+# 開発モード
+npm run dev
+
+# ビルド
+npm run build
+```
+
+📖 **[開発ルールとガイドライン](./DEVELOPMENT.md)**
+
+### コミットメッセージのルール
+このプロジェクトでは、セマンティックコミットメッセージを使用しています：
+
+- `feat:` - 新機能追加
+- `fix:` - バグ修正
+- `docs:` - ドキュメント更新
+- `style:` - コードスタイル変更
+- `refactor:` - リファクタリング
+- `test:` - テスト追加・修正
+- `chore:` - その他の変更
+
+詳細は[開発ルール](./DEVELOPMENT.md)をご覧ください。
+
+## 📄 ライセンス
+
+MIT License - 詳細は [LICENSE](LICENSE) ファイルをご覧ください。
+
+## 🤝 コントリビューション
+
+バグ報告や機能要望、プルリクエストを歓迎します！
+
+---
+
+**Made with ❤️ by [gumigumih](https://github.com/gumigumih)**

package/dist/components/molecules/CalculatorDisplay.d.ts

@@ -1,11 +1,12 @@
 import type { RefObject } from 'react';
+import type { NumericFormatProps } from 'react-number-format';
 export interface CalculatorDisplayProps {
     value: string;
     error?: string;
-    inputRef?: RefObject<HTMLDivElement>;
+    inputRef?: RefObject<globalThis.HTMLInputElement>;
     editable?: boolean;
     placeholder?: string;
     onChange?: (value: string) => void;
-    numberFormatOptions?: any;
+    numberFormatOptions?: Partial<NumericFormatProps>;
 }
 export declare const CalculatorDisplay: ({ value, error, inputRef, editable, placeholder, onChange, numberFormatOptions }: CalculatorDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/Calculator.d.ts

@@ -1,3 +1,11 @@
+import type { NumericFormatProps } from 'react-number-format';
+export interface CalculatorColorTheme {
+    primaryColor?: string;
+    operatorColor?: string;
+    successColor?: string;
+    dangerColor?: string;
+    surfaceColor?: string;
+}
 export interface CalculatorProps {
     isOpen: boolean;
     onClose: () => void;
@@ -7,7 +15,9 @@ export interface CalculatorProps {
     description?: string;
     enableTaxCalculation?: boolean;
     decimalPlaces?: number;
-    numberFormatOptions?: any;
+    numberFormatOptions?: Partial<NumericFormatProps>;
     placeholder?: string;
+    colors?: CalculatorColorTheme;
+    theme?: CalculatorColorTheme;
 }
-export declare const Calculator: ({ isOpen, onClose, onCalculate, initialValue, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, placeholder, }: CalculatorProps) => import("react").ReactPortal | null;
+export declare const Calculator: ({ isOpen, onClose, onCalculate, initialValue, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, placeholder, colors, theme, }: CalculatorProps) => import("react").ReactPortal | null;

package/dist/components/organisms/CalculatorInputForm.d.ts

@@ -1,3 +1,5 @@
+import type { NumericFormatProps } from 'react-number-format';
+import { type CalculatorColorTheme } from './Calculator';
 export interface CalculatorInputFormProps {
     value: string;
     onChange: (value: string) => void;
@@ -7,7 +9,9 @@ export interface CalculatorInputFormProps {
     description?: string;
     enableTaxCalculation?: boolean;
     decimalPlaces?: number;
-    numberFormatOptions?: any;
+    numberFormatOptions?: Partial<NumericFormatProps>;
     displayPlaceholder?: string;
+    colors?: CalculatorColorTheme;
+    theme?: CalculatorColorTheme;
 }
-export declare const CalculatorInputForm: ({ value, onChange, placeholder, className, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, displayPlaceholder, }: CalculatorInputFormProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CalculatorInputForm: ({ value, onChange, placeholder, className, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, displayPlaceholder, colors, theme, }: CalculatorInputFormProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/organisms/calculatorUtils.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeNumberString(num: number, maxFractionDigits?: number): string;
+export declare function calculateExpression(expr: string): string;

package/dist/components/organisms/useCalculatorController.d.ts

@@ -0,0 +1,22 @@
+type ControllerParams = {
+    isOpen: boolean;
+    initialValue?: string;
+    onClose: () => void;
+    onCalculate: (value: string) => void;
+    enableTaxCalculation: boolean;
+    decimalPlaces: number;
+    getInputValue?: () => string;
+    onOperatorInput?: () => void;
+};
+export declare function useCalculatorController({ isOpen, initialValue, onClose, onCalculate, enableTaxCalculation, decimalPlaces, getInputValue, onOperatorInput, }: ControllerParams): {
+    mounted: boolean;
+    displayValue: string;
+    error: string;
+    handleDisplayChange: (newValue: string) => void;
+    handleButtonClick: (val: string) => void;
+    handleEqual: () => void;
+    handleDecide: () => void;
+    handleTaxInclude: (rate: number) => void;
+    handleTaxExclude: (rate: number) => void;
+};
+export {};

package/dist/index.d.ts

@@ -1,12 +1,8 @@
 import './styles/calculator.css';
-export { Button } from './components/atoms/Button';
-export { Icon } from './components/atoms/Icon';
 export { CalculatorDisplay } from './components/molecules/CalculatorDisplay';
 export { CalculatorKeypad } from './components/molecules/CalculatorKeypad';
 export { Calculator } from './components/organisms/Calculator';
 export { CalculatorInputForm } from './components/organisms/CalculatorInputForm';
-export type { ButtonProps } from './components/atoms/Button';
-export type { IconProps } from './components/atoms/Icon';
 export type { CalculatorDisplayProps } from './components/molecules/CalculatorDisplay';
 export type { CalculatorKeypadProps } from './components/molecules/CalculatorKeypad';
 export type { CalculatorProps } from './components/organisms/Calculator';