@cryptofi/core-ui 0.20.0 → 0.22.0

package/dist/types/index.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SVGProps } from 'react';
+import { SVGProps, Dispatch, SetStateAction } from 'react';
 import { CurveType } from 'recharts/types/shape/Curve';
-import { CardProps, CheckboxProps, InputProps, ChakraComponent, SelectProps, TagProps, UseToastOptions } from '@chakra-ui/react';
-import { UseFormRegister } from 'react-hook-form';
+import { CardProps, CheckboxProps, InputProps, ChakraComponent, ModalProps, FlexProps, SelectProps, TagProps, UseToastOptions } from '@chakra-ui/react';
+import { FieldValues, UseFormRegister } from 'react-hook-form';
 
 declare const SvgIconAlert: _chakra_ui_system_dist_system_types.ChakraComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element, {}>;
 //# sourceMappingURL=IconAlert.d.ts.map
@@ -158,6 +159,27 @@ declare const SvgIconUpload: _chakra_ui_system_dist_system_types.ChakraComponent
 declare const SvgIconUser: _chakra_ui_system_dist_system_types.ChakraComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element, {}>;
 //# sourceMappingURL=IconUser.d.ts.map
 
+declare const SvgIconAvax: _chakra_ui_system_dist_system_types.ChakraComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element, {}>;
+//# sourceMappingURL=IconAvax.d.ts.map
+
+declare const SvgIconBch: _chakra_ui_system_dist_system_types.ChakraComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element, {}>;
+//# sourceMappingURL=IconBch.d.ts.map
+
+declare const SvgIconBtc: _chakra_ui_system_dist_system_types.ChakraComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element, {}>;
+//# sourceMappingURL=IconBtc.d.ts.map
+
+declare const SvgIconEth: _chakra_ui_system_dist_system_types.ChakraComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element, {}>;
+//# sourceMappingURL=IconEth.d.ts.map
+
+declare const SvgIconLink: _chakra_ui_system_dist_system_types.ChakraComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element, {}>;
+//# sourceMappingURL=IconLink.d.ts.map
+
+declare const SvgIconLtc: _chakra_ui_system_dist_system_types.ChakraComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element, {}>;
+//# sourceMappingURL=IconLtc.d.ts.map
+
+declare const SvgIconXlm: _chakra_ui_system_dist_system_types.ChakraComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element, {}>;
+//# sourceMappingURL=IconXlm.d.ts.map
+
 /**
  * This is a partial Chakra theme and should be extended by the consuming application using
  * Chakra's extendTheme method.
@@ -172,36 +194,40 @@ declare const exportedTheme: {
 };
 //# sourceMappingURL=exportedTheme.d.ts.map
 
+declare const aggregateAmounts: (amounts: number[]) => number;
+//# sourceMappingURL=aggregateAmounts.d.ts.map
+
 declare const convertToUTCEpochTime: ({ timeString, toEndDate }: {
     timeString: string;
     toEndDate?: boolean | undefined;
 }) => string;
 //# sourceMappingURL=convertToUTCEpochTime.d.ts.map
 
-type SignDisplay$1 = 'auto' | 'always' | 'exceptZero' | 'never';
+type SignDisplay = 'auto' | 'always' | 'exceptZero' | 'never';
 /**
  *
- * @param amount - A finite number
+ * @param amount - Number or string to format
  * @param signDisplay - Setting for minus / plus sign, defaults to exceptZero
  * @param isDecimal - Is the number a percentage in its decimal form? defaults to true
  */
 declare const formatPercentage: ({ number, signDisplay, isDecimal, }: {
-    number: number;
-    signDisplay?: SignDisplay$1 | undefined;
+    number: number | string;
+    signDisplay?: SignDisplay | undefined;
     isDecimal?: boolean | undefined;
-}) => string;
+}) => string | number;
 //# sourceMappingURL=formatPercentage.d.ts.map
 
-type SignDisplay = 'auto' | 'always' | 'exceptZero' | 'never';
 /**
  *
- * @param amount - A finite number
- * @param signDisplay - Setting for minus / plus sign, defaults to auto
+ * @param amount - Number or string to format
+ * @param precision - The number of decimals to display
+ * @signDisplay - Whether to display a plus sign for positive amounts
  */
