improve slots exercise a lot

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

@@ -1,4 +1,5 @@
 // 🦺 create a Slots type that's just an object of objects
+// 💰 type Slots = Record<string, Record<string, unknown>>
 // 🐨 create and export a SlotContext with that type and default it to an empty object
 
 // 🐨 create a useSlotProps hook which:

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

@@ -8,14 +8,11 @@ export function TextField({
 	children: React.ReactNode
 }) {
 	const generatedId = useId()
-	id = id ?? generatedId
+	id ??= generatedId
 
-	// 🐨 use these for the slot you render
-	// const labelProps = { htmlFor: id }
-	// const inputProps = { id }
+	// 🐨 create a slots object that has props for both label and input slots
+	// 💰 the label should provide an htmlFor prop and the input should provide an 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.
+	// 🐨 wrap this in a SlotContext.Provider with the value set to the slots object
 	return children
 }

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

@@ -9,14 +9,12 @@ export function TextField({
 	children: React.ReactNode
 }) {
 	const generatedId = useId()
-	id = id ?? generatedId
+	id ??= generatedId
 
-	const labelProps = { htmlFor: id }
-	const inputProps = { id }
+	const slots = {
+		label: { htmlFor: id },
+		input: { id },
+	}
 
-	return (
-		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
-			{children}
-		</SlotContext.Provider>
-	)
+	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
 }

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

@@ -9,14 +9,12 @@ export function TextField({
 	children: React.ReactNode
 }) {
 	const generatedId = useId()
-	id = id ?? generatedId
+	id ??= generatedId
 
-	const labelProps = { htmlFor: id }
-	const inputProps = { id }
+	const slots = {
+		label: { htmlFor: id },
+		input: { id },
+	}
 
-	return (
-		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
-			{children}
-		</SlotContext.Provider>
-	)
+	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
 }

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

