styleguidist/react-styleguidist v9.0.0 on GitHub

👋 Support Styleguidist on Open Collective 👋

New features and breaking changes

Do not put components into global namespace

Finally we’ve fixed one of the oldest and weirdest issues. Style guide components are no longer accessible on window. Only the current component is accessible in the example context (not on window). You need to explicitly import any other component.

Current component (like Button in this example) is always accessible by its name in the example code. If you want to use other components, you need to explicitly import them:

import Placeholder from '../Placeholder'
;<Button>
  <Placeholder />
</Button>

Or you can explicitly import everything, to make examples easier to copy into your app code:

import React from 'react'
import Button from 'rsg-example/components/Button'
import Placeholder from 'rsg-example/components/Placeholder'
;<Button>
  <Placeholder />
</Button>

require() statements are still supported.

(#1116), #1075, #325 by @sapegin)

Import statements in the editor

You can also define aliases to make your imports more realistic:

// ```jsx inside Markdown
import React from 'react'
import Button from 'rsg-example/components/Button'
import Placeholder from 'rsg-example/components/Placeholder'

In this example rsg-example is an alias defined with the moduleAliases config option.

(#1142, #1076, #1109, #1074 by @sapegin)

New editor and syntax highlighting

We’ve replaced CodeMirror with react-simple-code-editor and now using Prism for code highlighting in static examples (instead of Highlight.js) and inside the editor. So code look the same everywhere in Styleguidist. We’ve also removed code splitting because react-simple-code-editor is so small and we can include it in the main bundle (8 KB vs 57 KB).

There are some breaking changes in the config:

editorConfig and highlightTheme (already deprecated) options were removed.
No highlighting in fenced code blocks without specified language.
No highlighting in non-fenced code blocks.

(#1054 #987 by @sapegin)

Drop React 15 support

React 16.3 is the minimum supported version.

Bug fixes

Add generated IDs to Markdown headings (#833, #1163 by @wkillerud)
Add pointer cursor on
element
Add custom focus outline for
element
Add focus outline for the editor
Better focus styles for inputs
Tweak colors to make them more accessible
Wrap long lines in pre tags
Incorrect current section highlighting on partial match (#1237, #1239 by @guyius)
Support webpack configs from react-scripts > 2.1.1 (#1241, #1243 by @oterral)
Change some dependencies to smaller alternatives (#1248 by @lukeed)

Changes since 9.0.0-beta4

Incorrect current section highlighting on partial match (#1237, #1239 by @guyius)
Support webpack configs from react-scripts > 2.1.1 (#1241, #1243 by @oterral)
Change some dependencies to smaller alternatives (#1248 by @lukeed)

Migrating from 8.x to 9.x

Explicitly import all but the current component in your examples:

// ```jsx inside ButtonGroup.md - 8.x
// All style guide component are accessible globally
;<ButtonGroup>
  <Button>Eins</Button>
  <Button>Zwei</Button>
  <Button>Polizei</Button>
</ButtonGroup>

// ```jsx inside ButtonGroup.md - 8.x
// Only the current (ButtonGroup) component is accessible
import Button from './Button'
;<ButtonGroup>
  <Button>Eins</Button>
  <Button>Zwei</Button>
  <Button>Polizei</Button>
</ButtonGroup>

Replace highlightTheme or editorConfig.theme options with theme option:

We don’t have predefined themes anymore, you can customize colors as you wish using the theme config option:

// styleguide.config.js
module.exports = {
  theme: {
    color: {
      codeComment: '#6d6d6d',
      codePunctuation: '#999',
      codeProperty: '#905',
      codeDeleted: '#905',
      codeString: '#690',
      codeInserted: '#690',
      codeOperator: '#9a6e3a',
      codeKeyword: '#1673b1',
      codeFunction: '#DD4A68',
      codeVariable: '#e90'
    }
  }
}