From 79c2201b31031c37296d7791e65c29655b4aff87 Mon Sep 17 00:00:00 2001
From: Wilson Chen <wilsonchen.code@gmail.com>
Date: Tue, 15 Aug 2023 13:47:19 -0700
Subject: [PATCH 1/6] Updated primary block to support of prop

---
 MIGRATION.md                                  |  5 ++
 code/ui/blocks/src/blocks/Primary.stories.tsx | 61 ++++++++++++++++++-
 code/ui/blocks/src/blocks/Primary.tsx         | 51 ++++++++++++++--
 docs/api/doc-block-primary.md                 |  6 ++
 4 files changed, 116 insertions(+), 7 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 5022eefb59bd..a5bc41380f8d 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -73,6 +73,7 @@
     - [Unattached docs files](#unattached-docs-files)
     - [Doc Blocks](#doc-blocks)
       - [Meta block](#meta-block)
+      - [Primary block](#primary-block)
       - [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo)
       - [Story block](#story-block)
       - [Source block](#source-block)
@@ -1429,6 +1430,10 @@ Additionally to changing the docs information architecture, we've updated the AP
 
 The primary change of the `Meta` block is the ability to attach to CSF files with `<Meta of={}>` as described above.
 
+##### Primary block
+
+The `Primary` block now also accepts an `of` prop as described above. It still accepts being passed `name` or no props at all.
+
 ##### Description block, `parameters.notes` and `parameters.info`
 
 In 6.5 the Description doc block accepted a range of different props, `markdown`, `type` and `children` as a way to customize the content.
diff --git a/code/ui/blocks/src/blocks/Primary.stories.tsx b/code/ui/blocks/src/blocks/Primary.stories.tsx
index 42977ff6c9e3..b1d316c4e664 100644
--- a/code/ui/blocks/src/blocks/Primary.stories.tsx
+++ b/code/ui/blocks/src/blocks/Primary.stories.tsx
@@ -1,13 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Primary } from './Primary';
+import * as DefaultButtonStories from '../examples/Button.stories';
+import * as StoriesParametersStories from '../examples/StoriesParameters.stories';
 
-const meta = {
+const meta: Meta<typeof Primary> = {
   component: Primary,
   parameters: {
+    // workaround for https://github.com/storybookjs/storybook/issues/20505
+    docs: { source: { type: 'code' } },
     docsStyles: true,
   },
-} satisfies Meta<typeof Primary>;
-
+};
 export default meta;
 
 type Story = StoryObj<typeof meta>;
@@ -22,3 +25,55 @@ export const WithoutToolbar: Story = {
     relativeCsfPaths: ['../examples/StoriesParameters.stories'],
   },
 };
+
+export const DefaultWithName: Story = {
+  name: 'Name',
+  args: {
+    name: 'Primary',
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/Button.stories'],
+  },
+};
+
+export const WithoutToolbarWithName: Story = {
+  name: 'Name Without Toolbar',
+  args: {
+    name: 'Without Toolbar',
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/StoriesParameters.stories'],
+  },
+};
+
+export const DefaultWithOf: Story = {
+  name: 'Of',
+  args: {
+    of: DefaultButtonStories,
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'] },
+};
+
+export const WithoutToolbarWithOf: Story = {
+  name: 'Of Without Toolbar',
+  args: {
+    of: StoriesParametersStories,
+  },
+  parameters: { relativeCsfPaths: ['../examples/StoriesParameters.stories'] },
+};
+
+export const DefaultOfStringMetaAttached: Story = {
+  name: 'Of Attached "meta"',
+  args: {
+    of: 'meta',
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'] },
+};
+
+export const WithoutToolbarOfStringMetaAttached: Story = {
+  name: 'Of Attached "meta" Without Toolbar',
+  args: {
+    of: 'meta',
+  },
+  parameters: { relativeCsfPaths: ['../examples/StoriesParameters.stories'] },
+};
diff --git a/code/ui/blocks/src/blocks/Primary.tsx b/code/ui/blocks/src/blocks/Primary.tsx
index 7583200f72c8..040edff489eb 100644
--- a/code/ui/blocks/src/blocks/Primary.tsx
+++ b/code/ui/blocks/src/blocks/Primary.tsx
@@ -2,7 +2,8 @@ import type { FC } from 'react';
 import React, { useContext } from 'react';
 import dedent from 'ts-dedent';
 import { deprecate } from '@storybook/client-logger';
-
+import type { Of } from './useOf';
+import { useOf } from './useOf';
 import { DocsContext } from './DocsContext';
 import { DocsStory } from './DocsStory';
 
@@ -11,17 +12,59 @@ interface PrimaryProps {
    * @deprecated Primary block should only be used to render the primary story, which is automatically found.
    */
   name?: string;
+  /**
+   * Specify where to get the primary story from.
+   */
+  of?: Of;
 }
 
-export const Primary: FC<PrimaryProps> = ({ name }) => {
+const getPrimaryFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>): any | null => {
+  switch (resolvedOf.type) {
+    case 'meta': {
+      return resolvedOf.csfFile.stories[0] || null;
+    }
+    case 'story':
+    case 'component': {
+      throw new Error(
+        `Unsupported module type. Primary's \`of\` prop only supports \`meta\`, got: ${
+          (resolvedOf as any).type
+        }`
+      );
+    }
+    default: {
+      throw new Error(
+        `Unrecognized module type resolved from 'useOf', got: ${(resolvedOf as any).type}`
+      );
+    }
+  }
+};
+
+export const Primary: FC<PrimaryProps> = (props) => {
+  const { name, of } = props;
+
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
+
   const docsContext = useContext(DocsContext);
+
+  let story;
+  if (of) {
+    const resolvedOf = useOf(of || 'meta');
+    story = getPrimaryFromResolvedOf(resolvedOf);
+  }
+
+  if (!story) {
+    const storyId = name && docsContext.storyIdByName(name);
+    story = docsContext.storyById(storyId);
+  }
+
   if (name) {
     deprecate(dedent`\`name\` prop is deprecated on the Primary block.
     The Primary block should only be used to render the primary story, which is automatically found.
     `);
   }
-  const storyId = name && docsContext.storyIdByName(name);
-  const story = docsContext.storyById(storyId);
+
   return story ? (
     <DocsStory of={story.moduleExport} expanded={false} __primary withToolbar />
   ) : null;
diff --git a/docs/api/doc-block-primary.md b/docs/api/doc-block-primary.md
index 5d124df65b9f..37bf5eec9bc5 100644
--- a/docs/api/doc-block-primary.md
+++ b/docs/api/doc-block-primary.md
@@ -29,6 +29,12 @@ import { Primary } from '@storybook/blocks';
 
 `Primary` is configured with the following props:
 
+### `of`
+
+Type: CSF file exports
+
+Specifies the primary (first) story to be rendered.
+
 ### `name`
 
 (⛔️ **Deprecated**)

From f720962519e7298acf06f0ad4c8739afa84d4646 Mon Sep 17 00:00:00 2001
From: Wilson Chen <wilsonchen.code@gmail.com>
Date: Tue, 15 Aug 2023 21:05:51 -0700
Subject: [PATCH 2/6] Removed use of any type

---
 code/ui/blocks/src/blocks/Primary.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Primary.tsx b/code/ui/blocks/src/blocks/Primary.tsx
index 040edff489eb..7983ea94b0b7 100644
--- a/code/ui/blocks/src/blocks/Primary.tsx
+++ b/code/ui/blocks/src/blocks/Primary.tsx
@@ -18,12 +18,11 @@ interface PrimaryProps {
   of?: Of;
 }
 
-const getPrimaryFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>): any | null => {
+const getPrimaryFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>) => {
   switch (resolvedOf.type) {
     case 'meta': {
       return resolvedOf.csfFile.stories[0] || null;
     }
-    case 'story':
     case 'component': {
       throw new Error(
         `Unsupported module type. Primary's \`of\` prop only supports \`meta\`, got: ${

From d2c6faa1f9bfbd2a1635dd359c90498800df4f5a Mon Sep 17 00:00:00 2001
From: Wilson Chen <wilsonchen.code@gmail.com>
Date: Thu, 24 Aug 2023 10:47:01 -0700
Subject: [PATCH 3/6] Revert back to satisfies operator for Primary, improve
 API docs

---
 code/ui/blocks/src/blocks/Primary.stories.tsx | 4 ++--
 docs/api/doc-block-primary.md                 | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Primary.stories.tsx b/code/ui/blocks/src/blocks/Primary.stories.tsx
index b1d316c4e664..7c4747d53a3b 100644
--- a/code/ui/blocks/src/blocks/Primary.stories.tsx
+++ b/code/ui/blocks/src/blocks/Primary.stories.tsx
@@ -3,14 +3,14 @@ import { Primary } from './Primary';
 import * as DefaultButtonStories from '../examples/Button.stories';
 import * as StoriesParametersStories from '../examples/StoriesParameters.stories';
 
-const meta: Meta<typeof Primary> = {
+const meta = {
   component: Primary,
   parameters: {
     // workaround for https://github.com/storybookjs/storybook/issues/20505
     docs: { source: { type: 'code' } },
     docsStyles: true,
   },
-};
+} satisfies Meta<typeof Primary>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
diff --git a/docs/api/doc-block-primary.md b/docs/api/doc-block-primary.md
index 37bf5eec9bc5..c4993c2db2a0 100644
--- a/docs/api/doc-block-primary.md
+++ b/docs/api/doc-block-primary.md
@@ -33,7 +33,7 @@ import { Primary } from '@storybook/blocks';
 
 Type: CSF file exports
 
-Specifies the primary (first) story to be rendered.
+Specifies which CSF file is used to find the first story, which is then rendered by this block. Pass the full set of exports from the CSF file (not the default export!).
 
 ### `name`
 

From 9198f306bc7ad84cde419fcd9dc0b527e6f877d0 Mon Sep 17 00:00:00 2001
From: Wilson <55598891+Wilson2k@users.noreply.github.com>
Date: Mon, 16 Oct 2023 11:18:26 -0700
Subject: [PATCH 4/6] Update code/ui/blocks/src/blocks/Primary.tsx

Specify 'meta' as the only valid type for useOf

Co-authored-by: Jeppe Reinhold <jeppe@reinhold.is>
---
 code/ui/blocks/src/blocks/Primary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/ui/blocks/src/blocks/Primary.tsx b/code/ui/blocks/src/blocks/Primary.tsx
index 7983ea94b0b7..0175af5b9e61 100644
--- a/code/ui/blocks/src/blocks/Primary.tsx
+++ b/code/ui/blocks/src/blocks/Primary.tsx
@@ -49,7 +49,7 @@ export const Primary: FC<PrimaryProps> = (props) => {
 
   let story;
   if (of) {
-    const resolvedOf = useOf(of || 'meta');
+    const resolvedOf = useOf(of || 'meta', ['meta']);
     story = getPrimaryFromResolvedOf(resolvedOf);
   }
 

From 57ac6baa90b7a7ffdac34008fd1b6c89f70ebd29 Mon Sep 17 00:00:00 2001
From: Wilson Chen <wilsonchen.code@gmail.com>
Date: Mon, 16 Oct 2023 11:30:31 -0700
Subject: [PATCH 5/6] Update migration docs

---
 MIGRATION.md | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 898ee74f2fbf..c692f787fa6d 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,5 +1,7 @@
 <h1>Migration</h1>
 
+- [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
+  - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
   - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
   - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
@@ -76,7 +78,6 @@
     - [Unattached docs files](#unattached-docs-files)
     - [Doc Blocks](#doc-blocks)
       - [Meta block](#meta-block)
-      - [Primary block](#primary-block)
       - [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo)
       - [Story block](#story-block)
       - [Source block](#source-block)
@@ -306,6 +307,12 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 7.5.0 to 7.6.0
+
+##### Primary doc block accepts of prop
+
+The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all.
+
 ## From version 7.4.0 to 7.5.0
 
 #### `storyStoreV6` and `storiesOf` is deprecated
@@ -1504,10 +1511,6 @@ Additionally to changing the docs information architecture, we've updated the AP
 
 The primary change of the `Meta` block is the ability to attach to CSF files with `<Meta of={}>` as described above.
 
-##### Primary block
-
-The `Primary` block now also accepts an `of` prop as described above. It still accepts being passed `name` or no props at all.
-
 ##### Description block, `parameters.notes` and `parameters.info`
 
 In 6.5 the Description doc block accepted a range of different props, `markdown`, `type` and `children` as a way to customize the content.

From d3cabc6259d2649a30c58004ae7f01a63a99b2ba Mon Sep 17 00:00:00 2001
From: Wilson Chen <wilsonchen.code@gmail.com>
Date: Tue, 17 Oct 2023 23:28:02 -0700
Subject: [PATCH 6/6] Removed getPrimaryFromResolvedOf function

---
 code/ui/blocks/src/blocks/Primary.tsx | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Primary.tsx b/code/ui/blocks/src/blocks/Primary.tsx
index 0175af5b9e61..7d1364f2dc51 100644
--- a/code/ui/blocks/src/blocks/Primary.tsx
+++ b/code/ui/blocks/src/blocks/Primary.tsx
@@ -18,26 +18,6 @@ interface PrimaryProps {
   of?: Of;
 }
 
-const getPrimaryFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>) => {
-  switch (resolvedOf.type) {
-    case 'meta': {
-      return resolvedOf.csfFile.stories[0] || null;
-    }
-    case 'component': {
-      throw new Error(
-        `Unsupported module type. Primary's \`of\` prop only supports \`meta\`, got: ${
-          (resolvedOf as any).type
-        }`
-      );
-    }
-    default: {
-      throw new Error(
-        `Unrecognized module type resolved from 'useOf', got: ${(resolvedOf as any).type}`
-      );
-    }
-  }
-};
-
 export const Primary: FC<PrimaryProps> = (props) => {
   const { name, of } = props;
 
@@ -50,7 +30,7 @@ export const Primary: FC<PrimaryProps> = (props) => {
   let story;
   if (of) {
     const resolvedOf = useOf(of || 'meta', ['meta']);
-    story = getPrimaryFromResolvedOf(resolvedOf);
+    story = resolvedOf.csfFile.stories[0] || null;
   }
 
   if (!story) {