Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plugin API first draft #505

Closed
wants to merge 15 commits into from
Closed
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 4 additions & 15 deletions loaders/styleguide-loader.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
'use strict';
/* eslint-disable no-console */

const pick = require('lodash/pick');
const commonDir = require('common-dir');
Expand All @@ -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() {
Expand Down Expand Up @@ -68,6 +56,7 @@ module.exports.pitch = function() {

const styleguide = {
config: pick(config, CLIENT_CONFIG_OPTIONS),
plugins: getPlugins(config.plugins),
welcomeScreen,
patterns,
sections,
Expand Down
21 changes: 21 additions & 0 deletions loaders/utils/getPlugins.js
Original file line number Diff line number Diff line change
@@ -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,
};
});
};
1 change: 1 addition & 0 deletions scripts/make-webpack-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
},
},
Expand Down
27 changes: 26 additions & 1 deletion scripts/schemas/config.js
Original file line number Diff line number Diff line change
@@ -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');
Expand Down Expand Up @@ -90,6 +104,15 @@ module.exports = {
type: 'string',
default: 'base16-light',
},
plugins: {
type: 'array',
default: [],
process: val =>
CORE_PLUGINS.reduce((allPlugins, plugin) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think now just concat should be enough ;-)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

val.concat(CORE_PLUGINS)?

allPlugins.push(plugin);
return allPlugins;
}, val || []),
},
previewDelay: {
type: 'number',
default: 500,
Expand Down Expand Up @@ -237,3 +260,5 @@ module.exports = {
},
},
};

module.exports.CLIENT_CONFIG_OPTIONS = CLIENT_CONFIG_OPTIONS;
7 changes: 4 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
21 changes: 21 additions & 0 deletions src/plugins/code-editor/index.js
Original file line number Diff line number Diff line change
@@ -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;
20 changes: 20 additions & 0 deletions src/plugins/isolate/index.js
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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;
21 changes: 21 additions & 0 deletions src/plugins/usage/index.js
Original file line number Diff line number Diff line change
@@ -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;
11 changes: 7 additions & 4 deletions src/rsg-components/Playground/Playground.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -71,21 +71,24 @@ export default class Playground extends Component {
preview={<Preview code={code} evalInContext={evalInContext} />}
tabButtons={
<Slot
name="exampleTabButtons"
name="exampleTabButton"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a more specific name like "playgroundTabButton" would be better here

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

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 }}
/>
}
/>
);
Expand Down
20 changes: 18 additions & 2 deletions src/rsg-components/Playground/Playground.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ exports[`should render component renderer 1`] = `
}
tabBody={
<Slot
name="exampleTabs"
name="exampleTab"
onlyActive={true}
props={
Object {
Expand All @@ -52,7 +52,7 @@ exports[`should render component renderer 1`] = `
}
tabButtons={
<Slot
name="exampleTabButtons"
name="exampleTabButton"
props={
Object {
"onClick": [Function],
Expand All @@ -62,7 +62,7 @@ exports[`should render component renderer 1`] = `
}
toolbar={
<Slot
name="exampleToolbar"
name="exampleToolbarButton"
props={
Object {
"example": 0,
Expand Down
8 changes: 4 additions & 4 deletions src/rsg-components/ReactComponent/ReactComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -59,7 +59,7 @@ export default class ReactComponent extends Component {
<SectionHeading
id={slug}
deprecated={!!tags.deprecated}
slotName="componentToolbar"
slotName="componentToolbarButton"
slotProps={{
...component,
isolated: isolatedComponent,
Expand All @@ -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} />}
/>
);
}
Expand Down
8 changes: 6 additions & 2 deletions src/rsg-components/ReactComponent/ReactComponent.spec.js
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -8,7 +8,11 @@ const options = {
config: {
showUsage: false,
},
slots,
slots: {
componentToolbarButton: {}, // TODO
docsTab: {}, // TODO
docsTabButton: {}, // TODO
},
},
metadata: {},
};
Expand Down
Loading