Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doc Blocks: Add support for of prop to Primary block #23849

Merged
merged 26 commits into from
Oct 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
79c2201
Updated primary block to support of prop
Wilson2k Aug 15, 2023
f720962
Removed use of any type
Wilson2k Aug 16, 2023
92c7a3f
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Aug 19, 2023
d2c6faa
Revert back to satisfies operator for Primary, improve API docs
Wilson2k Aug 24, 2023
9da4588
Merge branch 'update-primary-block-of-prop' of https://github.com/Wil…
Wilson2k Aug 24, 2023
fb9f274
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Aug 24, 2023
d19c4c6
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Sep 3, 2023
19fb867
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Sep 5, 2023
73a3c31
Merge branch 'next' into update-primary-block-of-prop
jonniebigodes Sep 6, 2023
bc01165
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Sep 10, 2023
b36c473
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Sep 12, 2023
9bff994
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Sep 16, 2023
0daba67
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Sep 18, 2023
ebfd6b1
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Sep 22, 2023
25ebc72
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Sep 24, 2023
739278c
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Oct 2, 2023
2adab92
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Oct 4, 2023
6313c9e
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Oct 6, 2023
5b2f817
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Oct 11, 2023
e3d4e1d
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Oct 16, 2023
9198f30
Update code/ui/blocks/src/blocks/Primary.tsx
Wilson2k Oct 16, 2023
57ac6ba
Update migration docs
Wilson2k Oct 16, 2023
393b0db
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Oct 16, 2023
d3cabc6
Removed getPrimaryFromResolvedOf function
Wilson2k Oct 18, 2023
132f0a8
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Oct 18, 2023
066258f
Merge branch 'next' into update-primary-block-of-prop
Wilson2k Oct 18, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down Expand Up @@ -305,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
Expand Down
57 changes: 56 additions & 1 deletion code/ui/blocks/src/blocks/Primary.stories.tsx
Original file line number Diff line number Diff line change
@@ -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 = {
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>;
Expand All @@ -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'] },
};
30 changes: 26 additions & 4 deletions code/ui/blocks/src/blocks/Primary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -11,17 +12,38 @@ 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 }) => {
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', ['meta']);
story = resolvedOf.csfFile.stories[0] || null;
}

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;
Expand Down
6 changes: 6 additions & 0 deletions docs/api/doc-block-primary.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@ import { Primary } from '@storybook/blocks';

`Primary` is configured with the following props:

### `of`

Type: CSF file exports

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`

(⛔️ **Deprecated**)
Expand Down