Skip to content

Commit

Permalink
docs: update custom pages example
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Apr 26, 2020
1 parent a449aaf commit 616b5b7
Show file tree
Hide file tree
Showing 7 changed files with 185 additions and 6 deletions.
11 changes: 11 additions & 0 deletions examples/custom-pages-storybook-5/.storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,22 @@ module.exports = {
'../src/stories/**/*.stories.(js|mdx)',
],
addons: [
'@storybook/addon-docs',
{
name: '@component-controls/storybook',
options: {
pages: [],
controlsPanel: false,
}
},
{
name: '@component-controls/storybook-custom-docs',
options: {
pages: [
require.resolve('./page-story.js'),
require.resolve('./page-docs-blocks.js'),
require.resolve('./page-component-blocks.js'),
require.resolve('./page-mixed-blocks.js'),
]
},
}
Expand Down
25 changes: 25 additions & 0 deletions examples/custom-pages-storybook-5/.storybook/page-component-blocks.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';
import { DocsContainer } from '@component-controls/storybook';
import { Story, Title, ControlsTable, Playground } from '@component-controls/blocks';


const Page = ({ active }) => {
return (
<DocsContainer active={active} >
<Title>Component controls blocks</Title>
<Playground openTab="source" title=".">
<Story id="." />
</Playground>
<ControlsTable id='.' />
</DocsContainer>
)
}
const page = {
key: 'component-page',
title: 'Controls blocks',
render: ({ active }) => {
return <Page active={active} />;
}
}

export default page;
25 changes: 25 additions & 0 deletions examples/custom-pages-storybook-5/.storybook/page-docs-blocks.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';
import { DocsContainer, Story, Preview, Source, Title } from '@storybook/addon-docs/blocks';
import { getContext, useStoryId } from '@component-controls/storybook-custom-docs';

const Page = () => {
useStoryId();
return (
<DocsContainer context={getContext()}>
<Title>Using storybook docs page blocks</Title>
<Preview>
<Story id="." />
</Preview>
<Source id="." />
</DocsContainer>
)
}
const page = {
key: 'docs-page',
title: 'Docs blocks',
render: ({ active }) => {
return active ? <Page /> : null;
}
}

export default page;
38 changes: 38 additions & 0 deletions examples/custom-pages-storybook-5/.storybook/page-mixed-blocks.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import { DocsContainer as SBDocsContainer, Preview, Story as SBStory, Title as SBTitle, Props} from '@storybook/addon-docs/blocks';
import { getContext, useStoryId } from '@component-controls/storybook-custom-docs';
import { DocsContainer } from '@component-controls/storybook';
import { Story, Title, Playground, PropsTable } from '@component-controls/blocks';


const Page = () => {
const storyId = useStoryId();
return (
<>
<h1>Mixing storybook docs blocks and component-controls blocks</h1>
<SBDocsContainer context={getContext()}>
<SBTitle />
<Preview >
<SBStory id={storyId} />
</Preview>
<Props of='.' />
</SBDocsContainer>
<DocsContainer storyId={storyId}>
<Title />
<Playground openTab="source" title="." dark={true}>
<Story id="." />
</Playground>
<PropsTable of="." />
</DocsContainer>
</>
)
}
const page = {
key: 'mixed-page',
title: 'Mixed blocks',
render: ({ active }) => {
return active ? <Page /> : null;
}
}

export default page;
4 changes: 3 additions & 1 deletion examples/custom-pages-storybook-5/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
"dist": "webpack --mode production",
"storybook": "start-storybook -p 9017 -c .storybook",
"build-storybook": "build-storybook -c .storybook -o ./docs"
},
"dependencies": {
"@component-controls/storybook": "^1.0.1",
"@component-controls/storybook-custom-docs": "^1.0.1",
"@storybook/addon-docs": "^5.3.18",
"@storybook/react": "^5.3.18",
"prop-types": "^15.7.2",
"react": "^16.13.1",
Expand Down
6 changes: 3 additions & 3 deletions examples/custom-pages-storybook-5/src/stories/person.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Person } from '../components/Person';

export default {
title: 'Stories/Person',
component: Person
}
component: Person,
};

export const main = props => <Person {...props} />
export const main = props => <Person {...props} />;
82 changes: 80 additions & 2 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@
chalk "^2.0.0"
js-tokens "^4.0.0"

"@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.3", "@babel/parser@^7.6.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.5", "@babel/parser@^7.8.4", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0", "@babel/parser@^7.9.4":
"@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.2", "@babel/parser@^7.4.3", "@babel/parser@^7.6.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.5", "@babel/parser@^7.8.4", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0", "@babel/parser@^7.9.4":
version "7.9.4"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==
Expand Down Expand Up @@ -2630,6 +2630,46 @@
vue-docgen-api "^4.7.0"
vue-docgen-loader "^1.4.0"

