@@ -4,8 +4,9 @@ import { HamburgerIcon } from "@chakra-ui/icons";
44import { Flex , Text , VStack } from "@chakra-ui/layout" ;
55import { useBreakpointValue } from "@chakra-ui/media-query" ;
66import * as React from "react" ;
7- import { Route , Router , useLocation } from "wouter " ;
7+ import { P , match } from "ts-pattern " ;
88import { Link } from "./components/Link" ;
9+ import { Page } from "./components/Page" ;
910import { AsyncSubmissionForm } from "./forms/AsyncSubmissionForm" ;
1011import { AsyncValidationForm } from "./forms/AsyncValidationForm" ;
1112import { BasicForm } from "./forms/BasicForm" ;
@@ -15,81 +16,84 @@ import { FieldsListenerForm } from "./forms/FieldsListenerForm";
1516import { IBANForm } from "./forms/IBANForm" ;
1617import { InputMaskingForm } from "./forms/InputMaskingForm" ;
1718import { StrategiesForm } from "./forms/StrategiesForm" ;
19+ import { Router , routes } from "./utils/router" ;
1820
1921export const App = ( ) => {
20- const [ path ] = useLocation ( ) ;
22+ const route = Router . useRoute ( routes ) ;
2123 const isDesktop = ! useBreakpointValue ( { base : true , md : false } ) ;
2224 const { isOpen, onToggle, onClose } = useDisclosure ( ) ;
2325
24- React . useEffect ( onClose , [ path ] ) ;
26+ const pathKey = route ?. key . split ( "-" ) [ 0 ] ;
27+ React . useEffect ( onClose , [ pathKey ] ) ;
2528
2629 return (
27- < Router base = "/react-ux-form" >
28- < Flex flex = { 1 } flexDirection = { { base : "column-reverse" , md : "row" } } >
29- < Button
30- borderRadius = { 0 }
31- display = { { base : "flex" , md : "none" } }
30+ < Flex flex = { 1 } flexDirection = { { base : "column-reverse" , md : "row" } } >
31+ < Button
32+ borderRadius = { 0 }
33+ display = { { base : "flex" , md : "none" } }
34+ flexShrink = { 0 }
35+ fontSize = { 14 }
36+ height = "48px"
37+ onClick = { onToggle }
38+ >
39+ < HamburgerIcon height = { 5 } width = { 5 } marginRight = { 2 } />
40+ MENU
41+ </ Button >
42+
43+ { ( isDesktop || isOpen ) && (
44+ < Flex
45+ backgroundColor = "gray.50"
46+ flexDirection = "column"
47+ overflowY = "scroll"
48+ paddingTop = { 6 }
49+ paddingBottom = { 6 }
50+ paddingLeft = { 4 }
51+ paddingRight = { 4 }
52+ borderColor = "gray.100"
53+ borderStyle = "solid"
54+ borderTopWidth = { { base : 1 , md : 0 } }
55+ borderRightWidth = { { base : 0 , md : 1 } }
3256 flexShrink = { 0 }
33- fontSize = { 14 }
34- height = "48px"
35- onClick = { onToggle }
57+ height = { { base : "40%" , md : "auto" } }
58+ width = { { base : "auto" , md : 320 } }
3659 >
37- < HamburgerIcon height = { 5 } width = { 5 } marginRight = { 2 } />
38- MENU
39- </ Button >
40-
41- { ( isDesktop || isOpen ) && (
42- < Flex
43- backgroundColor = "gray.50"
44- flexDirection = "column"
45- overflowY = "scroll"
46- paddingTop = { 6 }
47- paddingBottom = { 6 }
48- paddingLeft = { 4 }
49- paddingRight = { 4 }
50- borderColor = "gray.100"
51- borderStyle = "solid"
52- borderTopWidth = { { base : 1 , md : 0 } }
53- borderRightWidth = { { base : 0 , md : 1 } }
54- flexShrink = { 0 }
55- height = { { base : "40%" , md : "auto" } }
56- width = { { base : "auto" , md : 320 } }
60+ < Text
61+ color = "gray.500"
62+ fontSize = { 12 }
63+ fontWeight = { 600 }
64+ marginLeft = { 3 }
65+ marginBottom = { 3 }
66+ textTransform = "uppercase"
5767 >
58- < Text
59- color = "gray.500"
60- fontSize = { 12 }
61- fontWeight = { 600 }
62- marginLeft = { 3 }
63- marginBottom = { 3 }
64- textTransform = "uppercase"
65- >
66- Examples
67- </ Text >
68+ Examples
69+ </ Text >
6870
69- < VStack align = "initial" spacing = { 1 } >
70- < Link href = "/" > Basic</ Link >
71- < Link href = "/strategies" > Validation strategies</ Link >
72- < Link href = "/fields-listener" > Fields listener</ Link >
73- < Link href = "/async-validation" > Async validation</ Link >
74- < Link href = "/async-submission" > Async submission</ Link >
75- < Link href = "/checkboxes" > Checkboxes</ Link >
76- < Link href = "/iban" > IBAN</ Link >
77- < Link href = "/credit-card" > Credit card</ Link >
78- < Link href = "/input-masking" > Input masking</ Link >
79- </ VStack >
80- </ Flex >
81- ) }
71+ < VStack align = "initial" spacing = { 1 } >
72+ < Link to = { Router . Home ( ) } > Basic</ Link >
73+ < Link to = { Router . Strategies ( ) } > Validation strategies</ Link >
74+ < Link to = { Router . FieldsListener ( ) } > Fields listener</ Link >
75+ < Link to = { Router . AsyncValidation ( ) } > Async validation</ Link >
76+ < Link to = { Router . AsyncSubmission ( ) } > Async submission</ Link >
77+ < Link to = { Router . Checkboxes ( ) } > Checkboxes</ Link >
78+ < Link to = { Router . IBAN ( ) } > IBAN</ Link >
79+ < Link to = { Router . CreditCard ( ) } > Credit card</ Link >
80+ < Link to = { Router . InputMasking ( ) } > Input masking</ Link >
81+ </ VStack >
82+ </ Flex >
83+ ) }
8284
83- < Route path = "/" component = { BasicForm } />
84- < Route path = "/strategies" component = { StrategiesForm } />
85- < Route path = "/fields-listener" component = { FieldsListenerForm } />
86- < Route path = "/async-validation" component = { AsyncValidationForm } />
87- < Route path = "/async-submission" component = { AsyncSubmissionForm } />
88- < Route path = "/checkboxes" component = { CheckboxesForm } />
89- < Route path = "/iban" component = { IBANForm } />
90- < Route path = "/credit-card" component = { CreditCardForm } />
91- < Route path = "/input-masking" component = { InputMaskingForm } />
92- </ Flex >
93- </ Router >
85+ { match ( route )
86+ . with ( { name : "Home" } , ( ) => < BasicForm /> )
87+ . with ( { name : "Strategies" } , ( ) => < StrategiesForm /> )
88+ . with ( { name : "FieldsListener" } , ( ) => < FieldsListenerForm /> )
89+ . with ( { name : "AsyncValidation" } , ( ) => < AsyncValidationForm /> )
90+ . with ( { name : "AsyncSubmission" } , ( ) => < AsyncSubmissionForm /> )
91+ . with ( { name : "Checkboxes" } , ( ) => < CheckboxesForm /> )
92+ . with ( { name : "IBAN" } , ( ) => < IBANForm /> )
93+ . with ( { name : "CreditCard" } , ( ) => < CreditCardForm /> )
94+ . with ( { name : "InputMasking" } , ( ) => < InputMaskingForm /> )
95+ . with ( P . nullish , ( ) => < Page title = "Not found" /> )
96+ . exhaustive ( ) }
97+ </ Flex >
9498 ) ;
9599} ;
0 commit comments