@sb1/ffe-account-selector-react 100.8.2 → 100.9.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.
Files changed (2) hide show
  1. package/README.md +141 -20
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -1,42 +1,163 @@
1
1
  # @sb1/ffe-account-selector-react
2
2
 
3
- A combobox with autocomplete tailored for bank accounts.
3
+ ## Beskrivelse
4
4
 
5
- ## Install
5
+ Kombinasjonsboks med autofullføring for bankkontoer:
6
6
 
7
- ```
7
+ - `AccountSelector` - Velg en enkelt konto
8
+ - `AccountSelectorMulti` - Velg flere kontoer
9
+
10
+ ## Installasjon
11
+
12
+ ```bash
8
13
  npm install --save @sb1/ffe-account-selector-react
9
14
  ```
10
15
 
11
- ## Usage
12
-
13
- Full documentation on account selector usage is available at https://design.sparebank1.no/komponenter/kontovelger/.
16
+ ## Bruk
14
17
 
15
- This package depends on `@sb1/ffe-searchable-dropdown-react`.
16
- Make sure you import the less-files.
18
+ Dokumentasjon: https://sparebank1.github.io/designsystem/
17
19
 
18
- For styling the account-selector use:
20
+ Importer styling:
19
21
 
20
22
  ```css
21
- @import 'path/to/node_modules/@sb1/ffe-account-selector-react/less/ffe-account-selector';
23
+ @import '@sb1/ffe-account-selector-react/less/ffe-account-selector';
24
+ /* eller kompilert CSS: */
25
+ @import '@sb1/ffe-account-selector-react/css/ffe-account-selector.css';
22
26
  ```
23
27
 
24
- ### Importing compiled CSS
28
+ ## Eksempler
25
29
 
26
- If your project does not use Less, you can import the compiled styling:
30
+ ### AccountSelector (velg en konto)
27
31
 
28
- ```css
29
- @import '~@sb1/ffe-account-selector-react/css/ffe-account-selector.css';
32
+ ```tsx
33
+ import { useState } from 'react';
34
+ import { AccountSelector } from '@sb1/ffe-account-selector-react';
35
+ import { InputGroup } from '@sb1/ffe-form-react';
36
+
37
+ function MyComponent() {
38
+ const [selectedAccount, setSelectedAccount] = useState<
39
+ Account | undefined
40
+ >();
41
+
42
+ const accounts: Account[] = [
43
+ {
44
+ accountNumber: '12345678901',
45
+ name: 'Brukskonto',
46
+ balance: 1234.56,
47
+ currencyCode: 'NOK',
48
+ },
49
+ {
50
+ accountNumber: '98765432109',
51
+ name: 'Sparekonto',
52
+ balance: 50000.0,
53
+ currencyCode: 'NOK',
54
+ },
55
+ ];
56
+
57
+ return (
58
+ <InputGroup label="Velg konto">
59
+ <AccountSelector
60
+ id="account-selector"
61
+ accounts={accounts}
62
+ selectedAccount={selectedAccount}
63
+ onAccountSelected={account => setSelectedAccount(account)}
64
+ onReset={() => setSelectedAccount(undefined)}
65
+ locale="nb"
66
+ showBalance={true}
67
+ allowCustomAccount={false}
68
+ />
69
+ </InputGroup>
70
+ );
71
+ }
30
72
  ```
31
73
 
