Complete component version # 2

readme.md

@@ -212,11 +212,45 @@ and of course, it will flag the error with any attribute that does not match tha
 
 </details>
 
-<details open >
-  <summary>Version 2: Component should own props</summary>
+<details >
+  <summary>Version 2: Component must handle own props</summary>
 
 **New Requirements:**
 
 - The component must be able to handle its own props, such as color, in a type-safe way, of course.!
 
+Let say our component will accept **color** prop. Color will be a pre-made list of colors
+let say "primary" and "accent"
+
+_small refactoring_
+<br />
+<img src="https://losormorpino-public-media.s3.us-east-2.amazonaws.com/8s00ea7.png"  />
+<br />
+
+An additional precaution: it is possible that some values that exist in **ComponentPropsWithoutRef<C>** also exist  
+in the definition of the props type of our component.
+Instead of relying on our **color** prop to override what's coming from ComponentPropsWithoutRef<C>, we better remove
+any type that also exit in our component types definition.
+
+So, guess what... another refactoring
+
+```tsx
+type PolyColor = "primary" | "accent";
+type PolyButtonOwnProps<C extends ElementType> = { as?: C; color: PolyColor };
+type PolyButtonV2Props<C extends ElementType> = PolyButtonOwnProps<C> &
+  Omit<ComponentPropsWithoutRef<C>, keyof PolyButtonOwnProps<C>>;
+
+const PolyButtonV2 = <C extends ElementType = "button">({
+  as,
+  children,
+  style,
+  color,
+  ...restProps
+}: PropsWithChildren<PolyButtonV2Props<C>>) => {
+```
+
+</details>
+
+<details>
+  <summary>Version 3: Make component reusable, work with any component</summary>
 </details>

src/App.tsx

@@ -1,13 +1,10 @@
-import { PolyButtonV1 } from "@components/index";
+import { PolyButtonV2 } from "@components/index";
 import "./App.css";
 
 function App() {
   return (
     <div className="App">
-      <PolyButtonV1 as="a" href="https://www.google.com" style={{ display: "block" }}>
-        anchor element
-      </PolyButtonV1>
-      <PolyButtonV1 >default element</PolyButtonV1>
+      <PolyButtonV2 color="primary" >default element</PolyButtonV2>
     </div>
   );
 }

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./polymorphicv0";
 export * from "./polymorphicv1";
+export * from "./polymorphicv2";

src/components/polymorphicv2.tsx

@@ -0,0 +1,24 @@
+import { ElementType, PropsWithChildren, ComponentPropsWithoutRef } from "react";
+
+type PolyColor = "primary" | "accent";
+type PolyButtonOwnProps<C extends ElementType> = { as?: C; color: PolyColor };
+type PolyButtonV2Props<C extends ElementType> = PolyButtonOwnProps<C> &
+  Omit<ComponentPropsWithoutRef<C>, keyof PolyButtonOwnProps<C>>;
+
+const PolyButtonV2 = <C extends ElementType = "button">({
+  as,
+  children,
+  style,
+  color,
+  ...restProps
+}: PropsWithChildren<PolyButtonV2Props<C>>) => {
+  const PolyButton = as ?? "button";
+  const outStyle = { ...style, color: color === "primary" ? "#058ed9" : "#df6066" };
+  return (
+    <PolyButton style={outStyle} {...restProps}>
+      {children}
+    </PolyButton>
+  );
+};
+
+export { PolyButtonV2 };