Update react-styleguidist to the latest version 🚀

[greenkeeper]

The devDependency react-styleguidist was updated from 7.3.11 to 9.0.0.

This version is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

---

Release Notes for v9.0.0

👋 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

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>

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

Commits

The new version differs by 146 commits.

• 8c2e2a1 9.0.0
• d2511ca Chore: Run npm audit fix on examples
• 38b4507 Chore: Remove Open Collective postinstall banner because it doesn't work anyway 🤔
• 2f00a59 Chore: Update deps
• 2f36348 Docs: Fix a few broken links to repo code in docs (#1272)
• 7630f10 Docs: (Hopefully) fix Markdown 🤯
• 75c393b Chore: Fix typos in comments (#1275)
• c83d2c9 Fix: Upgrade react-group to v3 (#1270)
• 0ecaaf5 Docs: Update react-native example (#1260)
• 1c68615 Docs: Fix link (#1258)
• 63a3a47 Fix: Change some dependencies to smaller alternatives (#1248)
• 8554a3d Fix: Support webpack configs from react-scripts > 2.1.1 (#1241)
• 4818ffe Docs: Fix webpack CSS loader example (#1245)
• d52a42e Chore: update webpack-dev-server due to vulnerability (#1244)
• 14ba635 Fix: Incorrect current section highlighting on partial match (#1239)

There are 146 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper bot 🌴

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.0.1.

Update to this version instead 🚀

Release Notes for v9.0.1

• Fixed: Fix kleur is not a function error (#1285)

  Closes #1284

Commits

The new version differs by 3 commits.

• 89387df Fix: Fix kleur is not a function error (#1285)
• 1ac32f4 Docs: Add file name to make an example more clear (#1282)
• 3c803fd Docs: Fix Markdown

See the full diff

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.0.2.

Update to this version instead 🚀

Release Notes for v9.0.2

• Fixed: Fix broken Node API

  main field in package.json should point to babelified script

  Closes #1291 #1293

• Fixed: Correctly pass key/anchor to config error messages

  • Styleguidist should show an error message with a link to configuration docs, to a particular config option if possible.
  • Actual error text should be part of the message and not passed as a separte field, otherwise the consumer will have to do extra work to show it.
  • Remove anchor field on StyleguidistError class.

Closes #1292 #1293

• Fixed: Update clipboard-copy (#1302)

  Closes #1290

Commits

The new version differs by 6 commits.

• e3af40e Merge branch 'master' of github.com:styleguidist/react-styleguidist
• 74f7810 Fix: Fix broken Node API
• 168b0e4 Fix: Correctly pass key/anchor to config error messages
• 6a95750 Fix: Update clipboard-copy (#1302)
• 2bea3d6 Chore: Set version number for semantic-release
• 78b9378 Docs: Fix order and TOC

See the full diff

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.0.3.

Update to this version instead 🚀

Release Notes for v9.0.3

• Fixed: Resolve path of component files (#1305)

  Closes #1246

Commits

The new version differs by 3 commits.

• 30ba0f5 Fix: Resolve path of component files (#1305)
• 1abe4c2 Docs: Update introductions for compiling and starting server to separate terminals (#1306)
• 4459311 Docs: Fix styling example and a link in dev guide

See the full diff

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.0.4.

Update to this version instead 🚀

Release Notes for v9.0.4

• Fixed: Allow trailing comma in named imports in examples (#1296)

  Fixes #1295

Commits

The new version differs by 2 commits.

• 0436053 Chore: Fix typo (#1311)
• 3f50e48 Fix: Allow trailing comma in named imports in examples (#1296)

See the full diff

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.0.5.

Update to this version instead 🚀

Release Notes for v9.0.5

• Fixed: Upgrade deps

Commits

The new version differs by 3 commits.

• 1c4d40b Chore: Okay, I give up with it
• 48f7220 Fix: Upgrade deps
• 63c9d32 Docs: Update basic example link (#1313)

See the full diff

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.0.6.

Update to this version instead 🚀

Release Notes for v9.0.6

• Fixed: Add output.publicPath option to webpack config to make Create React App happy

  Fix #1247

Commits

The new version differs by 1 commits.

• 6663744 Fix: Add output.publicPath option to webpack config to make Create React App happy

See the full diff

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.0.7.

Update to this version instead 🚀

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.0.8.

Update to this version instead 🚀

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.0.9.

Update to this version instead 🚀

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.1.0.

Update to this version instead 🚀

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.1.1.

Update to this version instead 🚀

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.1.2.

Update to this version instead 🚀

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.1.3.

Update to this version instead 🚀

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.1.4.

Update to this version instead 🚀

[greenkeeper]

• The devDependency react-styleguidist was updated from 7.3.11 to 9.1.5.

Update to this version instead 🚀