"@storybook/addon-docs@^5.3.18":
version "5.3.18"
resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-5.3.18.tgz#c9ab444680d3946349fe35b749424ddec43e3683"
integrity sha512-5DmQS1mI+cN1BCbyJxKT41OG+iSPr5k9FO4hcSonSYJAjApC5VUhep8PJ9VA3Oy9MFAiggXzFyvaI2xhwzjqFQ==
dependencies:
"@babel/generator" "^7.4.0"
"@babel/parser" "^7.4.2"
"@babel/plugin-transform-react-jsx" "^7.3.0"
"@egoist/vue-to-react" "^1.1.0"
"@jest/transform" "^24.9.0"
"@mdx-js/loader" "^1.5.1"
"@mdx-js/mdx" "^1.5.1"
"@mdx-js/react" "^1.5.1"
"@storybook/addons" "5.3.18"
"@storybook/api" "5.3.18"
"@storybook/components" "5.3.18"
"@storybook/core-events" "5.3.18"
"@storybook/csf" "0.0.1"
"@storybook/postinstall" "5.3.18"
"@storybook/source-loader" "5.3.18"
"@storybook/theming" "5.3.18"
acorn "^7.1.0"
acorn-jsx "^5.1.0"
acorn-walk "^7.0.0"
core-js "^3.0.1"
doctrine "^3.0.0"
escodegen "^1.12.0"
global "^4.3.2"
html-tags "^3.1.0"
js-string-escape "^1.0.1"
lodash "^4.17.15"
prop-types "^15.7.2"
react-element-to-jsx-string "^14.1.0"
remark-external-links "^5.0.0"
remark-slug "^5.1.2"
ts-dedent "^1.1.0"
util-deprecate "^1.0.2"
vue-docgen-api "^4.1.0"
vue-docgen-loader "^1.3.0-beta.0"

"@storybook/[email protected]":
version "5.3.18"
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.3.18.tgz#5cbba6407ef7a802041c5ee831473bc3bed61f64"
Expand Down Expand Up @@ -3071,6 +3111,13 @@
npmlog "^4.1.2"
pretty-hrtime "^1.0.3"

"@storybook/[email protected]":
version "5.3.18"
resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-5.3.18.tgz#1c102eb968e3271e485f433f3c3f63687379a681"
integrity sha512-f2dr6xU3Es7OD0o2W0hDlzgVP6tZvgUjHfEGc6mj7kC+1BtEOuSDnQwRDznaLnVFwYlLKFJ/gkDneZb/qoBiwA==
dependencies:
core-js "^3.0.1"

"@storybook/[email protected]":
version "6.0.0-alpha.28"
resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.0.0-alpha.28.tgz#fff33be047ddb0eb0bfe1b2030b58dcc5907888d"
Expand Down Expand Up @@ -3173,6 +3220,22 @@
qs "^6.6.0"
util-deprecate "^1.0.2"

"@storybook/[email protected]":
version "5.3.18"
resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-5.3.18.tgz#39ba28d9664ab8204d6b04ee757772369931e7e5"
integrity sha512-oljmLt3KMu17W9FAaEgocsI6wrloWczS26SVXadzbDbL+8Tu6vTeFJSd6HcY+e4JIIKjuze0kmaVhpi6wwPbZQ==
dependencies:
"@storybook/addons" "5.3.18"
"@storybook/client-logger" "5.3.18"
"@storybook/csf" "0.0.1"
core-js "^3.0.1"
estraverse "^4.2.0"
global "^4.3.2"
loader-utils "^1.2.3"
prettier "^1.16.4"
prop-types "^15.7.2"
regenerator-runtime "^0.13.3"

"@storybook/[email protected]":
version "6.0.0-alpha.28"
resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.0.0-alpha.28.tgz#c62e8551d67f038f5d688b665e2381534224a19c"
Expand Down Expand Up @@ -17047,6 +17110,21 @@ void-elements@^2.0.1:
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=

vue-docgen-api@^4.1.0:
version "4.19.0"
resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.19.0.tgz#5713c5d42686954f28048e952251e6b193ac49f7"
integrity sha512-cqCkj6n4DcybZNsM72L+4OPrV+Rllp3CDQmvkJeAREYoE35o7FDWkMl6GnWqykQvvo+jvLz3cNDLtJGxOEqvbw==
dependencies:
"@babel/parser" "^7.6.0"
"@babel/types" "^7.6.0"
ast-types "^0.12.2"
hash-sum "^1.0.2"
lru-cache "^4.1.5"
pug "^2.0.3"
recast "^0.17.3"
ts-map "^1.0.3"
vue-template-compiler "^2.0.0"

vue-docgen-api@^4.7.0:
version "4.18.0"
resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.18.0.tgz#7d066ee38983c093651cab43e040afc716eb2293"
Expand All @@ -17062,7 +17140,7 @@ vue-docgen-api@^4.7.0:
ts-map "^1.0.3"
vue-template-compiler "^2.0.0"

vue-docgen-loader@^1.4.0:
vue-docgen-loader@^1.3.0-beta.0, vue-docgen-loader@^1.4.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/vue-docgen-loader/-/vue-docgen-loader-1.5.0.tgz#bf8797ea9dde87a8d734b56176f105477d9bf266"
integrity sha512-LKZ8mxeIQ44uSUMTplnwOXbC4bO4E2vyZDTbn7/1QlVwJPEIjk3ahL0DA1m27IEw6YTlHOwtWS0PrHmDkFgyAg==
Expand Down

0 comments on commit 616b5b7

Please sign in to comment.