Skip to content

Commit

Permalink
fix: renamed factory to dynamic
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Oct 9, 2020
1 parent b1c9c00 commit 14218eb
Show file tree
Hide file tree
Showing 11 changed files with 133 additions and 120 deletions.
4 changes: 2 additions & 2 deletions core/config/test/__snapshots__/stories.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ Array [
"/Users/atanasster/component-controls/ui/blocks/src/Subtitle/Subtitle.stories.tsx",
"/Users/atanasster/component-controls/ui/blocks/src/TagsList/TagsList.stories.tsx",
"/Users/atanasster/component-controls/ui/blocks/src/Title/Title.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories_native/dynamic-stories.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors-starter.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors.stories.jsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/dynamic-stories.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/inherit-from-doc.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/smart-prop-type.stories.js",
"/Users/atanasster/component-controls/examples/stories/src/stories/smart-typescript.stories.js",
Expand Down Expand Up @@ -136,9 +136,9 @@ Array [
"/Users/atanasster/component-controls/ui/blocks/src/Subtitle/Subtitle.stories.tsx",
"/Users/atanasster/component-controls/ui/blocks/src/TagsList/TagsList.stories.tsx",
"/Users/atanasster/component-controls/ui/blocks/src/Title/Title.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories_native/dynamic-stories.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors-starter.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors.stories.jsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/dynamic-stories.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/inherit-from-doc.stories.tsx",
"/Users/atanasster/component-controls/examples/stories/src/stories/smart-prop-type.stories.js",
"/Users/atanasster/component-controls/examples/stories/src/stories/smart-typescript.stories.js",
Expand Down
99 changes: 51 additions & 48 deletions core/core/README.md
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions core/core/src/document-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,11 @@ export const getStoryPath = (
: ensureStartingSlash(ensureTrailingSlash(basePath))
}`;
const story = store?.stories[storyId];
const { factoryId, name } = story || {};
const id = factoryId || storyId;
const { dynamicId, name } = story || {};
const id = dynamicId || storyId;
const route = `${docRoute}${id ? ensureTrailingSlash(id) : ''}${
activeTab ? ensureTrailingSlash(activeTab) : ''
}${factoryId ? `?story=${name}` : ''}`;
}${dynamicId ? `?story=${name}` : ''}`;
return encodeURI(removeTrailingSlash(route));
};

Expand All @@ -90,14 +90,14 @@ export const docStoryToId = (docId: string, storyId: string) =>
* maps an exported story to an array of stories. Used for dynamically created stories.
*/
export const mapDynamicStories = (story: Story, doc: Document): Story[] => {
if (story.factory && typeof story.renderFn === 'function') {
if (story.dynamic && typeof story.renderFn === 'function') {
const stories = story.renderFn(doc);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { id, name, ...storyProps } = story;
return Array.isArray(stories)
? stories.map(s => ({
...storyProps,
factoryId: docStoryToId(doc.title, id || name),
dynamicId: docStoryToId(doc.title, id || name),
...s,
}))
: [story];
Expand Down
12 changes: 6 additions & 6 deletions core/core/src/document.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,22 +155,22 @@ export type Story = {
*/
subtitle?: string;
/**
* if set to true, the function is a stories factory, returns a list of Story objects
* if set to true, the function is dynamically creating stories, returns a list of Story objects
*/
factory?: boolean;
dynamic?: boolean;

/**
* if the story was created by a dynacmi storiers factory, this is the original 'parent' factory id.
* if the story was created by a dynamic story (factory), this is the original story id.
* it is set internally and will be used to create a story URL
*/
factoryId?: string;
dynamicId?: string;
} & StoryProps;

/**
* dynamic story factory function type.
* dynamic story creator function type.
* returns an array of dynamically loaded stories
*/
export type StoryFactoryFn = (doc: Document) => Story[];
export type StoryFactoryFn = (doc: Document) => Story[] & Story;

export const defDocType: DocType = 'story';
/**
Expand Down
102 changes: 51 additions & 51 deletions core/webpack-compile/tests/__snapshots__/example-stories.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,11 +478,11 @@ Button.propTypes = {
},
"version": "1.27.0",
},
"2ee4e194b81724461f4c45baab611609": Object {
"fileHash": "2ee4e194b81724461f4c45baab611609",
"38eb30a76456bbd1c244968c2ca8e4b8": Object {
"fileHash": "38eb30a76456bbd1c244968c2ca8e4b8",
"name": "component-controls-stories",
"repository": Object {
"browse": "https://github.com/ccontrols/component-controls/tree/master/examples/stories/src/stories/dynamic-stories.stories.tsx",
"browse": "https://github.com/ccontrols/component-controls/tree/master/examples/stories/src/stories_native/dynamic-stories.stories.tsx",
"docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
"issues": "https://github.com/ccontrols/component-controls/issues",
},
Expand Down Expand Up @@ -550,6 +550,54 @@ Button.propTypes = {
},
},
"stores": Array [
Object {
"doc": Object {
"author": "atanasster",
"components": Object {},
"componentsLookup": Object {},
"date": "2020-10-08T17:00:16.577Z",
"dateModified": "2020-10-09T04:28:57.965Z",
"description": "ESM story file to demostrate creating 'dynamic' stories at run-time. Creates a story iterating through each theme color",
"fileName": "/Users/atanasster/component-controls/examples/stories/src/stories_native/dynamic-stories.stories.tsx",
"package": "38eb30a76456bbd1c244968c2ca8e4b8",
"title": "Introduction/Dynamic stories",
},
"filePath": "/Users/atanasster/component-controls/examples/stories/src/stories_native/dynamic-stories.stories.tsx",
"stories": Object {
"buttonColors": Object {
"arguments": Array [],
"dynamic": true,
"id": "buttonColors",
"loc": Object {
"end": Object {
"column": 1,
"line": 27,
},
"start": Object {
"column": 28,
"line": 13,
},
},
"name": "buttonColors",
"renderFn": [Function],
"source": "() => {
return Object.keys(theme.colors)
.filter(color => typeof theme.colors[color] === 'string')
.map(color => {
return {
name: color,
source: \`<Button sx={{ bg: '\${color}'}}>Color \${color}: \${theme.colors[color]}</Button>\`,
renderFn: () => (
<Button
sx={{ bg: color }}
>{\`Color \${color}: \${theme.colors[color]}\`}</Button>
),
};
});
}",
},
},
},
Object {
"doc": Object {
"author": "atanasster",
Expand Down Expand Up @@ -1982,54 +2030,6 @@ any *markdown* is allowed
},
},
},
Object {
"doc": Object {
"author": "atanasster",
"components": Object {},
"componentsLookup": Object {},
"date": "2020-10-08T17:00:16.577Z",
"dateModified": "2020-10-09T01:08:05.017Z",
"description": "ESM story file to demostrate creating 'dynamic' stories at run-time. Creates a story iterating through each theme color",
"fileName": "/Users/atanasster/component-controls/examples/stories/src/stories/dynamic-stories.stories.tsx",
"package": "2ee4e194b81724461f4c45baab611609",
"title": "Introduction/Dynamic stories",
},
"filePath": "/Users/atanasster/component-controls/examples/stories/src/stories/dynamic-stories.stories.tsx",
"stories": Object {
"buttonColors": Object {
"arguments": Array [],
"factory": true,
"id": "buttonColors",
"loc": Object {
"end": Object {
"column": 1,
"line": 27,
},
"start": Object {
"column": 28,
"line": 13,
},
},
"name": "buttonColors",
"renderFn": [Function],
"source": "() => {
return Object.keys(theme.colors)
.filter(color => typeof theme.colors[color] === 'string')
.map(color => {
return {
name: color,
source: \`<Button sx={{ bg: '\${color}'}}>Color \${color}: \${theme.colors[color]}</Button>\`,
renderFn: () => (
<Button
sx={{ bg: color }}
>{\`Color \${color}: \${theme.colors[color]}\`}</Button>
),
};
});
}",
},
},
},
Object {
"doc": Object {
"author": "atanasster",
Expand Down
1 change: 1 addition & 0 deletions examples/gatsby/.config/buildtime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = {
'../../stories/src/tutorial/configuration/*.mdx',
'../../stories/src/tutorial/reference/*.mdx',
'../../stories/src/stories/*.stories.@(js|jsx|tsx|mdx)',
'../../stories/src/stories_native/*.stories.@(js|jsx|tsx|mdx)',
'../../stories/src/mdx-stories/*.mdx',
'../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
'../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
Expand Down
1 change: 1 addition & 0 deletions examples/nextjs/.config/buildtime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = {
'../../stories/src/tutorial/configuration/*.mdx',
'../../stories/src/tutorial/reference/*.mdx',
'../../stories/src/stories/*.stories.@(js|jsx|tsx|mdx)',
'../../stories/src/stories_native/*.stories.@(js|jsx|tsx|mdx)',
'../../stories/src/mdx-stories/*.mdx',
'../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
'../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
Expand Down
2 changes: 1 addition & 1 deletion ...s/src/stories/dynamic-stories.stories.tsx → ...tories_native/dynamic-stories.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,4 @@ export const buttonColors = () => {
});
};

buttonColors.factory = true;
buttonColors.dynamic = true;
8 changes: 5 additions & 3 deletions examples/stories/src/tutorial/reference/story.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -427,15 +427,17 @@ overview.decorators = [
<img alt="story decorators" title="story decorators" src={decoratorsImg} />


### factory
### dynamic

type `boolean`

If this flag is set to true, the story is considered a `factory` for creating dynamic stories at run-time
If this flag is set to true, the story is a function creating dynamic stories at run-time

[ESM](/tutorial/esmodules-stories)
```
import React from 'react';
import { theme } from '@component-controls/components';
export default {
title: 'Library/Components/Button',
};
Expand All @@ -456,6 +458,6 @@ export const buttonColors = () => {
});
};
buttonColors.factory = true;
buttonColors.dynamic = true;
```

8 changes: 5 additions & 3 deletions examples/stories/src/tutorial/write-documentation/esmodules-stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,12 @@ myStory.story = {

### Dynamic stories

You can create multiple stories dynamically (at run time) from a function To do this, all you need is to add `factory = true` flag to the exported story:
You can create multiple stories dynamically (at run time) from a function To do this, all you need is to add `dynamic = true` flag to the exported story:

```
import React from 'react';
import { theme } from '@component-controls/components';
export default {
title: Components/Button',
};
Expand All @@ -103,11 +105,11 @@ export const buttonColors = () => {
});
};
buttonColors.factory = true;
buttonColors.dynamic = true;
```
[live example](/api/introduction-dynamic-stories--button-colors/?story=Background)

**Important**: The dynamic stories are created at run-time (when the site loads in the browser), while the pages static routes are assembled during the static site building process. This makes it so all the newly created dynamic stories will reside under the URL of the parent *factory* story, with a `story` parameter:
**Important**: The dynamic stories are created at run-time (when the site loads in the browser), while the pages static routes are assembled during the static site building process. This makes it so all the newly created dynamic stories will reside under the URL of the dynamic parent story, with a `story` parameter:

`https://xxx/api/components-button--button-colors/?story=Background`

6 changes: 5 additions & 1 deletion ui/app/src/AppContext/AppContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,12 @@ export const AppContext: FC<AppContextProps> = ({
linkClass,
activeTab,
}) => {
const query = queryString.parse(location.search);
const query =
typeof location !== 'undefined'
? queryString.parse(location.search)
: undefined;
const dynStoryId =
query &&
docId &&
storyId &&
!store.stories[storyId] &&
Expand Down

0 comments on commit 14218eb

Please sign in to comment.