From 53e10dc949e07ef7e2507b75abe35e2f6fcc9c62 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Thu, 20 Jul 2017 14:19:04 +0300 Subject: [PATCH 01/33] Init Info Panel --- addons/info/package.json | 4 +- addons/info/register.js | 1 + addons/info/src/config.js | 4 ++ addons/info/src/index.js | 17 ++++++++- addons/info/src/manager.js | 14 +++++++ addons/info/src/panel/index.js | 38 +++++++++++++++++++ .../cra-kitchen-sink/.storybook/addons.js | 1 + .../cra-kitchen-sink/src/stories/index.js | 3 +- 8 files changed, 78 insertions(+), 4 deletions(-) create mode 100644 addons/info/register.js create mode 100644 addons/info/src/config.js create mode 100644 addons/info/src/manager.js create mode 100644 addons/info/src/panel/index.js diff --git a/addons/info/package.json b/addons/info/package.json index 394881b11a77..76facf2b68dd 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -25,10 +25,10 @@ "devDependencies": { "git-url-parse": "^6.2.2", "react": "^15.5.4", - "react-dom": "^15.5.4", "react-test-renderer": "^15.5.4" }, "peerDependencies": { - "react": "*" + "react": "*", + "react-dom": "^15.5.4" } } diff --git a/addons/info/register.js b/addons/info/register.js new file mode 100644 index 000000000000..9232e6c069d5 --- /dev/null +++ b/addons/info/register.js @@ -0,0 +1 @@ +require('./dist/manager').register(); diff --git a/addons/info/src/config.js b/addons/info/src/config.js new file mode 100644 index 000000000000..dcb93109aa18 --- /dev/null +++ b/addons/info/src/config.js @@ -0,0 +1,4 @@ +export const ADDON_ID = 'storybook/info'; +export const ADDON_TITLE = 'info'; +export const PANEL_ID = `${ADDON_ID}/info-panel`; +export const EVENT_ID = `${ADDON_ID}/info-event`; diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 3ff306f3ee55..0c0241af1361 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -1,5 +1,8 @@ import React from 'react'; +import ReactDOMServer from 'react-dom/server'; +import addons from '@storybook/addons'; import deprecate from 'util-deprecate'; +import { EVENT_ID } from './config'; import _Story from './components/Story'; import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown'; @@ -7,6 +10,14 @@ function addonCompose(addonFn) { return storyFn => context => addonFn(storyFn, context); } +const channel = addons.getChannel(); + +function sendToPanel(infoString) { + channel.emit(EVENT_ID, { + infoString, + }); +} + export const Story = _Story; const defaultOptions = { @@ -76,11 +87,15 @@ export function addInfo(storyFn, context, info, _options) { maxPropsIntoLine: options.maxPropsIntoLine, maxPropStringLength: options.maxPropStringLength, }; - return ( + + const infoContent = ( {storyFn(context)} ); + const infoString = ReactDOMServer.renderToString(infoContent); + sendToPanel(infoString); + return infoContent; } export const withInfo = (info, _options) => diff --git a/addons/info/src/manager.js b/addons/info/src/manager.js new file mode 100644 index 000000000000..9afa80e25d3c --- /dev/null +++ b/addons/info/src/manager.js @@ -0,0 +1,14 @@ +import React from 'react'; +import addons from '@storybook/addons'; +import InfoPanel from './panel'; +import { ADDON_ID, PANEL_ID, ADDON_TITLE } from './config'; + +export function register() { + addons.register(ADDON_ID, () => { + const channel = addons.getChannel(); + addons.addPanel(PANEL_ID, { + title: ADDON_TITLE, + render: () => , + }); + }); +} diff --git a/addons/info/src/panel/index.js b/addons/info/src/panel/index.js new file mode 100644 index 000000000000..8d3cc992c695 --- /dev/null +++ b/addons/info/src/panel/index.js @@ -0,0 +1,38 @@ +import React from 'react'; +import ReactDom from 'react-dom'; +import PropTypes from 'prop-types'; +import { EVENT_ID } from '../config'; + +export default class InfoPanel extends React.Component { + constructor(props) { + super(props); + this.root = null; + + this.onChannelData = this.onChannelData.bind(this); + } + + componentDidMount() { + this.props.channel.on(EVENT_ID, this.onChannelData); + } + + onChannelData(data) { + this.root.innerHTML = data.infoString; + ReactDom.render(null, this.root); + } + + render() { + return ( +
{ + this.root = c; + }} + > + Info Panel +
+ ); + } +} + +InfoPanel.propTypes = { + channel: PropTypes.object, // eslint-disable-line react/forbid-prop-types +}; diff --git a/examples/cra-kitchen-sink/.storybook/addons.js b/examples/cra-kitchen-sink/.storybook/addons.js index 5c57d83ea6f9..1bc6246ff835 100644 --- a/examples/cra-kitchen-sink/.storybook/addons.js +++ b/examples/cra-kitchen-sink/.storybook/addons.js @@ -1,3 +1,4 @@ +import '@storybook/addon-info/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-events/register'; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index e308ad065114..d1ceda11106f 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -126,7 +126,8 @@ storiesOf('Button', module) .add( 'with new info', withInfo( - 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', + { inline: true } )(context =>
click the label in top right for info about "{context.story}" From 1920cf42805943291d8ef5d8b4887f7b5834b225 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Fri, 21 Jul 2017 12:04:53 +0300 Subject: [PATCH 02/33] Add react-komposer to Addon-Info --- addons/info/package.json | 1 + addons/info/src/manager.js | 16 ++++++--- addons/info/src/panel/empty_panel.js | 41 +++++++++++++++++++++++ addons/info/src/panel/index.js | 50 +++++++++++----------------- 4 files changed, 74 insertions(+), 34 deletions(-) create mode 100644 addons/info/src/panel/empty_panel.js diff --git a/addons/info/package.json b/addons/info/package.json index 76facf2b68dd..e645c3480b2a 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -20,6 +20,7 @@ "marksy": "^2.0.0", "prop-types": "^15.5.8", "react-addons-create-fragment": "^15.5.3", + "react-komposer": "^2.0.0", "util-deprecate": "^1.0.2" }, "devDependencies": { diff --git a/addons/info/src/manager.js b/addons/info/src/manager.js index 9afa80e25d3c..1a5dfd327a92 100644 --- a/addons/info/src/manager.js +++ b/addons/info/src/manager.js @@ -1,14 +1,22 @@ import React from 'react'; import addons from '@storybook/addons'; +import { compose } from 'react-komposer'; import InfoPanel from './panel'; -import { ADDON_ID, PANEL_ID, ADDON_TITLE } from './config'; +import { ADDON_ID, PANEL_ID, ADDON_TITLE, EVENT_ID } from './config'; + +function infoHandler({ api }, onData) { + const channel = addons.getChannel(); + channel.on(EVENT_ID, ({ infoString }) => onData(null, { infoString })); + api.onStory(() => onData(null, {})); + onData(null, {}); +} +const InfoContainer = compose(infoHandler)(InfoPanel); export function register() { - addons.register(ADDON_ID, () => { - const channel = addons.getChannel(); + addons.register(ADDON_ID, api => { addons.addPanel(PANEL_ID, { title: ADDON_TITLE, - render: () => , + render: () => , }); }); } diff --git a/addons/info/src/panel/empty_panel.js b/addons/info/src/panel/empty_panel.js new file mode 100644 index 000000000000..008360fc2820 --- /dev/null +++ b/addons/info/src/panel/empty_panel.js @@ -0,0 +1,41 @@ +import React from 'react'; + +const styles = { + main: { + fontFamily: + '-apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif', + display: 'inline', + width: '100%', + textAlign: 'center', + color: 'rgb(190, 190, 190)', + padding: 10, + }, + code: { + backgroundColor: 'rgba(0,0,0,0.1)', + border: 'solid 1px rgba(0,0,0,0.3)', + color: 'rgb(90, 90, 90)', + borderRadius: 4, + padding: 4, + }, +}; + +function EmptyPanel() { + return ( +
+ INFO PANEL +

No info provided for this story

+

+ Use withInfo() to add info addon +

+

+ See{' '} + + storybook-addon-info + {' '} + for details +

+
+ ); +} + +export default EmptyPanel; diff --git a/addons/info/src/panel/index.js b/addons/info/src/panel/index.js index 8d3cc992c695..0182056449a3 100644 --- a/addons/info/src/panel/index.js +++ b/addons/info/src/panel/index.js @@ -1,38 +1,28 @@ import React from 'react'; -import ReactDom from 'react-dom'; import PropTypes from 'prop-types'; -import { EVENT_ID } from '../config'; +import EmptyPanel from './empty_panel'; -export default class InfoPanel extends React.Component { - constructor(props) { - super(props); - this.root = null; - - this.onChannelData = this.onChannelData.bind(this); - } - - componentDidMount() { - this.props.channel.on(EVENT_ID, this.onChannelData); - } +const styles = { + main: { + width: '100%', + padding: 8, + backgroundColor: '#ededed', + }, +}; - onChannelData(data) { - this.root.innerHTML = data.infoString; - ReactDom.render(null, this.root); +const InfoPanel = ({ infoString }) => { + if (!infoString) { + return ; } + const infoMarkup = { + __html: infoString, + }; - render() { - return ( -
{ - this.root = c; - }} - > - Info Panel -
- ); - } -} + return
; +}; -InfoPanel.propTypes = { - channel: PropTypes.object, // eslint-disable-line react/forbid-prop-types +InfoPanel.PropTypes = { + infoString: PropTypes.string.isRequired, }; + +export default InfoPanel; From 3eabb5d35106652bce77bb2985df13ba0c5721d1 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Fri, 21 Jul 2017 13:03:47 +0300 Subject: [PATCH 03/33] Add decoratorInfo to Addon-Info --- addons/info/src/components/Story.js | 26 +++++++----- addons/info/src/index.js | 27 +++++++++++-- .../cra-kitchen-sink/src/stories/index.js | 40 +++++++++++++++---- 3 files changed, 73 insertions(+), 20 deletions(-) diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index fd1fdec3238e..90832e987b2e 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -34,7 +34,7 @@ const stylesheet = { }, }, info: { - position: 'fixed', + position: 'relative', background: 'white', top: 0, bottom: 0, @@ -99,10 +99,10 @@ const stylesheet = { }; export default class Story extends React.Component { - constructor(...args) { - super(...args); + constructor(props, ...args) { + super(props, ...args); this.state = { - open: false, + open: props.hideInfoButton, stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))), }; this.marksy = marksy(this.props.marksyConf); @@ -158,12 +158,16 @@ export default class Story extends React.Component { const linkStyle = { ...stylesheet.link.base, ...stylesheet.link.topRight, + display: this.props.hideInfoButton && 'none', }; const infoStyle = Object.assign({}, stylesheet.info); if (!this.state.open) { infoStyle.display = 'none'; } + const storyStyle = { + display: this.state.open && 'none', + }; const openOverlay = () => { this.setState({ open: true }); @@ -177,12 +181,14 @@ export default class Story extends React.Component { return (
-
- {this.props.children} +
+
+ {this.props.children} +
+ + Show Info +
- - Show Info -
× @@ -393,6 +399,7 @@ Story.propTypes = { propTables: PropTypes.arrayOf(PropTypes.func), propTablesExclude: PropTypes.arrayOf(PropTypes.func), showInline: PropTypes.bool, + hideInfoButton: PropTypes.bool, showHeader: PropTypes.bool, showSource: PropTypes.bool, styles: PropTypes.func.isRequired, @@ -410,6 +417,7 @@ Story.defaultProps = { propTables: null, propTablesExclude: [], showInline: false, + hideInfoButton: false, showHeader: true, showSource: true, marksyConf: {}, diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 0c0241af1361..b9f7803ac87c 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -29,6 +29,8 @@ const defaultOptions = { maxPropObjectKeys: 3, maxPropArrayLength: 3, maxPropStringLength: 50, + hideInfoButton: true, + sendToPanel: true, }; const defaultMarksyConf = { @@ -78,6 +80,7 @@ export function addInfo(storyFn, context, info, _options) { showInline: Boolean(options.inline), showHeader: Boolean(options.header), showSource: Boolean(options.source), + hideInfoButton: Boolean(options.hideInfoButton), propTables: options.propTables, propTablesExclude: options.propTablesExclude, styles: typeof options.styles === 'function' ? options.styles : s => s, @@ -93,13 +96,31 @@ export function addInfo(storyFn, context, info, _options) { {storyFn(context)} ); - const infoString = ReactDOMServer.renderToString(infoContent); - sendToPanel(infoString); + if (options.sendToPanel) { + const infoString = ReactDOMServer.renderToString(infoContent); + sendToPanel(infoString); + return storyFn(context); + } return infoContent; } +const panelOptions = options => ({ + ...options, + sendToPanel: true, + hideInfoButton: true, +}); + +const decoratorOptions = options => ({ + ...options, + sendToPanel: false, + hideInfoButton: false, +}); + export const withInfo = (info, _options) => - addonCompose((storyFn, context) => addInfo(storyFn, context, info, _options)); + addonCompose((storyFn, context) => addInfo(storyFn, context, info, panelOptions(_options))); + +export const decoratorInfo = (info, _options) => + addonCompose((storyFn, context) => addInfo(storyFn, context, info, decoratorOptions(_options))); export default { addWithInfo: deprecate(function addWithInfo(storyName, info, storyFn, _options) { diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index d1ceda11106f..c7f79459cab7 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -19,7 +19,7 @@ import { object, } from '@storybook/addon-knobs'; import centered from '@storybook/addon-centered'; -import { withInfo } from '@storybook/addon-info'; +import { withInfo, decoratorInfo } from '@storybook/addon-info'; import { Button, Welcome } from '@storybook/react/demo'; @@ -115,16 +115,23 @@ storiesOf('Button', module)
); }) - .addWithInfo( - 'with some info', - 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.', - context => + + +storiesOf('App', module).add('full app', () => ); + +storiesOf('Info Addon', module) + .add( + 'withInfo default', + withInfo( + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' + )(context =>
click the label in top right for info about "{context.story}"
+ ) ) .add( - 'with new info', + 'withInfo inline', withInfo( 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', { inline: true } @@ -134,6 +141,17 @@ storiesOf('Button', module)
) ) + .add( + 'decoratorInfo', + decoratorInfo( + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', + { inline: false } + )(context => +
+ click the label in top right for info about "{context.story}" +
+ ) + ) .add( 'addons composition', withInfo('see Notes panel for composition info')( @@ -143,10 +161,16 @@ storiesOf('Button', module)
) ) + ) + .addWithInfo( + 'deprecated addWithInfo', + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its painful API.', + context => +
+ click the label in top right for info about "{context.story}" +
); -storiesOf('App', module).add('full app', () => ); - storiesOf('Centered Button', module) .addDecorator(centered) .add('with text', () => ); From ff4776c84ff14452a8129c8771336c2eab25f3d8 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 8 Aug 2017 11:24:09 +0300 Subject: [PATCH 04/33] Disable precommit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a3c0a1774ff0..1a47600e63c5 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "bootstrap:test-cra": "npm run build-packs && lerna exec --scope test-cra -- yarn install", "build-packs": "lerna exec --scope '@storybook/*' --parallel -- ../../scripts/build-pack.sh ../../packs", "changelog": "pr-log --sloppy", - "precommit": "lint-staged", + "precommit_": "lint-staged", "coverage": "codecov", "danger": "danger", "dev": "lerna exec --parallel -- babel src -d dist --ignore tests,__tests__,test.js,stories/,story.jsx --plugins \"transform-runtime\" --copy-files -w", From 1c3d9a273c186ad7627843f6a64089eca232bd11 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 8 Aug 2017 13:24:43 +0300 Subject: [PATCH 05/33] Restore after merging --- addons/info/src/index.js | 20 +- addons/info/src/index.test.js | 6 +- .../src/__snapshots__/storyshots.test.js.snap | 529 ++++++++++++++++++ .../cra-kitchen-sink/src/stories/index.js | 35 +- 4 files changed, 560 insertions(+), 30 deletions(-) diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 1ecde106f630..2f52fd9f108a 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -33,6 +33,14 @@ const defaultMarksyConf = { ul: UL, }; +const channel = addons.getChannel(); + +function sendToPanel(infoString) { + channel.emit(EVENT_ID, { + infoString, + }); +} + function addInfo(storyFn, context, infoOptions) { const options = { ...defaultOptions, @@ -84,18 +92,6 @@ export const withInfo = textOrOptions => { const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions; return storyFn => context => addInfo(storyFn, context, options); }; -const panelOptions = options => ({ - ...options, - sendToPanel: true, - hideInfoButton: true, -}); -const decoratorOptions = options => ({ - - ...options, - sendToPanel: false, - hideInfoButton: false, - -}); export { Story }; diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index 96c1f40cdfaf..b6c807e8d453 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -24,7 +24,7 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => /* eslint-enable */ const testContext = { kind: 'addon_info', story: 'jest_test' }; -const testOptions = { propTables: false }; +const testOptions = { propTables: false, sendToPanel: false, hideInfoButton: false }; describe('addon Info', () => { const story = context => @@ -42,6 +42,9 @@ describe('addon Info', () => { const api = { add: (name, fn) => fn(testContext), }; + it('should set options', () => { + setDefaults(testOptions); + }); it('should render and markdown', () => { const Info = withInfo( '# Test story \n## with markdown info \ncontaing **bold**, *cursive* text and `code`' @@ -53,7 +56,6 @@ describe('addon Info', () => { ReactDOM.render(, document.createElement('div')); }); it('should render with missed info', () => { - setDefaults(testOptions); const Info = withInfo()(story); ReactDOM.render(, document.createElement('div')); }); diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap index f5e226854289..449ca7340d11 100644 --- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap +++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap @@ -1670,6 +1670,535 @@ exports[`Storyshots Centered Button with text 1`] = `
`; +exports[`Storyshots Info Addon addons composition 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + addons composition + " +
+`; + +exports[`Storyshots Info Addon decoratorInfo 1`] = ` +
+ +
+ + × + +
+
+
+

+ Info Addon +

+

+ decoratorInfo +

+
+
+

+ Use the + + info addon + + with its new painless API. +

+
+
+

+ Story Source +

+ 
+            

+              

+                
+                  <
+                  div
+                
+                
+                
+                  >
+                
+              

+              

+                
+                  click the 
+                
+              

+              

+                
+                  <
+                  InfoButton
+                
+                
+                
+                  />
+                
+              

+              

+                
+                   label in top right for info about "
+                
+              

+              

+                
+                  decoratorInfo
+                
+              

+              

+                
+                  "
+                
+              

+              

+                
+                  </
+                  div
+                  >
+                
+              

+            

+
+
+
+

+ Prop Types +

+
+

+ " + InfoButton + " Component +

+ + No propTypes defined! + +
+
+
+
+
+
+`; + +exports[`Storyshots Info Addon deprecated addWithInfo 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + deprecated addWithInfo + " +
+`; + +exports[`Storyshots Info Addon withInfo default 1`] = ` +
+
+ click the + + + Show Info + + + label in top right for info about " + withInfo default + " + +
+
+`; + +exports[`Storyshots Info Addon withInfo inline 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + withInfo inline + " + +
+`; + exports[`Storyshots Welcome to Storybook 1`] = `
); - }) - + }); storiesOf('App', module).add('full app', () => ); @@ -127,18 +126,19 @@ storiesOf('Info Addon', module) 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' )(context =>
- - click the label in top right for info about "{context.story}" - + + click the label in top right for info about "{context.story}" +
) ) .add( 'withInfo inline', - withInfo( - 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', - { inline: true } - )(context => + withInfo({ + text: + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', + inline: true, + })(context => click the label in top right for info about "{context.story}" @@ -146,13 +146,16 @@ storiesOf('Info Addon', module) ) .add( 'decoratorInfo', - decoratorInfo( - 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', - { inline: false } - )(context => -
+ withInfo({ + text: + 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', + inline: false, + sendToPanel: false, + hideInfoButton: false, + })(context => + click the label in top right for info about "{context.story}" -
+ ) ) .add( From 9137eee1c0adcad3c103a33212680d5c0b26d427 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 8 Aug 2017 21:13:33 +0300 Subject: [PATCH 06/33] Refactoring addon options --- addons/info/src/defaults.js | 35 ++++++ addons/info/src/index.js | 116 +++++++++++------- addons/info/src/index.test.js | 8 +- .../cra-kitchen-sink/src/stories/index.js | 41 +++++-- 4 files changed, 141 insertions(+), 59 deletions(-) create mode 100644 addons/info/src/defaults.js diff --git a/addons/info/src/defaults.js b/addons/info/src/defaults.js new file mode 100644 index 000000000000..78b31109a8a6 --- /dev/null +++ b/addons/info/src/defaults.js @@ -0,0 +1,35 @@ +import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown'; + +/* +defaultOptions should have all available options +*/ +export const defaultOptions = { + info: null, + inline: false, + header: true, + source: true, + infoButton: false, + propTables: [], + propTablesExclude: null, + styles: s => s, + marksyConf: null, + maxPropsIntoLine: 3, + maxPropObjectKeys: 3, + maxPropArrayLength: 3, + maxPropStringLength: 50, + sendToPanel: true, +}; + +export const defaultMarksyConf = { + h1: H1, + h2: H2, + h3: H3, + h4: H4, + h5: H5, + h6: H6, + code: Code, + p: P, + a: A, + li: LI, + ul: UL, +}; diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 2f52fd9f108a..7717d1ea5a4f 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -4,36 +4,48 @@ import addons from '@storybook/addons'; import deprecate from 'util-deprecate'; import Story from './components/Story'; import { EVENT_ID } from './config'; -import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown'; - -const defaultOptions = { - inline: false, - header: true, - source: true, - propTables: [], - maxPropsIntoLine: 3, - maxPropObjectKeys: 3, - maxPropArrayLength: 3, - maxPropStringLength: 50, - hideInfoButton: true, - sendToPanel: true, -}; +import { defaultOptions, defaultMarksyConf } from './defaults'; + +const channel = addons.getChannel(); -const defaultMarksyConf = { - h1: H1, - h2: H2, - h3: H3, - h4: H4, - h5: H5, - h6: H6, - code: Code, - p: P, - a: A, - li: LI, - ul: UL, +const addonOptions = { + globalOptions: defaultOptions, + localOptions: {}, + isGlobalScope: true, + + setOptions(options) { + if (this.isGlobalScope) { + this.globalOptions = { + ...this.globalOptions, + ...options, + }; + return this.globalOptions; + } + this.localOptions = { + ...this.localOptions, + ...options, + }; + return this.localOptions; + }, + + globalScope() { + this.isGlobalScope = true; + this.localOptions = {}; + }, + + localScope() { + this.isGlobalScope = false; + this.localOptions = {}; + }, }; -const channel = addons.getChannel(); +function catchLocalOptions(storyFn, context) { + addonOptions.localScope(); + const story = storyFn(context); + const { localOptions, globalOptions } = addonOptions; + addonOptions.globalScope(); + return { story, localOptions, globalOptions }; +} function sendToPanel(infoString) { channel.emit(EVENT_ID, { @@ -42,32 +54,33 @@ function sendToPanel(infoString) { } function addInfo(storyFn, context, infoOptions) { + // Options could be overridden by setInfoOptions during storyFn execution + const { story, globalOptions, localOptions } = catchLocalOptions(storyFn, context); + const options = { - ...defaultOptions, + ...globalOptions, ...infoOptions, + ...localOptions, + }; + + const marksyConf = { + ...defaultMarksyConf, + ...options.marksyConf, }; // props.propTables can only be either an array of components or null // propTables option is allowed to be set to 'false' (a boolean) // if the option is false, replace it with null to avoid react warnings - if (!options.propTables) { - options.propTables = null; - } - - const marksyConf = { ...defaultMarksyConf }; - if (options && options.marksyConf) { - Object.assign(marksyConf, options.marksyConf); - } const props = { - info: options.text, + info: options.info, context, showInline: Boolean(options.inline), showHeader: Boolean(options.header), showSource: Boolean(options.source), - hideInfoButton: Boolean(options.hideInfoButton), - propTables: options.propTables, + hideInfoButton: Boolean(!options.infoButton), + propTables: options.propTables || null, propTablesExclude: options.propTablesExclude, - styles: typeof options.styles === 'function' ? options.styles : s => s, + styles: typeof options.styles === 'function' && options.styles, marksyConf, maxPropObjectKeys: options.maxPropObjectKeys, maxPropArrayLength: options.maxPropArrayLength, @@ -77,19 +90,19 @@ function addInfo(storyFn, context, infoOptions) { const infoContent = ( - {storyFn(context)} + {story} ); if (options.sendToPanel) { const infoString = ReactDOMServer.renderToString(infoContent); sendToPanel(infoString); - return storyFn(context); + return story; } return infoContent; } export const withInfo = textOrOptions => { - const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions; + const options = typeof textOrOptions === 'string' ? { info: textOrOptions } : textOrOptions; return storyFn => context => addInfo(storyFn, context, options); }; @@ -110,6 +123,19 @@ export default { }, '@storybook/addon-info .addWithInfo() addon is deprecated, use withInfo() from the same package instead. \nSee https://github.com/storybooks/storybook/tree/master/addons/info'), }; -export function setDefaults(newDefaults) { - return Object.assign(defaultOptions, newDefaults); +export function setInfoOptions(textOrOptions) { + const options = typeof textOrOptions === 'string' ? { info: textOrOptions } : textOrOptions; + return addonOptions.setOptions(options); } + +/* +Changes: +- [x] options.text -> options.info (breaking) +- [x] options.hideInfoButton -> !options.infoButton +- [x] { defaultOptions, defaultMarksyConf } moved to default.js +- [x] setDefaults -> setInfoOptions +- [x] same behavior of setInfoOptions as withInfo with textOrOptions +- [x] setInfoOptions, defaultOptions and withInfo supports the same set of options +- [x] removed decoratorInfo (set options.sendToPanel = false to use as decorator) + +*/ diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index b6c807e8d453..861c3f8ab47c 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import AddonInfo, { withInfo, setDefaults } from './'; +import AddonInfo, { withInfo, setInfoOptions } from './'; /* eslint-disable */ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => @@ -43,7 +43,7 @@ describe('addon Info', () => { add: (name, fn) => fn(testContext), }; it('should set options', () => { - setDefaults(testOptions); + setInfoOptions(testOptions); }); it('should render and markdown', () => { const Info = withInfo( @@ -51,8 +51,8 @@ describe('addon Info', () => { )(story); ReactDOM.render(, document.createElement('div')); }); - it('should render with text options', () => { - const Info = withInfo({ text: 'some text here' })(story); + it('should render with info options', () => { + const Info = withInfo({ info: 'some text here' })(story); ReactDOM.render(, document.createElement('div')); }); it('should render with missed info', () => { diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index baf1f680a8d6..e438d75f04e7 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -18,7 +18,7 @@ import { object, } from '@storybook/addon-knobs'; import centered from '@storybook/addon-centered'; -import { withInfo } from '@storybook/addon-info'; +import { withInfo, setInfoOptions } from '@storybook/addon-info'; import { Button, Welcome } from '@storybook/react/demo'; @@ -54,7 +54,12 @@ const InfoButton = () => {' '}Show Info{' '} ; +setInfoOptions({ + info: 'This is common info', +}); + storiesOf('Button', module) + .addDecorator((storyFn, context) => withInfo('This is **Button** info')(storyFn)(context)) .addDecorator(withKnobs) .add('with text', () => ) .add('with some emoji', () => ) @@ -115,6 +120,10 @@ storiesOf('Button', module)

); + }) + .add('with setInfoOptions', () => { + setInfoOptions('this info is **overridden** by setInfoOptions'); + return ; }); storiesOf('App', module).add('full app', () => ); @@ -125,19 +134,18 @@ storiesOf('Info Addon', module) withInfo( 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' )(context => -
- - click the label in top right for info about "{context.story}" - -
+ + click the label in top right for info about "{context.story}" + ) ) .add( 'withInfo inline', withInfo({ - text: + info: 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', - inline: true, + inline: false, + propTables: false, })(context => click the label in top right for info about "{context.story}" @@ -147,11 +155,11 @@ storiesOf('Info Addon', module) .add( 'decoratorInfo', withInfo({ - text: + info: 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', inline: false, sendToPanel: false, - hideInfoButton: false, + infoButton: true, })(context => click the label in top right for info about "{context.story}" @@ -177,6 +185,19 @@ storiesOf('Info Addon', module) ); +storiesOf('Addons composition', module) + .addDecorator((storyFn, context) => + withInfo()(withNotes('the non-trivial form of addons composition')(storyFn))(context) + ) + .add('with text', () => { + setInfoOptions('this button contain text'); + return ; + }) + .add('with some emoji', () => { + setInfoOptions('this button contain some emoji'); + return ; + }); + storiesOf('Centered Button', module) .addDecorator(centered) .add('with text', () => ); From 5fe8b8529839a342dbdc9613188da57a04914f69 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Wed, 9 Aug 2017 00:12:43 +0300 Subject: [PATCH 07/33] Change styles --- addons/info/src/components/Node.js | 2 +- addons/info/src/components/PropTable.js | 11 ++- addons/info/src/components/Story.js | 33 ++++--- addons/info/src/components/markdown/code.js | 5 +- addons/info/src/index.js | 12 --- addons/info/src/panel/index.js | 2 +- .../cra-kitchen-sink/src/stories/index.js | 92 ++++++++++++++++++- 7 files changed, 124 insertions(+), 33 deletions(-) diff --git a/addons/info/src/components/Node.js b/addons/info/src/components/Node.js index 168d1d6bef40..4ec14ff8dfbe 100644 --- a/addons/info/src/components/Node.js +++ b/addons/info/src/components/Node.js @@ -5,7 +5,7 @@ import Props from './Props'; const stylesheet = { containerStyle: {}, tagStyle: { - color: '#777', + color: 'hsl(0, 0%, 10%)', }, }; diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js index fbd3f0780b85..4ee5cf166731 100644 --- a/addons/info/src/components/PropTable.js +++ b/addons/info/src/components/PropTable.js @@ -15,9 +15,14 @@ Object.keys(PropTypes).forEach(typeName => { const stylesheet = { propTable: { - marginLeft: -10, - borderSpacing: '10px 5px', borderCollapse: 'separate', + fontSize: 13, + border: '1px hsl(0, 0%, 90%) solid', + backgroundColor: 'hsl(0, 0%, 98%)', + width: '100%', + }, + head: { + textAlign: 'left', }, }; @@ -87,7 +92,7 @@ export default function PropTable(props) { return ( - + diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 6d759137e5a2..699df1121e74 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -35,12 +35,10 @@ const stylesheet = { }, info: { position: 'relative', - background: 'white', top: 0, bottom: 0, left: 0, right: 0, - padding: '0 40px', overflow: 'auto', zIndex: 99999, }, @@ -54,14 +52,14 @@ const stylesheet = { lineHeight: 1.45, fontSize: '15px', border: '1px solid #eee', - padding: '20px 40px 40px', + padding: '10px 20px 20px', borderRadius: '2px', boxShadow: '0px 2px 3px rgba(0, 0, 0, 0.05)', backgroundColor: '#fff', - marginTop: '50px', }, infoContent: { marginBottom: 0, + borderBottom: '1px solid #eee', }, infoStory: {}, jsxInfoContent: { @@ -72,30 +70,41 @@ const stylesheet = { h1: { margin: 0, padding: 0, - fontSize: '35px', + fontSize: '28px', }, h2: { margin: '0 0 10px 0', padding: 0, fontWeight: 400, - fontSize: '22px', + fontSize: '18px', }, body: { borderBottom: '1px solid #eee', - paddingTop: 10, - marginBottom: 10, + paddingTop: 6, + marginBottom: 6, }, }, source: { h1: { margin: '20px 0 0 0', padding: '0 0 5px 0', - fontSize: '25px', + fontSize: '18px', borderBottom: '1px solid #EEE', + color: 'rgba(0,0,0,0.5)', }, }, propTableHead: { - margin: '20px 0 0 0', + h2: { + fontSize: '14px', + margin: '20px 0 10px 0', + }, + span: { + backgroundColor: 'hsl(0, 0%, 92%)', + padding: '6px 20px', + minWidth: 300, + border: 'solid 1px hsl(0, 0%, 75%)', + borderRadius: 4, + }, }, }; @@ -356,8 +365,8 @@ export default class Story extends React.Component { const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props; const propTables = array.map(type =>
-

- "{type.displayName || type.name}" Component +

+ {'<'}{type.displayName || type.name}{' />'}

diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 7717d1ea5a4f..8132b6e3ed3f 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -127,15 +127,3 @@ export function setInfoOptions(textOrOptions) { const options = typeof textOrOptions === 'string' ? { info: textOrOptions } : textOrOptions; return addonOptions.setOptions(options); } - -/* -Changes: -- [x] options.text -> options.info (breaking) -- [x] options.hideInfoButton -> !options.infoButton -- [x] { defaultOptions, defaultMarksyConf } moved to default.js -- [x] setDefaults -> setInfoOptions -- [x] same behavior of setInfoOptions as withInfo with textOrOptions -- [x] setInfoOptions, defaultOptions and withInfo supports the same set of options -- [x] removed decoratorInfo (set options.sendToPanel = false to use as decorator) - -*/ diff --git a/addons/info/src/panel/index.js b/addons/info/src/panel/index.js index 0182056449a3..23152a6f80fa 100644 --- a/addons/info/src/panel/index.js +++ b/addons/info/src/panel/index.js @@ -5,7 +5,7 @@ import EmptyPanel from './empty_panel'; const styles = { main: { width: '100%', - padding: 8, + padding: 0, backgroundColor: '#ededed', }, }; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index e438d75f04e7..fe20f096be93 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -130,7 +130,7 @@ storiesOf('App', module).add('full app', () => ); storiesOf('Info Addon', module) .add( - 'withInfo default', + 'Info default', withInfo( 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' )(context => @@ -140,18 +140,106 @@ storiesOf('Info Addon', module) ) ) .add( - 'withInfo inline', + 'Info with options', withInfo({ info: 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', inline: false, propTables: false, + header: false, + source: true, + })(context => + + click the label in top right for info about "{context.story}" this button has + very-very-very-very looooooong title + + ) + ) + .add( + 'Only info markdown', + withInfo({ + info: `# Quid fruticumque morte + + ## Indignantia factum tracto tamen + + Lorem markdownum condidit. Vittam quod modo vana **Bactrius**, oculos est maius, + **in liquitur** dividuae: pectusque. + + - Velata et qui sequenti domito ferinas miserum + - Cognita minus + - Iuppiter et sinitis corpore haec + - Forma pinetis mortemque accipiter meorum egi Erysicthona + - Litora mixtaeque tellus passim erexit + - Postquam Scythicis saevis et sermone minimus cremabo + + Muneris udis flumen quod. Meo vinci haec + [ignoscite](http://nisi.org/recentipariter.aspx) insonuit Amoris Persei + Thermodontiaca unum madebit thalamumque iniqui? + + ## Tumulumque transferre memorque insopitumque leves clipei lignum + + Ipsaque parte summo, et paravi admotas te demum castique nostri, audit metuunt + inquit: vestigia? Formae potius Tritonidos et pars, iungat tum, gestare, *ardore + cum*, ausum inscribenda incingitur digitis umbram. Aello electarumque huic et + cunctatusque et verba alto atque et ignibus. + + Revellit *parari cum* quaeque sacrum gelido, colantur quae haec longe temptanti + fatigat agat: in iuvat sed, oscula. Haec dictis inani nova et [illa + mens](http://accipiter.org/vulnusredditus) quam ex lacus nulla, nam haud + numeratur radios. + + ## Postquam levis nec aspera tum + + Nimiumque scopulum. Pars rupit. + + - Volatu Amor sine utere sitvs vini mitis + - Unda causa exhausta + - Cupidine ne quoque si quoquam tacitae + - Mortis sensit + - Obit non possint operum umbra laevum Telethusa + - Stetit indueret + + Luctibus tuli? Ipsa tempora corpus illa alii in sacra sepulcri sanguis nova quem + enim [aequora](http://figura.io/mittere), tenentis, mensas sed dea, non?`, + inline: false, + propTables: false, + header: false, + source: false, + })(context => + + click the label in top right for info about "{context.story}" + + ) + ) + .add( + 'Only component source', + withInfo({ + info: null, + inline: false, + propTables: false, + header: false, + source: true, })(context => click the label in top right for info about "{context.story}" ) ) + .add( + 'Only propTypes and header', + withInfo({ + info: null, + inline: false, + propTables: [Container], + propTablesExclude: [InfoButton], + header: true, + source: false, + })(context => +
+ click the label in top right for info about "{context.story}" +
+ ) + ) .add( 'decoratorInfo', withInfo({ From 9b3f2c581d3ed6dd8d6ba5481724369ad947ba61 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Wed, 9 Aug 2017 22:46:20 +0300 Subject: [PATCH 08/33] Fix panel behavior --- addons/info/src/manager.js | 21 +- addons/info/src/panel/index.js | 2 +- .../src/__snapshots__/storyshots.test.js.snap | 2157 ++++------------- .../cra-kitchen-sink/src/stories/index.js | 4 +- 4 files changed, 502 insertions(+), 1682 deletions(-) diff --git a/addons/info/src/manager.js b/addons/info/src/manager.js index 1a5dfd327a92..403fff41aeb1 100644 --- a/addons/info/src/manager.js +++ b/addons/info/src/manager.js @@ -4,19 +4,32 @@ import { compose } from 'react-komposer'; import InfoPanel from './panel'; import { ADDON_ID, PANEL_ID, ADDON_TITLE, EVENT_ID } from './config'; -function infoHandler({ api }, onData) { - const channel = addons.getChannel(); +function createEventsListener(api, channel) { + let onData = () => {}; + channel.on(EVENT_ID, ({ infoString }) => onData(null, { infoString })); api.onStory(() => onData(null, {})); - onData(null, {}); + + return onDataFn => { + onData = onDataFn; + return () => { + onData = () => {}; + }; + }; +} + +function infoHandler({ listener }, onData) { + const stopSubscription = listener(onData); + return stopSubscription; } const InfoContainer = compose(infoHandler)(InfoPanel); export function register() { addons.register(ADDON_ID, api => { + const eventsListener = createEventsListener(api, addons.getChannel()); addons.addPanel(PANEL_ID, { title: ADDON_TITLE, - render: () => , + render: () => , }); }); } diff --git a/addons/info/src/panel/index.js b/addons/info/src/panel/index.js index 23152a6f80fa..36d0c521c0de 100644 --- a/addons/info/src/panel/index.js +++ b/addons/info/src/panel/index.js @@ -21,7 +21,7 @@ const InfoPanel = ({ infoString }) => { return
; }; -InfoPanel.PropTypes = { +InfoPanel.propTypes = { infoString: PropTypes.string.isRequired, }; diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap index 449ca7340d11..b3692886e01d 100644 --- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap +++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap @@ -1,1569 +1,118 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots App full app 1`] = ` -
-
- logo -

- Welcome to React -

-
-

- To get started, edit - - src/App.js - - and save to reload. -

-
-`; - -exports[`Storyshots Button addons composition 1`] = ` -
-
-
- click the - - - Show Info - - - label in top right for info about " - addons composition - " -
-
- - Show Info - -
- - × - -
-
-
-

- Button -

-

- addons composition -

-
-
-

- see Notes panel for composition info -

-
-
-

- Story Source -

- 
-            

-              

-                
-                  <
-                  div
-                
-                
-                
-                  >
-                
-              

-              

-                
-                  click the 
-                
-              

-              

-                
-                  <
-                  InfoButton
-                
-                
-                
-                  />
-                
-              

-              

-                
-                   label in top right for info about "
-                
-              

-              

-                
-                  addons composition
-                
-              

-              

-                
-                  "
-                
-              

-              

-                
-                  </
-                  div
-                  >
-                
-              

-            

-
-
-
-

- Prop Types -

-
-

- " - InfoButton - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Button with knobs 1`] = ` -
-

- My name is Storyteller, I'm 70 years old, and my favorite fruit is apple. -

-

- My birthday is: - January 20, 2017 -

-

- My wallet contains: $ - 12.50 -

-

- In my backpack, I have: -

-
    -
  • - Laptop -
    • -
  • - Book -
    • -
  • - Whiskey -
    • -
-

- Nice to meet you! -

-
-`; - -exports[`Storyshots Button with new info 1`] = ` -
-
-
- click the - - - Show Info - - - label in top right for info about " - with new info - " - -
-
- - Show Info - -
- - × - -
-
-
-

- Button -

-

- with new info -

-
-
-

- Use the - - info addon - - with its new painless API. -

-
-
-

- Story Source -

- 
-            

-              

-                
-                  <
-                  Container
-                
-                
-                
-                  >
-                
-              

-              

-                
-                  click the 
-                
-              

-              

-                
-                  <
-                  InfoButton
-                
-                
-                
-                  />
-                
-              

-              

-                
-                   label in top right for info about "
-                
-              

-              

-                
-                  with new info
-                
-              

-              

-                
-                  "
-                
-              

-              

-                
-                  </
-                  Container
-                  >
-                
-              

-            

-
-
-
-

- Prop Types -

-
-

- " - Container - " Component -

-
property propType
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- age - - number - - no - - - - 0 - - - -
- children - - node - - yes - - - - -
- isAmazing - - bool - - no - - - - false - - - -
- title - - string - - no - - - " - the best container ever - " - - -
- -
-

- " - InfoButton - " Component -

- - No propTypes defined! - -
- - - - - -`; - -exports[`Storyshots Button with notes 1`] = ` - -`; - -exports[`Storyshots Button with some emoji 1`] = ` - -`; - -exports[`Storyshots Button with some info 1`] = ` -
-
-
- click the - - - Show Info - - - label in top right for info about " - with some info - " - -
-
- - Show Info - -
- - × - -
-
-
-

- Button -

-

- with some info -

-
-
-

- Use the - - info addon - - with its painful API. -

-
-
-

- Story Source -

- 
-            

-              

-                
-                  <
-                  Container
-                
-                
-                
-                  >
-                
-              

-              

-                
-                  click the 
-                
-              

-              

-                
-                  <
-                  InfoButton
-                
-                
-                
-                  />
-                
-              

-              

-                
-                   label in top right for info about "
-                
-              

-              

-                
-                  with some info
-                
-              

-              

-                
-                  "
-                
-              

-              

-                
-                  </
-                  Container
-                  >
-                
-              

-            

-
-
-
-

- Prop Types -

-
-

- " - Container - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- age - - number - - no - - - - 0 - - - -
- children - - node - - yes - - - - -
- isAmazing - - bool - - no - - - - false - - - -
- title - - string - - no - - - " - the best container ever - " - - -
-
-
-

- " - InfoButton - " Component -

- - No propTypes defined! - -
-
-
-
+exports[`Storyshots Addons composition with some emoji 1`] = ` + +`; + +exports[`Storyshots Addons composition with text 1`] = ` + +`; + +exports[`Storyshots App full app 1`] = ` +
+
+ logo +

+ Welcome to React +

+

+ To get started, edit + + src/App.js + + and save to reload. +

+
+`; + +exports[`Storyshots Button with knobs 1`] = ` +
+

+ My name is Storyteller, I'm 70 years old, and my favorite fruit is apple. +

+

+ My birthday is: + January 20, 2017 +

+

+ My wallet contains: $ + 12.50 +

+

+ In my backpack, I have: +

+
    +
  • + Laptop +
    • +
  • + Book +
    • +
  • + Whiskey +
    • +
+

+ Nice to meet you! +

`; +exports[`Storyshots Button with notes 1`] = ` + +`; + +exports[`Storyshots Button with setInfoOptions 1`] = ` + +`; + +exports[`Storyshots Button with some emoji 1`] = ` + +`; + exports[`Storyshots Button with text 1`] = ` +
+
+`; + +exports[`Storyshots Info Addon Info default 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Info default + " + +
+`; + +exports[`Storyshots Info Addon Info with options 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Info with options + " this button has very-very-very-very looooooong title + +
+`; + +exports[`Storyshots Info Addon Only component source 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Only component source + " + +
+`; + +exports[`Storyshots Info Addon Only info markdown 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Only info markdown + " + +
+`; + +exports[`Storyshots Info Addon Only propTypes and header 1`] = ` +
+ click the + - -
+ + Show Info + + + label in top right for info about " + Only propTypes and header + " `; @@ -1714,7 +410,9 @@ exports[`Storyshots Info Addon decoratorInfo 1`] = ` } } > - @@ -2079,7 +778,8 @@ exports[`Storyshots Info Addon decoratorInfo 1`] = ` style={ Object { "borderBottom": "1px solid #EEE", - "fontSize": "25px", + "color": "rgba(0,0,0,0.5)", + "fontSize": "18px", "margin": "20px 0 0 0", "padding": "0 0 5px 0", } @@ -2091,13 +791,182 @@ exports[`Storyshots Info Addon decoratorInfo 1`] = `

+ + < + Container + /> + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ age + + number + + no + + + + 0 + + + +
+ children + + node + + yes + + - + +
+ isAmazing + + bool + + no + + + + false + + + +
+ title + + string + + no + + + " + the best container ever + " + + +
+ +
+

- " - InfoButton - " Component + + < + InfoButton + /> +

No propTypes defined! @@ -2137,68 +1006,6 @@ exports[`Storyshots Info Addon deprecated addWithInfo 1`] = `
`; -exports[`Storyshots Info Addon withInfo default 1`] = ` -
-
- click the - - - Show Info - - - label in top right for info about " - withInfo default - " - -
-
-`; - -exports[`Storyshots Info Addon withInfo inline 1`] = ` -
- click the - - - Show Info - - - label in top right for info about " - withInfo inline - " - -
-`; - exports[`Storyshots Welcome to Storybook 1`] = `
{ - setInfoOptions('this button contain text'); + setInfoOptions('this *button* contain **text**'); return ; }) .add('with some emoji', () => { - setInfoOptions('this button contain some emoji'); + setInfoOptions('this *button* contain **some emoji**'); return ; }); From e3ff4564278e640160f603702032f34412f3d5a3 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Sat, 12 Aug 2017 23:49:22 +0300 Subject: [PATCH 09/33] Rename options.info (options.text) to summary --- addons/info/src/components/Story.js | 18 +++++++++++------- addons/info/src/defaults.js | 2 +- addons/info/src/index.js | 6 +++--- addons/info/src/index.test.js | 2 +- addons/info/src/panel/index.js | 6 +++++- examples/cra-kitchen-sink/src/stories/index.js | 12 ++++++------ 6 files changed, 27 insertions(+), 19 deletions(-) diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 699df1121e74..0b857d4d78c4 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -235,19 +235,19 @@ export default class Story extends React.Component { } _getInfoContent() { - if (!this.props.info) { + if (!this.props.summary) { return ''; } - if (React.isValidElement(this.props.info)) { + if (React.isValidElement(this.props.summary)) { return (
- {this.props.info} + {this.props.summary}
); } - const lines = this.props.info.split('\n'); + const lines = this.props.summary.split('\n'); while (lines[0].trim() === '') { lines.shift(); } @@ -366,7 +366,11 @@ export default class Story extends React.Component { const propTables = array.map(type =>

- {'<'}{type.displayName || type.name}{' />'} + + {'<'} + {type.displayName || type.name} + {' />'} +

{ - const options = typeof textOrOptions === 'string' ? { info: textOrOptions } : textOrOptions; + const options = typeof textOrOptions === 'string' ? { summary: textOrOptions } : textOrOptions; return storyFn => context => addInfo(storyFn, context, options); }; @@ -124,6 +124,6 @@ export default { }; export function setInfoOptions(textOrOptions) { - const options = typeof textOrOptions === 'string' ? { info: textOrOptions } : textOrOptions; + const options = typeof textOrOptions === 'string' ? { summary: textOrOptions } : textOrOptions; return addonOptions.setOptions(options); } diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js index 861c3f8ab47c..0f9eb9c98227 100644 --- a/addons/info/src/index.test.js +++ b/addons/info/src/index.test.js @@ -52,7 +52,7 @@ describe('addon Info', () => { ReactDOM.render(, document.createElement('div')); }); it('should render with info options', () => { - const Info = withInfo({ info: 'some text here' })(story); + const Info = withInfo({ summary: 'some text here' })(story); ReactDOM.render(, document.createElement('div')); }); it('should render with missed info', () => { diff --git a/addons/info/src/panel/index.js b/addons/info/src/panel/index.js index 36d0c521c0de..b2483fc44319 100644 --- a/addons/info/src/panel/index.js +++ b/addons/info/src/panel/index.js @@ -22,7 +22,11 @@ const InfoPanel = ({ infoString }) => { }; InfoPanel.propTypes = { - infoString: PropTypes.string.isRequired, + infoString: PropTypes.string, +}; + +InfoPanel.defaultProps = { + infoString: null, }; export default InfoPanel; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index 87c23d937729..eaff777f5b23 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -55,7 +55,7 @@ const InfoButton = () => ; setInfoOptions({ - info: 'This is common info', + summary: 'This is common info', }); storiesOf('Button', module) @@ -142,7 +142,7 @@ storiesOf('Info Addon', module) .add( 'Info with options', withInfo({ - info: + summary: 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', inline: false, propTables: false, @@ -158,7 +158,7 @@ storiesOf('Info Addon', module) .add( 'Only info markdown', withInfo({ - info: `# Quid fruticumque morte + summary: `# Quid fruticumque morte ## Indignantia factum tracto tamen @@ -214,7 +214,7 @@ storiesOf('Info Addon', module) .add( 'Only component source', withInfo({ - info: null, + summary: null, inline: false, propTables: false, header: false, @@ -228,7 +228,7 @@ storiesOf('Info Addon', module) .add( 'Only propTypes and header', withInfo({ - info: null, + summary: null, inline: false, propTables: [Container], propTablesExclude: [InfoButton], @@ -243,7 +243,7 @@ storiesOf('Info Addon', module) .add( 'decoratorInfo', withInfo({ - info: + summary: 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.', inline: false, sendToPanel: false, From 5d7c2d2c1c7ab67539eeaac58baa1dc76c597193 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Sun, 13 Aug 2017 01:43:19 +0300 Subject: [PATCH 10/33] Add JSX example --- addons/info/src/index.js | 20 ++++-- .../cra-kitchen-sink/src/stories/index.js | 69 +++++++++++++++++++ 2 files changed, 85 insertions(+), 4 deletions(-) diff --git a/addons/info/src/index.js b/addons/info/src/index.js index 8c78b303241e..786561628abd 100644 --- a/addons/info/src/index.js +++ b/addons/info/src/index.js @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOMServer from 'react-dom/server'; +import PropTypes from 'prop-types'; import addons from '@storybook/addons'; import deprecate from 'util-deprecate'; import Story from './components/Story'; @@ -101,8 +102,19 @@ function addInfo(storyFn, context, infoOptions) { return infoContent; } -export const withInfo = textOrOptions => { - const options = typeof textOrOptions === 'string' ? { summary: textOrOptions } : textOrOptions; +const detectOptions = prop => { + const propTypes = { + prop: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + }; + PropTypes.checkPropTypes(propTypes, { prop }, 'prop', 'withInfo'); + if (typeof prop === 'string') { + return { summary: prop }; + } + return prop; +}; + +export const withInfo = summaryOrOptions => { + const options = detectOptions(summaryOrOptions); return storyFn => context => addInfo(storyFn, context, options); }; @@ -123,7 +135,7 @@ export default { }, '@storybook/addon-info .addWithInfo() addon is deprecated, use withInfo() from the same package instead. \nSee https://github.com/storybooks/storybook/tree/master/addons/info'), }; -export function setInfoOptions(textOrOptions) { - const options = typeof textOrOptions === 'string' ? { summary: textOrOptions } : textOrOptions; +export function setInfoOptions(summaryOrOptions) { + const options = detectOptions(summaryOrOptions); return addonOptions.setOptions(options); } diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index eaff777f5b23..5e8f41194668 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -23,6 +23,7 @@ import { withInfo, setInfoOptions } from '@storybook/addon-info'; import { Button, Welcome } from '@storybook/react/demo'; import App from '../App'; +import reactLogo from '../logo.svg'; import Logger from './Logger'; import Container from './Container'; @@ -211,6 +212,66 @@ storiesOf('Info Addon', module) ) ) + .add( + 'inline JSX description', + withInfo({ + summary: ( + + ), + inline: false, + propTables: false, + header: false, + source: false, + })(context => + + click the label in top right for info about "{context.story}" + + ) + ) .add( 'Only component source', withInfo({ @@ -254,6 +315,14 @@ storiesOf('Info Addon', module) ) ) + .add( + 'JSX as an argument', + withInfo(

Should display a warning

)(context => + + click the label in top right for info about "{context.story}" + + ) + ) .add( 'addons composition', withInfo('see Notes panel for composition info')( From a494903dc43487bbe0dba246f2e7cd377a159d5e Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Sun, 13 Aug 2017 01:48:17 +0300 Subject: [PATCH 11/33] Addon Info package clean-up --- addons/info/.storybook/addons.js | 1 - addons/info/.storybook/config.js | 15 -- .../.storybook/user/modify_webpack_config.js | 4 - addons/info/.storybook/webpack.config.js | 28 --- addons/info/CHANGELOG.md | 85 -------- addons/info/README.md | 2 - addons/info/docs/home-screenshot.png | Bin 193081 -> 0 bytes addons/info/example/Button.js | 20 -- addons/info/example/story.js | 192 ------------------ addons/info/package.json | 4 +- 10 files changed, 1 insertion(+), 350 deletions(-) delete mode 100644 addons/info/.storybook/addons.js delete mode 100644 addons/info/.storybook/config.js delete mode 100644 addons/info/.storybook/user/modify_webpack_config.js delete mode 100644 addons/info/.storybook/webpack.config.js delete mode 100644 addons/info/CHANGELOG.md delete mode 100644 addons/info/docs/home-screenshot.png delete mode 100644 addons/info/example/Button.js delete mode 100644 addons/info/example/story.js diff --git a/addons/info/.storybook/addons.js b/addons/info/.storybook/addons.js deleted file mode 100644 index 5dea101a7c9a..000000000000 --- a/addons/info/.storybook/addons.js +++ /dev/null @@ -1 +0,0 @@ -import '@storybook/addon-actions/register'; diff --git a/addons/info/.storybook/config.js b/addons/info/.storybook/config.js deleted file mode 100644 index 85ac9515b63c..000000000000 --- a/addons/info/.storybook/config.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { configure, setAddon, addDecorator } from '@storybook/react'; -import InfoAddon from '../src/'; - -addDecorator((story) => ( -
- {story()} -
-)); - -setAddon(InfoAddon); - -configure(function () { - require('../example/story'); -}, module); diff --git a/addons/info/.storybook/user/modify_webpack_config.js b/addons/info/.storybook/user/modify_webpack_config.js deleted file mode 100644 index 2716de914d59..000000000000 --- a/addons/info/.storybook/user/modify_webpack_config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = function (config) { - // This is the default webpack config defined in the `../webpack.config.js` - // modify as you need. -}; diff --git a/addons/info/.storybook/webpack.config.js b/addons/info/.storybook/webpack.config.js deleted file mode 100644 index 115532575ea6..000000000000 --- a/addons/info/.storybook/webpack.config.js +++ /dev/null @@ -1,28 +0,0 @@ -// IMPORTANT -// --------- -// This is an auto generated file with React CDK. -// Do not modify this file. -// Use `.storybook/user/modify_webpack_config.js instead`. - -const path = require('path'); -const updateConfig = require('./user/modify_webpack_config'); - -const config = { - module: { - loaders: [ - { - test: /\.css?$/, - loaders: ['style', 'raw'], - include: path.resolve(__dirname, '../'), - }, - { - test: /\.json?$/, - loaders: ['json'], - include: path.resolve(__dirname, '../'), - } - ], - }, -}; - -updateConfig(config); -module.exports = config; diff --git a/addons/info/CHANGELOG.md b/addons/info/CHANGELOG.md deleted file mode 100644 index 0b2b1a1031d5..000000000000 --- a/addons/info/CHANGELOG.md +++ /dev/null @@ -1,85 +0,0 @@ -# Change Log - -### v3.3.0 - -- Add setDefaults function [PR114](https://github.com/kadirahq/react-storybook-addon-info/pull/114) - -### v3.2.4 - -- Add missing dist files [PR113](https://github.com/kadirahq/react-storybook-addon-info/pull/113) - -### v3.2.3 - -- Handle number type nodes [PR110](https://github.com/kadirahq/react-storybook-addon-info/pull/110) - -### v3.2.2 - -- Use markdown-to-react-components npm package instead of our fork. Our PR to them is merged and published. [PR109](https://github.com/kadirahq/react-storybook-addon-info/pull/109) - -### v3.2.1 - -- Handle false values for types [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) - -### v3.2.0 - -- Support custom MTRC config [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) -- Fix propTables prop validation with a default value [PR55](https://github.com/kadirahq/react-storybook-addon-info/pull/55) - -### v3.1.4 - -- Remove propTables prop validation warning [PR53](https://github.com/kadirahq/react-storybook-addon-info/pull/53) -- Update example storybook [PR52](https://github.com/kadirahq/react-storybook-addon-info/pull/52) - -### v3.1.3 - -- Fix wrong detection of propType when isRequired is set [PR49](https://github.com/kadirahq/react-storybook-addon-info/pull/49) -- Add displayName for Button [PR51](https://github.com/kadirahq/react-storybook-addon-info/pull/51) - -### v3.1.2 - -- Fixed a bug which made the `info` to not display and the `options` parameter to be ignored when `info` is not given.[PR45](https://github.com/kadirahq/react-storybook-addon-info/pull/45) - -### v3.1.1 - -- Add a z-index for rendered items to make the overlay always display on top [PR38](https://github.com/kadirahq/react-storybook-addon-info/pull/38) - -### v3.1.0 - -- Make the `info` argument optional [PR37](https://github.com/kadirahq/react-storybook-addon-info/pull/37) - -### v3.0.10 - -- Render the component inside a div element when on inline mode [PR34](https://github.com/kadirahq/react-storybook-addon-info/pull/34) - -### v3.0.9 - -- Add missing `@kadira/storybook` devDependencies [PR25](https://github.com/kadirahq/react-storybook-addon-info/pull/25) -- Improve prop rendering in jsx source view [PR24](https://github.com/kadirahq/react-storybook-addon-info/pull/24) -- Avoid warning message with "webkitFontSmoothing" [PR30](https://github.com/kadirahq/react-storybook-addon-info/pull/30) -- Remove max-width style rule for wrapper [PR31](https://github.com/kadirahq/react-storybook-addon-info/pull/31) and [PR36](https://github.com/kadirahq/react-storybook-addon-info/pull/36) -- Improve prop table rendering (handle css resets) [PR32](https://github.com/kadirahq/react-storybook-addon-info/pull/32) - -### v3.0.8 - -- Fixed unkeyed array iteration warning in React with: [PR23](https://github.com/kadirahq/react-storybook-addon-info/pull/23) - -### v3.0.7 - -- Improve default display in prop table. See [#16](https://github.com/kadirahq/react-storybook-addon-info/pull/16) - -### v3.0.6 - -- Improve function type and react element type props display. See [#14](https://github.com/kadirahq/react-storybook-addon-info/pull/14) - -### v3.0.5 - -- Over-indentation of ending tag in source code is fixed. See [#13](https://github.com/kadirahq/react-storybook-addon-info/pull/13) - -### v3.0.4 - -- Remove the need to use json-loader with webpack when using this package. - See: [#12](https://github.com/kadirahq/react-storybook-addon-info/issues/12) - -### v3.0.0 - -- Add the version which works as an Storybook addon. diff --git a/addons/info/README.md b/addons/info/README.md index 65344a8f57dc..2fc06bb201b7 100644 --- a/addons/info/README.md +++ b/addons/info/README.md @@ -122,8 +122,6 @@ storiesOf('Component') ); ``` -> Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API. - ## The FAQ **Components lose their names on static build** diff --git a/addons/info/docs/home-screenshot.png b/addons/info/docs/home-screenshot.png deleted file mode 100644 index 65e7a787c120db46bd9f98c66e34c4331d973d09..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 193081 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

ea;#?&pB!ZCIZ{K=*f8Ly-@x&0O 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

- ), - { inline: true, propTables: [Button] } -); - -storiesOf('Button').addWithInfo( - 'simple usage (JSX description)', - , - () => ( -
-
- ) -); - -storiesOf('Button').addWithInfo( - 'simple usage (inline JSX description)', -
-

This is a JSX info section

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Sed ornare massa rutrum metus commodo, a mattis velit dignissim. - Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero - nulla. -

-

- - This is a link - -

-

- -

-
, - () => element + + )(story); + ReactDOM.render(, document.createElement('div')); + }); + it('should render with options', () => { const Info = withInfo({ summary: 'some text here' })(story); ReactDOM.render(, document.createElement('div')); }); diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index 5e8f41194668..072ce9b5722f 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -317,7 +317,11 @@ storiesOf('Info Addon', module) ) .add( 'JSX as an argument', - withInfo(

Should display a warning

)(context => + withInfo( +
+ This is summary with element +
+ )(context => click the label in top right for info about "{context.story}" From e956ae8d6befd2e12a6b319b6d20d75521724008 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 8 Aug 2017 11:24:09 +0300 Subject: [PATCH 13/33] Revert "Disable precommit" This reverts commit ff4776c84ff14452a8129c8771336c2eab25f3d8. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f6a36e78ffb1..ac79f01a077e 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "build-packs": "lerna exec --scope '@storybook/*' --parallel -- ../../scripts/build-pack.sh ../../packs", "start": "lerna run --stream --scope cra-kitchen-sink storybook", "changelog": "pr-log --sloppy", - "precommit_": "lint-staged", + "precommit": "lint-staged", "coverage": "codecov", "danger": "danger", "dev": "lerna exec --parallel -- babel src -d dist --ignore tests,__tests__,test.js,stories/,story.jsx --plugins \"transform-runtime\" --copy-files -w", From fc6a11ee594c733fa730a5ed358c0ba98a830b9e Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Sun, 13 Aug 2017 22:51:12 +0300 Subject: [PATCH 14/33] Update snapshots --- .../src/__snapshots__/storyshots.test.js.snap | 1279 +++-------------- 1 file changed, 187 insertions(+), 1092 deletions(-) diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap index 9b524a334fd5..4c968f83c1a9 100644 --- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap +++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap @@ -46,421 +46,13 @@ exports[`Storyshots App full app 1`] = ` `; -exports[`Storyshots Button addons composition 1`] = ` -
-
-
- click the - - - Show Info - - - label in top right for info about " - addons composition - " -
-
- - Show Info - -
- - × - -
-
-
-

- Button -

-

- addons composition -

-
-
-

- see Notes panel for composition info -

-
-
-

- Story Source -

- 
-            

-              

-                
-                  <
-                  div
-                
-                
-                
-                  >
-                
-              

-              

-                
-              

-              

-                
-                  click the 
-                
-              

-              

-                
-                  <
-                  InfoButton
-                
-                
-                
-                  />
-                
-              

-              

-                
-                   label in top right for info about "
-                
-              

-              

-                
-                  addons composition
-                
-              

-              

-                
-                  "
-                
-              

-              

-                
-                  </
-                  div
-                  >
-                
-              

-            

-
-
-
-

- Prop Types -

-
-

- " - InfoButton - " Component -

- - No propTypes defined! - -
-
-
-
-
-
-`; - -exports[`Storyshots Button with knobs 1`] = ` -
@@ -561,600 +153,126 @@ exports[`Storyshots Cells/Molecules with text 1`] = ` Hello Button `; - -exports[`Storyshots Cells/Molecules.Atoms/simple with some emoji 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules.Atoms/simple with text 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules/Atoms.more with some emoji2 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = ` - -`; - -exports[`Storyshots Centered Button with text 1`] = ` -
-
- -
-
-`; - -exports[`Storyshots Info Addon Info default 1`] = ` -
- click the - - - Show Info - - - label in top right for info about " - Info default - " - -
-`; - -exports[`Storyshots Info Addon Info with options 1`] = ` -
- click the - - - × - -
-
-
-

- Button -

-

- with new info -

-
-
-

- Use the - - info addon - - with its new painless API. -

-
-
-

- Story Source -

- 
-            

-              

-                
-                  <
-                  Container
-                
-                
-                
-                  >
-                
-              

-              

-                
-              

-              

-                
-                  click the 
-                
-              

-              

-                
-                  <
-                  InfoButton
-                
-                
-                
-                  />
-                
-              

-              

-                
-                   label in top right for info about "
-                
-              

-              

-                
-                  with new info
-                
-              

-              

-                
-                  "
-                
-              

-              

-                
-                  </
-                  Container
-                  >
-                
-              

-            

-
-
-
-

- Prop Types -

-
-

- " - Container - " Component -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- property - - propType - - required - - default - - description -
- age - - number - - no - - - - 0 - - - -
- children - - node - - yes - - - - -
- isAmazing - - bool - - no - - - - false - - - -
- title - - string - - no - - - " - the best container ever - " - - -
-
-
-

- " - InfoButton - " Component -

- - No propTypes defined! - -
-
-
-
-
+ +exports[`Storyshots Cells/Molecules.Atoms/simple with some emoji 1`] = ` + +`; + +exports[`Storyshots Cells/Molecules.Atoms/simple with text 1`] = ` + +`; + +exports[`Storyshots Cells/Molecules/Atoms.more with some emoji2 1`] = ` + +`; + +exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = ` + +`; + +exports[`Storyshots Info Addon Info default 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Info default + " + +
+`; + +exports[`Storyshots Info Addon Info with options 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + Info with options + " this button has very-very-very-very looooooong title + +
+`; + +exports[`Storyshots Info Addon JSX as an argument 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + JSX as an argument + " +
`; @@ -1858,77 +976,61 @@ exports[`Storyshots Info Addon decoratorInfo 1`] = `
`; -exports[`Storyshots Button with text 1`] = ` - -`; - -exports[`Storyshots Cells.Molecules.Atoms with some emoji2 1`] = ` - -`; - -exports[`Storyshots Cells.Molecules.Atoms with text2 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules with some emoji 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules with text 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules.Atoms/simple with some emoji 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules.Atoms/simple with text 1`] = ` - -`; - -exports[`Storyshots Cells/Molecules/Atoms.more with some emoji2 1`] = ` - +exports[`Storyshots Info Addon deprecated addWithInfo 1`] = ` +
+ click the + + + Show Info + + + label in top right for info about " + deprecated addWithInfo + " +
`; -exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = ` - + click the + + + Show Info + + + label in top right for info about " + inline JSX description + " + + `; exports[`Storyshots Some really long story kind description with text 1`] = ` @@ -1950,24 +1052,17 @@ exports[`Storyshots Some really long story kind description with text 1`] = `
- - Show Info - - - label in top right for info about " - deprecated addWithInfo - " + +
`; From 43843970db49213c2b1851924864f0b3f567fe9c Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 14 Aug 2017 10:01:07 +0300 Subject: [PATCH 15/33] Fix marksy config --- addons/info/src/components/Story.js | 7 ++++-- .../cra-kitchen-sink/src/stories/index.js | 22 ++++++++++--------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 26f9917f4237..9cd9db07abba 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -1,6 +1,6 @@ /* eslint no-underscore-dangle: 0 */ -import React from 'react'; +import React, { createElement } from 'react'; import PropTypes from 'prop-types'; import global from 'global'; @@ -115,7 +115,10 @@ export default class Story extends React.Component { open: props.hideInfoButton, stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))), }; - this.marksy = marksy(this.props.marksyConf); + this.marksy = marksy({ + createElement, + elements: props.marksyConf, + }); } componentWillReceiveProps(nextProps) { diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index aa046836ac13..b723d6a22b21 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -174,23 +174,25 @@ storiesOf('Info Addon', module) .add( 'Only info markdown', withInfo({ - summary: `# Quid fruticumque morte - + summary: ` + # Quid fruticumque morte + ## Indignantia factum tracto tamen - + Lorem markdownum condidit. Vittam quod modo vana **Bactrius**, oculos est maius, **in liquitur** dividuae: pectusque. - + - Velata et qui sequenti domito ferinas miserum - Cognita minus - Iuppiter et sinitis corpore haec - Forma pinetis mortemque accipiter meorum egi Erysicthona - Litora mixtaeque tellus passim erexit - Postquam Scythicis saevis et sermone minimus cremabo - + Muneris udis flumen quod. Meo vinci haec [ignoscite](http://nisi.org/recentipariter.aspx) insonuit Amoris Persei Thermodontiaca unum madebit thalamumque iniqui? + ## Tumulumque transferre memorque insopitumque leves clipei lignum @@ -198,23 +200,23 @@ storiesOf('Info Addon', module) inquit: vestigia? Formae potius Tritonidos et pars, iungat tum, gestare, *ardore cum*, ausum inscribenda incingitur digitis umbram. Aello electarumque huic et cunctatusque et verba alto atque et ignibus. - + Revellit *parari cum* quaeque sacrum gelido, colantur quae haec longe temptanti fatigat agat: in iuvat sed, oscula. Haec dictis inani nova et [illa mens](http://accipiter.org/vulnusredditus) quam ex lacus nulla, nam haud numeratur radios. - + ## Postquam levis nec aspera tum - + Nimiumque scopulum. Pars rupit. - + - Volatu Amor sine utere sitvs vini mitis - Unda causa exhausta - Cupidine ne quoque si quoquam tacitae - Mortis sensit - Obit non possint operum umbra laevum Telethusa - Stetit indueret - + Luctibus tuli? Ipsa tempora corpus illa alii in sacra sepulcri sanguis nova quem enim [aequora](http://figura.io/mittere), tenentis, mensas sed dea, non?`, inline: false, From 0e77b8aba136a6bd82f96b73177cad26e3cf76ba Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 14 Aug 2017 22:13:29 +0300 Subject: [PATCH 16/33] [WIP] Add storybook --- addons/info/.storybook/addons.js | 6 + addons/info/.storybook/config.js | 9 + addons/info/package.json | 8 +- addons/info/src/components/Story.js | 7 + addons/info/src/components/stories/index.js | 184 ++++++++++++++++++++ 5 files changed, 213 insertions(+), 1 deletion(-) create mode 100644 addons/info/.storybook/addons.js create mode 100644 addons/info/.storybook/config.js create mode 100644 addons/info/src/components/stories/index.js diff --git a/addons/info/.storybook/addons.js b/addons/info/.storybook/addons.js new file mode 100644 index 000000000000..9aa3ab858d29 --- /dev/null +++ b/addons/info/.storybook/addons.js @@ -0,0 +1,6 @@ +/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ + +import '@storybook/addon-info/register'; +import '@storybook/addon-knobs/register'; +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/addons/info/.storybook/config.js b/addons/info/.storybook/config.js new file mode 100644 index 000000000000..04c6777b7c55 --- /dev/null +++ b/addons/info/.storybook/config.js @@ -0,0 +1,9 @@ +/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ + +import { configure } from '@storybook/react'; + +function loadStories() { + require('../src/components/stories'); +} + +configure(loadStories, module); diff --git a/addons/info/package.json b/addons/info/package.json index 9bdbd17e0ea4..e62cead7aa0f 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -9,7 +9,9 @@ "url": "https://github.com/storybooks/storybook.git" }, "scripts": { - "prepublish": "node ../../scripts/prepublish.js" + "prepublish": "node ../../scripts/prepublish.js", + "dev": "start-storybook -p 9009", + "build-storybook": "build-storybook" }, "dependencies": { "@storybook/addons": "^3.2.0", @@ -22,6 +24,10 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { + "@storybook/addon-actions": "^3.2.0", + "@storybook/addon-info": "^3.2.4", + "@storybook/addon-knobs": "^3.2.0", + "@storybook/react": "^3.2.4", "git-url-parse": "^6.2.2", "react": "^15.6.1", "react-dom": "^15.6.1", diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 9cd9db07abba..53cbb5c5fe65 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -108,6 +108,9 @@ const stylesheet = { }, }; +/** + * Root info Component + */ export default class Story extends React.Component { constructor(props, ...args) { super(props, ...args); @@ -410,6 +413,10 @@ Story.propTypes = { kind: PropTypes.string, story: PropTypes.string, }), + /** + * the description of component + * allows markdown or JSX syntax + */ summary: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), propTables: PropTypes.arrayOf(PropTypes.func), propTablesExclude: PropTypes.arrayOf(PropTypes.func), diff --git a/addons/info/src/components/stories/index.js b/addons/info/src/components/stories/index.js new file mode 100644 index 000000000000..a86fce0cf793 --- /dev/null +++ b/addons/info/src/components/stories/index.js @@ -0,0 +1,184 @@ +import React from 'react'; + +import { storiesOf, addDecorator } from '@storybook/react'; +import { withInfo } from '@storybook/addon-info'; +import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'; + +import { Button } from '@storybook/react/demo'; + +import Story from '../Story'; +import Node from '../Node'; +import Props from '../Props'; +import PropTable from '../PropTable'; +import PropVal from '../PropVal'; +import { Code, Pre, Blockquote } from '../markdown/code'; + +import { defaultOptions, defaultMarksyConf } from '../../defaults'; + +/* +Add info after moving info addon to panel +*/ +addDecorator((story, context) => + withInfo({ + summary: null, + inline: false, + header: false, + source: false, + })(story)(context) +); + +const customOptions = { + summary: ` + ### Story component + + default options with custom summary + + wraps itself + `, + propTables: [Story, Node, Props, PropTable, PropVal], +}; +const context = { + kind: 'Info Component: ', + story: 'default settings', +}; + +const options = { + ...defaultOptions, + ...customOptions, +}; + +const marksyConf = { + ...defaultMarksyConf, + ...options.marksyConf, +}; + +const props = { + summary: options.summary, + context, + showInline: Boolean(options.inline), + showHeader: Boolean(options.header), + showSource: Boolean(options.source), + hideInfoButton: Boolean(!options.infoButton), + propTables: options.propTables || null, + propTablesExclude: options.propTablesExclude, + styles: typeof options.styles === 'function' && options.styles, + marksyConf, + maxPropObjectKeys: options.maxPropObjectKeys, + maxPropArrayLength: options.maxPropArrayLength, + maxPropsIntoLine: options.maxPropsIntoLine, + maxPropStringLength: options.maxPropStringLength, +}; + +storiesOf('Root Component (Story.js)', module) + .addDecorator(withKnobs) + .add('default options wraps itself', () => + + + + ) + .add('default options wraps button', () => + + + + ); + +storiesOf('Node', module) + .add('default with Story', () => + } + depth={0} + maxPropsIntoLine={props.maxPropsIntoLine} + maxPropObjectKeys={props.maxPropObjectKeys} + maxPropArrayLength={props.maxPropArrayLength} + maxPropStringLength={props.maxPropStringLength} + /> + ) + .add('default with button', () => + Press Me} + depth={0} + maxPropsIntoLine={props.maxPropsIntoLine} + maxPropObjectKeys={props.maxPropObjectKeys} + maxPropArrayLength={props.maxPropArrayLength} + maxPropStringLength={props.maxPropStringLength} + /> + ); + +storiesOf('Props', module) + .add('default with Story', () => + } + singleLine + maxPropsIntoLine={props.maxPropsIntoLine} + maxPropObjectKeys={props.maxPropObjectKeys} + maxPropArrayLength={props.maxPropArrayLength} + maxPropStringLength={props.maxPropStringLength} + /> + ) + .add('default with button', () => + Press Me} + singleLine + maxPropsIntoLine={props.maxPropsIntoLine} + maxPropObjectKeys={props.maxPropObjectKeys} + maxPropArrayLength={props.maxPropArrayLength} + maxPropStringLength={props.maxPropStringLength} + /> + ); + +storiesOf('PropTable', module) + .add('default with Story', () => + + ) + .add('default with Button', () => + + ); + +storiesOf('PropVal', module).add('default with Story', () => + +); + +storiesOf('Markdown/Code', module) + .add('example 1', () => const A = 10;} language="javascript" />) + .add('example 2', () => const A = 10;} language="javascript" />); + +storiesOf('Markdown/Pre', module) + .add('example 1', () => + 
+      
const A = 10;

+
+ ) + .add('example 2', () => + 
+      {'const A = 10;'}
+
+ ); + +storiesOf('Markdown/Blockquote', module) + .add('example 1', () => +
+
const A = 10;
+
+ ) + .add('example 2', () => +
+ {'const A = 10;'} +
+ ); From 79719c2a65a0118e137943f6605c9f1fabb7514e Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Wed, 16 Aug 2017 23:07:17 +0300 Subject: [PATCH 17/33] Setup Storybook --- addons/info/.storybook/addons.js | 1 + addons/info/.storybook/config.js | 17 +- addons/info/package.json | 1 + addons/info/src/components/stories/index.js | 326 ++++++++++++++---- .../components/stories/mock-data/README.md | 1 + .../src/components/stories/mock-data/index.js | 37 ++ .../components/stories/mock-data/summary.md | 58 ++++ .../components/stories/mock-data/widget.jsx | 47 +++ 8 files changed, 412 insertions(+), 76 deletions(-) create mode 100644 addons/info/src/components/stories/mock-data/README.md create mode 100644 addons/info/src/components/stories/mock-data/index.js create mode 100644 addons/info/src/components/stories/mock-data/summary.md create mode 100644 addons/info/src/components/stories/mock-data/widget.jsx diff --git a/addons/info/.storybook/addons.js b/addons/info/.storybook/addons.js index 9aa3ab858d29..fea08f6c3b0e 100644 --- a/addons/info/.storybook/addons.js +++ b/addons/info/.storybook/addons.js @@ -4,3 +4,4 @@ import '@storybook/addon-info/register'; import '@storybook/addon-knobs/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; +import '@storybook/addon-options/register'; diff --git a/addons/info/.storybook/config.js b/addons/info/.storybook/config.js index 04c6777b7c55..2a9b804d1f3d 100644 --- a/addons/info/.storybook/config.js +++ b/addons/info/.storybook/config.js @@ -1,6 +1,21 @@ /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ -import { configure } from '@storybook/react'; +import { configure, setAddon } from '@storybook/react'; +import { withInfo, setInfoOptions } from '@storybook/addon-info'; +import { setOptions } from '@storybook/addon-options'; + +setOptions({ + downPanelInRight: true, +}) + +setAddon({ + summary(info) { + return this.addDecorator(story => { + setInfoOptions(info); + return story(); + }) + } +}); function loadStories() { require('../src/components/stories'); diff --git a/addons/info/package.json b/addons/info/package.json index e62cead7aa0f..f8468e67f1fd 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -27,6 +27,7 @@ "@storybook/addon-actions": "^3.2.0", "@storybook/addon-info": "^3.2.4", "@storybook/addon-knobs": "^3.2.0", + "@storybook/addon-options": "^3.2.4", "@storybook/react": "^3.2.4", "git-url-parse": "^6.2.2", "react": "^15.6.1", diff --git a/addons/info/src/components/stories/index.js b/addons/info/src/components/stories/index.js index a86fce0cf793..d7ef0c6c7a84 100644 --- a/addons/info/src/components/stories/index.js +++ b/addons/info/src/components/stories/index.js @@ -1,7 +1,7 @@ import React from 'react'; import { storiesOf, addDecorator } from '@storybook/react'; -import { withInfo } from '@storybook/addon-info'; +import { withInfo, setInfoOptions } from '@storybook/addon-info'; import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'; import { Button } from '@storybook/react/demo'; @@ -14,32 +14,28 @@ import PropVal from '../PropVal'; import { Code, Pre, Blockquote } from '../markdown/code'; import { defaultOptions, defaultMarksyConf } from '../../defaults'; +import * as mock from './mock-data'; -/* -Add info after moving info addon to panel -*/ addDecorator((story, context) => withInfo({ summary: null, inline: false, - header: false, - source: false, + header: true, + source: true, + // propTables: [Story, Node, Props, PropTable, PropVal], + propTablesExclude: [mock.Widget], })(story)(context) ); +addDecorator(withKnobs); + +const maxPropObjectKeys = val => Math.max(number('maxPropObjectKeys', val) || 1, 1); +const maxPropArrayLength = (val = 3) => Math.max(number('maxPropArrayLength', val) || 1, 1); +const maxPropsIntoLine = (val = 3) => Math.max(number('maxPropsIntoLine', val) || 1, 1); +const maxPropStringLength = (val = 50) => Math.max(number('maxPropStringLength', val) || 1, 1); + const customOptions = { - summary: ` - ### Story component - - default options with custom summary - - wraps itself - `, - propTables: [Story, Node, Props, PropTable, PropVal], -}; -const context = { - kind: 'Info Component: ', - story: 'default settings', + // maxPropStringLength: 50, }; const options = { @@ -52,9 +48,9 @@ const marksyConf = { ...options.marksyConf, }; -const props = { - summary: options.summary, - context, +const props = () => ({ + summary: mock.widgetSummary, + context: mock.context, showInline: Boolean(options.inline), showHeader: Boolean(options.header), showSource: Boolean(options.source), @@ -63,115 +59,270 @@ const props = { propTablesExclude: options.propTablesExclude, styles: typeof options.styles === 'function' && options.styles, marksyConf, - maxPropObjectKeys: options.maxPropObjectKeys, - maxPropArrayLength: options.maxPropArrayLength, - maxPropsIntoLine: options.maxPropsIntoLine, - maxPropStringLength: options.maxPropStringLength, -}; + maxPropObjectKeys: maxPropObjectKeys(), + maxPropArrayLength: maxPropArrayLength(options.maxPropArrayLength), + maxPropsIntoLine: maxPropsIntoLine(options.maxPropsIntoLine), + maxPropStringLength: maxPropStringLength(options.maxPropStringLength), +}); + +storiesOf('Root Info Component (Story.js)', module) + .summary( + ` + ### + + It's a root component of **addon-info** -storiesOf('Root Component (Story.js)', module) - .addDecorator(withKnobs) - .add('default options wraps itself', () => - - + we run it in isolation with *mocked* data + + **Note**: actual components of **addon-info** are in the *preview* area. + At the same time we use addon-info itself to see component's details. + You can find this information in the **INFO** panel + ` + ) + .add('with Widget', () => + + ) - .add('default options wraps button', () => - + .add('with button', () => + ); storiesOf('Node', module) - .add('default with Story', () => + .summary( + ` + ### + + It used to display the source of story + + *parent*: **** + + *section*: **Story Source** + ` + ) + .add('info with story sourse only', () => + + + + ) + .add('default with Widget', () => } + node={} depth={0} - maxPropsIntoLine={props.maxPropsIntoLine} - maxPropObjectKeys={props.maxPropObjectKeys} - maxPropArrayLength={props.maxPropArrayLength} - maxPropStringLength={props.maxPropStringLength} + maxPropsIntoLine={props().maxPropsIntoLine} + maxPropObjectKeys={props().maxPropObjectKeys} + maxPropArrayLength={props().maxPropArrayLength} + maxPropStringLength={props().maxPropStringLength} /> ) .add('default with button', () => Press Me} depth={0} - maxPropsIntoLine={props.maxPropsIntoLine} - maxPropObjectKeys={props.maxPropObjectKeys} - maxPropArrayLength={props.maxPropArrayLength} - maxPropStringLength={props.maxPropStringLength} + maxPropsIntoLine={props().maxPropsIntoLine} + maxPropObjectKeys={props().maxPropObjectKeys} + maxPropArrayLength={props().maxPropArrayLength} + maxPropStringLength={props().maxPropStringLength} /> ); storiesOf('Props', module) - .add('default with Story', () => + .summary( + ` + ### + + It used to display all props of a component + + *parent*: **** + + *section*: **Story Source** + ` + ) + .add('default with Widget', () => } + node={} singleLine - maxPropsIntoLine={props.maxPropsIntoLine} - maxPropObjectKeys={props.maxPropObjectKeys} - maxPropArrayLength={props.maxPropArrayLength} - maxPropStringLength={props.maxPropStringLength} + maxPropsIntoLine={props().maxPropsIntoLine} + maxPropObjectKeys={props().maxPropObjectKeys} + maxPropArrayLength={props().maxPropArrayLength} + maxPropStringLength={props().maxPropStringLength} /> ) .add('default with button', () => Press Me} singleLine - maxPropsIntoLine={props.maxPropsIntoLine} - maxPropObjectKeys={props.maxPropObjectKeys} - maxPropArrayLength={props.maxPropArrayLength} - maxPropStringLength={props.maxPropStringLength} + maxPropsIntoLine={props().maxPropsIntoLine} + maxPropObjectKeys={props().maxPropObjectKeys} + maxPropArrayLength={props().maxPropArrayLength} + maxPropStringLength={props().maxPropStringLength} /> ); storiesOf('PropTable', module) - .add('default with Story', () => + .summary( + ` + ### + + It displays table with props description of components + + *parent*: **** + + *section*: **Prop Types** + ` + ) + .add('info with Prop Types only', () => + + + + ) + .add('default with Widget', () => ) .add('default with Button', () => ); -storiesOf('PropVal', module).add('default with Story', () => - -); +storiesOf('PropVal', module) + .summary( + ` + ### + + It shows default props in PropTable and prop values in Props + + *parent*: ****, **** + + *section*: **Prop Types**, **Story Source** + ` + ) + .add('default', () => + + ); storiesOf('Markdown/Code', module) - .add('example 1', () => const A = 10;} language="javascript" />) - .add('example 2', () => const A = 10;} language="javascript" />); + .summary('inline code sections in markdown') + .add('info with Markdown only', () => + + + + ) + .add('example 1', () => + + ) + .add('example 2', () => + {` + import { configure, setAddon } from '@storybook/react'; + import { withInfo, setInfoOptions } from '@storybook/addon-info'; + import { setOptions } from '@storybook/addon-options'; + + setOptions({ + downPanelInRight: true, + }) + `} + } + language="javascript" + /> + ); storiesOf('Markdown/Pre', module) + .summary('block code sections in markdown') .add('example 1', () => 
-      
const A = 10;

+      {`
+          import { configure, setAddon } from '@storybook/react';
+          import { withInfo, setInfoOptions } from '@storybook/addon-info';
+          import { setOptions } from '@storybook/addon-options';
+
+          setOptions({
+            downPanelInRight: true,
+          })
+        `}
+        }
+        language="javascript"
+      />
) .add('example 2', () => 
-      {'const A = 10;'}
+      
+        
{`
+        import { configure, setAddon } from '@storybook/react';
+        import { withInfo, setInfoOptions } from '@storybook/addon-info';
+        import { setOptions } from '@storybook/addon-options';
+
+        setOptions({
+          downPanelInRight: true,
+        })
+        `}

+
); storiesOf('Markdown/Blockquote', module) + .summary('text sections in markdown') .add('example 1', () =>
const A = 10;
@@ -182,3 +333,28 @@ storiesOf('Markdown/Blockquote', module) {'const A = 10;'}
); + +storiesOf('Mock Components', module) + .add('Widget with text', () => { + setInfoOptions({ summary: mock.widgetSummary, propTables: [mock.Widget] }); + return ; + }) + .add('Widget with emoji', () => { + setInfoOptions({ summary: mock.widgetSummary, propTables: [mock.Widget] }); + return ; + }) + .add('simple button', () => { + setInfoOptions('simple button: ``'); + return ; + }) + .add('glamorous button', () => { + setInfoOptions( + 'button from [@storybook/components](https://github.com/storybooks/storybook/tree/master/lib/components)' + ); + return ; + }); + +storiesOf('Test knobs', module).add('Widget with text', () => { + setInfoOptions({ summary: text('summary', 'hello knobs') }); + return ; +}); diff --git a/addons/info/src/components/stories/mock-data/README.md b/addons/info/src/components/stories/mock-data/README.md new file mode 100644 index 000000000000..0f78bd17cb3c --- /dev/null +++ b/addons/info/src/components/stories/mock-data/README.md @@ -0,0 +1 @@ +This folder contains examples to run components of info-addon diff --git a/addons/info/src/components/stories/mock-data/index.js b/addons/info/src/components/stories/mock-data/index.js new file mode 100644 index 000000000000..ddf2d794e3dd --- /dev/null +++ b/addons/info/src/components/stories/mock-data/index.js @@ -0,0 +1,37 @@ +import Widget from './widget'; +import markdown from './summary.md'; +import { defaultOptions, defaultMarksyConf } from '../../../defaults'; + +const widgetProps = { + size: 30, + backgroundColor: 'coral', +}; + +const widgetSummary = ` +# Widget mock + +This is example React component to be used for testing addon-info + +## Contains + +- prop types +- default props +- prop decriptions + +### prop types + +- number +- string +- bool + +`; + +export { Widget, widgetProps, widgetSummary }; +export { markdown }; + +const context = { + kind: 'Example Component', + story: 'example story', +}; + +export { defaultOptions, defaultMarksyConf, context }; diff --git a/addons/info/src/components/stories/mock-data/summary.md b/addons/info/src/components/stories/mock-data/summary.md new file mode 100644 index 000000000000..72cd673319c2 --- /dev/null +++ b/addons/info/src/components/stories/mock-data/summary.md @@ -0,0 +1,58 @@ +export default ` + +# Quid fruticumque morte + +## Indignantia factum tracto tamen + +Lorem markdownum condidit. Vittam quod modo vana **Bactrius**, oculos est maius, +**in liquitur** dividuae: pectusque. + +- Velata et qui sequenti domito ferinas miserum +- Cognita minus +- Iuppiter et sinitis corpore haec +- Forma pinetis mortemque accipiter meorum egi Erysicthona +- Litora mixtaeque tellus passim erexit +- Postquam Scythicis saevis et sermone minimus cremabo + +Muneris udis flumen quod. Meo vinci haec +[ignoscite](http://nisi.org/recentipariter.aspx) insonuit Amoris Persei +Thermodontiaca unum madebit thalamumque iniqui? + +## Tumulumque transferre memorque insopitumque leves clipei lignum + +Ipsaque parte summo, et paravi admotas te demum castique nostri, audit metuunt +inquit: vestigia? Formae potius Tritonidos et pars, iungat tum, gestare, _ardore +cum_, ausum inscribenda incingitur digitis umbram. Aello electarumque huic et +cunctatusque et verba alto atque et ignibus. + +~~~js +import { configure, setAddon } from '@storybook/react'; +import { withInfo, setInfoOptions } from '@storybook/addon-info'; +import { setOptions } from '@storybook/addon-options'; + +setOptions({ + downPanelInRight: true, +}) +~~~ + +### Inline code + +Revellit _parari cum_ quaeque sacrum gelido, colantur ${'`'}@storybook/addon-info${'`'} quae haec longe temptanti +fatigat agat: in iuvat sed, oscula. Haec dictis inani nova et [illa +mens](http://accipiter.org/vulnusredditus) quam ex lacus nulla, nam haud +numeratur radios. + +## Postquam levis nec aspera tum + +Nimiumque scopulum. Pars rupit. + +- Volatu Amor sine utere sitvs vini mitis +- Unda causa exhausta +- Cupidine ne quoque si quoquam tacitae +- Mortis sensit +- Obit non possint operum umbra laevum Telethusa +- Stetit indueret + +Luctibus tuli? Ipsa tempora corpus illa alii in sacra sepulcri sanguis nova quem +enim [aequora](http://figura.io/mittere), tenentis, mensas sed dea, non? +` diff --git a/addons/info/src/components/stories/mock-data/widget.jsx b/addons/info/src/components/stories/mock-data/widget.jsx new file mode 100644 index 000000000000..ddb79b5ab8a7 --- /dev/null +++ b/addons/info/src/components/stories/mock-data/widget.jsx @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class Widget extends React.Component { + constructor(props) { + super(props); + this.state = { + switcher: false, + }; + + this.handleClick = this.handleClick.bind(this); + } + + handleClick() {} + + render() { + const { size, backgroundColor, isText } = this.props; + + const buttonStyle = { + color: 'white', + border: '2px solid darkgray', + borderRadius: 8, + padding: 6 + size, + paddingTop: 6, + paddingBottom: 6, + margin: 20, + fontSize: size, + backgroundColor, + cursor: 'pointer', + }; + return ( + + ); + } +} + +Widget.propTypes = { + size: PropTypes.number.isRequired, + backgroundColor: PropTypes.string.isRequired, + isText: PropTypes.bool, +}; + +Widget.defaultProps = { + isText: true, +}; From 470797ff17785c26957c593b34ea3062eb61c4f3 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Sat, 19 Aug 2017 20:53:09 +0300 Subject: [PATCH 18/33] Add marksy examples to Storybook --- addons/info/package.json | 2 +- addons/info/src/components/markdown/htags.js | 6 +- addons/info/src/components/stories/index.js | 156 ++++++++++++++++++- 3 files changed, 155 insertions(+), 9 deletions(-) diff --git a/addons/info/package.json b/addons/info/package.json index f8468e67f1fd..a2bec04223c7 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -17,7 +17,7 @@ "@storybook/addons": "^3.2.0", "babel-runtime": "^6.23.0", "global": "^4.3.2", - "marksy": "^2.0.0", + "marksy": "^5.0.0", "prop-types": "^15.5.10", "react-addons-create-fragment": "^15.5.3", "react-komposer": "^2.0.0", diff --git a/addons/info/src/components/markdown/htags.js b/addons/info/src/components/markdown/htags.js index ec00e8dd1b3a..e40e9c15bda6 100644 --- a/addons/info/src/components/markdown/htags.js +++ b/addons/info/src/components/markdown/htags.js @@ -11,7 +11,7 @@ const propTypes = { id: PropTypes.string, }; -export function H1(props) { +export function H1({ id, children }) { const styles = { ...baseFonts, borderBottom: '1px solid #eee', @@ -21,8 +21,8 @@ export function H1(props) { fontSize: '40px', }; return ( -

- {props.children} +

+ {children}

); } diff --git a/addons/info/src/components/stories/index.js b/addons/info/src/components/stories/index.js index d7ef0c6c7a84..f5af43a20452 100644 --- a/addons/info/src/components/stories/index.js +++ b/addons/info/src/components/stories/index.js @@ -1,10 +1,13 @@ +/* eslint-disable react/prop-types */ + import React from 'react'; import { storiesOf, addDecorator } from '@storybook/react'; import { withInfo, setInfoOptions } from '@storybook/addon-info'; -import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'; +import { withKnobs, text, number } from '@storybook/addon-knobs'; import { Button } from '@storybook/react/demo'; +import marksy from 'marksy'; import Story from '../Story'; import Node from '../Node'; @@ -59,7 +62,7 @@ const props = () => ({ propTablesExclude: options.propTablesExclude, styles: typeof options.styles === 'function' && options.styles, marksyConf, - maxPropObjectKeys: maxPropObjectKeys(), + maxPropObjectKeys: maxPropObjectKeys(options.maxPropObjectKeys), maxPropArrayLength: maxPropArrayLength(options.maxPropArrayLength), maxPropsIntoLine: maxPropsIntoLine(options.maxPropsIntoLine), maxPropStringLength: maxPropStringLength(options.maxPropStringLength), @@ -80,12 +83,12 @@ storiesOf('Root Info Component (Story.js)', module) ` ) .add('with Widget', () => - + ) .add('with button', () => - + ); @@ -322,7 +325,7 @@ storiesOf('Markdown/Pre', module) ); storiesOf('Markdown/Blockquote', module) - .summary('text sections in markdown') + .summary('Blockquote sections in markdown') .add('example 1', () =>
const A = 10;
@@ -334,6 +337,149 @@ storiesOf('Markdown/Blockquote', module)
); +const mdCompiler = marksy({ + // Pass in whatever creates elements for your + // virtual DOM library. h('h1', {}) + createElement: React.createElement, + + // You can override the default elements with + // custom VDOM trees + elements: { + h1({ children }) { + return ( + + {children} + + ); + }, + h2({ children }) { + return ( + + {children} + + ); + }, + code({ language, children, code }) { + // const infoMarkup = { + // __html: code ? hljs.highlight('js', code).value : '', + // }; + // dangerouslySetInnerHTML={infoMarkup} + return children + ? + {children} + + :
+ + language: {language} + + 
+              
+                {code}
+              
+
+
; + }, + }, +}); + +const mdString = ` +# Hello world + +lorem + +## block code + +ipsum + +~~~js +import { configure, setAddon } from '@storybook/react'; +import { withInfo, setInfoOptions } from '@storybook/addon-info'; +import { setOptions } from '@storybook/addon-options'; + +setOptions({ + downPanelInRight: true, +}) +~~~ + +### inline code + +run \`setOptions({ downPanelInRight: true });\` + + +`; + +const demo = ` +# Some blog title + +Just need to show you some code of \`storybook-addon\` first: + +## My awesome subtitle!!! + +\`\`\`js +import { configure, setAddon } from '@storybook/react'; +import { withInfo, setInfoOptions } from '@storybook/addon-info'; +import { setOptions } from '@storybook/addon-options'; + +setOptions({ + downPanelInRight: true, +}) + +const props = () => ({ + summary: mock.widgetSummary, + context: mock.context, + showInline: Boolean(options.inline), + showHeader: Boolean(options.header), + showSource: Boolean(options.source), + hideInfoButton: Boolean(!options.infoButton), + propTables: options.propTables || null, + propTablesExclude: options.propTablesExclude, + styles: typeof options.styles === 'function' && options.styles, + marksyConf, + maxPropObjectKeys: maxPropObjectKeys(), + maxPropArrayLength: maxPropArrayLength(options.maxPropArrayLength), + maxPropsIntoLine: maxPropsIntoLine(options.maxPropsIntoLine), + maxPropStringLength: maxPropStringLength(options.maxPropStringLength), +}); +\`\`\` + + + Need to tell you something over here + And over here + +`; + +storiesOf('Markdown/marksy', module) + .summary('Direct compile with marksy') + .add('example 1', () => +
+ {mdCompiler(demo).tree} +
+ ) + .add('example 2 toc', () => +
+ {mdCompiler(mdString).tree} +
+ ); + storiesOf('Mock Components', module) .add('Widget with text', () => { setInfoOptions({ summary: mock.widgetSummary, propTables: [mock.Widget] }); From 8a8460ce31bdbee446c1c18bd86cb7e32e572bc2 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 21 Aug 2017 01:53:01 +0300 Subject: [PATCH 19/33] Switch to remark markdown compiler --- addons/info/package.json | 6 + addons/info/src/components/Story.js | 5 +- .../info/src/components/markdown/compiler.js | 160 ++++++++++++++++++ .../components/markdown/hljs-styles/agate.css | 108 ++++++++++++ .../markdown/hljs-styles/androidstudio.css | 66 ++++++++ .../markdown/hljs-styles/arduino-light.css | 88 ++++++++++ .../components/markdown/hljs-styles/arta.css | 73 ++++++++ .../markdown/hljs-styles/ascetic.css | 45 +++++ .../hljs-styles/atelier-cave-dark.css | 83 +++++++++ .../hljs-styles/atelier-cave-light.css | 85 ++++++++++ .../hljs-styles/atelier-dune-dark.css | 69 ++++++++ .../hljs-styles/atelier-dune-light.css | 69 ++++++++ .../hljs-styles/atelier-estuary-dark.css | 84 +++++++++ .../hljs-styles/atelier-estuary-light.css | 84 +++++++++ .../hljs-styles/atelier-forest-dark.css | 69 ++++++++ .../hljs-styles/atelier-forest-light.css | 69 ++++++++ .../hljs-styles/atelier-heath-dark.css | 69 ++++++++ .../hljs-styles/atelier-heath-light.css | 69 ++++++++ .../hljs-styles/atelier-lakeside-dark.css | 69 ++++++++ .../hljs-styles/atelier-lakeside-light.css | 69 ++++++++ .../hljs-styles/atelier-plateau-dark.css | 84 +++++++++ .../hljs-styles/atelier-plateau-light.css | 84 +++++++++ .../hljs-styles/atelier-savanna-dark.css | 84 +++++++++ .../hljs-styles/atelier-savanna-light.css | 84 +++++++++ .../hljs-styles/atelier-seaside-dark.css | 69 ++++++++ .../hljs-styles/atelier-seaside-light.css | 69 ++++++++ .../hljs-styles/atelier-sulphurpool-dark.css | 69 ++++++++ .../hljs-styles/atelier-sulphurpool-light.css | 69 ++++++++ .../markdown/hljs-styles/atom-one-dark.css | 96 +++++++++++ .../markdown/hljs-styles/atom-one-light.css | 96 +++++++++++ .../markdown/hljs-styles/brown-paper.css | 64 +++++++ .../markdown/hljs-styles/brown-papersq.png | Bin 0 -> 18198 bytes .../markdown/hljs-styles/codepen-embed.css | 60 +++++++ .../markdown/hljs-styles/color-brewer.css | 71 ++++++++ .../markdown/hljs-styles/darcula.css | 77 +++++++++ .../components/markdown/hljs-styles/dark.css | 63 +++++++ .../markdown/hljs-styles/darkula.css | 6 + .../markdown/hljs-styles/default.css | 99 +++++++++++ .../components/markdown/hljs-styles/docco.css | 97 +++++++++++ .../markdown/hljs-styles/dracula.css | 76 +++++++++ .../components/markdown/hljs-styles/far.css | 71 ++++++++ .../markdown/hljs-styles/foundation.css | 88 ++++++++++ .../markdown/hljs-styles/github-gist.css | 71 ++++++++ .../markdown/hljs-styles/github.css | 99 +++++++++++ .../markdown/hljs-styles/googlecode.css | 89 ++++++++++ .../markdown/hljs-styles/grayscale.css | 101 +++++++++++ .../markdown/hljs-styles/gruvbox-dark.css | 108 ++++++++++++ .../markdown/hljs-styles/gruvbox-light.css | 108 ++++++++++++ .../markdown/hljs-styles/hopscotch.css | 83 +++++++++ .../markdown/hljs-styles/hybrid.css | 102 +++++++++++ .../components/markdown/hljs-styles/idea.css | 97 +++++++++++ .../markdown/hljs-styles/ir-black.css | 73 ++++++++ .../markdown/hljs-styles/kimbie.dark.css | 74 ++++++++ .../markdown/hljs-styles/kimbie.light.css | 74 ++++++++ .../markdown/hljs-styles/magula.css | 70 ++++++++ .../markdown/hljs-styles/mono-blue.css | 59 +++++++ .../markdown/hljs-styles/monokai-sublime.css | 83 +++++++++ .../markdown/hljs-styles/monokai.css | 70 ++++++++ .../markdown/hljs-styles/obsidian.css | 88 ++++++++++ .../components/markdown/hljs-styles/ocean.css | 74 ++++++++ .../markdown/hljs-styles/paraiso-dark.css | 72 ++++++++ .../markdown/hljs-styles/paraiso-light.css | 72 ++++++++ .../markdown/hljs-styles/pojoaque.css | 83 +++++++++ .../markdown/hljs-styles/pojoaque.jpg | Bin 0 -> 1186 bytes .../markdown/hljs-styles/purebasic.css | 96 +++++++++++ .../markdown/hljs-styles/qtcreator_dark.css | 83 +++++++++ .../markdown/hljs-styles/qtcreator_light.css | 83 +++++++++ .../markdown/hljs-styles/railscasts.css | 106 ++++++++++++ .../markdown/hljs-styles/rainbow.css | 85 ++++++++++ .../markdown/hljs-styles/routeros.css | 108 ++++++++++++ .../markdown/hljs-styles/school-book.css | 72 ++++++++ .../markdown/hljs-styles/school-book.png | Bin 0 -> 486 bytes .../markdown/hljs-styles/solarized-dark.css | 84 +++++++++ .../markdown/hljs-styles/solarized-light.css | 84 +++++++++ .../markdown/hljs-styles/sunburst.css | 102 +++++++++++ .../hljs-styles/tomorrow-night-blue.css | 75 ++++++++ .../hljs-styles/tomorrow-night-bright.css | 74 ++++++++ .../hljs-styles/tomorrow-night-eighties.css | 74 ++++++++ .../markdown/hljs-styles/tomorrow-night.css | 75 ++++++++ .../markdown/hljs-styles/tomorrow.css | 72 ++++++++ .../components/markdown/hljs-styles/vs.css | 68 ++++++++ .../markdown/hljs-styles/vs2015.css | 115 +++++++++++++ .../components/markdown/hljs-styles/xcode.css | 93 ++++++++++ .../components/markdown/hljs-styles/xt256.css | 92 ++++++++++ .../markdown/hljs-styles/zenburn.css | 80 +++++++++ addons/info/src/components/stories/index.js | 57 +++++-- .../src/components/stories/mock-data/index.js | 25 ++- 87 files changed, 6548 insertions(+), 20 deletions(-) create mode 100644 addons/info/src/components/markdown/compiler.js create mode 100644 addons/info/src/components/markdown/hljs-styles/agate.css create mode 100644 addons/info/src/components/markdown/hljs-styles/androidstudio.css create mode 100644 addons/info/src/components/markdown/hljs-styles/arduino-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/arta.css create mode 100644 addons/info/src/components/markdown/hljs-styles/ascetic.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-cave-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-cave-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-dune-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-dune-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-estuary-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-estuary-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-forest-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-forest-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-heath-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-heath-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-lakeside-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-lakeside-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-plateau-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-plateau-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-savanna-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-savanna-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-seaside-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-seaside-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-sulphurpool-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atelier-sulphurpool-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atom-one-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/atom-one-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/brown-paper.css create mode 100644 addons/info/src/components/markdown/hljs-styles/brown-papersq.png create mode 100644 addons/info/src/components/markdown/hljs-styles/codepen-embed.css create mode 100644 addons/info/src/components/markdown/hljs-styles/color-brewer.css create mode 100644 addons/info/src/components/markdown/hljs-styles/darcula.css create mode 100644 addons/info/src/components/markdown/hljs-styles/dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/darkula.css create mode 100644 addons/info/src/components/markdown/hljs-styles/default.css create mode 100644 addons/info/src/components/markdown/hljs-styles/docco.css create mode 100644 addons/info/src/components/markdown/hljs-styles/dracula.css create mode 100644 addons/info/src/components/markdown/hljs-styles/far.css create mode 100644 addons/info/src/components/markdown/hljs-styles/foundation.css create mode 100644 addons/info/src/components/markdown/hljs-styles/github-gist.css create mode 100644 addons/info/src/components/markdown/hljs-styles/github.css create mode 100644 addons/info/src/components/markdown/hljs-styles/googlecode.css create mode 100644 addons/info/src/components/markdown/hljs-styles/grayscale.css create mode 100644 addons/info/src/components/markdown/hljs-styles/gruvbox-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/gruvbox-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/hopscotch.css create mode 100644 addons/info/src/components/markdown/hljs-styles/hybrid.css create mode 100644 addons/info/src/components/markdown/hljs-styles/idea.css create mode 100644 addons/info/src/components/markdown/hljs-styles/ir-black.css create mode 100644 addons/info/src/components/markdown/hljs-styles/kimbie.dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/kimbie.light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/magula.css create mode 100644 addons/info/src/components/markdown/hljs-styles/mono-blue.css create mode 100644 addons/info/src/components/markdown/hljs-styles/monokai-sublime.css create mode 100644 addons/info/src/components/markdown/hljs-styles/monokai.css create mode 100644 addons/info/src/components/markdown/hljs-styles/obsidian.css create mode 100644 addons/info/src/components/markdown/hljs-styles/ocean.css create mode 100644 addons/info/src/components/markdown/hljs-styles/paraiso-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/paraiso-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/pojoaque.css create mode 100644 addons/info/src/components/markdown/hljs-styles/pojoaque.jpg create mode 100644 addons/info/src/components/markdown/hljs-styles/purebasic.css create mode 100644 addons/info/src/components/markdown/hljs-styles/qtcreator_dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/qtcreator_light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/railscasts.css create mode 100644 addons/info/src/components/markdown/hljs-styles/rainbow.css create mode 100644 addons/info/src/components/markdown/hljs-styles/routeros.css create mode 100644 addons/info/src/components/markdown/hljs-styles/school-book.css create mode 100644 addons/info/src/components/markdown/hljs-styles/school-book.png create mode 100644 addons/info/src/components/markdown/hljs-styles/solarized-dark.css create mode 100644 addons/info/src/components/markdown/hljs-styles/solarized-light.css create mode 100644 addons/info/src/components/markdown/hljs-styles/sunburst.css create mode 100644 addons/info/src/components/markdown/hljs-styles/tomorrow-night-blue.css create mode 100644 addons/info/src/components/markdown/hljs-styles/tomorrow-night-bright.css create mode 100644 addons/info/src/components/markdown/hljs-styles/tomorrow-night-eighties.css create mode 100644 addons/info/src/components/markdown/hljs-styles/tomorrow-night.css create mode 100644 addons/info/src/components/markdown/hljs-styles/tomorrow.css create mode 100644 addons/info/src/components/markdown/hljs-styles/vs.css create mode 100644 addons/info/src/components/markdown/hljs-styles/vs2015.css create mode 100644 addons/info/src/components/markdown/hljs-styles/xcode.css create mode 100644 addons/info/src/components/markdown/hljs-styles/xt256.css create mode 100644 addons/info/src/components/markdown/hljs-styles/zenburn.css diff --git a/addons/info/package.json b/addons/info/package.json index a2bec04223c7..ab031072b110 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -21,6 +21,12 @@ "prop-types": "^15.5.10", "react-addons-create-fragment": "^15.5.3", "react-komposer": "^2.0.0", + "rehype-highlight": "^2.0.1", + "rehype-react": "^3.0.0", + "remark-github": "^7.0.1", + "remark-parse": "^4.0.0", + "remark-rehype": "^2.0.1", + "unified": "^6.1.5", "util-deprecate": "^1.0.2" }, "devDependencies": { diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 53cbb5c5fe65..63b6db618a41 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -5,6 +5,8 @@ import PropTypes from 'prop-types'; import global from 'global'; import marksy from 'marksy'; +import rmkCompiler from './markdown/compiler'; +import './markdown/hljs-styles/github.css'; import PropTable from './PropTable'; import Node from './Node'; @@ -263,7 +265,8 @@ export default class Story extends React.Component { const source = lines.map(s => s.slice(padding)).join('\n'); return (
- {this.marksy(source).tree} + {rmkCompiler(source)} +
); } diff --git a/addons/info/src/components/markdown/compiler.js b/addons/info/src/components/markdown/compiler.js new file mode 100644 index 000000000000..2374bd9ecd81 --- /dev/null +++ b/addons/info/src/components/markdown/compiler.js @@ -0,0 +1,160 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import unified from 'unified'; +import remarkParser from 'remark-parse'; +import github from 'remark-github'; +import remarkRehype from 'remark-rehype'; +import highlight from 'rehype-highlight'; +import rehypeReact from 'rehype-react'; + +const baseFonts = + '-apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif'; + +const propTypes = { + props: PropTypes.object, + children: PropTypes.array, +}; + +const defaultProps = { + props: {}, + children: [], +}; + +const components = { + p: ({ props, children }) => +

+ {children} +

, + a_of: ({ props, children }) => + + [props: {props} ] + {children} + , + ul: ({ props, children }) => +
    + {children} +
, + ol: ({ props, children }) => +
    + {children} +
, + strong: ({ props, children }) => + + {children} + , + code: ({ props, children }) => + 1 + ? { + fontSize: 14, + } + : { + border: '1px solid hsl(0, 0%, 80%)', + borderRadius: 4, + // color: '#0366d6', + backgroundColor: 'hsl(0, 0%, 90%)', + padding: '2px 4px', + margin: '2px 6px', + } + } + > + {children} + , + pre: ({ props, children }) => + 
+      {children}
+
, +}; + +components.p.propTypes = propTypes; +components.a_of.propTypes = propTypes; +components.ul.propTypes = propTypes; +components.ol.propTypes = propTypes; +components.strong.propTypes = propTypes; +components.code.propTypes = propTypes; +components.pre.propTypes = propTypes; + +components.p.defaultProps = defaultProps; +components.a_of.defaultProps = defaultProps; +components.ul.defaultProps = defaultProps; +components.ol.defaultProps = defaultProps; +components.strong.defaultProps = defaultProps; +components.code.defaultProps = defaultProps; +components.pre.defaultProps = defaultProps; + +let options = { + repository: 'https://github.com/storybooks/storybook', + components, + createElement: React.createElement, +}; + +function setupProcessor() { + return unified() + .use(remarkParser) + .use(github, { + repository: options.repository, + }) + .use(remarkRehype) + .use(highlight) + .use(rehypeReact, { + createElement: options.createElement, + components: options.components, + }); +} + +let processor = setupProcessor(); + +export function setOptions(newOptions) { + options = { + ...options, + ...newOptions, + }; + processor = setupProcessor(); +} + +export default function compile(markdown) { + return processor.processSync(markdown).contents; +} diff --git a/addons/info/src/components/markdown/hljs-styles/agate.css b/addons/info/src/components/markdown/hljs-styles/agate.css new file mode 100644 index 000000000000..8d64547c5876 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/agate.css @@ -0,0 +1,108 @@ +/*! + * Agate by Taufik Nurrohman + * ---------------------------------------------------- + * + * #ade5fc + * #a2fca2 + * #c6b4f0 + * #d36363 + * #fcc28c + * #fc9b9b + * #ffa + * #fff + * #333 + * #62c8f3 + * #888 + * + */ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #333; + color: white; +} + +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-code, +.hljs-emphasis { + font-style: italic; +} + +.hljs-tag { + color: #62c8f3; +} + +.hljs-variable, +.hljs-template-variable, +.hljs-selector-id, +.hljs-selector-class { + color: #ade5fc; +} + +.hljs-string, +.hljs-bullet { + color: #a2fca2; +} + +.hljs-type, +.hljs-title, +.hljs-section, +.hljs-attribute, +.hljs-quote, +.hljs-built_in, +.hljs-builtin-name { + color: #ffa; +} + +.hljs-number, +.hljs-symbol, +.hljs-bullet { + color: #d36363; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal { + color: #fcc28c; +} + +.hljs-comment, +.hljs-deletion, +.hljs-code { + color: #888; +} + +.hljs-regexp, +.hljs-link { + color: #c6b4f0; +} + +.hljs-meta { + color: #fc9b9b; +} + +.hljs-deletion { + background-color: #fc9b9b; + color: #333; +} + +.hljs-addition { + background-color: #a2fca2; + color: #333; +} + +.hljs a { + color: inherit; +} + +.hljs a:focus, +.hljs a:hover { + color: inherit; + text-decoration: underline; +} diff --git a/addons/info/src/components/markdown/hljs-styles/androidstudio.css b/addons/info/src/components/markdown/hljs-styles/androidstudio.css new file mode 100644 index 000000000000..bc8e473b5934 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/androidstudio.css @@ -0,0 +1,66 @@ +/* +Date: 24 Fev 2015 +Author: Pedro Oliveira +*/ + +.hljs { + color: #a9b7c6; + background: #282b2e; + display: block; + overflow-x: auto; + padding: 0.5em; +} + +.hljs-number, +.hljs-literal, +.hljs-symbol, +.hljs-bullet { + color: #6897BB; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-deletion { + color: #cc7832; +} + +.hljs-variable, +.hljs-template-variable, +.hljs-link { + color: #629755; +} + +.hljs-comment, +.hljs-quote { + color: #808080; +} + +.hljs-meta { + color: #bbb529; +} + +.hljs-string, +.hljs-attribute, +.hljs-addition { + color: #6A8759; +} + +.hljs-section, +.hljs-title, +.hljs-type { + color: #ffc66d; +} + +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #e8bf6a; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/arduino-light.css b/addons/info/src/components/markdown/hljs-styles/arduino-light.css new file mode 100644 index 000000000000..4b8b7fd3c935 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/arduino-light.css @@ -0,0 +1,88 @@ +/* + +Arduino® Light Theme - Stefania Mellai + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #FFFFFF; +} + +.hljs, +.hljs-subst { + color: #434f54; +} + +.hljs-keyword, +.hljs-attribute, +.hljs-selector-tag, +.hljs-doctag, +.hljs-name { + color: #00979D; +} + +.hljs-built_in, +.hljs-literal, +.hljs-bullet, +.hljs-code, +.hljs-addition { + color: #D35400; +} + +.hljs-regexp, +.hljs-symbol, +.hljs-variable, +.hljs-template-variable, +.hljs-link, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #00979D; +} + +.hljs-type, +.hljs-string, +.hljs-selector-id, +.hljs-selector-class, +.hljs-quote, +.hljs-template-tag, +.hljs-deletion { + color: #005C5F; +} + +.hljs-title, +.hljs-section { + color: #880000; + font-weight: bold; +} + +.hljs-comment { + color: rgba(149,165,166,.8); +} + +.hljs-meta-keyword { + color: #728E00; +} + +.hljs-meta { + color: #728E00; + color: #434f54; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-function { + color: #728E00; +} + +.hljs-number { + color: #8A7B52; +} diff --git a/addons/info/src/components/markdown/hljs-styles/arta.css b/addons/info/src/components/markdown/hljs-styles/arta.css new file mode 100644 index 000000000000..75ef3a9e5955 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/arta.css @@ -0,0 +1,73 @@ +/* +Date: 17.V.2011 +Author: pumbur +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #222; +} + +.hljs, +.hljs-subst { + color: #aaa; +} + +.hljs-section { + color: #fff; +} + +.hljs-comment, +.hljs-quote, +.hljs-meta { + color: #444; +} + +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-regexp { + color: #ffcc33; +} + +.hljs-number, +.hljs-addition { + color: #00cc66; +} + +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-template-variable, +.hljs-attribute, +.hljs-link { + color: #32aaee; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #6644aa; +} + +.hljs-title, +.hljs-variable, +.hljs-deletion, +.hljs-template-tag { + color: #bb1166; +} + +.hljs-section, +.hljs-doctag, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/ascetic.css b/addons/info/src/components/markdown/hljs-styles/ascetic.css new file mode 100644 index 000000000000..48397e889dd1 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/ascetic.css @@ -0,0 +1,45 @@ +/* + +Original style from softwaremaniacs.org (c) Ivan Sagalaev + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: white; + color: black; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-symbol, +.hljs-bullet, +.hljs-section, +.hljs-addition, +.hljs-attribute, +.hljs-link { + color: #888; +} + +.hljs-comment, +.hljs-quote, +.hljs-meta, +.hljs-deletion { + color: #ccc; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-section, +.hljs-name, +.hljs-type, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-cave-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-cave-dark.css new file mode 100644 index 000000000000..65428f3b12a2 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-cave-dark.css @@ -0,0 +1,83 @@ +/* Base16 Atelier Cave Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Cave Comment */ +.hljs-comment, +.hljs-quote { + color: #7e7887; +} + +/* Atelier-Cave Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-regexp, +.hljs-link, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #be4678; +} + +/* Atelier-Cave Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #aa573c; +} + +/* Atelier-Cave Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #2a9292; +} + +/* Atelier-Cave Blue */ +.hljs-title, +.hljs-section { + color: #576ddb; +} + +/* Atelier-Cave Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #955ae7; +} + +.hljs-deletion, +.hljs-addition { + color: #19171c; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #be4678; +} + +.hljs-addition { + background-color: #2a9292; +} + +.hljs { + display: block; + overflow-x: auto; + background: #19171c; + color: #8b8792; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-cave-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-cave-light.css new file mode 100644 index 000000000000..b419f9fd8f87 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-cave-light.css @@ -0,0 +1,85 @@ +/* Base16 Atelier Cave Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Cave Comment */ +.hljs-comment, +.hljs-quote { + color: #655f6d; +} + +/* Atelier-Cave Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #be4678; +} + +/* Atelier-Cave Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #aa573c; +} + +/* Atelier-Cave Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #2a9292; +} + +/* Atelier-Cave Blue */ +.hljs-title, +.hljs-section { + color: #576ddb; +} + +/* Atelier-Cave Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #955ae7; +} + +.hljs-deletion, +.hljs-addition { + color: #19171c; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #be4678; +} + +.hljs-addition { + background-color: #2a9292; +} + +.hljs { + display: block; + overflow-x: auto; + background: #efecf4; + color: #585260; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-dune-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-dune-dark.css new file mode 100644 index 000000000000..1684f5225af9 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-dune-dark.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Dune Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Dune Comment */ +.hljs-comment, +.hljs-quote { + color: #999580; +} + +/* Atelier-Dune Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #d73737; +} + +/* Atelier-Dune Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #b65611; +} + +/* Atelier-Dune Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #60ac39; +} + +/* Atelier-Dune Blue */ +.hljs-title, +.hljs-section { + color: #6684e1; +} + +/* Atelier-Dune Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #b854d4; +} + +.hljs { + display: block; + overflow-x: auto; + background: #20201d; + color: #a6a28c; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-dune-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-dune-light.css new file mode 100644 index 000000000000..547719de8262 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-dune-light.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Dune Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Dune Comment */ +.hljs-comment, +.hljs-quote { + color: #7d7a68; +} + +/* Atelier-Dune Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #d73737; +} + +/* Atelier-Dune Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #b65611; +} + +/* Atelier-Dune Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #60ac39; +} + +/* Atelier-Dune Blue */ +.hljs-title, +.hljs-section { + color: #6684e1; +} + +/* Atelier-Dune Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #b854d4; +} + +.hljs { + display: block; + overflow-x: auto; + background: #fefbec; + color: #6e6b5e; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-estuary-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-estuary-dark.css new file mode 100644 index 000000000000..a5e507187e95 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-estuary-dark.css @@ -0,0 +1,84 @@ +/* Base16 Atelier Estuary Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Estuary Comment */ +.hljs-comment, +.hljs-quote { + color: #878573; +} + +/* Atelier-Estuary Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #ba6236; +} + +/* Atelier-Estuary Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #ae7313; +} + +/* Atelier-Estuary Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #7d9726; +} + +/* Atelier-Estuary Blue */ +.hljs-title, +.hljs-section { + color: #36a166; +} + +/* Atelier-Estuary Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #5f9182; +} + +.hljs-deletion, +.hljs-addition { + color: #22221b; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #ba6236; +} + +.hljs-addition { + background-color: #7d9726; +} + +.hljs { + display: block; + overflow-x: auto; + background: #22221b; + color: #929181; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-estuary-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-estuary-light.css new file mode 100644 index 000000000000..1daee5d98556 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-estuary-light.css @@ -0,0 +1,84 @@ +/* Base16 Atelier Estuary Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Estuary Comment */ +.hljs-comment, +.hljs-quote { + color: #6c6b5a; +} + +/* Atelier-Estuary Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #ba6236; +} + +/* Atelier-Estuary Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #ae7313; +} + +/* Atelier-Estuary Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #7d9726; +} + +/* Atelier-Estuary Blue */ +.hljs-title, +.hljs-section { + color: #36a166; +} + +/* Atelier-Estuary Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #5f9182; +} + +.hljs-deletion, +.hljs-addition { + color: #22221b; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #ba6236; +} + +.hljs-addition { + background-color: #7d9726; +} + +.hljs { + display: block; + overflow-x: auto; + background: #f4f3ec; + color: #5f5e4e; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-forest-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-forest-dark.css new file mode 100644 index 000000000000..0ef4fae31748 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-forest-dark.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Forest Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Forest Comment */ +.hljs-comment, +.hljs-quote { + color: #9c9491; +} + +/* Atelier-Forest Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #f22c40; +} + +/* Atelier-Forest Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #df5320; +} + +/* Atelier-Forest Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #7b9726; +} + +/* Atelier-Forest Blue */ +.hljs-title, +.hljs-section { + color: #407ee7; +} + +/* Atelier-Forest Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #6666ea; +} + +.hljs { + display: block; + overflow-x: auto; + background: #1b1918; + color: #a8a19f; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-forest-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-forest-light.css new file mode 100644 index 000000000000..bbedde18a0a8 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-forest-light.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Forest Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Forest Comment */ +.hljs-comment, +.hljs-quote { + color: #766e6b; +} + +/* Atelier-Forest Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #f22c40; +} + +/* Atelier-Forest Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #df5320; +} + +/* Atelier-Forest Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #7b9726; +} + +/* Atelier-Forest Blue */ +.hljs-title, +.hljs-section { + color: #407ee7; +} + +/* Atelier-Forest Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #6666ea; +} + +.hljs { + display: block; + overflow-x: auto; + background: #f1efee; + color: #68615e; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-heath-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-heath-dark.css new file mode 100644 index 000000000000..fe01ff721b9d --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-heath-dark.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Heath Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Heath Comment */ +.hljs-comment, +.hljs-quote { + color: #9e8f9e; +} + +/* Atelier-Heath Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #ca402b; +} + +/* Atelier-Heath Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #a65926; +} + +/* Atelier-Heath Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #918b3b; +} + +/* Atelier-Heath Blue */ +.hljs-title, +.hljs-section { + color: #516aec; +} + +/* Atelier-Heath Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #7b59c0; +} + +.hljs { + display: block; + overflow-x: auto; + background: #1b181b; + color: #ab9bab; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-heath-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-heath-light.css new file mode 100644 index 000000000000..ee43786d12e9 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-heath-light.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Heath Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Heath Comment */ +.hljs-comment, +.hljs-quote { + color: #776977; +} + +/* Atelier-Heath Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #ca402b; +} + +/* Atelier-Heath Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #a65926; +} + +/* Atelier-Heath Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #918b3b; +} + +/* Atelier-Heath Blue */ +.hljs-title, +.hljs-section { + color: #516aec; +} + +/* Atelier-Heath Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #7b59c0; +} + +.hljs { + display: block; + overflow-x: auto; + background: #f7f3f7; + color: #695d69; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-lakeside-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-lakeside-dark.css new file mode 100644 index 000000000000..a937d3bf5f72 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-lakeside-dark.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Lakeside Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Lakeside Comment */ +.hljs-comment, +.hljs-quote { + color: #7195a8; +} + +/* Atelier-Lakeside Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #d22d72; +} + +/* Atelier-Lakeside Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #935c25; +} + +/* Atelier-Lakeside Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #568c3b; +} + +/* Atelier-Lakeside Blue */ +.hljs-title, +.hljs-section { + color: #257fad; +} + +/* Atelier-Lakeside Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #6b6bb8; +} + +.hljs { + display: block; + overflow-x: auto; + background: #161b1d; + color: #7ea2b4; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-lakeside-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-lakeside-light.css new file mode 100644 index 000000000000..6c7e8f9ef2d2 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-lakeside-light.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Lakeside Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Lakeside Comment */ +.hljs-comment, +.hljs-quote { + color: #5a7b8c; +} + +/* Atelier-Lakeside Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #d22d72; +} + +/* Atelier-Lakeside Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #935c25; +} + +/* Atelier-Lakeside Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #568c3b; +} + +/* Atelier-Lakeside Blue */ +.hljs-title, +.hljs-section { + color: #257fad; +} + +/* Atelier-Lakeside Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #6b6bb8; +} + +.hljs { + display: block; + overflow-x: auto; + background: #ebf8ff; + color: #516d7b; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-plateau-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-plateau-dark.css new file mode 100644 index 000000000000..3bb052693c1c --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-plateau-dark.css @@ -0,0 +1,84 @@ +/* Base16 Atelier Plateau Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Plateau Comment */ +.hljs-comment, +.hljs-quote { + color: #7e7777; +} + +/* Atelier-Plateau Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #ca4949; +} + +/* Atelier-Plateau Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #b45a3c; +} + +/* Atelier-Plateau Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #4b8b8b; +} + +/* Atelier-Plateau Blue */ +.hljs-title, +.hljs-section { + color: #7272ca; +} + +/* Atelier-Plateau Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #8464c4; +} + +.hljs-deletion, +.hljs-addition { + color: #1b1818; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #ca4949; +} + +.hljs-addition { + background-color: #4b8b8b; +} + +.hljs { + display: block; + overflow-x: auto; + background: #1b1818; + color: #8a8585; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-plateau-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-plateau-light.css new file mode 100644 index 000000000000..5f0222bec1f3 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-plateau-light.css @@ -0,0 +1,84 @@ +/* Base16 Atelier Plateau Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Plateau Comment */ +.hljs-comment, +.hljs-quote { + color: #655d5d; +} + +/* Atelier-Plateau Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #ca4949; +} + +/* Atelier-Plateau Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #b45a3c; +} + +/* Atelier-Plateau Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #4b8b8b; +} + +/* Atelier-Plateau Blue */ +.hljs-title, +.hljs-section { + color: #7272ca; +} + +/* Atelier-Plateau Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #8464c4; +} + +.hljs-deletion, +.hljs-addition { + color: #1b1818; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #ca4949; +} + +.hljs-addition { + background-color: #4b8b8b; +} + +.hljs { + display: block; + overflow-x: auto; + background: #f4ecec; + color: #585050; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-savanna-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-savanna-dark.css new file mode 100644 index 000000000000..38f831431c37 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-savanna-dark.css @@ -0,0 +1,84 @@ +/* Base16 Atelier Savanna Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Savanna Comment */ +.hljs-comment, +.hljs-quote { + color: #78877d; +} + +/* Atelier-Savanna Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #b16139; +} + +/* Atelier-Savanna Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #9f713c; +} + +/* Atelier-Savanna Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #489963; +} + +/* Atelier-Savanna Blue */ +.hljs-title, +.hljs-section { + color: #478c90; +} + +/* Atelier-Savanna Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #55859b; +} + +.hljs-deletion, +.hljs-addition { + color: #171c19; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #b16139; +} + +.hljs-addition { + background-color: #489963; +} + +.hljs { + display: block; + overflow-x: auto; + background: #171c19; + color: #87928a; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-savanna-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-savanna-light.css new file mode 100644 index 000000000000..1ccd7c6858f9 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-savanna-light.css @@ -0,0 +1,84 @@ +/* Base16 Atelier Savanna Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Savanna Comment */ +.hljs-comment, +.hljs-quote { + color: #5f6d64; +} + +/* Atelier-Savanna Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #b16139; +} + +/* Atelier-Savanna Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #9f713c; +} + +/* Atelier-Savanna Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #489963; +} + +/* Atelier-Savanna Blue */ +.hljs-title, +.hljs-section { + color: #478c90; +} + +/* Atelier-Savanna Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #55859b; +} + +.hljs-deletion, +.hljs-addition { + color: #171c19; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #b16139; +} + +.hljs-addition { + background-color: #489963; +} + +.hljs { + display: block; + overflow-x: auto; + background: #ecf4ee; + color: #526057; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-seaside-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-seaside-dark.css new file mode 100644 index 000000000000..df29949c69f5 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-seaside-dark.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Seaside Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Seaside Comment */ +.hljs-comment, +.hljs-quote { + color: #809980; +} + +/* Atelier-Seaside Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #e6193c; +} + +/* Atelier-Seaside Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #87711d; +} + +/* Atelier-Seaside Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #29a329; +} + +/* Atelier-Seaside Blue */ +.hljs-title, +.hljs-section { + color: #3d62f5; +} + +/* Atelier-Seaside Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #ad2bee; +} + +.hljs { + display: block; + overflow-x: auto; + background: #131513; + color: #8ca68c; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-seaside-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-seaside-light.css new file mode 100644 index 000000000000..9d960f29f385 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-seaside-light.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Seaside Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Seaside Comment */ +.hljs-comment, +.hljs-quote { + color: #687d68; +} + +/* Atelier-Seaside Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #e6193c; +} + +/* Atelier-Seaside Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #87711d; +} + +/* Atelier-Seaside Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #29a329; +} + +/* Atelier-Seaside Blue */ +.hljs-title, +.hljs-section { + color: #3d62f5; +} + +/* Atelier-Seaside Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #ad2bee; +} + +.hljs { + display: block; + overflow-x: auto; + background: #f4fbf4; + color: #5e6e5e; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-sulphurpool-dark.css b/addons/info/src/components/markdown/hljs-styles/atelier-sulphurpool-dark.css new file mode 100644 index 000000000000..c2ab7938d843 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-sulphurpool-dark.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Sulphurpool Dark - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Sulphurpool Comment */ +.hljs-comment, +.hljs-quote { + color: #898ea4; +} + +/* Atelier-Sulphurpool Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #c94922; +} + +/* Atelier-Sulphurpool Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #c76b29; +} + +/* Atelier-Sulphurpool Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #ac9739; +} + +/* Atelier-Sulphurpool Blue */ +.hljs-title, +.hljs-section { + color: #3d8fd1; +} + +/* Atelier-Sulphurpool Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #6679cc; +} + +.hljs { + display: block; + overflow-x: auto; + background: #202746; + color: #979db4; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atelier-sulphurpool-light.css b/addons/info/src/components/markdown/hljs-styles/atelier-sulphurpool-light.css new file mode 100644 index 000000000000..96c47d086081 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atelier-sulphurpool-light.css @@ -0,0 +1,69 @@ +/* Base16 Atelier Sulphurpool Light - Theme */ +/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) */ +/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ + +/* Atelier-Sulphurpool Comment */ +.hljs-comment, +.hljs-quote { + color: #6b7394; +} + +/* Atelier-Sulphurpool Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-regexp, +.hljs-link, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #c94922; +} + +/* Atelier-Sulphurpool Orange */ +.hljs-number, +.hljs-meta, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #c76b29; +} + +/* Atelier-Sulphurpool Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet { + color: #ac9739; +} + +/* Atelier-Sulphurpool Blue */ +.hljs-title, +.hljs-section { + color: #3d8fd1; +} + +/* Atelier-Sulphurpool Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #6679cc; +} + +.hljs { + display: block; + overflow-x: auto; + background: #f5f7ff; + color: #5e6687; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atom-one-dark.css b/addons/info/src/components/markdown/hljs-styles/atom-one-dark.css new file mode 100644 index 000000000000..1616aafe3157 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atom-one-dark.css @@ -0,0 +1,96 @@ +/* + +Atom One Dark by Daniel Gamage +Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax + +base: #282c34 +mono-1: #abb2bf +mono-2: #818896 +mono-3: #5c6370 +hue-1: #56b6c2 +hue-2: #61aeee +hue-3: #c678dd +hue-4: #98c379 +hue-5: #e06c75 +hue-5-2: #be5046 +hue-6: #d19a66 +hue-6-2: #e6c07b + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #abb2bf; + background: #282c34; +} + +.hljs-comment, +.hljs-quote { + color: #5c6370; + font-style: italic; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-formula { + color: #c678dd; +} + +.hljs-section, +.hljs-name, +.hljs-selector-tag, +.hljs-deletion, +.hljs-subst { + color: #e06c75; +} + +.hljs-literal { + color: #56b6c2; +} + +.hljs-string, +.hljs-regexp, +.hljs-addition, +.hljs-attribute, +.hljs-meta-string { + color: #98c379; +} + +.hljs-built_in, +.hljs-class .hljs-title { + color: #e6c07b; +} + +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-type, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-number { + color: #d19a66; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-selector-id, +.hljs-title { + color: #61aeee; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-link { + text-decoration: underline; +} diff --git a/addons/info/src/components/markdown/hljs-styles/atom-one-light.css b/addons/info/src/components/markdown/hljs-styles/atom-one-light.css new file mode 100644 index 000000000000..d5bd1d2a9a3a --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/atom-one-light.css @@ -0,0 +1,96 @@ +/* + +Atom One Light by Daniel Gamage +Original One Light Syntax theme from https://github.com/atom/one-light-syntax + +base: #fafafa +mono-1: #383a42 +mono-2: #686b77 +mono-3: #a0a1a7 +hue-1: #0184bb +hue-2: #4078f2 +hue-3: #a626a4 +hue-4: #50a14f +hue-5: #e45649 +hue-5-2: #c91243 +hue-6: #986801 +hue-6-2: #c18401 + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #383a42; + background: #fafafa; +} + +.hljs-comment, +.hljs-quote { + color: #a0a1a7; + font-style: italic; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-formula { + color: #a626a4; +} + +.hljs-section, +.hljs-name, +.hljs-selector-tag, +.hljs-deletion, +.hljs-subst { + color: #e45649; +} + +.hljs-literal { + color: #0184bb; +} + +.hljs-string, +.hljs-regexp, +.hljs-addition, +.hljs-attribute, +.hljs-meta-string { + color: #50a14f; +} + +.hljs-built_in, +.hljs-class .hljs-title { + color: #c18401; +} + +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-type, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-number { + color: #986801; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-meta, +.hljs-selector-id, +.hljs-title { + color: #4078f2; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-link { + text-decoration: underline; +} diff --git a/addons/info/src/components/markdown/hljs-styles/brown-paper.css b/addons/info/src/components/markdown/hljs-styles/brown-paper.css new file mode 100644 index 000000000000..f0197b924c14 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/brown-paper.css @@ -0,0 +1,64 @@ +/* + +Brown Paper style from goldblog.com.ua (c) Zaripov Yura + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background:#b7a68e url(./brown-papersq.png); +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal { + color:#005599; + font-weight:bold; +} + +.hljs, +.hljs-subst { + color: #363c69; +} + +.hljs-string, +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-attribute, +.hljs-symbol, +.hljs-bullet, +.hljs-built_in, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable, +.hljs-link, +.hljs-name { + color: #2c009f; +} + +.hljs-comment, +.hljs-quote, +.hljs-meta, +.hljs-deletion { + color: #802022; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-doctag, +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/brown-papersq.png b/addons/info/src/components/markdown/hljs-styles/brown-papersq.png new file mode 100644 index 0000000000000000000000000000000000000000..3813903dbf9fa7b1fb5bd11d9534c06667d9056f GIT binary patch literal 18198 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
G3S-EN>9CM!{YB*|;6wg-K3V?)eR((z#1 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 literal 0 HcmV?d00001 diff --git a/addons/info/src/components/markdown/hljs-styles/codepen-embed.css b/addons/info/src/components/markdown/hljs-styles/codepen-embed.css new file mode 100644 index 000000000000..195c4a07843a --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/codepen-embed.css @@ -0,0 +1,60 @@ +/* + codepen.io Embed Theme + Author: Justin Perry + Original theme - https://github.com/chriskempson/tomorrow-theme +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #222; + color: #fff; +} + +.hljs-comment, +.hljs-quote { + color: #777; +} + +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-regexp, +.hljs-meta, +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-params, +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-deletion { + color: #ab875d; +} + +.hljs-section, +.hljs-title, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-type, +.hljs-attribute { + color: #9b869b; +} + +.hljs-string, +.hljs-keyword, +.hljs-selector-tag, +.hljs-addition { + color: #8f9c6c; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/color-brewer.css b/addons/info/src/components/markdown/hljs-styles/color-brewer.css new file mode 100644 index 000000000000..7934d986a7e8 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/color-brewer.css @@ -0,0 +1,71 @@ +/* + +Colorbrewer theme +Original: https://github.com/mbostock/colorbrewer-theme (c) Mike Bostock +Ported by Fabrício Tavares de Oliveira + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #fff; +} + +.hljs, +.hljs-subst { + color: #000; +} + +.hljs-string, +.hljs-meta, +.hljs-symbol, +.hljs-template-tag, +.hljs-template-variable, +.hljs-addition { + color: #756bb1; +} + +.hljs-comment, +.hljs-quote { + color: #636363; +} + +.hljs-number, +.hljs-regexp, +.hljs-literal, +.hljs-bullet, +.hljs-link { + color: #31a354; +} + +.hljs-deletion, +.hljs-variable { + color: #88f; +} + + + +.hljs-keyword, +.hljs-selector-tag, +.hljs-title, +.hljs-section, +.hljs-built_in, +.hljs-doctag, +.hljs-type, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-strong { + color: #3182bd; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-attribute { + color: #e6550d; +} diff --git a/addons/info/src/components/markdown/hljs-styles/darcula.css b/addons/info/src/components/markdown/hljs-styles/darcula.css new file mode 100644 index 000000000000..be182d0b5044 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/darcula.css @@ -0,0 +1,77 @@ +/* + +Darcula color scheme from the JetBrains family of IDEs + +*/ + + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #2b2b2b; +} + +.hljs { + color: #bababa; +} + +.hljs-strong, +.hljs-emphasis { + color: #a8a8a2; +} + +.hljs-bullet, +.hljs-quote, +.hljs-link, +.hljs-number, +.hljs-regexp, +.hljs-literal { + color: #6896ba; +} + +.hljs-code, +.hljs-selector-class { + color: #a6e22e; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-section, +.hljs-attribute, +.hljs-name, +.hljs-variable { + color: #cb7832; +} + +.hljs-params { + color: #b9b9b9; +} + +.hljs-string { + color: #6a8759; +} + +.hljs-subst, +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-symbol, +.hljs-selector-id, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-template-tag, +.hljs-template-variable, +.hljs-addition { + color: #e0c46c; +} + +.hljs-comment, +.hljs-deletion, +.hljs-meta { + color: #7f7f7f; +} diff --git a/addons/info/src/components/markdown/hljs-styles/dark.css b/addons/info/src/components/markdown/hljs-styles/dark.css new file mode 100644 index 000000000000..b4724f5f50d1 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/dark.css @@ -0,0 +1,63 @@ +/* + +Dark style from softwaremaniacs.org (c) Ivan Sagalaev + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #444; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-section, +.hljs-link { + color: white; +} + +.hljs, +.hljs-subst { + color: #ddd; +} + +.hljs-string, +.hljs-title, +.hljs-name, +.hljs-type, +.hljs-attribute, +.hljs-symbol, +.hljs-bullet, +.hljs-built_in, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #d88; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion, +.hljs-meta { + color: #777; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-title, +.hljs-section, +.hljs-doctag, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/darkula.css b/addons/info/src/components/markdown/hljs-styles/darkula.css new file mode 100644 index 000000000000..f4646c3c5dc2 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/darkula.css @@ -0,0 +1,6 @@ +/* + Deprecated due to a typo in the name and left here for compatibility purpose only. + Please use darcula.css instead. +*/ + +@import url('darcula.css'); diff --git a/addons/info/src/components/markdown/hljs-styles/default.css b/addons/info/src/components/markdown/hljs-styles/default.css new file mode 100644 index 000000000000..f1bfade31e5d --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/default.css @@ -0,0 +1,99 @@ +/* + +Original highlight.js style (c) Ivan Sagalaev + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #F0F0F0; +} + + +/* Base color: saturation 0; */ + +.hljs, +.hljs-subst { + color: #444; +} + +.hljs-comment { + color: #888888; +} + +.hljs-keyword, +.hljs-attribute, +.hljs-selector-tag, +.hljs-meta-keyword, +.hljs-doctag, +.hljs-name { + font-weight: bold; +} + + +/* User color: hue: 0 */ + +.hljs-type, +.hljs-string, +.hljs-number, +.hljs-selector-id, +.hljs-selector-class, +.hljs-quote, +.hljs-template-tag, +.hljs-deletion { + color: #880000; +} + +.hljs-title, +.hljs-section { + color: #880000; + font-weight: bold; +} + +.hljs-regexp, +.hljs-symbol, +.hljs-variable, +.hljs-template-variable, +.hljs-link, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #BC6060; +} + + +/* Language color: hue: 90; */ + +.hljs-literal { + color: #78A960; +} + +.hljs-built_in, +.hljs-bullet, +.hljs-code, +.hljs-addition { + color: #397300; +} + + +/* Meta color: hue: 200 */ + +.hljs-meta { + color: #1f7199; +} + +.hljs-meta-string { + color: #4d99bf; +} + + +/* Misc effects */ + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/docco.css b/addons/info/src/components/markdown/hljs-styles/docco.css new file mode 100644 index 000000000000..db366be372b8 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/docco.css @@ -0,0 +1,97 @@ +/* +Docco style used in http://jashkenas.github.com/docco/ converted by Simon Madine (@thingsinjars) +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #000; + background: #f8f8ff; +} + +.hljs-comment, +.hljs-quote { + color: #408080; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-subst { + color: #954121; +} + +.hljs-number { + color: #40a070; +} + +.hljs-string, +.hljs-doctag { + color: #219161; +} + +.hljs-selector-id, +.hljs-selector-class, +.hljs-section, +.hljs-type { + color: #19469d; +} + +.hljs-params { + color: #00f; +} + +.hljs-title { + color: #458; + font-weight: bold; +} + +.hljs-tag, +.hljs-name, +.hljs-attribute { + color: #000080; + font-weight: normal; +} + +.hljs-variable, +.hljs-template-variable { + color: #008080; +} + +.hljs-regexp, +.hljs-link { + color: #b68; +} + +.hljs-symbol, +.hljs-bullet { + color: #990073; +} + +.hljs-built_in, +.hljs-builtin-name { + color: #0086b3; +} + +.hljs-meta { + color: #999; + font-weight: bold; +} + +.hljs-deletion { + background: #fdd; +} + +.hljs-addition { + background: #dfd; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/dracula.css b/addons/info/src/components/markdown/hljs-styles/dracula.css new file mode 100644 index 000000000000..d591db6801e2 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/dracula.css @@ -0,0 +1,76 @@ +/* + +Dracula Theme v1.2.0 + +https://github.com/zenorocha/dracula-theme + +Copyright 2015, All rights reserved + +Code licensed under the MIT license +http://zenorocha.mit-license.org + +@author Éverton Ribeiro +@author Zeno Rocha + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #282a36; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-section, +.hljs-link { + color: #8be9fd; +} + +.hljs-function .hljs-keyword { + color: #ff79c6; +} + +.hljs, +.hljs-subst { + color: #f8f8f2; +} + +.hljs-string, +.hljs-title, +.hljs-name, +.hljs-type, +.hljs-attribute, +.hljs-symbol, +.hljs-bullet, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #f1fa8c; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion, +.hljs-meta { + color: #6272a4; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-title, +.hljs-section, +.hljs-doctag, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/far.css b/addons/info/src/components/markdown/hljs-styles/far.css new file mode 100644 index 000000000000..2b3f87b56235 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/far.css @@ -0,0 +1,71 @@ +/* + +FAR Style (c) MajestiC + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #000080; +} + +.hljs, +.hljs-subst { + color: #0ff; +} + +.hljs-string, +.hljs-attribute, +.hljs-symbol, +.hljs-bullet, +.hljs-built_in, +.hljs-builtin-name, +.hljs-template-tag, +.hljs-template-variable, +.hljs-addition { + color: #ff0; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-section, +.hljs-type, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-variable { + color: #fff; +} + +.hljs-comment, +.hljs-quote, +.hljs-doctag, +.hljs-deletion { + color: #888; +} + +.hljs-number, +.hljs-regexp, +.hljs-literal, +.hljs-link { + color: #0f0; +} + +.hljs-meta { + color: #008080; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-title, +.hljs-section, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/foundation.css b/addons/info/src/components/markdown/hljs-styles/foundation.css new file mode 100644 index 000000000000..f1fe64b3771e --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/foundation.css @@ -0,0 +1,88 @@ +/* +Description: Foundation 4 docs style for highlight.js +Author: Dan Allen +Website: http://foundation.zurb.com/docs/ +Version: 1.0 +Date: 2013-04-02 +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #eee; color: black; +} + +.hljs-link, +.hljs-emphasis, +.hljs-attribute, +.hljs-addition { + color: #070; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong, +.hljs-string, +.hljs-deletion { + color: #d14; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-quote, +.hljs-comment { + color: #998; + font-style: italic; +} + +.hljs-section, +.hljs-title { + color: #900; +} + +.hljs-class .hljs-title, +.hljs-type { + color: #458; +} + +.hljs-variable, +.hljs-template-variable { + color: #336699; +} + +.hljs-bullet { + color: #997700; +} + +.hljs-meta { + color: #3344bb; +} + +.hljs-code, +.hljs-number, +.hljs-literal, +.hljs-keyword, +.hljs-selector-tag { + color: #099; +} + +.hljs-regexp { + background-color: #fff0ff; + color: #880088; +} + +.hljs-symbol { + color: #990073; +} + +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #007700; +} diff --git a/addons/info/src/components/markdown/hljs-styles/github-gist.css b/addons/info/src/components/markdown/hljs-styles/github-gist.css new file mode 100644 index 000000000000..155f0b9160dd --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/github-gist.css @@ -0,0 +1,71 @@ +/** + * GitHub Gist Theme + * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro + */ + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} diff --git a/addons/info/src/components/markdown/hljs-styles/github.css b/addons/info/src/components/markdown/hljs-styles/github.css new file mode 100644 index 000000000000..791932b87eaf --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/github.css @@ -0,0 +1,99 @@ +/* + +github.com style (c) Vasily Polovnyov + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #333; + background: #f8f8f8; +} + +.hljs-comment, +.hljs-quote { + color: #998; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-subst { + color: #333; + font-weight: bold; +} + +.hljs-number, +.hljs-literal, +.hljs-variable, +.hljs-template-variable, +.hljs-tag .hljs-attr { + color: #008080; +} + +.hljs-string, +.hljs-doctag { + color: #d14; +} + +.hljs-title, +.hljs-section, +.hljs-selector-id { + color: #900; + font-weight: bold; +} + +.hljs-subst { + font-weight: normal; +} + +.hljs-type, +.hljs-class .hljs-title { + color: #458; + font-weight: bold; +} + +.hljs-tag, +.hljs-name, +.hljs-attribute { + color: #000080; + font-weight: normal; +} + +.hljs-regexp, +.hljs-link { + color: #009926; +} + +.hljs-symbol, +.hljs-bullet { + color: #990073; +} + +.hljs-built_in, +.hljs-builtin-name { + color: #0086b3; +} + +.hljs-meta { + color: #999; + font-weight: bold; +} + +.hljs-deletion { + background: #fdd; +} + +.hljs-addition { + background: #dfd; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/googlecode.css b/addons/info/src/components/markdown/hljs-styles/googlecode.css new file mode 100644 index 000000000000..884ad63538e2 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/googlecode.css @@ -0,0 +1,89 @@ +/* + +Google Code style (c) Aahan Krish + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: white; + color: black; +} + +.hljs-comment, +.hljs-quote { + color: #800; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-section, +.hljs-title, +.hljs-name { + color: #008; +} + +.hljs-variable, +.hljs-template-variable { + color: #660; +} + +.hljs-string, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-regexp { + color: #080; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-meta, +.hljs-number, +.hljs-link { + color: #066; +} + +.hljs-title, +.hljs-doctag, +.hljs-type, +.hljs-attr, +.hljs-built_in, +.hljs-builtin-name, +.hljs-params { + color: #606; +} + +.hljs-attribute, +.hljs-subst { + color: #000; +} + +.hljs-formula { + background-color: #eee; + font-style: italic; +} + +.hljs-selector-id, +.hljs-selector-class { + color: #9B703F +} + +.hljs-addition { + background-color: #baeeba; +} + +.hljs-deletion { + background-color: #ffc8bd; +} + +.hljs-doctag, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/grayscale.css b/addons/info/src/components/markdown/hljs-styles/grayscale.css new file mode 100644 index 000000000000..5376f3406484 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/grayscale.css @@ -0,0 +1,101 @@ +/* + +grayscale style (c) MY Sun + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #333; + background: #fff; +} + +.hljs-comment, +.hljs-quote { + color: #777; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-subst { + color: #333; + font-weight: bold; +} + +.hljs-number, +.hljs-literal { + color: #777; +} + +.hljs-string, +.hljs-doctag, +.hljs-formula { + color: #333; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJ0lEQVQIW2O8e/fufwYGBgZBQUEQxcCIIfDu3Tuwivfv30NUoAsAALHpFMMLqZlPAAAAAElFTkSuQmCC) repeat; +} + +.hljs-title, +.hljs-section, +.hljs-selector-id { + color: #000; + font-weight: bold; +} + +.hljs-subst { + font-weight: normal; +} + +.hljs-class .hljs-title, +.hljs-type, +.hljs-name { + color: #333; + font-weight: bold; +} + +.hljs-tag { + color: #333; +} + +.hljs-regexp { + color: #333; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAN37979r6yszIgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQDexSef15DBCwAAAABJRU5ErkJggg==) repeat; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link { + color: #000; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAO7d+/+z4gsBhJwdXVlhAvCBECKwIIwAbhKZBUwBQA6hBpm5efZsgAAAABJRU5ErkJggg==) repeat; +} + +.hljs-built_in, +.hljs-builtin-name { + color: #000; + text-decoration: underline; +} + +.hljs-meta { + color: #999; + font-weight: bold; +} + +.hljs-deletion { + color: #fff; + background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAE0lEQVQIW2MMDQ39zzhz5kwIAQAyxweWgUHd1AAAAABJRU5ErkJggg==) repeat; +} + +.hljs-addition { + color: #000; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALUlEQVQYV2N89+7dfwYk8P79ewZBQUFkIQZGOiu6e/cuiptQHAPl0NtNxAQBAM97Oejj3Dg7AAAAAElFTkSuQmCC) repeat; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/gruvbox-dark.css b/addons/info/src/components/markdown/hljs-styles/gruvbox-dark.css new file mode 100644 index 000000000000..f563811a8627 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/gruvbox-dark.css @@ -0,0 +1,108 @@ +/* + +Gruvbox style (dark) (c) Pavel Pertsev (original style at https://github.com/morhetz/gruvbox) + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #282828; +} + +.hljs, +.hljs-subst { + color: #ebdbb2; +} + +/* Gruvbox Red */ +.hljs-deletion, +.hljs-formula, +.hljs-keyword, +.hljs-link, +.hljs-selector-tag { + color: #fb4934; +} + +/* Gruvbox Blue */ +.hljs-built_in, +.hljs-emphasis, +.hljs-name, +.hljs-quote, +.hljs-strong, +.hljs-title, +.hljs-variable { + color: #83a598; +} + +/* Gruvbox Yellow */ +.hljs-attr, +.hljs-params, +.hljs-template-tag, +.hljs-type { + color: #fabd2f; +} + +/* Gruvbox Purple */ +.hljs-builtin-name, +.hljs-doctag, +.hljs-literal, +.hljs-number { + color: #8f3f71; +} + +/* Gruvbox Orange */ +.hljs-code, +.hljs-meta, +.hljs-regexp, +.hljs-selector-id, +.hljs-template-variable { + color: #fe8019; +} + +/* Gruvbox Green */ +.hljs-addition, +.hljs-meta-string, +.hljs-section, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-string, +.hljs-symbol { + color: #b8bb26; +} + +/* Gruvbox Aqua */ +.hljs-attribute, +.hljs-bullet, +.hljs-class, +.hljs-function, +.hljs-function .hljs-keyword, +.hljs-meta-keyword, +.hljs-selector-pseudo, +.hljs-tag { + color: #8ec07c; +} + +/* Gruvbox Gray */ +.hljs-comment { + color: #928374; +} + +/* Gruvbox Purple */ +.hljs-link_label, +.hljs-literal, +.hljs-number { + color: #d3869b; +} + +.hljs-comment, +.hljs-emphasis { + font-style: italic; +} + +.hljs-section, +.hljs-strong, +.hljs-tag { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/gruvbox-light.css b/addons/info/src/components/markdown/hljs-styles/gruvbox-light.css new file mode 100644 index 000000000000..ff45468eb2ef --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/gruvbox-light.css @@ -0,0 +1,108 @@ +/* + +Gruvbox style (light) (c) Pavel Pertsev (original style at https://github.com/morhetz/gruvbox) + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #fbf1c7; +} + +.hljs, +.hljs-subst { + color: #3c3836; +} + +/* Gruvbox Red */ +.hljs-deletion, +.hljs-formula, +.hljs-keyword, +.hljs-link, +.hljs-selector-tag { + color: #9d0006; +} + +/* Gruvbox Blue */ +.hljs-built_in, +.hljs-emphasis, +.hljs-name, +.hljs-quote, +.hljs-strong, +.hljs-title, +.hljs-variable { + color: #076678; +} + +/* Gruvbox Yellow */ +.hljs-attr, +.hljs-params, +.hljs-template-tag, +.hljs-type { + color: #b57614; +} + +/* Gruvbox Purple */ +.hljs-builtin-name, +.hljs-doctag, +.hljs-literal, +.hljs-number { + color: #8f3f71; +} + +/* Gruvbox Orange */ +.hljs-code, +.hljs-meta, +.hljs-regexp, +.hljs-selector-id, +.hljs-template-variable { + color: #af3a03; +} + +/* Gruvbox Green */ +.hljs-addition, +.hljs-meta-string, +.hljs-section, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-string, +.hljs-symbol { + color: #79740e; +} + +/* Gruvbox Aqua */ +.hljs-attribute, +.hljs-bullet, +.hljs-class, +.hljs-function, +.hljs-function .hljs-keyword, +.hljs-meta-keyword, +.hljs-selector-pseudo, +.hljs-tag { + color: #427b58; +} + +/* Gruvbox Gray */ +.hljs-comment { + color: #928374; +} + +/* Gruvbox Purple */ +.hljs-link_label, +.hljs-literal, +.hljs-number { + color: #8f3f71; +} + +.hljs-comment, +.hljs-emphasis { + font-style: italic; +} + +.hljs-section, +.hljs-strong, +.hljs-tag { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/hopscotch.css b/addons/info/src/components/markdown/hljs-styles/hopscotch.css new file mode 100644 index 000000000000..32e60d230a51 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/hopscotch.css @@ -0,0 +1,83 @@ +/* + * Hopscotch + * by Jan T. Sott + * https://github.com/idleberg/Hopscotch + * + * This work is licensed under the Creative Commons CC0 1.0 Universal License + */ + +/* Comment */ +.hljs-comment, +.hljs-quote { + color: #989498; +} + +/* Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-link, +.hljs-deletion { + color: #dd464c; +} + +/* Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #fd8b19; +} + +/* Yellow */ +.hljs-class .hljs-title { + color: #fdcc59; +} + +/* Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #8fc13e; +} + +/* Aqua */ +.hljs-meta { + color: #149b93; +} + +/* Blue */ +.hljs-function, +.hljs-section, +.hljs-title { + color: #1290bf; +} + +/* Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #c85e7c; +} + +.hljs { + display: block; + background: #322931; + color: #b9b5b8; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/hybrid.css b/addons/info/src/components/markdown/hljs-styles/hybrid.css new file mode 100644 index 000000000000..29735a189042 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/hybrid.css @@ -0,0 +1,102 @@ +/* + +vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid) + +*/ + +/*background color*/ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #1d1f21; +} + +/*selection color*/ +.hljs::selection, +.hljs span::selection { + background: #373b41; +} + +.hljs::-moz-selection, +.hljs span::-moz-selection { + background: #373b41; +} + +/*foreground color*/ +.hljs { + color: #c5c8c6; +} + +/*color: fg_yellow*/ +.hljs-title, +.hljs-name { + color: #f0c674; +} + +/*color: fg_comment*/ +.hljs-comment, +.hljs-meta, +.hljs-meta .hljs-keyword { + color: #707880; +} + +/*color: fg_red*/ +.hljs-number, +.hljs-symbol, +.hljs-literal, +.hljs-deletion, +.hljs-link { + color: #cc6666 +} + +/*color: fg_green*/ +.hljs-string, +.hljs-doctag, +.hljs-addition, +.hljs-regexp, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #b5bd68; +} + +/*color: fg_purple*/ +.hljs-attribute, +.hljs-code, +.hljs-selector-id { + color: #b294bb; +} + +/*color: fg_blue*/ +.hljs-keyword, +.hljs-selector-tag, +.hljs-bullet, +.hljs-tag { + color: #81a2be; +} + +/*color: fg_aqua*/ +.hljs-subst, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #8abeb7; +} + +/*color: fg_orange*/ +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-quote, +.hljs-section, +.hljs-selector-class { + color: #de935f; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/idea.css b/addons/info/src/components/markdown/hljs-styles/idea.css new file mode 100644 index 000000000000..3bf1892bd4a2 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/idea.css @@ -0,0 +1,97 @@ +/* + +Intellij Idea-like styling (c) Vasily Polovnyov + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #000; + background: #fff; +} + +.hljs-subst, +.hljs-title { + font-weight: normal; + color: #000; +} + +.hljs-comment, +.hljs-quote { + color: #808080; + font-style: italic; +} + +.hljs-meta { + color: #808000; +} + +.hljs-tag { + background: #efefef; +} + +.hljs-section, +.hljs-name, +.hljs-literal, +.hljs-keyword, +.hljs-selector-tag, +.hljs-type, +.hljs-selector-id, +.hljs-selector-class { + font-weight: bold; + color: #000080; +} + +.hljs-attribute, +.hljs-number, +.hljs-regexp, +.hljs-link { + font-weight: bold; + color: #0000ff; +} + +.hljs-number, +.hljs-regexp, +.hljs-link { + font-weight: normal; +} + +.hljs-string { + color: #008000; + font-weight: bold; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-formula { + color: #000; + background: #d0eded; + font-style: italic; +} + +.hljs-doctag { + text-decoration: underline; +} + +.hljs-variable, +.hljs-template-variable { + color: #660e7a; +} + +.hljs-addition { + background: #baeeba; +} + +.hljs-deletion { + background: #ffc8bd; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/ir-black.css b/addons/info/src/components/markdown/hljs-styles/ir-black.css new file mode 100644 index 000000000000..bd4c755ed8a9 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/ir-black.css @@ -0,0 +1,73 @@ +/* + IR_Black style (c) Vasily Mikhailitchenko +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #000; + color: #f8f8f8; +} + +.hljs-comment, +.hljs-quote, +.hljs-meta { + color: #7c7c7c; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-tag, +.hljs-name { + color: #96cbfe; +} + +.hljs-attribute, +.hljs-selector-id { + color: #ffffb6; +} + +.hljs-string, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-addition { + color: #a8ff60; +} + +.hljs-subst { + color: #daefa3; +} + +.hljs-regexp, +.hljs-link { + color: #e9c062; +} + +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-doctag { + color: #ffffb6; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-variable, +.hljs-template-variable, +.hljs-literal { + color: #c6c5fe; +} + +.hljs-number, +.hljs-deletion { + color:#ff73fd; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/kimbie.dark.css b/addons/info/src/components/markdown/hljs-styles/kimbie.dark.css new file mode 100644 index 000000000000..d139cb5d0c96 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/kimbie.dark.css @@ -0,0 +1,74 @@ +/* + Name: Kimbie (dark) + Author: Jan T. Sott + License: Creative Commons Attribution-ShareAlike 4.0 Unported License + URL: https://github.com/idleberg/Kimbie-highlight.js +*/ + +/* Kimbie Comment */ +.hljs-comment, +.hljs-quote { + color: #d6baad; +} + +/* Kimbie Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-meta { + color: #dc3958; +} + +/* Kimbie Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-deletion, +.hljs-link { + color: #f79a32; +} + +/* Kimbie Yellow */ +.hljs-title, +.hljs-section, +.hljs-attribute { + color: #f06431; +} + +/* Kimbie Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #889b4a; +} + +/* Kimbie Purple */ +.hljs-keyword, +.hljs-selector-tag, +.hljs-function { + color: #98676a; +} + +.hljs { + display: block; + overflow-x: auto; + background: #221a0f; + color: #d3af86; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/kimbie.light.css b/addons/info/src/components/markdown/hljs-styles/kimbie.light.css new file mode 100644 index 000000000000..04ff6ed3a2db --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/kimbie.light.css @@ -0,0 +1,74 @@ +/* + Name: Kimbie (light) + Author: Jan T. Sott + License: Creative Commons Attribution-ShareAlike 4.0 Unported License + URL: https://github.com/idleberg/Kimbie-highlight.js +*/ + +/* Kimbie Comment */ +.hljs-comment, +.hljs-quote { + color: #a57a4c; +} + +/* Kimbie Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-meta { + color: #dc3958; +} + +/* Kimbie Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-deletion, +.hljs-link { + color: #f79a32; +} + +/* Kimbie Yellow */ +.hljs-title, +.hljs-section, +.hljs-attribute { + color: #f06431; +} + +/* Kimbie Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #889b4a; +} + +/* Kimbie Purple */ +.hljs-keyword, +.hljs-selector-tag, +.hljs-function { + color: #98676a; +} + +.hljs { + display: block; + overflow-x: auto; + background: #fbebd4; + color: #84613d; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/magula.css b/addons/info/src/components/markdown/hljs-styles/magula.css new file mode 100644 index 000000000000..44dee5e8e104 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/magula.css @@ -0,0 +1,70 @@ +/* +Description: Magula style for highligh.js +Author: Ruslan Keba +Website: http://rukeba.com/ +Version: 1.0 +Date: 2009-01-03 +Music: Aphex Twin / Xtal +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background-color: #f4f4f4; +} + +.hljs, +.hljs-subst { + color: black; +} + +.hljs-string, +.hljs-title, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #050; +} + +.hljs-comment, +.hljs-quote { + color: #777; +} + +.hljs-number, +.hljs-regexp, +.hljs-literal, +.hljs-type, +.hljs-link { + color: #800; +} + +.hljs-deletion, +.hljs-meta { + color: #00e; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-doctag, +.hljs-title, +.hljs-section, +.hljs-built_in, +.hljs-tag, +.hljs-name { + font-weight: bold; + color: navy; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/mono-blue.css b/addons/info/src/components/markdown/hljs-styles/mono-blue.css new file mode 100644 index 000000000000..884c97c7673f --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/mono-blue.css @@ -0,0 +1,59 @@ +/* + Five-color theme from a single blue hue. +*/ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #eaeef3; +} + +.hljs { + color: #00193a; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-title, +.hljs-section, +.hljs-doctag, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-comment { + color: #738191; +} + +.hljs-string, +.hljs-title, +.hljs-section, +.hljs-built_in, +.hljs-literal, +.hljs-type, +.hljs-addition, +.hljs-tag, +.hljs-quote, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #0048ab; +} + +.hljs-meta, +.hljs-subst, +.hljs-symbol, +.hljs-regexp, +.hljs-attribute, +.hljs-deletion, +.hljs-variable, +.hljs-template-variable, +.hljs-link, +.hljs-bullet { + color: #4c81c9; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/monokai-sublime.css b/addons/info/src/components/markdown/hljs-styles/monokai-sublime.css new file mode 100644 index 000000000000..2864170daf66 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/monokai-sublime.css @@ -0,0 +1,83 @@ +/* + +Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/ + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #23241f; +} + +.hljs, +.hljs-tag, +.hljs-subst { + color: #f8f8f2; +} + +.hljs-strong, +.hljs-emphasis { + color: #a8a8a2; +} + +.hljs-bullet, +.hljs-quote, +.hljs-number, +.hljs-regexp, +.hljs-literal, +.hljs-link { + color: #ae81ff; +} + +.hljs-code, +.hljs-title, +.hljs-section, +.hljs-selector-class { + color: #a6e22e; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-name, +.hljs-attr { + color: #f92672; +} + +.hljs-symbol, +.hljs-attribute { + color: #66d9ef; +} + +.hljs-params, +.hljs-class .hljs-title { + color: #f8f8f2; +} + +.hljs-string, +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-selector-id, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-addition, +.hljs-variable, +.hljs-template-variable { + color: #e6db74; +} + +.hljs-comment, +.hljs-deletion, +.hljs-meta { + color: #75715e; +} diff --git a/addons/info/src/components/markdown/hljs-styles/monokai.css b/addons/info/src/components/markdown/hljs-styles/monokai.css new file mode 100644 index 000000000000..775d53f91aa8 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/monokai.css @@ -0,0 +1,70 @@ +/* +Monokai style - ported by Luigi Maselli - http://grigio.org +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #272822; color: #ddd; +} + +.hljs-tag, +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-strong, +.hljs-name { + color: #f92672; +} + +.hljs-code { + color: #66d9ef; +} + +.hljs-class .hljs-title { + color: white; +} + +.hljs-attribute, +.hljs-symbol, +.hljs-regexp, +.hljs-link { + color: #bf79db; +} + +.hljs-string, +.hljs-bullet, +.hljs-subst, +.hljs-title, +.hljs-section, +.hljs-emphasis, +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #a6e22e; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion, +.hljs-meta { + color: #75715e; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-doctag, +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-selector-id { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/obsidian.css b/addons/info/src/components/markdown/hljs-styles/obsidian.css new file mode 100644 index 000000000000..356630fa2345 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/obsidian.css @@ -0,0 +1,88 @@ +/** + * Obsidian style + * ported by Alexander Marenin (http://github.com/ioncreature) + */ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #282b2e; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-selector-id { + color: #93c763; +} + +.hljs-number { + color: #ffcd22; +} + +.hljs { + color: #e0e2e4; +} + +.hljs-attribute { + color: #668bb0; +} + +.hljs-code, +.hljs-class .hljs-title, +.hljs-section { + color: white; +} + +.hljs-regexp, +.hljs-link { + color: #d39745; +} + +.hljs-meta { + color: #557182; +} + +.hljs-tag, +.hljs-name, +.hljs-bullet, +.hljs-subst, +.hljs-emphasis, +.hljs-type, +.hljs-built_in, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #8cbbad; +} + +.hljs-string, +.hljs-symbol { + color: #ec7600; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion { + color: #818e96; +} + +.hljs-selector-class { + color: #A082BD +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-doctag, +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/ocean.css b/addons/info/src/components/markdown/hljs-styles/ocean.css new file mode 100644 index 000000000000..5901581b40a7 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/ocean.css @@ -0,0 +1,74 @@ +/* Ocean Dark Theme */ +/* https://github.com/gavsiu */ +/* Original theme - https://github.com/chriskempson/base16 */ + +/* Ocean Comment */ +.hljs-comment, +.hljs-quote { + color: #65737e; +} + +/* Ocean Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #bf616a; +} + +/* Ocean Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #d08770; +} + +/* Ocean Yellow */ +.hljs-attribute { + color: #ebcb8b; +} + +/* Ocean Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #a3be8c; +} + +/* Ocean Blue */ +.hljs-title, +.hljs-section { + color: #8fa1b3; +} + +/* Ocean Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #b48ead; +} + +.hljs { + display: block; + overflow-x: auto; + background: #2b303b; + color: #c0c5ce; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/paraiso-dark.css b/addons/info/src/components/markdown/hljs-styles/paraiso-dark.css new file mode 100644 index 000000000000..e7292401c6ef --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/paraiso-dark.css @@ -0,0 +1,72 @@ +/* + Paraíso (dark) + Created by Jan T. Sott (http://github.com/idleberg) + Inspired by the art of Rubens LP (http://www.rubenslp.com.br) +*/ + +/* Paraíso Comment */ +.hljs-comment, +.hljs-quote { + color: #8d8687; +} + +/* Paraíso Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-link, +.hljs-meta { + color: #ef6155; +} + +/* Paraíso Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-deletion { + color: #f99b15; +} + +/* Paraíso Yellow */ +.hljs-title, +.hljs-section, +.hljs-attribute { + color: #fec418; +} + +/* Paraíso Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #48b685; +} + +/* Paraíso Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #815ba4; +} + +.hljs { + display: block; + overflow-x: auto; + background: #2f1e2e; + color: #a39e9b; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/paraiso-light.css b/addons/info/src/components/markdown/hljs-styles/paraiso-light.css new file mode 100644 index 000000000000..944857cd8d33 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/paraiso-light.css @@ -0,0 +1,72 @@ +/* + Paraíso (light) + Created by Jan T. Sott (http://github.com/idleberg) + Inspired by the art of Rubens LP (http://www.rubenslp.com.br) +*/ + +/* Paraíso Comment */ +.hljs-comment, +.hljs-quote { + color: #776e71; +} + +/* Paraíso Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-link, +.hljs-meta { + color: #ef6155; +} + +/* Paraíso Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-deletion { + color: #f99b15; +} + +/* Paraíso Yellow */ +.hljs-title, +.hljs-section, +.hljs-attribute { + color: #fec418; +} + +/* Paraíso Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #48b685; +} + +/* Paraíso Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #815ba4; +} + +.hljs { + display: block; + overflow-x: auto; + background: #e7e9db; + color: #4f424c; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/pojoaque.css b/addons/info/src/components/markdown/hljs-styles/pojoaque.css new file mode 100644 index 000000000000..2e07847b2b29 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/pojoaque.css @@ -0,0 +1,83 @@ +/* + +Pojoaque Style by Jason Tate +http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html +Based on Solarized Style from http://ethanschoonover.com/solarized + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #dccf8f; + background: url(./pojoaque.jpg) repeat scroll left top #181914; +} + +.hljs-comment, +.hljs-quote { + color: #586e75; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-addition { + color: #b64926; +} + +.hljs-number, +.hljs-string, +.hljs-doctag, +.hljs-regexp { + color: #468966; +} + +.hljs-title, +.hljs-section, +.hljs-built_in, +.hljs-name { + color: #ffb03b; +} + +.hljs-variable, +.hljs-template-variable, +.hljs-class .hljs-title, +.hljs-type, +.hljs-tag { + color: #b58900; +} + +.hljs-attribute { + color: #b89859; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link, +.hljs-subst, +.hljs-meta { + color: #cb4b16; +} + +.hljs-deletion { + color: #dc322f; +} + +.hljs-selector-id, +.hljs-selector-class { + color: #d3a60c; +} + +.hljs-formula { + background: #073642; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/pojoaque.jpg b/addons/info/src/components/markdown/hljs-styles/pojoaque.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9c07d4ab40b6d77e90ff69f0012bcd33b21d31c3 GIT binary patch literal 1186 zcmZXSe^8Tk9LK-kXFs3)f@f?)Cddzw3v4wdZyXQ;4x3=;Ja*N#%n9ik!UGmt9H3k0 zJST|5jOc(ID$FQt3C?jQZBws#kXolO1lg9Pba9BB=Q+UEBX!nY@6Uhl&+ofe$Q$y5 z@ci`~)&qzDP(lOiQ5p?p z(`j^e7!yUAVHk%K#^GQXn?s0=VLYCI$HRoe=xCuZ>A6A3@sxEP#XqNFpIb=0)KQ#Nss_tD17;m4@$JKL;LR|K|QF3f%!L5+s(9Ft8SQ zG|~pGpEGFW5Z|OA)-O@mNHy-g@7m8JTf?kl@vUKBGmw)Y*9sDRNr3PN!IKefWaydTe1D zjzpyzPnD3}hBNaS4aFX7=0&~I*Hu7#4au@qVBglH#-m;QFOx_`=j z{EqRY#Eh*yoWP^pa4H>8GH{rO?!_+xwL0(k4yL^D%^nBkJ*UI;Lx;ped8d|f*S_s@ z3~ilcRC(&NT#9Gn#UD;o^EYSMXDMf%XcUi3>;WXXD-QX3P9wMyP7eA&RS{)h5{??W3^Rq=goFJ>?lA~J- zdYe>!xvYLW*fPT0RK7wsJRg^?x#W1*GP9_f`6t>QD_X>0d!owyN>nO2?U5}|3?hX_UZYT@^>S!9eB~bZ9U`q;`U)@L670o1g z`Hd}h<_WRvUc|n*%v4Hbb-4tJD40iyF^q%g*&!6>hkYDvi-{Uc4yTM zzcthN4Z{ka!+F_KzYV#yWi;c^X^q6g`pD8cp?$Kl?hCz0s^a|mH%P!CF%*<6k^~i` zT5Mi-t5-frUcHkk^Qh}+N)Kz1&Bi95`oNc|quI>tUi~BY>xcF9(%tv2i{G6kE9*q~ qCoAGl20`)w0rdgp9H%Q=M5|p`hOhFz6$I%Y&ncY8>c?7PXyh+SL&XXJ literal 0 HcmV?d00001 diff --git a/addons/info/src/components/markdown/hljs-styles/purebasic.css b/addons/info/src/components/markdown/hljs-styles/purebasic.css new file mode 100644 index 000000000000..5ce9b9e07109 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/purebasic.css @@ -0,0 +1,96 @@ +/* + +PureBASIC native IDE style ( version 1.0 - April 2016 ) + +by Tristano Ajmone + +Public Domain + +NOTE_1: PureBASIC code syntax highlighting only applies the following classes: + .hljs-comment + .hljs-function + .hljs-keywords + .hljs-string + .hljs-symbol + + Other classes are added here for the benefit of styling other languages with the look and feel of PureBASIC native IDE style. + If you need to customize a stylesheet for PureBASIC only, remove all non-relevant classes -- PureBASIC-related classes are followed by + a "--- used for PureBASIC ... ---" comment on same line. + +NOTE_2: Color names provided in comments were derived using "Name that Color" online tool: + http://chir.ag/projects/name-that-color +*/ + +.hljs { /* Common set of rules required by highlight.js (don'r remove!) */ + display: block; + overflow-x: auto; + padding: 0.5em; + background: #FFFFDF; /* Half and Half (approx.) */ +/* --- Uncomment to add PureBASIC native IDE styled font! + font-family: Consolas; +*/ +} + +.hljs, /* --- used for PureBASIC base color --- */ +.hljs-type, /* --- used for PureBASIC Procedures return type --- */ +.hljs-function, /* --- used for wrapping PureBASIC Procedures definitions --- */ +.hljs-name, +.hljs-number, +.hljs-attr, +.hljs-params, +.hljs-subst { + color: #000000; /* Black */ +} + +.hljs-comment, /* --- used for PureBASIC Comments --- */ +.hljs-regexp, +.hljs-section, +.hljs-selector-pseudo, +.hljs-addition { + color: #00AAAA; /* Persian Green (approx.) */ +} + +.hljs-title, /* --- used for PureBASIC Procedures Names --- */ +.hljs-tag, +.hljs-variable, +.hljs-code { + color: #006666; /* Blue Stone (approx.) */ +} + +.hljs-keyword, /* --- used for PureBASIC Keywords --- */ +.hljs-class, +.hljs-meta-keyword, +.hljs-selector-class, +.hljs-built_in, +.hljs-builtin-name { + color: #006666; /* Blue Stone (approx.) */ + font-weight: bold; +} + +.hljs-string, /* --- used for PureBASIC Strings --- */ +.hljs-selector-attr { + color: #0080FF; /* Azure Radiance (approx.) */ +} + +.hljs-symbol, /* --- used for PureBASIC Constants --- */ +.hljs-link, +.hljs-deletion, +.hljs-attribute { + color: #924B72; /* Cannon Pink (approx.) */ +} + +.hljs-meta, +.hljs-literal, +.hljs-selector-id { + color: #924B72; /* Cannon Pink (approx.) */ + font-weight: bold; +} + +.hljs-strong, +.hljs-name { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/qtcreator_dark.css b/addons/info/src/components/markdown/hljs-styles/qtcreator_dark.css new file mode 100644 index 000000000000..7aa56a3655f2 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/qtcreator_dark.css @@ -0,0 +1,83 @@ +/* + +Qt Creator dark color scheme + +*/ + + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #000000; +} + +.hljs, +.hljs-subst, +.hljs-tag, +.hljs-title { + color: #aaaaaa; +} + +.hljs-strong, +.hljs-emphasis { + color: #a8a8a2; +} + +.hljs-bullet, +.hljs-quote, +.hljs-number, +.hljs-regexp, +.hljs-literal { + color: #ff55ff; +} + +.hljs-code +.hljs-selector-class { + color: #aaaaff; +} + +.hljs-emphasis, +.hljs-stronge, +.hljs-type { + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-function, +.hljs-section, +.hljs-symbol, +.hljs-name { + color: #ffff55; +} + +.hljs-attribute { + color: #ff5555; +} + +.hljs-variable, +.hljs-params, +.hljs-class .hljs-title { + color: #8888ff; +} + +.hljs-string, +.hljs-selector-id, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-template-tag, +.hljs-template-variable, +.hljs-addition, +.hljs-link { + color: #ff55ff; +} + +.hljs-comment, +.hljs-meta, +.hljs-deletion { + color: #55ffff; +} diff --git a/addons/info/src/components/markdown/hljs-styles/qtcreator_light.css b/addons/info/src/components/markdown/hljs-styles/qtcreator_light.css new file mode 100644 index 000000000000..1efa2c660f05 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/qtcreator_light.css @@ -0,0 +1,83 @@ +/* + +Qt Creator light color scheme + +*/ + + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #ffffff; +} + +.hljs, +.hljs-subst, +.hljs-tag, +.hljs-title { + color: #000000; +} + +.hljs-strong, +.hljs-emphasis { + color: #000000; +} + +.hljs-bullet, +.hljs-quote, +.hljs-number, +.hljs-regexp, +.hljs-literal { + color: #000080; +} + +.hljs-code +.hljs-selector-class { + color: #800080; +} + +.hljs-emphasis, +.hljs-stronge, +.hljs-type { + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-function, +.hljs-section, +.hljs-symbol, +.hljs-name { + color: #808000; +} + +.hljs-attribute { + color: #800000; +} + +.hljs-variable, +.hljs-params, +.hljs-class .hljs-title { + color: #0055AF; +} + +.hljs-string, +.hljs-selector-id, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-template-tag, +.hljs-template-variable, +.hljs-addition, +.hljs-link { + color: #008000; +} + +.hljs-comment, +.hljs-meta, +.hljs-deletion { + color: #008000; +} diff --git a/addons/info/src/components/markdown/hljs-styles/railscasts.css b/addons/info/src/components/markdown/hljs-styles/railscasts.css new file mode 100644 index 000000000000..008cdc5bf148 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/railscasts.css @@ -0,0 +1,106 @@ +/* + +Railscasts-like style (c) Visoft, Inc. (Damien White) + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #232323; + color: #e6e1dc; +} + +.hljs-comment, +.hljs-quote { + color: #bc9458; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag { + color: #c26230; +} + +.hljs-string, +.hljs-number, +.hljs-regexp, +.hljs-variable, +.hljs-template-variable { + color: #a5c261; +} + +.hljs-subst { + color: #519f50; +} + +.hljs-tag, +.hljs-name { + color: #e8bf6a; +} + +.hljs-type { + color: #da4939; +} + + +.hljs-symbol, +.hljs-bullet, +.hljs-built_in, +.hljs-builtin-name, +.hljs-attr, +.hljs-link { + color: #6d9cbe; +} + +.hljs-params { + color: #d0d0ff; +} + +.hljs-attribute { + color: #cda869; +} + +.hljs-meta { + color: #9b859d; +} + +.hljs-title, +.hljs-section { + color: #ffc66d; +} + +.hljs-addition { + background-color: #144212; + color: #e6e1dc; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #600; + color: #e6e1dc; + display: inline-block; + width: 100%; +} + +.hljs-selector-class { + color: #9b703f; +} + +.hljs-selector-id { + color: #8b98ab; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-link { + text-decoration: underline; +} diff --git a/addons/info/src/components/markdown/hljs-styles/rainbow.css b/addons/info/src/components/markdown/hljs-styles/rainbow.css new file mode 100644 index 000000000000..905eb8ef1879 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/rainbow.css @@ -0,0 +1,85 @@ +/* + +Style with support for rainbow parens + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #474949; + color: #d1d9e1; +} + + +.hljs-comment, +.hljs-quote { + color: #969896; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-type, +.hljs-addition { + color: #cc99cc; +} + +.hljs-number, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #f99157; +} + +.hljs-string, +.hljs-doctag, +.hljs-regexp { + color: #8abeb7; +} + +.hljs-title, +.hljs-name, +.hljs-section, +.hljs-built_in { + color: #b5bd68; +} + +.hljs-variable, +.hljs-template-variable, +.hljs-selector-id, +.hljs-class .hljs-title { + color: #ffcc66; +} + +.hljs-section, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-subst, +.hljs-meta, +.hljs-link { + color: #f99157; +} + +.hljs-deletion { + color: #dc322f; +} + +.hljs-formula { + background: #eee8d5; +} + +.hljs-attr, +.hljs-attribute { + color: #81a2be; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/routeros.css b/addons/info/src/components/markdown/hljs-styles/routeros.css new file mode 100644 index 000000000000..ebe23990daae --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/routeros.css @@ -0,0 +1,108 @@ +/* + + highlight.js style for Microtik RouterOS script + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #F0F0F0; +} + +/* Base color: saturation 0; */ + +.hljs, +.hljs-subst { + color: #444; +} + +.hljs-comment { + color: #888888; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-meta-keyword, +.hljs-doctag, +.hljs-name { + font-weight: bold; +} + +.hljs-attribute { + color: #0E9A00; +} + +.hljs-function { + color: #99069A; +} + +.hljs-builtin-name { + color: #99069A; +} + +/* User color: hue: 0 */ + +.hljs-type, +.hljs-string, +.hljs-number, +.hljs-selector-id, +.hljs-selector-class, +.hljs-quote, +.hljs-template-tag, +.hljs-deletion { + color: #880000; +} + +.hljs-title, +.hljs-section { + color: #880000; + font-weight: bold; +} + +.hljs-regexp, +.hljs-symbol, +.hljs-variable, +.hljs-template-variable, +.hljs-link, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #BC6060; +} + + +/* Language color: hue: 90; */ + +.hljs-literal { + color: #78A960; +} + +.hljs-built_in, +.hljs-bullet, +.hljs-code, +.hljs-addition { + color: #0C9A9A; +} + + +/* Meta color: hue: 200 */ + +.hljs-meta { + color: #1f7199; +} + +.hljs-meta-string { + color: #4d99bf; +} + + +/* Misc effects */ + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/school-book.css b/addons/info/src/components/markdown/hljs-styles/school-book.css new file mode 100644 index 000000000000..964b51d84148 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/school-book.css @@ -0,0 +1,72 @@ +/* + +School Book style from goldblog.com.ua (c) Zaripov Yura + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 15px 0.5em 0.5em 30px; + font-size: 11px; + line-height:16px; +} + +pre{ + background:#f6f6ae url(./school-book.png); + border-top: solid 2px #d2e8b9; + border-bottom: solid 1px #d2e8b9; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal { + color:#005599; + font-weight:bold; +} + +.hljs, +.hljs-subst { + color: #3e5915; +} + +.hljs-string, +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute, +.hljs-built_in, +.hljs-builtin-name, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable, +.hljs-link { + color: #2c009f; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion, +.hljs-meta { + color: #e60415; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-doctag, +.hljs-title, +.hljs-section, +.hljs-type, +.hljs-name, +.hljs-selector-id, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/school-book.png b/addons/info/src/components/markdown/hljs-styles/school-book.png new file mode 100644 index 0000000000000000000000000000000000000000..956e9790a0e2c079b3d568348ff3accd1d9cac30 GIT binary patch literal 486 zcmeAS@N?(olHy`uVBq!ia0y~yV7?7x3vjRjNjAS6Ga$v1?&#~tz_9*=IcwKTAYZb? zHKHUqKdq!Zu_%?nF(p4KRlzeiF+DXXH8G{K@MNkD0|R4)r;B4q#jQ7Ycl#YS5MfK$ z?b^fh#qmaEhFDxvyThwfhdfkOPApt1lr{NA;Vr%uzxJuVIyzm(ed_8_-0$LLU})H&o5Re&aDemE>EG#(|F^t9_pa-H z_Mf?rMVrs}-M?S|?ZdY@c6s41zy8~}@a{v&#Ea7V)wJ$+#K|u$5UvWCdFLwGac}6w{_s*=8A6L7Rfc|9gboFyt I=akR{0OLZ+qyPW_ literal 0 HcmV?d00001 diff --git a/addons/info/src/components/markdown/hljs-styles/solarized-dark.css b/addons/info/src/components/markdown/hljs-styles/solarized-dark.css new file mode 100644 index 000000000000..b4c0da1f786b --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/solarized-dark.css @@ -0,0 +1,84 @@ +/* + +Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #002b36; + color: #839496; +} + +.hljs-comment, +.hljs-quote { + color: #586e75; +} + +/* Solarized Green */ +.hljs-keyword, +.hljs-selector-tag, +.hljs-addition { + color: #859900; +} + +/* Solarized Cyan */ +.hljs-number, +.hljs-string, +.hljs-meta .hljs-meta-string, +.hljs-literal, +.hljs-doctag, +.hljs-regexp { + color: #2aa198; +} + +/* Solarized Blue */ +.hljs-title, +.hljs-section, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #268bd2; +} + +/* Solarized Yellow */ +.hljs-attribute, +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-class .hljs-title, +.hljs-type { + color: #b58900; +} + +/* Solarized Orange */ +.hljs-symbol, +.hljs-bullet, +.hljs-subst, +.hljs-meta, +.hljs-meta .hljs-keyword, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-link { + color: #cb4b16; +} + +/* Solarized Red */ +.hljs-built_in, +.hljs-deletion { + color: #dc322f; +} + +.hljs-formula { + background: #073642; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/solarized-light.css b/addons/info/src/components/markdown/hljs-styles/solarized-light.css new file mode 100644 index 000000000000..fdcfcc72c457 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/solarized-light.css @@ -0,0 +1,84 @@ +/* + +Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #fdf6e3; + color: #657b83; +} + +.hljs-comment, +.hljs-quote { + color: #93a1a1; +} + +/* Solarized Green */ +.hljs-keyword, +.hljs-selector-tag, +.hljs-addition { + color: #859900; +} + +/* Solarized Cyan */ +.hljs-number, +.hljs-string, +.hljs-meta .hljs-meta-string, +.hljs-literal, +.hljs-doctag, +.hljs-regexp { + color: #2aa198; +} + +/* Solarized Blue */ +.hljs-title, +.hljs-section, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #268bd2; +} + +/* Solarized Yellow */ +.hljs-attribute, +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-class .hljs-title, +.hljs-type { + color: #b58900; +} + +/* Solarized Orange */ +.hljs-symbol, +.hljs-bullet, +.hljs-subst, +.hljs-meta, +.hljs-meta .hljs-keyword, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-link { + color: #cb4b16; +} + +/* Solarized Red */ +.hljs-built_in, +.hljs-deletion { + color: #dc322f; +} + +.hljs-formula { + background: #eee8d5; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/sunburst.css b/addons/info/src/components/markdown/hljs-styles/sunburst.css new file mode 100644 index 000000000000..f56dd5e9b619 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/sunburst.css @@ -0,0 +1,102 @@ +/* + +Sunburst-like style (c) Vasily Polovnyov + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #000; + color: #f8f8f8; +} + +.hljs-comment, +.hljs-quote { + color: #aeaeae; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #e28964; +} + +.hljs-string { + color: #65b042; +} + +.hljs-subst { + color: #daefa3; +} + +.hljs-regexp, +.hljs-link { + color: #e9c062; +} + +.hljs-title, +.hljs-section, +.hljs-tag, +.hljs-name { + color: #89bdff; +} + +.hljs-class .hljs-title, +.hljs-doctag { + text-decoration: underline; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-number { + color: #3387cc; +} + +.hljs-params, +.hljs-variable, +.hljs-template-variable { + color: #3e87e3; +} + +.hljs-attribute { + color: #cda869; +} + +.hljs-meta { + color: #8996a8; +} + +.hljs-formula { + background-color: #0e2231; + color: #f8f8f8; + font-style: italic; +} + +.hljs-addition { + background-color: #253b22; + color: #f8f8f8; +} + +.hljs-deletion { + background-color: #420e09; + color: #f8f8f8; +} + +.hljs-selector-class { + color: #9b703f; +} + +.hljs-selector-id { + color: #8b98ab; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/tomorrow-night-blue.css b/addons/info/src/components/markdown/hljs-styles/tomorrow-night-blue.css new file mode 100644 index 000000000000..78e59cc8cb0a --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/tomorrow-night-blue.css @@ -0,0 +1,75 @@ +/* Tomorrow Night Blue Theme */ +/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ +/* Original theme - https://github.com/chriskempson/tomorrow-theme */ +/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ + +/* Tomorrow Comment */ +.hljs-comment, +.hljs-quote { + color: #7285b7; +} + +/* Tomorrow Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #ff9da4; +} + +/* Tomorrow Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #ffc58f; +} + +/* Tomorrow Yellow */ +.hljs-attribute { + color: #ffeead; +} + +/* Tomorrow Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #d1f1a9; +} + +/* Tomorrow Blue */ +.hljs-title, +.hljs-section { + color: #bbdaff; +} + +/* Tomorrow Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #ebbbff; +} + +.hljs { + display: block; + overflow-x: auto; + background: #002451; + color: white; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/tomorrow-night-bright.css b/addons/info/src/components/markdown/hljs-styles/tomorrow-night-bright.css new file mode 100644 index 000000000000..e05af8ae2458 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/tomorrow-night-bright.css @@ -0,0 +1,74 @@ +/* Tomorrow Night Bright Theme */ +/* Original theme - https://github.com/chriskempson/tomorrow-theme */ +/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ + +/* Tomorrow Comment */ +.hljs-comment, +.hljs-quote { + color: #969896; +} + +/* Tomorrow Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #d54e53; +} + +/* Tomorrow Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #e78c45; +} + +/* Tomorrow Yellow */ +.hljs-attribute { + color: #e7c547; +} + +/* Tomorrow Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #b9ca4a; +} + +/* Tomorrow Blue */ +.hljs-title, +.hljs-section { + color: #7aa6da; +} + +/* Tomorrow Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #c397d8; +} + +.hljs { + display: block; + overflow-x: auto; + background: black; + color: #eaeaea; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/tomorrow-night-eighties.css b/addons/info/src/components/markdown/hljs-styles/tomorrow-night-eighties.css new file mode 100644 index 000000000000..08fd51c742af --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/tomorrow-night-eighties.css @@ -0,0 +1,74 @@ +/* Tomorrow Night Eighties Theme */ +/* Original theme - https://github.com/chriskempson/tomorrow-theme */ +/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ + +/* Tomorrow Comment */ +.hljs-comment, +.hljs-quote { + color: #999999; +} + +/* Tomorrow Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #f2777a; +} + +/* Tomorrow Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #f99157; +} + +/* Tomorrow Yellow */ +.hljs-attribute { + color: #ffcc66; +} + +/* Tomorrow Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #99cc99; +} + +/* Tomorrow Blue */ +.hljs-title, +.hljs-section { + color: #6699cc; +} + +/* Tomorrow Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #cc99cc; +} + +.hljs { + display: block; + overflow-x: auto; + background: #2d2d2d; + color: #cccccc; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/tomorrow-night.css b/addons/info/src/components/markdown/hljs-styles/tomorrow-night.css new file mode 100644 index 000000000000..ddd270a4e765 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/tomorrow-night.css @@ -0,0 +1,75 @@ +/* Tomorrow Night Theme */ +/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ +/* Original theme - https://github.com/chriskempson/tomorrow-theme */ +/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ + +/* Tomorrow Comment */ +.hljs-comment, +.hljs-quote { + color: #969896; +} + +/* Tomorrow Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #cc6666; +} + +/* Tomorrow Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #de935f; +} + +/* Tomorrow Yellow */ +.hljs-attribute { + color: #f0c674; +} + +/* Tomorrow Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #b5bd68; +} + +/* Tomorrow Blue */ +.hljs-title, +.hljs-section { + color: #81a2be; +} + +/* Tomorrow Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #b294bb; +} + +.hljs { + display: block; + overflow-x: auto; + background: #1d1f21; + color: #c5c8c6; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/tomorrow.css b/addons/info/src/components/markdown/hljs-styles/tomorrow.css new file mode 100644 index 000000000000..026a62fe3bee --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/tomorrow.css @@ -0,0 +1,72 @@ +/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ + +/* Tomorrow Comment */ +.hljs-comment, +.hljs-quote { + color: #8e908c; +} + +/* Tomorrow Red */ +.hljs-variable, +.hljs-template-variable, +.hljs-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-regexp, +.hljs-deletion { + color: #c82829; +} + +/* Tomorrow Orange */ +.hljs-number, +.hljs-built_in, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params, +.hljs-meta, +.hljs-link { + color: #f5871f; +} + +/* Tomorrow Yellow */ +.hljs-attribute { + color: #eab700; +} + +/* Tomorrow Green */ +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-addition { + color: #718c00; +} + +/* Tomorrow Blue */ +.hljs-title, +.hljs-section { + color: #4271ae; +} + +/* Tomorrow Purple */ +.hljs-keyword, +.hljs-selector-tag { + color: #8959a8; +} + +.hljs { + display: block; + overflow-x: auto; + background: white; + color: #4d4d4c; + padding: 0.5em; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/vs.css b/addons/info/src/components/markdown/hljs-styles/vs.css new file mode 100644 index 000000000000..c5d07d3115d3 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/vs.css @@ -0,0 +1,68 @@ +/* + +Visual Studio-like style based on original C# coloring by Jason Diamond + +*/ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: white; + color: black; +} + +.hljs-comment, +.hljs-quote, +.hljs-variable { + color: #008000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-built_in, +.hljs-name, +.hljs-tag { + color: #00f; +} + +.hljs-string, +.hljs-title, +.hljs-section, +.hljs-attribute, +.hljs-literal, +.hljs-template-tag, +.hljs-template-variable, +.hljs-type, +.hljs-addition { + color: #a31515; +} + +.hljs-deletion, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-meta { + color: #2b91af; +} + +.hljs-doctag { + color: #808080; +} + +.hljs-attr { + color: #f00; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link { + color: #00b0e8; +} + + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/markdown/hljs-styles/vs2015.css b/addons/info/src/components/markdown/hljs-styles/vs2015.css new file mode 100644 index 000000000000..d1d9be3caa54 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/vs2015.css @@ -0,0 +1,115 @@ +/* + * Visual Studio 2015 dark style + * Author: Nicolas LLOBERA + */ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #1E1E1E; + color: #DCDCDC; +} + +.hljs-keyword, +.hljs-literal, +.hljs-symbol, +.hljs-name { + color: #569CD6; +} +.hljs-link { + color: #569CD6; + text-decoration: underline; +} + +.hljs-built_in, +.hljs-type { + color: #4EC9B0; +} + +.hljs-number, +.hljs-class { + color: #B8D7A3; +} + +.hljs-string, +.hljs-meta-string { + color: #D69D85; +} + +.hljs-regexp, +.hljs-template-tag { + color: #9A5334; +} + +.hljs-subst, +.hljs-function, +.hljs-title, +.hljs-params, +.hljs-formula { + color: #DCDCDC; +} + +.hljs-comment, +.hljs-quote { + color: #57A64A; + font-style: italic; +} + +.hljs-doctag { + color: #608B4E; +} + +.hljs-meta, +.hljs-meta-keyword, +.hljs-tag { + color: #9B9B9B; +} + +.hljs-variable, +.hljs-template-variable { + color: #BD63C5; +} + +.hljs-attr, +.hljs-attribute, +.hljs-builtin-name { + color: #9CDCFE; +} + +.hljs-section { + color: gold; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +/*.hljs-code { + font-family:'Monospace'; +}*/ + +.hljs-bullet, +.hljs-selector-tag, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #D7BA7D; +} + +.hljs-addition { + background-color: #144212; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #600; + display: inline-block; + width: 100%; +} diff --git a/addons/info/src/components/markdown/hljs-styles/xcode.css b/addons/info/src/components/markdown/hljs-styles/xcode.css new file mode 100644 index 000000000000..43dddad84d7d --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/xcode.css @@ -0,0 +1,93 @@ +/* + +XCode style (c) Angel Garcia + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #fff; + color: black; +} + +.hljs-comment, +.hljs-quote { + color: #006a00; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal { + color: #aa0d91; +} + +.hljs-name { + color: #008; +} + +.hljs-variable, +.hljs-template-variable { + color: #660; +} + +.hljs-string { + color: #c41a16; +} + +.hljs-regexp, +.hljs-link { + color: #080; +} + +.hljs-title, +.hljs-tag, +.hljs-symbol, +.hljs-bullet, +.hljs-number, +.hljs-meta { + color: #1c00cf; +} + +.hljs-section, +.hljs-class .hljs-title, +.hljs-type, +.hljs-attr, +.hljs-built_in, +.hljs-builtin-name, +.hljs-params { + color: #5c2699; +} + +.hljs-attribute, +.hljs-subst { + color: #000; +} + +.hljs-formula { + background-color: #eee; + font-style: italic; +} + +.hljs-addition { + background-color: #baeeba; +} + +.hljs-deletion { + background-color: #ffc8bd; +} + +.hljs-selector-id, +.hljs-selector-class { + color: #9b703f; +} + +.hljs-doctag, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/addons/info/src/components/markdown/hljs-styles/xt256.css b/addons/info/src/components/markdown/hljs-styles/xt256.css new file mode 100644 index 000000000000..58df82cb7511 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/xt256.css @@ -0,0 +1,92 @@ + +/* + xt256.css + + Contact: initbar [at] protonmail [dot] ch + : github.com/initbar +*/ + +.hljs { + display: block; + overflow-x: auto; + color: #eaeaea; + background: #000; + padding: 0.5; +} + +.hljs-subst { + color: #eaeaea; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-builtin-name, +.hljs-type { + color: #eaeaea; +} + +.hljs-params { + color: #da0000; +} + +.hljs-literal, +.hljs-number, +.hljs-name { + color: #ff0000; + font-weight: bolder; +} + +.hljs-comment { + color: #969896; +} + +.hljs-selector-id, +.hljs-quote { + color: #00ffff; +} + +.hljs-template-variable, +.hljs-variable, +.hljs-title { + color: #00ffff; + font-weight: bold; +} + +.hljs-selector-class, +.hljs-keyword, +.hljs-symbol { + color: #fff000; +} + +.hljs-string, +.hljs-bullet { + color: #00ff00; +} + +.hljs-tag, +.hljs-section { + color: #000fff; +} + +.hljs-selector-tag { + color: #000fff; + font-weight: bold; +} + +.hljs-attribute, +.hljs-built_in, +.hljs-regexp, +.hljs-link { + color: #ff00ff; +} + +.hljs-meta { + color: #fff; + font-weight: bolder; +} diff --git a/addons/info/src/components/markdown/hljs-styles/zenburn.css b/addons/info/src/components/markdown/hljs-styles/zenburn.css new file mode 100644 index 000000000000..07be502016b4 --- /dev/null +++ b/addons/info/src/components/markdown/hljs-styles/zenburn.css @@ -0,0 +1,80 @@ +/* + +Zenburn style from voldmar.ru (c) Vladimir Epifanov +based on dark.css by Ivan Sagalaev + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #3f3f3f; + color: #dcdcdc; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-tag { + color: #e3ceab; +} + +.hljs-template-tag { + color: #dcdcdc; +} + +.hljs-number { + color: #8cd0d3; +} + +.hljs-variable, +.hljs-template-variable, +.hljs-attribute { + color: #efdcbc; +} + +.hljs-literal { + color: #efefaf; +} + +.hljs-subst { + color: #8f8f8f; +} + +.hljs-title, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class, +.hljs-section, +.hljs-type { + color: #efef8f; +} + +.hljs-symbol, +.hljs-bullet, +.hljs-link { + color: #dca3a3; +} + +.hljs-deletion, +.hljs-string, +.hljs-built_in, +.hljs-builtin-name { + color: #cc9393; +} + +.hljs-addition, +.hljs-comment, +.hljs-quote, +.hljs-meta { + color: #7f9f7f; +} + + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/addons/info/src/components/stories/index.js b/addons/info/src/components/stories/index.js index f5af43a20452..87725d850cf1 100644 --- a/addons/info/src/components/stories/index.js +++ b/addons/info/src/components/stories/index.js @@ -15,6 +15,7 @@ import Props from '../Props'; import PropTable from '../PropTable'; import PropVal from '../PropVal'; import { Code, Pre, Blockquote } from '../markdown/code'; +import rmkCompiler from '../markdown/compiler'; import { defaultOptions, defaultMarksyConf } from '../../defaults'; import * as mock from './mock-data'; @@ -80,6 +81,8 @@ storiesOf('Root Info Component (Story.js)', module) **Note**: actual components of **addon-info** are in the *preview* area. At the same time we use addon-info itself to see component's details. You can find this information in the **INFO** panel + + PR #1501 by @usulpro ` ) .add('with Widget', () => @@ -430,40 +433,54 @@ run \`setOptions({ downPanelInRight: true });\` const demo = ` # Some blog title -Just need to show you some code of \`storybook-addon\` first: +Just **need** to _show_ you @usulpro some code in #1501 PR for of \`storybook-addon\`: + +1. AAAAA +2. BBBBB +3. CCCCC + +- XXXXXxxxx +- YYYyyyyy +- ZZzzzzzZZZZzzzZZzz ## My awesome subtitle!!! +### Heading level 3 + +#### Heading level 4 + +##### Heading level 5 + \`\`\`js import { configure, setAddon } from '@storybook/react'; import { withInfo, setInfoOptions } from '@storybook/addon-info'; import { setOptions } from '@storybook/addon-options'; setOptions({ - downPanelInRight: true, + downPanelInRight: true, }) const props = () => ({ - summary: mock.widgetSummary, - context: mock.context, - showInline: Boolean(options.inline), - showHeader: Boolean(options.header), - showSource: Boolean(options.source), - hideInfoButton: Boolean(!options.infoButton), - propTables: options.propTables || null, - propTablesExclude: options.propTablesExclude, - styles: typeof options.styles === 'function' && options.styles, - marksyConf, - maxPropObjectKeys: maxPropObjectKeys(), - maxPropArrayLength: maxPropArrayLength(options.maxPropArrayLength), - maxPropsIntoLine: maxPropsIntoLine(options.maxPropsIntoLine), - maxPropStringLength: maxPropStringLength(options.maxPropStringLength), + summary: mock.widgetSummary, + context: mock.context, + showInline: Boolean(options.inline), + showHeader: Boolean(options.header), + showSource: Boolean(options.source), + hideInfoButton: Boolean(!options.infoButton), + propTables: options.propTables || null, + propTablesExclude: options.propTablesExclude, + styles: typeof options.styles === 'function' && options.styles, + marksyConf, + maxPropObjectKeys: maxPropObjectKeys(), + maxPropArrayLength: maxPropArrayLength(options.maxPropArrayLength), + maxPropsIntoLine: maxPropsIntoLine(options.maxPropsIntoLine), + maxPropStringLength: maxPropStringLength(options.maxPropStringLength), }); \`\`\` - Need to tell you something over here - And over here +Need to tell you something over here +And over here `; @@ -480,6 +497,10 @@ storiesOf('Markdown/marksy', module) ); +storiesOf('Markdown/remark', module) + .add('example 1', () => rmkCompiler(demo)) + .add('example 2', () => rmkCompiler(mdString)); + storiesOf('Mock Components', module) .add('Widget with text', () => { setInfoOptions({ summary: mock.widgetSummary, propTables: [mock.Widget] }); diff --git a/addons/info/src/components/stories/mock-data/index.js b/addons/info/src/components/stories/mock-data/index.js index ddf2d794e3dd..73d3b75c938e 100644 --- a/addons/info/src/components/stories/mock-data/index.js +++ b/addons/info/src/components/stories/mock-data/index.js @@ -10,7 +10,7 @@ const widgetProps = { const widgetSummary = ` # Widget mock -This is example React component to be used for testing addon-info +This is example React component to be used for testing \`addon-info\` ## Contains @@ -24,6 +24,29 @@ This is example React component to be used for testing addon-info - string - bool +PR #1501 by @usulpro + +### Piece of code now + +~~~js +export { Widget, widgetProps, widgetSummary }; +export { markdown }; + +const context = { + kind: 'Example Component', + story: 'example story', + aaa: true, + bbb: 1 + 1, + ccc: object.field, +}; + +function todo(items) { + return items.map( item => item.make.done ); +} + +export { defaultOptions, defaultMarksyConf, context }; +~~~ + `; export { Widget, widgetProps, widgetSummary }; From 01ea321897041920755bec7c736ee57395bba9a9 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 21 Aug 2017 02:18:30 +0300 Subject: [PATCH 20/33] Temporary remove remark-github --- addons/info/package.json | 1 - addons/info/src/components/Story.js | 2 +- addons/info/src/components/markdown/compiler.js | 9 +++++---- addons/info/src/components/stories/index.js | 8 ++++++++ 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/addons/info/package.json b/addons/info/package.json index ab031072b110..61649fc2467f 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -23,7 +23,6 @@ "react-komposer": "^2.0.0", "rehype-highlight": "^2.0.1", "rehype-react": "^3.0.0", - "remark-github": "^7.0.1", "remark-parse": "^4.0.0", "remark-rehype": "^2.0.1", "unified": "^6.1.5", diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 63b6db618a41..7e89b9b9b478 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -6,7 +6,7 @@ import global from 'global'; import marksy from 'marksy'; import rmkCompiler from './markdown/compiler'; -import './markdown/hljs-styles/github.css'; +import './markdown/hljs-styles/androidstudio.css'; import PropTable from './PropTable'; import Node from './Node'; diff --git a/addons/info/src/components/markdown/compiler.js b/addons/info/src/components/markdown/compiler.js index 2374bd9ecd81..5d901b42f4c6 100644 --- a/addons/info/src/components/markdown/compiler.js +++ b/addons/info/src/components/markdown/compiler.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import unified from 'unified'; import remarkParser from 'remark-parse'; -import github from 'remark-github'; +// import github from 'remark-github'; import remarkRehype from 'remark-rehype'; import highlight from 'rehype-highlight'; import rehypeReact from 'rehype-react'; @@ -98,6 +98,7 @@ const components = { , pre: ({ props, children }) => 
+      
+    
+    ~~~
   `
   )
   .add('with Widget', () =>

From 63e30268cc353397f9c8839243b12aea378ecc41 Mon Sep 17 00:00:00 2001
From: Oleg Proskurin 
Date: Wed, 23 Aug 2017 02:23:01 +0300
Subject: [PATCH 21/33] Setup remark compiler

---
 addons/info/package.json                      |   4 +
 addons/info/src/components/Story.js           |  28 +-
 addons/info/src/components/markdown/code.js   |  90 -----
 .../info/src/components/markdown/compiler.js  | 160 +--------
 .../info/src/components/markdown/defaults.js  | 103 ++++++
 addons/info/src/components/markdown/htags.js  | 122 -------
 addons/info/src/components/markdown/index.js  |   5 +-
 addons/info/src/components/markdown/text.js   |  65 ----
 addons/info/src/components/stories/index.js   | 166 +--------
 .../components/stories/mock-data/summary.md   | 324 +++++++++++++++---
 addons/info/src/defaults.js                   |  28 +-
 addons/info/src/panel/index.js                |   2 +
 12 files changed, 446 insertions(+), 651 deletions(-)
 delete mode 100644 addons/info/src/components/markdown/code.js
 create mode 100644 addons/info/src/components/markdown/defaults.js
 delete mode 100644 addons/info/src/components/markdown/htags.js
 delete mode 100644 addons/info/src/components/markdown/text.js

diff --git a/addons/info/package.json b/addons/info/package.json
index 61649fc2467f..455219e27a3a 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -23,7 +23,11 @@
     "react-komposer": "^2.0.0",
     "rehype-highlight": "^2.0.1",
     "rehype-react": "^3.0.0",
+    "remark-emoji": "^2.0.0",
+    "remark-github": "^7.0.2",
+    "remark-highlight.js": "^5.0.0",
     "remark-parse": "^4.0.0",
+    "remark-react": "^4.0.0",
     "remark-rehype": "^2.0.1",
     "unified": "^6.1.5",
     "util-deprecate": "^1.0.2"
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index 7e89b9b9b478..661dd2b37dac 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import global from 'global';
 
 import marksy from 'marksy';
-import rmkCompiler from './markdown/compiler';
+import { compile } from './markdown';
 import './markdown/hljs-styles/androidstudio.css';
 
 import PropTable from './PropTable';
@@ -265,7 +265,7 @@ export default class Story extends React.Component {
     const source = lines.map(s => s.slice(padding)).join('\n');
     return (
       

-        {rmkCompiler(source)}
+        {compile(source)}
 
       

     );
@@ -305,17 +305,19 @@ export default class Story extends React.Component {
       

         
Story Source

         
-          {React.Children.map(this.props.children, (root, idx) =>
-            
-          )}
+          
+            {React.Children.map(this.props.children, (root, idx) =>
+              
+            )}
+          
         

       

     );
diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js
deleted file mode 100644
index 4c0034ff1722..000000000000
--- a/addons/info/src/components/markdown/code.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Prism } from 'global';
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export class Code extends React.Component {
-  componentDidMount() {
-    this.highlight();
-  }
-
-  componentDidUpdate() {
-    this.highlight();
-  }
-
-  highlight() {
-    if (typeof Prism !== 'undefined') {
-      Prism.highlightAll();
-    }
-  }
-
-  render() {
-    const codeStyle = {
-      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-      backgroundColor: '#fafafa',
-    };
-
-    const preStyle = {
-      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-      backgroundColor: '#fafafa',
-      padding: '.5rem',
-      lineHeight: 1.5,
-      overflowX: 'scroll',
-    };
-
-    const className = this.props.language ? `language-${this.props.language}` : '';
-
-    return (
-      
-        
-          {this.props.code}
-        
-      

-    );
-  }
-}
-
-Code.propTypes = {
-  language: PropTypes.string,
-  code: PropTypes.node,
-};
-Code.defaultProps = {
-  language: null,
-  code: null,
-};
-
-export function Pre(props) {
-  const style = {
-    fontSize: '.88em',
-    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-    backgroundColor: 'hsl(0, 0%, 96%)',
-    border: '2px solid hsl(0, 0%, 88%)',
-    padding: '.5rem',
-    lineHeight: 1.5,
-    overflowX: 'auto',
-  };
-  return (
-    
-      {props.children}
-    

-  );
-}
-
-Pre.propTypes = { children: PropTypes.node };
-Pre.defaultProps = { children: null };
-
-export function Blockquote(props) {
-  const style = {
-    fontSize: '1.88em',
-    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-    borderLeft: '8px solid #fafafa',
-    padding: '1rem',
-  };
-  return (
-    

-      {props.children}
-    

-  );
-}
-
-Blockquote.propTypes = { children: PropTypes.node };
-Blockquote.defaultProps = { children: null };
diff --git a/addons/info/src/components/markdown/compiler.js b/addons/info/src/components/markdown/compiler.js
index 5d901b42f4c6..ea537fa7d668 100644
--- a/addons/info/src/components/markdown/compiler.js
+++ b/addons/info/src/components/markdown/compiler.js
@@ -1,149 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
 import unified from 'unified';
-import remarkParser from 'remark-parse';
-// import github from 'remark-github';
-import remarkRehype from 'remark-rehype';
-import highlight from 'rehype-highlight';
-import rehypeReact from 'rehype-react';
-
-const baseFonts =
-  '-apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif';
-
-const propTypes = {
-  props: PropTypes.object,
-  children: PropTypes.array,
-};
-
-const defaultProps = {
-  props: {},
-  children: [],
-};
-
-const components = {
-  p: ({ props, children }) =>
-    

-      {children}
-    
,
-  a_of: ({ props, children }) =>
-    
-      [props: {props} ]
-      {children}
-    ,
-  ul: ({ props, children }) =>
-    
    
-      {children}
-    
,
-  ol: ({ props, children }) =>
-    
    
-      {children}
-    
,
-  strong: ({ props, children }) =>
-    
-      {children}
-    ,
-  code: ({ props, children }) =>
-     1
-          ? {
-              fontSize: 14,
-            }
-          : {
-              border: '1px solid hsl(0, 0%, 80%)',
-              borderRadius: 4,
-              // color: '#0366d6',
-              backgroundColor: 'hsl(0, 0%, 90%)',
-              padding: '2px 4px',
-              margin: '2px 6px',
-            }
-      }
-    >
-      {children}
-    ,
-  pre: ({ props, children }) =>
-    
-      {children}
-    
,
-};
-
-components.p.propTypes = propTypes;
-components.a_of.propTypes = propTypes;
-components.ul.propTypes = propTypes;
-components.ol.propTypes = propTypes;
-components.strong.propTypes = propTypes;
-components.code.propTypes = propTypes;
-components.pre.propTypes = propTypes;
+import remarkParse from 'remark-parse';
+import remarkReact from 'remark-react';
+import remarkGithub from 'remark-github';
+import remarkEmoji from 'remark-emoji';
+import remarkHighlight from 'remark-highlight.js';
 
-components.p.defaultProps = defaultProps;
-components.a_of.defaultProps = defaultProps;
-components.ul.defaultProps = defaultProps;
-components.ol.defaultProps = defaultProps;
-components.strong.defaultProps = defaultProps;
-components.code.defaultProps = defaultProps;
-components.pre.defaultProps = defaultProps;
+import { options as defaultOptions } from './defaults';
 
-let options = {
-  repository: 'https://github.com/storybooks/storybook',
-  components,
-  createElement: React.createElement,
-};
+let options = defaultOptions;
 
 function setupProcessor() {
   return unified()
-    .use(remarkParser)
-    // .use(github, {
-    //   repository: options.repository,
-    // })
-    .use(remarkRehype)
-    .use(highlight)
-    .use(rehypeReact, {
-      createElement: options.createElement,
-      components: options.components,
-    });
+    .use(remarkParse)
+    .use(remarkGithub, {
+      repository: options.repository,
+    })
+    .use(remarkEmoji)
+    .use(remarkHighlight)
+    .use(remarkReact, { remarkReactComponents: options.components, sanitize: false });
 }
 
 let processor = setupProcessor();
@@ -152,10 +26,14 @@ export function setOptions(newOptions) {
   options = {
     ...options,
     ...newOptions,
+    components: {
+      ...options.components,
+      ...newOptions.components,
+    },
   };
   processor = setupProcessor();
 }
 
-export default function compile(markdown) {
+export function compile(markdown) {
   return processor.processSync(markdown).contents;
 }
diff --git a/addons/info/src/components/markdown/defaults.js b/addons/info/src/components/markdown/defaults.js
new file mode 100644
index 000000000000..bdee0c81d80b
--- /dev/null
+++ b/addons/info/src/components/markdown/defaults.js
@@ -0,0 +1,103 @@
+/* eslint-disable jsx-a11y/heading-has-content */
+/* eslint-disable jsx-a11y/anchor-has-content */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const themeInfo = {
+  palette: {
+    textColor: 'hsl(218, 54%, 20%)',
+    linkColor: 'hsl(216, 100%, 40%)',
+    backgroundColor: 'hsl(0, 0%, 100%)',
+  },
+  code: {
+    textColor: 'hsl(218, 54%, 20%)',
+    backgroundColor: 'hsl(0, 0%, 96%)',
+    borderColor: 'hsl(0, 0%, 80%)',
+    borderRadius: 3,
+  },
+  baseFonts:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif',
+};
+const codeStyle = theme => ({
+  border: `1px ${theme.code.borderColor} solid`,
+  borderRadius: theme.code.borderRadius,
+  color: theme.code.textColor,
+  backgroundColor: theme.code.backgroundColor,
+  padding: '1px 3px',
+});
+const mainStyle = (theme, overrides) => ({
+  fontFamily: theme.baseFonts,
+  fontSize: 14,
+  color: theme.palette.textColor,
+  backgroundColor: theme.palette.backgroundColor,
+  ...overrides,
+});
+const linkStyle = theme => ({
+  color: theme.palette.linkColor,
+  textDecoration: 'none',
+});
+
+export const CodeFenced = props => ;
+export const CodeInline = props => ;
+
+export const Pre = props => {
+  const isFenced = props.children[0] ? props.children[0].type.name === 'code' : false;
+  if (isFenced)
+    return (
+      
+        
+      

+    );
+  return 
;
+};
+
+Pre.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+};
+
+const components = {
+  h1: props => 
,
+  h2: props => 
,
+  h3: props => 
,
+  h4: props =>
+    
,
+  h5: props =>
+    
,
+  h6: props =>
+    
,
+  p: props => 
,
+  a: props => ,
+  ul: props =>