Reset control state when navigating between stories (#340)

Author: tajo

.changeset/cuddly-buttons-cheer.md

@@ -0,0 +1,5 @@
+---
+"@ladle/react": patch
+---
+
+Reset control state when navigating between stories.

packages/ladle/lib/app/src/addons/control.tsx

@@ -50,7 +50,7 @@ export const getQuery = (
     return controlState;
   }
   Object.keys(params).forEach((paramKey) => {
-    if (paramKey.startsWith("arg-")) {
+    if (paramKey.startsWith("arg-") && controlState[paramKey.split("-")[1]]) {
       const keyParts = paramKey.split("-");
       const argKey = keyParts[1];
       const argValue = params[paramKey] as string;

packages/ladle/lib/app/src/app.tsx

@@ -143,9 +143,16 @@ const App = () => {
       <Navigation
         stories={stories}
         story={globalState.story}
-        updateStory={(story) =>
-          dispatch({ type: ActionType.UpdateStory, value: story })
-        }
+        updateStory={(story) => {
+          // we need to strip the control state from the URL first
+          // so it doesn't leak into other stories with the same named controls
+          modifyParams({
+            ...globalState,
+            story,
+            control: {},
+          });
+          dispatch({ type: ActionType.UpdateStory, value: story });
+        }}
       />
       <AddonPanel globalState={globalState} dispatch={dispatch} />
     </Context.Provider>

packages/ladle/lib/app/src/args-provider.tsx

@@ -108,10 +108,12 @@ const ArgsProvider = ({
         value: controls,
       });
     } else {
-      dispatch({
-        type: ActionType.UpdateControlIntialized,
-        value: true,
-      });
+      if (!globalState.controlInitialized) {
+        dispatch({
+          type: ActionType.UpdateControlIntialized,
+          value: true,
+        });
+      }
     }
   }, []);