import { Meta , Story } from "@storybook/react" ; import React from "react" ; import { Decorator , GuideDecorator } from "../utils/Decorator" ; import { ConfirmButton , ConfirmButtonLabels , ConfirmButtonTransitionState , } from "./ConfirmButton" ; const labels = { confirm : "Confirm" , error : "Error" } ; export const Interactive = ( ) => { const [ transitionState , setTransitionState ] = React . useState < ConfirmButtonTransitionState > ( "default" ) ; const timer = React . useRef < number > ( ) ; React . useEffect ( ( ) => ( ) => { if ( timer . current ) { clearTimeout ( timer . current ) ; } } , [ ] ) ; const setSuccess = ( ) => { setTransitionState ( "success" ) ; timer . current = undefined ; } ; const handleClick = ( ) => { if ( ! timer . current ) { setTransitionState ( "loading" ) ; timer . current = setTimeout ( setSuccess , 2000 ) as unknown as number ; } } ; return ( < > < ConfirmButton labels = { labels } transitionState = { transitionState } onClick = { handleClick } / > < ConfirmButton labels = { labels } transitionState = { transitionState } onClick = { handleClick } variant = "secondary" / > < />); } ; export const Default = ( ) => ( < > < ConfirmButton labels = { labels } transitionState = "default" / > < ConfirmButton labels = { labels } transitionState = "default" variant = "secondary" / > < />); export const Loading = ( ) => ( < > < ConfirmButton labels = { labels } transitionState = "loading" noTransition = { true } / > < ConfirmButton labels = { labels } transitionState = "loading" noTransition = { true } variant = "secondary" / > < />); export const Error = ( ) => ( < > < ConfirmButton labels = { labels } transitionState = "error" noTransition = { true } / > < ConfirmButton labels = { labels } transitionState = "error" noTransition = { true } variant = "secondary" / > < />); export const Success = ( ) => ( < > < ConfirmButton labels = { labels } transitionState = "success" noTransition = { true } / > < ConfirmButton labels = { labels } transitionState = "success" noTransition = { true } variant = "secondary" / > < />); export default { decorators : [ ( Story ) => ( < div style = { { display : "flex" , gap : "24px" } } > < Story /> < /div>), Decorator , GuideDecorator , ] , title : "Confirm Button" } as Meta ;