32
- ## Development
74
+ ### AccountSelectorMulti (velg flere kontoer)
75
+
76
+ ```tsx
77
+ import { useState } from 'react';
78
+ import { AccountSelectorMulti } from '@sb1/ffe-account-selector-react';
79
+ import { InputGroup } from '@sb1/ffe-form-react';
80
+
81
+ function MyComponent() {
82
+ const [selectedAccounts, setSelectedAccounts] = useState<Account[]>([]);
83
+
84
+ return (
85
+ <InputGroup label="Velg kontoer">
86
+ <AccountSelectorMulti
87
+ id="account-selector-multi"
88
+ accounts={accounts}
89
+ selectedAccounts={selectedAccounts}
90
+ onChange={(account, actionType) => {
91
+ if (actionType === 'selected') {
92
+ setSelectedAccounts(prev => [...prev, account]);
93
+ } else {
94
+ setSelectedAccounts(prev =>
95
+ prev.filter(
96
+ a => a.accountNumber !== account.accountNumber,
97
+ ),
98
+ );
99
+ }
100
+ }}
101
+ onReset={() => setSelectedAccounts([])}
102
+ locale="nb"
103
+ />
104
+ </InputGroup>
105
+ );
106
+ }
107
+ ```
108
+
109
+ ### Egendefinert optionBody
110
+
111
+ ```tsx
112
+ const CustomOptionBody = ({
113
+ item,
114
+ isHighlighted,
115
+ }: {
116
+ item: Account;
117
+ isHighlighted: boolean;
118
+ }) => (
119
+ <div
120
+ style={{
121
+ padding: '8px',
122
+ background: isHighlighted ? '#f0f0f0' : 'white',
123
+ }}
124
+ >
125
+ <div>{item.name}</div>
126
+ <div style={{ display: 'flex', justifyContent: 'space-between' }}>
127
+ <span>{item.accountNumber}</span>
128
+ <span>{item.balance} kr</span>
129
+ </div>
130
+ </div>
131
+ );
132
+
133
+ <AccountSelector
134
+ id="account-selector"
135
+ accounts={accounts}
136
+ selectedAccount={selectedAccount}
137
+ onAccountSelected={setSelectedAccount}
138
+ onReset={() => setSelectedAccount(undefined)}
139
+ optionBody={CustomOptionBody}
140
+ />;
141
+ ```
142
+
143
+ ### Egendefinert displayAttribute med generics
144
+
145
+ ```tsx
146
+ interface PrettyAccount extends Account {
147
+ prettyName: string;
148
+ }
149
+
150
+ <AccountSelector<PrettyAccount>
151
+ accounts={prettyAccounts}
152
+ displayAttribute="prettyName"
153
+ // ... andre obligatoriske props
154
+ />;
155
+ ```
33
156
 
34
- To start a local development server, run the following from the designsystem root folder:
157
+ ## Utvikling
35
158
 
36
159
  ```bash
37
- npm install
38
- npm run build
39
- npm start
160
+ npm install && npm run build && npm start
40
161
  ```
41
162
 
42
- Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
163
+ Storybook kjorer pa http://localhost:6006/.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-account-selector-react",
3
- "version": "100.8.2",
3
+ "version": "100.9.0",
4
4
  "description": "Selector for bank accounts with autocomplete.",
5
5
  "keywords": [
6
6
  "ffe"
@@ -30,13 +30,13 @@
30
30
  "test:watch": "ffe-buildtool jest --watch"
31
31
  },
32
32
  "dependencies": {
33
- "@sb1/ffe-formatters": "^100.8.2",
34
- "@sb1/ffe-icons-react": "^100.8.2",
35
- "@sb1/ffe-searchable-dropdown-react": "^100.8.2",
33
+ "@sb1/ffe-formatters": "^100.9.0",
34
+ "@sb1/ffe-icons-react": "^100.9.0",
35
+ "@sb1/ffe-searchable-dropdown-react": "^100.9.0",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
- "@sb1/ffe-buildtool": "^100.8.2",
39
+ "@sb1/ffe-buildtool": "^100.9.0",
40
40
  "eslint": "^9.22.0",
41
41
  "react": "^18.2.0",
42
42
  "react-dom": "^18.2.0"
@@ -47,5 +47,5 @@
47
47
  "publishConfig": {
48
48
  "access": "public"
49
49
  },
50
- "gitHead": "50fbbbdb2023a60add7158e8c5bd6443c4f9c95e"
50
+ "gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
51
51
  }