@layerfi/components 0.1.100 → 0.1.102-alpha

package/dist/index.d.ts

@@ -1879,7 +1879,8 @@ declare module '@layerfi/components/components/Button/SubmitButton' {
   }
   export enum SubmitAction {
       SAVE = "save",
-      UPDATE = "update"
+      UPDATE = "update",
+      UPLOAD = "upload"
   }
   export const SubmitButton: ({ active, className, processing, disabled, error, children, action, noIcon, variant, withRetry, ...props }: SubmitButtonProps) => import("react/jsx-runtime").JSX.Element;
 
@@ -2203,6 +2204,109 @@ declare module '@layerfi/components/components/Container/index' {
   export { Container } from '@layerfi/components/components/Container/Container';
   export { Header } from '@layerfi/components/components/Container/Header';
 
+}
+declare module '@layerfi/components/components/CsvUpload/CopyTemplateHeadersButtonGroup' {
+  interface CopyTemplateHeadersButtonGroupProps {
+      headers: Record<string, string>;
+  }
+  export const CopyTemplateHeadersButtonGroup: ({ headers }: CopyTemplateHeadersButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@layerfi/components/components/CsvUpload/CsvUpload' {
+  type CsvUploadProps = {
+      file: File | null;
+      onFileSelected: (file: File | null) => void;
+      replaceDropTarget?: boolean;
+  };
+  export const CsvUpload: ({ file, onFileSelected, replaceDropTarget }: CsvUploadProps) => import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@layerfi/components/components/CsvUpload/DownloadCsvTemplateButton' {
+  import { type PropsWithChildren } from 'react';
+  interface DownloadCsvTemplateButtonProps<T> {
+      csvProps: {
+          headers: {
+              [K in keyof T]: string;
+          };
+          rows?: T[];
+      };
+      fileName?: string;
+      className?: string;
+  }
+  export const DownloadCsvTemplateButton: <T extends { [K in keyof T]: string | number; }>({ children, className, csvProps, fileName }: PropsWithChildren<DownloadCsvTemplateButtonProps<T>>) => import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@layerfi/components/components/CsvUpload/ValidateCsvTable' {
+  import { PreviewCsv } from '@layerfi/components/components/CsvUpload/types';
+  interface ValidateCsvTableProps<T extends {
+      [K in keyof T]: string | number;
+  }> {
+      data: PreviewCsv<T>;
+      headers: {
+          [K in keyof T]: string;
+      };
+      formatters?: Partial<{
+          [K in keyof T]: (parsed: T[K]) => string;
+      }>;
+      className?: string;
+  }
+  export function ValidateCsvTable<T extends {
+      [K in keyof T]: string | number;
+  }>({ data, headers, formatters, className }: ValidateCsvTableProps<T>): import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@layerfi/components/components/CsvUpload/types' {
+  export type PreviewCell<T> = {
+      raw: string;
+      parsed: T;
+      is_valid: boolean;
+  };
+  export type PreviewRow<T extends {
+      [K in keyof T]: string | number;
+  }> = {
+      [K in keyof T]: PreviewCell<T[K]>;
+  } & {
+      index: number;
+      is_valid: boolean;
+  };
+  export type PreviewCsv<T extends {
+      [K in keyof T]: string | number;
+  }> = PreviewRow<T>[];
+
+}
+declare module '@layerfi/components/components/CustomAccountForm/CustomAccountForm' {
+  import { type CustomAccount } from '@layerfi/components/hooks/customAccounts/types';
+  export type CustomAccountsFormProps = {
+      initialAccountName: string;
+      onCancel?: () => void;
+      onSuccess?: (account: CustomAccount) => void;
+  };
+  export const CustomAccountForm: ({ initialAccountName, onCancel, onSuccess }: CustomAccountsFormProps) => import("react/jsx-runtime").JSX.Element;
+
+}
+declare module '@layerfi/components/components/CustomAccountForm/useCustomAccountForm' {
+  import { FormValidateOrFn, FormAsyncValidateOrFn } from '@tanstack/react-form';
+  import { CustomAccount, CustomAccountSubtype, CustomAccountType } from '@layerfi/components/hooks/customAccounts/types';
+  export const getCustomAccountTypeFromSubtype: (subtype: CustomAccountSubtype) => CustomAccountType;
+  type CustomAccountFormData = {
+      account_name?: string;
+      institution_name?: string;
+      account_type?: CustomAccountSubtype;
+  };
+  type UseCustomAccountFormProps = {
+      onSuccess?: (account: CustomAccount) => void;
+  };
+  export const useCustomAccountForm: ({ onSuccess }: UseCustomAccountFormProps) => {
+      form: import("@tanstack/react-form").ReactFormExtendedApi<CustomAccountFormData, FormValidateOrFn<CustomAccountFormData>, FormValidateOrFn<CustomAccountFormData>, FormValidateOrFn<CustomAccountFormData>, FormValidateOrFn<CustomAccountFormData>, FormAsyncValidateOrFn<CustomAccountFormData>, FormValidateOrFn<CustomAccountFormData>, FormAsyncValidateOrFn<CustomAccountFormData>, FormAsyncValidateOrFn<CustomAccountFormData>, FormAsyncValidateOrFn<CustomAccountFormData>>;
+      submitError: string | undefined;
+      isFormValid: boolean;
+  };
+  export {};
+
 }
 declare module '@layerfi/components/components/DataState/DataState' {
   import { ReactNode } from 'react';
@@ -2220,8 +2324,10 @@ declare module '@layerfi/components/components/DataState/DataState' {
       onRefresh?: () => void;
       isLoading?: boolean;
       spacing?: boolean;
+      inline?: boolean;
+      className?: string;
   }
-  export const DataState: ({ status, title, description, onRefresh, isLoading, icon, spacing, }: DataStateProps) => import("react/jsx-runtime").JSX.Element;
+  export const DataState: ({ status, title, description, onRefresh, isLoading, icon, spacing, inline, className, }: DataStateProps) => import("react/jsx-runtime").JSX.Element;
 
 }
 declare module '@layerfi/components/components/DataState/index' {
@@ -2567,6 +2673,22 @@ declare module '@layerfi/components/components/Input/BusinessTypeSelect' {
   };
   export const BusinessTypeSelect: ({ value, onChange }: BusinessTypeSelectProps) => import("react/jsx-runtime").JSX.Element;
 
+}
+declare module '@layerfi/components/components/Input/CreatableSelect' {
+  import { ReactNode } from 'react';
+  import { GroupBase } from 'react-select';
+  import { type CreatableProps } from 'react-select/creatable';
+  import { type SelectProps } from '@layerfi/components/components/Input/Select';
+  export interface CreatableSelectProps<T> extends Omit<SelectProps<T>, 'value' | 'onChange'> {
+      value?: T | null;
+      onChange: (selected: T | null) => void;
+      isClearable?: boolean;
+      onCreateOption?: (inputValue: string) => void;
+      isValidNewOption?: CreatableProps<T, false, GroupBase<T>>['isValidNewOption'];
+      formatCreateLabel?: (inputValue: string) => ReactNode;
+  }
+  export const CreatableSelect: <T>({ name, options, className, classNamePrefix, value, onChange, disabled, placeholder, isInvalid, errorMessage, onCreateOption, isValidNewOption, formatCreateLabel, inputId, isLoading, isClearable, }: CreatableSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+
 }
 declare module '@layerfi/components/components/Input/FileInput' {
   export interface FileInputProps {
@@ -2641,8 +2763,10 @@ declare module '@layerfi/components/components/Input/MultiSelect' {
       isInvalid?: boolean;
       errorMessage?: string;
       styles?: StylesConfig<T, true, GroupBase<T>>;
+      inputId?: string;
+      isLoading?: boolean;
   }
-  export const MultiSelect: <T>({ name, options, className, classNamePrefix, value, defaultValue, onChange, disabled, placeholder, isInvalid, errorMessage, styles, }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+  export const MultiSelect: <T>({ name, options, className, classNamePrefix, value, defaultValue, onChange, disabled, placeholder, isInvalid, errorMessage, styles, inputId, isLoading, }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 
 }
 declare module '@layerfi/components/components/Input/PhoneInput' {
@@ -2668,8 +2792,10 @@ declare module '@layerfi/components/components/Input/Select' {
       placeholder?: string;
       isInvalid?: boolean;
       errorMessage?: string;
+      inputId?: string;
+      isLoading?: boolean;
   }
-  export const Select: <T>({ name, options, className, classNamePrefix, value, onChange, disabled, placeholder, isInvalid, errorMessage, }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+  export const Select: <T>({ name, options, className, classNamePrefix, value, onChange, disabled, placeholder, isInvalid, errorMessage, inputId, isLoading, }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 
 }
 declare module '@layerfi/components/components/Input/StaticValue' {
@@ -4513,6 +4639,53 @@ declare module '@layerfi/components/components/Typography/index' {
   export { Heading, HeadingSize } from '@layerfi/components/components/Typography/Heading';
   export { ErrorText } from '@layerfi/components/components/Typography/ErrorText';
 
+}
+declare module '@layerfi/components/components/UploadTransactions/UploadTransactions' {
+  import type { Awaitable } from '@layerfi/components/types/utility/promises';
+  type UploadTransactionsProps = {
+      onComplete?: () => Awaitable<void>;
+  };
+  export function UploadTransactions({ onComplete }: UploadTransactionsProps): import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@layerfi/components/components/UploadTransactions/UploadTransactionsUploadCsvStep' {
+  import { type CustomAccountParseCsvResponse } from '@layerfi/components/hooks/customAccounts/useCustomAccountParseCsv';
+  type AccountOption = {
+      value: string;
+      label: string;
+      createdAccountName?: string;
+  };
+  interface UploadTransactionsUploadCsvStepProps {
+      selectedAccount: AccountOption | null;
+      onSelectAccount: (account: AccountOption | null) => void;
+      selectedFile: File | null;
+      onSelectFile: (file: File | null) => void;
+      onParseCsv: (parseCsvResponse: CustomAccountParseCsvResponse) => void;
+  }
+  export function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, selectedFile, onSelectFile, onParseCsv }: UploadTransactionsUploadCsvStepProps): import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@layerfi/components/components/UploadTransactions/UploadTransactionsValidateCsvStep' {
+  import type { CustomAccountParseCsvResponse } from '@layerfi/components/hooks/customAccounts/useCustomAccountParseCsv';
+  interface UploadTransactionsValidateCsvStepProps {
+      parseCsvResponse: CustomAccountParseCsvResponse;
+      selectedAccountId: string;
+      onGoBack: () => void;
+      onReupload: () => void;
+  }
+  export function UploadTransactionsValidateCsvStep({ parseCsvResponse, selectedAccountId, onGoBack, onReupload }: UploadTransactionsValidateCsvStepProps): import("react/jsx-runtime").JSX.Element;
+  export {};
+
+}
+declare module '@layerfi/components/components/UploadTransactions/template' {
+  import { CustomAccountTransactionRow } from '@layerfi/components/hooks/customAccounts/types';
+  export const templateHeaders: {
+      [K in keyof CustomAccountTransactionRow]: string;
+  };
+  export const templateExampleTransactions: CustomAccountTransactionRow[];
+
 }
 declare module '@layerfi/components/components/UpsellBanner/BookkeepingUpsellBar' {
   interface BookkeepingUpsellBarProps {
@@ -4791,7 +4964,7 @@ declare module '@layerfi/components/components/ui/Typography/Text' {
   } & {
       children?: import("react").ReactNode | undefined;
   } & import("react").RefAttributes<HTMLSpanElement>>;
-  type LabelProps = Pick<ComponentPropsWithoutRef<'label'>, 'slot'>;
+  type LabelProps = Pick<ComponentPropsWithoutRef<'label'>, 'slot' | 'htmlFor'>;
   export const Label: import("react").ForwardRefExoticComponent<LabelProps & TextStyleProps & {
       children?: import("react").ReactNode | undefined;
   } & import("react").RefAttributes<HTMLLabelElement>>;
@@ -5573,6 +5746,114 @@ declare module '@layerfi/components/hooks/categories/useCategories' {
   export function useCategories({ mode }?: UseCategoriesOptions): import("swr").SWRResponse<import("../../types").Category[], any, any>;
   export {};
 
+}
+declare module '@layerfi/components/hooks/customAccounts/types' {
+  import { Direction } from '@layerfi/components/types/bank_transactions';
+  export enum CustomAccountSubtype {
+      CHECKING = "CHECKING",
+      SAVINGS = "SAVINGS",
+      CREDIT_CARD = "CREDIT_CARD"
+  }
+  export enum CustomAccountType {
+      DEPOSITORY = "DEPOSITORY",
+      CREDIT = "CREDIT"
+  }
+  export type RawCustomAccount = {
+      id: string;
+      external_id: string | null;
+      mask: string | null;
+      account_name: string;
+      institution_name: string | null;
+      account_type: string;
+      account_subtype: string;
+      created_at: string | null;
+      updated_at: string | null;
+      archived_at: string | null;
+      ledger_account_id: string;
+  };
+  export type CustomAccount = Pick<RawCustomAccount, 'id'> & {
+      externalId: RawCustomAccount['external_id'];
+      mask: RawCustomAccount['mask'];
+      accountName: RawCustomAccount['account_name'];
+      institutionName: RawCustomAccount['institution_name'];
+      accountType: RawCustomAccount['account_type'];
+      accountSubtype: RawCustomAccount['account_subtype'];
+      createdAt: RawCustomAccount['created_at'];
+      updatedAt: RawCustomAccount['updated_at'];
+      archivedAt: RawCustomAccount['archived_at'];
+      ledgerAccountId: RawCustomAccount['ledger_account_id'];
+  };
+  export const mapRawCustomAccountToCustomAccount: (raw: RawCustomAccount) => CustomAccount;
+  export type RawCustomTransaction = {
+      external_id?: string | null;
+      amount: number;
+      direction: Direction;
+      date: string;
+      description: string;
+  };
+  export interface CustomAccountTransactionRow {
+      date: string;
+      description: string;
+      amount: number;
+  }
+
+}
+declare module '@layerfi/components/hooks/customAccounts/useCreateCustomAccount' {
+  import { type RawCustomAccount } from '@layerfi/components/hooks/customAccounts/types';
+  type CreateCustomAccountBody = Pick<RawCustomAccount, 'account_name' | 'account_type' | 'account_subtype' | 'institution_name' | 'external_id' | 'mask'>;
+  export function useCreateCustomAccount(): import("swr/mutation").SWRMutationResponse<import("./types").CustomAccount, any, () => {
+      readonly accessToken: string;
+      readonly apiUrl: string;
+      readonly businessId: string;
+      readonly tags: readonly ["#custom-accounts:create"];
+  } | undefined, CreateCustomAccountBody>;
+  export {};
+
+}
+declare module '@layerfi/components/hooks/customAccounts/useCreateCustomAccountTransactions' {
+  import type { RawCustomTransaction } from '@layerfi/components/hooks/customAccounts/types';
+  type CreateCustomAccountTransactionsBody = {
+      transactions: RawCustomTransaction[];
+  };
+  type CreateCustomAccountTransactionsArgs = CreateCustomAccountTransactionsBody & {
+      customAccountId: string;
+  };
+  export function useCreateCustomAccountTransactions(): import("swr/mutation").SWRMutationResponse<unknown, any, () => {
+      readonly accessToken: string;
+      readonly apiUrl: string;
+      readonly businessId: string;
+      readonly tags: readonly ["#custom-accounts:create-transactions"];
+  } | undefined, CreateCustomAccountTransactionsArgs>;
+  export {};
+
+}
+declare module '@layerfi/components/hooks/customAccounts/useCustomAccountParseCsv' {
+  import type { CustomAccountTransactionRow, RawCustomTransaction } from '@layerfi/components/hooks/customAccounts/types';
+  import type { PreviewCsv } from '@layerfi/components/components/CsvUpload/types';
+  type CustomAccountParseCsvArgs = {
+      file: File;
+      customAccountId: string;
+  };
+  export type CustomAccountParseCsvResponse = {
+      is_valid: boolean;
+      new_transactions_request: {
+          transactions: RawCustomTransaction[];
+      };
+      new_transactions_preview: PreviewCsv<CustomAccountTransactionRow>;
+  };
+  export function useCustomAccountParseCsv(): import("swr/mutation").SWRMutationResponse<CustomAccountParseCsvResponse, any, () => {
+      readonly accessToken: string;
+      readonly apiUrl: string;
+      readonly businessId: string;
+      readonly tags: readonly ["#custom-accounts:parse-csv"];
+  } | undefined, CustomAccountParseCsvArgs>;
+  export {};
+
+}
+declare module '@layerfi/components/hooks/customAccounts/useCustomAccounts' {
+  export const CUSTOM_ACCOUNTS_TAG_KEY = "#custom-accounts";
+  export function useCustomAccounts(): import("swr").SWRResponse<import("./types").CustomAccount[], any, any>;
+
 }
 declare module '@layerfi/components/hooks/useAuth' {
   export function useAuth(): import("swr").SWRResponse<{
@@ -6687,6 +6968,7 @@ declare module '@layerfi/components/index' {
   export { LayerProvider } from '@layerfi/components/providers/LayerProvider/index';
   export { Onboarding } from '@layerfi/components/components/Onboarding/index';
   export { LinkedAccounts } from '@layerfi/components/components/LinkedAccounts/index';
+  export { UploadTransactions as unstable_UploadTransactions } from '@layerfi/components/components/UploadTransactions/UploadTransactions';
   export { BankTransactions } from '@layerfi/components/components/BankTransactions/index';
   export { Integrations } from '@layerfi/components/components/Integrations/Integrations';
   export { ProfitAndLoss } from '@layerfi/components/components/ProfitAndLoss/index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.100",
+  "version": "0.1.102-alpha",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",
@@ -76,6 +76,8 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.8",
     "@tanstack/react-form": "^1.9.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.9",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "libphonenumber-js": "^1.12.7",
@@ -84,6 +86,7 @@
     "react-aria-components": "^1.8.0",
     "react-currency-input-field": "^3.10.0",
     "react-datepicker": "^6.9.0",
+    "react-dropzone": "^14.3.8",
     "react-plaid-link": "^4.0.1",
     "react-select": "^5.10.1",
     "recharts": "^2.15.3",