@synerise/ds-format-picker 1.1.45 → 1.1.46

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/CLAUDE.md +127 -0
  3. package/package.json +13 -12
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.1.46](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@1.1.45...@synerise/ds-format-picker@1.1.46) (2026-07-23)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-format-picker
9
+
6
10
  ## [1.1.45](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@1.1.44...@synerise/ds-format-picker@1.1.45) (2026-07-16)
7
11
 
8
12
  **Note:** Version bump only for package @synerise/ds-format-picker
package/CLAUDE.md ADDED
@@ -0,0 +1,127 @@
1
+ # FormatPicker (`@synerise/ds-format-picker`)
2
+
3
+ > A dropdown button that opens a number-format settings panel — lets users choose between numeric / percent / cash formats, a currency, decimal places, 1000-separator, and compact notation.
4
+
5
+ ## Package structure
6
+
7
+ ```
8
+ src/
9
+ FormatPicker.tsx — main component; trigger button + Dropdown shell
10
+ FomartPicker.types.ts — all types (NOTE: filename typo: Fomart vs Format)
11
+ index.ts — public exports
12
+ FormatSettings/
13
+ FormatSettings.tsx — dropdown overlay: format buttons, currency picker, checkboxes, footer
14
+ FormatSettings.types.ts — FormatSettingsProps (internal)
15
+ FormatSettings.styles.ts — all styled components for the settings panel
16
+ __specs__/
17
+ FormatPicker.spec.tsx — Vitest tests (render + open + currency change)
18
+ ```
19
+
20
+ ## Public exports
21
+
22
+ ### `FormatPicker` (default export)
23
+
24
+ | Prop | Type | Default | Description |
25
+ |------|------|---------|-------------|
26
+ | `format` | `FormattingValue` | — (required) | Current format configuration |
27
+ | `value` | `number` | — (required) | Example number rendered in the trigger button label |
28
+ | `onDataFormatChange` | `(format: FormattingDataFormat) => void` | — (required) | Called when the user selects numeric / percent / cash |
29
+ | `onCurrencyChange` | `(currency: CurrencyType) => void` | — (required) | Called when a currency is selected from the dropdown |
30
+ | `onUseSeparatorChange` | `(useSeparator: boolean) => void` | — (required) | Called when the 1000-separator checkbox changes |
31
+ | `onCompactNumbersChange` | `(useCompact: boolean) => void` | — (required) | Called when the compact numbers checkbox changes |
32
+ | `onFixedLengthChange` | `(fixedLength: number) => void` | — (required) | Called when decimal places are incremented/decremented |
33
+ | `onSetDefault` | `() => void` | — | If provided, renders a "Set default" footer button |
34
+ | `onFormattedValueChange` | `(formattedValue: string) => void` | — | Called (via `useEffect`) whenever the formatted display value changes |
35
+ | `text` | `Partial<FormatPickerTexts>` | see defaults below | Override any label text |
36
+ | `currenciesConfig` | `CurrencyConfig[]` | USD, EUR, PLN, JPY | Custom currency list shown in the cash dropdown |
37
+ | `buttonType` | `string` | `'tertiary'` | Ant Design / DS button type for the trigger button |
38
+ | `disabled` | `boolean` | — | Disables the trigger button and all controls inside the panel |
39
+ | `maxFixedLength` | `number` | — | Upper bound for decimal places (increment is blocked when reached) |
40
+
41
+ ### `FormatPickerProps`
42
+
43
+ Type re-export for consumers that need to type props.
44
+
45
+ ### `FormattingValue`
46
+
47
+ Shape of the `format` prop:
48
+
49
+ | Field | Type | Description |
50
+ |-------|------|-------------|
51
+ | `dataFormat` | `FormattingDataFormat` | `'numeric' \| 'percent' \| 'cash'` |
52
+ | `currency` | `CurrencyType` | Currency code string (e.g. `'USD'`) |
53
+ | `useSeparator` | `boolean` | Whether to use 1000 grouping separator |
54
+ | `compactNumbers` | `boolean` | Whether to use compact notation |
55
+ | `fixedLength` | `number` | Number of decimal places |
56
+
57
+ ### `FormatPickerTexts` (i18n defaults)
58
+
59
+ All fields are `ReactNode` except `currencyMenuItemPrefix` which is `string`.
60
+
61
+ | Key | Default |
62
+ |-----|---------|
63
+ | `header` | `'Number format'` |
64
+ | `format` | `'Format'` |
65
+ | `numeric` | `'Numeric'` |
66
+ | `cash` | `'Cash'` |
67
+ | `percentage` | `'Percentage'` |
68
+ | `setDefault` | `'Set default'` |
69
+ | `useSeparator` | `'Use 1000 separator'` |
70
+ | `compactNumbers` | `'Use compact numbers'` |
71
+ | `currencyMenuItemPrefix` | `'e.g.'` |
72
+
73
+ ### `CurrencyConfig`
74
+
75
+ `{ currency: CurrencyType; label: string }` — shape of entries in `currenciesConfig`.
76
+
77
+ ## Usage patterns
78
+
79
+ ```tsx
80
+ import FormatPicker from '@synerise/ds-format-picker';
81
+ import type { FormattingValue } from '@synerise/ds-format-picker';
82
+
83
+ const [format, setFormat] = useState<FormattingValue>({
84
+ dataFormat: 'numeric',
85
+ currency: 'USD',
86
+ useSeparator: false,
87
+ compactNumbers: false,
88
+ fixedLength: 2,
89
+ });
90
+
91
+ <FormatPicker
92
+ format={format}
93
+ value={19000.7}
94
+ onDataFormatChange={(dataFormat) => setFormat((f) => ({ ..f, dataFormat }))}
95
+ onCurrencyChange={(currency) => setFormat((f) => ({ ..f, currency }))}
96
+ onUseSeparatorChange={(useSeparator) => setFormat((f) => ({ ..f, useSeparator }))}
97
+ onCompactNumbersChange={(compactNumbers) => setFormat((f) => ({ ..f, compactNumbers }))}
98
+ onFixedLengthChange={(fixedLength) => setFormat((f) => ({ ..f, fixedLength }))}
99
+ onSetDefault={() => setFormat(defaultFormat)}
100
+ />
101
+ ```
102
+
103
+ ## Styling
104
+
105
+ `FormatSettings.styles.ts` — all styles for the dropdown panel. Uses `theme.palette` tokens (`white`, `grey-050`, `grey-100`, `grey-300`, `grey-500`, `grey-700`). Hardcoded `min-width: 268px` for the panel container.
106
+
107
+ > **Note:** `SuffixWrapper` is imported from `@synerise/ds-list-item/dist/components/Text/Text.styles` — a fragile deep/internal path.
108
+
109
+ ## Key dependencies
110
+
111
+ - `@synerise/ds-dropdown` — wraps the whole component as a click-triggered dropdown overlay
112
+ - `@synerise/ds-core` (`useDataFormat`) — `formatValue` utility that applies `NumberToFormatOptions`; requires `DSProvider` in the tree
113
+ - `react-intl` — i18n for all labels; requires `IntlProvider` (supplied by `DSProvider`)
114
+ - `@synerise/ds-button` + `@synerise/ds-button-group` — format-type buttons and decimal-place controls
115
+ - `@synerise/ds-checkbox` — separator and compact-numbers checkboxes
116
+ - `@synerise/ds-radio` — wraps the button-group for format-type selection (value binding)
117
+ - `@synerise/ds-list-item` — currency dropdown rows
118
+
119
+ ## Implementation notes
120
+
121
+ - **Trigger button label** is always `"{texts.format} {getFormattedValue()}"` — e.g. `"Format 19,000.70"`. The `value` prop is purely for display.
122
+ - **`onFormattedValueChange`** fires via `useEffect` on every change to `format` or `value`; it is not fired on user interaction directly.
123
+ - **`onSetDefault` is optional** — when omitted, the footer (grey bar with "Set default" button) is not rendered at all.
124
+ - **`currenciesConfig` default** is `DEFAULT_CURRENCIES_CONFIG` defined in `FormatSettings.tsx`: USD, EUR, PLN, JPY. Not exported.
125
+ - **`CurrencyType` is typed as `string`** (not a union of specific codes). The README's `USD | EUR | PLN | JPY` is only the default config list, not a type constraint.
126
+ - **Filename typo** — the types file is `FomartPicker.types.ts` (missing `t`). The import in `index.ts` matches the typo, so it works, but it should be fixed.
127
+ - **Uses Vitest**.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-format-picker",
3
- "version": "1.1.45",
3
+ "version": "1.1.46",
4
4
  "description": "FormatPicker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -17,6 +17,7 @@
