@payfit/unity-components
Version:
65 lines (64 loc) • 3.29 kB
TypeScript
import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
import { TaskProps as RawTaskProps } from '../../../../components/task-menu/parts/RawTask.js';
type TaskRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawTaskProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
type TaskButtonProps = Omit<RawTaskProps, 'href'> & {
onPress: NonNullable<RawTaskProps['onPress']>;
};
export type TaskProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = TaskRouterProps<TRouter, TOptions> | TaskButtonProps;
/**
* A task component that integrates with Tanstack Router for seamless navigation within task menus.
* Represents individual task items that can be either links for navigation or buttons for custom interactions,
* with support for various visual states including completed, uncompleted, locked, and selected states.
* @param {TaskProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
* @example
* ```tsx
* import { Task } from '@payfit/unity-components/integrations/tanstack-router'
* import { TaskMenu } from '@payfit/unity-components'
*
* function OnboardingTasks() {
* return (
* <TaskMenu label="Onboarding tasks">
* <Task
* uniqueId="setup-profile"
* label="Complete Profile Setup"
* taskNumber={1}
* taskStatus="uncompleted"
* to="/profile/setup"
* />
* <Task
* uniqueId="validate-data"
* label="Validate Information"
* taskNumber={2}
* taskStatus="completed"
* onPress={() => console.log('Validation triggered')}
* />
* <Task
* uniqueId="final-review"
* label="Final Review"
* taskNumber={3}
* taskStatus="locked"
* to="/review"
* />
* </TaskMenu>
* )
* }
* ```
* @remarks
* - Automatically renders as a link when 'to' prop is provided, or as a button when 'onPress' is provided
* - Supports type-safe route parameters, search params, and relative navigation with Tanstack Router
* - Integrates with TaskMenu component for consistent task navigation UI patterns
* - Provides automatic active state styling based on current route
* - Supports multiple task states: completed, uncompleted, and locked
* - Maintains all accessibility features from the underlying RawTask component
* - Task selection state is automatically managed based on routing context
* @see {@link TaskProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/task-menu GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
* @see Design docs in {@link https://www.payfit.design/ Payfit.design}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
*/
declare function Task<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: TaskProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
declare namespace Task {
var displayName: string;
}
export { Task };