From 294d712718f9e6e40f33cc3baebbfa6be7e739b9 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Thu, 14 Nov 2024 13:47:55 +0100
Subject: [PATCH] Fix warning in storybook

---
 src/stories/getStory.tsx | 50 ++++++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/stories/getStory.tsx b/src/stories/getStory.tsx
index d8586b9e..b99b2059 100644
--- a/src/stories/getStory.tsx
+++ b/src/stories/getStory.tsx
@@ -11,6 +11,8 @@ import type { ReactComponent } from "../tools/ReactComponent";
 import { OnyxiaUi } from "./theme";
 import { Text } from "../Text";
 import { getIsDarkModeEnabledOsDefault } from "../tools/getIsDarkModeEnabledOsDefault";
+import { assert, type Equals } from "tsafe/assert";
+import { is } from "tsafe/is";
 
 export function getStoryFactory<Props extends Record<string, any>>(params: {
     sectionName: string;
@@ -60,18 +62,42 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
         );
     }
 
-    const Template: Story<
-        Props & {
-            darkMode: boolean;
-            width: number;
-        }
-    > = props => (
-        <OnyxiaUi darkMode={props.darkMode}>
-            <ContextualizedTemplate {...props} />
-        </OnyxiaUi>
-    );
+    type ReservedProps = {
+        darkMode: boolean;
+        width: number;
+    };
+
+    const reservedPropsName = ["darkMode", "width"] as const;
+
+    assert<Equals<keyof ReservedProps, (typeof reservedPropsName)[number]>>();
+
+    const Template: Story<Props & ReservedProps> = props => {
+        const { darkMode, width, ...componentProps } = props;
+
+        assert(
+            Object.keys(componentProps).every(
+                key => !id<readonly string[]>(reservedPropsName).includes(key),
+            ),
+        );
+        assert(is<Props>(componentProps));
+
+        return (
+            <OnyxiaUi darkMode={darkMode}>
+                <ContextualizedTemplate
+                    width={width}
+                    componentProps={componentProps}
+                />
+            </OnyxiaUi>
+        );
+    };
 
-    const ContextualizedTemplate: typeof Template = ({ width, ...props }) => {
+    const ContextualizedTemplate = ({
+        width,
+        componentProps,
+    }: {
+        componentProps: Props;
+        width: number;
+    }) => {
         const theme = useTheme();
 
         return (
@@ -95,7 +121,7 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
                         display: "inline-block",
                     }}
                 >
-                    <Component {...props} />
+                    <Component {...componentProps} />
                 </div>
             </>
         );