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

package/README.md

@@ -18,15 +18,17 @@
 - 📈 **3桁区切り表示**
 - 🔗 **react-number-format完全対応**（通貨記号、カスタムフォーマット等）
 - ⌨️ **キーボードショートカット対応**
-- 🔧 **TypeScript対応**
-- ⚙️ **カスタマイズ可能なオプション設定**
-- 🎨 **スタイルの自動読み込み**（別途CSSファイルの読み込み不要）
+- 🔧 **TypeScript対応**
+- ⚙️ **カスタマイズ可能なオプション設定**
+- 🎨 **スタイルの自動読み込み**（別途CSSファイルの読み込み不要）
 
 ## 🚀 インストール
 
 ```bash
-npm install @gumigumih/react-calculator-input-form
-```
+npm install @gumigumih/react-calculator-input-form
+```
+
+あわせて `react`, `react-dom`, `react-number-format` が必要です。
 
 ```bash
 yarn add @gumigumih/react-calculator-input-form
@@ -62,7 +64,7 @@ function App() {
 }
 ```
 
-### 高度な使用方法
+### 高度な使用方法
 
 ```tsx
 import { Calculator } from '@gumigumih/react-calculator-input-form';
@@ -96,7 +98,7 @@ function App() {
 
 ## ⚙️ オプション設定
 
-### CalculatorInputForm オプション
+### CalculatorInputForm オプション
 
 ```tsx
 <CalculatorInputForm
@@ -183,22 +185,66 @@ react-number-formatの**すべてのプロパティ**が利用可能です。詳
 | `onChange` | (value: string) => void | ✓ | - | 値変更時のコールバック |
 | `placeholder` | string | | "クリックして金額を入力" | プレースホルダーテキスト |
 | `className` | string | | - | 入力フィールドのCSSクラス |
-| `title` | string | | "金額入力" | モーダルのタイトル |
-| `description` | string | | "税込・税抜や小数計算に対応" | モーダルの説明文 |
-| `enableTaxCalculation` | boolean | | true | 税計算機能の有効/無効 |
-| `decimalPlaces` | number | | 6 | 小数点以下の最大桁数 |
-| `numberFormatOptions` | object | | {} | 数値フォーマットの詳細設定 |
-
-## ⌨️ キーボードショートカット
+| `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`: バックスペース
-- `.`: 小数点入力
-
-## 🎨 デモ
+- `Backspace`: バックスペース
+- `.`: 小数点入力
+
+## 🧮 計算方式
+
+この電卓は、一般的な手元電卓と同じく左から順に計算する逐次計算方式です。  
+`1 + 2 × 3` のような式は、数学の優先順位ではなく入力順に処理されます。
+
+## 🎨 デモ
 
 実際の動作を確認したい場合は、以下のドキュメントページをご覧ください：
 

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

@@ -1,4 +1,5 @@
 import type { RefObject } from 'react';
+import type { NumericFormatProps } from 'react-number-format';
 export interface CalculatorDisplayProps {
     value: string;
     error?: string;
@@ -6,6 +7,6 @@ export interface CalculatorDisplayProps {
     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,20 @@
+type ControllerParams = {
+    isOpen: boolean;
+    initialValue?: string;
+    onClose: () => void;
+    onCalculate: (value: string) => void;
+    enableTaxCalculation: boolean;
+    decimalPlaces: number;
+};
+export declare function useCalculatorController({ isOpen, initialValue, onClose, onCalculate, enableTaxCalculation, decimalPlaces, }: 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';