Skip to content

Commit

Permalink
Merge pull request #9210 from storybookjs/core/ingestion
Browse files Browse the repository at this point in the history
Storybook Composition - loading a prebuilt storybook into yours
  • Loading branch information
ndelangen authored Mar 25, 2020
2 parents a8c9b4b + 1d21e6b commit c9f702d
Show file tree
Hide file tree
Showing 96 changed files with 2,905 additions and 2,043 deletions.
3 changes: 1 addition & 2 deletions addons/backgrounds/src/containers/BackgroundSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,7 @@ const getSelectedBackgroundColor = (list: Input[], currentSelectedValue: string)
};

const mapper = ({ api, state }: Combo): { items: Input[]; selected: string | null } => {
const story = api.getData(state.storyId);
const list = story ? api.getParameters(story.id, PARAM_KEY) : [];
const list = api.getCurrentParameter<Input[]>(PARAM_KEY);
const selected = state.addons[PARAM_KEY] || null;

return { items: list || [], selected };
Expand Down
28 changes: 15 additions & 13 deletions addons/cssresources/src/css-resource-panel.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const defaultProps = {
emit: jest.fn(),
on: jest.fn(),
off: jest.fn(),
getParameters: jest.fn(() => defaultParameters),
getCurrentParameter: jest.fn(() => defaultParameters),
},
};

