@layerfi/components 0.1.16 → 0.1.18
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/LICENSE +21 -0
- package/README.md +278 -51
- package/dist/esm/index.js +1558 -943
- package/dist/esm/index.js.map +4 -4
- package/dist/index.d.ts +198 -36
- package/dist/index.js +1624 -1004
- package/dist/index.js.map +4 -4
- package/dist/styles/index.css +281 -26
- package/dist/styles/index.css.map +2 -2
- package/package.json +4 -2
- package/.idea/layer-react.iml +0 -9
- package/.idea/misc.xml +0 -6
- package/.idea/modules.xml +0 -8
- package/.idea/vcs.xml +0 -6
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Layer Financial
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,70 +1,79 @@
|
|
|
1
1
|
# Layer Financial React Components
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
Layer's embeddable React component library provides an out of the box accounting experience. This project emphasizes composability and brandability, allowing you to
|
|
4
|
+
|
|
5
|
+
1. Use full page layouts we've already tested and used _or_ layout individual components however you choose.
|
|
6
|
+
2. Brand components with your company colors, fonts, and more.
|
|
7
|
+
|
|
8
|
+
All you need to get started is sandbox development credentials - reach out [here](https://www.layerfi.com/#contact-sale) if you don't have those yet!
|
|
9
|
+
|
|
10
|
+
#### Related links
|
|
11
|
+
|
|
12
|
+
- Layer home: https://www.layerfi.com
|
|
13
|
+
- Documentation: https://docs.layerfi.com/introduction
|
|
14
|
+
- NPM: https://www.npmjs.com/package/@layerfi/components
|
|
5
15
|
|
|
6
16
|
<br />
|
|
7
17
|
|
|
8
18
|
## Installation
|
|
9
19
|
|
|
10
|
-
```
|
|
20
|
+
```ts
|
|
11
21
|
npm install --save @layerfi/components
|
|
12
22
|
```
|
|
13
23
|
|
|
14
24
|
or
|
|
15
25
|
|
|
16
|
-
```
|
|
26
|
+
```ts
|
|
17
27
|
yarn install @layerfi/components
|
|
18
28
|
```
|
|
19
29
|
|
|
20
|
-
<br />
|
|
21
|
-
|
|
22
30
|
## Usage
|
|
23
31
|
|
|
24
|
-
Nest the components you want to use under the `LayerProvider` component. You
|
|
25
|
-
need to provide the component with a few props, though:
|
|
32
|
+
Nest the components you want to use under the `LayerProvider` component. You should provide the component with a few props:
|
|
26
33
|
|
|
27
|
-
- `appId` Your appId
|
|
28
|
-
- `appSecret` A secret for signing in to Layer
|
|
29
34
|
- `businessId` The ID of the business whose infomation you're showing.
|
|
30
|
-
- `
|
|
31
|
-
- `envronment` (Optional, defaults to "production") the Layer environment you're
|
|
32
|
-
attempting to access ["staging" or "production"]
|
|
35
|
+
- `businessAccessToken` Temporary authentication token scoped to this specific business. See the [getting started guide](https://docs.layerfi.com/guides/embedded-components#backend-setup) for how to fetch these tokens on your backend.
|
|
36
|
+
- `envronment` (Optional, defaults to "production") the Layer environment you're attempting to access [`staging` or `production`]
|
|
33
37
|
- `theme` (Optional) to customize the look of components
|
|
34
38
|
|
|
39
|
+
```tsx
|
|
40
|
+
import { LayerProvider } from "@layerfi/components";
|
|
41
|
+
...
|
|
42
|
+
<LayerProvider
|
|
43
|
+
businesId="..."
|
|
44
|
+
businessAccessToken="..."
|
|
45
|
+
environment={'staging'}
|
|
46
|
+
>
|
|
47
|
+
{...}
|
|
48
|
+
</LayerProvider>
|
|
35
49
|
```
|
|
50
|
+
|
|
51
|
+
#### Development
|
|
52
|
+
|
|
53
|
+
In development, it's often convenient to avoid fetching business-scoped tokens. You may find it more convenient to set your sandbox `clientId` and `clientSecret` directly, which will give you access to any business in your sandbox account.
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
36
56
|
import { LayerProvider } from "@layerfi/components";
|
|
37
57
|
...
|
|
38
58
|
<LayerProvider
|
|
59
|
+
businesId="..."
|
|
39
60
|
appId="..."
|
|
40
61
|
appSecret="..."
|
|
41
|
-
|
|
42
|
-
clientId="..."
|
|
62
|
+
environment={'staging'}
|
|
43
63
|
>
|
|
44
64
|
{...}
|
|
45
65
|
</LayerProvider>
|
|
46
66
|
```
|
|
47
67
|
|
|
48
|
-
<br />
|
|
49
68
|
<br />
|
|
50
69
|
|
|
51
70
|
## Components
|
|
52
71
|
|
|
53
|
-
### Bank Transactions
|
|
54
|
-
|
|
55
|
-
```
|
|
56
|
-
import { BankTransactions } from "@layerfi/components";
|
|
57
|
-
…
|
|
58
|
-
<BankTransactions />
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
<br />
|
|
62
|
-
|
|
63
72
|
### Profit And Loss
|
|
64
73
|
|
|
65
|
-
|
|
74
|
+
|
|
66
75
|
|
|
67
|
-
```
|
|
76
|
+
```tsx
|
|
68
77
|
import { ProfitAndLoss } from "@layerfi/components";
|
|
69
78
|
…
|
|
70
79
|
<ProfitAndLoss>
|
|
@@ -75,38 +84,71 @@ import { ProfitAndLoss } from "@layerfi/components";
|
|
|
75
84
|
</ProfitAndLoss>
|
|
76
85
|
```
|
|
77
86
|
|
|
78
|
-
|
|
87
|
+
### Linked Accounts
|
|
88
|
+
|
|
89
|
+
Displays all accounts connected to Layer including embedded banking, Plaid, and custom accounts.
|
|
79
90
|
|
|
80
|
-
|
|
91
|
+
|
|
81
92
|
|
|
93
|
+
```tsx
|
|
94
|
+
<LinkedAccounts
|
|
95
|
+
elevated={elevatedLinkedAccounts}
|
|
96
|
+
showLedgerBalance={showLedgerBalance}
|
|
97
|
+
/>
|
|
82
98
|
```
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
99
|
+
|
|
100
|
+
### Transaction categorization
|
|
101
|
+
|
|
102
|
+
The transaction categorization component handles displaying both categorized transactions and the workflow for categorizing new transactions as they are imported into Layer.
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
<BankTransactions asWidget />
|
|
86
108
|
```
|
|
87
109
|
|
|
88
|
-
|
|
89
|
-
<br />
|
|
110
|
+
### Reports
|
|
90
111
|
|
|
91
|
-
|
|
112
|
+
The reports component contains multiple accounting reports and tables, including the profit and loss table.
|
|
92
113
|
|
|
93
|
-
|
|
114
|
+
|
|
94
115
|
|
|
95
|
-
|
|
96
|
-
- setting CSS variables,
|
|
97
|
-
- overwriting CSS classes.
|
|
116
|
+
These can be embedded individually
|
|
98
117
|
|
|
99
|
-
|
|
118
|
+
```tsx
|
|
119
|
+
<ProfitAndLoss.DetailedCharts />
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Or as a prebuilt panel
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
<Reports />
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Chart of Accounts
|
|
129
|
+
|
|
130
|
+
The chart of accounts gives direct read and write access into the double entry general ledger underlying Layer's data.
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
<ChartOfAccounts asWidget withDateControl withExpandAllButton />
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## Styling
|
|
137
|
+
|
|
138
|
+
You have a range of options for custom styling. In order of most simple to most control:
|
|
139
|
+
|
|
140
|
+
1. Using the `theme` attribute of `LayerProvider`,
|
|
141
|
+
2. Setting CSS variables,
|
|
142
|
+
3. Overwriting CSS classes.
|
|
100
143
|
|
|
101
144
|
### Using `theme` attribute
|
|
102
145
|
|
|
146
|
+
The theme attribute allows you to set parimary light and dark colors. The component will then use your primary colors to create a cohesive color palette across all components. We won't add any new colors, just different lightness of your brand colors for accents where helpful, e.g. hover states.
|
|
147
|
+
|
|
103
148
|
```ts
|
|
104
149
|
<LayerProvider
|
|
105
150
|
businessId="..."
|
|
106
151
|
environment="..."
|
|
107
|
-
appId="..."
|
|
108
|
-
clientId="..."
|
|
109
|
-
appSecret="..."
|
|
110
152
|
theme={{
|
|
111
153
|
colors: {
|
|
112
154
|
// Base colors:
|
|
@@ -121,7 +163,7 @@ Components can be customized:
|
|
|
121
163
|
|
|
122
164
|
The `colors` can be defined in `HSL`, `RGB` or `HEX`:
|
|
123
165
|
|
|
124
|
-
```
|
|
166
|
+
```tsx
|
|
125
167
|
// HSL:
|
|
126
168
|
colors: {
|
|
127
169
|
dark: { h: '28', s: '26%', l: '11%' },
|
|
@@ -141,8 +183,6 @@ colors: {
|
|
|
141
183
|
},
|
|
142
184
|
```
|
|
143
185
|
|
|
144
|
-
<br />
|
|
145
|
-
|
|
146
186
|
### CSS variables
|
|
147
187
|
|
|
148
188
|
```css
|
|
@@ -155,13 +195,200 @@ body .Layer__component {
|
|
|
155
195
|
}
|
|
156
196
|
```
|
|
157
197
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
198
|
+
The full list of variables is listed in the [`variables.css`](https://github.com/Layer-Fi/layer-react/blob/main/src/styles/variables.scss) file and contains:
|
|
199
|
+
|
|
200
|
+
```scss
|
|
201
|
+
// 1. BASE VARIABLES:
|
|
202
|
+
--color-black: #1a1a1a;
|
|
203
|
+
--color-white: white;
|
|
204
|
+
|
|
205
|
+
--color-info-success: hsl(145, 45%, 42%);
|
|
206
|
+
--color-info-success-bg: hsl(145, 59%, 86%);
|
|
207
|
+
--color-info-success-fg: hsl(145, 63%, 29%);
|
|
208
|
+
|
|
209
|
+
--color-info-warning: hsl(43, 100%, 44%);
|
|
210
|
+
--color-info-warning-bg: hsl(43, 100%, 84%);
|
|
211
|
+
--color-info-warning-fg: hsl(43, 88%, 26%);
|
|
212
|
+
|
|
213
|
+
--color-info-error: hsl(0 76% 50%);
|
|
214
|
+
--color-info-error-bg: hsl(0 83% 86%);
|
|
215
|
+
--color-info-error-fg: hsl(0 88% 32%);
|
|
216
|
+
|
|
217
|
+
--color-dark-h: 0;
|
|
218
|
+
--color-dark-s: 0%;
|
|
219
|
+
--color-dark-l: 7%;
|
|
220
|
+
--color-dark: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l));
|
|
221
|
+
|
|
222
|
+
--color-light-h: 0;
|
|
223
|
+
--color-light-s: 0%;
|
|
224
|
+
--color-light-l: 90%;
|
|
225
|
+
--color-light: hsl(
|
|
226
|
+
var(--color-light-h) var(--color-light-s) var(--color-light-l)
|
|
227
|
+
);
|
|
228
|
+
|
|
229
|
+
--color-base-0: #fff;
|
|
230
|
+
--color-base-50: hsl(var(--color-dark-h) 1% 98%);
|
|
231
|
+
--color-base-100: hsl(var(--color-dark-h) 1% 96%);
|
|
232
|
+
--color-base-200: hsl(var(--color-dark-h) 1% 94%);
|
|
233
|
+
--color-base-300: hsl(var(--color-dark-h) 2% 92%);
|
|
234
|
+
--color-base-400: var(--color-light);
|
|
235
|
+
--color-base-500: hsl(var(--color-dark-h) 2% 53%);
|
|
236
|
+
--color-base-600: hsl(var(--color-dark-h) 7% 40%);
|
|
237
|
+
--color-base-700: hsl(var(--color-dark-h) 9% 27%);
|
|
238
|
+
--color-base-800: hsl(var(--color-dark-h) 12% 20%);
|
|
239
|
+
--color-base-900: var(--color-dark);
|
|
240
|
+
--color-base-1000: hsl(var(--color-dark-h) 20% 7%);
|
|
241
|
+
|
|
242
|
+
--max-component-width: 1408px;
|
|
243
|
+
|
|
244
|
+
--base-transparent-1: hsla(220, 43%, 11%, 0.01);
|
|
245
|
+
|
|
246
|
+
--base-transparent-2: hsla(220, 43%, 11%, 0.02);
|
|
247
|
+
|
|
248
|
+
--base-transparent-4: hsla(
|
|
249
|
+
var(--color-dark-h),
|
|
250
|
+
var(--color-dark-s),
|
|
251
|
+
var(--color-dark-l),
|
|
252
|
+
0.04
|
|
253
|
+
);
|
|
254
|
+
--base-transparent-5: hsla(
|
|
255
|
+
var(--color-dark-h),
|
|
256
|
+
var(--color-dark-s),
|
|
257
|
+
var(--color-dark-l),
|
|
258
|
+
0.05
|
|
259
|
+
);
|
|
260
|
+
--base-transparent-6: hsla(
|
|
261
|
+
var(--color-dark-h),
|
|
262
|
+
var(--color-dark-s),
|
|
263
|
+
var(--color-dark-l),
|
|
264
|
+
0.06
|
|
265
|
+
);
|
|
266
|
+
--base-transparent-8: hsla(
|
|
267
|
+
var(--color-dark-h),
|
|
268
|
+
var(--color-dark-s),
|
|
269
|
+
var(--color-dark-l),
|
|
270
|
+
0.08
|
|
271
|
+
);
|
|
272
|
+
--base-transparent-10: hsla(
|
|
273
|
+
var(--color-dark-h),
|
|
274
|
+
var(--color-dark-s),
|
|
275
|
+
var(--color-dark-l),
|
|
276
|
+
0.1
|
|
277
|
+
);
|
|
278
|
+
--base-transparent-12: hsla(
|
|
279
|
+
var(--color-dark-h),
|
|
280
|
+
var(--color-dark-s),
|
|
281
|
+
var(--color-dark-l),
|
|
282
|
+
0.12
|
|
283
|
+
);
|
|
284
|
+
|
|
285
|
+
// 2. BASE CUSTOMIZATION
|
|
286
|
+
--color-primary: var(--color-dark);
|
|
287
|
+
--color-accent: var(--color-light);
|
|
288
|
+
--color-secondary: var(--color-base);
|
|
289
|
+
--color-success: var(--color-info-success);
|
|
290
|
+
--color-danger: var(--color-info-error);
|
|
291
|
+
--color-danger-dark: hsl(349, 30%, 30%);
|
|
292
|
+
--color-danger-light: hsla(
|
|
293
|
+
var(--color-info-error-h),
|
|
294
|
+
var(--color-info-error-s),
|
|
295
|
+
var(--color-info-error-l),
|
|
296
|
+
0.4
|
|
297
|
+
);
|
|
298
|
+
--text-color-primary: var(--color-dark);
|
|
299
|
+
--text-color-secondary: var(--color-base-600);
|
|
300
|
+
--bg-element-focus: var(--color-base-50);
|
|
301
|
+
|
|
302
|
+
// 3. EXTENDED CUSTOMIZATION
|
|
303
|
+
--font-family: 'InterVariable', 'Inter', sans-serif;
|
|
304
|
+
--font-family-numeric: 'InterVariable', 'Inter', sans-serif;
|
|
305
|
+
--text-xs: 11px;
|
|
306
|
+
--text-sm: 12px;
|
|
307
|
+
--text-md: 14px;
|
|
308
|
+
--text-lg: 16px;
|
|
309
|
+
--text-heading: 24px;
|
|
310
|
+
--text-heading-sm: 16px;
|
|
311
|
+
--font-weight-normal: 460;
|
|
312
|
+
--font-weight-bold: 540;
|
|
313
|
+
--spacing-4xs: 2px;
|
|
314
|
+
--spacing-3xs: 4px;
|
|
315
|
+
--spacing-2xs: 6px;
|
|
316
|
+
--spacing-xs: 8px;
|
|
317
|
+
--spacing-sm: 12px;
|
|
318
|
+
--spacing-md: 16px;
|
|
319
|
+
--spacing-lm: 20px;
|
|
320
|
+
--spacing-lg: 24px;
|
|
321
|
+
--spacing-xl: 32px;
|
|
322
|
+
--spacing-2xl: 36px;
|
|
323
|
+
--spacing-3xl: 40px;
|
|
324
|
+
--spacing-5xl: 52px;
|
|
325
|
+
--bg-color: var(--color-white);
|
|
326
|
+
--border-color: var(--color-base-200);
|
|
327
|
+
--border-radius-4xs: 2px;
|
|
328
|
+
--border-radius-3xs: 4px;
|
|
329
|
+
--border-radius-2xs: 6px;
|
|
330
|
+
--border-radius-xs: 8px;
|
|
331
|
+
--border-radius-sm: 12px;
|
|
332
|
+
--border-radius: 16px;
|
|
333
|
+
--border-radius-5xl: 52px;
|
|
334
|
+
|
|
335
|
+
--text-color-transaction-credit: var(--color-info-success);
|
|
336
|
+
--text-color-varying-amount: var(--color-base-700);
|
|
337
|
+
|
|
338
|
+
--input-border-radius: var(--border-radius-2xs);
|
|
339
|
+
--input-font-size: var(--text-md);
|
|
340
|
+
--input-border-color: var(--color-base-300);
|
|
341
|
+
--input-placeholder-color: var(--color-base-500);
|
|
342
|
+
|
|
343
|
+
--label-color: var(--color-base-700);
|
|
344
|
+
|
|
345
|
+
--btn-font-size: var(--text-md);
|
|
346
|
+
--btn-border-radius: var(--border-radius-2xs);
|
|
347
|
+
--btn-color: var(--color-black);
|
|
348
|
+
--btn-bg-color: var(--color-white);
|
|
349
|
+
--btn-color-primary: var(--color-white);
|
|
350
|
+
--btn-bg-color-primary: var(--color-black);
|
|
351
|
+
--btn-color-hover: var(--color-white);
|
|
352
|
+
--btn-bg-color-hover: var(--color-primary);
|
|
353
|
+
--btn-color-icon: var(--color-black);
|
|
354
|
+
--btn-bg-color-icon: var(--color-base-50);
|
|
355
|
+
--btn-color-icon-hover: var(--color-primary);
|
|
356
|
+
--btn-bg-color-icon-hover: var(--color-accent);
|
|
357
|
+
--btn-secondary-color: var(--color-black);
|
|
358
|
+
--btn-secondary-bg-color: var(--color-white);
|
|
359
|
+
|
|
360
|
+
--badge-color: var(--color-base-900);
|
|
361
|
+
--badge-fg-color: var(--color-base-900);
|
|
362
|
+
--badge-bg-color: var(--color-base-400);
|
|
363
|
+
|
|
364
|
+
--badge-color-success: var(--color-info-success);
|
|
365
|
+
--badge-fg-color-success: var(--color-info-success-fg);
|
|
366
|
+
--badge-bg-color-success: var(--color-info-success-bg);
|
|
367
|
+
|
|
368
|
+
--badge-color-warning: var(--color-info-warning);
|
|
369
|
+
--badge-fg-color-warning: var(--color-info-warning-fg);
|
|
370
|
+
--badge-bg-color-warning: var(--color-info-warning-bg);
|
|
371
|
+
|
|
372
|
+
--badge-color-error: var(--color-info-error);
|
|
373
|
+
--badge-fg-color-error: var(--color-info-error-fg);
|
|
374
|
+
--badge-bg-color-error: var(--color-info-error-bg);
|
|
375
|
+
|
|
376
|
+
--badge-border-radius: var(--border-radius-sm);
|
|
377
|
+
|
|
378
|
+
--table-bg: var(--color-white);
|
|
379
|
+
|
|
380
|
+
--tooltip-color: var(--color-white);
|
|
381
|
+
--tooltip-bg-color: var(--color-base-800);
|
|
382
|
+
|
|
383
|
+
--bar-color-income: var(--color-base-400);
|
|
384
|
+
--bar-color-expenses: var(--color-base-900);
|
|
385
|
+
|
|
386
|
+
--chart-indicator-color: var(--color-base-700);
|
|
387
|
+
```
|
|
161
388
|
|
|
162
389
|
### CSS classes
|
|
163
390
|
|
|
164
|
-
For
|
|
391
|
+
For fine grained control, you can override specific classes. We recommend using your browser dev tools to find the component you want restyle and overriding that specific class with a higher priority CSS rule.
|
|
165
392
|
|
|
166
393
|
```css
|
|
167
394
|
body .Layer__table-cell-content {
|