-declare const formatUSD: ({ amount, signDisplay }: {
-    amount: number;
-    signDisplay?: SignDisplay | undefined;
-}) => string;
+declare const formatUSD: ({ amount, precision, signDisplay, }: {
+    amount: number | string;
+    precision?: number | undefined;
+    signDisplay?: boolean | undefined;
+}) => string | number;
 //# sourceMappingURL=formatUSD.d.ts.map
 
 /**
@@ -214,20 +240,14 @@ declare const getDelta: ({ data, dataKey }: {
     data: any[] | undefined;
     dataKey: string;
 }) => {
-    startingAmount: any;
-    endingAmount: any;
+    startingAmount: number;
+    endingAmount: number;
     delta: number;
     percentChange: number;
     isNetGain: boolean;
 };
 //# sourceMappingURL=getDelta.d.ts.map
 
-declare const getFormDataQuery: (obj: unknown) => string | undefined;
-//# sourceMappingURL=getFormDataQuery.d.ts.map
-
-declare const isFormDataEmpty: (obj: unknown) => boolean;
-//# sourceMappingURL=isFormDataEmpty.d.ts.map
-
 declare const uiColors: {
     redRemains(alpha?: number): string;
     heroicRed(alpha?: number): string;
@@ -241,15 +261,21 @@ declare const uiColors: {
 };
 //# sourceMappingURL=uiColors.d.ts.map
 
-declare const CfAreaChart: ({ data, dataKey, width, height, areaType, }: {
+declare const CfAreaChart: ({ data, dataKey, width, height, areaType, showTooltip, isAnimated, formatter, }: {
     data: any[] | undefined;
     dataKey: string;
     width?: string | undefined;
     height?: string | undefined;
     areaType?: CurveType | undefined;
+    showTooltip?: boolean | undefined;
+    isAnimated?: boolean | undefined;
+    formatter?: ((value: number) => string) | undefined;
 }) => react_jsx_runtime.JSX.Element;
 //# sourceMappingURL=AreaChart.d.ts.map
 
+declare const CfBreakpointDebugger: () => react_jsx_runtime.JSX.Element;
+//# sourceMappingURL=BreakpointDebugger.d.ts.map
+
 declare const CfCard: ({ children, ...rest }: CardProps) => react_jsx_runtime.JSX.Element;
 //# sourceMappingURL=Card.d.ts.map
 
@@ -259,40 +285,68 @@ interface CfCheckboxProps extends CheckboxProps {
     label?: string;
     labelPosition?: 'left' | 'right';
     spaceBetween?: boolean;
+    name: string;
 }
 declare const CfCheckbox: (props: CfCheckboxProps) => react_jsx_runtime.JSX.Element;
 
-interface CfInputProps extends InputProps {
+interface CfInputProps<T extends FieldValues> extends InputProps {
+    register?: UseFormRegister<T>;
     errorMessage?: string;
     helperText?: string;
     label?: string;
-    spellCheck?: boolean;
     IconLeft?: ChakraComponent<'svg', object>;
     IconRight?: ChakraComponent<'svg', object>;
     name: string;
-    register: UseFormRegister<any>;
-    rules?: object;
 }
-declare const CfInput: (props: CfInputProps) => react_jsx_runtime.JSX.Element;
+declare const CfInput: <T extends FieldValues>(props: CfInputProps<T>) => react_jsx_runtime.JSX.Element;
 
-declare const CfLineChart: ({ data, dataKey, width, height, lineType, }: {
+declare const CfLineChart: ({ data, dataKey, width, height, lineType, showTooltip, isAnimated, formatter, }: {
     data: any[] | undefined;
     dataKey: string;
     width?: string | undefined;
     height?: string | undefined;
     lineType?: CurveType | undefined;
+    showTooltip?: boolean | undefined;
+    isAnimated?: boolean | undefined;
+    formatter?: ((value: number) => string) | undefined;
 }) => react_jsx_runtime.JSX.Element;
 //# sourceMappingURL=LineChart.d.ts.map
 
-interface CfSelectProps extends SelectProps {
-    register: UseFormRegister<any>;
-    name: string;
-    rules?: object;
+interface Props extends ModalProps {
+    headerContent: React.ReactNode;
+    footerContent: React.ReactNode;
+}
+declare const CfModal: ({ isOpen, onClose, headerContent, footerContent, closeOnOverlayClick, children, ...rest }: Props) => react_jsx_runtime.JSX.Element;
+//# sourceMappingURL=Modal.d.ts.map
+
+interface LastEvaluatedKeyParams {
+    lastEvaluatedPKey?: string;
+    lastEvaluatedSKey?: string;
+}
+interface LastEvaluatedKey {
+    pKey: string;
+    sKey: string;
+}
+interface CfPaginationProps extends FlexProps {
+    setLastEvaluatedKeyParams: Dispatch<SetStateAction<LastEvaluatedKeyParams | undefined>>;
+    isLoading?: boolean;
+    hasMore?: boolean;
+    lastEvaluatedKey?: LastEvaluatedKey;
+}
+declare const CfPagination: ({ isLoading, hasMore, setLastEvaluatedKeyParams, lastEvaluatedKey, ...rest }: CfPaginationProps) => react_jsx_runtime.JSX.Element;
+
+interface CfSelectProps<T extends FieldValues> extends SelectProps {
+    register?: UseFormRegister<T>;
     errorMessage?: string;
     helperText?: string;
     label?: string;
+    name: string;
+}
+interface CfSelectOption {
+    name: string;
+    value?: string;
 }
-declare const CfSelect: (props: CfSelectProps) => react_jsx_runtime.JSX.Element;
+declare const CfSelect: <T extends FieldValues>(props: CfSelectProps<T>) => react_jsx_runtime.JSX.Element;
 
 interface CfTagProps extends TagProps {
     label: string;
@@ -307,4 +361,4 @@ interface CfToastProps extends UseToastOptions {
 }
 declare const CfToast: (props: CfToastProps) => react_jsx_runtime.JSX.Element;
 
-export { CfAreaChart, CfCard, CfCheckbox, type CfCheckboxProps, CfInput, type CfInputProps, CfLineChart, CfSelect, type CfSelectProps, CfTag, type CfTagProps, CfToast, SvgIconAlert as IconAlert, SvgIconArrowDown as IconArrowDown, SvgIconArrowUp as IconArrowUp, SvgIconBank as IconBank, SvgIconBarChart as IconBarChart, SvgIconCalendar as IconCalendar, SvgIconCaretDown as IconCaretDown, SvgIconCaretLeft as IconCaretLeft, SvgIconCaretRight as IconCaretRight, SvgIconCaretUp as IconCaretUp, SvgIconCent as IconCent, SvgIconCheck as IconCheck, SvgIconChecking as IconChecking, SvgIconClose as IconClose, SvgIconConnect as IconConnect, SvgIconCopy as IconCopy, SvgIconDollar as IconDollar, SvgIconDownload as IconDownload, SvgIconEdit as IconEdit, SvgIconEnter as IconEnter, SvgIconEnterInverted as IconEnterInverted, SvgIconExchange as IconExchange, SvgIconFilter as IconFilter, SvgIconHelp as IconHelp, SvgIconHistory as IconHistory, SvgIconHome as IconHome, SvgIconIndicatorDown as IconIndicatorDown, SvgIconIndicatorUp as IconIndicatorUp, SvgIconInfo as IconInfo, SvgIconMail as IconMail, SvgIconMenu as IconMenu, SvgIconMore as IconMore, SvgIconNotification as IconNotification, SvgIconOverview as IconOverview, SvgIconPercent as IconPercent, SvgIconPieChart as IconPieChart, SvgIconPlus as IconPlus, SvgIconReports as IconReports, SvgIconReservesSuccess as IconReservesSuccess, SvgIconReservesWarning as IconReservesWarning, SvgIconSearch as IconSearch, SvgIconSettings as IconSettings, SvgIconSettlement as IconSettlement, SvgIconSignIn as IconSignIn, SvgIconSignOut as IconSignOut, SvgIconSort as IconSort, SvgIconSpinner as IconSpinner, SvgIconSupport as IconSupport, SvgIconTrash as IconTrash, SvgIconUpload as IconUpload, SvgIconUser as IconUser, convertToUTCEpochTime, exportedTheme as coreTheme, formatPercentage, formatUSD, getDelta, getFormDataQuery, isFormDataEmpty, uiColors };
+export { CfAreaChart, CfBreakpointDebugger, CfCard, CfCheckbox, type CfCheckboxProps, CfInput, type CfInputProps, CfLineChart, CfModal, CfPagination, CfSelect, type CfSelectOption, type CfSelectProps, CfTag, type CfTagProps, CfToast, SvgIconAlert as IconAlert, SvgIconArrowDown as IconArrowDown, SvgIconArrowUp as IconArrowUp, SvgIconAvax as IconAvax, SvgIconBank as IconBank, SvgIconBarChart as IconBarChart, SvgIconBch as IconBch, SvgIconBtc as IconBtc, SvgIconCalendar as IconCalendar, SvgIconCaretDown as IconCaretDown, SvgIconCaretLeft as IconCaretLeft, SvgIconCaretRight as IconCaretRight, SvgIconCaretUp as IconCaretUp, SvgIconCent as IconCent, SvgIconCheck as IconCheck, SvgIconChecking as IconChecking, SvgIconClose as IconClose, SvgIconConnect as IconConnect, SvgIconCopy as IconCopy, SvgIconDollar as IconDollar, SvgIconDownload as IconDownload, SvgIconEdit as IconEdit, SvgIconEnter as IconEnter, SvgIconEnterInverted as IconEnterInverted, SvgIconEth as IconEth, SvgIconExchange as IconExchange, SvgIconFilter as IconFilter, SvgIconHelp as IconHelp, SvgIconHistory as IconHistory, SvgIconHome as IconHome, SvgIconIndicatorDown as IconIndicatorDown, SvgIconIndicatorUp as IconIndicatorUp, SvgIconInfo as IconInfo, SvgIconLink as IconLink, SvgIconLtc as IconLtc, SvgIconMail as IconMail, SvgIconMenu as IconMenu, SvgIconMore as IconMore, SvgIconNotification as IconNotification, SvgIconOverview as IconOverview, SvgIconPercent as IconPercent, SvgIconPieChart as IconPieChart, SvgIconPlus as IconPlus, SvgIconReports as IconReports, SvgIconReservesSuccess as IconReservesSuccess, SvgIconReservesWarning as IconReservesWarning, SvgIconSearch as IconSearch, SvgIconSettings as IconSettings, SvgIconSettlement as IconSettlement, SvgIconSignIn as IconSignIn, SvgIconSignOut as IconSignOut, SvgIconSort as IconSort, SvgIconSpinner as IconSpinner, SvgIconSupport as IconSupport, SvgIconTrash as IconTrash, SvgIconUpload as IconUpload, SvgIconUser as IconUser, SvgIconXlm as IconXlm, aggregateAmounts, convertToUTCEpochTime, exportedTheme as coreTheme, formatPercentage, formatUSD, getDelta, uiColors };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptofi/core-ui",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "author": {
     "name": "CryptoFi"
   },
@@ -10,23 +10,25 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "dev": "yarn storybook",
     "build": "rm -rf ./dist && rollup -c",
+    "build-storybook": "storybook build",
+    "chromatic": "dotenv cross-var npx chromatic --project-token=%CHROMATIC_PROJECT_TOKEN%",
+    "dev": "yarn storybook",
+    "format": "prettier --config ./.prettierrc -w '**/*.{tsx,ts,js,cjs,json,yml}' && git update-index --again",
+    "icons:gen": "yarn icons:clean && yarn icons:prefix && npx @svgr/cli --out-dir ./src/icons -- ./svg-icons",
+    "icons:clean": "npx rimraf '**/Icon*.tsx' ./src/icons/index.ts",
+    "icons:prefix": "node scripts/prefixIcons.cjs",
     "lint": "eslint src --ext .tsx --ext .ts",
     "lint:fix": "yarn lint --fix",
