feat: implement pokemon style for poly components

Author: code-mattclaffey

src/course/02-lessons/02-Silver/Controlled/exercise/exercise.tsx

@@ -43,13 +43,13 @@ const EvolutionModal = ({
   pokemon,
   evolution
 }: IEvolutionModal) => {
-  // 2a 👨🏻💻 Create a useRef<HTMLDivElement> and bind the ref to the div on line 70
+  // 2a 💻 Create a useRef<HTMLDivElement> and bind the ref to the div on line 70
 
   useEffect(() => {
     // ✍🏻 When a modal is visible you want to navigate the focus from
     // the actioner (what caused the modal to open) to the content
     // ♿️ It helps the screenreader not get lost on the page
-    // 2b - 👨🏻💻 Check if isVisible is true and the modal.current is defined before setting focus to the modal
+    // 2b - 💻 Check if isVisible is true and the modal.current is defined before setting focus to the modal
   }, [isVisible]);
 
   // 💣 You can get rid of this eslint error comment when finished.
@@ -74,7 +74,7 @@ const EvolutionModal = ({
         // 2c - 💄 Add an object as the second param with flex: isVisible and hidden !isVisible
       )}
       role="button"
-      //  2d - 👨🏻💻 Pass the onClose event from the props to the onClick event.
+      //  2d - 💻 Pass the onClose event from the props to the onClick event.
       tabIndex={0}
     >
       <div
@@ -131,11 +131,11 @@ const EvolutionModal = ({
             </div>
 
             <div className="flex gap-3 justify-center">
-              {/* 2g - 👨🏻💻 Add onClick={onConfirm} for evolution confirmation */}
+              {/* 2g - 💻 Add onClick={onConfirm} for evolution confirmation */}
               <Button className="bg-green-600 hover:bg-green-700">
                 ✨ Evolve!
               </Button>
-              {/* 2h - 👨🏻💻 Add onClick={onClose} going back to the pattern, we want outside to control the visibility of the modal */}
+              {/* 2h - 💻 Add onClick={onClose} going back to the pattern, we want outside to control the visibility of the modal */}
               <Button className="bg-gray-600 hover:bg-gray-700">
                 Cancel
               </Button>
@@ -153,13 +153,13 @@ const EvolutionModal = ({
 };
 
 export const Exercise = () => {
-  // 1a 👨🏻💻 Create a state hook variable with isEvolutionVisible and setIsEvolutionVisible
+  // 1a 💻 Create a state hook variable with isEvolutionVisible and setIsEvolutionVisible
 
-  // 1b 👨🏻💻 Create an onClose event that sets isEvolutionVisible to false
+  // 1b 💻 Create an onClose event that sets isEvolutionVisible to false
 
-  // 1c 👨🏻💻 Create an onConfirm event that handles evolution and closes modal
+  // 1c 💻 Create an onConfirm event that handles evolution and closes modal
 
-  // 1d 👨🏻💻 Create an onCheckEvolution event that sets isEvolutionVisible to true
+  // 1d 💻 Create an onCheckEvolution event that sets isEvolutionVisible to true
 
   const pokemon = {
     name: 'Charmander',
@@ -197,7 +197,7 @@ export const Exercise = () => {
         </p>
       </div>
 
-      {/* 1e 👨🏻💻 Add the onClick={onCheckEvolution} event to the button
+      {/* 1e 💻 Add the onClick={onCheckEvolution} event to the button
       ✍🏻 This is an example of a Controlled component but in a Pokemon context.
       As a developer, we are providing the button with those props for the button
       to behave how we want it to behave, otherwise, it does nothing. */}
@@ -207,7 +207,7 @@ export const Exercise = () => {
         </Button>
       </div>
 
-      {/* 1f 👨🏻💻 Check if isEvolutionVisible (💅 Conditional Render Pattern) to render the EvolutionModal */}
+      {/* 1f 💻 Check if isEvolutionVisible (💅 Conditional Render Pattern) to render the EvolutionModal */}
       {/* Map the isVisible, onClose, onConfirm props to the EvolutionModal. The other props can be whatever you want */}
     </div>
   );

src/course/02-lessons/02-Silver/PolymorphicComponents/exercise/exercise.tsx

@@ -1,102 +1,146 @@
 import { HTMLAttributes } from 'react';
 
 /**
- * Exercise: Refactor the Heading component to correctly use the polymorphic pattern.
+ * Exercise: Refactor the StatusEffect component to correctly use the polymorphic pattern.
  *
  * 🤔 Observations of this file
- * In the current component you can see that the as prop is a string so if a developer in a team uses the wrong element they would just get the h2 element.
- * Font sizes are clearly defined to the element so there is no flexibility in sizes which can lead to developers pleasing designers but... breaking accessibility or vice versa where designs do not look the same as what was provided.
+ * In the current component you can see that the as prop is a string so if a developer in a team uses the wrong element they would just get the span element.
+ * Status styles are clearly defined to the element so there is no flexibility in status effects which can lead to developers pleasing designers but... breaking accessibility or vice versa where designs do not look the same as what was provided.
  *
  * We need to tackle this in stages...
  *
  * Stage one - Refactoring the component to use Polymorphic style so we remove the switch statement.
- * Stage two - decouple the font size to the element
- * Stage three - allow for developers to have a size medium breakpoint for special designs.
+ * Stage two - decouple the status effect to the element
+ * Stage three - allow for developers to have a severity level for special status effects.
  *
  */
 
-// 🧑🏻‍💻 1.a - Create a type called allowedHTMLElements
+// 🧑🏻💻 1.a - Create a type called AllowedElements for 'span' | 'div' | 'button' | 'li'
 
-// 🧑🏻‍💻 2.a - Create a type called FontSizes and it's a union of 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+// 🧑🏻💻 2.a - Create a type called StatusTypes and it's a union of 'normal' | 'burned' | 'poisoned' | 'paralyzed' | 'frozen' | 'asleep'
 
-interface IHeading extends HTMLAttributes<HTMLHeadingElement> {
-  // 🧑🏻‍💻 1.b - Update the type of string to be the type you defined as part of 1.a
+interface IStatusEffect extends HTMLAttributes<HTMLElement> {
+  // 🧑🏻💻 1.b - Update the type of string to be the type you defined as part of 1.a
   as?: string;
-  // 🧑🏻‍💻 2.b - Create a new prop called size?: FontSizes;
-  // 🧑🏻‍💻 3.a - Create a new prop called sizeMd?: FontSizes;
+  // 🧑🏻💻 2.b - Create a new prop called status?: StatusTypes;
+  // 🧑🏻💻 3.a - Create a new prop called severity?: 'mild' | 'severe';
   children?: React.ReactNode | React.ReactNode[];
 }
 
-const Heading = ({
-  // 🧑🏻‍💻 1.c - add : Element = 'h2' what this will do is redefine the prop to be a capital variable which can be used as a React Component.
-  as = 'h2',
-  // 🧑🏻‍💻 2.c - Create a new prop called size
-  // 🧑🏻‍💻 3.b - Create a new prop called sizeMd
+const StatusEffect = ({
+  // 🧑🏻💻 1.c - add : Element = 'span' what this will do is redefine the prop to be a capital variable which can be used as a React Component.
+  as = 'span',
+  // 🧑🏻💻 2.c - Create a new prop called status
+  // 🧑🏻💻 3.b - Create a new prop called severity
   children,
   ...rest
-}: IHeading) => {
-  // 🧑🏻‍💻 1.d - Create a variable called elementFontSize which uses useMemo to return a string from an object key mapping. For example: useMemo(() => ({ h1: 'text-3xl' }[Element]), [Element]);
-  // 🧑🏻‍💻 2.d - In the useMemo add the size as a dependency and then check if size exists. If it does, return `text-${size}` if not, return what was there previously. Move onto 3.a.
+}: IStatusEffect) => {
+  // 🧑🏻💻 1.d - Create a variable called statusClass which uses useMemo to return a string from an object key mapping. For example: useMemo(() => ({ span: 'text-gray-600' }[Element]), [Element]);
+  // 🧑🏻💻 2.d - In the useMemo add the status as a dependency and then check if status exists. If it does, return status-specific classes if not, return what was there previously. Move onto 3.a.
 
-  // 🧑🏻‍💻 3.c - create another useMemo for largeFontSizes where we find an array of md:text-(sm-3xl) and we need to "find" which one in that array "includes" sizeMd props value.
+  // 🧑🏻💻 3.c - create another useMemo for severityClass where we check if severity exists and return severity-specific classes.
 
   // 🧪 3.d Head down to the storybook Exercise Component and add a few more variants in.
 
-  // 🧑🏻‍💻 1.e return the Element with the className={classNames('mb-3 font-semibold', elementFontSize)} don't forget the ...rest
+  // 🧑🏻💻 1.e return the Element with the className={classNames('px-2 py-1 rounded text-sm', statusClass)} don't forget the ...rest
   // 💣 1.f remove the old code below. Move onto step 2.a.
   if (as)
     switch (as) {
-      case 'h1':
+      case 'span':
         return (
-          <h1 {...rest} className="text-3xl mb-3 font-semibold">
+          <span
+            {...rest}
+            className="px-2 py-1 rounded text-sm bg-gray-200 text-gray-800"
+          >
             {children}
-          </h1>
+          </span>
         );
-      case 'h3':
+      case 'div':
         return (
-          <h3 {...rest} className="text-xl mb-3 font-semibold">
+          <div
+            {...rest}
+            className="p-3 rounded bg-red-200 text-red-800 border border-red-300"
+          >
             {children}
-          </h3>
+          </div>
         );
-      case 'h4':
+      case 'button':
         return (
-          <h4 {...rest} className="text-lg mb-3 font-semibold">
+          <button
+            {...rest}
+            className="px-3 py-2 rounded bg-yellow-200 text-yellow-800 border border-yellow-300 hover:bg-yellow-300"
+          >
             {children}
-          </h4>
+          </button>
         );
-      case 'h5':
+      case 'li':
         return (
-          <h5 {...rest} className="text-md mb-3 font-semibold">
+          <li
+            {...rest}
+            className="p-2 rounded bg-purple-200 text-purple-800 border border-purple-300 list-none"
+          >
             {children}
-          </h5>
-        );
-      case 'h6':
-        return (
-          <h6 {...rest} className="text-sm mb-3 font-semibold">
-            {children}
-          </h6>
+          </li>
         );
       default:
         return (
-          <h2 {...rest} className="text-2xl mb-3 font-semibold">
+          <span
+            {...rest}
+            className="px-2 py-1 rounded text-sm bg-gray-200 text-gray-800"
+          >
             {children}
-          </h2>
+          </span>
         );
     }
 };
 
 export const Exercise = () => (
-  <article>
-    <Heading as="h1">Heading One</Heading>
-    <Heading as="h2">Heading Two</Heading>
-    <Heading as="h3">Heading Three</Heading>
-    <Heading as="h4">Heading Four</Heading>
-    <Heading as="h5">Heading Five</Heading>
-    <Heading as="h6">Heading Six</Heading>
-    {/* 3.e 👨🏻‍💻 Implement a heading as h2 and size sm */}
-
-    {/* 3.e 👨🏻‍💻 Implement a heading as h2 and size sm and sizeMd is 3xl */}
-
-    {/* 3.e 👨🏻‍💻 Implement a heading as h2 and sizeMd is 3xl */}
-  </article>
+  <div className="p-6 bg-blue-50 rounded-lg border-2 border-blue-200">
+    <h2 className="text-2xl font-bold mb-4 text-blue-800">
+      🎮 Pokemon Status Effects
+    </h2>
+
+    <div className="space-y-4">
+      <div>
+        <h3 className="font-semibold mb-2">Battle Status (Spans)</h3>
+        <div className="flex gap-2 flex-wrap">
+          <StatusEffect as="span">Normal</StatusEffect>
+          <StatusEffect as="span">Burned</StatusEffect>
+          <StatusEffect as="span">Poisoned</StatusEffect>
+          <StatusEffect as="span">Paralyzed</StatusEffect>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="font-semibold mb-2">Status Alerts (Divs)</h3>
+        <StatusEffect as="div">
+          Your Pokemon is badly poisoned!
+        </StatusEffect>
+      </div>
+
+      <div>
+        <h3 className="font-semibold mb-2">Heal Actions (Buttons)</h3>
+        <div className="flex gap-2">
+          <StatusEffect as="button">Heal Burn</StatusEffect>
+          <StatusEffect as="button">Cure Paralysis</StatusEffect>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="font-semibold mb-2">
+          Status List (List Items)
+        </h3>
+        <ul className="space-y-1">
+          <StatusEffect as="li">Frozen - Cannot move</StatusEffect>
+          <StatusEffect as="li">Asleep - Skips turn</StatusEffect>
+        </ul>
+      </div>
+    </div>
+
+    {/* 3.e  Implement a status effect as span with status burned */}
+
+    {/* 3.e  Implement a status effect as div with status poisoned and severity severe */}
+
+    {/* 3.e  Implement a status effect as button with severity mild */}
+  </div>
 );