@layerfi/components 0.1.30 → 0.1.31

package/.idea/codeStyles/Project.xml

@@ -0,0 +1,61 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

package/.idea/layer-react.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_19" default="true" project-jdk-name="corretto-19" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/layer-react.iml" filepath="$PROJECT_DIR$/.idea/layer-react.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/README.md

@@ -69,33 +69,22 @@ import { LayerProvider } from "@layerfi/components";
 
 ## Components
 
-### Onboarding
+### Profit And Loss
 
-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
-<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:
+![Profit and Loss chart](https://github.com/Layer-Fi/layer-react/assets/1592431/34e36b1b-024b-4598-b23b-dff723b2659c)
 
 ```tsx
-<Onboarding
-  onTransactionsToReviewClick={() => navigate('/accounting/bank-transactions')}
-/>
+import { ProfitAndLoss } from "@layerfi/components";
+…
+<ProfitAndLoss>
+  <ProfitAndLoss.Chart />
+  <ProfitAndLoss.Summaries />
+  <ProfitAndLoss.DatePicker />
+  <ProfitAndLoss.Table />
+</ProfitAndLoss>
 ```
 
-This prop is a function, so you can use your app's standard strategy for navigation.
-
-### Bank Accounts & Transactions
-
-#### Linked Accounts
+### Linked Accounts
 
 Displays all accounts connected to Layer including embedded banking, Plaid, and custom accounts.
 
@@ -108,13 +97,7 @@ Displays all accounts connected to Layer including embedded banking, Plaid, and
 />
 ```
 
-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
+### Transaction categorization
 
 The transaction categorization component handles displaying both categorized transactions and the workflow for categorizing new transactions as they are imported into Layer.
 
@@ -142,110 +125,32 @@ setFilters({ amount: { min: 0, max: 10000 } })
 <BankTransactions />
 ```
 
-### 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>
-```
+### Reports
 
-Props:
+The reports component contains multiple accounting reports and tables, including the profit and loss table.
 
-- `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.
+![P&L Table](https://github.com/Layer-Fi/layer-react/assets/1592431/d165b5b0-a0b5-4fff-b470-56bd8a9f6eaf)
 
-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:
+These can be embedded individually
 
 ```tsx
-<Onboarding
-  onTransactionsToReviewClick={() => navigate('/accounting/bank-transactions')}
-/>
+<ProfitAndLoss.DetailedCharts />
 ```
 
-#### Profit and Loss Table
-
-![Profit And Loss Table](https://github.com/Layer-Fi/layer-react/assets/1592431/8bca34d1-6357-4030-811a-e46fe1f83195)
+Or as a prebuilt panel
 
 ```tsx
-import { ProfitAndLoss } from "@layerfi/components";
-…
-<ProfitAndLoss>
-  <ProfitAndLoss.Table>
-</ProfitAndLoss>
+<Reports />
 ```
 
-The P&L table supports one optional prop:
-
-- `lockExpanded` forces the table to be fully expanded showing all rows
-
-#### Balance Sheet
+### Chart of Accounts
 
-![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.
+The chart of accounts gives direct read and write access into the double entry general ledger underlying Layer's data.
 
 ```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: