@gumigumih/react-calculator-input-form 1.1.4 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +269 -223
- package/dist/components/atoms/Button.d.ts +1 -1
- package/dist/components/atoms/Icon.d.ts +0 -0
- package/dist/components/molecules/CalculatorDisplay.d.ts +2 -1
- package/dist/components/molecules/CalculatorKeypad.d.ts +0 -0
- package/dist/components/organisms/Calculator.d.ts +12 -2
- package/dist/components/organisms/CalculatorInputForm.d.ts +6 -2
- package/dist/components/organisms/calculatorUtils.d.ts +2 -0
- package/dist/components/organisms/useCalculatorController.d.ts +20 -0
- package/dist/constants/colors.d.ts +0 -0
- package/dist/index.d.ts +0 -4
- package/dist/index.esm.js +276 -1402
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +273 -1401
- package/dist/index.js.map +1 -1
- package/dist/styles/calculator.css +444 -444
- package/package.json +100 -101
- package/dist/components/atoms/__tests__/Button.test.d.ts +0 -1
- package/dist/components/organisms/__tests__/CalculatorInputForm.test.d.ts +0 -1
- package/dist/setupTests.d.ts +0 -1
- package/dist/styles/index.d.ts +0 -6
- package/dist/styles/index.ts +0 -1
package/README.md
CHANGED
|
@@ -1,255 +1,301 @@
|
|
|
1
|
-
# 🧮 React Calculator Input Form Plugin
|
|
2
|
-
|
|
3
|
-
[](https://badge.fury.io/js/@gumigumih/react-calculator-input-form)
|
|
4
|
-
[](https://opensource.org/licenses/MIT)
|
|
5
|
-
[](https://www.typescriptlang.org/)
|
|
6
|
-
[](https://reactjs.org/)
|
|
7
|
-
[](https://reactjs.org/)
|
|
8
|
-
|
|
9
|
-
> **React専用電卓入力フォームプラグイン** - 税込税抜計算機能付きで、あらゆる金額入力シーンに対応！
|
|
10
|
-
|
|
11
|
-
## ✨ 特徴
|
|
12
|
-
|
|
13
|
-
- ⚛️ **React専用プラグイン**（React 18+完全対応）
|
|
14
|
-
- 🧮 **基本的な電卓機能**（四則演算）
|
|
15
|
-
- 💰 **税込計算**（8%、10%）
|
|
16
|
-
- 📊 **税抜計算**（8%、10%）
|
|
17
|
-
- 🔢 **小数点以下対応**
|
|
18
|
-
- 📈 **3桁区切り表示**
|
|
19
|
-
- 🔗 **react-number-format完全対応**（通貨記号、カスタムフォーマット等）
|
|
20
|
-
- ⌨️ **キーボードショートカット対応**
|
|
1
|
+
# 🧮 React Calculator Input Form Plugin
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/@gumigumih/react-calculator-input-form)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
[](https://reactjs.org/)
|
|
7
|
+
[](https://reactjs.org/)
|
|
8
|
+
|
|
9
|
+
> **React専用電卓入力フォームプラグイン** - 税込税抜計算機能付きで、あらゆる金額入力シーンに対応！
|
|
10
|
+
|
|
11
|
+
## ✨ 特徴
|
|
12
|
+
|
|
13
|
+
- ⚛️ **React専用プラグイン**（React 18+完全対応）
|
|
14
|
+
- 🧮 **基本的な電卓機能**（四則演算）
|
|
15
|
+
- 💰 **税込計算**（8%、10%）
|
|
16
|
+
- 📊 **税抜計算**（8%、10%）
|
|
17
|
+
- 🔢 **小数点以下対応**
|
|
18
|
+
- 📈 **3桁区切り表示**
|
|
19
|
+
- 🔗 **react-number-format完全対応**（通貨記号、カスタムフォーマット等）
|
|
20
|
+
- ⌨️ **キーボードショートカット対応**
|
|
21
21
|
- 🔧 **TypeScript対応**
|
|
22
22
|
- ⚙️ **カスタマイズ可能なオプション設定**
|
|
23
23
|
- 🎨 **スタイルの自動読み込み**（別途CSSファイルの読み込み不要）
|
|
24
|
-
|
|
25
|
-
## 🚀 インストール
|
|
26
|
-
|
|
27
|
-
```bash
|
|
24
|
+
|
|
25
|
+
## 🚀 インストール
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
28
|
npm install @gumigumih/react-calculator-input-form
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
31
|
+
あわせて `react`, `react-dom`, `react-number-format` が必要です。
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
yarn add @gumigumih/react-calculator-input-form
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
pnpm add @gumigumih/react-calculator-input-form
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## 🎯 クイックスタート
|
|
42
|
+
|
|
43
|
+
### 最も簡単な使用方法（推奨）
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import { CalculatorInputForm } from '@gumigumih/react-calculator-input-form';
|
|
47
|
+
|
|
48
|
+
function App() {
|
|
49
|
+
const [amount, setAmount] = useState('');
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<div>
|
|
53
|
+
<CalculatorInputForm
|
|
54
|
+
value={amount}
|
|
55
|
+
onChange={setAmount}
|
|
56
|
+
title="金額入力"
|
|
57
|
+
description="税込・税抜や小数計算に対応"
|
|
58
|
+
className="w-full px-3 py-2 border border-gray-300 rounded-md"
|
|
59
|
+
placeholder="クリックして金額を入力"
|
|
60
|
+
/>
|
|
61
|
+
<p>金額: {amount}円</p>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
65
67
|
### 高度な使用方法
|
|
66
|
-
|
|
67
|
-
```tsx
|
|
68
|
-
import { Calculator } from '@gumigumih/react-calculator-input-form';
|
|
69
|
-
|
|
70
|
-
function App() {
|
|
71
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
72
|
-
const [amount, setAmount] = useState('');
|
|
73
|
-
|
|
74
|
-
const handleCalculate = (value: string) => {
|
|
75
|
-
setAmount(value);
|
|
76
|
-
setIsOpen(false);
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
return (
|
|
80
|
-
<div>
|
|
81
|
-
<button onClick={() => setIsOpen(true)}>電卓を開く</button>
|
|
82
|
-
<p>金額: {amount}</p>
|
|
83
|
-
|
|
84
|
-
<Calculator
|
|
85
|
-
isOpen={isOpen}
|
|
86
|
-
onClose={() => setIsOpen(false)}
|
|
87
|
-
onCalculate={handleCalculate}
|
|
88
|
-
initialValue={amount}
|
|
89
|
-
title="金額入力"
|
|
90
|
-
description="税込・税抜や小数計算に対応"
|
|
91
|
-
/>
|
|
92
|
-
</div>
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
## ⚙️ オプション設定
|
|
98
|
-
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { Calculator } from '@gumigumih/react-calculator-input-form';
|
|
71
|
+
|
|
72
|
+
function App() {
|
|
73
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
74
|
+
const [amount, setAmount] = useState('');
|
|
75
|
+
|
|
76
|
+
const handleCalculate = (value: string) => {
|
|
77
|
+
setAmount(value);
|
|
78
|
+
setIsOpen(false);
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<div>
|
|
83
|
+
<button onClick={() => setIsOpen(true)}>電卓を開く</button>
|
|
84
|
+
<p>金額: {amount}</p>
|
|
85
|
+
|
|
86
|
+
<Calculator
|
|
87
|
+
isOpen={isOpen}
|
|
88
|
+
onClose={() => setIsOpen(false)}
|
|
89
|
+
onCalculate={handleCalculate}
|
|
90
|
+
initialValue={amount}
|
|
91
|
+
title="金額入力"
|
|
92
|
+
description="税込・税抜や小数計算に対応"
|
|
93
|
+
/>
|
|
94
|
+
</div>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## ⚙️ オプション設定
|
|
100
|
+
|
|
99
101
|
### CalculatorInputForm オプション
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
<CalculatorInputForm
|
|
105
|
+
value={amount}
|
|
106
|
+
onChange={setAmount}
|
|
107
|
+
// 税計算の有効/無効
|
|
108
|
+
enableTaxCalculation={false}
|
|
109
|
+
// 小数点以下の桁数
|
|
110
|
+
decimalPlaces={2}
|
|
111
|
+
// 数値フォーマットオプション
|
|
112
|
+
numberFormatOptions={{
|
|
113
|
+
thousandSeparator: true, // 3桁区切り
|
|
114
|
+
allowNegative: false, // 負の値を許可
|
|
115
|
+
allowLeadingZeros: false, // 先頭の0を許可
|
|
116
|
+
decimalScale: 2, // 小数点以下の最大桁数
|
|
117
|
+
prefix: "¥", // 通貨記号（前）
|
|
118
|
+
suffix: "" // 通貨記号（後）
|
|
119
|
+
}}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## 🔗 react-number-format対応
|
|
124
|
+
|
|
125
|
+
このプラグインは**react-number-format**ライブラリと完全に統合されており、豊富な数値フォーマット機能を提供します。
|
|
126
|
+
|
|
127
|
+
### 主要なフォーマット機能
|
|
128
|
+
|
|
129
|
+
- **通貨記号**: `prefix: "¥"`, `suffix: "$"` など
|
|
130
|
+
- **3桁区切り**: `thousandSeparator: true`
|
|
131
|
+
- **小数点制御**: `decimalScale: 2`, `allowDecimal: true`
|
|
132
|
+
- **負の値制御**: `allowNegative: true/false`
|
|
133
|
+
- **先頭ゼロ制御**: `allowLeadingZeros: true/false`
|
|
134
|
+
- **カスタム区切り文字**: `thousandSeparator: ","`, `decimalSeparator: "."`
|
|
135
|
+
|
|
136
|
+
### 使用例
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
// 日本円フォーマット
|
|
140
|
+
<CalculatorInputForm
|
|
141
|
+
value={amount}
|
|
142
|
+
onChange={setAmount}
|
|
143
|
+
numberFormatOptions={{
|
|
144
|
+
prefix: "¥",
|
|
145
|
+
thousandSeparator: true,
|
|
146
|
+
decimalScale: 0,
|
|
147
|
+
allowNegative: false
|
|
148
|
+
}}
|
|
149
|
+
/>
|
|
150
|
+
|
|
151
|
+
// ドルフォーマット
|
|
152
|
+
<CalculatorInputForm
|
|
153
|
+
value={amount}
|
|
154
|
+
onChange={setAmount}
|
|
155
|
+
numberFormatOptions={{
|
|
156
|
+
prefix: "$",
|
|
157
|
+
thousandSeparator: ",",
|
|
158
|
+
decimalSeparator: ".",
|
|
159
|
+
decimalScale: 2,
|
|
160
|
+
suffix: " USD"
|
|
161
|
+
}}
|
|
162
|
+
/>
|
|
163
|
+
|
|
164
|
+
// パーセントフォーマット
|
|
165
|
+
<CalculatorInputForm
|
|
166
|
+
value={amount}
|
|
167
|
+
onChange={setAmount}
|
|
168
|
+
numberFormatOptions={{
|
|
169
|
+
suffix: "%",
|
|
170
|
+
decimalScale: 2,
|
|
171
|
+
allowNegative: false
|
|
172
|
+
}}
|
|
173
|
+
/>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### 利用可能な全オプション
|
|
177
|
+
|
|
178
|
+
react-number-formatの**すべてのプロパティ**が利用可能です。詳細は[公式ドキュメント](https://www.npmjs.com/package/react-number-format)をご覧ください。
|
|
179
|
+
|
|
180
|
+
## 📋 Props
|
|
181
|
+
|
|
182
|
+
| プロパティ | 型 | 必須 | デフォルト | 説明 |
|
|
183
|
+
|------------|----|------|------------|------|
|
|
184
|
+
| `value` | string | ✓ | - | 入力値 |
|
|
185
|
+
| `onChange` | (value: string) => void | ✓ | - | 値変更時のコールバック |
|
|
186
|
+
| `placeholder` | string | | "クリックして金額を入力" | プレースホルダーテキスト |
|
|
187
|
+
| `className` | string | | - | 入力フィールドのCSSクラス |
|
|
188
|
+
| `title` | string | | "金額入力" | モーダルのタイトル |
|
|
189
|
+
| `description` | string | | "税込・税抜や小数計算に対応" | モーダルの説明文 |
|
|
190
|
+
| `enableTaxCalculation` | boolean | | false | 税計算機能の有効/無効 |
|
|
191
|
+
| `decimalPlaces` | number | | 6 | 小数点以下の最大桁数 |
|
|
192
|
+
| `numberFormatOptions` | `Partial<NumericFormatProps>` | | `{}` | 数値フォーマットの詳細設定 |
|
|
193
|
+
| `colors` | object | | - | 色のカスタマイズ設定 |
|
|
194
|
+
| `theme` | object | | - | `colors` の互換エイリアス |
|
|
195
|
+
|
|
196
|
+
### colors
|
|
100
197
|
|
|
101
198
|
```tsx
|
|
102
199
|
<CalculatorInputForm
|
|
103
200
|
value={amount}
|
|
104
201
|
onChange={setAmount}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
thousandSeparator: true, // 3桁区切り
|
|
112
|
-
allowNegative: false, // 負の値を許可
|
|
113
|
-
allowLeadingZeros: false, // 先頭の0を許可
|
|
114
|
-
decimalScale: 2, // 小数点以下の最大桁数
|
|
115
|
-
prefix: "¥", // 通貨記号（前）
|
|
116
|
-
suffix: "" // 通貨記号（後）
|
|
202
|
+
colors={{
|
|
203
|
+
primaryColor: '#7c3aed',
|
|
204
|
+
operatorColor: '#f97316',
|
|
205
|
+
successColor: '#10b981',
|
|
206
|
+
dangerColor: '#ef4444',
|
|
207
|
+
surfaceColor: '#ffffff',
|
|
117
208
|
}}
|
|
118
209
|
/>
|
|
119
210
|
```
|
|
120
211
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
このプラグインは**react-number-format**ライブラリと完全に統合されており、豊富な数値フォーマット機能を提供します。
|
|
124
|
-
|
|
125
|
-
### 主要なフォーマット機能
|
|
212
|
+
`theme` でも同じ指定ができますが、今後は `colors` を推奨します。
|
|
126
213
|
|
|
127
|
-
|
|
128
|
-
- **3桁区切り**: `thousandSeparator: true`
|
|
129
|
-
- **小数点制御**: `decimalScale: 2`, `allowDecimal: true`
|
|
130
|
-
- **負の値制御**: `allowNegative: true/false`
|
|
131
|
-
- **先頭ゼロ制御**: `allowLeadingZeros: true/false`
|
|
132
|
-
- **カスタム区切り文字**: `thousandSeparator: ","`, `decimalSeparator: "."`
|
|
214
|
+
## 🎨 スタイル
|
|
133
215
|
|
|
134
|
-
|
|
216
|
+
このパッケージはインポート時に自動で基本スタイルを読み込みます。個別に明示したい場合は以下も使えます。
|
|
135
217
|
|
|
136
218
|
```tsx
|
|
137
|
-
|
|
138
|
-
<CalculatorInputForm
|
|
139
|
-
value={amount}
|
|
140
|
-
onChange={setAmount}
|
|
141
|
-
numberFormatOptions={{
|
|
142
|
-
prefix: "¥",
|
|
143
|
-
thousandSeparator: true,
|
|
144
|
-
decimalScale: 0,
|
|
145
|
-
allowNegative: false
|
|
146
|
-
}}
|
|
147
|
-
/>
|
|
148
|
-
|
|
149
|
-
// ドルフォーマット
|
|
150
|
-
<CalculatorInputForm
|
|
151
|
-
value={amount}
|
|
152
|
-
onChange={setAmount}
|
|
153
|
-
numberFormatOptions={{
|
|
154
|
-
prefix: "$",
|
|
155
|
-
thousandSeparator: ",",
|
|
156
|
-
decimalSeparator: ".",
|
|
157
|
-
decimalScale: 2,
|
|
158
|
-
suffix: " USD"
|
|
159
|
-
}}
|
|
160
|
-
/>
|
|
161
|
-
|
|
162
|
-
// パーセントフォーマット
|
|
163
|
-
<CalculatorInputForm
|
|
164
|
-
value={amount}
|
|
165
|
-
onChange={setAmount}
|
|
166
|
-
numberFormatOptions={{
|
|
167
|
-
suffix: "%",
|
|
168
|
-
decimalScale: 2,
|
|
169
|
-
allowNegative: false
|
|
170
|
-
}}
|
|
171
|
-
/>
|
|
219
|
+
import '@gumigumih/react-calculator-input-form/styles';
|
|
172
220
|
```
|
|
173
221
|
|
|
174
|
-
|
|
222
|
+
## 📦 公開 API
|
|
175
223
|
|
|
176
|
-
|
|
224
|
+
外部利用向けに公開しているのは以下です。
|
|
177
225
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
| `value` | string | ✓ | - | 入力値 |
|
|
183
|
-
| `onChange` | (value: string) => void | ✓ | - | 値変更時のコールバック |
|
|
184
|
-
| `placeholder` | string | | "クリックして金額を入力" | プレースホルダーテキスト |
|
|
185
|
-
| `className` | string | | - | 入力フィールドのCSSクラス |
|
|
186
|
-
| `title` | string | | "金額入力" | モーダルのタイトル |
|
|
187
|
-
| `description` | string | | "税込・税抜や小数計算に対応" | モーダルの説明文 |
|
|
188
|
-
| `enableTaxCalculation` | boolean | | true | 税計算機能の有効/無効 |
|
|
189
|
-
| `decimalPlaces` | number | | 6 | 小数点以下の最大桁数 |
|
|
190
|
-
| `numberFormatOptions` | object | | {} | 数値フォーマットの詳細設定 |
|
|
226
|
+
- `CalculatorInputForm`
|
|
227
|
+
- `Calculator`
|
|
228
|
+
- `CalculatorDisplay`
|
|
229
|
+
- `CalculatorKeypad`
|
|
191
230
|
|
|
231
|
+
内部実装寄りの `Button` / `Icon` は公開していません。
|
|
232
|
+
|
|
192
233
|
## ⌨️ キーボードショートカット
|
|
193
|
-
|
|
194
|
-
- `+`, `-`, `*`, `/`: 演算子
|
|
195
|
-
- `Enter`, `=`: 計算実行
|
|
196
|
-
- `Escape`: 電卓を閉じる
|
|
197
|
-
- `C`: クリア
|
|
234
|
+
|
|
235
|
+
- `+`, `-`, `*`, `/`: 演算子
|
|
236
|
+
- `Enter`, `=`: 計算実行
|
|
237
|
+
- `Escape`: 電卓を閉じる
|
|
238
|
+
- `C`: クリア
|
|
198
239
|
- `Backspace`: バックスペース
|
|
199
240
|
- `.`: 小数点入力
|
|
200
241
|
|
|
201
|
-
##
|
|
202
|
-
|
|
203
|
-
実際の動作を確認したい場合は、以下のドキュメントページをご覧ください：
|
|
242
|
+
## 🧮 計算方式
|
|
204
243
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
npm run docs:dev
|
|
244
|
+
この電卓は、一般的な手元電卓と同じく左から順に計算する逐次計算方式です。
|
|
245
|
+
`1 + 2 × 3` のような式は、数学の優先順位ではなく入力順に処理されます。
|
|
208
246
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
247
|
+
## 🎨 デモ
|
|
248
|
+
|
|
249
|
+
実際の動作を確認したい場合は、以下のドキュメントページをご覧ください：
|
|
250
|
+
|
|
251
|
+
```bash
|
|
252
|
+
# ルートディレクトリから
|
|
253
|
+
npm run docs:dev
|
|
254
|
+
|
|
255
|
+
# または、docsディレクトリ内で
|
|
256
|
+
cd docs
|
|
257
|
+
npm install
|
|
258
|
+
npm run dev
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
📚 **[詳細なドキュメントとデモはこちら](./docs/)**
|
|
262
|
+
|
|
263
|
+
## 🛠️ 開発
|
|
264
|
+
|
|
265
|
+
```bash
|
|
266
|
+
# 依存関係のインストール
|
|
267
|
+
npm install
|
|
268
|
+
|
|
269
|
+
# 開発モード
|
|
270
|
+
npm run dev
|
|
271
|
+
|
|
272
|
+
# ビルド
|
|
273
|
+
npm run build
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
📖 **[開発ルールとガイドライン](./DEVELOPMENT.md)**
|
|
277
|
+
|
|
278
|
+
### コミットメッセージのルール
|
|
279
|
+
このプロジェクトでは、セマンティックコミットメッセージを使用しています：
|
|
280
|
+
|
|
281
|
+
- `feat:` - 新機能追加
|
|
282
|
+
- `fix:` - バグ修正
|
|
283
|
+
- `docs:` - ドキュメント更新
|
|
284
|
+
- `style:` - コードスタイル変更
|
|
285
|
+
- `refactor:` - リファクタリング
|
|
286
|
+
- `test:` - テスト追加・修正
|
|
287
|
+
- `chore:` - その他の変更
|
|
288
|
+
|
|
289
|
+
詳細は[開発ルール](./DEVELOPMENT.md)をご覧ください。
|
|
290
|
+
|
|
291
|
+
## 📄 ライセンス
|
|
292
|
+
|
|
293
|
+
MIT License - 詳細は [LICENSE](LICENSE) ファイルをご覧ください。
|
|
294
|
+
|
|
295
|
+
## 🤝 コントリビューション
|
|
296
|
+
|
|
297
|
+
バグ報告や機能要望、プルリクエストを歓迎します！
|
|
298
|
+
|
|
299
|
+
---
|
|
300
|
+
|
|
301
|
+
**Made with ❤️ by [gumigumih](https://github.com/gumigumih)**
|
|
@@ -3,4 +3,4 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
className?: string;
|
|
5
5
|
}
|
|
6
|
-
export declare const Button: ({ children, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const Button: ({ children, className, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
File without changes
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { RefObject } from 'react';
|
|
2
|
+
import type { NumericFormatProps } from 'react-number-format';
|
|
2
3
|
export interface CalculatorDisplayProps {
|
|
3
4
|
value: string;
|
|
4
5
|
error?: string;
|
|
@@ -6,6 +7,6 @@ export interface CalculatorDisplayProps {
|
|
|
6
7
|
editable?: boolean;
|
|
7
8
|
placeholder?: string;
|
|
8
9
|
onChange?: (value: string) => void;
|
|
9
|
-
numberFormatOptions?:
|
|
10
|
+
numberFormatOptions?: Partial<NumericFormatProps>;
|
|
10
11
|
}
|
|
11
12
|
export declare const CalculatorDisplay: ({ value, error, inputRef, editable, placeholder, onChange, numberFormatOptions }: CalculatorDisplayProps) => import("react/jsx-runtime").JSX.Element;
|
|
File without changes
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
import type { NumericFormatProps } from 'react-number-format';
|
|
2
|
+
export interface CalculatorColorTheme {
|
|
3
|
+
primaryColor?: string;
|
|
4
|
+
operatorColor?: string;
|
|
5
|
+
successColor?: string;
|
|
6
|
+
dangerColor?: string;
|
|
7
|
+
surfaceColor?: string;
|
|
8
|
+
}
|
|
1
9
|
export interface CalculatorProps {
|
|
2
10
|
isOpen: boolean;
|
|
3
11
|
onClose: () => void;
|
|
@@ -7,7 +15,9 @@ export interface CalculatorProps {
|
|
|
7
15
|
description?: string;
|
|
8
16
|
enableTaxCalculation?: boolean;
|
|
9
17
|
decimalPlaces?: number;
|
|
10
|
-
numberFormatOptions?:
|
|
18
|
+
numberFormatOptions?: Partial<NumericFormatProps>;
|
|
11
19
|
placeholder?: string;
|
|
20
|
+
colors?: CalculatorColorTheme;
|
|
21
|
+
theme?: CalculatorColorTheme;
|
|
12
22
|
}
|
|
13
|
-
export declare const Calculator: ({ isOpen, onClose, onCalculate, initialValue, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, placeholder, }: CalculatorProps) => import("react").ReactPortal | null;
|
|
23
|
+
export declare const Calculator: ({ isOpen, onClose, onCalculate, initialValue, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, placeholder, colors, theme, }: CalculatorProps) => import("react").ReactPortal | null;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import type { NumericFormatProps } from 'react-number-format';
|
|
2
|
+
import { type CalculatorColorTheme } from './Calculator';
|
|
1
3
|
export interface CalculatorInputFormProps {
|
|
2
4
|
value: string;
|
|
3
5
|
onChange: (value: string) => void;
|
|
@@ -7,7 +9,9 @@ export interface CalculatorInputFormProps {
|
|
|
7
9
|
description?: string;
|
|
8
10
|
enableTaxCalculation?: boolean;
|
|
9
11
|
decimalPlaces?: number;
|
|
10
|
-
numberFormatOptions?:
|
|
12
|
+
numberFormatOptions?: Partial<NumericFormatProps>;
|
|
11
13
|
displayPlaceholder?: string;
|
|
14
|
+
colors?: CalculatorColorTheme;
|
|
15
|
+
theme?: CalculatorColorTheme;
|
|
12
16
|
}
|
|
13
|
-
export declare const CalculatorInputForm: ({ value, onChange, placeholder, className, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, displayPlaceholder, }: CalculatorInputFormProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
17
|
+
export declare const CalculatorInputForm: ({ value, onChange, placeholder, className, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, displayPlaceholder, colors, theme, }: CalculatorInputFormProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
type ControllerParams = {
|
|
2
|
+
isOpen: boolean;
|
|
3
|
+
initialValue?: string;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
onCalculate: (value: string) => void;
|
|
6
|
+
enableTaxCalculation: boolean;
|
|
7
|
+
decimalPlaces: number;
|
|
8
|
+
};
|
|
9
|
+
export declare function useCalculatorController({ isOpen, initialValue, onClose, onCalculate, enableTaxCalculation, decimalPlaces, }: ControllerParams): {
|
|
10
|
+
mounted: boolean;
|
|
11
|
+
displayValue: string;
|
|
12
|
+
error: string;
|
|
13
|
+
handleDisplayChange: (newValue: string) => void;
|
|
14
|
+
handleButtonClick: (val: string) => void;
|
|
15
|
+
handleEqual: () => void;
|
|
16
|
+
handleDecide: () => void;
|
|
17
|
+
handleTaxInclude: (rate: number) => void;
|
|
18
|
+
handleTaxExclude: (rate: number) => void;
|
|
19
|
+
};
|
|
20
|
+
export {};
|
|
File without changes
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import './styles/calculator.css';
|
|
2
|
-
export { Button } from './components/atoms/Button';
|
|
3
|
-
export { Icon } from './components/atoms/Icon';
|
|
4
2
|
export { CalculatorDisplay } from './components/molecules/CalculatorDisplay';
|
|
5
3
|
export { CalculatorKeypad } from './components/molecules/CalculatorKeypad';
|
|
6
4
|
export { Calculator } from './components/organisms/Calculator';
|
|
7
5
|
export { CalculatorInputForm } from './components/organisms/CalculatorInputForm';
|
|
8
|
-
export type { ButtonProps } from './components/atoms/Button';
|
|
9
|
-
export type { IconProps } from './components/atoms/Icon';
|
|
10
6
|
export type { CalculatorDisplayProps } from './components/molecules/CalculatorDisplay';
|
|
11
7
|
export type { CalculatorKeypadProps } from './components/molecules/CalculatorKeypad';
|
|
12
8
|
export type { CalculatorProps } from './components/organisms/Calculator';
|