-    "format": "prettier --config ./.prettierrc -w '**/*.{tsx,ts,js,cjs,json,yml}' && git update-index --again",
-    "pretest": "yarn lint:fix",
-    "test": "jest --colors --passWithNoTests",
     "posttest": "npx http-server coverage/lcov-report",
-    "test:watch": "yarn test --collectCoverage=false --watch",
-    "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build",
+    "pretest": "yarn lint:fix",
     "publish:local": "yarn build && npx yalc publish --push",
-    "publish:npm": "npm publish --access public && yarn publish:notifier",
-    "icons:gen": "yarn icons:clean && yarn icons:prefix && npx @svgr/cli --out-dir ./src/icons -- ./svg-icons",
-    "icons:clean": "rm -rf src/icons",
-    "icons:prefix": "node scripts/prefixIcons.cjs",
-    "publish:notifier": "dotenv cross-var node scripts/npmPublishNotifier.cjs %SLACK_WEBHOOK_URL%"
+    "publish:notifier": "dotenv cross-var node scripts/npmPublishNotifier.cjs %SLACK_WEBHOOK_URL%",
+    "publish:npm": "yarn build && npm publish --access public && yarn publish:notifier && yarn publish:storybook",
+    "publish:storybook": "yarn chromatic",
+    "storybook": "storybook dev -p 6006",
+    "test": "jest --colors --passWithNoTests",
+    "test:watch": "yarn test --collectCoverage=false --watch"
   },
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",