@layerfi/components 0.1.1 → 0.1.2

package/index.d.ts

@@ -4,10 +4,9 @@ declare module '@layerfi/components/api/layer/authenticate' {
       appId: string;
       appSecret: string;
       authenticationUrl?: string;
-      clientId: string;
       scope: string;
   };
-  export const authenticate: ({ appId, appSecret, authenticationUrl, clientId, scope, }: AuthenticationArguments) => () => Promise<OAuthResponse>;
+  export const authenticate: ({ appId, appSecret, authenticationUrl, scope, }: AuthenticationArguments) => () => Promise<OAuthResponse>;
   export {};
 
 }
@@ -104,11 +103,10 @@ declare module '@layerfi/components/api/layer/profit_and_loss' {
 }
 declare module '@layerfi/components/api/layer' {
   export const Layer: {
-      authenticate: ({ appId, appSecret, authenticationUrl, clientId, scope, }: {
+      authenticate: ({ appId, appSecret, authenticationUrl, scope, }: {
           appId: string;
           appSecret: string;
           authenticationUrl?: string | undefined;
-          clientId: string;
           scope: string;
       }) => () => Promise<import("@layerfi/components/types").OAuthResponse>;
       categorizeBankTransaction: (baseUrl: string, accessToken: string | undefined, options?: {
@@ -196,6 +194,24 @@ declare module '@layerfi/components/components/BalanceSheetRow/BalanceSheetRow'
 declare module '@layerfi/components/components/BalanceSheetRow/index' {
   export { BalanceSheetRow } from '@layerfi/components/components/BalanceSheetRow/BalanceSheetRow';
 
+}
+declare module '@layerfi/components/components/BankTransactionListItem/BankTransactionListItem' {
+  import React from 'react';
+  import { BankTransaction } from '@layerfi/components/types';
+  type Props = {
+      dateFormat: string;
+      bankTransaction: BankTransaction;
+      isOpen: boolean;
+      toggleOpen: (id: string) => void;
+      editable: boolean;
+  };
+  export const BankTransactionListItem: ({ dateFormat, bankTransaction, isOpen, toggleOpen, editable, }: Props) => React.JSX.Element | null;
+  export {};
+
+}
+declare module '@layerfi/components/components/BankTransactionListItem/index' {
+  export { BankTransactionListItem } from '@layerfi/components/components/BankTransactionListItem/BankTransactionListItem';
+
 }
 declare module '@layerfi/components/components/BankTransactionRow/BankTransactionRow' {
   import React from 'react';
@@ -234,12 +250,26 @@ declare module '@layerfi/components/components/Button/Button' {
       variant?: ButtonVariant;
       leftIcon?: ReactNode;
       rightIcon?: ReactNode;
+      iconOnly?: ReactNode;
   }
-  export const Button: ({ className, children, variant, leftIcon, rightIcon, ...props }: ButtonProps) => React.JSX.Element;
+  export const Button: ({ className, children, variant, leftIcon, rightIcon, iconOnly, ...props }: ButtonProps) => React.JSX.Element;
+
+}
+declare module '@layerfi/components/components/Button/SubmitButton' {
+  import React, { ButtonHTMLAttributes } from 'react';
+  export interface SubmitButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+      processing?: boolean;
+      disabled?: boolean;
+      error?: boolean | string;
+      active?: boolean;
+      iconOnly?: boolean;
+  }
+  export const SubmitButton: ({ active, className, processing, disabled, error, children, ...props }: SubmitButtonProps) => React.JSX.Element;
 
 }
 declare module '@layerfi/components/components/Button/index' {
-  export { Button } from '@layerfi/components/components/Button/Button';
+  export { Button, ButtonVariant } from '@layerfi/components/components/Button/Button';
+  export { SubmitButton } from '@layerfi/components/components/Button/SubmitButton';
 
 }
 declare module '@layerfi/components/components/CategoryMenu/CategoryMenu' {
@@ -305,12 +335,13 @@ declare module '@layerfi/components/components/Container/Container' {
 
 }
 declare module '@layerfi/components/components/Container/Header' {
-  import React, { ReactNode } from 'react';
+  import React, { CSSProperties, ReactNode } from 'react';
   export interface HeaderProps {
       className?: string;
+      style?: CSSProperties;
       children: ReactNode;
   }
-  export const Header: ({ className, children }: HeaderProps) => React.JSX.Element;
+  export const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
 
 }
 declare module '@layerfi/components/components/Container/index' {
@@ -325,6 +356,8 @@ declare module '@layerfi/components/components/ExpandedBankTransactionRow/Expand
       bankTransaction: BankTransaction;
       close?: () => void;
       isOpen?: boolean;
+      asListItem?: boolean;
+      showSubmitButton?: boolean;
   };
   export type SaveHandle = {
       save: () => void;
@@ -380,6 +413,18 @@ declare module '@layerfi/components/components/Input/index' {
   export { InputGroup } from '@layerfi/components/components/Input/InputGroup';
   export { FileInput } from '@layerfi/components/components/Input/FileInput';
 
+}
+declare module '@layerfi/components/components/Loader/Loader' {
+  import React, { ReactNode } from 'react';
+  export interface LoaderProps {
+      children?: ReactNode;
+  }
+  export const Loader: ({ children }: LoaderProps) => React.JSX.Element;
+
+}
+declare module '@layerfi/components/components/Loader/index' {
+  export { Loader } from '@layerfi/components/components/Loader/Loader';
+
 }
 declare module '@layerfi/components/components/Pill/Pill' {
   import React, { PropsWithChildren } from 'react';
@@ -484,43 +529,6 @@ declare module '@layerfi/components/components/ProfitAndLossTable/empty_profit_a
 declare module '@layerfi/components/components/ProfitAndLossTable/index' {
   export { ProfitAndLossTable } from '@layerfi/components/components/ProfitAndLossTable/ProfitAndLossTable';
 
-}
-declare module '@layerfi/components/components/RadioButtonGroup/RadioButton' {
-  import React from 'react';
-  type Props = {
-      checked: boolean;
-      label: string;
-      name: string;
-      onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-      value: string;
-      disabled?: boolean;
-      size: 'small' | 'large';
-  };
-  export const RadioButton: ({ checked, label, name, onChange, value, disabled, size, }: Props) => React.JSX.Element;
-  export {};
-
-}
-declare module '@layerfi/components/components/RadioButtonGroup/RadioButtonGroup' {
-  import React from 'react';
-  export type RadioButtonLabel = {
-      label: string;
-      value: string;
-      disabled?: boolean;
-  };
-  type Props = {
-      name: string;
-      size?: 'small' | 'large';
-      buttons: RadioButtonLabel[];
-      selected?: RadioButtonLabel['value'];
-      onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  };
-  export const RadioButtonGroup: ({ name, size, buttons, onChange, selected, }: Props) => React.JSX.Element;
-  export {};
-
-}
-declare module '@layerfi/components/components/RadioButtonGroup/index' {
-  export { RadioButtonGroup } from '@layerfi/components/components/RadioButtonGroup/RadioButtonGroup';
-
 }
 declare module '@layerfi/components/components/SkeletonBalanceSheetRow/SkeletonBalanceSheetRow' {
   import React, { PropsWithChildren } from 'react';
@@ -567,6 +575,139 @@ declare module '@layerfi/components/components/Toggle/Toggle' {
 declare module '@layerfi/components/components/Toggle/index' {
   export { Toggle } from '@layerfi/components/components/Toggle/Toggle';
 
+}
+declare module '@layerfi/components/components/Tooltip/Tooltip' {
+  import React, { ReactNode } from 'react';
+  import type { Placement } from '@floating-ui/react';
+  export interface TooltipOptions {
+      initialOpen?: boolean;
+      placement?: Placement;
+      open?: boolean;
+      disabled?: boolean;
+      onOpenChange?: (open: boolean) => void;
+      offset?: number;
+      shift?: {
+          padding?: number;
+      };
+  }
+  export const Tooltip: ({ children, ...options }: {
+      children: ReactNode;
+  } & TooltipOptions) => React.JSX.Element;
+  export const TooltipTrigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & {
+      asChild?: boolean | undefined;
+  }, "ref"> & React.RefAttributes<HTMLElement>>;
+  export const TooltipContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+}
+declare module '@layerfi/components/components/Tooltip/index' {
+  export { Tooltip, TooltipTrigger, TooltipContent } from '@layerfi/components/components/Tooltip/Tooltip';
+  export { useTooltip } from '@layerfi/components/components/Tooltip/useTooltip';
+
+}
+declare module '@layerfi/components/components/Tooltip/useTooltip' {
+  import React from 'react';
+  import { TooltipOptions } from '@layerfi/components/components/Tooltip/Tooltip';
+  export type ContextType = ReturnType<typeof useTooltip> | null;
+  export const TooltipContext: React.Context<ContextType>;
+  export const useTooltipContext: () => {
+      placement: import("@floating-ui/utils").Placement;
+      strategy: import("@floating-ui/utils").Strategy;
+      middlewareData: import("@floating-ui/core").MiddlewareData;
+      x: number;
+      y: number;
+      isPositioned: boolean;
+      update: () => void;
+      floatingStyles: React.CSSProperties;
+      refs: {
+          reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+          floating: React.MutableRefObject<HTMLElement | null>;
+          setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+          setFloating: (node: HTMLElement | null) => void;
+      } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+      elements: {
+          reference: import("@floating-ui/react-dom").ReferenceType | null;
+          floating: HTMLElement | null;
+      } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+      context: {
+          x: number;
+          y: number;
+          placement: import("@floating-ui/utils").Placement;
+          strategy: import("@floating-ui/utils").Strategy;
+          middlewareData: import("@floating-ui/core").MiddlewareData;
+          isPositioned: boolean;
+          update: () => void;
+          floatingStyles: React.CSSProperties;
+          open: boolean;
+          onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+          events: import("@floating-ui/react").FloatingEvents;
+          dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+          nodeId: string | undefined;
+          floatingId: string;
+          refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+          elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+      };
+      getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+      getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+      getItemProps: (userProps?: (Omit<React.HTMLProps<HTMLElement>, "active" | "selected"> & {
+          active?: boolean | undefined;
+          selected?: boolean | undefined;
+      }) | undefined) => Record<string, unknown>;
+      open: boolean;
+      setOpen: (open: boolean) => void;
+      isMounted: boolean;
+      styles: React.CSSProperties;
+      disabled: boolean | undefined;
+  };
+  export const useTooltip: ({ initialOpen, placement, open: controlledOpen, onOpenChange: setControlledOpen, disabled, offset: offsetProp, shift: shiftProp, }?: TooltipOptions) => {
+      placement: import("@floating-ui/utils").Placement;
+      strategy: import("@floating-ui/utils").Strategy;
+      middlewareData: import("@floating-ui/core").MiddlewareData;
+      x: number;
+      y: number;
+      isPositioned: boolean;
+      update: () => void;
+      floatingStyles: React.CSSProperties;
+      refs: {
+          reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+          floating: React.MutableRefObject<HTMLElement | null>;
+          setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+          setFloating: (node: HTMLElement | null) => void;
+      } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+      elements: {
+          reference: import("@floating-ui/react-dom").ReferenceType | null;
+          floating: HTMLElement | null;
+      } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+      context: {
+          x: number;
+          y: number;
+          placement: import("@floating-ui/utils").Placement;
+          strategy: import("@floating-ui/utils").Strategy;
+          middlewareData: import("@floating-ui/core").MiddlewareData;
+          isPositioned: boolean;
+          update: () => void;
+          floatingStyles: React.CSSProperties;
+          open: boolean;
+          onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+          events: import("@floating-ui/react").FloatingEvents;
+          dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+          nodeId: string | undefined;
+          floatingId: string;
+          refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+          elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+      };
+      getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+      getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+      getItemProps: (userProps?: (Omit<React.HTMLProps<HTMLElement>, "active" | "selected"> & {
+          active?: boolean | undefined;
+          selected?: boolean | undefined;
+      }) | undefined) => Record<string, unknown>;
+      open: boolean;
+      setOpen: (open: boolean) => void;
+      isMounted: boolean;
+      styles: React.CSSProperties;
+      disabled: boolean | undefined;
+  };
+
 }
 declare module '@layerfi/components/components/Typography/Heading' {
   import React, { ReactNode } from 'react';
@@ -593,6 +734,17 @@ declare module '@layerfi/components/components/Typography/Text' {
       normal = "normal",
       bold = "bold"
   }
+  export enum TextUseTooltip {
+      whenTruncated = "whenTruncated",
+      always = "always"
+  }
+  export interface TextTooltipOptions {
+      contentClassName?: string;
+      offset?: number;
+      shift?: {
+          padding?: number;
+      };
+  }
   export interface TextProps {
       as?: React.ElementType;
       className?: string;
@@ -600,8 +752,11 @@ declare module '@layerfi/components/components/Typography/Text' {
       size?: TextSize;
       weight?: TextWeight;
       htmlFor?: string;
+      withTooltip?: TextUseTooltip;
+      tooltipOptions?: TextTooltipOptions;
   }
-  export const Text: ({ as: Component, className, children, size, weight, ...props }: TextProps) => React.JSX.Element;
+  export const Text: ({ as: Component, className, children, size, weight, withTooltip, ...props }: TextProps) => React.JSX.Element;
+  export const TextWithTooltip: ({ as: Component, className, children, size, weight, withTooltip, tooltipOptions, ...props }: TextProps) => React.JSX.Element;
 
 }
 declare module '@layerfi/components/components/Typography/index' {
@@ -612,7 +767,10 @@ declare module '@layerfi/components/components/Typography/index' {
 declare module '@layerfi/components/contexts/LayerContext/LayerContext' {
   /// <reference types="react" />
   import { LayerContextValues } from '@layerfi/components/types';
-  export const LayerContext: import("react").Context<LayerContextValues>;
+  import { LayerThemeConfig } from '@layerfi/components/types/layer_context';
+  export const LayerContext: import("react").Context<LayerContextValues & {
+      setTheme: (theme: LayerThemeConfig) => void;
+  }>;
 
 }
 declare module '@layerfi/components/contexts/LayerContext/index' {
@@ -667,13 +825,27 @@ declare module '@layerfi/components/hooks/useChartOfAccounts/useChartOfAccounts'
   export const useChartOfAccounts: UseChartOfAccounts;
   export {};
 
+}
+declare module '@layerfi/components/hooks/useElementSize/index' {
+  export { useElementSize } from '@layerfi/components/hooks/useElementSize/useElementSize';
+
+}
+declare module '@layerfi/components/hooks/useElementSize/useElementSize' {
+  /// <reference types="react" />
+  export const useElementSize: <T extends HTMLElement>(callback: (target: T, entry: ResizeObserverEntry, size: {
+      width: number;
+      height: number;
+  }) => void) => import("react").RefObject<T>;
+
 }
 declare module '@layerfi/components/hooks/useLayerContext/index' {
   export { useLayerContext } from '@layerfi/components/hooks/useLayerContext/useLayerContext';
 
 }
 declare module '@layerfi/components/hooks/useLayerContext/useLayerContext' {
-  export const useLayerContext: () => import("@layerfi/components/types").LayerContextValues;
+  export const useLayerContext: () => import("@layerfi/components/types").LayerContextValues & {
+      setTheme: (theme: import("@layerfi/components/types/layer_context").LayerThemeConfig) => void;
+  };
 
 }
 declare module '@layerfi/components/hooks/useProfitAndLoss/index' {
@@ -693,6 +865,13 @@ declare module '@layerfi/components/hooks/useProfitAndLoss/useProfitAndLoss' {
   export const useProfitAndLoss: UseProfitAndLoss;
   export {};
 
+}
+declare module '@layerfi/components/icons/AlertCircle' {
+  import * as React from 'react';
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const AlertCircle: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default AlertCircle;
+
 }
 declare module '@layerfi/components/icons/Calendar' {
   import * as React from 'react';
@@ -701,16 +880,18 @@ declare module '@layerfi/components/icons/Calendar' {
   export default Calendar;
 
 }
-declare module '@layerfi/components/icons/CheckedCircle' {
+declare module '@layerfi/components/icons/Check' {
   import * as React from 'react';
-  import { SVGProps } from 'react';
-  type Props = SVGProps<SVGSVGElement> & {
-      size: SVGProps<SVGSVGElement>['width'];
-      fillColor: string;
-      strokeColor: string;
-  };
-  const CheckedCircle: ({ fillColor, strokeColor, size, ...props }: Props) => React.JSX.Element;
-  export default CheckedCircle;
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const Check: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default Check;
+
+}
+declare module '@layerfi/components/icons/CheckCircle' {
+  import * as React from 'react';
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const CheckCircle: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default CheckCircle;
 
 }
 declare module '@layerfi/components/icons/ChevronDown' {
@@ -757,22 +938,16 @@ declare module '@layerfi/components/icons/FolderPlus' {
 }
 declare module '@layerfi/components/icons/Link' {
   import * as React from 'react';
-  import { SVGProps } from 'react';
-  type Props = SVGProps<SVGSVGElement> & {
-      size: SVGProps<SVGSVGElement>['width'];
-  };
-  const Link: ({ size, ...props }: Props) => React.JSX.Element;
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const Link: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
   export default Link;
 
 }
-declare module '@layerfi/components/icons/LinkBroken' {
+declare module '@layerfi/components/icons/Loader' {
   import * as React from 'react';
-  import { SVGProps } from 'react';
-  type Props = SVGProps<SVGSVGElement> & {
-      size: SVGProps<SVGSVGElement>['width'];
-  };
-  const LinkBroken: ({ size, ...props }: Props) => React.JSX.Element;
-  export default LinkBroken;
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const Loader: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default Loader;
 
 }
 declare module '@layerfi/components/icons/RefreshCcw' {
@@ -781,6 +956,13 @@ declare module '@layerfi/components/icons/RefreshCcw' {
   const RefreshCcw: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
   export default RefreshCcw;
 
+}
+declare module '@layerfi/components/icons/ScissorsFullOpen' {
+  import * as React from 'react';
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const ScissorsFullOpen: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default ScissorsFullOpen;
+
 }
 declare module '@layerfi/components/icons/UploadCloud' {
   import * as React from 'react';
@@ -832,20 +1014,22 @@ declare module '@layerfi/components/models/Money' {
 }
 declare module '@layerfi/components/providers/LayerProvider/LayerProvider' {
   import React, { PropsWithChildren } from 'react';
+  import { LayerThemeConfig } from '@layerfi/components/types/layer_context';
   type LayerEnvironmentConfig = {
       url: string;
       scope: string;
       apiUrl: string;
   };
   export const LayerEnvironment: Record<string, LayerEnvironmentConfig>;
-  type Props = {
+  export type Props = {
       businessId: string;
-      appId: string;
-      appSecret: string;
-      clientId: string;
+      appId?: string;
+      appSecret?: string;
+      businessAccessToken?: string;
       environment?: keyof typeof LayerEnvironment;
+      theme?: LayerThemeConfig;
   };
-  export const LayerProvider: ({ appId, appSecret, businessId, children, clientId, environment, }: PropsWithChildren<Props>) => React.JSX.Element;
+  export const LayerProvider: ({ appId, appSecret, businessId, children, businessAccessToken, environment, theme, }: PropsWithChildren<Props>) => React.JSX.Element;
   export {};
 
 }
@@ -1019,10 +1203,32 @@ declare module '@layerfi/components/types/layer_context' {
       businessId: string;
       categories: Category[];
       apiUrl: string;
+      theme?: LayerThemeConfig;
   };
+  export interface ColorHSLConfig {
+      h: string;
+      s: string;
+      l: string;
+  }
+  export interface ColorRGBConfig {
+      r: string;
+      g: string;
+      b: string;
+  }
+  export interface ColorHexConfig {
+      hex: string;
+  }
+  export type ColorConfig = ColorHSLConfig | ColorRGBConfig | ColorHexConfig;
+  export interface LayerThemeConfig {
+      colors?: {
+          dark?: ColorConfig;
+          light?: ColorConfig;
+      };
+  }
   export enum LayerContextActionName {
       setAuth = "LayerContext.setAuth",
-      setCategories = "LayerContext.setCategories"
+      setCategories = "LayerContext.setCategories",
+      setTheme = "LayerContext.setTheme"
   }
   export type LayerContextAction = {
       type: LayerContextActionName.setAuth;
@@ -1034,6 +1240,11 @@ declare module '@layerfi/components/types/layer_context' {
       payload: {
           categories: LayerContextValues['categories'];
       };
+  } | {
+      type: LayerContextActionName.setTheme;
+      payload: {
+          theme: LayerContextValues['theme'];
+      };
   };
 
 }
@@ -1081,6 +1292,16 @@ declare module '@layerfi/components/types' {
       endDate: T;
   };
 
+}
+declare module '@layerfi/components/utils/colors' {
+  import { LayerThemeConfig } from '@layerfi/components/types/layer_context';
+  /**
+   * Convert `theme` config set in Provider into component styles.
+   *
+   * @param {LayerThemeConfig} theme - the theme set with provider
+   */
+  export const parseStylesFromThemeConfig: (theme?: LayerThemeConfig) => {};
+
 }
 declare module '@layerfi/components' {
   import main = require('@layerfi/components/index');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Layer React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",