refactor(examples): improve compound components

jofaval · Aug 18, 2023 · a19d3c5 · a19d3c5
1 parent 4fe9a76
commit a19d3c5
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ All the log of changes on the project/repository
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## 2023-08-18
+
+### Modified
+
+- Improved typing and compound component examples
+
 ## 2023-08-08
 
 ### Added

diff --git a/examples/compound-components/src/main.tsx b/examples/compound-components/src/main.tsx
@@ -21,7 +21,8 @@ type ParentProps = PropsWithChildren<{
 }>;
 
 type ParentType = FC<ParentProps> & {
-  NestedChild: FC;
+  // NestedChild: FC;
+  NestedChild: typeof NestedChild; // safer option
 };
 
 const Parent: ParentType = ({ children, subCode }) => {
@@ -45,54 +46,58 @@ const Parent: ParentType = ({ children, subCode }) => {
 };
 Parent.NestedChild = NestedChild;
 
-type CompoundParentProps = PropsWithChildren<{
-  code: string;
+type CompoundParentProps<TCode extends string> = PropsWithChildren<{
+  code: TCode;
 }>;
 
-const CompoundParent: FC<CompoundParentProps> & {
-  Parent: ParentType;
-} = ({ code, children }) => {
+const CompoundParent = <TCode extends string>({
+  code,
+  children,
+}: CompoundParentProps<TCode>) => {
   return <Provider value={{ code }}>{children}</Provider>;
 };
-CompoundParent.Parent = Parent;
+
+const Group = Object.assign(CompoundParent, {
+  Parent,
+});
 
 function App() {
   return (
     <div className="app">
-      <CompoundParent code="first">
-        <CompoundParent.Parent subCode="top">
-          <CompoundParent.Parent.NestedChild />
-          <CompoundParent.Parent.NestedChild />
-        </CompoundParent.Parent>
-        <CompoundParent.Parent subCode="bottom">
-          <CompoundParent.Parent.NestedChild />
-          <CompoundParent.Parent.NestedChild />
-        </CompoundParent.Parent>
-      </CompoundParent>
-
-      <CompoundParent code="second">
-        <CompoundParent.Parent subCode="top">
-          <CompoundParent.Parent.NestedChild />
-          <CompoundParent.Parent.NestedChild />
-        </CompoundParent.Parent>
-        <CompoundParent.Parent subCode="bottom">
-          <CompoundParent.Parent.NestedChild />
-          <CompoundParent.Parent.NestedChild />
-        </CompoundParent.Parent>
-      </CompoundParent>
+      <Group code="first">
+        <Group.Parent subCode="top">
+          <Group.Parent.NestedChild />
+          <Group.Parent.NestedChild />
+        </Group.Parent>
+        <Group.Parent subCode="bottom">
+          <Group.Parent.NestedChild />
+          <Group.Parent.NestedChild />
+        </Group.Parent>
+      </Group>
+
+      <Group code="second">
+        <Group.Parent subCode="top">
+          <Group.Parent.NestedChild />
+          <Group.Parent.NestedChild />
+        </Group.Parent>
+        <Group.Parent subCode="bottom">
+          <Group.Parent.NestedChild />
+          <Group.Parent.NestedChild />
+        </Group.Parent>
+      </Group>
 
       {/* ERROR, no parent nor compound parent */}
-      <CompoundParent.Parent.NestedChild />
+      <Group.Parent.NestedChild />
 
       {/* ERROR, no compound parent */}
-      <CompoundParent.Parent subCode="willThrowError">
-        <CompoundParent.Parent.NestedChild />
-      </CompoundParent.Parent>
+      <Group.Parent subCode="willThrowError">
+        <Group.Parent.NestedChild />
+      </Group.Parent>
 
       {/* ERROR, no parent */}
-      <CompoundParent code="willAlsoFail">
-        <CompoundParent.Parent.NestedChild />
-      </CompoundParent>
+      <Group code="willAlsoFail">
+        <Group.Parent.NestedChild />
+      </Group>
     </div>
   );
 }