Expand Down Expand Up @@ -104,11 +104,13 @@ describe('CSSResourcePanel', () => {

it('should remove STORY_RENDERED listener from the api', () => {
const apiRemove = jest.fn();
const getCurrentParameter = jest.fn(() => newFakeParameters);
const node = shallowNode({
...defaultProps,
api: {
...defaultProps.api,
off: apiRemove,
getCurrentParameter,
},
});
const { onStoryChange } = node.instance();
Expand All @@ -125,18 +127,18 @@ describe('CSSResourcePanel', () => {
expect(node.state('list')).toMatchObject(defaultParameters);
});

it('should pull default items from getParameters', () => {
const apiGetParameters = jest.fn(() => newFakeParameters);
it('should pull default items from getCurrentParameter', () => {
const getCurrentParameter = jest.fn(() => newFakeParameters);
const node = shallowNode({
...defaultProps,
api: {
...defaultProps.api,
getParameters: apiGetParameters,
getCurrentParameter,
},
});
expect(node.state('list')).toMatchObject([]);
node.instance().onStoryChange('fake-story-id');
expect(apiGetParameters).toHaveBeenCalledWith('fake-story-id', PARAM_KEY);
expect(getCurrentParameter).toHaveBeenCalledWith(PARAM_KEY);
expect(node.state('list')).toMatchObject(newFakeParameters);
});

Expand All @@ -159,12 +161,12 @@ describe('CSSResourcePanel', () => {

it("should not overwrite list when story id hasn't changed", () => {
const fakeList = [];
const apiGetParameters = jest.fn(() => newFakeParameters);
const getCurrentParameter = jest.fn(() => newFakeParameters);
const node = shallowNode({
...defaultProps,
api: {
...defaultProps.api,
getParameters: apiGetParameters,
getCurrentParameter,
},
});
node.setState({ list: fakeList, currentStoryId: 'fake-story-id' });
Expand All @@ -175,12 +177,12 @@ describe('CSSResourcePanel', () => {

it('should not overwrite list when default list is undefined', () => {
const fakeList = [];
const apiGetParameters = jest.fn(() => undefined);
const getCurrentParameter = jest.fn(() => undefined);
const node = shallowNode({
...defaultProps,
api: {
...defaultProps.api,
getParameters: apiGetParameters,
getCurrentParameter,
},
});
node.setState({ list: fakeList });
Expand Down Expand Up @@ -279,7 +281,7 @@ describe('CSSResourcePanel', () => {
});

it('should not render code for items without a code', () => {
const apiGetParameters = jest.fn(() => [
const getCurrentParameter = jest.fn(() => [
{
id: 'local-fake-id-1',
picked: true,
Expand All @@ -294,15 +296,15 @@ describe('CSSResourcePanel', () => {
...defaultProps,
api: {
...defaultProps.api,
getParameters: apiGetParameters,
getCurrentParameter,
},
});
node.instance().onStoryChange('fake-story-id');
expect(node.find(SyntaxHighlighter).length).toEqual(1);
});

it('should not render code for items /w the `hideCode` flag', () => {
const apiGetParameters = jest.fn(() => [
const getCurrentParameter = jest.fn(() => [
{
id: 'local-fake-id-1',
code: 'local-fake-code-1',
Expand All @@ -320,7 +322,7 @@ describe('CSSResourcePanel', () => {
...defaultProps,
api: {
...defaultProps.api,
getParameters: apiGetParameters,
getCurrentParameter,
},
});

Expand Down
2 changes: 1 addition & 1 deletion addons/cssresources/src/css-resource-panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export class CssResourcePanel extends Component<Props, State> {
onStoryChange = (id: string) => {
const { list: currentList, currentStoryId } = this.state;
const { api } = this.props;
const list = api.getParameters(id, PARAM_KEY) as CssResource[];
const list = api.getCurrentParameter<CssResource[]>(PARAM_KEY);

if (list && currentStoryId !== id) {
const existingIds = currentList.reduce((lookup: CssResourceLookup, res) => {
Expand Down
4 changes: 2 additions & 2 deletions addons/docs/src/register.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import addons, { types } from '@storybook/addons';
import { ADDON_ID, PANEL_ID } from './shared';

addons.register(ADDON_ID, api => {
addons.register(ADDON_ID, () => {
addons.add(PANEL_ID, {
type: types.TAB,
title: 'Docs',
route: ({ storyId }) => `/docs/${storyId}`,
route: ({ storyId, refId }) => (refId ? `/docs/${refId}_${storyId}` : `/docs/${storyId}`),
match: ({ viewMode }) => viewMode === 'docs',
render: () => null,
});
Expand Down
9 changes: 8 additions & 1 deletion addons/graphql/src/manager.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,14 @@ const GQL: FunctionComponent<GQLProps> = ({ active }) => {
<Consumer>
{({ api, state }: Combo) => {
const story = api.getData(state.storyId);
const parameters = story ? api.getParameters(story.id, PARAM_KEY) : null;
const parameters = story
? api.getCurrentParameter<{
query: string;
variables: Record<string, any>;
url: string;
fetcher: ReturnType<typeof getDefaultFetcher>;
}>(PARAM_KEY)
: null;

if (parameters) {
const query = reIndentQuery(parameters.query);
Expand Down
9 changes: 5 additions & 4 deletions addons/storysource/src/StoryPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,8 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
useInlineStyles,
location,
id,
}: SyntaxHighlighterRendererProps & { location: SourceBlock; id: string }) => {
refId,
}: SyntaxHighlighterRendererProps & { location: SourceBlock; id: string; refId?: string }) => {
const first = location.startLoc.line - 1;
const last = location.endLoc.line;

Expand All @@ -113,7 +114,7 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
);
}
return (
<StyledStoryLink to={`/story/${id}`} key={storyKey}>
<StyledStoryLink to={refId ? `/story/${refId}_${id}` : `/story/${id}`} key={storyKey}>
{storySource}
</StyledStoryLink>
);
Expand All @@ -127,12 +128,12 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
const location = locationsMap[key];
const first = location.startLoc.line - 1;
const last = location.endLoc.line;
const { kind } = story;
const { kind, refId } = story;
// source loader ids are different from story id
const sourceIdParts = key.split('--');
const id = api.storyId(kind, sourceIdParts[sourceIdParts.length - 1]);
const start = createPart({ rows: rows.slice(lastRow, first), stylesheet, useInlineStyles });
const storyPart = createStoryPart({ rows, stylesheet, useInlineStyles, location, id });
const storyPart = createStoryPart({ rows, stylesheet, useInlineStyles, location, id, refId });

parts.push(start);
parts.push(storyPart);
Expand Down
10 changes: 9 additions & 1 deletion examples/dev-kits/main.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
module.exports = {
stories: ['./stories/*.*'],
webpack: async (config, { configType }) => ({
refs: {
ember: {
id: 'ember',
title: 'Ember',
url: 'https://deploy-preview-9210--storybookjs.netlify.com/ember-cli',
},
cra: 'https://deploy-preview-9210--storybookjs.netlify.com/cra-ts-kitchen-sink',
},
webpack: async config => ({
...config,
module: {
...config.module,
Expand Down
1 change: 1 addition & 0 deletions examples/official-storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@storybook/addon-viewport": "6.0.0-alpha.28",
"@storybook/addons": "6.0.0-alpha.28",
"@storybook/components": "6.0.0-alpha.28",
"@storybook/cli": "6.0.0-alpha.28",
"@storybook/core-events": "6.0.0-alpha.28",
"@storybook/node-logger": "6.0.0-alpha.28",
"@storybook/react": "6.0.0-alpha.28",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import React, { Fragment } from 'react';

const text = 'Testing the a11y addon';
const href = 'javascript:void 0';
const href = 'http://example.com';

export default {
title: 'Addons/A11y/Typography',
Expand Down
Loading

0 comments on commit c9f702d

Please sign in to comment.