Skip to content
Permalink
Browse files
Merge branch 'six'
  • Loading branch information
sapegin committed Jul 31, 2017
2 parents ded79c8 + d7a0da1 commit eb216f6d7396eafc5ffb319d9c03c8c2aace1132
Showing with 2,004 additions and 1,697 deletions.
  1. +20 −2 .babelrc
  2. +2 −9 .travis.yml
  3. +1 −1 docs/API.md
  4. +31 −2 docs/Configuration.md
  5. +1 −1 docs/Development.md
  6. +11 −9 docs/Documenting.md
  7. +2 −2 docs/Thirdparties.md
  8. +3 −7 docs/Webpack.md
  9. +26 −4 examples/basic/src/components/Button/Readme.md
  10. +3 −1 examples/basic/src/components/CounterButton/Readme.md
  11. +13 −9 examples/basic/src/components/Modal/Readme.md
  12. +3 −1 examples/basic/src/components/Placeholder/Readme.md
  13. +4 −2 examples/basic/src/components/RandomButton/Readme.md
  14. +3 −1 examples/basic/src/components/WrappedButton/Readme.md
  15. +11 −3 examples/basic/styleguide.config.js
  16. +26 −4 examples/cra/src/components/Button.md
  17. +3 −1 examples/cra/src/components/Placeholder.md
  18. +4 −2 examples/cra/src/components/RandomButton.md
  19. +26 −4 examples/customised/src/components/Button/Readme.md
  20. +13 −9 examples/customised/src/components/Modal/Readme.md
  21. +3 −1 examples/customised/src/components/Placeholder/Readme.md
  22. +4 −2 examples/customised/src/components/RandomButton/Readme.md
  23. +12 −15 examples/customised/styleguide.config.js
  24. +2 −1 examples/customised/styleguide/components/Logo.js
  25. +0 −157 examples/customised/styleguide/components/ReactComponentRenderer.js
  26. +0 −7 examples/express/.babelrc
  27. +1 −1 examples/express/src/components/CustomEndpoint/Readme.md
  28. +6 −4 examples/express/styleguide.config.js
  29. +26 −4 examples/preact/src/components/Button/Readme.md
  30. +3 −1 examples/preact/src/components/CounterButton/Readme.md
  31. +13 −9 examples/preact/src/components/Modal/Readme.md
  32. +3 −1 examples/preact/src/components/Placeholder/Readme.md
  33. +4 −2 examples/preact/src/components/RandomButton/Readme.md
  34. +3 −1 examples/preact/src/components/WrappedButton/Readme.md
  35. +11 −3 examples/preact/styleguide.config.js
  36. +1 −1 examples/sections/docs/One.md
  37. +26 −4 examples/sections/src/components/Button/Readme.md
  38. +3 −1 examples/sections/src/components/Label/Readme.md
  39. +3 −1 examples/sections/src/components/Placeholder/Example.md
  40. +3 −1 examples/sections/src/components/Placeholder/_Readme.md
  41. +13 −4 examples/sections/styleguide.config.js
  42. +26 −4 examples/webpack/src/components/Button.md
  43. +3 −1 examples/webpack/src/components/Placeholder.md
  44. +4 −2 examples/webpack/src/components/RandomButton.md
  45. +1 −1 examples/webpack/webpack.config.js
  46. +23 −0 loaders/__tests__/examples-loader.spec.js
  47. +1 −6 loaders/examples-loader.js
  48. +0 −5 loaders/props-loader.js
  49. +2 −2 loaders/style-loader.js
  50. +0 −5 loaders/styleguide-loader.js
  51. +99 −0 loaders/utils/__tests__/__snapshots__/chunkify.spec.js.snap
  52. +3 −7 loaders/utils/__tests__/__snapshots__/highlightCode.spec.js.snap
  53. +17 −0 loaders/utils/__tests__/__snapshots__/highlightCodeInMarkdown.spec.js.snap
  54. +75 −37 loaders/utils/__tests__/chunkify.spec.js
  55. +9 −12 loaders/utils/__tests__/highlightCode.spec.js
  56. +25 −0 loaders/utils/__tests__/highlightCodeInMarkdown.spec.js
  57. +7 −0 loaders/utils/__tests__/keysToLowerCaseDeep.spec.js
  58. +72 −0 loaders/utils/__tests__/parseExample.spec.js
  59. +26 −18 loaders/utils/chunkify.js
  60. +2 −2 loaders/utils/getProps.js
  61. +12 −24 loaders/utils/highlightCode.js
  62. +23 −0 loaders/utils/highlightCodeInMarkdown.js
  63. +18 −0 loaders/utils/keysToLowerCaseDeep.js
  64. +55 −0 loaders/utils/parseExample.js
  65. +1,060 −1,101 package-lock.json
  66. +10 −8 package.json
  67. +1 −1 scripts/__tests__/config.spec.js
  68. +0 −9 scripts/__tests__/index.spec.js
  69. +1 −21 scripts/make-webpack-config.js
  70. +14 −1 scripts/schemas/config.js
  71. +0 −5 scripts/utils/__mocks__/getWebpackVersion.js
  72. +0 −51 scripts/utils/__tests__/hasJsonLoader.spec.js
  73. +1 −4 scripts/utils/ensureWebpack.js
  74. +0 −31 scripts/utils/hasJsonLoader.js
  75. +2 −11 src/rsg-components/Editor/EditorLoader.js
  76. +1 −0 src/rsg-components/Examples/Examples.js
  77. +16 −5 src/rsg-components/Playground/Playground.js
  78. +46 −25 src/rsg-components/Playground/Playground.spec.js
  79. +1 −1 test/apps/basic/styleguide.config.js
  80. +1 −1 test/data/styleguide.config.js
  81. +1 −1 test/run.server.js
