Plugin API first draft

loaders/styleguide-loader.js

@@ -1,4 +1,5 @@
 'use strict';
+/* eslint-disable no-console */
 
 const pick = require('lodash/pick');
 const commonDir = require('common-dir');
@@ -8,22 +9,9 @@ const getAllContentPages = require('./utils/getAllContentPages');
 const getComponentFilesFromSections = require('./utils/getComponentFilesFromSections');
 const getComponentPatternsFromSections = require('./utils/getComponentPatternsFromSections');
 const getSections = require('./utils/getSections');
+const getPlugins = require('./utils/getPlugins');
 const filterComponentsWithExample = require('./utils/filterComponentsWithExample');
-
-/* eslint-disable no-console */
-
-// Config options that should be passed to the client
-const CLIENT_CONFIG_OPTIONS = [
-	'title',
-	'highlightTheme',
-	'showCode',
-	'showUsage',
-	'showSidebar',
-	'previewDelay',
-	'theme',
-	'styles',
-	'compilerConfig',
-];
+const CLIENT_CONFIG_OPTIONS = require('../scripts/schemas/config').CLIENT_CONFIG_OPTIONS;
 
 module.exports = function() {};
 module.exports.pitch = function() {
@@ -68,6 +56,7 @@ module.exports.pitch = function() {
 
 	const styleguide = {
 		config: pick(config, CLIENT_CONFIG_OPTIONS),
+		plugins: getPlugins(config.plugins),
 		welcomeScreen,
 		patterns,
 		sections,

loaders/utils/getPlugins.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const map = require('lodash/map');
+const requireIt = require('./requireIt');
+
+/**
+ * TODO
+ *
+ * @param {object} plugins
+ * @returns {object[]}
+ */
+module.exports = function getPlugins(plugins) {
+	return map(plugins, module => {
+		const path = typeof module === 'string' ? module : module[0];
+		const options = typeof module === 'string' ? {} : module[1];
+		return {
+			module: requireIt(path),
+			options,
+		};
+	});
+};

scripts/make-webpack-config.js

@@ -36,6 +36,7 @@ module.exports = function(config, env) {
 		resolve: {
 			extensions: isWebpack1 ? ['.js', '.jsx', '.json', ''] : ['.js', '.jsx', '.json'],
 			alias: {
+				'rsg-plugins': path.resolve(sourceDir, 'plugins'),
 				'rsg-codemirror-theme.css': `codemirror/theme/${config.highlightTheme}.css`,
 			},
 		},

scripts/schemas/config.js

@@ -1,11 +1,25 @@
 'use strict';
 
 // If you want to access any of these options in React, don’t forget to update CLIENT_CONFIG_OPTIONS array
-// in loaders/styleguide-loader.js
 
 /* eslint-disable no-console */
 
+// Config options that should be passed to the client
+const CLIENT_CONFIG_OPTIONS = [
+	'compilerConfig',
+	'highlightTheme',
+	'showCode',
+	'showUsage',
+	'showSidebar',
+	'plugins',
+	'previewDelay',
+	'theme',
+	'title',
+	'styles',
+];
+
 const DEFAULT_COMPONENTS_PATTERN = 'src/@(components|Components)/**/*.{js,jsx}';
+const CORE_PLUGINS = ['rsg-plugins/code-editor', 'rsg-plugins/isolate', 'rsg-plugins/usage'];
 
 const fs = require('fs');
 const path = require('path');
@@ -90,6 +104,15 @@ module.exports = {
 		type: 'string',
 		default: 'base16-light',
 	},
+	plugins: {
+		type: 'array',
+		default: [],
+		process: val =>
+			CORE_PLUGINS.reduce((allPlugins, plugin) => {
+				allPlugins.push(plugin);
+				return allPlugins;
+			}, val || []),
+	},
 	previewDelay: {
 		type: 'number',
 		default: 500,
@@ -237,3 +260,5 @@ module.exports = {
 		},
 	},
 };
+
+module.exports.CLIENT_CONFIG_OPTIONS = CLIENT_CONFIG_OPTIONS;

src/index.js

@@ -13,7 +13,7 @@ import {
 	setSlugs,
 	slugger,
 } from './utils/utils';
-import slots from './rsg-components/slots';
+import loadPlugins from './utils/loadPlugins';
 import StyleGuide from 'rsg-components/StyleGuide';
 
 // Examples code revision to rerender only code examples (not the whole page) when code changes
@@ -64,11 +64,12 @@ function renderStyleguide() {
 	slugger.reset();
 	sections = setSlugs(sections);
 
+	const { config } = styleguide;
 	ReactDOM.render(
 		<StyleGuide
 			codeRevision={codeRevision}
-			config={styleguide.config}
-			slots={slots}
+			config={config}
+			slots={loadPlugins(styleguide.plugins, config)}
 			welcomeScreen={styleguide.welcomeScreen}
 			patterns={styleguide.patterns}
 			sections={sections}

src/rsg-components/slots/CodeTabButton.js → src/plugins/code-editor/CodeTabButton.js

@@ -1,16 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import TabButton from 'rsg-components/TabButton';
 
 const CodeTabButton = props =>
 	<TabButton {...props}>
 		Code
 	</TabButton>;
 
-CodeTabButton.propTypes = {
-	onClick: PropTypes.func.isRequired,
-	name: PropTypes.string.isRequired,
-	active: PropTypes.bool,
-};
-
 export default CodeTabButton;

src/plugins/code-editor/index.js

@@ -0,0 +1,21 @@
+import Editor from 'rsg-components/Editor';
+import CodeTabButton from './CodeTabButton';
+
+export const EXAMPLE_TAB_CODE_EDITOR = 'rsg-code-editor';
+
+const codeEditorPlugin = () => ({
+	fills: [
+		{
+			id: EXAMPLE_TAB_CODE_EDITOR,
+			type: 'exampleTabButton',
+			render: CodeTabButton,
+		},
+		{
+			id: EXAMPLE_TAB_CODE_EDITOR,
+			type: 'exampleTab',
+			render: Editor,
+		},
+	],
+});
+
+export default codeEditorPlugin;

src/plugins/isolate/index.js

@@ -0,0 +1,20 @@
+import IsolateButton from './IsolateButton';
+
+const isolatePlugin = () => ({
+	fills: [
+		{
+			type: 'sectionToolbarButton',
+			render: IsolateButton,
+		},
+		{
+			type: 'componentToolbarButton',
+			render: IsolateButton,
+		},
+		{
+			type: 'exampleToolbarButton',
+			render: IsolateButton,
+		},
+	],
+});
+
+export default isolatePlugin;

src/rsg-components/slots/UsageTabButton.js → src/plugins/usage/UsageTabButton.js

@@ -13,13 +13,10 @@ const UsageTabButton = props => {
 };
 
 UsageTabButton.propTypes = {
-	onClick: PropTypes.func.isRequired,
-	name: PropTypes.string.isRequired,
 	props: PropTypes.shape({
 		props: PropTypes.object,
 		methods: PropTypes.array,
 	}).isRequired,
-	active: PropTypes.bool,
 };
 
 export default UsageTabButton;

src/plugins/usage/index.js

@@ -0,0 +1,21 @@
+import Usage from 'rsg-components/Usage';
+import UsageTabButton from './UsageTabButton';
+
+export const DOCS_TAB_USAGE = 'rsg-usage';
+
+const usagePlugin = () => ({
+	fills: [
+		{
+			id: DOCS_TAB_USAGE,
+			type: 'docsTabButton',
+			render: UsageTabButton,
+		},
+		{
+			id: DOCS_TAB_USAGE,
+			type: 'docsTab',
+			render: Usage,
+		},
+	],
+});
+
+export default usagePlugin;

src/rsg-components/Playground/Playground.js

@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce';
 import Preview from 'rsg-components/Preview';
 import Slot from 'rsg-components/Slot';
 import PlaygroundRenderer from 'rsg-components/Playground/PlaygroundRenderer';
-import { EXAMPLE_TAB_CODE_EDITOR } from '../slots';
+import { EXAMPLE_TAB_CODE_EDITOR } from '../../plugins/code-editor';
 
 export default class Playground extends Component {
 	static propTypes = {
@@ -71,21 +71,24 @@ export default class Playground extends Component {
 				preview={<Preview code={code} evalInContext={evalInContext} />}
 				tabButtons={
 					<Slot
-						name="exampleTabButtons"
+						name="exampleTabButton"
 						active={activeTab}
 						props={{ onClick: this.handleTabChange }}
 					/>
 				}
 				tabBody={
 					<Slot
-						name="exampleTabs"
+						name="exampleTab"
 						active={activeTab}
 						onlyActive
 						props={{ code, onChange: this.handleChange }}
 					/>
 				}
 				toolbar={
-					<Slot name="exampleToolbar" props={{ name, isolated: isolatedExample, example: index }} />
+					<Slot
+						name="exampleToolbarButton"
+						props={{ name, isolated: isolatedExample, example: index }}
+					/>
 				}
 			/>
 		);

src/rsg-components/Playground/Playground.spec.js

@@ -2,9 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Playground from './Playground';
 import '../../styles/setupjss';
-import slots, { EXAMPLE_TAB_CODE_EDITOR } from '../slots';
+import { EXAMPLE_TAB_CODE_EDITOR } from '../../plugins/code-editor';
 import { PlaygroundRenderer } from './PlaygroundRenderer';
 
+/* eslint-disable react/prop-types */
+
 const code = '<button>OK</button>';
 const newCode = '<button>Not OK</button>';
 const options = {
@@ -13,7 +15,21 @@ const options = {
 			showCode: false,
 			highlightTheme: 'base16-light',
 		},
-		slots,
+		slots: {
+			exampleToolbarButton: [],
+			exampleTab: [
+				{
+					id: EXAMPLE_TAB_CODE_EDITOR,
+					render: () => <div className="ReactCodeMirror">editor</div>,
+				},
+			],
+			exampleTabButton: [
+				{
+					id: EXAMPLE_TAB_CODE_EDITOR,
+					render: ({ onClick, id }) => <button name={id} onClick={onClick}>code</button>,
+				},
+			],
+		},
 	},
 	childContextTypes: {
 		slots: PropTypes.object.isRequired,

src/rsg-components/Playground/__snapshots__/Playground.spec.js.snap

@@ -40,7 +40,7 @@ exports[`should render component renderer 1`] = `
   }
   tabBody={
     <Slot
-      name="exampleTabs"
+      name="exampleTab"
       onlyActive={true}
       props={
         Object {
@@ -52,7 +52,7 @@ exports[`should render component renderer 1`] = `
   }
   tabButtons={
     <Slot
-      name="exampleTabButtons"
+      name="exampleTabButton"
       props={
         Object {
           "onClick": [Function],
@@ -62,7 +62,7 @@ exports[`should render component renderer 1`] = `
   }
   toolbar={
     <Slot
-      name="exampleToolbar"
+      name="exampleToolbarButton"
       props={
         Object {
           "example": 0,

src/rsg-components/ReactComponent/ReactComponent.js

@@ -5,7 +5,7 @@ import SectionHeading from 'rsg-components/SectionHeading';
 import JsDoc from 'rsg-components/JsDoc';
 import Markdown from 'rsg-components/Markdown';
 import Slot from 'rsg-components/Slot';
-import { DOCS_TAB_USAGE } from '../slots';
+import { DOCS_TAB_USAGE } from '../../plugins/usage';
 import ReactComponentRenderer from 'rsg-components/ReactComponent/ReactComponentRenderer';
 
 const ExamplePlaceholder = process.env.NODE_ENV === 'development'
@@ -59,7 +59,7 @@ export default class ReactComponent extends Component {
 					<SectionHeading
 						id={slug}
 						deprecated={!!tags.deprecated}
-						slotName="componentToolbar"
+						slotName="componentToolbarButton"
 						slotProps={{
 							...component,
 							isolated: isolatedComponent,
@@ -75,12 +75,12 @@ export default class ReactComponent extends Component {
 				}
 				tabButtons={
 					<Slot
-						name="docsTabButtons"
+						name="docsTabButton"
 						active={activeTab}
 						props={{ ...component, onClick: this.handleTabChange }}
 					/>
 				}
-				tabBody={<Slot name="docsTabs" active={activeTab} onlyActive props={component} />}
+				tabBody={<Slot name="docsTab" active={activeTab} onlyActive props={component} />}
 			/>
 		);
 	}

src/rsg-components/ReactComponent/ReactComponent.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import slots, { DOCS_TAB_USAGE } from '../slots';
+import { DOCS_TAB_USAGE } from '../../plugins/usage';
 import ReactComponent from './ReactComponent';
 import { ReactComponentRenderer } from './ReactComponentRenderer';
 
@@ -8,7 +8,11 @@ const options = {
 		config: {
 			showUsage: false,
 		},
-		slots,
+		slots: {
+			componentToolbarButton: {}, // TODO
+			docsTab: {}, // TODO
+			docsTabButton: {}, // TODO
+		},
 	},
 	metadata: {},
 };