slots rock

exercises/03.compound-components/01.problem/toggle.tsx

@@ -31,9 +31,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
  return <>{on ? null : children}</>
 }
 
-export function ToggleButton(
- props: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>,
-) {
+export function ToggleButton(props: React.ComponentProps<typeof Switch>) {
  // 🐨 get `on` and `toggle` from the ToggleContext with `use`
  const on = false
  const toggle = () => {}

exercises/03.compound-components/01.solution/toggle.tsx

@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -28,7 +28,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
  ...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
  const { on, toggle } = use(ToggleContext)!
  return <Switch {...props} on={on} onClick={toggle} />
 }

exercises/03.compound-components/02.problem.validation/app.tsx

@@ -1,4 +1,4 @@
-import { Toggle, ToggleOn, ToggleOff, ToggleButton } from './toggle.tsx'
+import { Toggle, ToggleButton, ToggleOff, ToggleOn } from './toggle.tsx'
 
 export function App() {
  return (

exercises/03.compound-components/02.problem.validation/toggle.tsx

@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -28,7 +28,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
  ...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
  const { on, toggle } = use(ToggleContext)!
  return <Switch {...props} on={on} onClick={toggle} />
 }

exercises/03.compound-components/02.solution.validation/toggle.tsx

@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -38,7 +38,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
  ...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
  const { on, toggle } = useToggle()
  return <Switch {...props} on={on} onClick={toggle} />
 }

exercises/04.slots/01.problem.context/README.mdx

@@ -0,0 +1 @@
+# Slot Context

exercises/04.slots/01.solution/app.tsx → exercises/04.slots/01.problem.context/app.tsx

@@ -17,7 +17,9 @@ export function App() {
  </div>
  <hr />
  <div>
+ {/* 🦉 feel free to test the id customization by passing an id here */}
  <TextField>
+ {/* 🦉 feel free to test the prop merging by passing props here */}
  <Label>Venue</Label>
  <Input />
  </TextField>

exercises/04.slots/01.problem.context/slots.tsx

@@ -0,0 +1,18 @@
+// 🦺 create a Slots type that's just an object of objects
+// 🐨 create and export a SlotContext with that type and default it to an empty object
+
+// 🐨 create a useSlotProps hook which:
+// 1. accepts props (any type) and slot (string)
+// 2. gets the slots from the SlotContext
+// 3. gets the props from the slot by its name
+// 4. returns the merged props with the slot and given props
+
+export function Label(props: React.ComponentProps<'label'>) {
+ // 🐨 get the props from useSlotProps for a slot called "label" and apply those to the label
+ return <label {...props} />
+}
+
+export function Input(props: React.ComponentProps<'input'>) {
+ // 🐨 get the props from useSlotProps for a slot called "label" and apply those to the input
+ return <input {...props} />
+}

exercises/04.slots/01.problem/text-field.tsx → exercises/04.slots/01.problem.context/text-field.tsx

@@ -10,8 +10,12 @@ export function TextField({
  const generatedId = useId()
  id = id ?? generatedId
 
+ // 🐨 use these for the slot you render
  // const labelProps = { htmlFor: id }
  // const inputProps = { id }
 
+ // 🐨 wrap this in a SlotContext.Provider with the value set to an object
+ // that has a label and input property with the values of labelProps and
+ // inputProps respectively.
  return children
 }

exercises/04.slots/02.problem/toggle.tsx → exercises/04.slots/01.problem.context/toggle.tsx

@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -38,7 +38,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
  ...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
  const { on, toggle } = useToggle()
  return <Switch {...props} on={on} onClick={toggle} />
 }

exercises/04.slots/01.solution.context/README.mdx

@@ -0,0 +1 @@
+# Slot Context

exercises/04.slots/02.problem/slots.tsx → exercises/04.slots/01.solution.context/slots.tsx

@@ -1,19 +1,10 @@
 import { createContext, use } from 'react'
 
 type Slots = Record<string, Record<string, unknown>>
-const SlotContext = createContext<Slots | null>(null)
-export function SlotProvider({
- slots,
- children,
-}: {
- slots: Slots
- children: React.ReactNode
-}) {
- return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
-}
+export const SlotContext = createContext<Slots>({})
 
-export function useSlotProps<Props>(props: Props, slot: string): Props {
- const slots = use(SlotContext) ?? ({} as Slots)
+function useSlotProps<Props>(props: Props, slot: string): Props {
+ const slots = use(SlotContext)
 
  // a more proper "mergeProps" function is in order here
  // to handle things like merging event handlers better.

exercises/04.slots/01.solution/text-field.tsx → exercises/04.slots/01.solution.context/text-field.tsx

@@ -1,5 +1,5 @@
 import { useId } from 'react'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 export function TextField({
  id,
@@ -15,8 +15,8 @@ export function TextField({
  const inputProps = { id }
 
  return (
- <SlotProvider slots={{ label: labelProps, input: inputProps }}>
+ <SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
  {children}
- </SlotProvider>
+ </SlotContext.Provider>
  )
 }

exercises/04.slots/01.solution/toggle.tsx → exercises/04.slots/01.solution.context/toggle.tsx

@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -38,7 +38,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
  ...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
  const { on, toggle } = useToggle()
  return <Switch {...props} on={on} onClick={toggle} />
 }

exercises/04.slots/02.problem.generic/README.mdx

@@ -0,0 +1 @@
+# Generic Slot Components

exercises/04.slots/02.problem/app.tsx → exercises/04.slots/02.problem.generic/app.tsx

@@ -4,12 +4,15 @@ import { TextField } from './text-field.tsx'
 import { Toggle, ToggleButton, ToggleOff, ToggleOn } from './toggle.tsx'
 
 export function App() {
+ // 💣 delete this variable
  const partyModeId = useId()
  return (
  <div>
  <div>
  <Toggle>
+ {/* 🐨 switch this label for the Label component from ./slots.tsx */}
  <label htmlFor={partyModeId}>Party mode</label>
+ {/* 🐨 remove this id prop */}
  <ToggleButton id={partyModeId} />
  <ToggleOn>Let's party 🥳</ToggleOn>
  <ToggleOff>Sad town 😭</ToggleOff>

exercises/04.slots/01.solution/slots.tsx → exercises/04.slots/02.problem.generic/slots.tsx

@@ -1,19 +1,10 @@
 import { createContext, use } from 'react'
 
 type Slots = Record<string, Record<string, unknown>>
-const SlotContext = createContext<Slots | null>(null)
-export function SlotProvider({
- slots,
- children,
-}: {
- slots: Slots
- children: React.ReactNode
-}) {
- return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
-}
+export const SlotContext = createContext<Slots>({})
 
-export function useSlotProps<Props>(props: Props, slot: string): Props {
- const slots = use(SlotContext) ?? ({} as Slots)
+function useSlotProps<Props>(props: Props, slot: string): Props {
+ const slots = use(SlotContext)
 
  // a more proper "mergeProps" function is in order here
  // to handle things like merging event handlers better.

exercises/04.slots/03.problem/text-field.tsx → exercises/04.slots/02.problem.generic/text-field.tsx

@@ -1,5 +1,5 @@
 import { useId } from 'react'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 export function TextField({
  id,
@@ -15,8 +15,8 @@ export function TextField({
  const inputProps = { id }
 
  return (
- <SlotProvider slots={{ label: labelProps, input: inputProps }}>
+ <SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
  {children}
- </SlotProvider>
+ </SlotContext.Provider>
  )
 }

exercises/04.slots/01.problem/toggle.tsx → exercises/04.slots/02.problem.generic/toggle.tsx

@@ -1,14 +1,22 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
+// 🐨 add an id string to the ToggleValue type
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
+// 🐨 update this to accept an optional id
 export function Toggle({ children }: { children: React.ReactNode }) {
  const [on, setOn] = useState(false)
+ // 🐨 generate an id using useId (💰 similar to in text-field.tsx)
+
  const toggle = () => setOn(!on)
 
+ // 🐨 create labelProps that sets htmlFor to the id
+
+ // 🐨 wrap this in SlotContext.Provider and pass the labelProps in the label slot
+ // 🐨 add the id to the value in the ToggleContext.Provider
  return (
  <ToggleContext.Provider value={{ on, toggle }}>
  {children}
@@ -38,7 +46,9 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
  ...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
+ // 🐨 get the id out of useToggle
  const { on, toggle } = useToggle()
+ // 🐨 pass the id for the ToggleButton here
  return <Switch {...props} on={on} onClick={toggle} />
 }

exercises/04.slots/02.solution.generic/README.mdx

@@ -0,0 +1 @@
+# Generic Slot Components

exercises/04.slots/02.solution.generic/slots.tsx

@@ -0,0 +1,23 @@
+import { createContext, use } from 'react'
+
+type Slots = Record<string, Record<string, unknown>>
+export const SlotContext = createContext<Slots>({})
+
+function useSlotProps<Props>(props: Props, slot: string): Props {
+ const slots = use(SlotContext)
+
+ // a more proper "mergeProps" function is in order here
+ // to handle things like merging event handlers better.
+ // we'll get to that a bit in a later exercise.
+ return { ...slots[slot], slot, ...props } as Props
+}
+
+export function Label(props: React.ComponentProps<'label'>) {
+ props = useSlotProps(props, 'label')
+ return <label {...props} />
+}
+
+export function Input(props: React.ComponentProps<'input'>) {
+ props = useSlotProps(props, 'input')
+ return <input {...props} />
+}

exercises/04.slots/02.problem/text-field.tsx → exercises/04.slots/02.solution.generic/text-field.tsx

@@ -1,5 +1,5 @@
 import { useId } from 'react'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 export function TextField({
  id,
@@ -15,8 +15,8 @@ export function TextField({
  const inputProps = { id }
 
  return (
- <SlotProvider slots={{ label: labelProps, input: inputProps }}>
+ <SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
  {children}
- </SlotProvider>
+ </SlotContext.Provider>
  )
 }

exercises/04.slots/03.problem/toggle.tsx → exercises/04.slots/02.solution.generic/toggle.tsx

@@ -1,6 +1,6 @@
 import { createContext, use, useId, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 type ToggleValue = { on: boolean; toggle: () => void; id: string }
 const ToggleContext = createContext<ToggleValue | undefined>(undefined)
@@ -14,18 +14,19 @@ export function Toggle({
  children: React.ReactNode
 }) {
  const [on, setOn] = useState(false)
- const toggle = () => setOn(!on)
  const generatedId = useId()
  id = id ?? generatedId
 
+ const toggle = () => setOn(!on)
+
  const labelProps = { htmlFor: id }
 
  return (
- <SlotProvider slots={{ label: labelProps }}>
+ <SlotContext.Provider value={{ label: labelProps }}>
  <ToggleContext.Provider value={{ on, toggle, id }}>
  {children}
  </ToggleContext.Provider>
- </SlotProvider>
+ </SlotContext.Provider>
  )
 }
 
@@ -51,7 +52,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
  ...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
  const { on, toggle, id } = useToggle()
  return <Switch {...props} id={id} on={on} onClick={toggle} />
 }