diff --git a/package-lock.json b/package-lock.json
index 74dd0cc5..5e6adcc8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17594,6 +17594,12 @@
 "is-typedarray": "^1.0.0"
 }
 },
+ "typescript": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
+ "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
+ "dev": true
+ },
 "typographic-apostrophes": {
 "version": "1.1.1",
 "resolved": "https://registry.npmjs.org/typographic-apostrophes/-/typographic-apostrophes-1.1.1.tgz",
diff --git a/package.json b/package.json
index 44c666a0..343e991a 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
 "husky": "^4.3.8",
 "npm-run-all": "^4.1.5",
 "prettier": "^2.2.1",
- "react-scripts": "^4.0.1"
+ "react-scripts": "^4.0.1",
+ "typescript": "^4.1.3"
 },
 "scripts": {
 "start": "react-scripts start",
@@ -53,7 +54,14 @@
 ]
 },
 "eslintConfig": {
- "extends": "react-app"
+ "extends": [
+ "react-app",
+ "react-app/jest",
+ "plugin:jsx-a11y/recommended"
+ ],
+ "plugins": [
+ "jsx-a11y"
+ ]
 },
 "babel": {
 "presets": [
diff --git a/src/__tests__/01.js b/src/__tests__/01.tsx
similarity index 83%
rename from src/__tests__/01.js
rename to src/__tests__/01.tsx
index a64822db..3a57f027 100644
--- a/src/__tests__/01.js
+++ b/src/__tests__/01.tsx
@@ -4,13 +4,16 @@ import userEvent from '@testing-library/user-event'
 import * as userClient from '../user-client'
 import {AuthProvider} from '../auth-context'
 import App from '../final/01'
+import type {User} from '../types'
 // import App from '../exercise/01'
 
 jest.mock('../user-client', () => {
 return {updateUser: jest.fn(() => Promise.resolve())}
 })
 
-const mockUser = {username: 'jakiechan', tagline: '', bio: ''}
+const mockUserClient = userClient as jest.Mocked<typeof userClient>;
+
+const mockUser: User = {username: 'jakiechan', tagline: '', bio: ''}
 
 function renderApp() {
 const utils = render(
@@ -24,14 +27,20 @@ function renderApp() {
 ...utils,
 submitButton: screen.getByText(/✔/),
 resetButton: screen.getByText(/reset/i),
- taglineInput: screen.getByLabelText(/tagline/i),
- bioInput: screen.getByLabelText(/bio/i),
+ taglineInput: screen.getByLabelText(/tagline/i) as HTMLInputElement,
+ bioInput: screen.getByLabelText(/bio/i) as HTMLInputElement,
 waitForLoading: () =>
 waitForElementToBeRemoved(() => screen.getByText(/\.\.\./i)),
 userDisplayPre,
- getDisplayData: () => JSON.parse(userDisplayPre.textContent),
+ getDisplayData: () => {
+ if (userDisplayPre && userDisplayPre.textContent) {
+ return JSON.parse(userDisplayPre.textContent)
+ }
+ throw new Error('userDisplayPre node is null')
+ },
 }
 }
+// type T0 = HTMLElement
 
 test('happy path works', async () => {
 const {
@@ -57,7 +66,7 @@ test('happy path works', async () => {
 expect(resetButton).not.toHaveAttribute('disabled')
 
 const updatedUser = {...mockUser, ...testData}
- userClient.updateUser.mockImplementationOnce(() =>
+ mockUserClient.updateUser.mockImplementationOnce(() =>
 Promise.resolve(updatedUser),
 )
 
@@ -70,7 +79,7 @@ test('happy path works', async () => {
 // submitting the form invokes userClient.updateUser
 expect(userClient.updateUser).toHaveBeenCalledTimes(1)
 expect(userClient.updateUser).toHaveBeenCalledWith(mockUser, testData)
- userClient.updateUser.mockClear()
+ mockUserClient.updateUser.mockClear()
 
 // once the submit button changes from ... then we know the request is over
 await waitForLoading()
@@ -109,7 +118,7 @@ test('failure works', async () => {
 const testData = {...mockUser, bio: 'test bio'}
 userEvent.type(bioInput, testData.bio)
 const testErrorMessage = 'test error message'
- userClient.updateUser.mockImplementationOnce(() =>
+ mockUserClient.updateUser.mockImplementationOnce(() =>
 Promise.reject({message: testErrorMessage}),
 )
 
@@ -123,9 +132,9 @@ test('failure works', async () => {
 screen.getByText(testErrorMessage)
 expect(getDisplayData()).toEqual(mockUser)
 
- userClient.updateUser.mockClear()
+ mockUserClient.updateUser.mockClear()
 
- userClient.updateUser.mockImplementationOnce(() =>
+ mockUserClient.updateUser.mockImplementationOnce(() =>
 Promise.resolve(updatedUser),
 )
 userEvent.click(submitButton)
diff --git a/src/__tests__/02.js b/src/__tests__/02.tsx
similarity index 95%
rename from src/__tests__/02.js
rename to src/__tests__/02.tsx
index c2e315db..e561e40a 100644
--- a/src/__tests__/02.js
+++ b/src/__tests__/02.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import {renderToggle} from '../../test/utils'
 import App from '../final/02'
+// import App from '../final-ts/02'
 // import App from '../exercise/02'
 
 test('renders a toggle component', () => {
diff --git a/src/__tests__/03.js b/src/__tests__/03.tsx
similarity index 95%
rename from src/__tests__/03.js
rename to src/__tests__/03.tsx
index 96a8d0cd..523c9d3d 100644
--- a/src/__tests__/03.js
+++ b/src/__tests__/03.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import {renderToggle} from '../../test/utils'
 import App from '../final/03'
+// import App from '../final-ts/03'
 // import App from '../exercise/03'
 
 test('renders a toggle component', () => {
diff --git a/src/__tests__/04.js b/src/__tests__/04.tsx
similarity index 96%
rename from src/__tests__/04.js
rename to src/__tests__/04.tsx
index eeb1afc6..ba75feb3 100644
--- a/src/__tests__/04.js
+++ b/src/__tests__/04.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import {renderToggle, screen, userEvent} from '../../test/utils'
 import App from '../final/04'
+// import App from '../final-ts/04'
 // import App from '../exercise/04'
 
 test('renders a toggle component', () => {
diff --git a/src/__tests__/05.js b/src/__tests__/05.tsx
similarity index 89%
rename from src/__tests__/05.js
rename to src/__tests__/05.tsx
index 735f644a..ecb99aa6 100644
--- a/src/__tests__/05.js
+++ b/src/__tests__/05.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react'
 import {renderToggle, screen, userEvent} from '../../test/utils'
 import App from '../final/05'
+// import App from '../final-ts/05'
+// import App from '../final-ts/05.extra-1'
+// import App from '../final-ts/05.extra-2'
+
 // import App from '../exercise/05'
+// import App from '../exercise-ts/05'
 
 test('renders a toggle component', () => {
 const {toggleButton, toggle} = renderToggle(<app />)
diff --git a/src/__tests__/06.extra-4.js b/src/__tests__/06.extra-4.tsx
similarity index 96%
rename from src/__tests__/06.extra-4.js
rename to src/__tests__/06.extra-4.tsx
index 2ca7fa51..61b7b6f6 100644
--- a/src/__tests__/06.extra-4.js
+++ b/src/__tests__/06.extra-4.tsx
@@ -3,7 +3,9 @@ import {alfredTip} from '@kentcdodds/react-workshop-app/test-utils'
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {Toggle} from '../final/06.extra-4'
+// import {Toggle} from '../final-ts/06.extra-4'
 // import {Toggle} from '../exercise/06'
+// import {Toggle} from '../exercise-ts/06'
 
 beforeEach(() => {
 jest.spyOn(console, 'error').mockImplementation(() => {})
diff --git a/src/__tests__/06.js b/src/__tests__/06.tsx
similarity index 84%
rename from src/__tests__/06.js
rename to src/__tests__/06.tsx
index 9de68ba7..73480af3 100644
--- a/src/__tests__/06.js
+++ b/src/__tests__/06.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react'
 import {renderToggle, screen, userEvent} from '../../test/utils'
-import App, {Toggle} from '../final/06'
+// import App, {Toggle} from '../final/06'
+import App, {Toggle} from '../final-ts/06'
 // import App, {Toggle} from '../exercise/06'
+// import App, {Toggle} from '../exercise-ts/06'
 
 test('toggling either toggle toggles both', () => {
 renderToggle(<app />)
diff --git a/src/auth-context.js b/src/auth-context.tsx
similarity index 59%
rename from src/auth-context.js
rename to src/auth-context.tsx
index bc6c3944..bf138c44 100644
--- a/src/auth-context.js
+++ b/src/auth-context.tsx
@@ -1,17 +1,23 @@
 import * as React from 'react'
+import type {User} from './types'
 
 // normally this is going to implement a similar pattern
 // learn more here: https://kcd.im/auth
 
-const AuthContext = React.createContext({
+interface IAuthContext {
+ user: User
+}
+
+const AuthContext = React.createContext<iauthcontext>({
 user: {username: 'jakiechan', tagline: '', bio: ''},
 })
 AuthContext.displayName = 'AuthContext'
-const AuthProvider = ({user, ...props}) => (
+
+const AuthProvider: React.FC<{user: IAuthContext}> = ({user, ...props}) => (
 <authcontext.provider value={user} {...props} />
 )
 
-function useAuth() {
+function useAuth(): IAuthContext {
 return React.useContext(AuthContext)
 }
 
diff --git a/src/exercise/01.tsx b/src/exercise/01.tsx
new file mode 100644
index 00000000..7e9cf0ba
--- /dev/null
+++ b/src/exercise/01.tsx
@@ -0,0 +1,220 @@
+// Context Module Functions
+// http://localhost:3000/isolated/exercise/01.js
+
+import * as React from 'react'
+import {dequal} from 'dequal'
+
+// ./context/user-context.js
+
+import * as userClient from '../user-client'
+import {useAuth} from '../auth-context'
+import type {User} from '../types'
+
+type State = {
+ status: null &#124; 'pending' &#124; 'resolved' &#124; 'rejected'
+ error: null &#124; Error
+ user: User
+ storedUser: null &#124; User
+}
+
+type Action =
+ &#124; {type: 'start update'; updates: User}
+ &#124; {type: 'finish update'; updatedUser: User}
+ &#124; {type: 'fail update'; error: Error}
+ &#124; {type: 'reset'}
+function userReducer(state: State, action: Action): State {
+ switch (action.type) {
+ case 'start update': {
+ return {
+ ...state,
+ user: {...state.user, ...action.updates},
+ status: 'pending',
+ storedUser: state.user,
+ }
+ }
+ case 'finish update': {
+ return {
+ ...state,
+ user: action.updatedUser,
+ status: 'resolved',
+ storedUser: null,
+ error: null,
+ }
+ }
+ case 'fail update': {
+ return {
+ ...state,
+ status: 'rejected',
+ error: action.error,
+ // @ts-expect-error FIXME: Type 'User &#124; null' is not assignable to type 'User'.
+ user: state.storedUser,
+ storedUser: null,
+ }
+ }
+ case 'reset': {
+ return {
+ ...state,
+ status: null,
+ error: null,
+ }
+ }
+ default: {
+ // @ts-expect-error
+ throw new Error(`Unhandled action type: ${action.type}`)
+ }
+ }
+}
+
+type UserContextType = readonly [state: State, dispatch: React.Dispatch<action>]
+const UserContext = React.createContext<usercontexttype>(undefined!)
+UserContext.displayName = 'UserContext'
+
+type UserProviderProps = {children: React.ReactNode}
+function UserProvider({children}: UserProviderProps): JSX.Element {
+ const {user} = useAuth()
+ const [state, dispatch] = React.useReducer(userReducer, {
+ status: null,
+ error: null,
+ storedUser: user,
+ user,
+ })
+ const value = [state, dispatch] as const
+ return <usercontext.provider value={value} children={children} />
+}
+
+function useUser(): UserContextType {
+ const context = React.useContext(UserContext)
+ if (context === undefined) {
+ throw new Error(`useUser must be used within a UserProvider`)
+ }
+ return context
+}
+
+// 🐨 add a function here called `updateUser`
+// Then go down to the `handleSubmit` from `UserSettings` and put that logic in
+// this function. It should accept: dispatch, user, and updates
+
+// export {UserProvider, useUser}
+
+// src/screens/user-profile.js
+// import {UserProvider, useUser} from './context/user-context'
+function UserSettings(): JSX.Element {
+ const [{user, status, error}, userDispatch] = useUser()
+
+ const isPending: boolean = status === 'pending'
+ const isRejected: boolean = status === 'rejected'
+
+ const [formState, setFormState] = React.useState(user)
+
+ const isChanged: boolean = !dequal(user, formState)
+
+ function handleChange(
+ e: React.ChangeEvent<htmltextareaelement &#124; HTMLInputElement>,
+ ): void {
+ setFormState({...formState, [e.target.name]: e.target.value})
+ }
+
+ function handleSubmit(event: React.FormEvent<htmlformelement>): void {
+ event.preventDefault()
+ // 🐨 move the following logic to the `updateUser` function you create above
+ userDispatch({type: 'start update', updates: formState})
+ userClient.updateUser(user, formState).then(
+ updatedUser => userDispatch({type: 'finish update', updatedUser}),
+ error => userDispatch({type: 'fail update', error}),
+ )
+ }
+
+ return (
+ <form>
+ <div style={{marginBottom: 12}}>
+ <label style={{display: 'block'}} htmlFor="username">
+ Username
+ </label>
+ <input + id="username" + name="username" + disabled + readOnly + value={formState.username} + style={{width: '100%'}} + />
+ </div>
+ <div style={{marginBottom: 12}}>
+ <label style={{display: 'block'}} htmlFor="tagline">
+ Tagline
+ </label>
+ <input + id="tagline" + name="tagline" + value={formState.tagline} + + style={{width: '100%'}} + />
+ </div>
+ <div style={{marginBottom: 12}}>
+ <label style={{display: 'block'}} htmlFor="bio">
+ Biography
+ </label>
+ <textarea + id="bio" + name="bio" + value={formState.bio} + + style={{width: '100%'}} + />
+ </div>
+ <div>
+ <button + type="button" + => {
+ setFormState(user)
+ userDispatch({type: 'reset'})
+ }}
+ disabled={!isChanged &#124;&#124; isPending}
+>
+ Reset
+ </button>
+ <button + type="submit" + disabled={(!isChanged && !isRejected) &#124;&#124; isPending} +>
+ {isPending
+ ? '...'
+ : isRejected
+ ? '✖ Try again'
+ : isChanged
+ ? 'Submit'
+ : '✔'}
+ </button>
+ {isRejected ? <pre style={{color: 'red'}}>{error?.message}</pre> : null}
+ </div>
+ </form>
+ )
+}
+
+function UserDataDisplay(): JSX.Element {
+ const [{user}] = useUser()
+ return <pre>{JSON.stringify(user, null, 2)}</pre>
+}
+
+function App(): JSX.Element {
+ return (
+ <div + style={{ + height: 350, + width: 300, + backgroundColor: '#ddd', + borderRadius: 4, + padding: 10, + overflow: 'scroll', + }} +>
+ <userprovider>
+ <usersettings />
+ <userdatadisplay />
+ </userprovider>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/final-ts/01.tsx b/src/final-ts/01.tsx
new file mode 100644
index 00000000..fd1eb2f4
--- /dev/null
+++ b/src/final-ts/01.tsx
@@ -0,0 +1,238 @@
+// Context Module Functions
+// http://localhost:3000/isolated/final-ts/01.tsx
+
+import * as React from 'react'
+import {dequal} from 'dequal'
+
+//#region './context/user-context.tsx'
+
+import * as userClient from '../user-client'
+import {useAuth} from '../auth-context'
+import type {User} from '../types'
+
+type State = {
+ status: null &#124; 'pending' &#124; 'resolved' &#124; 'rejected'
+ error: null &#124; Error
+ user: User
+ storedUser: null &#124; User
+}
+
+type Action =
+ &#124; {type: 'start update'; updates: User}
+ &#124; {type: 'finish update'; updatedUser: User}
+ &#124; {type: 'fail update'; error: Error}
+ &#124; {type: 'reset'}
+
+function userReducer(state: State, action: Action): State {
+ switch (action.type) {
+ case 'start update': {
+ return {
+ ...state,
+ user: {...state.user, ...action.updates},
+ status: 'pending',
+ storedUser: state.user,
+ }
+ }
+ case 'finish update': {
+ return {
+ ...state,
+ user: action.updatedUser,
+ status: 'resolved',
+ storedUser: null,
+ error: null,
+ }
+ }
+ case 'fail update': {
+ return {
+ ...state,
+ status: 'rejected',
+ error: action.error,
+ // @ts-expect-error: FIXME: Type 'User &#124; null' is not assignable to type 'User'.
+ user: state.storedUser,
+ storedUser: null,
+ }
+ }
+ case 'reset': {
+ return {
+ ...state,
+ status: null,
+ error: null,
+ }
+ }
+ default: {
+ // @ts-expect-error: Property 'type' does not exist on type 'never'
+ throw new Error(`Unhandled action type: ${action.type}`)
+ }
+ }
+}
+type UserContextType = readonly [
+ userState: State,
+ userDispatch: React.Dispatch<action>,
+]
+
+const UserContext = React.createContext<usercontexttype>(undefined!)
+UserContext.displayName = 'UserContext'
+
+type UserProviderProps = {children: React.ReactNode}
+function UserProvider({children}: UserProviderProps): JSX.Element {
+ const {user} = useAuth()
+ const [state, dispatch] = React.useReducer(userReducer, {
+ status: null,
+ error: null,
+ storedUser: user,
+ user,
+ })
+ const value = [state, dispatch] as const
+ return <usercontext.provider value={value}>{children}</usercontext.provider>
+}
+
+function useUser(): UserContextType {
+ const context = React.useContext(UserContext)
+ if (context === undefined) {
+ throw new Error(`useUser must be used within a UserProvider`)
+ }
+ return context
+}
+
+// got this idea from Dan and I love it:
+// https://twitter.com/dan_abramov/status/1125773153584676864
+async function updateUser(
+ dispatch: React.Dispatch<action>,
+ user: User,
+ updates: User,
+): Promise<user> {
+ dispatch({type: 'start update', updates})
+ try {
+ const updatedUser = await userClient.updateUser(user, updates)
+ dispatch({type: 'finish update', updatedUser})
+ return updatedUser
+ } catch (error) {
+ dispatch({type: 'fail update', error})
+ return Promise.reject(error)
+ }
+}
+
+// export {UserProvider, useUserState, updateUser}
+//#endregion './context/user-context.tsx'
+
+//#region 'src/screens/user-profile.tsx'
+// import {UserProvider, useUserState, updateUser} from './context/user-context'
+function UserSettings(): JSX.Element {
+ const [{user, status, error}, userDispatch] = useUser()
+
+ const isPending = status === 'pending'
+ const isRejected = status === 'rejected'
+
+ const [formState, setFormState] = React.useState(user)
+
+ const isChanged = !dequal(user, formState)
+
+ function handleChange(
+ e: React.ChangeEvent<htmltextareaelement &#124; HTMLInputElement>,
+ ): void {
+ setFormState({...formState, [e.target.name]: e.target.value})
+ }
+
+ function handleSubmit(event: React.FormEvent<htmlformelement>): void {
+ event.preventDefault()
+ updateUser(userDispatch, user, formState).catch(() => {
+ /* ignore the error */
+ })
+ }
+
+ return (
+ <form>
+ <div style={{marginBottom: 12}}>
+ <label style={{display: 'block'}} htmlFor="username">
+ Username
+ </label>
+ <input + id="username" + name="username" + disabled + readOnly + value={formState.username} + style={{width: '100%'}} + />
+ </div>
+ <div style={{marginBottom: 12}}>
+ <label style={{display: 'block'}} htmlFor="tagline">
+ Tagline
+ </label>
+ <input + id="tagline" + name="tagline" + value={formState.tagline} + + style={{width: '100%'}} + />
+ </div>
+ <div style={{marginBottom: 12}}>
+ <label style={{display: 'block'}} htmlFor="bio">
+ Biography
+ </label>
+ <textarea + id="bio" + name="bio" + value={formState.bio} + + style={{width: '100%'}} + />
+ </div>
+ <div>
+ <button + type="button" + => {
+ setFormState(user)
+ userDispatch({type: 'reset'})
+ }}
+ disabled={!isChanged &#124;&#124; isPending}
+>
+ Reset
+ </button>
+ <button + type="submit" + disabled={(!isChanged && !isRejected) &#124;&#124; isPending} +>
+ {isPending
+ ? '...'
+ : isRejected
+ ? '✖ Try again'
+ : isChanged
+ ? 'Submit'
+ : '✔'}
+ </button>
+ {isRejected ? <pre style={{color: 'red'}}>{error?.message}</pre> : null}
+ </div>
+ </form>
+ )
+}
+
+function UserDataDisplay(): JSX.Element {
+ const [{user}] = useUser()
+ return <pre>{JSON.stringify(user, null, 2)}</pre>
+}
+
+//#endregion 'src/screens/user-profile.tsx'
+
+function App(): JSX.Element {
+ return (
+ <div + style={{ + height: 350, + width: 300, + backgroundColor: '#ddd', + borderRadius: 4, + padding: 10, + overflow: 'scroll', + }} +>
+ <userprovider>
+ <usersettings />
+ <userdatadisplay />
+ </userprovider>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/final-ts/02.extra-1.tsx b/src/final-ts/02.extra-1.tsx
new file mode 100644
index 00000000..d718ece3
--- /dev/null
+++ b/src/final-ts/02.extra-1.tsx
@@ -0,0 +1,55 @@
+// Compound Components
+// http://localhost:3000/isolated/final-ts/02.extra-1.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+
+const Toggle: React.FC = ({children}) => {
+ const [on, setOn] = React.useState(false)
+ const toggle = () => setOn(!on)
+ return (
+ <strong>
+ {React.Children.map(children, child =>
+ React.isValidElement(child) && typeof child.type !== 'string'
+ ? React.cloneElement(child, {on, toggle})
+ : child,
+ )}
+ </strong>
+ )
+}
+
+const ToggleOn: React.FC<{on?: boolean}> = ({on, children}) => {
+ return on ? <strong>{children}</strong> : null
+}
+
+const ToggleOff: React.FC<{on?: boolean}> = ({on, children}) => {
+ return on ? null : <strong>{children}</strong>
+}
+
+type ToggleButtonProps = Partial<react.componentprops<typeof Switch>> &
+ Partial<{ + on: boolean + toggle: React.ComponentProps<typeof Switch>['onClick']
+ }>
+const ToggleButton: React.VFC<togglebuttonprops> = ({
+ on = false,
+ toggle = () => void 0,
+ ...props
+}) => {
+ return <switch on={on} {...props} />
+}
+
+function App(): JSX.Element {
+ return (
+ <div>
+ <toggle>
+ <toggleon>The button is on</toggleon>
+ <toggleoff>The button is off</toggleoff>
+ <span> Hello</span>
+ <togglebutton />
+ </toggle>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/final-ts/02.tsx b/src/final-ts/02.tsx
new file mode 100644
index 00000000..f2e87637
--- /dev/null
+++ b/src/final-ts/02.tsx
@@ -0,0 +1,56 @@
+// Compound Components
+// http://localhost:3000/isolated/final-ts/02.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+
+const Toggle: React.FC = ({children}) => {
+ const [on, setOn] = React.useState(false)
+ const toggle = () => setOn(!on)
+ return (
+ <strong>
+ {React.Children.map(children, child =>
+ React.cloneElement(
+ //@ts-expect-errors
+ child,
+ {on, toggle},
+ ),
+ )}
+ </strong>
+ )
+}
+
+const ToggleOn: React.FC<{on?: boolean}> = ({on, children}) => {
+ return on ? <strong>{children}</strong> : null
+}
+
+const ToggleOff: React.FC<{on?: boolean}> = ({on, children}) => {
+ return on ? null : <strong>{children}</strong>
+}
+
+type ToggleButtonProps = Partial<react.componentprops<typeof Switch>> &
+ Partial<{ + on: boolean + toggle: React.ComponentProps<typeof Switch>['onClick']
+ }>
+const ToggleButton: React.VFC<togglebuttonprops> = ({
+ on = false,
+ toggle = () => void 0,
+ ...props
+}) => {
+ return <switch on={on} {...props} />
+}
+
+function App(): JSX.Element {
+ return (
+ <div>
+ <toggle>
+ <toggleon>The button is on</toggleon>
+ <toggleoff>The button is off</toggleoff>
+ <togglebutton />
+ </toggle>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/final-ts/03.extra-1.tsx b/src/final-ts/03.extra-1.tsx
new file mode 100644
index 00000000..944e5ae4
--- /dev/null
+++ b/src/final-ts/03.extra-1.tsx
@@ -0,0 +1,59 @@
+// Flexible Compound Components with context
+// http://localhost:3000/isolated/final-ts/03.extra-1.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+interface ToggleContextType {
+ readonly on: boolean
+ readonly toggle: () => void
+}
+const ToggleContext = React.createContext<togglecontexttype>(undefined!)
+ToggleContext.displayName = 'ToggleContext'
+
+const Toggle: React.FC = props => {
+ const [on, setOn] = React.useState(false)
+ const toggle = () => setOn(!on)
+ const value: ToggleContextType = {on, toggle} as const
+ return <togglecontext.provider value={value} {...props} />
+}
+
+function useToggle(): ToggleContextType {
+ const context = React.useContext(ToggleContext)
+ if (context === undefined) {
+ throw new Error('useToggle must be used within a <toggle />')
+ }
+ return context
+}
+
+const ToggleOn: React.FC = ({children}) => {
+ const {on} = useToggle()
+ return on ? <strong>{children}</strong> : null
+}
+
+const ToggleOff: React.FC = ({children}) => {
+ const {on} = useToggle()
+ return on ? null : <strong>{children}</strong>
+}
+
+const ToggleButton: React.FC< + Partial<react.componentprops<typeof Switch>>
+> = props => {
+ const {on, toggle} = useToggle()
+ return <switch {...props} on={on} />
+}
+
+function App(): JSX.Element {
+ return (
+ <div>
+ <toggle>
+ <toggleon>The button is on</toggleon>
+ <toggleoff>The button is off</toggleoff>
+ <div>
+ <togglebutton />
+ </div>
+ </toggle>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/final-ts/03.tsx b/src/final-ts/03.tsx
new file mode 100644
index 00000000..74ef9157
--- /dev/null
+++ b/src/final-ts/03.tsx
@@ -0,0 +1,55 @@
+// Flexible Compound Components with context
+// http://localhost:3000/isolated/final-ts/03.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+interface ToggleContextType {
+ readonly on: boolean
+ readonly toggle: () => void
+}
+const ToggleContext = React.createContext<togglecontexttype>(undefined!)
+ToggleContext.displayName = 'ToggleContext'
+
+const Toggle: React.FC = props => {
+ const [on, setOn] = React.useState(false)
+ const toggle = () => setOn(!on)
+ const value: ToggleContextType = {on, toggle} as const
+ return <togglecontext.provider value={value} {...props} />
+}
+
+function useToggle(): ToggleContextType {
+ return React.useContext(ToggleContext)
+}
+
+const ToggleOn: React.FC = ({children}) => {
+ const {on} = useToggle()
+ return on ? <strong>{children}</strong> : null
+}
+
+const ToggleOff: React.FC = ({children}) => {
+ const {on} = useToggle()
+ return on ? null : <strong>{children}</strong>
+}
+
+const ToggleButton: React.FC< + Partial<react.componentprops<typeof Switch>>
+> = props => {
+ const {on, toggle} = useToggle()
+ return <switch {...props} on={on} />
+}
+
+function App(): JSX.Element {
+ return (
+ <div>
+ <toggle>
+ <toggleon>The button is on</toggleon>
+ <toggleoff>The button is off</toggleoff>
+ <div>
+ <togglebutton />
+ </div>
+ </toggle>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/final-ts/04.extra-1.tsx b/src/final-ts/04.extra-1.tsx
new file mode 100644
index 00000000..3e56bd52
--- /dev/null
+++ b/src/final-ts/04.extra-1.tsx
@@ -0,0 +1,86 @@
+// Prop Collections and Getters
+// 💯 prop getters
+// http://localhost:3000/isolated/final-ts/04.extra-1.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+
+// don't spend too much time on this generic function signature
+type CallAll = < + Fns extends Array<((...args: unknown[]) => unknown) &#124; undefined>,
+ Args extends unknown[]
+>(
+ ...fns: [...Fns]
+) => (...args: [...Args]) => void
+
+/**
+ * an utility function that help you call multiple functions in sequence
+ * @example
+ * const onclick = callAll(onClick, toggle)
+ */
+const callAll: CallAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn?.(...args))
+
+interface GetTogglerProps {
+ < + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): TogglerProps & Omit<t, 'onClick'>
+}
+
+interface TogglerProps {
+ 'aria-pressed': boolean
+ onClick: (...args: unknown[]) => void
+}
+
+interface ToggleImperativeAPI {
+ on: boolean
+ toggle: () => void
+}
+
+interface ToggleBag extends ToggleImperativeAPI {
+ getTogglerProps: GetTogglerProps
+}
+function useToggle(): ToggleBag {
+ const [on, setOn] = React.useState<boolean>(false)
+ const toggle = () => setOn(!on)
+ function getTogglerProps< + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T) {
+ return {
+ 'aria-pressed': on,
+ onClick: callAll(onClick, toggle),
+ ...props,
+ }
+ }
+
+ return {
+ on,
+ toggle,
+ getTogglerProps,
+ }
+}
+
+function App(): JSX.Element {
+ const {on, getTogglerProps} = useToggle()
+ return (
+ <div>
+ <switch {...getTogglerProps({on})} />
+ <hr />
+ <button + {...getTogglerProps({ + 'aria-label': 'custom-button', + onClick: () => console.info('onButtonClick'),
+ id: 'custom-button-id',
+ })}
+>
+ {on ? 'on' : 'off'}
+ </button>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/final-ts/04.tsx b/src/final-ts/04.tsx
new file mode 100644
index 00000000..b3040ad7
--- /dev/null
+++ b/src/final-ts/04.tsx
@@ -0,0 +1,45 @@
+// Prop Collections and Getters
+// http://localhost:3000/isolated/final-ts/04.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+
+type TogglerProps = Readonly<{ + 'aria-pressed': boolean + onClick: () => void
+}>
+
+interface ToggleBag {
+ readonly on: boolean
+ readonly toggle: () => void
+ readonly togglerProps: TogglerProps
+}
+
+function useToggle(): ToggleBag {
+ const [on, setOn] = React.useState<boolean>(false)
+ const toggle = () => setOn(!on)
+
+ return {
+ on,
+ toggle,
+ togglerProps: {
+ 'aria-pressed': on,
+ onClick: toggle,
+ },
+ } as const
+}
+
+function App(): JSX.Element {
+ const {on, togglerProps} = useToggle()
+ return (
+ <div>
+ <switch on={on} {...togglerProps} />
+ <hr />
+ <button aria-label="custom-button" {...togglerProps}>
+ {on ? 'on' : 'off'}
+ </button>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/final-ts/05.extra-1.tsx b/src/final-ts/05.extra-1.tsx
new file mode 100644
index 00000000..69e9f27e
--- /dev/null
+++ b/src/final-ts/05.extra-1.tsx
@@ -0,0 +1,160 @@
+// state reducer
+// 💯 default state reducer
+// http://localhost:3000/isolated/final-ts/05.extra-1.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+
+//#region 'src/hooks/use-toggle'
+//#region Interface
+type CallAll = < + Fns extends Array<((...args: unknown[]) => unknown) &#124; undefined>,
+ Args extends unknown[]
+>(
+ ...fns: [...Fns]
+) => (...args: [...Args]) => void
+
+interface TogglerProps {
+ 'aria-pressed': boolean
+ onClick: (...args: unknown[]) => void
+}
+interface ResetterProps {
+ onClick: (...args: unknown[]) => void
+}
+
+interface ToggleImperativeAPI {
+ on: boolean
+ toggle: () => void
+ reset: () => void
+}
+
+interface GetTogglerProps {
+ < + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): TogglerProps & Omit<t, 'onClick'>
+}
+interface GetResetterProps {
+ < + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): ResetterProps & Omit<t, 'onClick'>
+}
+//#endregion
+
+const callAll: CallAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn?.(...args))
+
+type State = {on: boolean}
+type Action = {type: 'toggle'} &#124; {type: 'reset'; initialState: State}
+
+type ToggleReducer = React.Reducer<state, Action>
+const toggleReducer: ToggleReducer = (state, action) => {
+ switch (action.type) {
+ case 'toggle':
+ return {on: !state.on}
+
+ case 'reset':
+ return action.initialState
+
+ default: {
+ // @ts-expect-error: Property 'type' does not exist on type 'never'.ts(2339)
+ throw new Error(`Unsupported type: ${action.type}`)
+ }
+ }
+}
+
+interface ToggleBag extends ToggleImperativeAPI {
+ getTogglerProps: GetTogglerProps
+ getResetterProps: GetResetterProps
+}
+function useToggle< + Option extends { + initialOn?: boolean + reducer?: typeof toggleReducer + } +>({initialOn = false, reducer = toggleReducer} = {} as Option): ToggleBag {
+ const {current: initialState} = React.useRef({on: initialOn})
+ // 🐨 instead of passing `toggleReducer` here, pass the `reducer` that's
+ // provided as an option
+ // ... and that's it! Don't forget to check the 💯 extra credit!
+ const [state, dispatch] = React.useReducer(reducer, initialState)
+ const {on} = state
+
+ const toggle = () => dispatch({type: 'toggle'})
+ const reset = () => dispatch({type: 'reset', initialState})
+
+ function getTogglerProps< + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): TogglerProps & Omit<t, 'onClick'> {
+ return {
+ 'aria-pressed': on,
+ onClick: callAll(onClick, toggle),
+ ...props,
+ }
+ }
+
+ function getResetterProps< + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): ResetterProps & Omit<t, 'onClick'> {
+ return {onClick: callAll(onClick, reset), ...props}
+ }
+
+ return {
+ on,
+ reset,
+ toggle,
+ getTogglerProps,
+ getResetterProps,
+ }
+}
+// export {useToggle, toggleReducer, ToggleReducer}
+//#endregion 'src/hooks/use-toggle'
+
+//#region 'src/app.tsx'
+// import {useToggle, toggleReducer, ToggleReducer} from 'src/hooks/use-toggle'
+function App(): JSX.Element {
+ const [timesClicked, setTimesClicked] = React.useState<number>(0)
+ const clickedTooMuch: boolean = timesClicked>= 4
+
+ const reducer: ToggleReducer = (state, action) => {
+ if (action.type === 'toggle' && clickedTooMuch) {
+ return {on: state.on}
+ }
+ return toggleReducer(state, action)
+ }
+
+ const {on, getTogglerProps, getResetterProps} = useToggle({reducer})
+
+ return (
+ <div>
+ <switch + {...getTogglerProps({ + disabled: clickedTooMuch, + on: on, + onClick: () => setTimesClicked(count => count + 1),
+ })}
+ />
+ {clickedTooMuch ? (
+ <div data-testid="notice">
+ Whoa, you clicked too much!
+ <br />
+ </div>
+ ) : timesClicked> 0 ? (
+ <div data-testid="click-count">Click count: {timesClicked}</div>
+ ) : null}
+ <button {...getResetterProps({onClick: () => setTimesClicked(0)})}>
+ Reset
+ </button>
+ </div>
+ )
+}
+
+export default App
+//#endregion 'src/app.tsx'
diff --git a/src/final-ts/05.extra-2.tsx b/src/final-ts/05.extra-2.tsx
new file mode 100644
index 00000000..c56138a0
--- /dev/null
+++ b/src/final-ts/05.extra-2.tsx
@@ -0,0 +1,163 @@
+// state reducer
+// 💯 state reducer action types
+// http://localhost:3000/isolated/final-ts/05.extra-2.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+
+//#region 'src/hooks/use-toggle'
+//#region Interface
+type CallAll = < + Fns extends Array<((...args: unknown[]) => unknown) &#124; undefined>,
+ Args extends unknown[]
+>(
+ ...fns: [...Fns]
+) => (...args: [...Args]) => void
+
+interface TogglerProps {
+ 'aria-pressed': boolean
+ onClick: (...args: unknown[]) => void
+}
+interface ResetterProps {
+ onClick: (...args: unknown[]) => void
+}
+
+interface ToggleImperativeAPI {
+ on: boolean
+ toggle: () => void
+ reset: () => void
+}
+
+interface GetTogglerProps {
+ < + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): TogglerProps & Omit<t, 'onClick'>
+}
+interface GetResetterProps {
+ < + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): ResetterProps & Omit<t, 'onClick'>
+}
+//#endregion
+
+const callAll: CallAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn?.(...args))
+
+enum ActionTypes {
+ TOGGLE = 'toggle',
+ RESET = 'reset',
+}
+type State = {
+ on: boolean
+}
+
+type Action = {type: 'toggle'} &#124; {type: 'reset'; initialState: State}
+type ToggleReducer = React.Reducer<state, Action>
+const toggleReducer: ToggleReducer = (state, action) => {
+ switch (action.type) {
+ case ActionTypes.TOGGLE:
+ return {on: !state.on}
+
+ case ActionTypes.RESET:
+ return action.initialState
+
+ default: {
+ throw new Error(`Unsupported type: ${action.type}`)
+ }
+ }
+}
+
+interface ToggleBag extends ToggleImperativeAPI {
+ getTogglerProps: GetTogglerProps
+ getResetterProps: GetResetterProps
+}
+function useToggle< + Option extends { + initialOn?: boolean + reducer?: typeof toggleReducer + } +>({initialOn = false, reducer = toggleReducer} = {} as Option): ToggleBag {
+ const {current: initialState} = React.useRef({on: initialOn})
+ // 🐨 instead of passing `toggleReducer` here, pass the `reducer` that's
+ // provided as an option
+ // ... and that's it! Don't forget to check the 💯 extra credit!
+ const [state, dispatch] = React.useReducer(reducer, initialState)
+ const {on} = state
+
+ const toggle = () => dispatch({type: 'toggle'})
+ const reset = () => dispatch({type: 'reset', initialState})
+
+ function getTogglerProps< + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): TogglerProps & Omit<t, 'onClick'> {
+ return {
+ 'aria-pressed': on,
+ onClick: callAll(onClick, toggle),
+ ...props,
+ }
+ }
+
+ function getResetterProps< + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): ResetterProps & Omit<t, 'onClick'> {
+ return {onClick: callAll(onClick, reset), ...props}
+ }
+
+ return {
+ on,
+ reset,
+ toggle,
+ getTogglerProps,
+ getResetterProps,
+ }
+}
+// export {useToggle, toggleReducer, ActionTypes}
+//#endregion 'src/hooks/use-toggle'
+
+//#region 'src/app.tsx'
+// import {useToggle, toggleReducer, ActionTypes} from 'src/hooks/use-toggle'
+function App(): JSX.Element {
+ const [timesClicked, setTimesClicked] = React.useState<number>(0)
+ const clickedTooMuch: boolean = timesClicked>= 4
+
+ const reducer: typeof toggleReducer = (state, action) =>
+ action.type === ActionTypes.TOGGLE && clickedTooMuch
+ ? {on: state.on}
+ : toggleReducer(state, action)
+
+ const {on, getTogglerProps, getResetterProps} = useToggle({reducer})
+
+ return (
+ <div>
+ <switch + {...getTogglerProps({ + disabled: clickedTooMuch, + on: on, + onClick: () => setTimesClicked(count => count + 1),
+ })}
+ />
+ {clickedTooMuch ? (
+ <div data-testid="notice">
+ Whoa, you clicked too much!
+ <br />
+ </div>
+ ) : timesClicked> 0 ? (
+ <div data-testid="click-count">Click count: {timesClicked}</div>
+ ) : null}
+ <button {...getResetterProps({onClick: () => setTimesClicked(0)})}>
+ Reset
+ </button>
+ </div>
+ )
+}
+
+export default App
+//#endregion 'src/app.tsx'
diff --git a/src/final-ts/05.tsx b/src/final-ts/05.tsx
new file mode 100644
index 00000000..d894d415
--- /dev/null
+++ b/src/final-ts/05.tsx
@@ -0,0 +1,170 @@
+// state reducer
+// http://localhost:3000/isolated/final-ts/05.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+
+//#region Interfaces
+type CallAll = < + Fns extends Array<((...args: unknown[]) => unknown) &#124; undefined>,
+ Args extends unknown[]
+>(
+ ...fns: [...Fns]
+) => (...args: [...Args]) => void
+
+interface TogglerProps {
+ 'aria-pressed': boolean
+ onClick: (...args: unknown[]) => void
+}
+interface ResetterProps {
+ onClick: (...args: unknown[]) => void
+}
+
+interface ToggleImperativeAPI {
+ on: boolean
+ toggle: () => void
+ reset: () => void
+}
+
+interface GetTogglerProps {
+ < + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): TogglerProps & Omit<t, 'onClick'>
+}
+interface GetResetterProps {
+ < + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): ResetterProps & Omit<t, 'onClick'>
+}
+
+interface ToggleBag extends ToggleImperativeAPI {
+ getTogglerProps: GetTogglerProps
+ getResetterProps: GetResetterProps
+}
+
+//#endregion Interfaces
+const callAll: CallAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn?.(...args))
+
+type ToggleState = {on: boolean}
+type ToggleAction =
+ &#124; {type: 'toggle'}
+ &#124; {type: 'reset'; initialState: ToggleState}
+function toggleReducer(state: ToggleState, action: ToggleAction): ToggleState {
+ switch (action.type) {
+ case 'toggle':
+ return {on: !state.on}
+
+ case 'reset':
+ return action.initialState
+
+ default: {
+ // @ts-expect-error: Property 'type' does not exist on type 'never'.ts(2339)
+ throw new Error(`Unsupported type: ${action.type}`)
+ }
+ }
+}
+
+function useToggle< + Option extends { + initialOn?: boolean + reducer?: typeof toggleReducer + } +>({initialOn = false, reducer = toggleReducer} = {} as Option): ToggleBag {
+ const {current: initialState} = React.useRef({on: initialOn})
+ const [state, dispatch] = React.useReducer(reducer, initialState)
+ const {on} = state
+
+ const toggle = () => dispatch({type: 'toggle'})
+ const reset = () => dispatch({type: 'reset', initialState})
+
+ function getTogglerProps< + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): TogglerProps & Omit<t, 'onClick'> {
+ return {
+ 'aria-pressed': on,
+ onClick: callAll(onClick, toggle),
+ ...props,
+ }
+ }
+
+ function getResetterProps< + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): ResetterProps & Omit<t, 'onClick'> {
+ return {
+ onClick: callAll(onClick, reset),
+ ...props,
+ }
+ }
+
+ return {
+ on,
+ reset,
+ toggle,
+ getTogglerProps,
+ getResetterProps,
+ }
+}
+
+function App() {
+ const [timesClicked, setTimesClicked] = React.useState<number>(0)
+ const clickedTooMuch: boolean = timesClicked>= 4
+
+ type ToggleState = {on: boolean}
+ type ToggleAction = {type: 'toggle'} &#124; {type: 'reset'}
+
+ function toggleStateReducer(
+ state: ToggleState,
+ action: ToggleAction,
+ ): ToggleState {
+ switch (action.type) {
+ case 'toggle':
+ return clickedTooMuch ? {on: state.on} : {on: !state.on}
+
+ case 'reset':
+ return {on: false}
+
+ default: {
+ // @ts-expect-error Property 'type' does not exist on type 'never'.ts(2339)
+ throw new Error(`Unsupported type: ${action.type}`)
+ }
+ }
+ }
+
+ const {on, getTogglerProps, getResetterProps} = useToggle({
+ reducer: toggleStateReducer,
+ })
+
+ return (
+ <div>
+ <switch + {...getTogglerProps({ + disabled: clickedTooMuch, + on: on, + onClick: () => setTimesClicked(count => count + 1),
+ })}
+ />
+ {clickedTooMuch ? (
+ <div data-testid="notice">
+ Whoa, you clicked too much!
+ <br />
+ </div>
+ ) : timesClicked> 0 ? (
+ <div data-testid="click-count">Click count: {timesClicked}</div>
+ ) : null}
+ <button {...getResetterProps({onClick: () => setTimesClicked(0)})}>
+ Reset
+ </button>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/final-ts/06.extra-1.tsx b/src/final-ts/06.extra-1.tsx
new file mode 100644
index 00000000..bfd8aeb7
--- /dev/null
+++ b/src/final-ts/06.extra-1.tsx
@@ -0,0 +1,225 @@
+// Control Props
+// http://localhost:3000/isolated/final-ts/06.extra-1.tsx
+
+import * as React from 'react'
+import warning from 'warning'
+import {Switch} from '../switch'
+
+// #region 'src/hooks/use-toggle'
+// #region Interface
+type CallAll = < + Fns extends Array<((...args: unknown[]) => unknown) &#124; undefined>,
+ Args extends unknown[]
+>(
+ ...fns: [...Fns]
+) => (...args: [...Args]) => void
+
+interface TogglerProps {
+ 'aria-pressed': boolean
+ onClick: (...args: unknown[]) => void
+}
+interface ResetterProps {
+ onClick: (...args: unknown[]) => void
+}
+
+interface ToggleImperativeAPI {
+ on: boolean
+ toggle: () => void
+ reset: () => void
+}
+
+interface GetTogglerProps {
+ < + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): TogglerProps & Omit<t, 'onClick'>
+}
+interface GetResetterProps {
+ < + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): ResetterProps & Omit<t, 'onClick'>
+}
+// #endregion Interface
+
+const callAll: CallAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn?.(...args))
+
+type State = {on: boolean}
+type Action = {type: 'toggle'} &#124; {type: 'reset'; initialState: State}
+
+const actionTypes = {
+ toggle: 'toggle',
+ reset: 'reset',
+} as const
+
+const toggleReducer: React.Reducer<state, Action> = (state, action) => {
+ switch (action.type) {
+ case actionTypes.toggle: {
+ return {on: !state.on}
+ }
+ case actionTypes.reset: {
+ return action.initialState
+ }
+ default: {
+ // @ts-expect-error: Property 'type' does not exist on type 'never'.
+ throw new Error(`Unsupported type: ${action.type}`)
+ }
+ }
+}
+
+interface ToggleBag extends ToggleImperativeAPI {
+ getTogglerProps: GetTogglerProps
+ getResetterProps: GetResetterProps
+}
+function useToggle< + ToggleOptions extends { + initialOn?: boolean + reducer?: typeof toggleReducer + onChange?: (state: State, action: Action) => void
+ on?: boolean
+ readOnly?: boolean
+ }
+>(
+ {
+ initialOn = false,
+ reducer = toggleReducer,
+ onChange,
+ on: controlledOn,
+ readOnly = false,
+ } = {} as ToggleOptions,
+): ToggleBag {
+ const {current: initialState} = React.useRef({on: initialOn})
+ const [state, dispatch] = React.useReducer(reducer, initialState)
+ const onIsControlled = controlledOn != null
+ const on = onIsControlled ? controlledOn! : state.on
+
+ const hasOnChange = Boolean(onChange)
+
+ React.useEffect(() => {
+ warning(
+ !(!hasOnChange && onIsControlled && !readOnly),
+ `An \`on\` prop was provided to useToggle without an \`onChange\` handler. This will render a read-only toggle. If you want it to be mutable, use \`initialOn\`. Otherwise, set either \`onChange\` or \`readOnly\`.`,
+ )
+ }, [hasOnChange, onIsControlled, readOnly])
+
+ function dispatchWithOnChange(action: Action): void {
+ if (!onIsControlled) {
+ dispatch(action)
+ }
+ onChange?.(reducer({...state, on}, action), action)
+ }
+
+ const toggle = () => dispatchWithOnChange({type: actionTypes.toggle})
+ const reset = () =>
+ dispatchWithOnChange({type: actionTypes.reset, initialState})
+
+ function getTogglerProps< + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): TogglerProps & Omit<t, 'onClick'> {
+ return {
+ 'aria-pressed': on,
+ onClick: callAll(onClick, toggle),
+ ...props,
+ }
+ }
+
+ function getResetterProps< + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): ResetterProps & Omit<t, 'onClick'> {
+ return {onClick: callAll(onClick, reset), ...props}
+ }
+
+ return {
+ on,
+ reset,
+ toggle,
+ getTogglerProps,
+ getResetterProps,
+ }
+}
+// export {useToggle, toggleReducer, ActionType, Action, State}
+// #endregion 'src/hooks/use-toggle'
+
+// #region 'src/components/toggle'
+// import {Switch} from 'src/components/switch'
+// import {useToggle} from 'src/hooks/use-toggle'
+type ToggleProps = {
+ on?: boolean
+ onChange?: (state: State, action: Action) => void
+ readOnly?: boolean
+}
+function Toggle({
+ on: controlledOn,
+ onChange,
+ readOnly,
+}: ToggleProps): JSX.Element {
+ const {on, getTogglerProps} = useToggle({
+ on: controlledOn,
+ onChange,
+ readOnly,
+ })
+ const props = getTogglerProps({on})
+ return <switch {...props} />
+}
+
+// export {Toggle}
+//#endregion 'src/components/toggle'
+
+// #region 'src/app'
+// import { Toggle } from 'src/components/toggle';
+function App(): JSX.Element {
+ const [bothOn, setBothOn] = React.useState<boolean>(false)
+ const [timesClicked, setTimesClicked] = React.useState<number>(0)
+
+ function handleToggleChange(state: State, action: Action): void {
+ if (action.type === actionTypes.toggle && timesClicked> 4) {
+ return
+ }
+ setBothOn(state.on)
+ setTimesClicked(c => c + 1)
+ }
+
+ function handleResetClick(): void {
+ setBothOn(false)
+ setTimesClicked(0)
+ }
+
+ return (
+ <div>
+ <div>
+ <toggle on={bothOn} />
+ <toggle on={bothOn} />
+ </div>
+ {timesClicked> 4 ? (
+ <div data-testid="notice">
+ Whoa, you clicked too much!
+ <br />
+ </div>
+ ) : (
+ <div data-testid="click-count">Click count: {timesClicked}</div>
+ )}
+ <button>Reset</button>
+ <hr />
+ <div>
+ <div>Uncontrolled Toggle:</div>
+ <toggle + =>
+ console.info('Uncontrolled Toggle onChange', ...args)
+ }
+ />
+ </div>
+ </div>
+ )
+}
+
+export default App
+export {Toggle} // we're adding the Toggle export for tests
+
+//# endregion
diff --git a/src/final-ts/06.extra-2.tsx b/src/final-ts/06.extra-2.tsx
new file mode 100644
index 00000000..841970c6
--- /dev/null
+++ b/src/final-ts/06.extra-2.tsx
@@ -0,0 +1,236 @@
+// Control Props
+// http://localhost:3000/isolated/final-ts/06.extra-2.tsx
+
+import * as React from 'react'
+import warning from 'warning'
+import {Switch} from '../switch'
+
+// #region 'src/hooks/use-toggle'
+// #region Interface
+type CallAll = < + Fns extends Array<((...args: unknown[]) => unknown) &#124; undefined>,
+ Args extends unknown[]
+>(
+ ...fns: [...Fns]
+) => (...args: [...Args]) => void
+
+interface TogglerProps {
+ 'aria-pressed': boolean
+ onClick: (...args: unknown[]) => void
+}
+interface ResetterProps {
+ onClick: (...args: unknown[]) => void
+}
+
+interface ToggleImperativeAPI {
+ on: boolean
+ toggle: () => void
+ reset: () => void
+}
+
+interface GetTogglerProps {
+ < + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): TogglerProps & Omit<t, 'onClick'>
+}
+interface GetResetterProps {
+ < + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): ResetterProps & Omit<t, 'onClick'>
+}
+// #endregion Interface
+
+const callAll: CallAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn?.(...args))
+
+type State = {on: boolean}
+type Action = {type: 'toggle'} &#124; {type: 'reset'; initialState: State}
+
+const actionTypes = {
+ toggle: 'toggle',
+ reset: 'reset',
+} as const
+
+const toggleReducer: React.Reducer<state, Action> = (state, action) => {
+ switch (action.type) {
+ case actionTypes.toggle: {
+ return {on: !state.on}
+ }
+ case actionTypes.reset: {
+ return action.initialState
+ }
+ default: {
+ // @ts-expect-error: Property 'type' does not exist on type 'never'.
+ throw new Error(`Unsupported type: ${action.type}`)
+ }
+ }
+}
+
+interface ToggleBag extends ToggleImperativeAPI {
+ getTogglerProps: GetTogglerProps
+ getResetterProps: GetResetterProps
+}
+function useToggle< + ToggleOptions extends { + initialOn?: boolean + reducer?: typeof toggleReducer + onChange?: (state: State, action: Action) => void
+ on?: boolean
+ readOnly?: boolean
+ }
+>(
+ {
+ initialOn = false,
+ reducer = toggleReducer,
+ onChange,
+ on: controlledOn,
+ readOnly = false,
+ } = {} as ToggleOptions,
+): ToggleBag {
+ const {current: initialState} = React.useRef({on: initialOn})
+ const [state, dispatch] = React.useReducer(reducer, initialState)
+ const onIsControlled = controlledOn != null
+ const on = onIsControlled ? controlledOn! : state.on
+
+ const {current: onWasControlled} = React.useRef(onIsControlled)
+ React.useEffect(() => {
+ warning(
+ !(onIsControlled && !onWasControlled),
+ `\`useToggle\` is changing from uncontrolled to be controlled. Components should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled \`useToggle\` for the lifetime of the component. Check the \`on\` prop.`,
+ )
+ warning(
+ !(!onIsControlled && onWasControlled),
+ `\`useToggle\` is changing from controlled to be uncontrolled. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled \`useToggle\` for the lifetime of the component. Check the \`on\` prop.`,
+ )
+ }, [onIsControlled, onWasControlled])
+
+ const hasOnChange = Boolean(onChange)
+ React.useEffect(() => {
+ warning(
+ !(!hasOnChange && onIsControlled && !readOnly),
+ `An \`on\` prop was provided to useToggle without an \`onChange\` handler. This will render a read-only toggle. If you want it to be mutable, use \`initialOn\`. Otherwise, set either \`onChange\` or \`readOnly\`.`,
+ )
+ }, [hasOnChange, onIsControlled, readOnly])
+
+ function dispatchWithOnChange(action: Action): void {
+ if (!onIsControlled) {
+ dispatch(action)
+ }
+ onChange?.(reducer({...state, on}, action), action)
+ }
+
+ const toggle = () => dispatchWithOnChange({type: actionTypes.toggle})
+ const reset = () =>
+ dispatchWithOnChange({type: actionTypes.reset, initialState})
+
+ function getTogglerProps< + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): TogglerProps & Omit<t, 'onClick'> {
+ return {
+ 'aria-pressed': on,
+ onClick: callAll(onClick, toggle),
+ ...props,
+ }
+ }
+
+ function getResetterProps< + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): ResetterProps & Omit<t, 'onClick'> {
+ return {onClick: callAll(onClick, reset), ...props}
+ }
+
+ return {
+ on,
+ reset,
+ toggle,
+ getTogglerProps,
+ getResetterProps,
+ }
+}
+// export {useToggle, toggleReducer, ActionType, Action, State}
+// #endregion 'src/hooks/use-toggle'
+
+// #region 'src/components/toggle'
+// import {Switch} from 'src/components/switch'
+// import {useToggle} from 'src/hooks/use-toggle'
+type ToggleProps = {
+ on?: boolean
+ onChange?: (state: State, action: Action) => void
+ readOnly?: boolean
+}
+function Toggle({
+ on: controlledOn,
+ onChange,
+ readOnly,
+}: ToggleProps): JSX.Element {
+ const {on, getTogglerProps} = useToggle({
+ on: controlledOn,
+ onChange,
+ readOnly,
+ })
+ const props = getTogglerProps({on})
+ return <switch {...props} />
+}
+
+// export {Toggle}
+//#endregion 'src/components/toggle'
+
+// #region 'src/app'
+// import { Toggle } from 'src/components/toggle';
+function App(): JSX.Element {
+ const [bothOn, setBothOn] = React.useState<boolean>(false)
+ const [timesClicked, setTimesClicked] = React.useState<number>(0)
+
+ function handleToggleChange(state: State, action: Action): void {
+ if (action.type === actionTypes.toggle && timesClicked> 4) {
+ return
+ }
+ setBothOn(state.on)
+ setTimesClicked(c => c + 1)
+ }
+
+ function handleResetClick(): void {
+ setBothOn(false)
+ setTimesClicked(0)
+ }
+
+ return (
+ <div>
+ <div>
+ <toggle on={bothOn} />
+ <toggle on={bothOn} />
+ </div>
+ {timesClicked> 4 ? (
+ <div data-testid="notice">
+ Whoa, you clicked too much!
+ <br />
+ </div>
+ ) : (
+ <div data-testid="click-count">Click count: {timesClicked}</div>
+ )}
+ <button>Reset</button>
+ <hr />
+ <div>
+ <div>Uncontrolled Toggle:</div>
+ <toggle + =>
+ console.info('Uncontrolled Toggle onChange', ...args)
+ }
+ />
+ </div>
+ </div>
+ )
+}
+
+export default App
+export {Toggle} // we're adding the Toggle export for tests
+
+//# endregion
diff --git a/src/final-ts/06.extra-3.tsx b/src/final-ts/06.extra-3.tsx
new file mode 100644
index 00000000..2f6918ac
--- /dev/null
+++ b/src/final-ts/06.extra-3.tsx
@@ -0,0 +1,284 @@
+// Control Props
+// http://localhost:3000/isolated/final-ts/06.extra-3.tsx
+
+import * as React from 'react'
+import warning from 'warning'
+import {Switch} from '../switch'
+
+// #region 'src/hooks/use-warnings'
+function useControlledSwitchWarning(
+ controlPropValue: any,
+ controlPropName: string,
+ componentName: string,
+): void {
+ const isControlled = controlPropValue != null
+ const {current: wasControlled} = React.useRef(isControlled)
+
+ React.useEffect(() => {
+ warning(
+ !(isControlled && !wasControlled),
+ `\`${componentName}\` is changing from uncontrolled to be controlled. Components should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled \`${componentName}\` for the lifetime of the component. Check the \`${controlPropName}\` prop.`,
+ )
+ warning(
+ !(!isControlled && wasControlled),
+ `\`${componentName}\` is changing from controlled to be uncontrolled. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled \`${componentName}\` for the lifetime of the component. Check the \`${controlPropName}\` prop.`,
+ )
+ }, [componentName, controlPropName, isControlled, wasControlled])
+}
+
+function useOnChangeReadOnlyWarning(
+ controlPropValue: any,
+ controlPropName: string,
+ componentName: string,
+ hasOnChange: boolean,
+ readOnly: boolean,
+ readOnlyProp: string,
+ initialValueProp: string,
+ onChangeProp: string,
+): void {
+ const isControlled = controlPropValue != null
+ React.useEffect(() => {
+ warning(
+ !(!hasOnChange && isControlled && !readOnly),
+ `A \`${controlPropName}\` prop was provided to \`${componentName}\` without an \`${onChangeProp}\` handler. This will result in a read-only \`${controlPropName}\` value. If you want it to be mutable, use \`${initialValueProp}\`. Otherwise, set either \`${onChangeProp}\` or \`${readOnlyProp}\`.`,
+ )
+ }, [
+ componentName,
+ controlPropName,
+ isControlled,
+ hasOnChange,
+ readOnly,
+ onChangeProp,
+ initialValueProp,
+ readOnlyProp,
+ ])
+}
+// export {useControlledSwitchWarning, useOnChangeReadOnlyWarning}
+// #endregion 'src/hooks/use-warnings'
+
+// #region 'src/hooks/use-toggle'
+// import {
+// useControlledSwitchWarning,
+// useOnChangeReadOnlyWarning,
+// } from 'src/hooks/use-warnings'
+// #region Interface
+type CallAll = < + Fns extends Array<((...args: unknown[]) => unknown) &#124; undefined>,
+ Args extends unknown[]
+>(
+ ...fns: [...Fns]
+) => (...args: [...Args]) => void
+
+interface TogglerProps {
+ 'aria-pressed': boolean
+ onClick: (...args: unknown[]) => void
+}
+interface ResetterProps {
+ onClick: (...args: unknown[]) => void
+}
+
+interface ToggleImperativeAPI {
+ on: boolean
+ toggle: () => void
+ reset: () => void
+}
+
+interface GetTogglerProps {
+ < + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): TogglerProps & Omit<t, 'onClick'>
+}
+interface GetResetterProps {
+ < + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): ResetterProps & Omit<t, 'onClick'>
+}
+// #endregion Interface
+
+const callAll: CallAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn?.(...args))
+
+type State = {on: boolean}
+type Action = {type: 'toggle'} &#124; {type: 'reset'; initialState: State}
+
+const actionTypes = {
+ toggle: 'toggle',
+ reset: 'reset',
+} as const
+
+const toggleReducer: React.Reducer<state, Action> = (state, action) => {
+ switch (action.type) {
+ case actionTypes.toggle: {
+ return {on: !state.on}
+ }
+ case actionTypes.reset: {
+ return action.initialState
+ }
+ default: {
+ // @ts-expect-error: Property 'type' does not exist on type 'never'.
+ throw new Error(`Unsupported type: ${action.type}`)
+ }
+ }
+}
+
+interface ToggleBag extends ToggleImperativeAPI {
+ getTogglerProps: GetTogglerProps
+ getResetterProps: GetResetterProps
+}
+function useToggle< + ToggleOptions extends { + initialOn?: boolean + reducer?: typeof toggleReducer + onChange?: (state: State, action: Action) => void
+ on?: boolean
+ readOnly?: boolean
+ }
+>(
+ {
+ initialOn = false,
+ reducer = toggleReducer,
+ onChange,
+ on: controlledOn,
+ readOnly = false,
+ } = {} as ToggleOptions,
+): ToggleBag {
+ const {current: initialState} = React.useRef({on: initialOn})
+ const [state, dispatch] = React.useReducer(reducer, initialState)
+
+ const onIsControlled = controlledOn != null
+ const on = onIsControlled ? controlledOn! : state.on
+
+ useControlledSwitchWarning(controlledOn, 'on', 'useToggle')
+ useOnChangeReadOnlyWarning(
+ controlledOn,
+ 'on',
+ 'useToggle',
+ Boolean(onChange),
+ readOnly,
+ 'readOnly',
+ 'initialOn',
+ 'onChange',
+ )
+
+ function dispatchWithOnChange(action: Action): void {
+ if (!onIsControlled) {
+ dispatch(action)
+ }
+ onChange?.(reducer({...state, on}, action), action)
+ }
+
+ const toggle = () => dispatchWithOnChange({type: actionTypes.toggle})
+ const reset = () =>
+ dispatchWithOnChange({type: actionTypes.reset, initialState})
+
+ function getTogglerProps< + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): TogglerProps & Omit<t, 'onClick'> {
+ return {
+ 'aria-pressed': on,
+ onClick: callAll(onClick, toggle),
+ ...props,
+ }
+ }
+
+ function getResetterProps< + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): ResetterProps & Omit<t, 'onClick'> {
+ return {onClick: callAll(onClick, reset), ...props}
+ }
+
+ return {
+ on,
+ reset,
+ toggle,
+ getTogglerProps,
+ getResetterProps,
+ }
+}
+// export {useToggle, toggleReducer, ActionType, Action, State}
+// #endregion 'src/hooks/use-toggle'
+
+// #region 'src/components/toggle'
+// import {Switch} from 'src/components/switch'
+// import {useToggle} from 'src/hooks/use-toggle'
+type ToggleProps = {
+ on?: boolean
+ onChange?: (state: State, action: Action) => void
+ readOnly?: boolean
+}
+function Toggle({
+ on: controlledOn,
+ onChange,
+ readOnly,
+}: ToggleProps): JSX.Element {
+ const {on, getTogglerProps} = useToggle({
+ on: controlledOn,
+ onChange,
+ readOnly,
+ })
+ const props = getTogglerProps({on})
+ return <switch {...props} />
+}
+
+// export {Toggle}
+//#endregion 'src/components/toggle'
+
+// #region 'src/app'
+// import { Toggle } from 'src/components/toggle';
+function App(): JSX.Element {
+ const [bothOn, setBothOn] = React.useState<boolean>(false)
+ const [timesClicked, setTimesClicked] = React.useState<number>(0)
+
+ function handleToggleChange(state: State, action: Action): void {
+ if (action.type === actionTypes.toggle && timesClicked> 4) {
+ return
+ }
+ setBothOn(state.on)
+ setTimesClicked(c => c + 1)
+ }
+
+ function handleResetClick(): void {
+ setBothOn(false)
+ setTimesClicked(0)
+ }
+
+ return (
+ <div>
+ <div>
+ <toggle on={bothOn} />
+ <toggle on={bothOn} />
+ </div>
+ {timesClicked> 4 ? (
+ <div data-testid="notice">
+ Whoa, you clicked too much!
+ <br />
+ </div>
+ ) : (
+ <div data-testid="click-count">Click count: {timesClicked}</div>
+ )}
+ <button>Reset</button>
+ <hr />
+ <div>
+ <div>Uncontrolled Toggle:</div>
+ <toggle + =>
+ console.info('Uncontrolled Toggle onChange', ...args)
+ }
+ />
+ </div>
+ </div>
+ )
+}
+
+export default App
+export {Toggle} // we're adding the Toggle export for tests
+
+//# endregion
diff --git a/src/final-ts/06.extra-4.tsx b/src/final-ts/06.extra-4.tsx
new file mode 100644
index 00000000..9737c5ea
--- /dev/null
+++ b/src/final-ts/06.extra-4.tsx
@@ -0,0 +1,297 @@
+// Control Props
+// http://localhost:3000/isolated/final-ts/06.extra-4.tsx
+
+import * as React from 'react'
+import warning from 'warning'
+import {Switch} from '../switch'
+
+// #region 'src/hooks/use-warnings'
+function useControlledSwitchWarning(
+ controlPropValue: any,
+ controlPropName: string,
+ componentName: string,
+): void {
+ const isControlled = controlPropValue != null
+ const {current: wasControlled} = React.useRef(isControlled)
+ let effect: () => void = (): void => void 0
+ if (process.env.NODE_ENV !== 'production') {
+ effect = () => {
+ warning(
+ !(isControlled && !wasControlled),
+ `\`${componentName}\` is changing from uncontrolled to be controlled. Components should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled \`${componentName}\` for the lifetime of the component. Check the \`${controlPropName}\` prop.`,
+ )
+ warning(
+ !(!isControlled && wasControlled),
+ `\`${componentName}\` is changing from controlled to be uncontrolled. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled \`${componentName}\` for the lifetime of the component. Check the \`${controlPropName}\` prop.`,
+ )
+ }
+ }
+ React.useEffect(effect, [
+ componentName,
+ controlPropName,
+ isControlled,
+ wasControlled,
+ ])
+}
+
+function useOnChangeReadOnlyWarning(
+ controlPropValue: any,
+ controlPropName: string,
+ componentName: string,
+ hasOnChange: boolean,
+ readOnly: boolean,
+ readOnlyProp: string,
+ initialValueProp: string,
+ onChangeProp: string,
+): void {
+ const isControlled = controlPropValue != null
+ let effect: () => void = (): void => void 0
+ if (process.env.NODE_ENV !== 'production') {
+ effect = () => {
+ warning(
+ !(!hasOnChange && isControlled && !readOnly),
+ `A \`${controlPropName}\` prop was provided to \`${componentName}\` without an \`${onChangeProp}\` handler. This will result in a read-only \`${controlPropName}\` value. If you want it to be mutable, use \`${initialValueProp}\`. Otherwise, set either \`${onChangeProp}\` or \`${readOnlyProp}\`.`,
+ )
+ }
+ }
+
+ React.useEffect(effect, [
+ componentName,
+ controlPropName,
+ isControlled,
+ hasOnChange,
+ readOnly,
+ onChangeProp,
+ initialValueProp,
+ readOnlyProp,
+ ])
+}
+// export {useControlledSwitchWarning, useOnChangeReadOnlyWarning}
+// #endregion 'src/hooks/use-warnings'
+
+// #region 'src/hooks/use-toggle'
+// import {
+// useControlledSwitchWarning,
+// useOnChangeReadOnlyWarning,
+// } from 'src/hooks/use-warnings'
+// #region Interface
+type CallAll = < + Fns extends Array<((...args: unknown[]) => unknown) &#124; undefined>,
+ Args extends unknown[]
+>(
+ ...fns: [...Fns]
+) => (...args: [...Args]) => void
+
+interface TogglerProps {
+ 'aria-pressed': boolean
+ onClick: (...args: unknown[]) => void
+}
+interface ResetterProps {
+ onClick: (...args: unknown[]) => void
+}
+
+interface ToggleImperativeAPI {
+ on: boolean
+ toggle: () => void
+ reset: () => void
+}
+
+interface GetTogglerProps {
+ < + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): TogglerProps & Omit<t, 'onClick'>
+}
+interface GetResetterProps {
+ < + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): ResetterProps & Omit<t, 'onClick'>
+}
+// #endregion Interface
+
+const callAll: CallAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn?.(...args))
+
+type State = {on: boolean}
+type Action = {type: 'toggle'} &#124; {type: 'reset'; initialState: State}
+
+const actionTypes = {
+ toggle: 'toggle',
+ reset: 'reset',
+} as const
+
+const toggleReducer: React.Reducer<state, Action> = (state, action) => {
+ switch (action.type) {
+ case actionTypes.toggle: {
+ return {on: !state.on}
+ }
+ case actionTypes.reset: {
+ return action.initialState
+ }
+ default: {
+ // @ts-expect-error: Property 'type' does not exist on type 'never'.
+ throw new Error(`Unsupported type: ${action.type}`)
+ }
+ }
+}
+
+interface ToggleBag extends ToggleImperativeAPI {
+ getTogglerProps: GetTogglerProps
+ getResetterProps: GetResetterProps
+}
+function useToggle< + ToggleOptions extends { + initialOn?: boolean + reducer?: typeof toggleReducer + onChange?: (state: State, action: Action) => void
+ on?: boolean
+ readOnly?: boolean
+ }
+>(
+ {
+ initialOn = false,
+ reducer = toggleReducer,
+ onChange,
+ on: controlledOn,
+ readOnly = false,
+ } = {} as ToggleOptions,
+): ToggleBag {
+ const {current: initialState} = React.useRef({on: initialOn})
+ const [state, dispatch] = React.useReducer(reducer, initialState)
+
+ const onIsControlled = controlledOn != null
+ const on = onIsControlled ? controlledOn! : state.on
+
+ useControlledSwitchWarning(controlledOn, 'on', 'useToggle')
+ useOnChangeReadOnlyWarning(
+ controlledOn,
+ 'on',
+ 'useToggle',
+ Boolean(onChange),
+ readOnly,
+ 'readOnly',
+ 'initialOn',
+ 'onChange',
+ )
+
+ function dispatchWithOnChange(action: Action): void {
+ if (!onIsControlled) {
+ dispatch(action)
+ }
+ onChange?.(reducer({...state, on}, action), action)
+ }
+
+ const toggle = () => dispatchWithOnChange({type: actionTypes.toggle})
+ const reset = () =>
+ dispatchWithOnChange({type: actionTypes.reset, initialState})
+
+ function getTogglerProps< + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): TogglerProps & Omit<t, 'onClick'> {
+ return {
+ 'aria-pressed': on,
+ onClick: callAll(onClick, toggle),
+ ...props,
+ }
+ }
+
+ function getResetterProps< + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): ResetterProps & Omit<t, 'onClick'> {
+ return {onClick: callAll(onClick, reset), ...props}
+ }
+
+ return {
+ on,
+ reset,
+ toggle,
+ getTogglerProps,
+ getResetterProps,
+ }
+}
+// export {useToggle, toggleReducer, ActionType, Action, State}
+// #endregion 'src/hooks/use-toggle'
+
+// #region 'src/components/toggle'
+// import {Switch} from 'src/components/switch'
+// import {useToggle} from 'src/hooks/use-toggle'
+type ToggleProps = {
+ on?: boolean
+ onChange?: (state: State, action: Action) => void
+ readOnly?: boolean
+}
+function Toggle({
+ on: controlledOn,
+ onChange,
+ readOnly,
+}: ToggleProps): JSX.Element {
+ const {on, getTogglerProps} = useToggle({
+ on: controlledOn,
+ onChange,
+ readOnly,
+ })
+ const props = getTogglerProps({on})
+ return <switch {...props} />
+}
+
+// export {Toggle}
+//#endregion 'src/components/toggle'
+
+// #region 'src/app'
+// import { Toggle } from 'src/components/toggle';
+function App(): JSX.Element {
+ const [bothOn, setBothOn] = React.useState<boolean>(false)
+ const [timesClicked, setTimesClicked] = React.useState<number>(0)
+
+ function handleToggleChange(state: State, action: Action): void {
+ if (action.type === actionTypes.toggle && timesClicked> 4) {
+ return
+ }
+ setBothOn(state.on)
+ setTimesClicked(c => c + 1)
+ }
+
+ function handleResetClick(): void {
+ setBothOn(false)
+ setTimesClicked(0)
+ }
+
+ return (
+ <div>
+ <div>
+ <toggle on={bothOn} />
+ <toggle on={bothOn} />
+ </div>
+ {timesClicked> 4 ? (
+ <div data-testid="notice">
+ Whoa, you clicked too much!
+ <br />
+ </div>
+ ) : (
+ <div data-testid="click-count">Click count: {timesClicked}</div>
+ )}
+ <button>Reset</button>
+ <hr />
+ <div>
+ <div>Uncontrolled Toggle:</div>
+ <toggle + =>
+ console.info('Uncontrolled Toggle onChange', ...args)
+ }
+ />
+ </div>
+ </div>
+ )
+}
+
+export default App
+export {Toggle} // we're adding the Toggle export for tests
+
+//# endregion
diff --git a/src/final-ts/06.tsx b/src/final-ts/06.tsx
new file mode 100644
index 00000000..e58f868b
--- /dev/null
+++ b/src/final-ts/06.tsx
@@ -0,0 +1,204 @@
+// Control Props
+// http://localhost:3000/isolated/final-ts/06.tsx
+
+import * as React from 'react'
+import {Switch} from '../switch'
+
+// #region 'src/hooks/use-toggle'
+// #region Interface
+type CallAll = < + Fns extends Array<((...args: unknown[]) => unknown) &#124; undefined>,
+ Args extends unknown[]
+>(
+ ...fns: [...Fns]
+) => (...args: [...Args]) => void
+
+interface TogglerProps {
+ 'aria-pressed': boolean
+ onClick: (...args: unknown[]) => void
+}
+interface ResetterProps {
+ onClick: (...args: unknown[]) => void
+}
+
+interface ToggleImperativeAPI {
+ on: boolean
+ toggle: () => void
+ reset: () => void
+}
+
+interface GetTogglerProps {
+ < + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): TogglerProps & Omit<t, 'onClick'>
+}
+interface GetResetterProps {
+ < + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>(
+ attributes?: T,
+ ): ResetterProps & Omit<t, 'onClick'>
+}
+// #endregion Interface
+
+const callAll: CallAll = (...fns) => (...args) =>
+ fns.forEach(fn => fn?.(...args))
+
+type State = {on: boolean}
+type Action = {type: 'toggle'} &#124; {type: 'reset'; initialState: State}
+
+const actionTypes = {
+ toggle: 'toggle',
+ reset: 'reset',
+} as const
+
+const toggleReducer: React.Reducer<state, Action> = (state, action) => {
+ switch (action.type) {
+ case actionTypes.toggle: {
+ return {on: !state.on}
+ }
+ case actionTypes.reset: {
+ return action.initialState
+ }
+ default: {
+ // @ts-expect-error: Property 'type' does not exist on type 'never'.
+ throw new Error(`Unsupported type: ${action.type}`)
+ }
+ }
+}
+
+interface ToggleBag extends ToggleImperativeAPI {
+ getTogglerProps: GetTogglerProps
+ getResetterProps: GetResetterProps
+}
+function useToggle< + ToggleOptions extends { + initialOn?: boolean + reducer?: typeof toggleReducer + onChange?: (state: State, action: Action) => void
+ on?: boolean
+ }
+>(
+ {
+ initialOn = false,
+ reducer = toggleReducer,
+ onChange,
+ on: controlledOn,
+ } = {} as ToggleOptions,
+): ToggleBag {
+ const {current: initialState} = React.useRef({on: initialOn})
+ const [state, dispatch] = React.useReducer(reducer, initialState)
+ const onIsControlled = controlledOn != null
+ const on = onIsControlled ? controlledOn! : state.on
+
+ function dispatchWithOnChange(action: Action): void {
+ if (!onIsControlled) {
+ dispatch(action)
+ }
+ onChange?.(reducer({...state, on}, action), action)
+ }
+
+ const toggle = () => dispatchWithOnChange({type: actionTypes.toggle})
+ const reset = () =>
+ dispatchWithOnChange({type: actionTypes.reset, initialState})
+
+ function getTogglerProps< + T extends Partial<togglerprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): TogglerProps & Omit<t, 'onClick'> {
+ return {
+ 'aria-pressed': on,
+ onClick: callAll(onClick, toggle),
+ ...props,
+ }
+ }
+
+ function getResetterProps< + T extends Partial<resetterprops> &
+ Partial<toggleimperativeapi> & {[AttributeName: string]: unknown}
+>({onClick, ...props} = {} as T): ResetterProps & Omit<t, 'onClick'> {
+ return {onClick: callAll(onClick, reset), ...props}
+ }
+
+ return {
+ on,
+ reset,
+ toggle,
+ getTogglerProps,
+ getResetterProps,
+ }
+}
+// export {useToggle, toggleReducer, ActionType, Action, State}
+// #endregion 'src/hooks/use-toggle'
+
+// #region 'src/components/toggle'
+// import {Switch} from 'src/components/switch'
+// import {useToggle} from 'src/hooks/use-toggle'
+type ToggleProps = {
+ on?: boolean
+ onChange?: (state: State, action: Action) => void
+}
+function Toggle({on: controlledOn, onChange}: ToggleProps): JSX.Element {
+ const {on, getTogglerProps} = useToggle({on: controlledOn, onChange})
+ const props = getTogglerProps({on})
+ return <switch {...props} />
+}
+
+// export {Toggle}
+//#endregion 'src/components/toggle'
+
+// #region 'src/app'
+// import { Toggle } from 'src/components/toggle';
+function App(): JSX.Element {
+ const [bothOn, setBothOn] = React.useState<boolean>(false)
+ const [timesClicked, setTimesClicked] = React.useState<number>(0)
+
+ function handleToggleChange(state: State, action: Action): void {
+ if (action.type === actionTypes.toggle && timesClicked> 4) {
+ return
+ }
+ setBothOn(state.on)
+ setTimesClicked(c => c + 1)
+ }
+
+ function handleResetClick(): void {
+ setBothOn(false)
+ setTimesClicked(0)
+ }
+
+ return (
+ <div>
+ <div>
+ <toggle on={bothOn} />
+ <toggle on={bothOn} />
+ </div>
+ {timesClicked> 4 ? (
+ <div data-testid="notice">
+ Whoa, you clicked too much!
+ <br />
+ </div>
+ ) : (
+ <div data-testid="click-count">Click count: {timesClicked}</div>
+ )}
+ <button>Reset</button>
+ <hr />
+ <div>
+ <div>Uncontrolled Toggle:</div>
+ <toggle + =>
+ console.info('Uncontrolled Toggle onChange', ...args)
+ }
+ />
+ </div>
+ </div>
+ )
+}
+
+export default App
+export {Toggle} // we're adding the Toggle export for tests
+
+//# endregion
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 00000000..6431bc5f
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index d9dd7e1a..00000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1 +0,0 @@
-import '@kentcdodds/react-workshop-app/setup-tests'
diff --git a/src/setupTests.ts b/src/setupTests.ts
new file mode 100644
index 00000000..9ccf8935
--- /dev/null
+++ b/src/setupTests.ts
@@ -0,0 +1,8 @@
+// jest.config.ts
+import type {Config} from '@jest/types'
+
+import '@kentcdodds/react-workshop-app/setup-tests'
+
+// Sync object
+const config: Config.InitialOptions = {}
+export default config
diff --git a/src/switch.js b/src/switch.tsx
similarity index 79%
rename from src/switch.js
rename to src/switch.tsx
index 072bb611..d36835bb 100644
--- a/src/switch.js
+++ b/src/switch.tsx
@@ -13,8 +13,15 @@ import * as React from 'react'
 // differently in codesandbox and locally :shrug:
 const noop = () => {}
 
-class Switch extends React.Component {
- render() {
+interface Props extends React.HTMLAttributes<htmlspanelement> {
+ on: boolean
+ className?: string
+ 'aria-label'?: string
+ onClick: (event: React.MouseEvent<htmlinputelement, MouseEvent>) => void
+}
+
+class Switch extends React.Component<props> {
+ public render(): JSX.Element {
 const {
 on,
 className = '',
@@ -22,13 +29,15 @@ class Switch extends React.Component {
 onClick,
 ...props
 } = this.props
- const btnClassName = [
+
+ const btnClassName: string = [
 className,
 'toggle-btn',
 on ? 'toggle-btn-on' : 'toggle-btn-off',
 ]
 .filter(Boolean)
 .join(' ')
+
 return (
 <label aria-label={ariaLabel &#124;&#124; 'Toggle'} style={{display: 'block'}}>
 <input diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 00000000..90d9a30c --- /dev/null +++ b/src/types.ts @@ -0,0 +1,5 @@ +export interface User { + username: string + tagline: string + bio: string +} diff --git a/src/typings.d.ts b/src/typings.d.ts new file mode 100644 index 00000000..49ca5dd0 --- /dev/null +++ b/src/typings.d.ts @@ -0,0 +1,8 @@ +declare module '@kentcdodds/react-workshop-app/test-utils' { + declare function alfredTip( + shouldThrow: unknown &#124; ((...args: unknown[]) => unknown),
+ tip: string,
+ ): void
+
+ export {alfredTip}
+}
diff --git a/src/user-client.js b/src/user-client.ts
similarity index 63%
rename from src/user-client.js
rename to src/user-client.ts
index afa7eff9..02c1eca5 100644
--- a/src/user-client.js
+++ b/src/user-client.ts
@@ -1,10 +1,18 @@
 // this is just a fake user client, in reality it'd probably be using
 // window.fetch to actually interact with the user.
 
-const sleep = t => new Promise(resolve => setTimeout(resolve, t))
+import type {User} from './types'
+
+const sleep = (t: number): Promise<number &#124; NodeJS.Timeout> =>
+ new Promise(resolve => setTimeout(resolve, t))
 
 // TODO: make this a real request with fetch so the signal does something
-async function updateUser(user, updates, signal) {
+
+async function updateUser(
+ user: User,
+ updates: Partial<user>,
+ signal?: any,
+): Promise<user> {
 await sleep(1500) // simulate a real-world wait period
 if (`${updates.tagline} ${updates.bio}`.includes('fail')) {
 return Promise.reject({message: 'Something went wrong'})
diff --git a/test/utils.js b/test/utils.tsx
similarity index 70%
rename from test/utils.js
rename to test/utils.tsx
index bdc24dac..2c1cb1b8 100644
--- a/test/utils.js
+++ b/test/utils.tsx
@@ -8,19 +8,24 @@ import {
 } from 'react-dom/test-utils'
 import {Switch} from '../src/switch'
 
-const findSwitchInstances = rootInstance =>
+const findSwitchInstances = (
+ rootInstance: React.Component<any, {}, any>,
+): React.ReactInstance[] =>
 findAllInRenderedTree(rootInstance, c =>
 isCompositeComponentWithType(c, Switch),
 )
 
-function validateSwitchInstance(switchInstance) {
+function validateSwitchInstance(switchInstance: React.ReactInstance): void {
 alfredTip(
 () => expect(switchInstance).toBeDefined(),
 `Unable to find the Switch component. Make sure you're rendering that!`,
 )
 alfredTip(
 () =>
- expect(switchInstance.props).toMatchObject({
+ expect(
+ // @ts-expect-error Property 'props' does not exist on type 'ReactInstance'.
+ switchInstance.props
+ ).toMatchObject({
 on: expect.any(Boolean),
 onClick: expect.any(Function),
 // it can also have aria-pressed...
@@ -37,18 +42,19 @@ class Root extends React.Component {
 }
 }
 
-function renderToggle(ui) {
- let rootInstance
- let rootRef = instance => (rootInstance = instance)
+function renderToggle(ui: React.ReactNode) {
+ let rootInstance: Root
+ let rootRef = (instance: Root): void => ((rootInstance = instance), void 0)
+
 const utils = render(<root ref={rootRef}>{ui}</root>)
- const switchInstance = findSwitchInstances(rootInstance)[0]
+ const switchInstance = findSwitchInstances(rootInstance!)[0]
 validateSwitchInstance(switchInstance)
 const toggleButton = utils.getAllByTestId('toggle-input')[0]
 
 return {
 toggle: () => userEvent.click(utils.getAllByTestId('toggle-input')[0]),
 toggleButton,
- rootInstance,
+ rootInstance: rootInstance!,
 ...utils,
 }
 }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..b13bb7be
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src", "./src/typings.d.ts"]
+}
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/epicweb-dev/advanced-react-patterns/pull/62.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/epicweb-dev/advanced-react-patterns/pull/62.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>