@@ -12,7 +12,8 @@ export function Toggle({ children }: { children: React.ReactNode }) {
 
 	const toggle = () => setOn(!on)
 
-	// 🐨 create labelProps that sets htmlFor to the id
+	// 🐨 create a slots object that has props for a slot called
+	// "label" with an htmlFor prop
 
 	// 🐨 wrap this in SlotContext.Provider and pass the labelProps in the label slot
 	// 🐨 add the id to the value in the ToggleContext.Provider

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

@@ -9,14 +9,12 @@ export function TextField({
 	children: React.ReactNode
 }) {
 	const generatedId = useId()
-	id = id ?? generatedId
+	id ??= generatedId
 
-	const labelProps = { htmlFor: id }
-	const inputProps = { id }
+	const slots = {
+		label: { htmlFor: id },
+		input: { id },
+	}
 
-	return (
-		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
-			{children}
-		</SlotContext.Provider>
-	)
+	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
 }

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

@@ -14,14 +14,14 @@ export function Toggle({
 }) {
 	const [on, setOn] = useState(false)
 	const generatedId = useId()
-	id = id ?? generatedId
+	id ??= generatedId
 
 	const toggle = () => setOn(!on)
 
-	const labelProps = { htmlFor: id }
+	const slots = { label: { htmlFor: id } }
 
 	return (
-		<SlotContext.Provider value={{ label: labelProps }}>
+		<SlotContext.Provider value={slots}>
 			<ToggleContext.Provider value={{ on, toggle, id }}>
 				{children}
 			</ToggleContext.Provider>

exercises/04.slots/03.problem.prop/slots.tsx

@@ -38,9 +38,8 @@ export function Text(props: React.ComponentProps<'span'>) {
 }
 
 // 🐨 add an optional slot to the props type here
-export function Switch(
-	props: Omit<React.ComponentProps<typeof BaseSwitch>, 'on'>,
-) {
+type SwitchProps = Omit<React.ComponentProps<typeof BaseSwitch>, 'on'>
+export function Switch(props: SwitchProps) {
 	return (
 		<BaseSwitch
 			{...(useSlotProps(props, 'switch') as React.ComponentProps<

exercises/04.slots/03.problem.prop/text-field.tsx

@@ -9,14 +9,12 @@ export function TextField({
 	children: React.ReactNode
 }) {
 	const generatedId = useId()
-	id = id ?? generatedId
+	id ??= generatedId
 
-	const labelProps = { htmlFor: id }
-	const inputProps = { id }
+	const slots = {
+		label: { htmlFor: id },
+		input: { id },
+	}
 
-	return (
-		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
-			{children}
-		</SlotContext.Provider>
-	)
+	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
 }

exercises/04.slots/03.problem.prop/toggle.tsx

@@ -15,20 +15,18 @@ export function Toggle({
 }) {
 	const [on, setOn] = useState(false)
 	const generatedId = useId()
-	id = id ?? generatedId
+	id ??= generatedId
 
 	const toggle = () => setOn(!on)
 
-	const labelProps = { htmlFor: id }
-	// 🐨 add props objects for onText, offText, and switch
+	const slots = {
+		label: { htmlFor: id },
+		// 🐨 add slots for onText (hidden prop), offText (hidden prop),
+		// and switch (id, on, onClick props)
+	}
 
 	return (
-		<SlotContext.Provider
-			value={{
-				label: labelProps,
-				// 🐨 add slots for onText, offText, and switch
-			}}
-		>
+		<SlotContext.Provider value={slots}>
 			{/* 🐨 get rid of the ToggleContext here */}
 			<ToggleContext.Provider value={{ on, toggle, id }}>
 				{children}

exercises/04.slots/03.solution.prop/slots.tsx

@@ -38,11 +38,10 @@ export function Text(props: React.ComponentProps<'span'> & { slot?: string }) {
 	return <span {...props} />
 }
 
-export function Switch(
-	props: Omit<React.ComponentProps<typeof BaseSwitch>, 'on'> & {
-		slot?: string
-	},
-) {
+type SwitchProps = Omit<React.ComponentProps<typeof BaseSwitch>, 'on'> & {
+	slot?: string
+}
+export function Switch(props: SwitchProps) {
 	return (
 		<BaseSwitch
 			{...(useSlotProps(props, 'switch') as React.ComponentProps<

exercises/04.slots/03.solution.prop/text-field.tsx

@@ -9,14 +9,12 @@ export function TextField({
 	children: React.ReactNode
 }) {
 	const generatedId = useId()
-	id = id ?? generatedId
+	id ??= generatedId
 
-	const labelProps = { htmlFor: id }
-	const inputProps = { id }
+	const slots = {
+		label: { htmlFor: id },
+		input: { id },
+	}
 
-	return (
-		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
-			{children}
-		</SlotContext.Provider>
-	)
+	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
 }

exercises/04.slots/03.solution.prop/toggle.tsx

@@ -10,7 +10,7 @@ export function Toggle({
 }) {
 	const [on, setOn] = useState(false)
 	const generatedId = useId()
-	id = id ?? generatedId
+	id ??= generatedId
 
 	const toggle = () => setOn(!on)
 

exercises/04.slots/README.mdx

@@ -5,6 +5,11 @@
 	particular role in the overall collection of components.
 </callout-success>
 
+This pattern is particularly useful for situations where you're building a UI
+library with a lot of components that need to work together. It's a way to
+provide a flexible API for your components that allows them to be used in a
+variety of contexts.
+
 If you're building a component library, you have to deal with two competing
 interests:
 
@@ -71,3 +76,39 @@ This can be used to apply appropriate `aria-` attributes as well as `id`s and
 event handlers. You might think about it as a way to implement compound
 components in a way that doesn't require an individual component for every
 single use case.
+
+## Implementation
+
+Folks tend to struggle with this one a bit more than the rest, but it's simpler
+than it seems.
+
+The basic concept is your root component creates collections of props like so:
+
+```tsx
+function NumberField({ children }: { children: React.ReactNode }) {
+	// setup state/events/etc
+
+	const slots = {
+		label: { htmlFor: inputId },
+		decrement: { onClick: decrement },
+		increment: { onClick: increment },
+		description: { id: descriptionId },
+		input: { id: inputId, 'aria-describedby': descriptionId },
+	}
+	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
+}
+```
+
+Then the consuming components use the `use(SlotContext)` to get access to the
+`slots` object and pluck off the props they need to do their job:
+
+```tsx
+function Input(props) {
+	props = useSlotProps(props, 'input')
+
+	return <input {...props}>
+}
+```
+
+The `useSlotProps` hook is responsible for taking the props that have been
+specified and combining it with those from the `SlotContext` for the named slot.