@@ -1,10 +1,28 @@
{
"presets": [
"env",
["env", {
"targets": {
"uglify": true
},
"modules": false
}],
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
],
"env": {
"test": {
"presets": [
"env",
"react"
],
"plugins": [
"system-import-transformer",
"transform-class-properties",
"transform-object-rest-spread"
]
}
}
}
@@ -7,10 +7,6 @@ cache:
directories:
- node_modules
- travis_phantomjs
env:
# Test everything in Webpack 1 and 2
- export WEBPACK_VERSION="2"
# - export WEBPACK_VERSION="1"
before_install:
# Upgrade npm
- if [[ `npm -v` != 5* ]]; then npm install -g npm@latest; fi
@@ -25,9 +21,6 @@ before_install:
tar -xvf phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 -C $PWD/travis_phantomjs
fi
phantomjs -v
before_script:
# Manually install Webpack 1 or 2
- if [ "$WEBPACK_VERSION" == "1" ]; then npm install --no-save webpack@1; fi
script:
# Run lint
- npm run lint
@@ -36,7 +29,7 @@ script:
if [[ "$TRAVIS_NODE_VERSION" == "4" ]]; then
NODE_ENV=test node --harmony-proxies $(npm bin)/jest --runInBand
else
if [[ "$TRAVIS_NODE_VERSION" == "8" && "$WEBPACK_VERSION" == "2" ]]; then
if [[ "$TRAVIS_NODE_VERSION" == "8" ]]; then
npm run danger
npm run test:coverage -- --runInBand
else
@@ -55,7 +48,7 @@ after_success:
# Make release with semantic-release if needed
- npm run semantic-release
- |
if [[ "$TRAVIS_NODE_VERSION" == "8" && "$WEBPACK_VERSION" == "2" ]]; then
if [[ "$TRAVIS_NODE_VERSION" == "8" ]]; then
# Upload coverage report to Codecov
bash <(curl -s https://codecov.io/bash)
# Update site
@@ -12,7 +12,7 @@ const styleguide = styleguidist({
components: './lib/components/**/*.js',
webpackConfig: {
module: {
loaders: [
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
@@ -280,7 +280,7 @@ Dev server port.

Type: `Boolean`, default: `false`

Show or hide example code initially. It can be toggled in the UI by clicking the the Code button after each example.
Show or hide example code initially. It can be toggled in the UI by clicking the Code button after each example.

#### `showUsage`

@@ -351,6 +351,35 @@ Type: `String`, default: `<app name from package.json> Style Guide`

Style guide title.

#### `updateExample`

Type: `Function`, optional

Function that modifies code example (Markdown fenced code block). For example you can use it to load examples from files:

```javascript
module.exports = {
updateExample: function(props) {
const { settings, lang } = props;
if (typeof settings.file === 'string') {
const filepath = settings.file;
delete settings.file;
return {
content: fs.readFileSync(filepath),
settings,
lang,
}
}
return props;
}
};
```

Use it like this in you Markdown files:

```js { "file": "./some/file.js" }
```

#### `verbose`

Type: `Boolean`, default: `false`
@@ -372,7 +401,7 @@ module.exports = {
resolve: {
extensions: ['.es6']
},
loaders: [
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader?precision=10']
@@ -2,7 +2,7 @@

*For basics see [How to contribute](https://github.com/styleguidist/react-styleguidist/blob/master/.github/Contributing.md).*

Styleguidist isn’t an ordinary single page app and some design decisions may look confusing to an outsider. In this guide we'll explain these decisions to un-confuse potential contributors.
Styleguidist isn’t an ordinary single page app and some design decisions may look confusing to an outsider. In this guide well explain these decisions to un-confuse potential contributors.

The main thing is that we’re running two apps at the same time: user’s components and Styleguidist UI. They share a webpack configuration and have styles in the same scope (there’s only one scope in CSS). And we can control only one of these two apps: Styleguidist UI. That puts us under some restrictions:

@@ -43,25 +43,27 @@ export default class Button extends React.Component {
## Usage examples and Readme files

Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the component’s folder and display them. Any code block without a language tag will be rendered as a React component with live editable preview.
Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the component’s folder and display them. Any code block with a language tag of `js`, `jsx` or `javascript` will be rendered as a React component with an interactive playground.

React component example:

<Button size="large">Push Me</Button>
```js
<Button size="large">Push Me</Button>
```

One more with generic code fence:
You can disable an editor by passing a `noeditor` modifier:

```
<Button size="large">Push Me</Button>
```jsx noeditor
<Button>Push Me</Button>
```

One more with `example` code fence (text editors may alias to `jsx` or `javascript`):
To render an example as highlighted source code add a `static` modifier:

```example
<Button size="large">Push Me</Button>
```jsx static
import React from 'react';
```

This example is rendered only as highlighted source code, not an actual component:
Examples with all other languages are rendered only as highlighted source code, not an actual component:

```html
<Button size="large">Push Me</Button>
@@ -138,7 +138,7 @@ module.exports = {
```

```jsx
// src/MyComponent/index.md
// src/MyComponent/Readme.md
<MyComponent object={sample.object} />
```

@@ -147,7 +147,7 @@ module.exports = {

### Styled Components

The [recommended way](https://github.com/styleguidist/react-styleguidist/issues/37#issuecomment-263502454) of using [Styled Components](https://styled-components.com/) is like this:
The [recommended way](https://github.com/styleguidist/react-styleguidist/issues/37#issuecomment-263502454) of using [Styled Components](https://www.styled-components.com/) is like this:

```jsx
import React from 'react';
@@ -49,7 +49,7 @@ Add a `webpackConfig` section to your `styleguide.config.js`:
module.exports = {
webpackConfig: {
module: {
loaders: [
rules: [
// Babel loader, will use your project’s .babelrc
{
test: /\.jsx?$/,
@@ -82,15 +82,13 @@ module.exports = {
If your project doesn’t use webpack you still need loaders for your files. You can use [webpack-blocks](https://github.com/andywer/webpack-blocks).

```bash
npm install --save-dev @webpack-blocks/webpack2 @webpack-blocks/babel6 @webpack-blocks/postcss
npm install --save-dev webpack-blocks
```

Then add a `webpackConfig` section to your `styleguide.config.js`:

```javascript
const { createConfig } = require('@webpack-blocks/webpack2');
const babel = require('@webpack-blocks/babel6');
const postcss = require('@webpack-blocks/postcss');
const { createConfig, babel, postcss } = require('webpack-blocks');
module.exports = {
webpackConfig: createConfig([
babel(),
@@ -101,8 +99,6 @@ module.exports = {

> **Note:** `.babelrc` and `postcss.config.js` files will be taken into account if you have them.
> **Note:** Use `@webpack-blocks/webpack` for webpack 1. See [webpack-blocks docs](https://github.com/andywer/webpack-blocks) for more options.
## When nothing else works

In very rare cases, like using legacy or third-party libraries, you may need to change webpack options that Styleguidist doesn’t allow you to change via `webpackConfig` options. In this case you can use [dangerouslyUpdateWebpackConfig](Configuration.md#dangerouslyupdatewebpackconfig) option.
@@ -1,15 +1,37 @@
Basic button:

<Button>Push Me</Button>
```jsx
<Button>Push Me</Button>
```

Big pink button:

<Button size="large" color="deeppink">Lick Me</Button>
```jsx
<Button size="large" color="deeppink">Lick Me</Button>
```

And you *can* **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.

If you define a fenced code block with a language flag it will be rendered as a regular Markdown code snippet:
Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as a interactive playgrounds:

```jsx
<Button>Push Me</Button>
```

You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor````):

```javascript
```jsx noeditor
<Button>Push Me</Button>
```

To render an example as highlighted source code add a `static` modifier: (```` ```js static````):

```js static
import React from 'react';
```

Fenced blocks with other languages are rendered as highlighted code:

```html
<h1>Hello world</h1>
```
@@ -1 +1,3 @@
<CounterButton/>
```js
<CounterButton/>
```
@@ -1,14 +1,18 @@
Each example has its own state that you can access at the `state` variable and change with the `setState` function. Default state is `{}`.

<div>
<button onClick={() => setState({isOpen: true})}>Open</button>
<Modal isOpen={state.isOpen}>
<h1>Hallo!</h1>
<button onClick={() => setState({isOpen: false})}>Close</button>
</Modal>
</div>
```jsx
<div>
<button onClick={() => setState({isOpen: true})}>Open</button>
<Modal isOpen={state.isOpen}>
<h1>Hallo!</h1>
<button onClick={() => setState({isOpen: false})}>Close</button>
</Modal>
</div>
```

If you want to set the default state you can do something like that:

initialState = {count: 1};
<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
```jsx
initialState = {count: 1};
<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
```
@@ -1 +1,3 @@
<Placeholder type="beard"/>
```jsx
<Placeholder type="beard"/>
```
@@ -1,4 +1,6 @@
You can `require` external files in your examples:

const names = require('dog-names').all;
<RandomButton variants={names}/>
```jsx
const names = require('dog-names').all;
<RandomButton variants={names}/>
```
@@ -1,3 +1,5 @@
Enhanced/Decorated components work as well:

<WrappedButton>I'm a wrapped button</WrappedButton>
```jsx
<WrappedButton>I'm a wrapped button</WrappedButton>
```
@@ -1,11 +1,19 @@
const loaders = require('loaders');

module.exports = {
components: 'src/components/**/[A-Z]*.js',
defaultExample: true,
webpackConfig: {
module: {
loaders: loaders.all,
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
],
},
},
};
@@ -1,15 +1,37 @@
Basic button:

<Button>Push Me</Button>
```jsx
<Button>Push Me</Button>
```

Big pink button:

<Button size="large" color="deeppink">Lick Me</Button>
```jsx
<Button size="large" color="deeppink">Lick Me</Button>
```

And you *can* **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.

If you define a fenced code block with a language flag it will be rendered as a regular Markdown code snippet:
Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as an interactive playgrounds:

```jsx
<Button>Push Me</Button>
```

You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor````):

```javascript
```jsx noeditor
<Button>Push Me</Button>
```

To render an example as highlighted source code add a `static` modifier (```` ```js static````):

```js static
import React from 'react';
```

Fenced blocks with other languages are rendered as highlighted code:

```html
<h1>Hello world</h1>
```
@@ -1 +1,3 @@
<Placeholder type="beard"/>
```jsx
<Placeholder type="beard"/>
```

0 comments on commit eb216f6

Please sign in to comment.