@layerfi/components 0.1.75 → 0.1.77

package/.eslintrc.js

@@ -1,3 +1,4 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
   env: {
     browser: true,
@@ -6,8 +7,9 @@ module.exports = {
   },
   extends: [
     'eslint:recommended',
-    'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
   ],
   ignorePatterns: ['build/*', 'dist/*', 'bin/*'],
   parser: '@typescript-eslint/parser',
@@ -18,24 +20,26 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint', 'prettier', 'import'],
+  plugins: ['@typescript-eslint', '@stylistic', 'unused-imports'],
   rules: {
-    'prettier/prettier': 'error',
-    indent: ['off', 2, { SwitchCase: 1 }],
-    'linebreak-style': ['error', 'unix'],
-    'no-console': ['error', { allow: ['warn', 'error'] }],
-    quotes: ['error', 'single'],
-    'react/react-in-jsx-scope': 'off',
-    semi: ['error', 'never'],
-    'object-curly-spacing': ['error', 'always', { objectsInObjects: true }],
-    '@typescript-eslint/no-unused-vars': [
-      'warn',
+    'no-console': ['error', { allow: ['warn', 'error', 'debug'] }],
+
+    '@stylistic/quotes': ['error', 'single', { avoidEscape: false }],
+    '@stylistic/jsx-quotes': ['error', 'prefer-single'],
+    '@stylistic/semi': ['error', 'never'],
+
+    '@typescript-eslint/no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'error',
       {
         argsIgnorePattern: '^_',
         varsIgnorePattern: '^_',
         caughtErrorsIgnorePattern: '^_',
       },
     ],
+
+    'react/prop-types': 'off',
   },
   overrides: [
     {
@@ -50,4 +54,9 @@ module.exports = {
       },
     },
   ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 }

package/README.md

@@ -160,7 +160,7 @@ import { ProfitAndLoss } from "@layerfi/components";
 </ProfitAndLoss>
 ```
 
-#### Profit and Loss Summary Cards
+#### Profit and Loss Summaries
 
 ![](https://github.com/Layer-Fi/layer-react/assets/1592431/06459f20-519e-4413-80ba-fb9965c32f9f)
 
@@ -168,26 +168,14 @@ import { ProfitAndLoss } from "@layerfi/components";
 import { ProfitAndLoss } from "@layerfi/components";
 …
 <ProfitAndLoss>
-  <div className='Layer__accounting-overview__summaries-row'>
-    <ProfitAndLoss.Summaries actionable={false} />
-    <TransactionToReviewCard onClick={onTransactionsToReviewClick} />
-  </div>
+  <ProfitAndLoss.Summaries />
 </ProfitAndLoss>
 ```
 
-Props:
-
-- `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.
+The P&L Summaries section supports several optional props:
 
-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 categorization page lives on `/account/bank-transactions` within your app:
-
-```tsx
-<Onboarding
-  onTransactionsToReviewClick={() => navigate('/accounting/bank-transactions')}
-/>
-```
+- `actionable`: When enabled, clicking the revenue & expense charts will open the P&L sidebar view.
+- `variants`: Override the size of the component; supports a small and large version.
 
 #### Profit and Loss Table