styleguidist/react-styleguidist v9.0.0-beta1

9.0.0-beta1

on GitHub

👋 Support Styleguidist on Open Collective 👋

Install it from npm:

npm install -D react-styleguidist@beta

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. Though there’s a single breaking change:

• .default after require() statements in examples no longer works and no longer needed (see migration guide below for an example).

(#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 and small things

• 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

Migrating from 8.x to 9.x

1. 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>

1. Remove .default from require() statements in examples:

- const Colors = require('../src/styleguide/Colors').default;
+ const Colors = require('../src/styleguide/Colors');

Or replace require() statements with imports:

- const Colors = require('../src/styleguide/Colors').default;
+ import Colors from '../src/styleguide/Colors';

1. 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'
    }
  }
}