@layerfi/components 0.1.29 → 0.1.30

package/README.md

@@ -69,22 +69,33 @@ import { LayerProvider } from "@layerfi/components";
 
 ## Components
 
-### Profit And Loss
+### Onboarding
 
-![Profit and Loss chart](https://github.com/Layer-Fi/layer-react/assets/1592431/34e36b1b-024b-4598-b23b-dff723b2659c)
+The onboarding component can be included on an accounting landing page to prompt users to connect accounts.
+![Onboarding landing state](https://github.com/Layer-Fi/layer-react/assets/1592431/1fef5910-3a6f-41d8-9600-a66b07ccfc33)
+
+After connecting accounts, the component will change into a prompt to categorize transactions.
+![Onboarding after linking](https://github.com/Layer-Fi/layer-react/assets/1592431/4b7d5711-f1da-42cb-8105-e0489f7431ad)
+
+For a business that has already onboarded, this component will render nothing, so it's safe to leave on the default page for all businesses.
 
 ```tsx
-import { ProfitAndLoss } from "@layerfi/components";
-…
-<ProfitAndLoss>
-  <ProfitAndLoss.Chart />
-  <ProfitAndLoss.Summaries />
-  <ProfitAndLoss.DatePicker />
-  <ProfitAndLoss.Table />
-</ProfitAndLoss>
+<Onboarding onTransactionsToReviewClick={onTransactionsToReviewClick} />
+```
+
+This component has one primary prop: `onTransactionsToReviewClick` should be a function which navigates to the bank transactions to review page. For example, if the bank transaction categorizaiton page lives on `/account/bank-transactions` within your app:
+
+```tsx
+<Onboarding
+  onTransactionsToReviewClick={() => navigate('/accounting/bank-transactions')}
+/>
 ```
 
-### Linked Accounts
+This prop is a function, so you can use your app's standard strategy for navigation.
+
+### Bank Accounts & Transactions
+
+#### Linked Accounts
 
 Displays all accounts connected to Layer including embedded banking, Plaid, and custom accounts.
 
@@ -97,7 +108,13 @@ Displays all accounts connected to Layer including embedded banking, Plaid, and
 />
 ```
 
-### Transaction categorization
+Props:
+
+- `asWidget`: Minimized version of the component
+- `elevated`: Stylistic option to highlight component
+- `showLedgerBalance`: Flag to enable or hide the current ledger balance corresponding to this external account. Useful for reconciliation.
+
+#### Transaction categorization
 
 The transaction categorization component handles displaying both categorized transactions and the workflow for categorizing new transactions as they are imported into Layer.
 
@@ -125,32 +142,110 @@ setFilters({ amount: { min: 0, max: 10000 } })
 <BankTransactions />
 ```
 
-### Reports
+### Reporting
+
+#### Profit And Loss Chart
+
+![Profit and Loss chart](https://github.com/Layer-Fi/layer-react/assets/1592431/34e36b1b-024b-4598-b23b-dff723b2659c)
+
+```tsx
+import { ProfitAndLoss } from "@layerfi/components";
+…
+<ProfitAndLoss>
+  <ProfitAndLoss.Chart />
+  <ProfitAndLoss.Summaries />
+  <ProfitAndLoss.DatePicker />
+  <ProfitAndLoss.Table />
+</ProfitAndLoss>
+```
+
+#### Profit and Loss Summary Cards
+
+![](https://github.com/Layer-Fi/layer-react/assets/1592431/06459f20-519e-4413-80ba-fb9965c32f9f)
+
+```tsx
+import { ProfitAndLoss } from "@layerfi/components";
+…
+<ProfitAndLoss>
+  <div className='Layer__accounting-overview__summaries-row'>
+    <ProfitAndLoss.Summaries actionable={false} />
+    <TransactionToReviewCard onClick={onTransactionsToReviewClick} />
+  </div>
+</ProfitAndLoss>
+```
 
-The reports component contains multiple accounting reports and tables, including the profit and loss table.
+Props:
 
-![P&L Table](https://github.com/Layer-Fi/layer-react/assets/1592431/d165b5b0-a0b5-4fff-b470-56bd8a9f6eaf)
+- `actionable`: enables or disables whether clicking the revenue & expense charts open the P&L sidebar view.
+- `vertical`: changes the card layout to be vertically stacked instead of horizontal
+- `revenueLabel`: specifiable label for revenue for uses where you prefer 'income' or other another term.
 
-These can be embedded individually
+Note that the `<TransactionToReviewCard>` is a separate component, but is meant to be optionally bundled with the summary cards. As with the onboarding component, this component has one primary prop: `onTransactionsToReviewClick` should be a function which navigates to the bank transactions to review page. For example, if the bank transaction categorizaiton page lives on `/account/bank-transactions` within your app:
 
 ```tsx
-<ProfitAndLoss.DetailedCharts />
+<Onboarding
+  onTransactionsToReviewClick={() => navigate('/accounting/bank-transactions')}
+/>
 ```
 
-Or as a prebuilt panel
+#### Profit and Loss Table
+
+![Profit And Loss Table](https://github.com/Layer-Fi/layer-react/assets/1592431/8bca34d1-6357-4030-811a-e46fe1f83195)
 
 ```tsx
-<Reports />
+import { ProfitAndLoss } from "@layerfi/components";
+…
+<ProfitAndLoss>
+  <ProfitAndLoss.Table>
+</ProfitAndLoss>
 ```
 
-### Chart of Accounts
+The P&L table supports one optional prop:
+
+- `lockExpanded` forces the table to be fully expanded showing all rows
+
+#### Balance Sheet
 
-The chart of accounts gives direct read and write access into the double entry general ledger underlying Layer's data.
+![Balance Sheet](https://github.com/Layer-Fi/layer-react/assets/1592431/c35a6110-38e3-4845-b725-b1ca4913b831)
+
+The Balance Sheet component displays an interactive table. A default date can be passed in via the `effectiveDate` prop.
+
+### Ledger
+
+#### Chart of Accounts
+
+![Chart of Accounts](https://github.com/Layer-Fi/layer-react/assets/1592431/05405344-81de-4d76-b835-633e247cdeb9)
+
+The chart of accounts gives direct read and write access into the double entry general ledger underlying Layer's data. It exposes the list of accounts and enables users to create new accounts.
 
 ```tsx
 <ChartOfAccounts asWidget withDateControl withExpandAllButton />
 ```
 
+The following props are supported
+
+- `asWidget`: Displays a more compact version.
+- `withDateControl`: Includes a date picker which determines the effective date of account balances displayed.
+- `withExpandAllButton`: Optionally displays a button to expand and collapse all sub account lists.
+
+#### Journal
+
+![Journal](https://github.com/Layer-Fi/layer-react/assets/1592431/52ed02c7-a73a-4a68-9eac-1ede16633afc)
+
+The Journal component displays the full history of journal entries and allows users to create journal entries by hand as well.
+
+A sidebar expands to display details about the invoice.
+
+![Journal sidebar](https://github.com/Layer-Fi/layer-react/assets/1592431/f9c14a59-aeec-4716-bd10-98903b221c44)
+
+```tsx
+<Journal />
+```
+
+The follow props are supported:
+
+- `asWidget`: Compact version
+
 ## Styling
 
 You have a range of options for custom styling. In order of most simple to most control: