@payfit/unity-components
Version:
209 lines (208 loc) • 8.21 kB
TypeScript
import { UnityIcon } from '@payfit/unity-icons';
import { UnityIllustrationAsset } from '@payfit/unity-illustrations';
import { ReactNode } from 'react';
export declare const errorState: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
h1?: import('tailwind-merge').ClassNameValue;
h2?: import('tailwind-merge').ClassNameValue;
h3?: import('tailwind-merge').ClassNameValue;
h4?: import('tailwind-merge').ClassNameValue;
container?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
icon?: import('tailwind-merge').ClassNameValue;
description?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
illustration?: import('tailwind-merge').ClassNameValue;
informationContainer?: import('tailwind-merge').ClassNameValue;
information?: import('tailwind-merge').ClassNameValue;
informationComponent?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
h1?: import('tailwind-merge').ClassNameValue;
h2?: import('tailwind-merge').ClassNameValue;
h3?: import('tailwind-merge').ClassNameValue;
h4?: import('tailwind-merge').ClassNameValue;
container?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
icon?: import('tailwind-merge').ClassNameValue;
description?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
illustration?: import('tailwind-merge').ClassNameValue;
informationContainer?: import('tailwind-merge').ClassNameValue;
information?: import('tailwind-merge').ClassNameValue;
informationComponent?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
container: string[];
wrapper: string[];
base: string[];
illustration: string[];
icon: string[];
informationContainer: string[];
information: string[];
informationComponent: string[];
h1: string[];
h2: string[];
h3: string[];
h4: string[];
description: string[];
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
h1?: import('tailwind-merge').ClassNameValue;
h2?: import('tailwind-merge').ClassNameValue;
h3?: import('tailwind-merge').ClassNameValue;
h4?: import('tailwind-merge').ClassNameValue;
container?: import('tailwind-merge').ClassNameValue;
base?: import('tailwind-merge').ClassNameValue;
icon?: import('tailwind-merge').ClassNameValue;
description?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
illustration?: import('tailwind-merge').ClassNameValue;
informationContainer?: import('tailwind-merge').ClassNameValue;
information?: import('tailwind-merge').ClassNameValue;
informationComponent?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
container: string[];
wrapper: string[];
base: string[];
illustration: string[];
icon: string[];
informationContainer: string[];
information: string[];
informationComponent: string[];
h1: string[];
h2: string[];
h3: string[];
h4: string[];
description: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
container: string[];
wrapper: string[];
base: string[];
illustration: string[];
icon: string[];
informationContainer: string[];
information: string[];
informationComponent: string[];
h1: string[];
h2: string[];
h3: string[];
h4: string[];
description: string[];
}, undefined, unknown, unknown, undefined>>;
interface ErrorStateBaseProps {
/**
* Callback function triggered when the main action button is pressed.
*/
onButtonPress: () => void;
/**
* Custom label for the main action button. If not provided, uses default label from configuration.
* @default: Go to dashboard
*/
buttonLabel?: string;
/**
* Custom main title for the error state. If not provided, uses default title from configuration.
* @default: Something went wrong
*/
mainTitle?: ReactNode;
/**
* Custom main description for the error state. If not provided, uses default description from configuration.
*/
mainDescription?: ReactNode;
/**
* Custom main description specifically for component-level display. If not provided, uses default from configuration.
* @default: Please refresh the page or check your connection. We’ve been notified of the issue and are working to resolve it as quickly as possible.
*/
mainDescriptionComponent?: ReactNode;
/**
* Custom illustration to display. If not provided, uses default illustration from configuration.
* @default: Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible.
*/
illustration?: UnityIllustrationAsset;
/**
* Custom icon to display. If not provided, uses default icon from configuration.
*/
icon?: UnityIcon;
/**
* ARIA role for the error state container.
* @default "status"
*/
role?: string;
}
interface KnownErrorStateProps extends ErrorStateBaseProps {
/**
* The error object containing the error message to display.
*/
error: Error;
/**
* Additional description text to display alongside the error details.
* @default: Here's the technical error detail. If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:
*/
detailDescription?: ReactNode;
/**
* Type identifier for known errors.
*/
type: 'generic';
}
interface UnknownErrorStateProps extends ErrorStateBaseProps {
/**
* Custom label for the back button. If not provided, uses default label from configuration.
* @default: Back to dashboard
*/
backButtonLabel?: ReactNode;
/**
* Must be undefined for unknown error states.
*/
error: undefined;
/**
* Type identifier for unknown errors.
*/
type: 'generic';
}
interface _404ErrorStateProps extends ErrorStateBaseProps {
/**
* Type identifier for 404 errors.
*/
type: '404';
/**
* No error object needed for 404 states.
*/
error?: never;
}
export type ErrorStateProps = KnownErrorStateProps | UnknownErrorStateProps | _404ErrorStateProps;
/**
* The `ErrorState` component displays error information with contextual messaging and actions.
* It provides a consistent way to handle different types of errors (generic, 404) with appropriate visual feedback and user actions.
* The component adapts its layout based on container size and error type, supporting multiple breakpoints for optimal user experience.
* @param {ErrorStateProps} props - The props for the `ErrorState` component
* @see {@link ErrorStateProps} for all available props
* @example
* ```tsx
* import { ErrorState } from '@payfit/unity-components'
*
* function Example() {
* return (
* <ErrorState
* type="generic"
* error={new Error('Something went wrong')}
* onButtonPress={() => window.location.reload()}
* buttonLabel="Retry"
* mainTitle="Oops! Something went wrong"
* mainDescription="We encountered an unexpected error. Please try again."
* />
* )
* }
* ```
* @remarks
* [API](https://unity-components.payfit.io/?path=/docs/feedback-errorstate--docs) • [Design docs](https://www.payfit.design/)
*/
declare const ErrorState: import('react').ForwardRefExoticComponent<ErrorStateProps & import('react').RefAttributes<HTMLDivElement>>;
export { ErrorState };