@layerfi/components 0.1.15 → 0.1.17
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 +264 -47
- package/dist/esm/index.js +3572 -1471
- package/dist/esm/index.js.map +4 -4
- package/dist/index.d.ts +832 -112
- package/dist/index.js +3573 -1473
- package/dist/index.js.map +4 -4
- package/dist/styles/index.css +663 -12
- package/dist/styles/index.css.map +3 -3
- package/image.png +0 -0
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -17,54 +17,53 @@ or
|
|
|
17
17
|
yarn install @layerfi/components
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
<br />
|
|
21
|
-
|
|
22
20
|
## Usage
|
|
23
21
|
|
|
24
|
-
Nest the components you want to use under the `LayerProvider` component. You
|
|
25
|
-
need to provide the component with a few props, though:
|
|
22
|
+
Nest the components you want to use under the `LayerProvider` component. You should provide the component with a few props:
|
|
26
23
|
|
|
27
|
-
- `appId` Your appId
|
|
28
|
-
- `appSecret` A secret for signing in to Layer
|
|
29
24
|
- `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"]
|
|
25
|
+
- `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.
|
|
26
|
+
- `envronment` (Optional, defaults to "production") the Layer environment you're attempting to access [`staging` or `production`]
|
|
33
27
|
- `theme` (Optional) to customize the look of components
|
|
34
28
|
|
|
29
|
+
```tsx
|
|
30
|
+
import { LayerProvider } from "@layerfi/components";
|
|
31
|
+
...
|
|
32
|
+
<LayerProvider
|
|
33
|
+
businesId="..."
|
|
34
|
+
businessAccessToken="..."
|
|
35
|
+
environment={'staging'}
|
|
36
|
+
>
|
|
37
|
+
{...}
|
|
38
|
+
</LayerProvider>
|
|
35
39
|
```
|
|
40
|
+
|
|
41
|
+
#### Development
|
|
42
|
+
|
|
43
|
+
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.
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
36
46
|
import { LayerProvider } from "@layerfi/components";
|
|
37
47
|
...
|
|
38
48
|
<LayerProvider
|
|
49
|
+
businesId="..."
|
|
39
50
|
appId="..."
|
|
40
51
|
appSecret="..."
|
|
41
|
-
|
|
42
|
-
clientId="..."
|
|
52
|
+
environment={'staging'}
|
|
43
53
|
>
|
|
44
54
|
{...}
|
|
45
55
|
</LayerProvider>
|
|
46
56
|
```
|
|
47
57
|
|
|
48
|
-
<br />
|
|
49
58
|
<br />
|
|
50
59
|
|
|
51
60
|
## Components
|
|
52
61
|
|
|
53
|
-
### Bank Transactions
|
|
54
|
-
|
|
55
|
-
```
|
|
56
|
-
import { BankTransactions } from "@layerfi/components";
|
|
57
|
-
…
|
|
58
|
-
<BankTransactions />
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
<br />
|
|
62
|
-
|
|
63
62
|
### Profit And Loss
|
|
64
63
|
|
|
65
|
-
|
|
64
|
+
|
|
66
65
|
|
|
67
|
-
```
|
|
66
|
+
```tsx
|
|
68
67
|
import { ProfitAndLoss } from "@layerfi/components";
|
|
69
68
|
…
|
|
70
69
|
<ProfitAndLoss>
|
|
@@ -75,38 +74,71 @@ import { ProfitAndLoss } from "@layerfi/components";
|
|
|
75
74
|
</ProfitAndLoss>
|
|
76
75
|
```
|
|
77
76
|
|
|
78
|
-
|
|
77
|
+
### Linked Accounts
|
|
78
|
+
|
|
79
|
+
Displays all accounts connected to Layer including embedded banking, Plaid, and custom accounts.
|
|
79
80
|
|
|
80
|
-
|
|
81
|
+
|
|
81
82
|
|
|
83
|
+
```tsx
|
|
84
|
+
<LinkedAccounts
|
|
85
|
+
elevated={elevatedLinkedAccounts}
|
|
86
|
+
showLedgerBalance={showLedgerBalance}
|
|
87
|
+
/>
|
|
82
88
|
```
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
89
|
+
|
|
90
|
+
### Transaction categorization
|
|
91
|
+
|
|
92
|
+
The transaction categorization component handles displaying both categorized transactions and the workflow for categorizing new transactions as they are imported into Layer.
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
<BankTransactions asWidget />
|
|
86
98
|
```
|
|
87
99
|
|
|
88
|
-
|
|
89
|
-
<br />
|
|
100
|
+
### Reports
|
|
90
101
|
|
|
91
|
-
|
|
102
|
+
The reports component contains multiple accounting reports and tables, including the profit and loss table.
|
|
92
103
|
|
|
93
|
-
|
|
104
|
+
|
|
94
105
|
|
|
95
|
-
|
|
96
|
-
- setting CSS variables,
|
|
97
|
-
- overwriting CSS classes.
|
|
106
|
+
These can be embedded individually
|
|
98
107
|
|
|
99
|
-
|
|
108
|
+
```tsx
|
|
109
|
+
<ProfitAndLoss.DetailedCharts />
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Or as a prebuilt panel
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
<Reports />
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Chart of Accounts
|
|
119
|
+
|
|
120
|
+
The chart of accounts gives direct read and write access into the double entry general ledger underlying Layer's data.
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
<ChartOfAccounts asWidget withDateControl withExpandAllButton />
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Styling
|
|
127
|
+
|
|
128
|
+
You have a range of options for custom styling. In order of most simple to most control:
|
|
129
|
+
|
|
130
|
+
1. Using the `theme` attribute of `LayerProvider`,
|
|
131
|
+
2. Setting CSS variables,
|
|
132
|
+
3. Overwriting CSS classes.
|
|
100
133
|
|
|
101
134
|
### Using `theme` attribute
|
|
102
135
|
|
|
136
|
+
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.
|
|
137
|
+
|
|
103
138
|
```ts
|
|
104
139
|
<LayerProvider
|
|
105
140
|
businessId="..."
|
|
106
141
|
environment="..."
|
|
107
|
-
appId="..."
|
|
108
|
-
clientId="..."
|
|
109
|
-
appSecret="..."
|
|
110
142
|
theme={{
|
|
111
143
|
colors: {
|
|
112
144
|
// Base colors:
|
|
@@ -121,7 +153,7 @@ Components can be customized:
|
|
|
121
153
|
|
|
122
154
|
The `colors` can be defined in `HSL`, `RGB` or `HEX`:
|
|
123
155
|
|
|
124
|
-
```
|
|
156
|
+
```tsx
|
|
125
157
|
// HSL:
|
|
126
158
|
colors: {
|
|
127
159
|
dark: { h: '28', s: '26%', l: '11%' },
|
|
@@ -141,8 +173,6 @@ colors: {
|
|
|
141
173
|
},
|
|
142
174
|
```
|
|
143
175
|
|
|
144
|
-
<br />
|
|
145
|
-
|
|
146
176
|
### CSS variables
|
|
147
177
|
|
|
148
178
|
```css
|
|
@@ -155,13 +185,200 @@ body .Layer__component {
|
|
|
155
185
|
}
|
|
156
186
|
```
|
|
157
187
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
188
|
+
The full list of variables is listed in the `variables.css file` and contains:
|
|
189
|
+
|
|
190
|
+
```scss
|
|
191
|
+
// 1. BASE VARIABLES:
|
|
192
|
+
--color-black: #1a1a1a;
|
|
193
|
+
--color-white: white;
|
|
194
|
+
|
|
195
|
+
--color-info-success: hsl(145, 45%, 42%);
|
|
196
|
+
--color-info-success-bg: hsl(145, 59%, 86%);
|
|
197
|
+
--color-info-success-fg: hsl(145, 63%, 29%);
|
|
198
|
+
|
|
199
|
+
--color-info-warning: hsl(43, 100%, 44%);
|
|
200
|
+
--color-info-warning-bg: hsl(43, 100%, 84%);
|
|
201
|
+
--color-info-warning-fg: hsl(43, 88%, 26%);
|
|
202
|
+
|
|
203
|
+
--color-info-error: hsl(0 76% 50%);
|
|
204
|
+
--color-info-error-bg: hsl(0 83% 86%);
|
|
205
|
+
--color-info-error-fg: hsl(0 88% 32%);
|
|
206
|
+
|
|
207
|
+
--color-dark-h: 0;
|
|
208
|
+
--color-dark-s: 0%;
|
|
209
|
+
--color-dark-l: 7%;
|
|
210
|
+
--color-dark: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l));
|
|
211
|
+
|
|
212
|
+
--color-light-h: 0;
|
|
213
|
+
--color-light-s: 0%;
|
|
214
|
+
--color-light-l: 90%;
|
|
215
|
+
--color-light: hsl(
|
|
216
|
+
var(--color-light-h) var(--color-light-s) var(--color-light-l)
|
|
217
|
+
);
|
|
218
|
+
|
|
219
|
+
--color-base-0: #fff;
|
|
220
|
+
--color-base-50: hsl(var(--color-dark-h) 1% 98%);
|
|
221
|
+
--color-base-100: hsl(var(--color-dark-h) 1% 96%);
|
|
222
|
+
--color-base-200: hsl(var(--color-dark-h) 1% 94%);
|
|
223
|
+
--color-base-300: hsl(var(--color-dark-h) 2% 92%);
|
|
224
|
+
--color-base-400: var(--color-light);
|
|
225
|
+
--color-base-500: hsl(var(--color-dark-h) 2% 53%);
|
|
226
|
+
--color-base-600: hsl(var(--color-dark-h) 7% 40%);
|
|
227
|
+
--color-base-700: hsl(var(--color-dark-h) 9% 27%);
|
|
228
|
+
--color-base-800: hsl(var(--color-dark-h) 12% 20%);
|
|
229
|
+
--color-base-900: var(--color-dark);
|
|
230
|
+
--color-base-1000: hsl(var(--color-dark-h) 20% 7%);
|
|
231
|
+
|
|
232
|
+
--max-component-width: 1408px;
|
|
233
|
+
|
|
234
|
+
--base-transparent-1: hsla(220, 43%, 11%, 0.01);
|
|
235
|
+
|
|
236
|
+
--base-transparent-2: hsla(220, 43%, 11%, 0.02);
|
|
237
|
+
|
|
238
|
+
--base-transparent-4: hsla(
|
|
239
|
+
var(--color-dark-h),
|
|
240
|
+
var(--color-dark-s),
|
|
241
|
+
var(--color-dark-l),
|
|
242
|
+
0.04
|
|
243
|
+
);
|
|
244
|
+
--base-transparent-5: hsla(
|
|
245
|
+
var(--color-dark-h),
|
|
246
|
+
var(--color-dark-s),
|
|
247
|
+
var(--color-dark-l),
|
|
248
|
+
0.05
|
|
249
|
+
);
|
|
250
|
+
--base-transparent-6: hsla(
|
|
251
|
+
var(--color-dark-h),
|
|
252
|
+
var(--color-dark-s),
|
|
253
|
+
var(--color-dark-l),
|
|
254
|
+
0.06
|
|
255
|
+
);
|
|
256
|
+
--base-transparent-8: hsla(
|
|
257
|
+
var(--color-dark-h),
|
|
258
|
+
var(--color-dark-s),
|
|
259
|
+
var(--color-dark-l),
|
|
260
|
+
0.08
|
|
261
|
+
);
|
|
262
|
+
--base-transparent-10: hsla(
|
|
263
|
+
var(--color-dark-h),
|
|
264
|
+
var(--color-dark-s),
|
|
265
|
+
var(--color-dark-l),
|
|
266
|
+
0.1
|
|
267
|
+
);
|
|
268
|
+
--base-transparent-12: hsla(
|
|
269
|
+
var(--color-dark-h),
|
|
270
|
+
var(--color-dark-s),
|
|
271
|
+
var(--color-dark-l),
|
|
272
|
+
0.12
|
|
273
|
+
);
|
|
274
|
+
|
|
275
|
+
// 2. BASE CUSTOMIZATION
|
|
276
|
+
--color-primary: var(--color-dark);
|
|
277
|
+
--color-accent: var(--color-light);
|
|
278
|
+
--color-secondary: var(--color-base);
|
|
279
|
+
--color-success: var(--color-info-success);
|
|
280
|
+
--color-danger: var(--color-info-error);
|
|
281
|
+
--color-danger-dark: hsl(349, 30%, 30%);
|
|
282
|
+
--color-danger-light: hsla(
|
|
283
|
+
var(--color-info-error-h),
|
|
284
|
+
var(--color-info-error-s),
|
|
285
|
+
var(--color-info-error-l),
|
|
286
|
+
0.4
|
|
287
|
+
);
|
|
288
|
+
--text-color-primary: var(--color-dark);
|
|
289
|
+
--text-color-secondary: var(--color-base-600);
|
|
290
|
+
--bg-element-focus: var(--color-base-50);
|
|
291
|
+
|
|
292
|
+
// 3. EXTENDED CUSTOMIZATION
|
|
293
|
+
--font-family: 'InterVariable', 'Inter', sans-serif;
|
|
294
|
+
--font-family-numeric: 'InterVariable', 'Inter', sans-serif;
|
|
295
|
+
--text-xs: 11px;
|
|
296
|
+
--text-sm: 12px;
|
|
297
|
+
--text-md: 14px;
|
|
298
|
+
--text-lg: 16px;
|
|
299
|
+
--text-heading: 24px;
|
|
300
|
+
--text-heading-sm: 16px;
|
|
301
|
+
--font-weight-normal: 460;
|
|
302
|
+
--font-weight-bold: 540;
|
|
303
|
+
--spacing-4xs: 2px;
|
|
304
|
+
--spacing-3xs: 4px;
|
|
305
|
+
--spacing-2xs: 6px;
|
|
306
|
+
--spacing-xs: 8px;
|
|
307
|
+
--spacing-sm: 12px;
|
|
308
|
+
--spacing-md: 16px;
|
|
309
|
+
--spacing-lm: 20px;
|
|
310
|
+
--spacing-lg: 24px;
|
|
311
|
+
--spacing-xl: 32px;
|
|
312
|
+
--spacing-2xl: 36px;
|
|
313
|
+
--spacing-3xl: 40px;
|
|
314
|
+
--spacing-5xl: 52px;
|
|
315
|
+
--bg-color: var(--color-white);
|
|
316
|
+
--border-color: var(--color-base-200);
|
|
317
|
+
--border-radius-4xs: 2px;
|
|
318
|
+
--border-radius-3xs: 4px;
|
|
319
|
+
--border-radius-2xs: 6px;
|
|
320
|
+
--border-radius-xs: 8px;
|
|
321
|
+
--border-radius-sm: 12px;
|
|
322
|
+
--border-radius: 16px;
|
|
323
|
+
--border-radius-5xl: 52px;
|
|
324
|
+
|
|
325
|
+
--text-color-transaction-credit: var(--color-info-success);
|
|
326
|
+
--text-color-varying-amount: var(--color-base-700);
|
|
327
|
+
|
|
328
|
+
--input-border-radius: var(--border-radius-2xs);
|
|
329
|
+
--input-font-size: var(--text-md);
|
|
330
|
+
--input-border-color: var(--color-base-300);
|
|
331
|
+
--input-placeholder-color: var(--color-base-500);
|
|
332
|
+
|
|
333
|
+
--label-color: var(--color-base-700);
|
|
334
|
+
|
|
335
|
+
--btn-font-size: var(--text-md);
|
|
336
|
+
--btn-border-radius: var(--border-radius-2xs);
|
|
337
|
+
--btn-color: var(--color-black);
|
|
338
|
+
--btn-bg-color: var(--color-white);
|
|
339
|
+
--btn-color-primary: var(--color-white);
|
|
340
|
+
--btn-bg-color-primary: var(--color-black);
|
|
341
|
+
--btn-color-hover: var(--color-white);
|
|
342
|
+
--btn-bg-color-hover: var(--color-primary);
|
|
343
|
+
--btn-color-icon: var(--color-black);
|
|
344
|
+
--btn-bg-color-icon: var(--color-base-50);
|
|
345
|
+
--btn-color-icon-hover: var(--color-primary);
|
|
346
|
+
--btn-bg-color-icon-hover: var(--color-accent);
|
|
347
|
+
--btn-secondary-color: var(--color-black);
|
|
348
|
+
--btn-secondary-bg-color: var(--color-white);
|
|
349
|
+
|
|
350
|
+
--badge-color: var(--color-base-900);
|
|
351
|
+
--badge-fg-color: var(--color-base-900);
|
|
352
|
+
--badge-bg-color: var(--color-base-400);
|
|
353
|
+
|
|
354
|
+
--badge-color-success: var(--color-info-success);
|
|
355
|
+
--badge-fg-color-success: var(--color-info-success-fg);
|
|
356
|
+
--badge-bg-color-success: var(--color-info-success-bg);
|
|
357
|
+
|
|
358
|
+
--badge-color-warning: var(--color-info-warning);
|
|
359
|
+
--badge-fg-color-warning: var(--color-info-warning-fg);
|
|
360
|
+
--badge-bg-color-warning: var(--color-info-warning-bg);
|
|
361
|
+
|
|
362
|
+
--badge-color-error: var(--color-info-error);
|
|
363
|
+
--badge-fg-color-error: var(--color-info-error-fg);
|
|
364
|
+
--badge-bg-color-error: var(--color-info-error-bg);
|
|
365
|
+
|
|
366
|
+
--badge-border-radius: var(--border-radius-sm);
|
|
367
|
+
|
|
368
|
+
--table-bg: var(--color-white);
|
|
369
|
+
|
|
370
|
+
--tooltip-color: var(--color-white);
|
|
371
|
+
--tooltip-bg-color: var(--color-base-800);
|
|
372
|
+
|
|
373
|
+
--bar-color-income: var(--color-base-400);
|
|
374
|
+
--bar-color-expenses: var(--color-base-900);
|
|
375
|
+
|
|
376
|
+
--chart-indicator-color: var(--color-base-700);
|
|
377
|
+
```
|
|
161
378
|
|
|
162
379
|
### CSS classes
|
|
163
380
|
|
|
164
|
-
For
|
|
381
|
+
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
382
|
|
|
166
383
|
```css
|
|
167
384
|
body .Layer__table-cell-content {
|