17
17
  "files": [
18
18
  "/dist",
19
19
  "CHANGELOG.md",
20
+ "CLAUDE.md",
20
21
  "README.md",
21
22
  "package.json",
22
23
  "LICENSE.md"
@@ -41,16 +42,16 @@
41
42
  ],
42
43
  "types": "dist/index.d.ts",
43
44
  "dependencies": {
44
- "@synerise/ds-button": "^1.5.34",
45
- "@synerise/ds-button-group": "^1.1.59",
46
- "@synerise/ds-checkbox": "^1.2.35",
47
- "@synerise/ds-dropdown": "^1.3.19",
48
- "@synerise/ds-icon": "^1.18.4",
49
- "@synerise/ds-list-item": "^1.6.1",
50
- "@synerise/ds-radio": "^1.1.17",
51
- "@synerise/ds-tooltip": "^1.5.3",
52
- "@synerise/ds-typography": "^1.1.26",
53
- "@synerise/ds-utils": "^1.10.1"
45
+ "@synerise/ds-button": "^1.5.35",
46
+ "@synerise/ds-button-group": "^1.1.60",
47
+ "@synerise/ds-checkbox": "^1.2.36",
48
+ "@synerise/ds-dropdown": "^1.3.20",
49
+ "@synerise/ds-icon": "^1.18.5",
50
+ "@synerise/ds-list-item": "^1.6.2",
51
+ "@synerise/ds-radio": "^1.1.18",
52
+ "@synerise/ds-tooltip": "^1.5.4",
53
+ "@synerise/ds-typography": "^1.1.27",
54
+ "@synerise/ds-utils": "^1.10.2"
54
55
  },
55
56
  "peerDependencies": {
56
57
  "@synerise/ds-core": "*",
@@ -59,5 +60,5 @@
59
60
  "styled-components": "^5.3.3",
60
61
  "vitest": "4"
61
62
  },
62
- "gitHead": "a81ab6519d49a3dea9c0cfebcdc9104cbb4f4226"
63
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
63
64
  }