├── .prettierrc
├── packages
├── storybook-readme
│ ├── src
│ │ ├── with-docs.js
│ │ ├── backwardCompatibility
│ │ │ ├── with-docs.js
│ │ │ ├── with-readme.js
│ │ │ └── env
│ │ │ │ ├── common
│ │ │ │ └── index.js
│ │ │ │ └── react
│ │ │ │ └── index.js
│ │ ├── with-readme.js
│ │ ├── services
│ │ │ ├── marked.js
│ │ │ ├── transformEmojis.js
│ │ │ ├── config.js
│ │ │ ├── getParameters.js
│ │ │ ├── highlite.js
│ │ │ └── getPropsTables
│ │ │ │ └── excludePropTable.js
│ │ ├── vue
│ │ │ ├── components
│ │ │ │ └── Preview
│ │ │ │ │ ├── DocPreview.js
│ │ │ │ │ ├── FooterPreview.js
│ │ │ │ │ ├── HeaderPreview.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── StoryPreview.js
│ │ │ ├── docs-loader.js
│ │ │ └── updateWebpackConfig.js
│ │ ├── components
│ │ │ ├── Preview
│ │ │ │ ├── DocPreview.js
│ │ │ │ ├── FooterPreview.js
│ │ │ │ ├── HeaderPreview.js
│ │ │ │ ├── index.js
│ │ │ │ └── StoryPreview.js
│ │ │ └── Marked
│ │ │ │ └── index.js
│ │ ├── register.js
│ │ ├── styles
│ │ │ ├── codeThemes
│ │ │ │ ├── darkula.css.js
│ │ │ │ ├── ascetic.css.js
│ │ │ │ ├── mono-blue.css.js
│ │ │ │ ├── dark.css.js
│ │ │ │ ├── androidstudio.css.js
│ │ │ │ ├── codepen-embed.css.js
│ │ │ │ ├── vs.css.js
│ │ │ │ ├── far.css.js
│ │ │ │ ├── arta.css.js
│ │ │ │ ├── ir-black.css.js
│ │ │ │ ├── color-brewer.css.js
│ │ │ │ ├── magula.css.js
│ │ │ │ ├── github-gist.css.js
│ │ │ │ ├── monokai.css.js
│ │ │ │ ├── darcula.css.js
│ │ │ │ ├── gml.css.js
│ │ │ │ ├── tomorrow.css.js
│ │ │ │ ├── zenburn.css.js
│ │ │ │ ├── ocean.css.js
│ │ │ │ ├── paraiso-dark.css.js
│ │ │ │ ├── paraiso-light.css.js
│ │ │ │ ├── dracula.css.js
│ │ │ │ ├── qtcreator_dark.css.js
│ │ │ │ ├── qtcreator_light.css.js
│ │ │ │ ├── rainbow.css.js
│ │ │ │ ├── kimbie.dark.css.js
│ │ │ │ ├── kimbie.light.css.js
│ │ │ │ ├── atelier-dune-dark.css.js
│ │ │ │ ├── monokai-sublime.css.js
│ │ │ │ ├── atelier-dune-light.css.js
│ │ │ │ ├── atelier-heath-dark.css.js
│ │ │ │ ├── atelier-heath-light.css.js
│ │ │ │ ├── atelier-forest-dark.css.js
│ │ │ │ ├── atelier-forest-light.css.js
│ │ │ │ ├── tomorrow-night-bright.css.js
│ │ │ │ ├── tomorrow-night-eighties.css.js
│ │ │ │ ├── atelier-seaside-dark.css.js
│ │ │ │ ├── atelier-seaside-light.css.js
│ │ │ │ ├── hopscotch.css.js
│ │ │ │ ├── lightfair.css.js
│ │ │ │ ├── atelier-lakeside-dark.css.js
│ │ │ │ ├── atelier-lakeside-light.css.js
│ │ │ │ ├── atelier-sulphurpool-dark.css.js
│ │ │ │ ├── atelier-sulphurpool-light.css.js
│ │ │ │ ├── tomorrow-night.css.js
│ │ │ │ ├── tomorrow-night-blue.css.js
│ │ │ │ ├── solarized-dark.css.js
│ │ │ │ ├── solarized-light.css.js
│ │ │ │ ├── arduino-light.css.js
│ │ │ │ ├── googlecode.css.js
│ │ │ │ ├── xt256.css.js
│ │ │ │ ├── obsidian.css.js
│ │ │ │ ├── foundation.css.js
│ │ │ │ ├── atelier-cave-dark.css.js
│ │ │ │ ├── an-old-hope.css.js
│ │ │ │ ├── docco.css.js
│ │ │ │ ├── atelier-cave-light.css.js
│ │ │ │ ├── atelier-estuary-dark.css.js
│ │ │ │ ├── atelier-plateau-dark.css.js
│ │ │ │ ├── atelier-savanna-dark.css.js
│ │ │ │ ├── atelier-estuary-light.css.js
│ │ │ │ ├── atelier-plateau-light.css.js
│ │ │ │ ├── atelier-savanna-light.css.js
│ │ │ │ ├── github.css.js
│ │ │ │ ├── idea.css.js
│ │ │ │ ├── default.css.js
│ │ │ │ ├── sunburst.css.js
│ │ │ │ ├── xcode.css.js
│ │ │ │ ├── atom-one-dark.css.js
│ │ │ │ ├── atom-one-light.css.js
│ │ │ │ ├── railscasts.css.js
│ │ │ │ ├── routeros.css.js
│ │ │ │ ├── agate.css.js
│ │ │ │ ├── hybrid.css.js
│ │ │ │ ├── shades-of-purple.css.js
│ │ │ │ ├── atom-one-dark-reasonable.css.js
│ │ │ │ ├── a11y-dark.css.js
│ │ │ │ ├── a11y-light.css.js
│ │ │ │ ├── isbl-editor-dark.css.js
│ │ │ │ └── isbl-editor-light.css.js
│ │ │ └── styleFactory.js
│ │ ├── const.js
│ │ ├── registerWithPanelTitle.js
│ │ └── html
│ │ │ └── index.js
│ ├── scripts
│ │ ├── _themeTemplate
│ │ ├── buildHighlightThemes.js
│ │ └── buildPrismHighlightThemes.js
│ ├── .babelrc
│ ├── LICENSE
│ └── package.json
├── example-html
│ ├── .storybook
│ │ ├── addons.js
│ │ └── config.js
│ ├── package.json
│ └── stories
│ │ └── index.js
├── example-react
│ ├── stories
│ │ ├── storyshots.test.js
│ │ ├── withPropsTable
│ │ │ ├── index.js
│ │ │ ├── basic.js
│ │ │ ├── excludeGlobally.js
│ │ │ └── renderPropPattern.js
│ │ ├── withCustomTheme.js
│ │ ├── Button.js
│ │ ├── LocalCodeTheme.md
│ │ ├── withCustomCodeTheme.js
│ │ ├── withEmoji.js
│ │ ├── GlobalCodeTheme.md
│ │ ├── withOldApi.js
│ │ ├── index.js
│ │ ├── withContentDocs.js
│ │ ├── withSidebarDocs.js
│ │ └── withCustomPreview.js
│ ├── .storybook
│ │ ├── addons.js
│ │ └── config.js
│ ├── jest.config.js
│ ├── babel.config.js
│ ├── components
│ │ ├── Button
│ │ │ ├── USAGE.md
│ │ │ ├── README.md
│ │ │ └── index.js
│ │ └── PropTables
│ │ │ ├── withHOC.js
│ │ │ ├── SmallComponentOne.js
│ │ │ ├── SmallComponentTwo.js
│ │ │ ├── SmallComponentThree.js
│ │ │ └── WrapperComponent.js
│ ├── package-storybook-v3.json
│ └── package.json
└── example-vue
│ ├── stories
│ ├── storyshots.test.js
│ ├── withVueDocs.js
│ ├── withCustomTheme.js
│ ├── withCustomCodeTheme.js
│ ├── withEmoji.js
│ ├── Button.js
│ ├── index.js
│ ├── withOldApi.js
│ ├── withCustomPreview.js
│ └── withContentDocs.js
│ ├── .storybook
│ ├── addons.js
│ ├── webpack.config.js
│ └── config.js
│ ├── jest.config.js
│ ├── babel.config.js
│ ├── components
│ └── MyButton
│ │ ├── USAGE.md
│ │ ├── DOCS.md
│ │ ├── README.md
│ │ └── MyButton.vue
│ └── package.json
├── lerna.json
├── .github
└── FUNDING.yml
├── .gitignore
├── .vscode
└── settings.json
├── LICENSE
└── package.json
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "all",
3 | "singleQuote": true
4 | }
5 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/with-docs.js:
--------------------------------------------------------------------------------
1 | export { default } from './backwardCompatibility/with-docs';
2 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/backwardCompatibility/with-docs.js:
--------------------------------------------------------------------------------
1 | export { withDocs as default } from './';
2 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/with-readme.js:
--------------------------------------------------------------------------------
1 | export { default } from './backwardCompatibility/with-readme';
2 |
--------------------------------------------------------------------------------
/packages/example-html/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addons';
2 | import 'storybook-readme/register';
3 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/backwardCompatibility/with-readme.js:
--------------------------------------------------------------------------------
1 | export { withReadme as default } from './';
2 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/services/marked.js:
--------------------------------------------------------------------------------
1 | import marked from 'marked';
2 |
3 | export default md => marked(md);
4 |
--------------------------------------------------------------------------------
/packages/example-react/stories/storyshots.test.js:
--------------------------------------------------------------------------------
1 | import initStoryshots from '@storybook/addon-storyshots';
2 | initStoryshots();
3 |
--------------------------------------------------------------------------------
/packages/example-vue/stories/storyshots.test.js:
--------------------------------------------------------------------------------
1 | import initStoryshots from '@storybook/addon-storyshots';
2 | initStoryshots();
3 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/vue/components/Preview/DocPreview.js:
--------------------------------------------------------------------------------
1 | export default {
2 | template: `
`,
3 | };
4 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/vue/components/Preview/FooterPreview.js:
--------------------------------------------------------------------------------
1 | export default {
2 | template: `
`,
3 | };
4 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/vue/components/Preview/HeaderPreview.js:
--------------------------------------------------------------------------------
1 | export default {
2 | template: `
`,
3 | };
4 |
--------------------------------------------------------------------------------
/packages/storybook-readme/scripts/_themeTemplate:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 | %css%
6 |
7 | `;
8 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/components/Preview/DocPreview.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default props => {props.children}
;
4 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/components/Preview/FooterPreview.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default props => {props.children}
;
4 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/components/Preview/HeaderPreview.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default props => {props.children}
;
4 |
--------------------------------------------------------------------------------
/packages/example-react/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addons';
2 | import '@storybook/addon-knobs/register';
3 | import 'storybook-readme/register';
4 |
--------------------------------------------------------------------------------
/packages/example-vue/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addons';
2 | import '@storybook/addon-knobs/register';
3 | import 'storybook-readme/register';
4 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "npmClient": "yarn",
3 | "useWorkspaces": true,
4 | "packages": ["packages/*"],
5 | "independent": true,
6 | "version": "independent"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/register.js:
--------------------------------------------------------------------------------
1 | import registerWithPanelTitle from './registerWithPanelTitle';
2 |
3 | const title = 'Readme';
4 | registerWithPanelTitle(title);
5 |
--------------------------------------------------------------------------------
/packages/storybook-readme/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [["react-app", { "absoluteRuntime": false, "useESModules": false }]],
3 | "plugins": ["@babel/plugin-transform-modules-commonjs"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withPropsTable/index.js:
--------------------------------------------------------------------------------
1 | import './basic';
2 | import './multipleComponents';
3 | import './hocPattern';
4 | import './renderPropPattern';
5 | import './excludeGlobally';
6 | import './includeLocally';
7 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/vue/docs-loader.js:
--------------------------------------------------------------------------------
1 | module.exports = function(source, map) {
2 | this.callback(
3 | null,
4 | 'module.exports = function(Component) {Component.options.__docs = ' +
5 | source +
6 | '}',
7 | map
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/packages/example-react/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | testURL: 'http://localhost',
3 | transform: {
4 | '^.+\\.md?$': 'markdown-loader-jest',
5 | '^.+\\.js?$': 'babel-jest',
6 | },
7 | transformIgnorePatterns: ['/node_modules/(?!(@babel/runtime)/).*/'],
8 | };
9 |
--------------------------------------------------------------------------------
/packages/example-vue/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | testURL: 'http://localhost',
3 | transform: {
4 | '^.+\\.md?$': 'markdown-loader-jest',
5 | '^.+\\.js?$': 'babel-jest',
6 | },
7 | transformIgnorePatterns: ['/node_modules/(?!(@babel/runtime)/).*/'],
8 | };
9 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/components/Preview/index.js:
--------------------------------------------------------------------------------
1 | export { default as StoryPreview } from './StoryPreview';
2 | export { default as FooterPreview } from './FooterPreview';
3 | export { default as HeaderPreview } from './HeaderPreview';
4 | export { default as DocPreview } from './DocPreview';
5 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/vue/components/Preview/index.js:
--------------------------------------------------------------------------------
1 | export { default as StoryPreview } from './StoryPreview';
2 | export { default as FooterPreview } from './FooterPreview';
3 | export { default as HeaderPreview } from './HeaderPreview';
4 | export { default as DocPreview } from './DocPreview';
5 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: [sdoomz, tuchk4]
4 | patreon: #
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: tuchk4
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | custom: # Replace with a single custom sponsorship URL
9 |
--------------------------------------------------------------------------------
/packages/example-vue/babel.config.js:
--------------------------------------------------------------------------------
1 | // babel.config.js
2 | module.exports = {
3 | presets: [
4 | [
5 | '@babel/preset-env',
6 | {
7 | modules: 'commonjs',
8 | targets: {
9 | node: 'current',
10 | },
11 | },
12 | ],
13 | ],
14 | plugins: ['@babel/plugin-syntax-dynamic-import'],
15 | };
16 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/darkula.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Deprecated due to a typo in the name and left here for compatibility purpose only.
9 | Please use darcula.css instead.
10 | */
11 |
12 | @import url('darcula.css');
13 |
14 |
15 |
16 |
17 | `;
18 |
--------------------------------------------------------------------------------
/packages/example-react/babel.config.js:
--------------------------------------------------------------------------------
1 | // babel.config.js
2 | module.exports = {
3 | presets: [
4 | [
5 | '@babel/preset-env',
6 | {
7 | modules: 'commonjs',
8 | targets: {
9 | node: 'current',
10 | },
11 | },
12 | ],
13 | '@babel/react',
14 | ],
15 | plugins: ['@babel/plugin-syntax-dynamic-import'],
16 | };
17 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/components/Preview/StoryPreview.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default props => (
4 |
14 |
{props.children}
15 |
16 | {type}
17 |
18 | );
19 | };
20 |
21 | SmallComponentOne.defaultProps = {
22 | type: 'Small Component One',
23 | };
24 |
25 | SmallComponentOne.propTypes = {
26 | /**
27 | * Type of the component(small one)
28 | */
29 | type: PropTypes.string.isRequired,
30 | };
31 |
--------------------------------------------------------------------------------
/packages/example-react/stories/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Button from '../components/Button';
5 |
6 | import ButtonReadme from '../components/Button/README.md';
7 | import ButtonUsage from '../components/Button/USAGE.md';
8 |
9 | storiesOf('Button', module)
10 | .addParameters({
11 | readme: {
12 | codeTheme: 'duotone-sea',
13 | content: ButtonReadme,
14 | sidebar: ButtonUsage,
15 | },
16 | })
17 | .add('Button', () => )
18 | .add('Alert Button', () => (
19 |
20 | ))
21 | .add('Success Button', () => (
22 |
23 | ));
24 |
--------------------------------------------------------------------------------
/packages/example-react/stories/LocalCodeTheme.md:
--------------------------------------------------------------------------------
1 | # Local Code Theme
2 |
3 | You can override global code theme by adding `codeTheme` value to `addParameters`
4 | at story.
5 |
6 | ```js
7 | storiesOf('Your story name here', module)
8 | .addParameters({
9 | readme: {
10 | codeTheme: 'duotone-sea',
11 | },
12 | })
13 | .add('Your component name', () => Your component
);
14 | ```
15 |
16 | Full lists of themes are at https://github.com/PrismJS/prism-themes.
17 | To be used with storybook-readme, naming of the code theme should be used in one of these styles. [codeTheme names](https://github.com/tuchk4/storybook-readme/tree/master/packages/storybook-readme/src/styles/prismCodeThemes)
18 |
19 | ```
20 | 'a11y Dark' -> 'a11y-dark'
21 | 'Atom Dark' -> 'atom-dark'
22 | ```
23 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withCustomCodeTheme.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Button from '../components/Button';
5 |
6 | import ButtonReadme from '../components/Button/README.md';
7 |
8 | import GlobalCodeThemeMD from './GlobalCodeTheme.md';
9 | import LocalCodeThemeMD from './LocalCodeTheme.md';
10 |
11 | storiesOf('Custom Code Theme', module)
12 | .addParameters({
13 | readme: {
14 | content: GlobalCodeThemeMD,
15 | sidebar: ButtonReadme,
16 | },
17 | })
18 | .add('Global (all stories)', () => null)
19 | .addParameters({
20 | readme: {
21 | codeTheme: 'atom-dark',
22 | content: LocalCodeThemeMD,
23 | sidebar: ButtonReadme,
24 | },
25 | })
26 | .add('Local (specific story)', () => null);
27 |
--------------------------------------------------------------------------------
/packages/example-html/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { addParameters, addDecorator, configure } from '@storybook/html';
2 | import { addReadme } from 'storybook-readme/html';
3 | import { themes, create } from '@storybook/theming';
4 |
5 | const basicTheme = create({
6 | base: 'light',
7 | brandTitle: 'README addon',
8 | brandUrl: 'https://github.com/tuchk4/storybook-readme',
9 | brandImage: null,
10 | });
11 |
12 | addParameters({
13 | options: {
14 | showPanel: true,
15 | panelPosition: 'right',
16 | theme: basicTheme,
17 | // theme: themes.dark,
18 | },
19 | readme: {
20 | // You can set the global code theme here.
21 | codeTheme: 'github',
22 | },
23 | });
24 |
25 | addDecorator(addReadme);
26 |
27 | function loadStories() {
28 | require('../stories');
29 | }
30 |
31 | configure(loadStories, module);
32 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withEmoji.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Button from '../components/Button';
5 |
6 | import ButtonReadme from '../components/Button/README.md';
7 | import ButtonUsage from '../components/Button/USAGE.md';
8 |
9 | storiesOf('Emoji', module).add(
10 | 'Button',
11 | () => ,
12 | {
13 | readme: {
14 | content: `
15 | ### Emoji
16 |
17 | Use shortcodes between colon to insert emoji into the docs. For example
18 |
19 | Here is rocket :rocket:
20 |
21 | Here is rocket :rocket:
22 |
23 | List of all shortcodes could be found at [Emojipedia](https://emojipedia.org) or at [Gist/rxaviers](https://gist.github.com/rxaviers/7360908)
24 |
25 | - :rocket:
26 | - :grinning:
27 | - :monkey:
28 | `,
29 | },
30 | }
31 | );
32 |
--------------------------------------------------------------------------------
/packages/example-vue/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import { configure, addDecorator, addParameters } from '@storybook/vue';
3 | import { addReadme } from 'storybook-readme/vue';
4 | import { themes, create } from '@storybook/theming';
5 |
6 | const basicTheme = create({
7 | base: 'light',
8 | brandTitle: 'README addon',
9 | brandUrl: 'https://github.com/tuchk4/storybook-readme',
10 | brandImage: null,
11 | });
12 |
13 | addParameters({
14 | options: {
15 | showPanel: true,
16 | panelPosition: 'right',
17 | theme: basicTheme,
18 | // theme: themes.dark,
19 | },
20 | readme: {
21 | // You can set the global code theme here.
22 | codeTheme: 'github',
23 | },
24 | });
25 |
26 | addDecorator(addReadme);
27 |
28 | function loadStories() {
29 | require('../stories');
30 | }
31 |
32 | configure(loadStories, module);
33 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/components/Marked/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import marked from '../../services/marked';
3 | import highlight from '../../services/highlite';
4 | import transformEmojis from '../../services/transformEmojis';
5 |
6 | export default class Marked extends React.Component {
7 | ref = null;
8 |
9 | componentDidUpdate() {
10 | if (this.ref) {
11 | highlight(this.ref);
12 | }
13 | }
14 |
15 | handleRef = ref => {
16 | this.ref = ref;
17 |
18 | if (this.ref) {
19 | highlight(this.ref);
20 | }
21 | };
22 |
23 | render() {
24 | const { md } = this.props;
25 |
26 | return (
27 |
32 | );
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/services/highlite.js:
--------------------------------------------------------------------------------
1 | import prism from 'prismjs';
2 | import 'prismjs/components/prism-javascript';
3 | import 'prismjs/components/prism-jsx';
4 | import 'prismjs/components/prism-typescript';
5 | import 'prismjs/components/prism-tsx';
6 | import 'prismjs/components/prism-bash';
7 |
8 | export default dom => {
9 | /**
10 | * should check dom.hasOwnProperty('querySelectorAll')
11 | * for SSR cases
12 | * The most common case is using this addon with storyshoots
13 | * https://github.com/tuchk4/storybook-readme/issues/52
14 | */
15 | const nodes =
16 | typeof dom.querySelectorAll === 'function'
17 | ? dom.querySelectorAll('pre code')
18 | : [];
19 |
20 | if (nodes.length > 0) {
21 | for (var i = 0; i < nodes.length; i = i + 1) {
22 | prism.highlightElement(nodes[i]);
23 | }
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/packages/example-react/components/PropTables/SmallComponentTwo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export const SmallComponentTwo = ({ type, color }) => {
5 | return (
6 |
17 | {type}
18 |
19 | );
20 | };
21 |
22 | SmallComponentTwo.defaultProps = {
23 | type: 'Small Component Two',
24 | color: 'blue',
25 | };
26 |
27 | SmallComponentTwo.propTypes = {
28 | /**
29 | * Type of the component(small two)
30 | */
31 | type: PropTypes.string.isRequired,
32 |
33 | /**
34 | * Color of the component
35 | */
36 | color: PropTypes.string.isRequired,
37 | };
38 |
--------------------------------------------------------------------------------
/packages/example-react/components/PropTables/SmallComponentThree.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export const SmallComponentThree = ({ type, backgroundColor }) => {
5 | return (
6 |
17 | {type}
18 |
19 | );
20 | };
21 |
22 | SmallComponentThree.defaultProps = {
23 | type: 'Small Component Three',
24 | backgroundColor: 'black',
25 | };
26 |
27 | SmallComponentThree.propTypes = {
28 | /**
29 | * Type of the component(small three)
30 | */
31 | type: PropTypes.string.isRequired,
32 |
33 | /**
34 | * Background color of the component
35 | */
36 | backgroundColor: PropTypes.string.isRequired,
37 | };
38 |
--------------------------------------------------------------------------------
/packages/example-vue/stories/withEmoji.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue';
2 |
3 | import MyButton from '../components/MyButton/MyButton.vue';
4 |
5 | import ButtonReadme from '../components/MyButton/README.md';
6 | import ButtonUsage from '../components/MyButton/USAGE.md';
7 |
8 | storiesOf('Emoji', module).add(
9 | 'Button',
10 | () => {
11 | return {
12 | components: {
13 | MyButton,
14 | },
15 | template: `My Button`,
16 | };
17 | },
18 | {
19 | readme: {
20 | content: `
21 | ### Emoji
22 |
23 | Use shortcodes between colon to insert emoji into the docs. For example
24 |
25 | Here is rocket :rocket:
26 |
27 | Here is rocket :rocket:
28 |
29 | List of all shortcodes could be found at [Emojipedia](https://emojipedia.org) or at [Gist/rxaviers](https://gist.github.com/rxaviers/7360908)
30 |
31 | - :rocket:
32 | - :grinning:
33 | - :monkey:
34 | `,
35 | },
36 | }
37 | );
38 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "files.exclude": {
3 | "coverage/": true,
4 | "lerna-debug.log": true,
5 | "flow-typed/": true,
6 | "packages/storybook-readme/components/": true,
7 | "packages/storybook-readme/index.js": true,
8 | "packages/storybook-readme/const.js": true,
9 | "packages/storybook-readme/with-readme.js": true,
10 | "packages/storybook-readme/with-docs.js": true,
11 | "packages/storybook-readme/register.js": true,
12 | "packages/storybook-readme/registerWithPanelTitle.js": true,
13 | "packages/storybook-readme/env/": true,
14 | "packages/storybook-readme/vue/": true,
15 | "packages/storybook-readme/html/": true,
16 | "packages/storybook-readme/styles/": true,
17 | "packages/storybook-readme/services/": true,
18 | "packages/storybook-readme/backwardCompatibility/": true,
19 | "packages/example-react/etc/": true,
20 | "packages/example-vue/etc/": true,
21 | "storybook-static/": true
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/registerWithPanelTitle.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import addons from '@storybook/addons';
3 | import ReadmeSidebar from './components/ReadmeSidebar';
4 |
5 | const ADDON_ID = 'REACT_STORYBOOK/readme';
6 | const PANEL_NAME = 'REACT_STORYBOOK/readme/panel';
7 | const PANEL_TITLE = 'Readme';
8 |
9 | export default function registerWithPanelTitle(name = PANEL_TITLE) {
10 | addons.register(ADDON_ID, api => {
11 | const channel = addons.getChannel();
12 |
13 | addons.addPanel(PANEL_NAME, {
14 | title: name,
15 | render: props => {
16 | // compatibility with storybook@3.x
17 | const active = !props || props.active;
18 |
19 | return (
20 |
27 | );
28 | },
29 | });
30 | });
31 | }
32 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/ascetic.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Original style from softwaremaniacs.org (c) Ivan Sagalaev
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: white;
18 | color: black;
19 | }
20 |
21 | .hljs-string,
22 | .hljs-variable,
23 | .hljs-template-variable,
24 | .hljs-symbol,
25 | .hljs-bullet,
26 | .hljs-section,
27 | .hljs-addition,
28 | .hljs-attribute,
29 | .hljs-link {
30 | color: #888;
31 | }
32 |
33 | .hljs-comment,
34 | .hljs-quote,
35 | .hljs-meta,
36 | .hljs-deletion {
37 | color: #ccc;
38 | }
39 |
40 | .hljs-keyword,
41 | .hljs-selector-tag,
42 | .hljs-section,
43 | .hljs-name,
44 | .hljs-type,
45 | .hljs-strong {
46 | font-weight: bold;
47 | }
48 |
49 | .hljs-emphasis {
50 | font-style: italic;
51 | }
52 |
53 |
54 |
55 |
56 | `;
57 |
--------------------------------------------------------------------------------
/packages/example-react/components/PropTables/WrapperComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export const WrapperComponent = ({ width, height, children }) => {
5 | return (
6 |
17 | {children}
18 |
19 | );
20 | };
21 |
22 | WrapperComponent.defaultProps = {
23 | width: '200px',
24 | height: '200px',
25 | };
26 |
27 | WrapperComponent.propTypes = {
28 | /**
29 | * Width of the component
30 | */
31 | width: PropTypes.string.isRequired,
32 |
33 | /**
34 | * Height of the component
35 | */
36 | height: PropTypes.string.isRequired,
37 |
38 | /**
39 | * Children's are needed
40 | */
41 | children: PropTypes.node,
42 | };
43 |
--------------------------------------------------------------------------------
/packages/example-vue/components/MyButton/README.md:
--------------------------------------------------------------------------------
1 | # Button :star:
2 |
3 | Application button.
4 |
5 | ```js
6 | import Button from 'components/Button';
7 | ```
8 |
9 |
10 |
11 | #### Icons
12 |
13 | ```js
14 | import Button from 'components/button';
15 |
16 | render() {
17 | return (
18 |
19 |
20 | );
21 | }
22 | ```
23 |
24 | #### Button types
25 |
26 | Means `OutlinedButton`, `ContainedButton`, `TextButton`. It is possible to import as standalone component or pass `variant` property. Defautl value is `contained`.
27 |
28 | ```js
29 |
30 |
31 |
32 | ```
33 |
34 | Which one does @torvalds like most?
35 |
36 | - [ ] tiger \#
37 | - [ ] whale \*
38 | - [x] octocat \!
39 |
40 | > Stay hungry; stay foolish.
41 | >
42 | > > Quality is better than quantity.
43 | > >
44 | > > > Life is not fair; get used to it.
45 |
--------------------------------------------------------------------------------
/packages/storybook-readme/scripts/buildHighlightThemes.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 |
4 | const dir = path.resolve(
5 | __dirname,
6 | '..',
7 | 'node_modules',
8 | 'highlight.js',
9 | 'styles'
10 | );
11 |
12 | const template = fs
13 | .readFileSync(path.resolve(__dirname, '_themeTemplate'))
14 | .toString();
15 |
16 | fs.readdirSync(dir).forEach(name => {
17 | const themePath = path.resolve(dir, name);
18 | const content = fs.readFileSync(themePath).toString();
19 |
20 | if (path.extname(name) !== '.css') {
21 | return;
22 | }
23 |
24 | const theme = template
25 | .replace(
26 | '%css%',
27 | `
28 |
29 | ${content}
30 |
31 | `
32 | )
33 | .replace('%name%', name.replace('.css', ''));
34 |
35 | fs.writeFileSync(
36 | path.resolve(
37 | __dirname,
38 | '..',
39 | 'src',
40 | 'styles',
41 | 'highlightThemes',
42 | `${name}.js`
43 | ),
44 | theme
45 | );
46 | });
47 |
--------------------------------------------------------------------------------
/packages/example-react/stories/GlobalCodeTheme.md:
--------------------------------------------------------------------------------
1 | # Global Code Theme
2 |
3 | You can set a code theme globally by adding `codeTheme` value to `addParameters`
4 | at `config.js`.
5 |
6 | ```javascript
7 | import { addParameters, addDecorator, configure } from '@storybook/react';
8 | import { addReadme } from 'storybook-readme';
9 |
10 | addParameters({
11 | readme: {
12 | // You can set the global code theme here.
13 | codeTheme: 'duotone-sea',
14 | },
15 | });
16 |
17 | addDecorator(addReadme);
18 |
19 | function loadStories() {
20 | require('../stories');
21 | }
22 |
23 | configure(loadStories, module);
24 | ```
25 |
26 | Full lists of themes are at https://github.com/PrismJS/prism-themes.
27 | To be used with storybook-readme, naming of the code theme should be used in one of these styles. [codeTheme names](https://github.com/tuchk4/storybook-readme/tree/master/packages/storybook-readme/src/styles/prismCodeThemes)
28 |
29 | ```
30 | 'a11y Dark' -> 'a11y-dark'
31 | 'Atom Dark' -> 'atom-dark'
32 | ```
33 |
--------------------------------------------------------------------------------
/packages/example-react/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { addParameters, addDecorator, configure } from '@storybook/react';
2 | import { addReadme } from 'storybook-readme';
3 | import { themes, create } from '@storybook/theming';
4 | import ButtonWithPropTypes from '../components/Button/ButtonWithPropTypes';
5 |
6 | const basicTheme = create({
7 | base: 'light',
8 | brandTitle: 'README addon',
9 | brandUrl: 'https://github.com/tuchk4/storybook-readme',
10 | brandImage: null,
11 | });
12 |
13 | addParameters({
14 | options: {
15 | showPanel: true,
16 | panelPosition: 'right',
17 | theme: basicTheme,
18 | // theme: themes.dark,
19 | },
20 | readme: {
21 | // You can set the global code theme here.
22 | codeTheme: 'github',
23 |
24 | // You can exclude prop tables globally here.
25 | excludePropTables: [ButtonWithPropTypes],
26 | },
27 | });
28 |
29 | addDecorator(addReadme);
30 |
31 | function loadStories() {
32 | require('../stories');
33 | }
34 |
35 | configure(loadStories, module);
36 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withOldApi.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import { withDocs, withReadme, doc } from 'storybook-readme';
4 |
5 | import Button from '../components/Button';
6 |
7 | import ButtonReadme from '../components/Button/README.md';
8 | import ButtonUsage from '../components/Button/USAGE.md';
9 |
10 | storiesOf('Old Api', module).add(
11 | 'withDocs hoc',
12 | withDocs(ButtonReadme, () => )
13 | );
14 |
15 | storiesOf('Old Api', module)
16 | .addDecorator(withDocs(ButtonReadme))
17 | .add('withDocs decorator', () => );
18 |
19 | storiesOf('Old Api', module).add('doc', doc(ButtonReadme));
20 |
21 | storiesOf('Old Api', module).add(
22 | 'withReadme hoc',
23 | withReadme(ButtonReadme, () => )
24 | );
25 |
26 | storiesOf('Old Api', module)
27 | .addDecorator(withReadme(ButtonReadme))
28 | .add('withReadme decorator', () => );
29 |
--------------------------------------------------------------------------------
/packages/example-vue/stories/Button.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue';
2 |
3 | import MyButton from '../components/MyButton/MyButton.vue';
4 |
5 | import ButtonReadme from '../components/MyButton/README.md';
6 | import ButtonUsage from '../components/MyButton/USAGE.md';
7 |
8 | storiesOf('Button', module)
9 | .addParameters({
10 | readme: {
11 | content: ButtonUsage,
12 | sidebar: ``,
13 | },
14 | })
15 | .add('Button', () => {
16 | return {
17 | components: {
18 | MyButton,
19 | },
20 | template: `My Button`,
21 | };
22 | })
23 | .add('Alert Button', () => {
24 | return {
25 | components: {
26 | MyButton,
27 | },
28 | template: `My Button`,
29 | };
30 | })
31 | .add('Success Button', () => {
32 | return {
33 | components: {
34 | MyButton,
35 | },
36 | template: `My Button`,
37 | };
38 | });
39 |
--------------------------------------------------------------------------------
/packages/storybook-readme/scripts/buildPrismHighlightThemes.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 |
4 | const dir = path.resolve(
5 | __dirname,
6 | '..',
7 | '..',
8 | '..',
9 | 'node_modules',
10 | 'prism-themes',
11 | 'themes'
12 | );
13 |
14 | const template = fs
15 | .readFileSync(path.resolve(__dirname, '_themeTemplate'))
16 | .toString();
17 |
18 | fs.readdirSync(dir).forEach(name => {
19 | const themePath = path.resolve(dir, name);
20 | const content = fs.readFileSync(themePath).toString();
21 |
22 | if (path.extname(name) !== '.css') {
23 | return;
24 | }
25 |
26 | const theme = template
27 | .replace(
28 | '%css%',
29 | `
30 |
31 | ${content}
32 |
33 | `
34 | )
35 | .replace('%name%', name.replace('.css', ''));
36 |
37 | fs.writeFileSync(
38 | path.resolve(
39 | __dirname,
40 | '..',
41 | 'src',
42 | 'styles',
43 | 'prismCodeThemes',
44 | `${name.replace('prism-', '')}.js`
45 | ),
46 | theme
47 | );
48 | });
49 |
--------------------------------------------------------------------------------
/packages/example-vue/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-vue",
3 | "license": "MIT",
4 | "private": true,
5 | "version": "5.0.9",
6 | "scripts": {
7 | "prepublishOnly": "echo \"Error: not allowed to publish\" && exit 1",
8 | "test": "echo \"Error: no test specified\" && exit 1",
9 | "storybook": "cross-env NODE_ENV=development start-storybook -p 6006",
10 | "build-storybook": "build-storybook -c .storybook -o .out"
11 | },
12 | "dependencies": {
13 | "@babel/core": "7.3.4",
14 | "@storybook/addon-knobs": "5.1.1",
15 | "@storybook/addons": "5.1.1",
16 | "@storybook/vue": "5.1.1",
17 | "@vue/babel-preset-app": "^3.4.1",
18 | "babel-loader": "^8.0.2",
19 | "babel-preset-vue": "^2.0.1",
20 | "cross-env": "^5.1.3",
21 | "html-loader": "^0.5.5",
22 | "markdown-loader": "^5.0.0",
23 | "storybook-readme": "^5.0.9",
24 | "vue": "^2.5.17",
25 | "vue-hot-reload-api": "^2.3.0",
26 | "vue-loader": "^15.3.0",
27 | "vue-style-loader": "^4.1.1",
28 | "vue-template-compiler": "^2.5.17"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/styleFactory.js:
--------------------------------------------------------------------------------
1 | export default function styleFactory(
2 | name,
3 | { getStyles = () => '', pickValues = t => t, defaultTheme = {} } = {}
4 | ) {
5 | let counter = 0;
6 |
7 | let insertedKey = null;
8 | let node = null;
9 |
10 | function injectStyle(content) {
11 | try {
12 | node = document.createElement('style');
13 |
14 | node.id = `${name}-${++counter}`;
15 | node.innerHTML = content;
16 |
17 | document.head.appendChild(node);
18 | } catch (e) {
19 | // assume we're not in a browser env, just abort
20 | return;
21 | }
22 | }
23 |
24 | return function insert({ theme = {}, styles }) {
25 | const t = {
26 | ...defaultTheme,
27 | ...pickValues(theme),
28 | };
29 |
30 | const key = JSON.stringify({
31 | ...t,
32 | styles,
33 | });
34 |
35 | if (key === insertedKey) {
36 | return;
37 | }
38 |
39 | if (!node) {
40 | injectStyle(styles || getStyles(t));
41 | }
42 |
43 | insertedKey = key;
44 | };
45 | }
46 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2019 Valerii Sorokobatko.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/mono-blue.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Five-color theme from a single blue hue.
9 | */
10 | .hljs {
11 | display: block;
12 | overflow-x: auto;
13 | padding: 0.5em;
14 | background: #eaeef3;
15 | }
16 |
17 | .hljs {
18 | color: #00193a;
19 | }
20 |
21 | .hljs-keyword,
22 | .hljs-selector-tag,
23 | .hljs-title,
24 | .hljs-section,
25 | .hljs-doctag,
26 | .hljs-name,
27 | .hljs-strong {
28 | font-weight: bold;
29 | }
30 |
31 | .hljs-comment {
32 | color: #738191;
33 | }
34 |
35 | .hljs-string,
36 | .hljs-title,
37 | .hljs-section,
38 | .hljs-built_in,
39 | .hljs-literal,
40 | .hljs-type,
41 | .hljs-addition,
42 | .hljs-tag,
43 | .hljs-quote,
44 | .hljs-name,
45 | .hljs-selector-id,
46 | .hljs-selector-class {
47 | color: #0048ab;
48 | }
49 |
50 | .hljs-meta,
51 | .hljs-subst,
52 | .hljs-symbol,
53 | .hljs-regexp,
54 | .hljs-attribute,
55 | .hljs-deletion,
56 | .hljs-variable,
57 | .hljs-template-variable,
58 | .hljs-link,
59 | .hljs-bullet {
60 | color: #4c81c9;
61 | }
62 |
63 | .hljs-emphasis {
64 | font-style: italic;
65 | }
66 |
67 |
68 |
69 |
70 | `;
71 |
--------------------------------------------------------------------------------
/packages/storybook-readme/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2019 Valerii Sorokobatko.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/packages/example-react/components/Button/README.md:
--------------------------------------------------------------------------------
1 | # Button :star:
2 |
3 | Application button.
4 |
5 | ```js
6 | import Button from 'components/Button';
7 | ```
8 |
9 |
10 |
11 |
12 |
13 | #### Story Source
14 |
15 |
16 |
17 |
18 |
19 | The content here won't be shown in stories.
20 |
21 |
22 |
23 | #### Icons
24 |
25 | ```js
26 | import Button from 'components/button';
27 |
28 | render() {
29 | return (
30 |
31 |
32 | );
33 | }
34 | ```
35 |
36 | #### Button types
37 |
38 | Means `OutlinedButton`, `ContainedButton`, `TextButton`. It is possible to import as standalone component or pass `variant` property. Defautl value is `contained`.
39 |
40 | ```js
41 |
42 |
43 |
44 | ```
45 |
46 | Which one does @torvalds like most?
47 |
48 | - [ ] tiger \#
49 | - [ ] whale \*
50 | - [x] octocat \!
51 |
52 | > Stay hungry; stay foolish.
53 | >
54 | > > Quality is better than quantity.
55 | > >
56 | > > > Life is not fair; get used to it.
57 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Dark style from softwaremaniacs.org (c) Ivan Sagalaev
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #444;
18 | }
19 |
20 | .hljs-keyword,
21 | .hljs-selector-tag,
22 | .hljs-literal,
23 | .hljs-section,
24 | .hljs-link {
25 | color: white;
26 | }
27 |
28 | .hljs,
29 | .hljs-subst {
30 | color: #ddd;
31 | }
32 |
33 | .hljs-string,
34 | .hljs-title,
35 | .hljs-name,
36 | .hljs-type,
37 | .hljs-attribute,
38 | .hljs-symbol,
39 | .hljs-bullet,
40 | .hljs-built_in,
41 | .hljs-addition,
42 | .hljs-variable,
43 | .hljs-template-tag,
44 | .hljs-template-variable {
45 | color: #d88;
46 | }
47 |
48 | .hljs-comment,
49 | .hljs-quote,
50 | .hljs-deletion,
51 | .hljs-meta {
52 | color: #777;
53 | }
54 |
55 | .hljs-keyword,
56 | .hljs-selector-tag,
57 | .hljs-literal,
58 | .hljs-title,
59 | .hljs-section,
60 | .hljs-doctag,
61 | .hljs-type,
62 | .hljs-name,
63 | .hljs-strong {
64 | font-weight: bold;
65 | }
66 |
67 | .hljs-emphasis {
68 | font-style: italic;
69 | }
70 |
71 |
72 |
73 |
74 | `;
75 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/androidstudio.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Date: 24 Fev 2015
9 | Author: Pedro Oliveira
10 | */
11 |
12 | .hljs {
13 | color: #a9b7c6;
14 | background: #282b2e;
15 | display: block;
16 | overflow-x: auto;
17 | padding: 0.5em;
18 | }
19 |
20 | .hljs-number,
21 | .hljs-literal,
22 | .hljs-symbol,
23 | .hljs-bullet {
24 | color: #6897BB;
25 | }
26 |
27 | .hljs-keyword,
28 | .hljs-selector-tag,
29 | .hljs-deletion {
30 | color: #cc7832;
31 | }
32 |
33 | .hljs-variable,
34 | .hljs-template-variable,
35 | .hljs-link {
36 | color: #629755;
37 | }
38 |
39 | .hljs-comment,
40 | .hljs-quote {
41 | color: #808080;
42 | }
43 |
44 | .hljs-meta {
45 | color: #bbb529;
46 | }
47 |
48 | .hljs-string,
49 | .hljs-attribute,
50 | .hljs-addition {
51 | color: #6A8759;
52 | }
53 |
54 | .hljs-section,
55 | .hljs-title,
56 | .hljs-type {
57 | color: #ffc66d;
58 | }
59 |
60 | .hljs-name,
61 | .hljs-selector-id,
62 | .hljs-selector-class {
63 | color: #e8bf6a;
64 | }
65 |
66 | .hljs-emphasis {
67 | font-style: italic;
68 | }
69 |
70 | .hljs-strong {
71 | font-weight: bold;
72 | }
73 |
74 |
75 |
76 |
77 | `;
78 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/services/getPropsTables/excludePropTable.js:
--------------------------------------------------------------------------------
1 | // Exclude propTables according to the user inputs(excludePropTables,
2 | // includePropTables) It prioritizes includePropTables over excludePropTables.
3 | // User can exclude propTables globally for convenience and it is possible to
4 | // include it from a specific story by prioritizing include rule.
5 | export const excludePropTable = (
6 | innerChildren,
7 | excludePropTables,
8 | includePropTables
9 | ) => {
10 | const isComponentInExcludePropTables = excludePropTables.some(
11 | component => component === innerChildren.type
12 | );
13 | const isComponentInIncludePropTables = includePropTables.some(
14 | component => component === innerChildren.type
15 | );
16 |
17 | // If nothings are in includePropTables, then excludePropTables decides
18 | // whether this component should be excluded or not.
19 | if (includePropTables.length === 0 && isComponentInExcludePropTables) {
20 | return true;
21 | }
22 |
23 | // If somethings are in includePropTables, then it only includes components
24 | // that are in incluePropTables and ignores excludePropTables at all.
25 | if (includePropTables.length > 0 && !isComponentInIncludePropTables) {
26 | return true;
27 | }
28 |
29 | return false;
30 | };
31 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/codepen-embed.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | codepen.io Embed Theme
9 | Author: Justin Perry
10 | Original theme - https://github.com/chriskempson/tomorrow-theme
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #222;
18 | color: #fff;
19 | }
20 |
21 | .hljs-comment,
22 | .hljs-quote {
23 | color: #777;
24 | }
25 |
26 | .hljs-variable,
27 | .hljs-template-variable,
28 | .hljs-tag,
29 | .hljs-regexp,
30 | .hljs-meta,
31 | .hljs-number,
32 | .hljs-built_in,
33 | .hljs-builtin-name,
34 | .hljs-literal,
35 | .hljs-params,
36 | .hljs-symbol,
37 | .hljs-bullet,
38 | .hljs-link,
39 | .hljs-deletion {
40 | color: #ab875d;
41 | }
42 |
43 | .hljs-section,
44 | .hljs-title,
45 | .hljs-name,
46 | .hljs-selector-id,
47 | .hljs-selector-class,
48 | .hljs-type,
49 | .hljs-attribute {
50 | color: #9b869b;
51 | }
52 |
53 | .hljs-string,
54 | .hljs-keyword,
55 | .hljs-selector-tag,
56 | .hljs-addition {
57 | color: #8f9c6c;
58 | }
59 |
60 | .hljs-emphasis {
61 | font-style: italic;
62 | }
63 |
64 | .hljs-strong {
65 | font-weight: bold;
66 | }
67 |
68 |
69 |
70 |
71 | `;
72 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/vs.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Visual Studio-like style based on original C# coloring by Jason Diamond
10 |
11 | */
12 | .hljs {
13 | display: block;
14 | overflow-x: auto;
15 | padding: 0.5em;
16 | background: white;
17 | color: black;
18 | }
19 |
20 | .hljs-comment,
21 | .hljs-quote,
22 | .hljs-variable {
23 | color: #008000;
24 | }
25 |
26 | .hljs-keyword,
27 | .hljs-selector-tag,
28 | .hljs-built_in,
29 | .hljs-name,
30 | .hljs-tag {
31 | color: #00f;
32 | }
33 |
34 | .hljs-string,
35 | .hljs-title,
36 | .hljs-section,
37 | .hljs-attribute,
38 | .hljs-literal,
39 | .hljs-template-tag,
40 | .hljs-template-variable,
41 | .hljs-type,
42 | .hljs-addition {
43 | color: #a31515;
44 | }
45 |
46 | .hljs-deletion,
47 | .hljs-selector-attr,
48 | .hljs-selector-pseudo,
49 | .hljs-meta {
50 | color: #2b91af;
51 | }
52 |
53 | .hljs-doctag {
54 | color: #808080;
55 | }
56 |
57 | .hljs-attr {
58 | color: #f00;
59 | }
60 |
61 | .hljs-symbol,
62 | .hljs-bullet,
63 | .hljs-link {
64 | color: #00b0e8;
65 | }
66 |
67 |
68 | .hljs-emphasis {
69 | font-style: italic;
70 | }
71 |
72 | .hljs-strong {
73 | font-weight: bold;
74 | }
75 |
76 |
77 |
78 |
79 | `;
80 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/far.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | FAR Style (c) MajestiC
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #000080;
18 | }
19 |
20 | .hljs,
21 | .hljs-subst {
22 | color: #0ff;
23 | }
24 |
25 | .hljs-string,
26 | .hljs-attribute,
27 | .hljs-symbol,
28 | .hljs-bullet,
29 | .hljs-built_in,
30 | .hljs-builtin-name,
31 | .hljs-template-tag,
32 | .hljs-template-variable,
33 | .hljs-addition {
34 | color: #ff0;
35 | }
36 |
37 | .hljs-keyword,
38 | .hljs-selector-tag,
39 | .hljs-section,
40 | .hljs-type,
41 | .hljs-name,
42 | .hljs-selector-id,
43 | .hljs-selector-class,
44 | .hljs-variable {
45 | color: #fff;
46 | }
47 |
48 | .hljs-comment,
49 | .hljs-quote,
50 | .hljs-doctag,
51 | .hljs-deletion {
52 | color: #888;
53 | }
54 |
55 | .hljs-number,
56 | .hljs-regexp,
57 | .hljs-literal,
58 | .hljs-link {
59 | color: #0f0;
60 | }
61 |
62 | .hljs-meta {
63 | color: #008080;
64 | }
65 |
66 | .hljs-keyword,
67 | .hljs-selector-tag,
68 | .hljs-title,
69 | .hljs-section,
70 | .hljs-name,
71 | .hljs-strong {
72 | font-weight: bold;
73 | }
74 |
75 | .hljs-emphasis {
76 | font-style: italic;
77 | }
78 |
79 |
80 |
81 |
82 | `;
83 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/arta.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Date: 17.V.2011
9 | Author: pumbur
10 | */
11 |
12 | .hljs {
13 | display: block;
14 | overflow-x: auto;
15 | padding: 0.5em;
16 | background: #222;
17 | }
18 |
19 | .hljs,
20 | .hljs-subst {
21 | color: #aaa;
22 | }
23 |
24 | .hljs-section {
25 | color: #fff;
26 | }
27 |
28 | .hljs-comment,
29 | .hljs-quote,
30 | .hljs-meta {
31 | color: #444;
32 | }
33 |
34 | .hljs-string,
35 | .hljs-symbol,
36 | .hljs-bullet,
37 | .hljs-regexp {
38 | color: #ffcc33;
39 | }
40 |
41 | .hljs-number,
42 | .hljs-addition {
43 | color: #00cc66;
44 | }
45 |
46 | .hljs-built_in,
47 | .hljs-builtin-name,
48 | .hljs-literal,
49 | .hljs-type,
50 | .hljs-template-variable,
51 | .hljs-attribute,
52 | .hljs-link {
53 | color: #32aaee;
54 | }
55 |
56 | .hljs-keyword,
57 | .hljs-selector-tag,
58 | .hljs-name,
59 | .hljs-selector-id,
60 | .hljs-selector-class {
61 | color: #6644aa;
62 | }
63 |
64 | .hljs-title,
65 | .hljs-variable,
66 | .hljs-deletion,
67 | .hljs-template-tag {
68 | color: #bb1166;
69 | }
70 |
71 | .hljs-section,
72 | .hljs-doctag,
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 | .hljs-emphasis {
78 | font-style: italic;
79 | }
80 |
81 |
82 |
83 |
84 | `;
85 |
--------------------------------------------------------------------------------
/packages/example-vue/stories/index.js:
--------------------------------------------------------------------------------
1 | import { configureReadme, addFooter, addHeader } from 'storybook-readme';
2 |
3 | configureReadme({
4 | // codeTheme: 'far',
5 | header: `
6 |
7 | ### \`storybook-readme\` addon example
8 | 
9 |
10 | ---
11 |
12 | `,
13 | footer: `
14 |
15 | ---
16 |
17 | - Sources of this storybook (with React components) [tuchk4/storybook-readme/packages/example-react](https://github.com/tuchk4/storybook-readme/tree/master/packages/example-react)
18 | - Sources of the same Vue storybook [tuchk4/storybook-readme/packages/example-vue](https://github.com/tuchk4/storybook-readme/tree/master/packages/example-vue)
19 | - Issues and suggestions [storybook-readme/issues](https://github.com/tuchk4/storybook-readme/issues). You are welcome to suggest to awesome feature or report an annoying bug.
20 | - 
[tuchk4](https://twitter.com/tuchk)
21 |
22 |
23 | `,
24 | });
25 |
26 | import './Button';
27 | import './withCustomPreview';
28 | import './withSidebarDocs';
29 | import './withContentDocs';
30 | import './withEmoji';
31 | import './withCustomTheme';
32 | import './withCustomCodeTheme';
33 | import './withOldApi';
34 | import './withVueDocs';
35 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/ir-black.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | IR_Black style (c) Vasily Mikhailitchenko
9 | */
10 |
11 | .hljs {
12 | display: block;
13 | overflow-x: auto;
14 | padding: 0.5em;
15 | background: #000;
16 | color: #f8f8f8;
17 | }
18 |
19 | .hljs-comment,
20 | .hljs-quote,
21 | .hljs-meta {
22 | color: #7c7c7c;
23 | }
24 |
25 | .hljs-keyword,
26 | .hljs-selector-tag,
27 | .hljs-tag,
28 | .hljs-name {
29 | color: #96cbfe;
30 | }
31 |
32 | .hljs-attribute,
33 | .hljs-selector-id {
34 | color: #ffffb6;
35 | }
36 |
37 | .hljs-string,
38 | .hljs-selector-attr,
39 | .hljs-selector-pseudo,
40 | .hljs-addition {
41 | color: #a8ff60;
42 | }
43 |
44 | .hljs-subst {
45 | color: #daefa3;
46 | }
47 |
48 | .hljs-regexp,
49 | .hljs-link {
50 | color: #e9c062;
51 | }
52 |
53 | .hljs-title,
54 | .hljs-section,
55 | .hljs-type,
56 | .hljs-doctag {
57 | color: #ffffb6;
58 | }
59 |
60 | .hljs-symbol,
61 | .hljs-bullet,
62 | .hljs-variable,
63 | .hljs-template-variable,
64 | .hljs-literal {
65 | color: #c6c5fe;
66 | }
67 |
68 | .hljs-number,
69 | .hljs-deletion {
70 | color:#ff73fd;
71 | }
72 |
73 | .hljs-emphasis {
74 | font-style: italic;
75 | }
76 |
77 | .hljs-strong {
78 | font-weight: bold;
79 | }
80 |
81 |
82 |
83 |
84 | `;
85 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/color-brewer.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Colorbrewer theme
10 | Original: https://github.com/mbostock/colorbrewer-theme (c) Mike Bostock
11 | Ported by Fabrício Tavares de Oliveira
12 |
13 | */
14 |
15 | .hljs {
16 | display: block;
17 | overflow-x: auto;
18 | padding: 0.5em;
19 | background: #fff;
20 | }
21 |
22 | .hljs,
23 | .hljs-subst {
24 | color: #000;
25 | }
26 |
27 | .hljs-string,
28 | .hljs-meta,
29 | .hljs-symbol,
30 | .hljs-template-tag,
31 | .hljs-template-variable,
32 | .hljs-addition {
33 | color: #756bb1;
34 | }
35 |
36 | .hljs-comment,
37 | .hljs-quote {
38 | color: #636363;
39 | }
40 |
41 | .hljs-number,
42 | .hljs-regexp,
43 | .hljs-literal,
44 | .hljs-bullet,
45 | .hljs-link {
46 | color: #31a354;
47 | }
48 |
49 | .hljs-deletion,
50 | .hljs-variable {
51 | color: #88f;
52 | }
53 |
54 |
55 |
56 | .hljs-keyword,
57 | .hljs-selector-tag,
58 | .hljs-title,
59 | .hljs-section,
60 | .hljs-built_in,
61 | .hljs-doctag,
62 | .hljs-type,
63 | .hljs-tag,
64 | .hljs-name,
65 | .hljs-selector-id,
66 | .hljs-selector-class,
67 | .hljs-strong {
68 | color: #3182bd;
69 | }
70 |
71 | .hljs-emphasis {
72 | font-style: italic;
73 | }
74 |
75 | .hljs-attribute {
76 | color: #e6550d;
77 | }
78 |
79 |
80 |
81 |
82 | `;
83 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/magula.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Description: Magula style for highligh.js
9 | Author: Ruslan Keba
10 | Website: http://rukeba.com/
11 | Version: 1.0
12 | Date: 2009-01-03
13 | Music: Aphex Twin / Xtal
14 | */
15 |
16 | .hljs {
17 | display: block;
18 | overflow-x: auto;
19 | padding: 0.5em;
20 | background-color: #f4f4f4;
21 | }
22 |
23 | .hljs,
24 | .hljs-subst {
25 | color: black;
26 | }
27 |
28 | .hljs-string,
29 | .hljs-title,
30 | .hljs-symbol,
31 | .hljs-bullet,
32 | .hljs-attribute,
33 | .hljs-addition,
34 | .hljs-variable,
35 | .hljs-template-tag,
36 | .hljs-template-variable {
37 | color: #050;
38 | }
39 |
40 | .hljs-comment,
41 | .hljs-quote {
42 | color: #777;
43 | }
44 |
45 | .hljs-number,
46 | .hljs-regexp,
47 | .hljs-literal,
48 | .hljs-type,
49 | .hljs-link {
50 | color: #800;
51 | }
52 |
53 | .hljs-deletion,
54 | .hljs-meta {
55 | color: #00e;
56 | }
57 |
58 | .hljs-keyword,
59 | .hljs-selector-tag,
60 | .hljs-doctag,
61 | .hljs-title,
62 | .hljs-section,
63 | .hljs-built_in,
64 | .hljs-tag,
65 | .hljs-name {
66 | font-weight: bold;
67 | color: navy;
68 | }
69 |
70 | .hljs-emphasis {
71 | font-style: italic;
72 | }
73 |
74 | .hljs-strong {
75 | font-weight: bold;
76 | }
77 |
78 |
79 |
80 |
81 | `;
82 |
--------------------------------------------------------------------------------
/packages/example-react/stories/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { configureReadme, addFooter, addHeader } from 'storybook-readme';
3 |
4 | configureReadme({
5 | // codeTheme: 'far',
6 | header: `
7 |
8 | ### \`storybook-readme\` addon example
9 |
10 |
11 | ---
12 |
13 | `,
14 | footer: `
15 |
16 | ---
17 |
18 | - Sources of this storybook (with React components) [tuchk4/storybook-readme/packages/example-react](https://github.com/tuchk4/storybook-readme/tree/master/packages/example-react)
19 | - Sources of the same Vue storybook [tuchk4/storybook-readme/packages/example-vue](https://github.com/tuchk4/storybook-readme/tree/master/packages/example-vue)
20 | - Issues and suggestions [storybook-readme/issues](https://github.com/tuchk4/storybook-readme/issues). You are welcome to suggest to awesome feature or report an annoying bug.
21 | - [tuchk4](https://twitter.com/tuchk)
22 |
23 |
24 | `,
25 | });
26 |
27 | import './Button';
28 | import './withCustomPreview';
29 | import './withSidebarDocs';
30 | import './withContentDocs';
31 | import './withEmoji';
32 | import './withPropsTable';
33 | import './withCustomTheme';
34 | import './withCustomCodeTheme';
35 | import './withOldApi';
36 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/github-gist.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /**
8 | * GitHub Gist Theme
9 | * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
10 | */
11 |
12 | .hljs {
13 | display: block;
14 | background: white;
15 | padding: 0.5em;
16 | color: #333333;
17 | overflow-x: auto;
18 | }
19 |
20 | .hljs-comment,
21 | .hljs-meta {
22 | color: #969896;
23 | }
24 |
25 | .hljs-string,
26 | .hljs-variable,
27 | .hljs-template-variable,
28 | .hljs-strong,
29 | .hljs-emphasis,
30 | .hljs-quote {
31 | color: #df5000;
32 | }
33 |
34 | .hljs-keyword,
35 | .hljs-selector-tag,
36 | .hljs-type {
37 | color: #a71d5d;
38 | }
39 |
40 | .hljs-literal,
41 | .hljs-symbol,
42 | .hljs-bullet,
43 | .hljs-attribute {
44 | color: #0086b3;
45 | }
46 |
47 | .hljs-section,
48 | .hljs-name {
49 | color: #63a35c;
50 | }
51 |
52 | .hljs-tag {
53 | color: #333333;
54 | }
55 |
56 | .hljs-title,
57 | .hljs-attr,
58 | .hljs-selector-id,
59 | .hljs-selector-class,
60 | .hljs-selector-attr,
61 | .hljs-selector-pseudo {
62 | color: #795da3;
63 | }
64 |
65 | .hljs-addition {
66 | color: #55a532;
67 | background-color: #eaffea;
68 | }
69 |
70 | .hljs-deletion {
71 | color: #bd2c00;
72 | background-color: #ffecec;
73 | }
74 |
75 | .hljs-link {
76 | text-decoration: underline;
77 | }
78 |
79 |
80 |
81 |
82 | `;
83 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/monokai.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Monokai style - ported by Luigi Maselli - http://grigio.org
9 | */
10 |
11 | .hljs {
12 | display: block;
13 | overflow-x: auto;
14 | padding: 0.5em;
15 | background: #272822; color: #ddd;
16 | }
17 |
18 | .hljs-tag,
19 | .hljs-keyword,
20 | .hljs-selector-tag,
21 | .hljs-literal,
22 | .hljs-strong,
23 | .hljs-name {
24 | color: #f92672;
25 | }
26 |
27 | .hljs-code {
28 | color: #66d9ef;
29 | }
30 |
31 | .hljs-class .hljs-title {
32 | color: white;
33 | }
34 |
35 | .hljs-attribute,
36 | .hljs-symbol,
37 | .hljs-regexp,
38 | .hljs-link {
39 | color: #bf79db;
40 | }
41 |
42 | .hljs-string,
43 | .hljs-bullet,
44 | .hljs-subst,
45 | .hljs-title,
46 | .hljs-section,
47 | .hljs-emphasis,
48 | .hljs-type,
49 | .hljs-built_in,
50 | .hljs-builtin-name,
51 | .hljs-selector-attr,
52 | .hljs-selector-pseudo,
53 | .hljs-addition,
54 | .hljs-variable,
55 | .hljs-template-tag,
56 | .hljs-template-variable {
57 | color: #a6e22e;
58 | }
59 |
60 | .hljs-comment,
61 | .hljs-quote,
62 | .hljs-deletion,
63 | .hljs-meta {
64 | color: #75715e;
65 | }
66 |
67 | .hljs-keyword,
68 | .hljs-selector-tag,
69 | .hljs-literal,
70 | .hljs-doctag,
71 | .hljs-title,
72 | .hljs-section,
73 | .hljs-type,
74 | .hljs-selector-id {
75 | font-weight: bold;
76 | }
77 |
78 |
79 |
80 |
81 | `;
82 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/darcula.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Darcula color scheme from the JetBrains family of IDEs
10 |
11 | */
12 |
13 |
14 | .hljs {
15 | display: block;
16 | overflow-x: auto;
17 | padding: 0.5em;
18 | background: #2b2b2b;
19 | }
20 |
21 | .hljs {
22 | color: #bababa;
23 | }
24 |
25 | .hljs-strong,
26 | .hljs-emphasis {
27 | color: #a8a8a2;
28 | }
29 |
30 | .hljs-bullet,
31 | .hljs-quote,
32 | .hljs-link,
33 | .hljs-number,
34 | .hljs-regexp,
35 | .hljs-literal {
36 | color: #6896ba;
37 | }
38 |
39 | .hljs-code,
40 | .hljs-selector-class {
41 | color: #a6e22e;
42 | }
43 |
44 | .hljs-emphasis {
45 | font-style: italic;
46 | }
47 |
48 | .hljs-keyword,
49 | .hljs-selector-tag,
50 | .hljs-section,
51 | .hljs-attribute,
52 | .hljs-name,
53 | .hljs-variable {
54 | color: #cb7832;
55 | }
56 |
57 | .hljs-params {
58 | color: #b9b9b9;
59 | }
60 |
61 | .hljs-string {
62 | color: #6a8759;
63 | }
64 |
65 | .hljs-subst,
66 | .hljs-type,
67 | .hljs-built_in,
68 | .hljs-builtin-name,
69 | .hljs-symbol,
70 | .hljs-selector-id,
71 | .hljs-selector-attr,
72 | .hljs-selector-pseudo,
73 | .hljs-template-tag,
74 | .hljs-template-variable,
75 | .hljs-addition {
76 | color: #e0c46c;
77 | }
78 |
79 | .hljs-comment,
80 | .hljs-deletion,
81 | .hljs-meta {
82 | color: #7f7f7f;
83 | }
84 |
85 |
86 |
87 |
88 | `;
89 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/gml.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | GML Theme - Meseta
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #222222;
18 | color: #C0C0C0;
19 | }
20 |
21 | .hljs-keywords {
22 | color: #FFB871;
23 | font-weight: bold;
24 | }
25 |
26 | .hljs-built_in {
27 | color: #FFB871;
28 | }
29 |
30 | .hljs-literal {
31 | color: #FF8080;
32 | }
33 |
34 | .hljs-symbol {
35 | color: #58E55A;
36 | }
37 |
38 | .hljs-comment {
39 | color: #5B995B;
40 | }
41 |
42 | .hljs-string {
43 | color: #FFFF00;
44 | }
45 |
46 | .hljs-number {
47 | color: #FF8080;
48 | }
49 |
50 | .hljs-attribute,
51 | .hljs-selector-tag,
52 | .hljs-doctag,
53 | .hljs-name,
54 | .hljs-bullet,
55 | .hljs-code,
56 | .hljs-addition,
57 | .hljs-regexp,
58 | .hljs-variable,
59 | .hljs-template-variable,
60 | .hljs-link,
61 | .hljs-selector-attr,
62 | .hljs-selector-pseudo,
63 | .hljs-type,
64 | .hljs-selector-id,
65 | .hljs-selector-class,
66 | .hljs-quote,
67 | .hljs-template-tag,
68 | .hljs-deletion,
69 | .hljs-title,
70 | .hljs-section,
71 | .hljs-function,
72 | .hljs-meta-keyword,
73 | .hljs-meta,
74 | .hljs-subst {
75 | color: #C0C0C0;
76 | }
77 |
78 | .hljs-emphasis {
79 | font-style: italic;
80 | }
81 |
82 | .hljs-strong {
83 | font-weight: bold;
84 | }
85 |
86 |
87 |
88 |
89 | `;
90 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/backwardCompatibility/env/common/index.js:
--------------------------------------------------------------------------------
1 | import addons from '@storybook/addons';
2 | import { CHANNEL_SET_SIDEBAR_DOCS } from '../../../const';
3 | import getDocsLayout from '../../../services/getDocsLayout';
4 | import getParameters from '../../../services/getParameters';
5 |
6 | function withReadmeCallAsDecorator({ md }) {
7 | return (story, context) => {
8 | const storyComponent = story(context);
9 |
10 | const layout = getDocsLayout({
11 | md,
12 | story: storyComponent,
13 | });
14 |
15 | const parameters = getParameters(context);
16 | addons.getChannel().emit(CHANNEL_SET_SIDEBAR_DOCS, {
17 | layout,
18 | theme: parameters.theme,
19 | codeTheme: parameters.codeTheme,
20 | });
21 |
22 | return storyComponent;
23 | };
24 | }
25 |
26 | function withReadmeCallAsHoc({ md, story }) {
27 | return context => {
28 | const storyComponent = story(context);
29 |
30 | const layout = getDocsLayout({
31 | md,
32 | story: storyComponent,
33 | });
34 |
35 | const parameters = getParameters(context);
36 | addons.getChannel().emit(CHANNEL_SET_SIDEBAR_DOCS, {
37 | layout,
38 | theme: parameters.theme,
39 | codeTheme: parameters.codeTheme,
40 | });
41 |
42 | return storyComponent;
43 | };
44 | }
45 |
46 | export default {
47 | withReadme: {
48 | callAsDecorator: withReadmeCallAsDecorator,
49 | callAsHoc: withReadmeCallAsHoc,
50 | },
51 | };
52 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/tomorrow.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
8 |
9 | /* Tomorrow Comment */
10 | .hljs-comment,
11 | .hljs-quote {
12 | color: #8e908c;
13 | }
14 |
15 | /* Tomorrow Red */
16 | .hljs-variable,
17 | .hljs-template-variable,
18 | .hljs-tag,
19 | .hljs-name,
20 | .hljs-selector-id,
21 | .hljs-selector-class,
22 | .hljs-regexp,
23 | .hljs-deletion {
24 | color: #c82829;
25 | }
26 |
27 | /* Tomorrow Orange */
28 | .hljs-number,
29 | .hljs-built_in,
30 | .hljs-builtin-name,
31 | .hljs-literal,
32 | .hljs-type,
33 | .hljs-params,
34 | .hljs-meta,
35 | .hljs-link {
36 | color: #f5871f;
37 | }
38 |
39 | /* Tomorrow Yellow */
40 | .hljs-attribute {
41 | color: #eab700;
42 | }
43 |
44 | /* Tomorrow Green */
45 | .hljs-string,
46 | .hljs-symbol,
47 | .hljs-bullet,
48 | .hljs-addition {
49 | color: #718c00;
50 | }
51 |
52 | /* Tomorrow Blue */
53 | .hljs-title,
54 | .hljs-section {
55 | color: #4271ae;
56 | }
57 |
58 | /* Tomorrow Purple */
59 | .hljs-keyword,
60 | .hljs-selector-tag {
61 | color: #8959a8;
62 | }
63 |
64 | .hljs {
65 | display: block;
66 | overflow-x: auto;
67 | background: white;
68 | color: #4d4d4c;
69 | padding: 0.5em;
70 | }
71 |
72 | .hljs-emphasis {
73 | font-style: italic;
74 | }
75 |
76 | .hljs-strong {
77 | font-weight: bold;
78 | }
79 |
80 |
81 |
82 |
83 | `;
84 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/zenburn.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Zenburn style from voldmar.ru (c) Vladimir Epifanov
10 | based on dark.css by Ivan Sagalaev
11 |
12 | */
13 |
14 | .hljs {
15 | display: block;
16 | overflow-x: auto;
17 | padding: 0.5em;
18 | background: #3f3f3f;
19 | color: #dcdcdc;
20 | }
21 |
22 | .hljs-keyword,
23 | .hljs-selector-tag,
24 | .hljs-tag {
25 | color: #e3ceab;
26 | }
27 |
28 | .hljs-template-tag {
29 | color: #dcdcdc;
30 | }
31 |
32 | .hljs-number {
33 | color: #8cd0d3;
34 | }
35 |
36 | .hljs-variable,
37 | .hljs-template-variable,
38 | .hljs-attribute {
39 | color: #efdcbc;
40 | }
41 |
42 | .hljs-literal {
43 | color: #efefaf;
44 | }
45 |
46 | .hljs-subst {
47 | color: #8f8f8f;
48 | }
49 |
50 | .hljs-title,
51 | .hljs-name,
52 | .hljs-selector-id,
53 | .hljs-selector-class,
54 | .hljs-section,
55 | .hljs-type {
56 | color: #efef8f;
57 | }
58 |
59 | .hljs-symbol,
60 | .hljs-bullet,
61 | .hljs-link {
62 | color: #dca3a3;
63 | }
64 |
65 | .hljs-deletion,
66 | .hljs-string,
67 | .hljs-built_in,
68 | .hljs-builtin-name {
69 | color: #cc9393;
70 | }
71 |
72 | .hljs-addition,
73 | .hljs-comment,
74 | .hljs-quote,
75 | .hljs-meta {
76 | color: #7f9f7f;
77 | }
78 |
79 |
80 | .hljs-emphasis {
81 | font-style: italic;
82 | }
83 |
84 | .hljs-strong {
85 | font-weight: bold;
86 | }
87 |
88 |
89 |
90 |
91 | `;
92 |
--------------------------------------------------------------------------------
/packages/example-vue/stories/withOldApi.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue';
2 | import { withDocs, withReadme, doc } from 'storybook-readme';
3 |
4 | import MyButton from '../components/MyButton/MyButton.vue';
5 |
6 | import ButtonReadme from '../components/MyButton/README.md';
7 | import ButtonUsage from '../components/MyButton/USAGE.md';
8 |
9 | storiesOf('Old Api', module).add(
10 | 'withDocs hoc',
11 | withDocs(ButtonReadme, () => {
12 | return {
13 | components: {
14 | MyButton,
15 | },
16 | template: `My Button`,
17 | };
18 | })
19 | );
20 |
21 | storiesOf('Old Api', module)
22 | .addDecorator(withDocs(ButtonReadme))
23 | .add('withDocs decorator', () => {
24 | return {
25 | components: {
26 | MyButton,
27 | },
28 | template: `My Button`,
29 | };
30 | });
31 |
32 | storiesOf('Old Api', module).add('doc', doc(ButtonReadme));
33 |
34 | storiesOf('Old Api', module).add(
35 | 'withReadme hoc',
36 | withReadme(ButtonReadme, () => {
37 | return {
38 | components: {
39 | MyButton,
40 | },
41 | template: `My Button`,
42 | };
43 | })
44 | );
45 |
46 | storiesOf('Old Api', module)
47 | .addDecorator(withReadme(ButtonReadme))
48 | .add('withReadme decorator', () => {
49 | return {
50 | components: {
51 | MyButton,
52 | },
53 | template: `My Button`,
54 | };
55 | });
56 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/ocean.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Ocean Dark Theme */
8 | /* https://github.com/gavsiu */
9 | /* Original theme - https://github.com/chriskempson/base16 */
10 |
11 | /* Ocean Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #65737e;
15 | }
16 |
17 | /* Ocean Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-tag,
21 | .hljs-name,
22 | .hljs-selector-id,
23 | .hljs-selector-class,
24 | .hljs-regexp,
25 | .hljs-deletion {
26 | color: #bf616a;
27 | }
28 |
29 | /* Ocean Orange */
30 | .hljs-number,
31 | .hljs-built_in,
32 | .hljs-builtin-name,
33 | .hljs-literal,
34 | .hljs-type,
35 | .hljs-params,
36 | .hljs-meta,
37 | .hljs-link {
38 | color: #d08770;
39 | }
40 |
41 | /* Ocean Yellow */
42 | .hljs-attribute {
43 | color: #ebcb8b;
44 | }
45 |
46 | /* Ocean Green */
47 | .hljs-string,
48 | .hljs-symbol,
49 | .hljs-bullet,
50 | .hljs-addition {
51 | color: #a3be8c;
52 | }
53 |
54 | /* Ocean Blue */
55 | .hljs-title,
56 | .hljs-section {
57 | color: #8fa1b3;
58 | }
59 |
60 | /* Ocean Purple */
61 | .hljs-keyword,
62 | .hljs-selector-tag {
63 | color: #b48ead;
64 | }
65 |
66 | .hljs {
67 | display: block;
68 | overflow-x: auto;
69 | background: #2b303b;
70 | color: #c0c5ce;
71 | padding: 0.5em;
72 | }
73 |
74 | .hljs-emphasis {
75 | font-style: italic;
76 | }
77 |
78 | .hljs-strong {
79 | font-weight: bold;
80 | }
81 |
82 |
83 |
84 |
85 | `;
86 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/paraiso-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Paraíso (dark)
9 | Created by Jan T. Sott (http://github.com/idleberg)
10 | Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
11 | */
12 |
13 | /* Paraíso Comment */
14 | .hljs-comment,
15 | .hljs-quote {
16 | color: #8d8687;
17 | }
18 |
19 | /* Paraíso Red */
20 | .hljs-variable,
21 | .hljs-template-variable,
22 | .hljs-tag,
23 | .hljs-name,
24 | .hljs-selector-id,
25 | .hljs-selector-class,
26 | .hljs-regexp,
27 | .hljs-link,
28 | .hljs-meta {
29 | color: #ef6155;
30 | }
31 |
32 | /* Paraíso Orange */
33 | .hljs-number,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params,
39 | .hljs-deletion {
40 | color: #f99b15;
41 | }
42 |
43 | /* Paraíso Yellow */
44 | .hljs-title,
45 | .hljs-section,
46 | .hljs-attribute {
47 | color: #fec418;
48 | }
49 |
50 | /* Paraíso Green */
51 | .hljs-string,
52 | .hljs-symbol,
53 | .hljs-bullet,
54 | .hljs-addition {
55 | color: #48b685;
56 | }
57 |
58 | /* Paraíso Purple */
59 | .hljs-keyword,
60 | .hljs-selector-tag {
61 | color: #815ba4;
62 | }
63 |
64 | .hljs {
65 | display: block;
66 | overflow-x: auto;
67 | background: #2f1e2e;
68 | color: #a39e9b;
69 | padding: 0.5em;
70 | }
71 |
72 | .hljs-emphasis {
73 | font-style: italic;
74 | }
75 |
76 | .hljs-strong {
77 | font-weight: bold;
78 | }
79 |
80 |
81 |
82 |
83 | `;
84 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/paraiso-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Paraíso (light)
9 | Created by Jan T. Sott (http://github.com/idleberg)
10 | Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
11 | */
12 |
13 | /* Paraíso Comment */
14 | .hljs-comment,
15 | .hljs-quote {
16 | color: #776e71;
17 | }
18 |
19 | /* Paraíso Red */
20 | .hljs-variable,
21 | .hljs-template-variable,
22 | .hljs-tag,
23 | .hljs-name,
24 | .hljs-selector-id,
25 | .hljs-selector-class,
26 | .hljs-regexp,
27 | .hljs-link,
28 | .hljs-meta {
29 | color: #ef6155;
30 | }
31 |
32 | /* Paraíso Orange */
33 | .hljs-number,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params,
39 | .hljs-deletion {
40 | color: #f99b15;
41 | }
42 |
43 | /* Paraíso Yellow */
44 | .hljs-title,
45 | .hljs-section,
46 | .hljs-attribute {
47 | color: #fec418;
48 | }
49 |
50 | /* Paraíso Green */
51 | .hljs-string,
52 | .hljs-symbol,
53 | .hljs-bullet,
54 | .hljs-addition {
55 | color: #48b685;
56 | }
57 |
58 | /* Paraíso Purple */
59 | .hljs-keyword,
60 | .hljs-selector-tag {
61 | color: #815ba4;
62 | }
63 |
64 | .hljs {
65 | display: block;
66 | overflow-x: auto;
67 | background: #e7e9db;
68 | color: #4f424c;
69 | padding: 0.5em;
70 | }
71 |
72 | .hljs-emphasis {
73 | font-style: italic;
74 | }
75 |
76 | .hljs-strong {
77 | font-weight: bold;
78 | }
79 |
80 |
81 |
82 |
83 | `;
84 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withPropsTable/basic.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import ButtonWithPropTypes from '../../components/Button/ButtonWithPropTypes';
5 |
6 | const Basic = `
7 | # Basic Usage
8 |
9 | If your React component is already using \`PropTypes\`, then It is easy to
10 | show it in a table format by adding \`\` to \`readme\` object's
11 | \`content\`.
12 |
13 | ### From specific story
14 | \`\`\`javascript
15 | import ButtonWithPropTypes from '../../components/Button/ButtonWithPropTypes';
16 | storiesOf('Your story name', module).add(
17 | 'Your story name',
18 | () => ,
19 | {
20 | readme: {
21 | content: \`\`,
22 | }
23 | }
24 | );
25 | \`\`\`
26 |
27 | You can notice from below that the React component is showing and \`PropTypes\`
28 | that you specified to component is showing as a table format.
29 | `;
30 |
31 | storiesOf('PropsTable', module).add(
32 | 'Basic Usage',
33 | () => ,
34 | {
35 | readme: {
36 | content: `${Basic}`,
37 |
38 | // This is not necessary in normal situation. The reason for
39 | // `includePropTables` is needed here is because `ButtonWithPropTypes` is
40 | // specified in `excludePropTables` at `config.js`
41 | includePropTables: [ButtonWithPropTypes],
42 | },
43 | }
44 | );
45 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/dracula.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Dracula Theme v1.2.0
10 |
11 | https://github.com/zenorocha/dracula-theme
12 |
13 | Copyright 2015, All rights reserved
14 |
15 | Code licensed under the MIT license
16 | http://zenorocha.mit-license.org
17 |
18 | @author Éverton Ribeiro
19 | @author Zeno Rocha
20 |
21 | */
22 |
23 | .hljs {
24 | display: block;
25 | overflow-x: auto;
26 | padding: 0.5em;
27 | background: #282a36;
28 | }
29 |
30 | .hljs-keyword,
31 | .hljs-selector-tag,
32 | .hljs-literal,
33 | .hljs-section,
34 | .hljs-link {
35 | color: #8be9fd;
36 | }
37 |
38 | .hljs-function .hljs-keyword {
39 | color: #ff79c6;
40 | }
41 |
42 | .hljs,
43 | .hljs-subst {
44 | color: #f8f8f2;
45 | }
46 |
47 | .hljs-string,
48 | .hljs-title,
49 | .hljs-name,
50 | .hljs-type,
51 | .hljs-attribute,
52 | .hljs-symbol,
53 | .hljs-bullet,
54 | .hljs-addition,
55 | .hljs-variable,
56 | .hljs-template-tag,
57 | .hljs-template-variable {
58 | color: #f1fa8c;
59 | }
60 |
61 | .hljs-comment,
62 | .hljs-quote,
63 | .hljs-deletion,
64 | .hljs-meta {
65 | color: #6272a4;
66 | }
67 |
68 | .hljs-keyword,
69 | .hljs-selector-tag,
70 | .hljs-literal,
71 | .hljs-title,
72 | .hljs-section,
73 | .hljs-doctag,
74 | .hljs-type,
75 | .hljs-name,
76 | .hljs-strong {
77 | font-weight: bold;
78 | }
79 |
80 | .hljs-emphasis {
81 | font-style: italic;
82 | }
83 |
84 |
85 |
86 |
87 | `;
88 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/qtcreator_dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Qt Creator dark color scheme
10 |
11 | */
12 |
13 |
14 | .hljs {
15 | display: block;
16 | overflow-x: auto;
17 | padding: 0.5em;
18 | background: #000000;
19 | }
20 |
21 | .hljs,
22 | .hljs-subst,
23 | .hljs-tag,
24 | .hljs-title {
25 | color: #aaaaaa;
26 | }
27 |
28 | .hljs-strong,
29 | .hljs-emphasis {
30 | color: #a8a8a2;
31 | }
32 |
33 | .hljs-bullet,
34 | .hljs-quote,
35 | .hljs-number,
36 | .hljs-regexp,
37 | .hljs-literal {
38 | color: #ff55ff;
39 | }
40 |
41 | .hljs-code
42 | .hljs-selector-class {
43 | color: #aaaaff;
44 | }
45 |
46 | .hljs-emphasis,
47 | .hljs-stronge,
48 | .hljs-type {
49 | font-style: italic;
50 | }
51 |
52 | .hljs-keyword,
53 | .hljs-selector-tag,
54 | .hljs-function,
55 | .hljs-section,
56 | .hljs-symbol,
57 | .hljs-name {
58 | color: #ffff55;
59 | }
60 |
61 | .hljs-attribute {
62 | color: #ff5555;
63 | }
64 |
65 | .hljs-variable,
66 | .hljs-params,
67 | .hljs-class .hljs-title {
68 | color: #8888ff;
69 | }
70 |
71 | .hljs-string,
72 | .hljs-selector-id,
73 | .hljs-selector-attr,
74 | .hljs-selector-pseudo,
75 | .hljs-type,
76 | .hljs-built_in,
77 | .hljs-builtin-name,
78 | .hljs-template-tag,
79 | .hljs-template-variable,
80 | .hljs-addition,
81 | .hljs-link {
82 | color: #ff55ff;
83 | }
84 |
85 | .hljs-comment,
86 | .hljs-meta,
87 | .hljs-deletion {
88 | color: #55ffff;
89 | }
90 |
91 |
92 |
93 |
94 | `;
95 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/qtcreator_light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Qt Creator light color scheme
10 |
11 | */
12 |
13 |
14 | .hljs {
15 | display: block;
16 | overflow-x: auto;
17 | padding: 0.5em;
18 | background: #ffffff;
19 | }
20 |
21 | .hljs,
22 | .hljs-subst,
23 | .hljs-tag,
24 | .hljs-title {
25 | color: #000000;
26 | }
27 |
28 | .hljs-strong,
29 | .hljs-emphasis {
30 | color: #000000;
31 | }
32 |
33 | .hljs-bullet,
34 | .hljs-quote,
35 | .hljs-number,
36 | .hljs-regexp,
37 | .hljs-literal {
38 | color: #000080;
39 | }
40 |
41 | .hljs-code
42 | .hljs-selector-class {
43 | color: #800080;
44 | }
45 |
46 | .hljs-emphasis,
47 | .hljs-stronge,
48 | .hljs-type {
49 | font-style: italic;
50 | }
51 |
52 | .hljs-keyword,
53 | .hljs-selector-tag,
54 | .hljs-function,
55 | .hljs-section,
56 | .hljs-symbol,
57 | .hljs-name {
58 | color: #808000;
59 | }
60 |
61 | .hljs-attribute {
62 | color: #800000;
63 | }
64 |
65 | .hljs-variable,
66 | .hljs-params,
67 | .hljs-class .hljs-title {
68 | color: #0055AF;
69 | }
70 |
71 | .hljs-string,
72 | .hljs-selector-id,
73 | .hljs-selector-attr,
74 | .hljs-selector-pseudo,
75 | .hljs-type,
76 | .hljs-built_in,
77 | .hljs-builtin-name,
78 | .hljs-template-tag,
79 | .hljs-template-variable,
80 | .hljs-addition,
81 | .hljs-link {
82 | color: #008000;
83 | }
84 |
85 | .hljs-comment,
86 | .hljs-meta,
87 | .hljs-deletion {
88 | color: #008000;
89 | }
90 |
91 |
92 |
93 |
94 | `;
95 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/rainbow.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Style with support for rainbow parens
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #474949;
18 | color: #d1d9e1;
19 | }
20 |
21 |
22 | .hljs-comment,
23 | .hljs-quote {
24 | color: #969896;
25 | font-style: italic;
26 | }
27 |
28 | .hljs-keyword,
29 | .hljs-selector-tag,
30 | .hljs-literal,
31 | .hljs-type,
32 | .hljs-addition {
33 | color: #cc99cc;
34 | }
35 |
36 | .hljs-number,
37 | .hljs-selector-attr,
38 | .hljs-selector-pseudo {
39 | color: #f99157;
40 | }
41 |
42 | .hljs-string,
43 | .hljs-doctag,
44 | .hljs-regexp {
45 | color: #8abeb7;
46 | }
47 |
48 | .hljs-title,
49 | .hljs-name,
50 | .hljs-section,
51 | .hljs-built_in {
52 | color: #b5bd68;
53 | }
54 |
55 | .hljs-variable,
56 | .hljs-template-variable,
57 | .hljs-selector-id,
58 | .hljs-class .hljs-title {
59 | color: #ffcc66;
60 | }
61 |
62 | .hljs-section,
63 | .hljs-name,
64 | .hljs-strong {
65 | font-weight: bold;
66 | }
67 |
68 | .hljs-symbol,
69 | .hljs-bullet,
70 | .hljs-subst,
71 | .hljs-meta,
72 | .hljs-link {
73 | color: #f99157;
74 | }
75 |
76 | .hljs-deletion {
77 | color: #dc322f;
78 | }
79 |
80 | .hljs-formula {
81 | background: #eee8d5;
82 | }
83 |
84 | .hljs-attr,
85 | .hljs-attribute {
86 | color: #81a2be;
87 | }
88 |
89 | .hljs-emphasis {
90 | font-style: italic;
91 | }
92 |
93 |
94 |
95 |
96 | `;
97 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withPropsTable/excludeGlobally.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import ButtonWithPropTypes from '../../components/Button/ButtonWithPropTypes';
5 |
6 | const ExcludeGlobally = `
7 | # Exclude Globally
8 |
9 | You can exclude propTables globally by adding \`excludePropTables\` value to
10 | addParameters at \`config.js\` It is an array of React component.
11 | It is convenient when the component is wrapped with
12 | Theme, I18n, or HOC component.
13 |
14 | ### From config.js
15 | \`\`\`javascript
16 | import ButtonWithPropTypes from '../../components/Button/ButtonWithPropTypes';
17 | addParameters({
18 | readme: {
19 | excludePropTables: [ButtonWithPropTypes]
20 | },
21 | });
22 | \`\`\`
23 |
24 | ### From specific story
25 | \`\`\`javascript
26 | import ButtonWithPropTypes from '../../components/Button/ButtonWithPropTypes';
27 | storiesOf("Your story name", module)
28 | .add("Your story name", () => , {
29 | readme: {
30 | content: \`\`,
31 | }
32 | })
33 | \`\`\`
34 |
35 | You can notice from below that the component is showing but propTable
36 | is not showing eventhough \`\` is specified.
37 |
38 | `;
39 |
40 | storiesOf('PropsTable', module).add(
41 | 'Exclude globally',
42 | () => ,
43 | {
44 | readme: {
45 | content: `${ExcludeGlobally}`,
46 | },
47 | }
48 | );
49 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withContentDocs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Button from '../components/Button';
5 |
6 | import ButtonReadme from '../components/Button/README.md';
7 | import ButtonUsage from '../components/Button/USAGE.md';
8 |
9 | storiesOf('Content docs', module)
10 | .addParameters({
11 | readme: {
12 | content: ButtonReadme,
13 | },
14 | })
15 | .add('Button', () => , {
16 | readme: {
17 | content: `
18 | ## Sidebar docs
19 |
20 |
21 |
22 | \`sidebar\` added with \`addParameters\` will be applied for all stories in the same series.
23 | To override it - define \`sidebar\` at \`add\` method.
24 |
25 | \`\`\`js
26 | import README from './README.md';
27 | import CUSTOM_README from './CUSTOM_README.md';
28 |
29 | storiesOf('Sidebar docs', module)
30 | .addParameters({
31 | readme: {
32 | content: README,
33 | },
34 | })
35 | .add(..., {
36 | readme: {
37 | // will override
38 | content: CUSTOM_README,
39 | },
40 | })
41 | .add(...)
42 | .add(...)
43 | \`\`\`
44 | `,
45 | },
46 | })
47 | .add('Alert Button', () => (
48 |
49 | ))
50 | .add('Success Button', () => (
51 |
52 | ))
53 | .add('Override Content docs', () => , {
54 | readme: {
55 | content: `This \`md\` is overriden.`,
56 | },
57 | });
58 |
--------------------------------------------------------------------------------
/packages/example-react/components/Button/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styled, { withTheme } from 'styled-components';
4 |
5 | function getBorderColor(variant) {
6 | switch (variant) {
7 | case 'alert':
8 | return 'red';
9 | case 'success':
10 | return 'green';
11 | case 'warning':
12 | return 'orange';
13 |
14 | case 'normal':
15 | default:
16 | return 'black';
17 | }
18 | }
19 |
20 | const StyledButton = styled.button`
21 | font-size: 16px;
22 | font-weight: bold;
23 |
24 | cursor: pointer;
25 | padding: 8px 12px;
26 | outline: none;
27 |
28 | border-width: 2px;
29 | border-style: solid;
30 | border-color: ${props => getBorderColor(props.variant)};
31 |
32 | border-radius: 8px;
33 | color: rgba(0, 0, 0, 0.96);
34 |
35 | :hover {
36 | background: yellow;
37 | border-width: 3px;
38 |
39 | padding: 7px 11px;
40 | }
41 |
42 | :active {
43 | background: yellow;
44 | border-width: 4px;
45 |
46 | padding: 6px 10px;
47 | }
48 | `;
49 |
50 | const Button = ({ label, ...props }) => (
51 | {label}
52 | );
53 |
54 | Button.propTypes = {
55 | /**
56 | * Button label
57 | */
58 | label: PropTypes.string.isRequired,
59 | /** on click event handler */
60 | onClick: PropTypes.func,
61 | /** Button type */
62 | variant: PropTypes.oneOf(['success', 'normal', 'warning', 'alert']),
63 | };
64 |
65 | Button.defaultProps = {
66 | variant: 'normal',
67 | };
68 |
69 | export default Button;
70 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/kimbie.dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Name: Kimbie (dark)
9 | Author: Jan T. Sott
10 | License: Creative Commons Attribution-ShareAlike 4.0 Unported License
11 | URL: https://github.com/idleberg/Kimbie-highlight.js
12 | */
13 |
14 | /* Kimbie Comment */
15 | .hljs-comment,
16 | .hljs-quote {
17 | color: #d6baad;
18 | }
19 |
20 | /* Kimbie Red */
21 | .hljs-variable,
22 | .hljs-template-variable,
23 | .hljs-tag,
24 | .hljs-name,
25 | .hljs-selector-id,
26 | .hljs-selector-class,
27 | .hljs-regexp,
28 | .hljs-meta {
29 | color: #dc3958;
30 | }
31 |
32 | /* Kimbie Orange */
33 | .hljs-number,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params,
39 | .hljs-deletion,
40 | .hljs-link {
41 | color: #f79a32;
42 | }
43 |
44 | /* Kimbie Yellow */
45 | .hljs-title,
46 | .hljs-section,
47 | .hljs-attribute {
48 | color: #f06431;
49 | }
50 |
51 | /* Kimbie Green */
52 | .hljs-string,
53 | .hljs-symbol,
54 | .hljs-bullet,
55 | .hljs-addition {
56 | color: #889b4a;
57 | }
58 |
59 | /* Kimbie Purple */
60 | .hljs-keyword,
61 | .hljs-selector-tag,
62 | .hljs-function {
63 | color: #98676a;
64 | }
65 |
66 | .hljs {
67 | display: block;
68 | overflow-x: auto;
69 | background: #221a0f;
70 | color: #d3af86;
71 | padding: 0.5em;
72 | }
73 |
74 | .hljs-emphasis {
75 | font-style: italic;
76 | }
77 |
78 | .hljs-strong {
79 | font-weight: bold;
80 | }
81 |
82 |
83 |
84 |
85 | `;
86 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/kimbie.light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Name: Kimbie (light)
9 | Author: Jan T. Sott
10 | License: Creative Commons Attribution-ShareAlike 4.0 Unported License
11 | URL: https://github.com/idleberg/Kimbie-highlight.js
12 | */
13 |
14 | /* Kimbie Comment */
15 | .hljs-comment,
16 | .hljs-quote {
17 | color: #a57a4c;
18 | }
19 |
20 | /* Kimbie Red */
21 | .hljs-variable,
22 | .hljs-template-variable,
23 | .hljs-tag,
24 | .hljs-name,
25 | .hljs-selector-id,
26 | .hljs-selector-class,
27 | .hljs-regexp,
28 | .hljs-meta {
29 | color: #dc3958;
30 | }
31 |
32 | /* Kimbie Orange */
33 | .hljs-number,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params,
39 | .hljs-deletion,
40 | .hljs-link {
41 | color: #f79a32;
42 | }
43 |
44 | /* Kimbie Yellow */
45 | .hljs-title,
46 | .hljs-section,
47 | .hljs-attribute {
48 | color: #f06431;
49 | }
50 |
51 | /* Kimbie Green */
52 | .hljs-string,
53 | .hljs-symbol,
54 | .hljs-bullet,
55 | .hljs-addition {
56 | color: #889b4a;
57 | }
58 |
59 | /* Kimbie Purple */
60 | .hljs-keyword,
61 | .hljs-selector-tag,
62 | .hljs-function {
63 | color: #98676a;
64 | }
65 |
66 | .hljs {
67 | display: block;
68 | overflow-x: auto;
69 | background: #fbebd4;
70 | color: #84613d;
71 | padding: 0.5em;
72 | }
73 |
74 | .hljs-emphasis {
75 | font-style: italic;
76 | }
77 |
78 | .hljs-strong {
79 | font-weight: bold;
80 | }
81 |
82 |
83 |
84 |
85 | `;
86 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-dune-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Dune Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Dune Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #999580;
15 | }
16 |
17 | /* Atelier-Dune Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #d73737;
29 | }
30 |
31 | /* Atelier-Dune Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #b65611;
40 | }
41 |
42 | /* Atelier-Dune Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #60ac39;
47 | }
48 |
49 | /* Atelier-Dune Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #6684e1;
53 | }
54 |
55 | /* Atelier-Dune Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #b854d4;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #20201d;
65 | color: #a6a28c;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/monokai-sublime.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #23241f;
18 | }
19 |
20 | .hljs,
21 | .hljs-tag,
22 | .hljs-subst {
23 | color: #f8f8f2;
24 | }
25 |
26 | .hljs-strong,
27 | .hljs-emphasis {
28 | color: #a8a8a2;
29 | }
30 |
31 | .hljs-bullet,
32 | .hljs-quote,
33 | .hljs-number,
34 | .hljs-regexp,
35 | .hljs-literal,
36 | .hljs-link {
37 | color: #ae81ff;
38 | }
39 |
40 | .hljs-code,
41 | .hljs-title,
42 | .hljs-section,
43 | .hljs-selector-class {
44 | color: #a6e22e;
45 | }
46 |
47 | .hljs-strong {
48 | font-weight: bold;
49 | }
50 |
51 | .hljs-emphasis {
52 | font-style: italic;
53 | }
54 |
55 | .hljs-keyword,
56 | .hljs-selector-tag,
57 | .hljs-name,
58 | .hljs-attr {
59 | color: #f92672;
60 | }
61 |
62 | .hljs-symbol,
63 | .hljs-attribute {
64 | color: #66d9ef;
65 | }
66 |
67 | .hljs-params,
68 | .hljs-class .hljs-title {
69 | color: #f8f8f2;
70 | }
71 |
72 | .hljs-string,
73 | .hljs-type,
74 | .hljs-built_in,
75 | .hljs-builtin-name,
76 | .hljs-selector-id,
77 | .hljs-selector-attr,
78 | .hljs-selector-pseudo,
79 | .hljs-addition,
80 | .hljs-variable,
81 | .hljs-template-variable {
82 | color: #e6db74;
83 | }
84 |
85 | .hljs-comment,
86 | .hljs-deletion,
87 | .hljs-meta {
88 | color: #75715e;
89 | }
90 |
91 |
92 |
93 |
94 | `;
95 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/html/index.js:
--------------------------------------------------------------------------------
1 | import addons, { makeDecorator } from '@storybook/addons';
2 | import getDocsLayout from '../services/getDocsLayout';
3 | import getParameters from '../services/getParameters';
4 | import { CHANNEL_SET_SIDEBAR_DOCS } from '../const';
5 |
6 | export const addReadme = makeDecorator({
7 | name: 'addReadme',
8 | parameterName: 'readme',
9 | wrapper: (getStory, context) => {
10 | const parameters = getParameters(context);
11 | const story = getStory(context);
12 |
13 | const layout = parameters.layout
14 | ? parameters.layout
15 | : getDocsLayout({
16 | footer: parameters.footer || '',
17 | header: parameters.header || '',
18 | md: parameters.content || '',
19 | excludePropTables: parameters.excludePropTables || [],
20 | includePropTables: parameters.includePropTables || [],
21 | story,
22 | });
23 |
24 | const channel = addons.getChannel();
25 |
26 | if (parameters.sidebar) {
27 | const sidebarLayout = getDocsLayout({
28 | footer: parameters.footer || '',
29 | header: parameters.header || '',
30 | md: parameters.sidebar,
31 | excludePropTables: parameters.excludePropTables || [],
32 | includePropTables: parameters.includePropTables || [],
33 | story,
34 | });
35 |
36 | channel.emit(CHANNEL_SET_SIDEBAR_DOCS, {
37 | layout: sidebarLayout,
38 | theme: parameters.theme,
39 | codeTheme: parameters.codeTheme,
40 | });
41 | }
42 |
43 | return story;
44 | },
45 | });
46 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-dune-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Dune Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Dune Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #7d7a68;
15 | }
16 |
17 | /* Atelier-Dune Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #d73737;
29 | }
30 |
31 | /* Atelier-Dune Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #b65611;
40 | }
41 |
42 | /* Atelier-Dune Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #60ac39;
47 | }
48 |
49 | /* Atelier-Dune Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #6684e1;
53 | }
54 |
55 | /* Atelier-Dune Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #b854d4;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #fefbec;
65 | color: #6e6b5e;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "storybook-readme",
3 | "private": true,
4 | "description": "React storybook addon to show components README",
5 | "homepage": "https://github.com/tuchk4/storybook-readme",
6 | "bugs": "https://github.com/tuchk4/storybook-readme/issues",
7 | "repository": {
8 | "type": "git",
9 | "url": "git+https://github.com/tuchk4/storybook-readme"
10 | },
11 | "devDependencies": {
12 | "husky": "^2.2.0",
13 | "lerna": "^3.8.0",
14 | "lint-staged": "^8.1.6",
15 | "prettier": "^1.17.0"
16 | },
17 | "scripts": {
18 | "storybook-react": "npm run storybook --prefix ./packages/example-react",
19 | "storybook-vue": "npm run storybook --prefix ./packages/example-vue",
20 | "dev": "lerna run dev --stream --parallel",
21 | "clear": "lerna run clear",
22 | "deploy-storybook": "npm run deploy-storybook --prefix ./packages/example-react",
23 | "format": "prettier --trailing-comma es5 --single-quote --write 'packages/**/*.js' 'packages/**/*.json'"
24 | },
25 | "keywords": [],
26 | "author": "",
27 | "license": "ISC",
28 | "husky": {
29 | "hooks": {
30 | "pre-commit": "lint-staged"
31 | }
32 | },
33 | "lint-staged": {
34 | "*.{js,json}": [
35 | "yarn format",
36 | "git add"
37 | ]
38 | },
39 | "workspaces": [
40 | "packages/storybook-readme",
41 | "packages/example-react",
42 | "packages/example-vue",
43 | "packages/example-html"
44 | ],
45 | "dependencies": {
46 | "@babel/core": "^7.4.4",
47 | "@storybook/html": "^5.0.11",
48 | "babel-loader": "^8.0.5"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-heath-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Heath Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Heath Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #9e8f9e;
15 | }
16 |
17 | /* Atelier-Heath Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #ca402b;
29 | }
30 |
31 | /* Atelier-Heath Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #a65926;
40 | }
41 |
42 | /* Atelier-Heath Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #918b3b;
47 | }
48 |
49 | /* Atelier-Heath Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #516aec;
53 | }
54 |
55 | /* Atelier-Heath Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #7b59c0;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #1b181b;
65 | color: #ab9bab;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-heath-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Heath Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Heath Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #776977;
15 | }
16 |
17 | /* Atelier-Heath Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #ca402b;
29 | }
30 |
31 | /* Atelier-Heath Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #a65926;
40 | }
41 |
42 | /* Atelier-Heath Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #918b3b;
47 | }
48 |
49 | /* Atelier-Heath Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #516aec;
53 | }
54 |
55 | /* Atelier-Heath Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #7b59c0;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #f7f3f7;
65 | color: #695d69;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-forest-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Forest Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Forest Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #9c9491;
15 | }
16 |
17 | /* Atelier-Forest Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #f22c40;
29 | }
30 |
31 | /* Atelier-Forest Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #df5320;
40 | }
41 |
42 | /* Atelier-Forest Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #7b9726;
47 | }
48 |
49 | /* Atelier-Forest Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #407ee7;
53 | }
54 |
55 | /* Atelier-Forest Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #6666ea;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #1b1918;
65 | color: #a8a19f;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-forest-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Forest Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Forest Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #766e6b;
15 | }
16 |
17 | /* Atelier-Forest Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #f22c40;
29 | }
30 |
31 | /* Atelier-Forest Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #df5320;
40 | }
41 |
42 | /* Atelier-Forest Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #7b9726;
47 | }
48 |
49 | /* Atelier-Forest Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #407ee7;
53 | }
54 |
55 | /* Atelier-Forest Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #6666ea;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #f1efee;
65 | color: #68615e;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/tomorrow-night-bright.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Tomorrow Night Bright Theme */
8 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */
9 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
10 |
11 | /* Tomorrow Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #969896;
15 | }
16 |
17 | /* Tomorrow Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-tag,
21 | .hljs-name,
22 | .hljs-selector-id,
23 | .hljs-selector-class,
24 | .hljs-regexp,
25 | .hljs-deletion {
26 | color: #d54e53;
27 | }
28 |
29 | /* Tomorrow Orange */
30 | .hljs-number,
31 | .hljs-built_in,
32 | .hljs-builtin-name,
33 | .hljs-literal,
34 | .hljs-type,
35 | .hljs-params,
36 | .hljs-meta,
37 | .hljs-link {
38 | color: #e78c45;
39 | }
40 |
41 | /* Tomorrow Yellow */
42 | .hljs-attribute {
43 | color: #e7c547;
44 | }
45 |
46 | /* Tomorrow Green */
47 | .hljs-string,
48 | .hljs-symbol,
49 | .hljs-bullet,
50 | .hljs-addition {
51 | color: #b9ca4a;
52 | }
53 |
54 | /* Tomorrow Blue */
55 | .hljs-title,
56 | .hljs-section {
57 | color: #7aa6da;
58 | }
59 |
60 | /* Tomorrow Purple */
61 | .hljs-keyword,
62 | .hljs-selector-tag {
63 | color: #c397d8;
64 | }
65 |
66 | .hljs {
67 | display: block;
68 | overflow-x: auto;
69 | background: black;
70 | color: #eaeaea;
71 | padding: 0.5em;
72 | }
73 |
74 | .hljs-emphasis {
75 | font-style: italic;
76 | }
77 |
78 | .hljs-strong {
79 | font-weight: bold;
80 | }
81 |
82 |
83 |
84 |
85 | `;
86 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/tomorrow-night-eighties.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Tomorrow Night Eighties Theme */
8 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */
9 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
10 |
11 | /* Tomorrow Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #999999;
15 | }
16 |
17 | /* Tomorrow Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-tag,
21 | .hljs-name,
22 | .hljs-selector-id,
23 | .hljs-selector-class,
24 | .hljs-regexp,
25 | .hljs-deletion {
26 | color: #f2777a;
27 | }
28 |
29 | /* Tomorrow Orange */
30 | .hljs-number,
31 | .hljs-built_in,
32 | .hljs-builtin-name,
33 | .hljs-literal,
34 | .hljs-type,
35 | .hljs-params,
36 | .hljs-meta,
37 | .hljs-link {
38 | color: #f99157;
39 | }
40 |
41 | /* Tomorrow Yellow */
42 | .hljs-attribute {
43 | color: #ffcc66;
44 | }
45 |
46 | /* Tomorrow Green */
47 | .hljs-string,
48 | .hljs-symbol,
49 | .hljs-bullet,
50 | .hljs-addition {
51 | color: #99cc99;
52 | }
53 |
54 | /* Tomorrow Blue */
55 | .hljs-title,
56 | .hljs-section {
57 | color: #6699cc;
58 | }
59 |
60 | /* Tomorrow Purple */
61 | .hljs-keyword,
62 | .hljs-selector-tag {
63 | color: #cc99cc;
64 | }
65 |
66 | .hljs {
67 | display: block;
68 | overflow-x: auto;
69 | background: #2d2d2d;
70 | color: #cccccc;
71 | padding: 0.5em;
72 | }
73 |
74 | .hljs-emphasis {
75 | font-style: italic;
76 | }
77 |
78 | .hljs-strong {
79 | font-weight: bold;
80 | }
81 |
82 |
83 |
84 |
85 | `;
86 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-seaside-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Seaside Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Seaside Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #809980;
15 | }
16 |
17 | /* Atelier-Seaside Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #e6193c;
29 | }
30 |
31 | /* Atelier-Seaside Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #87711d;
40 | }
41 |
42 | /* Atelier-Seaside Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #29a329;
47 | }
48 |
49 | /* Atelier-Seaside Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #3d62f5;
53 | }
54 |
55 | /* Atelier-Seaside Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #ad2bee;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #131513;
65 | color: #8ca68c;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-seaside-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Seaside Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Seaside Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #687d68;
15 | }
16 |
17 | /* Atelier-Seaside Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #e6193c;
29 | }
30 |
31 | /* Atelier-Seaside Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #87711d;
40 | }
41 |
42 | /* Atelier-Seaside Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #29a329;
47 | }
48 |
49 | /* Atelier-Seaside Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #3d62f5;
53 | }
54 |
55 | /* Atelier-Seaside Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #ad2bee;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #f4fbf4;
65 | color: #5e6e5e;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/hopscotch.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | * Hopscotch
9 | * by Jan T. Sott
10 | * https://github.com/idleberg/Hopscotch
11 | *
12 | * This work is licensed under the Creative Commons CC0 1.0 Universal License
13 | */
14 |
15 | /* Comment */
16 | .hljs-comment,
17 | .hljs-quote {
18 | color: #989498;
19 | }
20 |
21 | /* Red */
22 | .hljs-variable,
23 | .hljs-template-variable,
24 | .hljs-attribute,
25 | .hljs-tag,
26 | .hljs-name,
27 | .hljs-selector-id,
28 | .hljs-selector-class,
29 | .hljs-regexp,
30 | .hljs-link,
31 | .hljs-deletion {
32 | color: #dd464c;
33 | }
34 |
35 | /* Orange */
36 | .hljs-number,
37 | .hljs-built_in,
38 | .hljs-builtin-name,
39 | .hljs-literal,
40 | .hljs-type,
41 | .hljs-params {
42 | color: #fd8b19;
43 | }
44 |
45 | /* Yellow */
46 | .hljs-class .hljs-title {
47 | color: #fdcc59;
48 | }
49 |
50 | /* Green */
51 | .hljs-string,
52 | .hljs-symbol,
53 | .hljs-bullet,
54 | .hljs-addition {
55 | color: #8fc13e;
56 | }
57 |
58 | /* Aqua */
59 | .hljs-meta {
60 | color: #149b93;
61 | }
62 |
63 | /* Blue */
64 | .hljs-function,
65 | .hljs-section,
66 | .hljs-title {
67 | color: #1290bf;
68 | }
69 |
70 | /* Purple */
71 | .hljs-keyword,
72 | .hljs-selector-tag {
73 | color: #c85e7c;
74 | }
75 |
76 | .hljs {
77 | display: block;
78 | background: #322931;
79 | color: #b9b5b8;
80 | padding: 0.5em;
81 | }
82 |
83 | .hljs-emphasis {
84 | font-style: italic;
85 | }
86 |
87 | .hljs-strong {
88 | font-weight: bold;
89 | }
90 |
91 |
92 |
93 |
94 | `;
95 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/lightfair.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Lightfair style (c) Tristian Kelly
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | }
18 |
19 | .hljs-name {
20 | color:#01a3a3;
21 | }
22 |
23 | .hljs-tag,.hljs-meta {
24 | color:#778899;
25 | }
26 |
27 | .hljs,
28 | .hljs-subst {
29 | color: #444
30 | }
31 |
32 | .hljs-comment {
33 | color: #888888
34 | }
35 |
36 | .hljs-keyword,
37 | .hljs-attribute,
38 | .hljs-selector-tag,
39 | .hljs-meta-keyword,
40 | .hljs-doctag,
41 | .hljs-name {
42 | font-weight: bold
43 | }
44 |
45 | .hljs-type,
46 | .hljs-string,
47 | .hljs-number,
48 | .hljs-selector-id,
49 | .hljs-selector-class,
50 | .hljs-quote,
51 | .hljs-template-tag,
52 | .hljs-deletion {
53 | color: #4286f4
54 | }
55 |
56 | .hljs-title,
57 | .hljs-section {
58 | color: #4286f4;
59 | font-weight: bold
60 | }
61 |
62 | .hljs-regexp,
63 | .hljs-symbol,
64 | .hljs-variable,
65 | .hljs-template-variable,
66 | .hljs-link,
67 | .hljs-selector-attr,
68 | .hljs-selector-pseudo {
69 | color: #BC6060
70 | }
71 |
72 | .hljs-literal {
73 | color: #62bcbc
74 | }
75 |
76 | .hljs-built_in,
77 | .hljs-bullet,
78 | .hljs-code,
79 | .hljs-addition {
80 | color: #25c6c6
81 | }
82 |
83 | .hljs-meta-string {
84 | color: #4d99bf
85 | }
86 |
87 | .hljs-emphasis {
88 | font-style: italic
89 | }
90 |
91 | .hljs-strong {
92 | font-weight: bold
93 | }
94 |
95 |
96 |
97 |
98 | `;
99 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-lakeside-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Lakeside Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Lakeside Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #7195a8;
15 | }
16 |
17 | /* Atelier-Lakeside Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #d22d72;
29 | }
30 |
31 | /* Atelier-Lakeside Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #935c25;
40 | }
41 |
42 | /* Atelier-Lakeside Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #568c3b;
47 | }
48 |
49 | /* Atelier-Lakeside Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #257fad;
53 | }
54 |
55 | /* Atelier-Lakeside Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #6b6bb8;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #161b1d;
65 | color: #7ea2b4;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-lakeside-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Lakeside Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Lakeside Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #5a7b8c;
15 | }
16 |
17 | /* Atelier-Lakeside Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #d22d72;
29 | }
30 |
31 | /* Atelier-Lakeside Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #935c25;
40 | }
41 |
42 | /* Atelier-Lakeside Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #568c3b;
47 | }
48 |
49 | /* Atelier-Lakeside Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #257fad;
53 | }
54 |
55 | /* Atelier-Lakeside Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #6b6bb8;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #ebf8ff;
65 | color: #516d7b;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/example-react/package-storybook-v3.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-react",
3 | "private": true,
4 | "version": "1.0.0",
5 | "scripts": {
6 | "prepublishOnly": "echo \"Error: not allowed to publish\" && exit 1",
7 | "storybook": "cross-env NODE_ENV=development start-storybook -p 6005",
8 | "deploy-storybook": "storybook-to-ghpages",
9 | "test": "jest"
10 | },
11 | "dependencies": {
12 | "@babel/plugin-transform-modules-commonjs": "7.2.0",
13 | "@babel/core": "=7.1.6",
14 | "@storybook/addon-actions": "3.4.11",
15 | "@storybook/addon-knobs": "3.4.11",
16 | "@storybook/addon-notes": "3.4.11",
17 | "@storybook/addon-options": "3.4.11",
18 | "@storybook/addon-storyshots": "3.4.11",
19 | "@storybook/addons": "3.4.11",
20 | "@storybook/react": "3.4.11",
21 | "@storybook/storybook-deployer": "^2.3.0",
22 | "babel-core": "^7.0.0-bridge.0",
23 | "babel-jest": "^23.6.0",
24 | "babel-loader": "7",
25 | "babel-preset-react-app": "7.0.0",
26 | "cross-env": "^5.1.3",
27 | "file-loader": "^1.1.7",
28 | "html-loader": "^0.5.5",
29 | "markdown-loader": "^2.0.2",
30 | "markdown-loader-jest": "^0.1.1",
31 | "react": "^16.5.0",
32 | "react-dom": "^16.5.0",
33 | "react-test-renderer": "^16.5.0",
34 | "storybook-readme": "=4.0.4"
35 | },
36 | "license": "ISC",
37 | "jest": {
38 | "transform": {
39 | "^.+\\.js?$": "babel-jest",
40 | "^.+\\.md?$": "markdown-loader-jest"
41 | },
42 | "moduleNameMapper": {
43 | "@storybook/addons": "/../storybook-readme/node_modules/@storybook/addons"
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-sulphurpool-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Sulphurpool Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Sulphurpool Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #898ea4;
15 | }
16 |
17 | /* Atelier-Sulphurpool Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #c94922;
29 | }
30 |
31 | /* Atelier-Sulphurpool Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #c76b29;
40 | }
41 |
42 | /* Atelier-Sulphurpool Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #ac9739;
47 | }
48 |
49 | /* Atelier-Sulphurpool Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #3d8fd1;
53 | }
54 |
55 | /* Atelier-Sulphurpool Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #6679cc;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #202746;
65 | color: #979db4;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-sulphurpool-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Sulphurpool Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Sulphurpool Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #6b7394;
15 | }
16 |
17 | /* Atelier-Sulphurpool Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #c94922;
29 | }
30 |
31 | /* Atelier-Sulphurpool Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #c76b29;
40 | }
41 |
42 | /* Atelier-Sulphurpool Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #ac9739;
47 | }
48 |
49 | /* Atelier-Sulphurpool Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #3d8fd1;
53 | }
54 |
55 | /* Atelier-Sulphurpool Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #6679cc;
59 | }
60 |
61 | .hljs {
62 | display: block;
63 | overflow-x: auto;
64 | background: #f5f7ff;
65 | color: #5e6687;
66 | padding: 0.5em;
67 | }
68 |
69 | .hljs-emphasis {
70 | font-style: italic;
71 | }
72 |
73 | .hljs-strong {
74 | font-weight: bold;
75 | }
76 |
77 |
78 |
79 |
80 | `;
81 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/tomorrow-night.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Tomorrow Night Theme */
8 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
9 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */
10 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
11 |
12 | /* Tomorrow Comment */
13 | .hljs-comment,
14 | .hljs-quote {
15 | color: #969896;
16 | }
17 |
18 | /* Tomorrow Red */
19 | .hljs-variable,
20 | .hljs-template-variable,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-selector-id,
24 | .hljs-selector-class,
25 | .hljs-regexp,
26 | .hljs-deletion {
27 | color: #cc6666;
28 | }
29 |
30 | /* Tomorrow Orange */
31 | .hljs-number,
32 | .hljs-built_in,
33 | .hljs-builtin-name,
34 | .hljs-literal,
35 | .hljs-type,
36 | .hljs-params,
37 | .hljs-meta,
38 | .hljs-link {
39 | color: #de935f;
40 | }
41 |
42 | /* Tomorrow Yellow */
43 | .hljs-attribute {
44 | color: #f0c674;
45 | }
46 |
47 | /* Tomorrow Green */
48 | .hljs-string,
49 | .hljs-symbol,
50 | .hljs-bullet,
51 | .hljs-addition {
52 | color: #b5bd68;
53 | }
54 |
55 | /* Tomorrow Blue */
56 | .hljs-title,
57 | .hljs-section {
58 | color: #81a2be;
59 | }
60 |
61 | /* Tomorrow Purple */
62 | .hljs-keyword,
63 | .hljs-selector-tag {
64 | color: #b294bb;
65 | }
66 |
67 | .hljs {
68 | display: block;
69 | overflow-x: auto;
70 | background: #1d1f21;
71 | color: #c5c8c6;
72 | padding: 0.5em;
73 | }
74 |
75 | .hljs-emphasis {
76 | font-style: italic;
77 | }
78 |
79 | .hljs-strong {
80 | font-weight: bold;
81 | }
82 |
83 |
84 |
85 |
86 | `;
87 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/tomorrow-night-blue.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Tomorrow Night Blue Theme */
8 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
9 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */
10 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
11 |
12 | /* Tomorrow Comment */
13 | .hljs-comment,
14 | .hljs-quote {
15 | color: #7285b7;
16 | }
17 |
18 | /* Tomorrow Red */
19 | .hljs-variable,
20 | .hljs-template-variable,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-selector-id,
24 | .hljs-selector-class,
25 | .hljs-regexp,
26 | .hljs-deletion {
27 | color: #ff9da4;
28 | }
29 |
30 | /* Tomorrow Orange */
31 | .hljs-number,
32 | .hljs-built_in,
33 | .hljs-builtin-name,
34 | .hljs-literal,
35 | .hljs-type,
36 | .hljs-params,
37 | .hljs-meta,
38 | .hljs-link {
39 | color: #ffc58f;
40 | }
41 |
42 | /* Tomorrow Yellow */
43 | .hljs-attribute {
44 | color: #ffeead;
45 | }
46 |
47 | /* Tomorrow Green */
48 | .hljs-string,
49 | .hljs-symbol,
50 | .hljs-bullet,
51 | .hljs-addition {
52 | color: #d1f1a9;
53 | }
54 |
55 | /* Tomorrow Blue */
56 | .hljs-title,
57 | .hljs-section {
58 | color: #bbdaff;
59 | }
60 |
61 | /* Tomorrow Purple */
62 | .hljs-keyword,
63 | .hljs-selector-tag {
64 | color: #ebbbff;
65 | }
66 |
67 | .hljs {
68 | display: block;
69 | overflow-x: auto;
70 | background: #002451;
71 | color: white;
72 | padding: 0.5em;
73 | }
74 |
75 | .hljs-emphasis {
76 | font-style: italic;
77 | }
78 |
79 | .hljs-strong {
80 | font-weight: bold;
81 | }
82 |
83 |
84 |
85 |
86 | `;
87 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withSidebarDocs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Button from '../components/Button';
5 |
6 | import ButtonReadme from '../components/Button/README.md';
7 | import ButtonUsage from '../components/Button/USAGE.md';
8 |
9 | storiesOf('Sidebar docs', module)
10 | .addParameters({
11 | readme: {
12 | sidebar: ButtonReadme,
13 | },
14 | })
15 | .add('Button', () => , {
16 | readme: {
17 | content: `
18 | ## Sidebar docs
19 |
20 |
21 |
22 | \`sidebar\` added with \`addParameters\` will be applied for all stories in the same series.
23 | To override it - define \`sidebar\` at \`add\` method.
24 |
25 | \`\`\`js
26 | import README from './README.md';
27 | import CUSTOM_README from './CUSTOM_README.md';
28 |
29 | storiesOf('Sidebar docs', module)
30 | .addParameters({
31 | readme: {
32 | sidebar: README,
33 | },
34 | })
35 | .add(..., {
36 | readme: {
37 | // will override
38 | sidebar: CUSTOM_README,
39 | },
40 | })
41 | .add(...)
42 | .add(...)
43 | \`\`\`
44 | `,
45 | },
46 | })
47 | .add('Alert Button', () => (
48 |
49 | ))
50 | .add('Success Button', () => (
51 |
52 | ))
53 | .add('Override Sidebar docs', () => , {
54 | readme: {
55 | content: `This \`sidebar\` is overriden.`,
56 | sidebar: `
57 | ## SuccesButton
58 |
59 | Use \`SuccessButton\` for form / filters submit actions only.
60 | `,
61 | },
62 | });
63 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/solarized-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #002b36;
18 | color: #839496;
19 | }
20 |
21 | .hljs-comment,
22 | .hljs-quote {
23 | color: #586e75;
24 | }
25 |
26 | /* Solarized Green */
27 | .hljs-keyword,
28 | .hljs-selector-tag,
29 | .hljs-addition {
30 | color: #859900;
31 | }
32 |
33 | /* Solarized Cyan */
34 | .hljs-number,
35 | .hljs-string,
36 | .hljs-meta .hljs-meta-string,
37 | .hljs-literal,
38 | .hljs-doctag,
39 | .hljs-regexp {
40 | color: #2aa198;
41 | }
42 |
43 | /* Solarized Blue */
44 | .hljs-title,
45 | .hljs-section,
46 | .hljs-name,
47 | .hljs-selector-id,
48 | .hljs-selector-class {
49 | color: #268bd2;
50 | }
51 |
52 | /* Solarized Yellow */
53 | .hljs-attribute,
54 | .hljs-attr,
55 | .hljs-variable,
56 | .hljs-template-variable,
57 | .hljs-class .hljs-title,
58 | .hljs-type {
59 | color: #b58900;
60 | }
61 |
62 | /* Solarized Orange */
63 | .hljs-symbol,
64 | .hljs-bullet,
65 | .hljs-subst,
66 | .hljs-meta,
67 | .hljs-meta .hljs-keyword,
68 | .hljs-selector-attr,
69 | .hljs-selector-pseudo,
70 | .hljs-link {
71 | color: #cb4b16;
72 | }
73 |
74 | /* Solarized Red */
75 | .hljs-built_in,
76 | .hljs-deletion {
77 | color: #dc322f;
78 | }
79 |
80 | .hljs-formula {
81 | background: #073642;
82 | }
83 |
84 | .hljs-emphasis {
85 | font-style: italic;
86 | }
87 |
88 | .hljs-strong {
89 | font-weight: bold;
90 | }
91 |
92 |
93 |
94 |
95 | `;
96 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/solarized-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #fdf6e3;
18 | color: #657b83;
19 | }
20 |
21 | .hljs-comment,
22 | .hljs-quote {
23 | color: #93a1a1;
24 | }
25 |
26 | /* Solarized Green */
27 | .hljs-keyword,
28 | .hljs-selector-tag,
29 | .hljs-addition {
30 | color: #859900;
31 | }
32 |
33 | /* Solarized Cyan */
34 | .hljs-number,
35 | .hljs-string,
36 | .hljs-meta .hljs-meta-string,
37 | .hljs-literal,
38 | .hljs-doctag,
39 | .hljs-regexp {
40 | color: #2aa198;
41 | }
42 |
43 | /* Solarized Blue */
44 | .hljs-title,
45 | .hljs-section,
46 | .hljs-name,
47 | .hljs-selector-id,
48 | .hljs-selector-class {
49 | color: #268bd2;
50 | }
51 |
52 | /* Solarized Yellow */
53 | .hljs-attribute,
54 | .hljs-attr,
55 | .hljs-variable,
56 | .hljs-template-variable,
57 | .hljs-class .hljs-title,
58 | .hljs-type {
59 | color: #b58900;
60 | }
61 |
62 | /* Solarized Orange */
63 | .hljs-symbol,
64 | .hljs-bullet,
65 | .hljs-subst,
66 | .hljs-meta,
67 | .hljs-meta .hljs-keyword,
68 | .hljs-selector-attr,
69 | .hljs-selector-pseudo,
70 | .hljs-link {
71 | color: #cb4b16;
72 | }
73 |
74 | /* Solarized Red */
75 | .hljs-built_in,
76 | .hljs-deletion {
77 | color: #dc322f;
78 | }
79 |
80 | .hljs-formula {
81 | background: #eee8d5;
82 | }
83 |
84 | .hljs-emphasis {
85 | font-style: italic;
86 | }
87 |
88 | .hljs-strong {
89 | font-weight: bold;
90 | }
91 |
92 |
93 |
94 |
95 | `;
96 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/backwardCompatibility/env/react/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReadmeContent from '../../../components/ReadmeContent';
3 | import commonHandler from '../common';
4 | import {
5 | LAYOUT_TYPE_STORY,
6 | LAYOUT_TYPE_PROPS_TABLE,
7 | LAYOUT_TYPE_MD,
8 | } from '../../../const';
9 |
10 | import getDocsLayout from '../../../services/getDocsLayout';
11 |
12 | function withDocsCallAsHoc({ md, story }) {
13 | return context => {
14 | const layout = getDocsLayout({
15 | md,
16 | story: {story(context)},
17 | });
18 |
19 | return (
20 |
24 | );
25 | };
26 | }
27 |
28 | function withDocsCallAsDecorator({ md }) {
29 | return (story, context) => {
30 | const layout = getDocsLayout({
31 | md,
32 | story: {story(context)},
33 | });
34 |
35 | return (
36 |
40 | );
41 | };
42 | }
43 |
44 | function doc({ md }) {
45 | const layout = getDocsLayout({
46 | md,
47 | story: null,
48 | });
49 |
50 | return () => (
51 |
55 | );
56 | }
57 |
58 | export default {
59 | doc,
60 | withReadme: commonHandler.withReadme,
61 | withDocs: {
62 | callAsDecorator: withDocsCallAsDecorator,
63 | callAsHoc: withDocsCallAsHoc,
64 | },
65 | };
66 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/arduino-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Arduino® Light Theme - Stefania Mellai
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #FFFFFF;
18 | }
19 |
20 | .hljs,
21 | .hljs-subst {
22 | color: #434f54;
23 | }
24 |
25 | .hljs-keyword,
26 | .hljs-attribute,
27 | .hljs-selector-tag,
28 | .hljs-doctag,
29 | .hljs-name {
30 | color: #00979D;
31 | }
32 |
33 | .hljs-built_in,
34 | .hljs-literal,
35 | .hljs-bullet,
36 | .hljs-code,
37 | .hljs-addition {
38 | color: #D35400;
39 | }
40 |
41 | .hljs-regexp,
42 | .hljs-symbol,
43 | .hljs-variable,
44 | .hljs-template-variable,
45 | .hljs-link,
46 | .hljs-selector-attr,
47 | .hljs-selector-pseudo {
48 | color: #00979D;
49 | }
50 |
51 | .hljs-type,
52 | .hljs-string,
53 | .hljs-selector-id,
54 | .hljs-selector-class,
55 | .hljs-quote,
56 | .hljs-template-tag,
57 | .hljs-deletion {
58 | color: #005C5F;
59 | }
60 |
61 | .hljs-title,
62 | .hljs-section {
63 | color: #880000;
64 | font-weight: bold;
65 | }
66 |
67 | .hljs-comment {
68 | color: rgba(149,165,166,.8);
69 | }
70 |
71 | .hljs-meta-keyword {
72 | color: #728E00;
73 | }
74 |
75 | .hljs-meta {
76 | color: #728E00;
77 | color: #434f54;
78 | }
79 |
80 | .hljs-emphasis {
81 | font-style: italic;
82 | }
83 |
84 | .hljs-strong {
85 | font-weight: bold;
86 | }
87 |
88 | .hljs-function {
89 | color: #728E00;
90 | }
91 |
92 | .hljs-number {
93 | color: #8A7B52;
94 | }
95 |
96 |
97 |
98 |
99 | `;
100 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/googlecode.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Google Code style (c) Aahan Krish
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: white;
18 | color: black;
19 | }
20 |
21 | .hljs-comment,
22 | .hljs-quote {
23 | color: #800;
24 | }
25 |
26 | .hljs-keyword,
27 | .hljs-selector-tag,
28 | .hljs-section,
29 | .hljs-title,
30 | .hljs-name {
31 | color: #008;
32 | }
33 |
34 | .hljs-variable,
35 | .hljs-template-variable {
36 | color: #660;
37 | }
38 |
39 | .hljs-string,
40 | .hljs-selector-attr,
41 | .hljs-selector-pseudo,
42 | .hljs-regexp {
43 | color: #080;
44 | }
45 |
46 | .hljs-literal,
47 | .hljs-symbol,
48 | .hljs-bullet,
49 | .hljs-meta,
50 | .hljs-number,
51 | .hljs-link {
52 | color: #066;
53 | }
54 |
55 | .hljs-title,
56 | .hljs-doctag,
57 | .hljs-type,
58 | .hljs-attr,
59 | .hljs-built_in,
60 | .hljs-builtin-name,
61 | .hljs-params {
62 | color: #606;
63 | }
64 |
65 | .hljs-attribute,
66 | .hljs-subst {
67 | color: #000;
68 | }
69 |
70 | .hljs-formula {
71 | background-color: #eee;
72 | font-style: italic;
73 | }
74 |
75 | .hljs-selector-id,
76 | .hljs-selector-class {
77 | color: #9B703F
78 | }
79 |
80 | .hljs-addition {
81 | background-color: #baeeba;
82 | }
83 |
84 | .hljs-deletion {
85 | background-color: #ffc8bd;
86 | }
87 |
88 | .hljs-doctag,
89 | .hljs-strong {
90 | font-weight: bold;
91 | }
92 |
93 | .hljs-emphasis {
94 | font-style: italic;
95 | }
96 |
97 |
98 |
99 |
100 | `;
101 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/xt256.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 |
8 | /*
9 | xt256.css
10 |
11 | Contact: initbar [at] protonmail [dot] ch
12 | : github.com/initbar
13 | */
14 |
15 | .hljs {
16 | display: block;
17 | overflow-x: auto;
18 | color: #eaeaea;
19 | background: #000;
20 | padding: 0.5em;
21 | }
22 |
23 | .hljs-subst {
24 | color: #eaeaea;
25 | }
26 |
27 | .hljs-emphasis {
28 | font-style: italic;
29 | }
30 |
31 | .hljs-strong {
32 | font-weight: bold;
33 | }
34 |
35 | .hljs-builtin-name,
36 | .hljs-type {
37 | color: #eaeaea;
38 | }
39 |
40 | .hljs-params {
41 | color: #da0000;
42 | }
43 |
44 | .hljs-literal,
45 | .hljs-number,
46 | .hljs-name {
47 | color: #ff0000;
48 | font-weight: bolder;
49 | }
50 |
51 | .hljs-comment {
52 | color: #969896;
53 | }
54 |
55 | .hljs-selector-id,
56 | .hljs-quote {
57 | color: #00ffff;
58 | }
59 |
60 | .hljs-template-variable,
61 | .hljs-variable,
62 | .hljs-title {
63 | color: #00ffff;
64 | font-weight: bold;
65 | }
66 |
67 | .hljs-selector-class,
68 | .hljs-keyword,
69 | .hljs-symbol {
70 | color: #fff000;
71 | }
72 |
73 | .hljs-string,
74 | .hljs-bullet {
75 | color: #00ff00;
76 | }
77 |
78 | .hljs-tag,
79 | .hljs-section {
80 | color: #000fff;
81 | }
82 |
83 | .hljs-selector-tag {
84 | color: #000fff;
85 | font-weight: bold;
86 | }
87 |
88 | .hljs-attribute,
89 | .hljs-built_in,
90 | .hljs-regexp,
91 | .hljs-link {
92 | color: #ff00ff;
93 | }
94 |
95 | .hljs-meta {
96 | color: #fff;
97 | font-weight: bolder;
98 | }
99 |
100 |
101 |
102 |
103 | `;
104 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/obsidian.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /**
8 | * Obsidian style
9 | * ported by Alexander Marenin (http://github.com/ioncreature)
10 | */
11 |
12 | .hljs {
13 | display: block;
14 | overflow-x: auto;
15 | padding: 0.5em;
16 | background: #282b2e;
17 | }
18 |
19 | .hljs-keyword,
20 | .hljs-selector-tag,
21 | .hljs-literal,
22 | .hljs-selector-id {
23 | color: #93c763;
24 | }
25 |
26 | .hljs-number {
27 | color: #ffcd22;
28 | }
29 |
30 | .hljs {
31 | color: #e0e2e4;
32 | }
33 |
34 | .hljs-attribute {
35 | color: #668bb0;
36 | }
37 |
38 | .hljs-code,
39 | .hljs-class .hljs-title,
40 | .hljs-section {
41 | color: white;
42 | }
43 |
44 | .hljs-regexp,
45 | .hljs-link {
46 | color: #d39745;
47 | }
48 |
49 | .hljs-meta {
50 | color: #557182;
51 | }
52 |
53 | .hljs-tag,
54 | .hljs-name,
55 | .hljs-bullet,
56 | .hljs-subst,
57 | .hljs-emphasis,
58 | .hljs-type,
59 | .hljs-built_in,
60 | .hljs-selector-attr,
61 | .hljs-selector-pseudo,
62 | .hljs-addition,
63 | .hljs-variable,
64 | .hljs-template-tag,
65 | .hljs-template-variable {
66 | color: #8cbbad;
67 | }
68 |
69 | .hljs-string,
70 | .hljs-symbol {
71 | color: #ec7600;
72 | }
73 |
74 | .hljs-comment,
75 | .hljs-quote,
76 | .hljs-deletion {
77 | color: #818e96;
78 | }
79 |
80 | .hljs-selector-class {
81 | color: #A082BD
82 | }
83 |
84 | .hljs-keyword,
85 | .hljs-selector-tag,
86 | .hljs-literal,
87 | .hljs-doctag,
88 | .hljs-title,
89 | .hljs-section,
90 | .hljs-type,
91 | .hljs-name,
92 | .hljs-strong {
93 | font-weight: bold;
94 | }
95 |
96 |
97 |
98 |
99 | `;
100 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/foundation.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Description: Foundation 4 docs style for highlight.js
9 | Author: Dan Allen
10 | Website: http://foundation.zurb.com/docs/
11 | Version: 1.0
12 | Date: 2013-04-02
13 | */
14 |
15 | .hljs {
16 | display: block;
17 | overflow-x: auto;
18 | padding: 0.5em;
19 | background: #eee; color: black;
20 | }
21 |
22 | .hljs-link,
23 | .hljs-emphasis,
24 | .hljs-attribute,
25 | .hljs-addition {
26 | color: #070;
27 | }
28 |
29 | .hljs-emphasis {
30 | font-style: italic;
31 | }
32 |
33 | .hljs-strong,
34 | .hljs-string,
35 | .hljs-deletion {
36 | color: #d14;
37 | }
38 |
39 | .hljs-strong {
40 | font-weight: bold;
41 | }
42 |
43 | .hljs-quote,
44 | .hljs-comment {
45 | color: #998;
46 | font-style: italic;
47 | }
48 |
49 | .hljs-section,
50 | .hljs-title {
51 | color: #900;
52 | }
53 |
54 | .hljs-class .hljs-title,
55 | .hljs-type {
56 | color: #458;
57 | }
58 |
59 | .hljs-variable,
60 | .hljs-template-variable {
61 | color: #336699;
62 | }
63 |
64 | .hljs-bullet {
65 | color: #997700;
66 | }
67 |
68 | .hljs-meta {
69 | color: #3344bb;
70 | }
71 |
72 | .hljs-code,
73 | .hljs-number,
74 | .hljs-literal,
75 | .hljs-keyword,
76 | .hljs-selector-tag {
77 | color: #099;
78 | }
79 |
80 | .hljs-regexp {
81 | background-color: #fff0ff;
82 | color: #880088;
83 | }
84 |
85 | .hljs-symbol {
86 | color: #990073;
87 | }
88 |
89 | .hljs-tag,
90 | .hljs-name,
91 | .hljs-selector-id,
92 | .hljs-selector-class {
93 | color: #007700;
94 | }
95 |
96 |
97 |
98 |
99 | `;
100 |
--------------------------------------------------------------------------------
/packages/example-vue/components/MyButton/MyButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 | ## Vue docs blocks
14 |
15 | This docs are inside `MyButton.vue` component.
16 |
17 | ### :smile: Usage
18 |
19 | Buttons allow users to take actions, and make choices, with a single tap. Supports all default HTML Button properties. See Material Design Button for UI/UX information.
20 |
21 | Button variants could be imported separately.
22 |
23 | ```js
24 | import { OutlinedButton, ContainedButton, TextButton } from 'Button';
25 | ```
26 |
27 |
28 |
29 |
30 |
31 |
43 |
44 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withCustomPreview.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Button from '../components/Button';
5 |
6 | import ButtonReadme from '../components/Button/README.md';
7 | import ButtonUsage from '../components/Button/USAGE.md';
8 |
9 | storiesOf('Custom Preview', module)
10 | .addParameters({
11 | readme: {
12 | content: ButtonReadme,
13 | StoryPreview: ({ children }) => (
14 |
27 | ),
28 | DocPreview: ({ children }) => (
29 |
36 | {children}
37 |
38 | ),
39 | HeaderPreview: ({ children }) => (
40 |
46 | {children}
47 |
48 | ),
49 | FooterPreview: ({ children }) => (
50 |
56 | {children}
57 |
58 | ),
59 | },
60 | })
61 | .add('Button', () => );
62 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-cave-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Cave Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Cave Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #7e7887;
15 | }
16 |
17 | /* Atelier-Cave Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-regexp,
22 | .hljs-link,
23 | .hljs-tag,
24 | .hljs-name,
25 | .hljs-selector-id,
26 | .hljs-selector-class {
27 | color: #be4678;
28 | }
29 |
30 | /* Atelier-Cave Orange */
31 | .hljs-number,
32 | .hljs-meta,
33 | .hljs-built_in,
34 | .hljs-builtin-name,
35 | .hljs-literal,
36 | .hljs-type,
37 | .hljs-params {
38 | color: #aa573c;
39 | }
40 |
41 | /* Atelier-Cave Green */
42 | .hljs-string,
43 | .hljs-symbol,
44 | .hljs-bullet {
45 | color: #2a9292;
46 | }
47 |
48 | /* Atelier-Cave Blue */
49 | .hljs-title,
50 | .hljs-section {
51 | color: #576ddb;
52 | }
53 |
54 | /* Atelier-Cave Purple */
55 | .hljs-keyword,
56 | .hljs-selector-tag {
57 | color: #955ae7;
58 | }
59 |
60 | .hljs-deletion,
61 | .hljs-addition {
62 | color: #19171c;
63 | display: inline-block;
64 | width: 100%;
65 | }
66 |
67 | .hljs-deletion {
68 | background-color: #be4678;
69 | }
70 |
71 | .hljs-addition {
72 | background-color: #2a9292;
73 | }
74 |
75 | .hljs {
76 | display: block;
77 | overflow-x: auto;
78 | background: #19171c;
79 | color: #8b8792;
80 | padding: 0.5em;
81 | }
82 |
83 | .hljs-emphasis {
84 | font-style: italic;
85 | }
86 |
87 | .hljs-strong {
88 | font-weight: bold;
89 | }
90 |
91 |
92 |
93 |
94 | `;
95 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/an-old-hope.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | An Old Hope – Star Wars Syntax (c) Gustavo Costa
10 | Original theme - Ocean Dark Theme – by https://github.com/gavsiu
11 | Based on Jesse Leite's Atom syntax theme 'An Old Hope' – https://github.com/JesseLeite/an-old-hope-syntax-atom
12 |
13 | */
14 |
15 | /* Death Star Comment */
16 | .hljs-comment,
17 | .hljs-quote
18 | {
19 | color: #B6B18B;
20 | }
21 |
22 | /* Darth Vader */
23 | .hljs-variable,
24 | .hljs-template-variable,
25 | .hljs-tag,
26 | .hljs-name,
27 | .hljs-selector-id,
28 | .hljs-selector-class,
29 | .hljs-regexp,
30 | .hljs-deletion
31 | {
32 | color: #EB3C54;
33 | }
34 |
35 | /* Threepio */
36 | .hljs-number,
37 | .hljs-built_in,
38 | .hljs-builtin-name,
39 | .hljs-literal,
40 | .hljs-type,
41 | .hljs-params,
42 | .hljs-meta,
43 | .hljs-link
44 | {
45 | color: #E7CE56;
46 | }
47 |
48 | /* Luke Skywalker */
49 | .hljs-attribute
50 | {
51 | color: #EE7C2B;
52 | }
53 |
54 | /* Obi Wan Kenobi */
55 | .hljs-string,
56 | .hljs-symbol,
57 | .hljs-bullet,
58 | .hljs-addition
59 | {
60 | color: #4FB4D7;
61 | }
62 |
63 | /* Yoda */
64 | .hljs-title,
65 | .hljs-section
66 | {
67 | color: #78BB65;
68 | }
69 |
70 | /* Mace Windu */
71 | .hljs-keyword,
72 | .hljs-selector-tag
73 | {
74 | color: #B45EA4;
75 | }
76 |
77 | /* Millenium Falcon */
78 | .hljs
79 | {
80 | display: block;
81 | overflow-x: auto;
82 | background: #1C1D21;
83 | color: #c0c5ce;
84 | padding: 0.5em;
85 | }
86 |
87 | .hljs-emphasis
88 | {
89 | font-style: italic;
90 | }
91 |
92 | .hljs-strong
93 | {
94 | font-weight: bold;
95 | }
96 |
97 |
98 |
99 |
100 | `;
101 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/docco.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 | Docco style used in http://jashkenas.github.com/docco/ converted by Simon Madine (@thingsinjars)
9 | */
10 |
11 | .hljs {
12 | display: block;
13 | overflow-x: auto;
14 | padding: 0.5em;
15 | color: #000;
16 | background: #f8f8ff;
17 | }
18 |
19 | .hljs-comment,
20 | .hljs-quote {
21 | color: #408080;
22 | font-style: italic;
23 | }
24 |
25 | .hljs-keyword,
26 | .hljs-selector-tag,
27 | .hljs-literal,
28 | .hljs-subst {
29 | color: #954121;
30 | }
31 |
32 | .hljs-number {
33 | color: #40a070;
34 | }
35 |
36 | .hljs-string,
37 | .hljs-doctag {
38 | color: #219161;
39 | }
40 |
41 | .hljs-selector-id,
42 | .hljs-selector-class,
43 | .hljs-section,
44 | .hljs-type {
45 | color: #19469d;
46 | }
47 |
48 | .hljs-params {
49 | color: #00f;
50 | }
51 |
52 | .hljs-title {
53 | color: #458;
54 | font-weight: bold;
55 | }
56 |
57 | .hljs-tag,
58 | .hljs-name,
59 | .hljs-attribute {
60 | color: #000080;
61 | font-weight: normal;
62 | }
63 |
64 | .hljs-variable,
65 | .hljs-template-variable {
66 | color: #008080;
67 | }
68 |
69 | .hljs-regexp,
70 | .hljs-link {
71 | color: #b68;
72 | }
73 |
74 | .hljs-symbol,
75 | .hljs-bullet {
76 | color: #990073;
77 | }
78 |
79 | .hljs-built_in,
80 | .hljs-builtin-name {
81 | color: #0086b3;
82 | }
83 |
84 | .hljs-meta {
85 | color: #999;
86 | font-weight: bold;
87 | }
88 |
89 | .hljs-deletion {
90 | background: #fdd;
91 | }
92 |
93 | .hljs-addition {
94 | background: #dfd;
95 | }
96 |
97 | .hljs-emphasis {
98 | font-style: italic;
99 | }
100 |
101 | .hljs-strong {
102 | font-weight: bold;
103 | }
104 |
105 |
106 |
107 |
108 | `;
109 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-cave-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Cave Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Cave Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #655f6d;
15 | }
16 |
17 | /* Atelier-Cave Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-name,
27 | .hljs-selector-id,
28 | .hljs-selector-class {
29 | color: #be4678;
30 | }
31 |
32 | /* Atelier-Cave Orange */
33 | .hljs-number,
34 | .hljs-meta,
35 | .hljs-built_in,
36 | .hljs-builtin-name,
37 | .hljs-literal,
38 | .hljs-type,
39 | .hljs-params {
40 | color: #aa573c;
41 | }
42 |
43 | /* Atelier-Cave Green */
44 | .hljs-string,
45 | .hljs-symbol,
46 | .hljs-bullet {
47 | color: #2a9292;
48 | }
49 |
50 | /* Atelier-Cave Blue */
51 | .hljs-title,
52 | .hljs-section {
53 | color: #576ddb;
54 | }
55 |
56 | /* Atelier-Cave Purple */
57 | .hljs-keyword,
58 | .hljs-selector-tag {
59 | color: #955ae7;
60 | }
61 |
62 | .hljs-deletion,
63 | .hljs-addition {
64 | color: #19171c;
65 | display: inline-block;
66 | width: 100%;
67 | }
68 |
69 | .hljs-deletion {
70 | background-color: #be4678;
71 | }
72 |
73 | .hljs-addition {
74 | background-color: #2a9292;
75 | }
76 |
77 | .hljs {
78 | display: block;
79 | overflow-x: auto;
80 | background: #efecf4;
81 | color: #585260;
82 | padding: 0.5em;
83 | }
84 |
85 | .hljs-emphasis {
86 | font-style: italic;
87 | }
88 |
89 | .hljs-strong {
90 | font-weight: bold;
91 | }
92 |
93 |
94 |
95 |
96 | `;
97 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-estuary-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Estuary Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Estuary Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #878573;
15 | }
16 |
17 | /* Atelier-Estuary Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #ba6236;
29 | }
30 |
31 | /* Atelier-Estuary Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #ae7313;
40 | }
41 |
42 | /* Atelier-Estuary Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #7d9726;
47 | }
48 |
49 | /* Atelier-Estuary Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #36a166;
53 | }
54 |
55 | /* Atelier-Estuary Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #5f9182;
59 | }
60 |
61 | .hljs-deletion,
62 | .hljs-addition {
63 | color: #22221b;
64 | display: inline-block;
65 | width: 100%;
66 | }
67 |
68 | .hljs-deletion {
69 | background-color: #ba6236;
70 | }
71 |
72 | .hljs-addition {
73 | background-color: #7d9726;
74 | }
75 |
76 | .hljs {
77 | display: block;
78 | overflow-x: auto;
79 | background: #22221b;
80 | color: #929181;
81 | padding: 0.5em;
82 | }
83 |
84 | .hljs-emphasis {
85 | font-style: italic;
86 | }
87 |
88 | .hljs-strong {
89 | font-weight: bold;
90 | }
91 |
92 |
93 |
94 |
95 | `;
96 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-plateau-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Plateau Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Plateau Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #7e7777;
15 | }
16 |
17 | /* Atelier-Plateau Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #ca4949;
29 | }
30 |
31 | /* Atelier-Plateau Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #b45a3c;
40 | }
41 |
42 | /* Atelier-Plateau Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #4b8b8b;
47 | }
48 |
49 | /* Atelier-Plateau Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #7272ca;
53 | }
54 |
55 | /* Atelier-Plateau Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #8464c4;
59 | }
60 |
61 | .hljs-deletion,
62 | .hljs-addition {
63 | color: #1b1818;
64 | display: inline-block;
65 | width: 100%;
66 | }
67 |
68 | .hljs-deletion {
69 | background-color: #ca4949;
70 | }
71 |
72 | .hljs-addition {
73 | background-color: #4b8b8b;
74 | }
75 |
76 | .hljs {
77 | display: block;
78 | overflow-x: auto;
79 | background: #1b1818;
80 | color: #8a8585;
81 | padding: 0.5em;
82 | }
83 |
84 | .hljs-emphasis {
85 | font-style: italic;
86 | }
87 |
88 | .hljs-strong {
89 | font-weight: bold;
90 | }
91 |
92 |
93 |
94 |
95 | `;
96 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-savanna-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Savanna Dark - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Savanna Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #78877d;
15 | }
16 |
17 | /* Atelier-Savanna Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #b16139;
29 | }
30 |
31 | /* Atelier-Savanna Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #9f713c;
40 | }
41 |
42 | /* Atelier-Savanna Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #489963;
47 | }
48 |
49 | /* Atelier-Savanna Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #478c90;
53 | }
54 |
55 | /* Atelier-Savanna Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #55859b;
59 | }
60 |
61 | .hljs-deletion,
62 | .hljs-addition {
63 | color: #171c19;
64 | display: inline-block;
65 | width: 100%;
66 | }
67 |
68 | .hljs-deletion {
69 | background-color: #b16139;
70 | }
71 |
72 | .hljs-addition {
73 | background-color: #489963;
74 | }
75 |
76 | .hljs {
77 | display: block;
78 | overflow-x: auto;
79 | background: #171c19;
80 | color: #87928a;
81 | padding: 0.5em;
82 | }
83 |
84 | .hljs-emphasis {
85 | font-style: italic;
86 | }
87 |
88 | .hljs-strong {
89 | font-weight: bold;
90 | }
91 |
92 |
93 |
94 |
95 | `;
96 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-estuary-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Estuary Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Estuary Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #6c6b5a;
15 | }
16 |
17 | /* Atelier-Estuary Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #ba6236;
29 | }
30 |
31 | /* Atelier-Estuary Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #ae7313;
40 | }
41 |
42 | /* Atelier-Estuary Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #7d9726;
47 | }
48 |
49 | /* Atelier-Estuary Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #36a166;
53 | }
54 |
55 | /* Atelier-Estuary Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #5f9182;
59 | }
60 |
61 | .hljs-deletion,
62 | .hljs-addition {
63 | color: #22221b;
64 | display: inline-block;
65 | width: 100%;
66 | }
67 |
68 | .hljs-deletion {
69 | background-color: #ba6236;
70 | }
71 |
72 | .hljs-addition {
73 | background-color: #7d9726;
74 | }
75 |
76 | .hljs {
77 | display: block;
78 | overflow-x: auto;
79 | background: #f4f3ec;
80 | color: #5f5e4e;
81 | padding: 0.5em;
82 | }
83 |
84 | .hljs-emphasis {
85 | font-style: italic;
86 | }
87 |
88 | .hljs-strong {
89 | font-weight: bold;
90 | }
91 |
92 |
93 |
94 |
95 | `;
96 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-plateau-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Plateau Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Plateau Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #655d5d;
15 | }
16 |
17 | /* Atelier-Plateau Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #ca4949;
29 | }
30 |
31 | /* Atelier-Plateau Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #b45a3c;
40 | }
41 |
42 | /* Atelier-Plateau Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #4b8b8b;
47 | }
48 |
49 | /* Atelier-Plateau Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #7272ca;
53 | }
54 |
55 | /* Atelier-Plateau Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #8464c4;
59 | }
60 |
61 | .hljs-deletion,
62 | .hljs-addition {
63 | color: #1b1818;
64 | display: inline-block;
65 | width: 100%;
66 | }
67 |
68 | .hljs-deletion {
69 | background-color: #ca4949;
70 | }
71 |
72 | .hljs-addition {
73 | background-color: #4b8b8b;
74 | }
75 |
76 | .hljs {
77 | display: block;
78 | overflow-x: auto;
79 | background: #f4ecec;
80 | color: #585050;
81 | padding: 0.5em;
82 | }
83 |
84 | .hljs-emphasis {
85 | font-style: italic;
86 | }
87 |
88 | .hljs-strong {
89 | font-weight: bold;
90 | }
91 |
92 |
93 |
94 |
95 | `;
96 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atelier-savanna-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* Base16 Atelier Savanna Light - Theme */
8 | /* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna) */
9 | /* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
10 |
11 | /* Atelier-Savanna Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #5f6d64;
15 | }
16 |
17 | /* Atelier-Savanna Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-name,
23 | .hljs-regexp,
24 | .hljs-link,
25 | .hljs-name,
26 | .hljs-selector-id,
27 | .hljs-selector-class {
28 | color: #b16139;
29 | }
30 |
31 | /* Atelier-Savanna Orange */
32 | .hljs-number,
33 | .hljs-meta,
34 | .hljs-built_in,
35 | .hljs-builtin-name,
36 | .hljs-literal,
37 | .hljs-type,
38 | .hljs-params {
39 | color: #9f713c;
40 | }
41 |
42 | /* Atelier-Savanna Green */
43 | .hljs-string,
44 | .hljs-symbol,
45 | .hljs-bullet {
46 | color: #489963;
47 | }
48 |
49 | /* Atelier-Savanna Blue */
50 | .hljs-title,
51 | .hljs-section {
52 | color: #478c90;
53 | }
54 |
55 | /* Atelier-Savanna Purple */
56 | .hljs-keyword,
57 | .hljs-selector-tag {
58 | color: #55859b;
59 | }
60 |
61 | .hljs-deletion,
62 | .hljs-addition {
63 | color: #171c19;
64 | display: inline-block;
65 | width: 100%;
66 | }
67 |
68 | .hljs-deletion {
69 | background-color: #b16139;
70 | }
71 |
72 | .hljs-addition {
73 | background-color: #489963;
74 | }
75 |
76 | .hljs {
77 | display: block;
78 | overflow-x: auto;
79 | background: #ecf4ee;
80 | color: #526057;
81 | padding: 0.5em;
82 | }
83 |
84 | .hljs-emphasis {
85 | font-style: italic;
86 | }
87 |
88 | .hljs-strong {
89 | font-weight: bold;
90 | }
91 |
92 |
93 |
94 |
95 | `;
96 |
--------------------------------------------------------------------------------
/packages/storybook-readme/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "storybook-readme",
3 | "license": "MIT",
4 | "private": false,
5 | "version": "5.0.9",
6 | "description": "Storybook addon to show components README (for React and Vue)",
7 | "main": "index.js",
8 | "homepage": "https://github.com/tuchk4/storybook-readme",
9 | "bugs": "https://github.com/tuchk4/storybook-readme/issues",
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/tuchk4/storybook-readme"
13 | },
14 | "dependencies": {
15 | "@storybook/components": "^5.0.6",
16 | "@storybook/core-events": "^5.0.6",
17 | "html-loader": "^0.5.5",
18 | "lodash": "^4.17.11",
19 | "markdown-loader": "^5.0.0",
20 | "marked": "^0.7.0",
21 | "node-emoji": "1.10.0",
22 | "prism-themes": "^1.1.0",
23 | "prismjs": "^1.16.0",
24 | "react-element-to-jsx-string": "^14.0.2",
25 | "string-raw": "^1.0.1",
26 | "vuex": "^3.1.0"
27 | },
28 | "devDependencies": {
29 | "@babel/cli": "7.2.3",
30 | "@babel/core": "7.3.4",
31 | "@storybook/addons": "^5.0.6",
32 | "babel-preset-react-app": "^7.0.1",
33 | "cross-env": "^5.1.3"
34 | },
35 | "files": [
36 | "backwardCompatibility",
37 | "components",
38 | "services",
39 | "styles",
40 | "vue",
41 | "html",
42 | "const.js",
43 | "index.js",
44 | "register.js",
45 | "registerWithPanelTitle.js",
46 | "with-docs.js",
47 | "with-readme.js"
48 | ],
49 | "scripts": {
50 | "prepublish": "npm run clear & cross-env NODE_ENV=production babel -d ./ ./src",
51 | "dev": "npm run clear & cross-env NODE_ENV=production babel -d ./ ./src --watch",
52 | "clear": "ls ./src | xargs rm -rf"
53 | },
54 | "keywords": [
55 | "storybook",
56 | "react-storybook",
57 | "docs",
58 | "readme"
59 | ],
60 | "author": "valeriy.sorokobatko@gmail.com"
61 | }
62 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/github.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | github.com style (c) Vasily Polovnyov
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | color: #333;
18 | background: #f8f8f8;
19 | }
20 |
21 | .hljs-comment,
22 | .hljs-quote {
23 | color: #998;
24 | font-style: italic;
25 | }
26 |
27 | .hljs-keyword,
28 | .hljs-selector-tag,
29 | .hljs-subst {
30 | color: #333;
31 | font-weight: bold;
32 | }
33 |
34 | .hljs-number,
35 | .hljs-literal,
36 | .hljs-variable,
37 | .hljs-template-variable,
38 | .hljs-tag .hljs-attr {
39 | color: #008080;
40 | }
41 |
42 | .hljs-string,
43 | .hljs-doctag {
44 | color: #d14;
45 | }
46 |
47 | .hljs-title,
48 | .hljs-section,
49 | .hljs-selector-id {
50 | color: #900;
51 | font-weight: bold;
52 | }
53 |
54 | .hljs-subst {
55 | font-weight: normal;
56 | }
57 |
58 | .hljs-type,
59 | .hljs-class .hljs-title {
60 | color: #458;
61 | font-weight: bold;
62 | }
63 |
64 | .hljs-tag,
65 | .hljs-name,
66 | .hljs-attribute {
67 | color: #000080;
68 | font-weight: normal;
69 | }
70 |
71 | .hljs-regexp,
72 | .hljs-link {
73 | color: #009926;
74 | }
75 |
76 | .hljs-symbol,
77 | .hljs-bullet {
78 | color: #990073;
79 | }
80 |
81 | .hljs-built_in,
82 | .hljs-builtin-name {
83 | color: #0086b3;
84 | }
85 |
86 | .hljs-meta {
87 | color: #999;
88 | font-weight: bold;
89 | }
90 |
91 | .hljs-deletion {
92 | background: #fdd;
93 | }
94 |
95 | .hljs-addition {
96 | background: #dfd;
97 | }
98 |
99 | .hljs-emphasis {
100 | font-style: italic;
101 | }
102 |
103 | .hljs-strong {
104 | font-weight: bold;
105 | }
106 |
107 |
108 |
109 |
110 | `;
111 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/idea.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Intellij Idea-like styling (c) Vasily Polovnyov
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | color: #000;
18 | background: #fff;
19 | }
20 |
21 | .hljs-subst,
22 | .hljs-title {
23 | font-weight: normal;
24 | color: #000;
25 | }
26 |
27 | .hljs-comment,
28 | .hljs-quote {
29 | color: #808080;
30 | font-style: italic;
31 | }
32 |
33 | .hljs-meta {
34 | color: #808000;
35 | }
36 |
37 | .hljs-tag {
38 | background: #efefef;
39 | }
40 |
41 | .hljs-section,
42 | .hljs-name,
43 | .hljs-literal,
44 | .hljs-keyword,
45 | .hljs-selector-tag,
46 | .hljs-type,
47 | .hljs-selector-id,
48 | .hljs-selector-class {
49 | font-weight: bold;
50 | color: #000080;
51 | }
52 |
53 | .hljs-attribute,
54 | .hljs-number,
55 | .hljs-regexp,
56 | .hljs-link {
57 | font-weight: bold;
58 | color: #0000ff;
59 | }
60 |
61 | .hljs-number,
62 | .hljs-regexp,
63 | .hljs-link {
64 | font-weight: normal;
65 | }
66 |
67 | .hljs-string {
68 | color: #008000;
69 | font-weight: bold;
70 | }
71 |
72 | .hljs-symbol,
73 | .hljs-bullet,
74 | .hljs-formula {
75 | color: #000;
76 | background: #d0eded;
77 | font-style: italic;
78 | }
79 |
80 | .hljs-doctag {
81 | text-decoration: underline;
82 | }
83 |
84 | .hljs-variable,
85 | .hljs-template-variable {
86 | color: #660e7a;
87 | }
88 |
89 | .hljs-addition {
90 | background: #baeeba;
91 | }
92 |
93 | .hljs-deletion {
94 | background: #ffc8bd;
95 | }
96 |
97 | .hljs-emphasis {
98 | font-style: italic;
99 | }
100 |
101 | .hljs-strong {
102 | font-weight: bold;
103 | }
104 |
105 |
106 |
107 |
108 | `;
109 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/default.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Original highlight.js style (c) Ivan Sagalaev
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #F0F0F0;
18 | }
19 |
20 |
21 | /* Base color: saturation 0; */
22 |
23 | .hljs,
24 | .hljs-subst {
25 | color: #444;
26 | }
27 |
28 | .hljs-comment {
29 | color: #888888;
30 | }
31 |
32 | .hljs-keyword,
33 | .hljs-attribute,
34 | .hljs-selector-tag,
35 | .hljs-meta-keyword,
36 | .hljs-doctag,
37 | .hljs-name {
38 | font-weight: bold;
39 | }
40 |
41 |
42 | /* User color: hue: 0 */
43 |
44 | .hljs-type,
45 | .hljs-string,
46 | .hljs-number,
47 | .hljs-selector-id,
48 | .hljs-selector-class,
49 | .hljs-quote,
50 | .hljs-template-tag,
51 | .hljs-deletion {
52 | color: #880000;
53 | }
54 |
55 | .hljs-title,
56 | .hljs-section {
57 | color: #880000;
58 | font-weight: bold;
59 | }
60 |
61 | .hljs-regexp,
62 | .hljs-symbol,
63 | .hljs-variable,
64 | .hljs-template-variable,
65 | .hljs-link,
66 | .hljs-selector-attr,
67 | .hljs-selector-pseudo {
68 | color: #BC6060;
69 | }
70 |
71 |
72 | /* Language color: hue: 90; */
73 |
74 | .hljs-literal {
75 | color: #78A960;
76 | }
77 |
78 | .hljs-built_in,
79 | .hljs-bullet,
80 | .hljs-code,
81 | .hljs-addition {
82 | color: #397300;
83 | }
84 |
85 |
86 | /* Meta color: hue: 200 */
87 |
88 | .hljs-meta {
89 | color: #1f7199;
90 | }
91 |
92 | .hljs-meta-string {
93 | color: #4d99bf;
94 | }
95 |
96 |
97 | /* Misc effects */
98 |
99 | .hljs-emphasis {
100 | font-style: italic;
101 | }
102 |
103 | .hljs-strong {
104 | font-weight: bold;
105 | }
106 |
107 |
108 |
109 |
110 | `;
111 |
--------------------------------------------------------------------------------
/packages/example-react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-react",
3 | "private": true,
4 | "version": "5.0.9",
5 | "license": "MIT",
6 | "scripts": {
7 | "prepublishOnly": "echo \"Error: not allowed to publish\" && exit 1",
8 | "storybook": "cross-env NODE_ENV=development start-storybook -p 6005",
9 | "deploy-storybook": "storybook-to-ghpages",
10 | "test": "jest"
11 | },
12 | "dependencies": {
13 | "@babel/core": "^7.4.4",
14 | "@babel/plugin-syntax-dynamic-import": "^7.2.0",
15 | "@babel/plugin-transform-modules-commonjs": "7.2.0",
16 | "@babel/preset-env": "^7.3.4",
17 | "@storybook/addon-actions": "5.1.1",
18 | "@storybook/addon-info": "5.1.1",
19 | "@storybook/addon-knobs": "5.1.1",
20 | "@storybook/addon-notes": "5.1.1",
21 | "@storybook/addon-storyshots": "5.1.1",
22 | "@storybook/addons": "5.1.1",
23 | "@storybook/html": "^5.0.11",
24 | "@storybook/react": "5.1.1",
25 | "@storybook/storybook-deployer": "^2.3.0",
26 | "babel-loader": "^8.0.2",
27 | "cross-env": "^5.1.3",
28 | "file-loader": "^3.0.1",
29 | "html-loader": "^0.5.5",
30 | "jest": "^24.1.0",
31 | "markdown-loader": "^5.0.0",
32 | "markdown-loader-jest": "^0.1.1",
33 | "prop-types": "^15.7.2",
34 | "react": "^16.8.3",
35 | "react-dom": "^16.8.3",
36 | "react-test-renderer": "^16.8.3",
37 | "storybook-readme": "^5.0.9",
38 | "styled-components": "^4.1.3"
39 | },
40 | "jest": {
41 | "testURL": "http://localhost",
42 | "transform": {
43 | "^.+\\.md?$": "markdown-loader-jest",
44 | "^.+\\.js?$": "babel-jest"
45 | },
46 | "moduleNameMapper": {
47 | "@storybook/addons": "/../storybook-readme/node_modules/@storybook/addons"
48 | }
49 | },
50 | "devDependencies": {
51 | "husky": "^2.2.0",
52 | "lerna": "^3.8.0",
53 | "lint-staged": "^8.1.5",
54 | "prettier": "^1.17.0"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/sunburst.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Sunburst-like style (c) Vasily Polovnyov
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #000;
18 | color: #f8f8f8;
19 | }
20 |
21 | .hljs-comment,
22 | .hljs-quote {
23 | color: #aeaeae;
24 | font-style: italic;
25 | }
26 |
27 | .hljs-keyword,
28 | .hljs-selector-tag,
29 | .hljs-type {
30 | color: #e28964;
31 | }
32 |
33 | .hljs-string {
34 | color: #65b042;
35 | }
36 |
37 | .hljs-subst {
38 | color: #daefa3;
39 | }
40 |
41 | .hljs-regexp,
42 | .hljs-link {
43 | color: #e9c062;
44 | }
45 |
46 | .hljs-title,
47 | .hljs-section,
48 | .hljs-tag,
49 | .hljs-name {
50 | color: #89bdff;
51 | }
52 |
53 | .hljs-class .hljs-title,
54 | .hljs-doctag {
55 | text-decoration: underline;
56 | }
57 |
58 | .hljs-symbol,
59 | .hljs-bullet,
60 | .hljs-number {
61 | color: #3387cc;
62 | }
63 |
64 | .hljs-params,
65 | .hljs-variable,
66 | .hljs-template-variable {
67 | color: #3e87e3;
68 | }
69 |
70 | .hljs-attribute {
71 | color: #cda869;
72 | }
73 |
74 | .hljs-meta {
75 | color: #8996a8;
76 | }
77 |
78 | .hljs-formula {
79 | background-color: #0e2231;
80 | color: #f8f8f8;
81 | font-style: italic;
82 | }
83 |
84 | .hljs-addition {
85 | background-color: #253b22;
86 | color: #f8f8f8;
87 | }
88 |
89 | .hljs-deletion {
90 | background-color: #420e09;
91 | color: #f8f8f8;
92 | }
93 |
94 | .hljs-selector-class {
95 | color: #9b703f;
96 | }
97 |
98 | .hljs-selector-id {
99 | color: #8b98ab;
100 | }
101 |
102 | .hljs-emphasis {
103 | font-style: italic;
104 | }
105 |
106 | .hljs-strong {
107 | font-weight: bold;
108 | }
109 |
110 |
111 |
112 |
113 | `;
114 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/xcode.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | XCode style (c) Angel Garcia
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #fff;
18 | color: black;
19 | }
20 |
21 | /* Gray DOCTYPE selectors like WebKit */
22 | .xml .hljs-meta {
23 | color: #c0c0c0;
24 | }
25 |
26 | .hljs-comment,
27 | .hljs-quote {
28 | color: #007400;
29 | }
30 |
31 | .hljs-tag,
32 | .hljs-attribute,
33 | .hljs-keyword,
34 | .hljs-selector-tag,
35 | .hljs-literal,
36 | .hljs-name {
37 | color: #aa0d91;
38 | }
39 |
40 | .hljs-variable,
41 | .hljs-template-variable {
42 | color: #3F6E74;
43 | }
44 |
45 | .hljs-code,
46 | .hljs-string,
47 | .hljs-meta-string {
48 | color: #c41a16;
49 | }
50 |
51 | .hljs-regexp,
52 | .hljs-link {
53 | color: #0E0EFF;
54 | }
55 |
56 | .hljs-title,
57 | .hljs-symbol,
58 | .hljs-bullet,
59 | .hljs-number {
60 | color: #1c00cf;
61 | }
62 |
63 | .hljs-section,
64 | .hljs-meta {
65 | color: #643820;
66 | }
67 |
68 |
69 | .hljs-class .hljs-title,
70 | .hljs-type,
71 | .hljs-built_in,
72 | .hljs-builtin-name,
73 | .hljs-params {
74 | color: #5c2699;
75 | }
76 |
77 | .hljs-attr {
78 | color: #836C28;
79 | }
80 |
81 | .hljs-subst {
82 | color: #000;
83 | }
84 |
85 | .hljs-formula {
86 | background-color: #eee;
87 | font-style: italic;
88 | }
89 |
90 | .hljs-addition {
91 | background-color: #baeeba;
92 | }
93 |
94 | .hljs-deletion {
95 | background-color: #ffc8bd;
96 | }
97 |
98 | .hljs-selector-id,
99 | .hljs-selector-class {
100 | color: #9b703f;
101 | }
102 |
103 | .hljs-doctag,
104 | .hljs-strong {
105 | font-weight: bold;
106 | }
107 |
108 | .hljs-emphasis {
109 | font-style: italic;
110 | }
111 |
112 |
113 |
114 |
115 | `;
116 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atom-one-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Atom One Dark by Daniel Gamage
10 | Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
11 |
12 | base: #282c34
13 | mono-1: #abb2bf
14 | mono-2: #818896
15 | mono-3: #5c6370
16 | hue-1: #56b6c2
17 | hue-2: #61aeee
18 | hue-3: #c678dd
19 | hue-4: #98c379
20 | hue-5: #e06c75
21 | hue-5-2: #be5046
22 | hue-6: #d19a66
23 | hue-6-2: #e6c07b
24 |
25 | */
26 |
27 | .hljs {
28 | display: block;
29 | overflow-x: auto;
30 | padding: 0.5em;
31 | color: #abb2bf;
32 | background: #282c34;
33 | }
34 |
35 | .hljs-comment,
36 | .hljs-quote {
37 | color: #5c6370;
38 | font-style: italic;
39 | }
40 |
41 | .hljs-doctag,
42 | .hljs-keyword,
43 | .hljs-formula {
44 | color: #c678dd;
45 | }
46 |
47 | .hljs-section,
48 | .hljs-name,
49 | .hljs-selector-tag,
50 | .hljs-deletion,
51 | .hljs-subst {
52 | color: #e06c75;
53 | }
54 |
55 | .hljs-literal {
56 | color: #56b6c2;
57 | }
58 |
59 | .hljs-string,
60 | .hljs-regexp,
61 | .hljs-addition,
62 | .hljs-attribute,
63 | .hljs-meta-string {
64 | color: #98c379;
65 | }
66 |
67 | .hljs-built_in,
68 | .hljs-class .hljs-title {
69 | color: #e6c07b;
70 | }
71 |
72 | .hljs-attr,
73 | .hljs-variable,
74 | .hljs-template-variable,
75 | .hljs-type,
76 | .hljs-selector-class,
77 | .hljs-selector-attr,
78 | .hljs-selector-pseudo,
79 | .hljs-number {
80 | color: #d19a66;
81 | }
82 |
83 | .hljs-symbol,
84 | .hljs-bullet,
85 | .hljs-link,
86 | .hljs-meta,
87 | .hljs-selector-id,
88 | .hljs-title {
89 | color: #61aeee;
90 | }
91 |
92 | .hljs-emphasis {
93 | font-style: italic;
94 | }
95 |
96 | .hljs-strong {
97 | font-weight: bold;
98 | }
99 |
100 | .hljs-link {
101 | text-decoration: underline;
102 | }
103 |
104 |
105 |
106 |
107 | `;
108 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atom-one-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Atom One Light by Daniel Gamage
10 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax
11 |
12 | base: #fafafa
13 | mono-1: #383a42
14 | mono-2: #686b77
15 | mono-3: #a0a1a7
16 | hue-1: #0184bb
17 | hue-2: #4078f2
18 | hue-3: #a626a4
19 | hue-4: #50a14f
20 | hue-5: #e45649
21 | hue-5-2: #c91243
22 | hue-6: #986801
23 | hue-6-2: #c18401
24 |
25 | */
26 |
27 | .hljs {
28 | display: block;
29 | overflow-x: auto;
30 | padding: 0.5em;
31 | color: #383a42;
32 | background: #fafafa;
33 | }
34 |
35 | .hljs-comment,
36 | .hljs-quote {
37 | color: #a0a1a7;
38 | font-style: italic;
39 | }
40 |
41 | .hljs-doctag,
42 | .hljs-keyword,
43 | .hljs-formula {
44 | color: #a626a4;
45 | }
46 |
47 | .hljs-section,
48 | .hljs-name,
49 | .hljs-selector-tag,
50 | .hljs-deletion,
51 | .hljs-subst {
52 | color: #e45649;
53 | }
54 |
55 | .hljs-literal {
56 | color: #0184bb;
57 | }
58 |
59 | .hljs-string,
60 | .hljs-regexp,
61 | .hljs-addition,
62 | .hljs-attribute,
63 | .hljs-meta-string {
64 | color: #50a14f;
65 | }
66 |
67 | .hljs-built_in,
68 | .hljs-class .hljs-title {
69 | color: #c18401;
70 | }
71 |
72 | .hljs-attr,
73 | .hljs-variable,
74 | .hljs-template-variable,
75 | .hljs-type,
76 | .hljs-selector-class,
77 | .hljs-selector-attr,
78 | .hljs-selector-pseudo,
79 | .hljs-number {
80 | color: #986801;
81 | }
82 |
83 | .hljs-symbol,
84 | .hljs-bullet,
85 | .hljs-link,
86 | .hljs-meta,
87 | .hljs-selector-id,
88 | .hljs-title {
89 | color: #4078f2;
90 | }
91 |
92 | .hljs-emphasis {
93 | font-style: italic;
94 | }
95 |
96 | .hljs-strong {
97 | font-weight: bold;
98 | }
99 |
100 | .hljs-link {
101 | text-decoration: underline;
102 | }
103 |
104 |
105 |
106 |
107 | `;
108 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/railscasts.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Railscasts-like style (c) Visoft, Inc. (Damien White)
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #232323;
18 | color: #e6e1dc;
19 | }
20 |
21 | .hljs-comment,
22 | .hljs-quote {
23 | color: #bc9458;
24 | font-style: italic;
25 | }
26 |
27 | .hljs-keyword,
28 | .hljs-selector-tag {
29 | color: #c26230;
30 | }
31 |
32 | .hljs-string,
33 | .hljs-number,
34 | .hljs-regexp,
35 | .hljs-variable,
36 | .hljs-template-variable {
37 | color: #a5c261;
38 | }
39 |
40 | .hljs-subst {
41 | color: #519f50;
42 | }
43 |
44 | .hljs-tag,
45 | .hljs-name {
46 | color: #e8bf6a;
47 | }
48 |
49 | .hljs-type {
50 | color: #da4939;
51 | }
52 |
53 |
54 | .hljs-symbol,
55 | .hljs-bullet,
56 | .hljs-built_in,
57 | .hljs-builtin-name,
58 | .hljs-attr,
59 | .hljs-link {
60 | color: #6d9cbe;
61 | }
62 |
63 | .hljs-params {
64 | color: #d0d0ff;
65 | }
66 |
67 | .hljs-attribute {
68 | color: #cda869;
69 | }
70 |
71 | .hljs-meta {
72 | color: #9b859d;
73 | }
74 |
75 | .hljs-title,
76 | .hljs-section {
77 | color: #ffc66d;
78 | }
79 |
80 | .hljs-addition {
81 | background-color: #144212;
82 | color: #e6e1dc;
83 | display: inline-block;
84 | width: 100%;
85 | }
86 |
87 | .hljs-deletion {
88 | background-color: #600;
89 | color: #e6e1dc;
90 | display: inline-block;
91 | width: 100%;
92 | }
93 |
94 | .hljs-selector-class {
95 | color: #9b703f;
96 | }
97 |
98 | .hljs-selector-id {
99 | color: #8b98ab;
100 | }
101 |
102 | .hljs-emphasis {
103 | font-style: italic;
104 | }
105 |
106 | .hljs-strong {
107 | font-weight: bold;
108 | }
109 |
110 | .hljs-link {
111 | text-decoration: underline;
112 | }
113 |
114 |
115 |
116 |
117 | `;
118 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/routeros.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | highlight.js style for Microtik RouterOS script
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #F0F0F0;
18 | }
19 |
20 | /* Base color: saturation 0; */
21 |
22 | .hljs,
23 | .hljs-subst {
24 | color: #444;
25 | }
26 |
27 | .hljs-comment {
28 | color: #888888;
29 | }
30 |
31 | .hljs-keyword,
32 | .hljs-selector-tag,
33 | .hljs-meta-keyword,
34 | .hljs-doctag,
35 | .hljs-name {
36 | font-weight: bold;
37 | }
38 |
39 | .hljs-attribute {
40 | color: #0E9A00;
41 | }
42 |
43 | .hljs-function {
44 | color: #99069A;
45 | }
46 |
47 | .hljs-builtin-name {
48 | color: #99069A;
49 | }
50 |
51 | /* User color: hue: 0 */
52 |
53 | .hljs-type,
54 | .hljs-string,
55 | .hljs-number,
56 | .hljs-selector-id,
57 | .hljs-selector-class,
58 | .hljs-quote,
59 | .hljs-template-tag,
60 | .hljs-deletion {
61 | color: #880000;
62 | }
63 |
64 | .hljs-title,
65 | .hljs-section {
66 | color: #880000;
67 | font-weight: bold;
68 | }
69 |
70 | .hljs-regexp,
71 | .hljs-symbol,
72 | .hljs-variable,
73 | .hljs-template-variable,
74 | .hljs-link,
75 | .hljs-selector-attr,
76 | .hljs-selector-pseudo {
77 | color: #BC6060;
78 | }
79 |
80 |
81 | /* Language color: hue: 90; */
82 |
83 | .hljs-literal {
84 | color: #78A960;
85 | }
86 |
87 | .hljs-built_in,
88 | .hljs-bullet,
89 | .hljs-code,
90 | .hljs-addition {
91 | color: #0C9A9A;
92 | }
93 |
94 |
95 | /* Meta color: hue: 200 */
96 |
97 | .hljs-meta {
98 | color: #1f7199;
99 | }
100 |
101 | .hljs-meta-string {
102 | color: #4d99bf;
103 | }
104 |
105 |
106 | /* Misc effects */
107 |
108 | .hljs-emphasis {
109 | font-style: italic;
110 | }
111 |
112 | .hljs-strong {
113 | font-weight: bold;
114 | }
115 |
116 |
117 |
118 |
119 | `;
120 |
--------------------------------------------------------------------------------
/packages/example-react/stories/withPropsTable/renderPropPattern.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | const RenderPropPattern = `
5 | # RenderProp Pattern
6 |
7 | Currently using RenderProp pattern in actual usage is very limited.
8 | It will only show the propTable of \`RenderProp Component\`. PropTable of
9 | actual component that is used inside of renderProp is not showing.
10 |
11 | ### From specific story
12 | \`\`\`javascript
13 | import {
14 | RenderPropComponent,
15 | DisplayMouseCoordinates,
16 | } from '../../components/PropTables/RenderPropComponent';
17 | storiesOf('PropsTable|More usages', module).add(
18 | 'RenderProp pattern',
19 | () => (
20 |
21 | {mouse => (
22 |
27 | )}
28 |
29 | ),
30 | {
31 | readme: {
32 | content: \`\`,
33 | },
34 | }
35 | );
36 | \`\`\`
37 |
38 | You can notice from below that propTable of \`RenderProp Component\`
39 | is only showing. (No propTable of \`DisplayMouseCoordinates\`)
40 |
41 | **Note**: Only \`RenderProp Component\` propTable is showing. No
42 | children components.
43 | `;
44 |
45 | import {
46 | RenderPropComponent,
47 | DisplayMouseCoordinates,
48 | } from '../../components/PropTables/RenderPropComponent';
49 |
50 | storiesOf('PropsTable|More usages', module).add(
51 | 'RenderProp pattern',
52 | () => (
53 |
54 | {mouse => (
55 |
60 | )}
61 |
62 | ),
63 | {
64 | readme: {
65 | content: `${RenderPropPattern}`,
66 | },
67 | }
68 | );
69 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/agate.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*!
8 | * Agate by Taufik Nurrohman
9 | * ----------------------------------------------------
10 | *
11 | * #ade5fc
12 | * #a2fca2
13 | * #c6b4f0
14 | * #d36363
15 | * #fcc28c
16 | * #fc9b9b
17 | * #ffa
18 | * #fff
19 | * #333
20 | * #62c8f3
21 | * #888
22 | *
23 | */
24 |
25 | .hljs {
26 | display: block;
27 | overflow-x: auto;
28 | padding: 0.5em;
29 | background: #333;
30 | color: white;
31 | }
32 |
33 | .hljs-name,
34 | .hljs-strong {
35 | font-weight: bold;
36 | }
37 |
38 | .hljs-code,
39 | .hljs-emphasis {
40 | font-style: italic;
41 | }
42 |
43 | .hljs-tag {
44 | color: #62c8f3;
45 | }
46 |
47 | .hljs-variable,
48 | .hljs-template-variable,
49 | .hljs-selector-id,
50 | .hljs-selector-class {
51 | color: #ade5fc;
52 | }
53 |
54 | .hljs-string,
55 | .hljs-bullet {
56 | color: #a2fca2;
57 | }
58 |
59 | .hljs-type,
60 | .hljs-title,
61 | .hljs-section,
62 | .hljs-attribute,
63 | .hljs-quote,
64 | .hljs-built_in,
65 | .hljs-builtin-name {
66 | color: #ffa;
67 | }
68 |
69 | .hljs-number,
70 | .hljs-symbol,
71 | .hljs-bullet {
72 | color: #d36363;
73 | }
74 |
75 | .hljs-keyword,
76 | .hljs-selector-tag,
77 | .hljs-literal {
78 | color: #fcc28c;
79 | }
80 |
81 | .hljs-comment,
82 | .hljs-deletion,
83 | .hljs-code {
84 | color: #888;
85 | }
86 |
87 | .hljs-regexp,
88 | .hljs-link {
89 | color: #c6b4f0;
90 | }
91 |
92 | .hljs-meta {
93 | color: #fc9b9b;
94 | }
95 |
96 | .hljs-deletion {
97 | background-color: #fc9b9b;
98 | color: #333;
99 | }
100 |
101 | .hljs-addition {
102 | background-color: #a2fca2;
103 | color: #333;
104 | }
105 |
106 | .hljs a {
107 | color: inherit;
108 | }
109 |
110 | .hljs a:focus,
111 | .hljs a:hover {
112 | color: inherit;
113 | text-decoration: underline;
114 | }
115 |
116 |
117 |
118 |
119 | `;
120 |
--------------------------------------------------------------------------------
/packages/example-vue/stories/withCustomPreview.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue';
2 |
3 | import MyButton from '../components/MyButton/MyButton.vue';
4 |
5 | import ButtonReadme from '../components/MyButton/README.md';
6 | import ButtonUsage from '../components/MyButton/USAGE.md';
7 |
8 | storiesOf('Custom Preview', module)
9 | .addParameters({
10 | readme: {
11 | content: ButtonReadme,
12 | StoryPreview: {
13 | data() {
14 | return {
15 | styles: {
16 | display: 'flex',
17 | alignItems: 'center',
18 | justifyContent: 'center',
19 | margin: '32px 0',
20 | border: '2px dashed #eee',
21 | padding: '16px',
22 | },
23 | };
24 | },
25 | template: `
`,
26 | },
27 | DocPreview: {
28 | data() {
29 | return {
30 | styles: {
31 | padding: '8px 32px',
32 | margin: '0 0 0 32px',
33 | borderLeft: '4px dashed #eee',
34 | },
35 | };
36 | },
37 | template: `
`,
38 | },
39 | HeaderPreview: {
40 | data() {
41 | return {
42 | styles: {
43 | margin: '0 0 32px 0',
44 | background: '#ffffab',
45 | },
46 | };
47 | },
48 | template: `
`,
49 | },
50 | FooterPreview: {
51 | data() {
52 | return {
53 | styles: {
54 | margin: '32px 0 0 0',
55 | background: 'rgba(171, 255, 176, 1)',
56 | },
57 | };
58 | },
59 | template: `
`,
60 | },
61 | },
62 | })
63 | .add('Button', () => {
64 | return {
65 | components: {
66 | MyButton,
67 | },
68 | template: `My Button`,
69 | };
70 | });
71 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/hybrid.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
10 |
11 | */
12 |
13 | /*background color*/
14 | .hljs {
15 | display: block;
16 | overflow-x: auto;
17 | padding: 0.5em;
18 | background: #1d1f21;
19 | }
20 |
21 | /*selection color*/
22 | .hljs::selection,
23 | .hljs span::selection {
24 | background: #373b41;
25 | }
26 |
27 | .hljs::-moz-selection,
28 | .hljs span::-moz-selection {
29 | background: #373b41;
30 | }
31 |
32 | /*foreground color*/
33 | .hljs {
34 | color: #c5c8c6;
35 | }
36 |
37 | /*color: fg_yellow*/
38 | .hljs-title,
39 | .hljs-name {
40 | color: #f0c674;
41 | }
42 |
43 | /*color: fg_comment*/
44 | .hljs-comment,
45 | .hljs-meta,
46 | .hljs-meta .hljs-keyword {
47 | color: #707880;
48 | }
49 |
50 | /*color: fg_red*/
51 | .hljs-number,
52 | .hljs-symbol,
53 | .hljs-literal,
54 | .hljs-deletion,
55 | .hljs-link {
56 | color: #cc6666
57 | }
58 |
59 | /*color: fg_green*/
60 | .hljs-string,
61 | .hljs-doctag,
62 | .hljs-addition,
63 | .hljs-regexp,
64 | .hljs-selector-attr,
65 | .hljs-selector-pseudo {
66 | color: #b5bd68;
67 | }
68 |
69 | /*color: fg_purple*/
70 | .hljs-attribute,
71 | .hljs-code,
72 | .hljs-selector-id {
73 | color: #b294bb;
74 | }
75 |
76 | /*color: fg_blue*/
77 | .hljs-keyword,
78 | .hljs-selector-tag,
79 | .hljs-bullet,
80 | .hljs-tag {
81 | color: #81a2be;
82 | }
83 |
84 | /*color: fg_aqua*/
85 | .hljs-subst,
86 | .hljs-variable,
87 | .hljs-template-tag,
88 | .hljs-template-variable {
89 | color: #8abeb7;
90 | }
91 |
92 | /*color: fg_orange*/
93 | .hljs-type,
94 | .hljs-built_in,
95 | .hljs-builtin-name,
96 | .hljs-quote,
97 | .hljs-section,
98 | .hljs-selector-class {
99 | color: #de935f;
100 | }
101 |
102 | .hljs-emphasis {
103 | font-style: italic;
104 | }
105 |
106 | .hljs-strong {
107 | font-weight: bold;
108 | }
109 |
110 |
111 |
112 |
113 | `;
114 |
--------------------------------------------------------------------------------
/packages/example-vue/stories/withContentDocs.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue';
2 |
3 | import MyButton from '../components/MyButton/MyButton.vue';
4 |
5 | import ButtonReadme from '../components/MyButton/README.md';
6 | import ButtonUsage from '../components/MyButton/USAGE.md';
7 |
8 | storiesOf('Content docs', module)
9 | .addParameters({
10 | readme: {
11 | content: ButtonReadme,
12 | },
13 | })
14 | .add(
15 | 'Button',
16 | () => {
17 | return {
18 | components: {
19 | MyButton,
20 | },
21 | template: `My Button`,
22 | };
23 | },
24 | {
25 | readme: {
26 | content: `
27 | ## Sidebar docs
28 |
29 |
30 |
31 | \`sidebar\` added with \`addParameters\` will be applied for all stories in the same series.
32 | To override it - define \`sidebar\` at \`add\` method.
33 |
34 | \`\`\`js
35 | import README from './README.md';
36 | import CUSTOM_README from './CUSTOM_README.md';
37 |
38 | storiesOf('Sidebar docs', module)
39 | .addParameters({
40 | readme: {
41 | content: README,
42 | },
43 | })
44 | .add(..., {
45 | readme: {
46 | // will override
47 | content: CUSTOM_README,
48 | },
49 | })
50 | .add(...)
51 | .add(...)
52 | \`\`\`
53 | `,
54 | },
55 | }
56 | )
57 | .add('Alert Button', () => {
58 | return {
59 | components: {
60 | MyButton,
61 | },
62 | template: `My Button`,
63 | };
64 | })
65 | .add('Success Button', () => {
66 | return {
67 | components: {
68 | MyButton,
69 | },
70 | template: `My Button`,
71 | };
72 | })
73 | .add(
74 | 'Override Content docs',
75 | () => {
76 | return {
77 | components: {
78 | MyButton,
79 | },
80 | template: `My Button`,
81 | };
82 | },
83 | {
84 | readme: {
85 | content: `This \`md\` is overriden.`,
86 | },
87 | }
88 | );
89 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/shades-of-purple.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /**
8 | * Shades of Purple Theme — for Highlightjs.
9 | *
10 | * @author (c) Ahmad Awais
11 | * @link GitHub Repo → https://github.com/ahmadawais/Shades-of-Purple-HighlightJS
12 | * @version 1.5.0
13 | */
14 |
15 | .hljs {
16 | display: block;
17 | overflow-x: auto;
18 | /* Custom font is optional */
19 | /* font-family: 'Operator Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', 'monospace'; */
20 | line-height: 1.45;
21 | padding: 2rem;
22 | background: #2d2b57;
23 | font-weight: normal;
24 | }
25 |
26 | .hljs-title {
27 | color: #fad000;
28 | font-weight: normal;
29 | }
30 |
31 | .hljs-name {
32 | color: #a1feff;
33 | }
34 |
35 | .hljs-tag {
36 | color: #ffffff;
37 | }
38 |
39 | .hljs-attr {
40 | color: #f8d000;
41 | font-style: italic;
42 | }
43 |
44 | .hljs-built_in,
45 | .hljs-selector-tag,
46 | .hljs-section {
47 | color: #fb9e00;
48 | }
49 |
50 | .hljs-keyword {
51 | color: #fb9e00;
52 | }
53 |
54 | .hljs,
55 | .hljs-subst {
56 | color: #e3dfff;
57 | }
58 |
59 | .hljs-string,
60 | .hljs-attribute,
61 | .hljs-symbol,
62 | .hljs-bullet,
63 | .hljs-addition,
64 | .hljs-code,
65 | .hljs-regexp,
66 | .hljs-selector-class,
67 | .hljs-selector-attr,
68 | .hljs-selector-pseudo,
69 | .hljs-template-tag,
70 | .hljs-quote,
71 | .hljs-deletion {
72 | color: #4cd213;
73 | }
74 |
75 | .hljs-meta,
76 | .hljs-meta-string {
77 | color: #fb9e00;
78 | }
79 |
80 | .hljs-comment {
81 | color: #ac65ff;
82 | }
83 |
84 | .hljs-keyword,
85 | .hljs-selector-tag,
86 | .hljs-literal,
87 | .hljs-name,
88 | .hljs-strong {
89 | font-weight: normal;
90 | }
91 |
92 | .hljs-literal,
93 | .hljs-number {
94 | color: #fa658d;
95 | }
96 |
97 | .hljs-emphasis {
98 | font-style: italic;
99 | }
100 |
101 | .hljs-strong {
102 | font-weight: bold;
103 | }
104 |
105 |
106 |
107 |
108 | `;
109 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/atom-one-dark-reasonable.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | Atom One Dark With support for ReasonML by Gidi Morris, based off work by Daniel Gamage
10 |
11 | Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
12 |
13 | */
14 | .hljs {
15 | display: block;
16 | overflow-x: auto;
17 | padding: 0.5em;
18 | line-height: 1.3em;
19 | color: #abb2bf;
20 | background: #282c34;
21 | border-radius: 5px;
22 | }
23 | .hljs-keyword, .hljs-operator {
24 | color: #F92672;
25 | }
26 | .hljs-pattern-match {
27 | color: #F92672;
28 | }
29 | .hljs-pattern-match .hljs-constructor {
30 | color: #61aeee;
31 | }
32 | .hljs-function {
33 | color: #61aeee;
34 | }
35 | .hljs-function .hljs-params {
36 | color: #A6E22E;
37 | }
38 | .hljs-function .hljs-params .hljs-typing {
39 | color: #FD971F;
40 | }
41 | .hljs-module-access .hljs-module {
42 | color: #7e57c2;
43 | }
44 | .hljs-constructor {
45 | color: #e2b93d;
46 | }
47 | .hljs-constructor .hljs-string {
48 | color: #9CCC65;
49 | }
50 | .hljs-comment, .hljs-quote {
51 | color: #b18eb1;
52 | font-style: italic;
53 | }
54 | .hljs-doctag, .hljs-formula {
55 | color: #c678dd;
56 | }
57 | .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
58 | color: #e06c75;
59 | }
60 | .hljs-literal {
61 | color: #56b6c2;
62 | }
63 | .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
64 | color: #98c379;
65 | }
66 | .hljs-built_in, .hljs-class .hljs-title {
67 | color: #e6c07b;
68 | }
69 | .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
70 | color: #d19a66;
71 | }
72 | .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
73 | color: #61aeee;
74 | }
75 | .hljs-emphasis {
76 | font-style: italic;
77 | }
78 | .hljs-strong {
79 | font-weight: bold;
80 | }
81 | .hljs-link {
82 | text-decoration: underline;
83 | }
84 |
85 |
86 |
87 |
88 | `;
89 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/a11y-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* a11y-dark theme */
8 | /* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
9 | /* @author: ericwbailey */
10 |
11 | /* Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #d4d0ab;
15 | }
16 |
17 | /* Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-tag,
21 | .hljs-name,
22 | .hljs-selector-id,
23 | .hljs-selector-class,
24 | .hljs-regexp,
25 | .hljs-deletion {
26 | color: #ffa07a;
27 | }
28 |
29 | /* Orange */
30 | .hljs-number,
31 | .hljs-built_in,
32 | .hljs-builtin-name,
33 | .hljs-literal,
34 | .hljs-type,
35 | .hljs-params,
36 | .hljs-meta,
37 | .hljs-link {
38 | color: #f5ab35;
39 | }
40 |
41 | /* Yellow */
42 | .hljs-attribute {
43 | color: #ffd700;
44 | }
45 |
46 | /* Green */
47 | .hljs-string,
48 | .hljs-symbol,
49 | .hljs-bullet,
50 | .hljs-addition {
51 | color: #abe338;
52 | }
53 |
54 | /* Blue */
55 | .hljs-title,
56 | .hljs-section {
57 | color: #00e0e0;
58 | }
59 |
60 | /* Purple */
61 | .hljs-keyword,
62 | .hljs-selector-tag {
63 | color: #dcc6e0;
64 | }
65 |
66 | .hljs {
67 | display: block;
68 | overflow-x: auto;
69 | background: #2b2b2b;
70 | color: #f8f8f2;
71 | padding: 0.5em;
72 | }
73 |
74 | .hljs-emphasis {
75 | font-style: italic;
76 | }
77 |
78 | .hljs-strong {
79 | font-weight: bold;
80 | }
81 |
82 | @media screen and (-ms-high-contrast: active) {
83 | .hljs-addition,
84 | .hljs-attribute,
85 | .hljs-built_in,
86 | .hljs-builtin-name,
87 | .hljs-bullet,
88 | .hljs-comment,
89 | .hljs-link,
90 | .hljs-literal,
91 | .hljs-meta,
92 | .hljs-number,
93 | .hljs-params,
94 | .hljs-string,
95 | .hljs-symbol,
96 | .hljs-type,
97 | .hljs-quote {
98 | color: highlight;
99 | }
100 |
101 | .hljs-keyword,
102 | .hljs-selector-tag {
103 | font-weight: bold;
104 | }
105 | }
106 |
107 |
108 |
109 |
110 | `;
111 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/a11y-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /* a11y-light theme */
8 | /* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
9 | /* @author: ericwbailey */
10 |
11 | /* Comment */
12 | .hljs-comment,
13 | .hljs-quote {
14 | color: #696969;
15 | }
16 |
17 | /* Red */
18 | .hljs-variable,
19 | .hljs-template-variable,
20 | .hljs-tag,
21 | .hljs-name,
22 | .hljs-selector-id,
23 | .hljs-selector-class,
24 | .hljs-regexp,
25 | .hljs-deletion {
26 | color: #d91e18;
27 | }
28 |
29 | /* Orange */
30 | .hljs-number,
31 | .hljs-built_in,
32 | .hljs-builtin-name,
33 | .hljs-literal,
34 | .hljs-type,
35 | .hljs-params,
36 | .hljs-meta,
37 | .hljs-link {
38 | color: #aa5d00;
39 | }
40 |
41 | /* Yellow */
42 | .hljs-attribute {
43 | color: #aa5d00;
44 | }
45 |
46 | /* Green */
47 | .hljs-string,
48 | .hljs-symbol,
49 | .hljs-bullet,
50 | .hljs-addition {
51 | color: #008000;
52 | }
53 |
54 | /* Blue */
55 | .hljs-title,
56 | .hljs-section {
57 | color: #007faa;
58 | }
59 |
60 | /* Purple */
61 | .hljs-keyword,
62 | .hljs-selector-tag {
63 | color: #7928a1;
64 | }
65 |
66 | .hljs {
67 | display: block;
68 | overflow-x: auto;
69 | background: #fefefe;
70 | color: #545454;
71 | padding: 0.5em;
72 | }
73 |
74 | .hljs-emphasis {
75 | font-style: italic;
76 | }
77 |
78 | .hljs-strong {
79 | font-weight: bold;
80 | }
81 |
82 | @media screen and (-ms-high-contrast: active) {
83 | .hljs-addition,
84 | .hljs-attribute,
85 | .hljs-built_in,
86 | .hljs-builtin-name,
87 | .hljs-bullet,
88 | .hljs-comment,
89 | .hljs-link,
90 | .hljs-literal,
91 | .hljs-meta,
92 | .hljs-number,
93 | .hljs-params,
94 | .hljs-string,
95 | .hljs-symbol,
96 | .hljs-type,
97 | .hljs-quote {
98 | color: highlight;
99 | }
100 |
101 | .hljs-keyword,
102 | .hljs-selector-tag {
103 | font-weight: bold;
104 | }
105 | }
106 |
107 |
108 |
109 |
110 | `;
111 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/isbl-editor-dark.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | ISBL Editor style dark color scheme (c) Dmitriy Tarasov
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: #404040;
18 | color: #f0f0f0;
19 | }
20 |
21 | /* Base color: saturation 0; */
22 |
23 | .hljs,
24 | .hljs-subst {
25 | color: #f0f0f0;
26 | }
27 |
28 | .hljs-comment {
29 | color: #b5b5b5;
30 | font-style: italic;
31 | }
32 |
33 | .hljs-keyword,
34 | .hljs-attribute,
35 | .hljs-selector-tag,
36 | .hljs-meta-keyword,
37 | .hljs-doctag,
38 | .hljs-name {
39 | color: #f0f0f0;
40 | font-weight: bold;
41 | }
42 |
43 |
44 | /* User color: hue: 0 */
45 |
46 | .hljs-string {
47 | color: #97bf0d;
48 | }
49 |
50 | .hljs-type,
51 | .hljs-number,
52 | .hljs-selector-id,
53 | .hljs-selector-class,
54 | .hljs-quote,
55 | .hljs-template-tag,
56 | .hljs-deletion {
57 | color: #f0f0f0;
58 | }
59 |
60 | .hljs-title,
61 | .hljs-section {
62 | color: #df471e;
63 | }
64 |
65 | .hljs-title>.hljs-built_in {
66 | color: #81bce9;
67 | font-weight: normal;
68 | }
69 |
70 | .hljs-regexp,
71 | .hljs-symbol,
72 | .hljs-variable,
73 | .hljs-template-variable,
74 | .hljs-link,
75 | .hljs-selector-attr,
76 | .hljs-selector-pseudo {
77 | color: #e2c696;
78 | }
79 |
80 | /* Language color: hue: 90; */
81 |
82 | .hljs-built_in,
83 | .hljs-literal {
84 | color: #97bf0d;
85 | font-weight: bold;
86 | }
87 |
88 | .hljs-bullet,
89 | .hljs-code,
90 | .hljs-addition {
91 | color: #397300;
92 | }
93 |
94 | .hljs-class {
95 | color: #ce9d4d;
96 | font-weight: bold;
97 | }
98 |
99 | /* Meta color: hue: 200 */
100 |
101 | .hljs-meta {
102 | color: #1f7199;
103 | }
104 |
105 | .hljs-meta-string {
106 | color: #4d99bf;
107 | }
108 |
109 |
110 | /* Misc effects */
111 |
112 | .hljs-emphasis {
113 | font-style: italic;
114 | }
115 |
116 | .hljs-strong {
117 | font-weight: bold;
118 | }
119 |
120 |
121 |
122 |
123 | `;
124 |
--------------------------------------------------------------------------------
/packages/storybook-readme/src/styles/codeThemes/isbl-editor-light.css.js:
--------------------------------------------------------------------------------
1 | import stringRaw from 'string-raw';
2 |
3 | export default stringRaw`
4 |
5 |
6 |
7 | /*
8 |
9 | ISBL Editor style light color schemec (c) Dmitriy Tarasov
10 |
11 | */
12 |
13 | .hljs {
14 | display: block;
15 | overflow-x: auto;
16 | padding: 0.5em;
17 | background: white;
18 | color: black;
19 | }
20 |
21 | /* Base color: saturation 0; */
22 |
23 | .hljs,
24 | .hljs-subst {
25 | color: #000000;
26 | }
27 |
28 | .hljs-comment {
29 | color: #555555;
30 | font-style: italic;
31 | }
32 |
33 | .hljs-keyword,
34 | .hljs-attribute,
35 | .hljs-selector-tag,
36 | .hljs-meta-keyword,
37 | .hljs-doctag,
38 | .hljs-name {
39 | color: #000000;
40 | font-weight: bold;
41 | }
42 |
43 |
44 | /* User color: hue: 0 */
45 |
46 | .hljs-string {
47 | color: #000080;
48 | }
49 |
50 | .hljs-type,
51 | .hljs-number,
52 | .hljs-selector-id,
53 | .hljs-selector-class,
54 | .hljs-quote,
55 | .hljs-template-tag,
56 | .hljs-deletion {
57 | color: #000000;
58 | }
59 |
60 | .hljs-title,
61 | .hljs-section {
62 | color: #fb2c00;
63 | }
64 |
65 | .hljs-title>.hljs-built_in {
66 | color: #008080;
67 | font-weight: normal;
68 | }
69 |
70 | .hljs-regexp,
71 | .hljs-symbol,
72 | .hljs-variable,
73 | .hljs-template-variable,
74 | .hljs-link,
75 | .hljs-selector-attr,
76 | .hljs-selector-pseudo {
77 | color: #5e1700;
78 | }
79 |
80 | /* Language color: hue: 90; */
81 |
82 | .hljs-built_in,
83 | .hljs-literal {
84 | color: #000080;
85 | font-weight: bold;
86 | }
87 |
88 | .hljs-bullet,
89 | .hljs-code,
90 | .hljs-addition {
91 | color: #397300;
92 | }
93 |
94 | .hljs-class {
95 | color: #6f1C00;
96 | font-weight: bold;
97 | }
98 |
99 | /* Meta color: hue: 200 */
100 |
101 | .hljs-meta {
102 | color: #1f7199;
103 | }
104 |
105 | .hljs-meta-string {
106 | color: #4d99bf;
107 | }
108 |
109 |
110 | /* Misc effects */
111 |
112 | .hljs-emphasis {
113 | font-style: italic;
114 | }
115 |
116 | .hljs-strong {
117 | font-weight: bold;
118 | }
119 |
120 |
121 |
122 |
123 | `;
124 |
--------------------------------------------------------------------------------