From 6a76a062553595a857227c38bd0d82c5c03eae6c Mon Sep 17 00:00:00 2001
From: Joe Gornick <joe@joegornick.com>
Date: Fri, 8 Jul 2022 10:23:03 -0500
Subject: [PATCH] feat: add story id support to initial selection (#368)

---
 README.md                                |  6 +++---
 app/react-native/src/preview/Preview.tsx | 19 ++++++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 55da4741c7..c8d1d6ae2b 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ module.exports = {
 
 ## Decorators and Parameters
 
-For stories you can add decorators and parameters on the default export or on a specifc story 
+For stories you can add decorators and parameters on the default export or on a specifc story
 
 ```jsx
 export default {
@@ -180,8 +180,8 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
 {
     tabOpen: Number (0)
         -- which tab should be open. -1 Navigator, 0 Preview, 1 Addons
-    initialSelection: Object (null)
-        -- initialize storybook with a specific story.  eg: `{ kind: 'MyButton', name: 'LargeButton' }`
+    initialSelection: string | Object (undefined)
+        -- initialize storybook with a specific story.  eg: `mybutton--largebutton` or `{ kind: 'MyButton', name: 'LargeButton' }`
     shouldDisableKeyboardAvoidingView: Boolean (false)
         -- Disable KeyboardAvoidingView wrapping Storybook's view
     keyboardAvoidingViewVerticalOffset: Number (0)
diff --git a/app/react-native/src/preview/Preview.tsx b/app/react-native/src/preview/Preview.tsx
index 76b0617ed6..7482cb343d 100644
--- a/app/react-native/src/preview/Preview.tsx
+++ b/app/react-native/src/preview/Preview.tsx
@@ -18,16 +18,19 @@ interface AsyncStorage {
   setItem: (key: string, value: string) => Promise<void>;
 }
 
-interface InitialSelection {
+type StoryKind = string
+type StoryName = string
+
+type InitialSelection = `${StoryKind}--${StoryName}` | {
   /**
    * Kind is the default export name or the storiesOf("name") name
    */
-  kind: string;
+  kind: StoryKind;
 
   /**
    * Name is the named export or the .add("name") name
    */
-  name: string;
+  name: StoryName;
 }
 
 export type Params = {
@@ -120,11 +123,13 @@ export default class Preview {
 
   _getInitialStory = async (initialSelection?: InitialSelection, shouldPersistSelection = true) => {
     let story: string = null;
-    const initialSelectionId = initialSelection
-      ? toId(initialSelection.kind, initialSelection.name)
-      : undefined;
+    const initialSelectionId = initialSelection === undefined
+      ? undefined
+      : typeof initialSelection === 'string'
+        ? initialSelection
+        : toId(initialSelection.kind, initialSelection.name);
 
-    if (initialSelection && initialSelectionId && this._checkStory(initialSelectionId)) {
+    if (initialSelectionId !== undefined && this._checkStory(initialSelectionId)) {
       story = initialSelectionId;
     } else if (shouldPersistSelection) {
       try {