[outdated] Update dependency react-styleguidist to v9

[renovate]

This PR contains the following updates:

Package	Type	Update	Change
react-styleguidist	devDependencies	major	^7.3.11 -> ^9.0.0

---

Release Notes

styleguidist/react-styleguidist

v9.1.16

Compare Source

• Fixed: Update react-dev-utils to ^9.0.3 (#​1422)

v9.1.15

Compare Source

• Fixed: Don't show empty sidebar (#​1423)

v9.1.14

Compare Source

• Fixed: Single sections can contain only sections (#​1414)

  If a section contains only one subsection, Styleguidist will try to optimize. It will make the section disappear and show its components instead. If this section only contain sections, no components, it should optimize to sections and not to components.

v9.1.13

Compare Source

• Fixed: Highlighting currently selected page on sidebar broken with sections (#​1405)

  Fixes #​1375

v9.1.12

Compare Source

• Fixed: Disable HTML minification (#​1402)

  Fixes #​1189

v9.1.11

Compare Source

• Fixed: Fix incorrect component name capitalization (#​1388)

  Fixes #​1381

  It is happening in a case when react-docgen (any propsParser) is failed and we are trying to guess displayName based on file path. We capitalized every case in the string instead of just words separated by - started with small letter. So, by mistake ButtonTS in file name becomes ButtonTs display name for component when we expect ButtonTS Use [startCase]:(https://lodash.com/docs/4.17.11#startCase) and then remove spaces which covers most our cases likemy-buttonTS => MyButtonTS

v9.1.10

Compare Source

• Fixed: Encode sublinks in URLs to fix broken routes (#​1389)

  Follow up of #​1332. This appears to have fixed the top level section link, but any sub-links within that section are still unencoded and result in "Page not found".

v9.1.9

Compare Source

• Fixed: Add .wasm and .mjs to default extensions in webpack config (#​1386)

  Fixes #​1385

v9.1.8

Compare Source

• Fixed: Replace 'walkes' with 'estree-walker' (#​1349)

  Because walkes has LGPL-3 license.

  Fixes #​1210

v9.1.7

Compare Source

• Fixed: Encode section pages URLs if a section name has special symbols (#​1384)

  Closes #​1332

v9.1.6

Compare Source

• Fixed: Fix named export for example components (#​1380)

  Closes #​1281

v9.1.5

Compare Source

• Fixed: to make async/await work by default (#​1379)

  Add transforms: { asyncAwait: false } for default compilerConfig to make async/await work by default. Bublé doesn't have transform for async/await so they raise an error if asyncAwait transformation in configuration is not false (true by default) since bublé v0.9.7.

  Closes #​1371

v9.1.4

Compare Source

• Fixed: Add .ts and .tsx to default extensions in webpack config

  #​750

v9.1.3

Compare Source

• Fixed: Allow section content to be function (#​1368)

v9.1.2

Compare Source

• Fixed: A build should't break when assetsDir is an array (#​1367)

  copy-webpack-plugin is not allowed from to be as an array. If we still want to use from and support array format for assetsDir, then we should pass array of objects {from: ...} to the plugin.

  Closes #​1320

v9.1.1

Compare Source

• Fixed: Section anchors shouldn't conflict with component anchors (#​1364)

  Prefix section anchors with section-.

  Closes #​1342

v9.1.0

Compare Source

New features

Support React Hooks in examples

You can now use hooks in the examples, like the useState hook:

const [count, setCount] = React.useState(42);
<Button onClick={() => setCount(count + 1)}>{count}</Button>

(#​1353 by @​eragon512)

Bug fixes

• Accessibility fixes (#​1359 by @​J-Kallunki)
• getExampleFilename should use default example if file does not exist (#​1362) by @​mendrew, closes #​1338
• Hide HTML comments in Markdown files (#​1347 by @​eragon512, closes #​1326)

v9.0.9

Compare Source

• Fixed: Correctly render sections with href in sidebar (#​1346)

  Closes #​1141

v9.0.8

Compare Source

• Fixed: Allow code base color to be customized with theme config (#​1335)

  • Add theme.color.codeBase property
  • Allow syntax highlight default color to set without affecting base color
  • The codeBase and codeBackground can be set to allow finer control on code text contrast ratios. e.g. Use dark themes for code samples.

v9.0.7

Compare Source

• Fixed: Scroll section into view when exiting isolated mode (#​1331)

v9.0.6

Compare Source

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

  Fix #​1247

v9.0.5

Compare Source

• Fixed: Upgrade deps

v9.0.4

Compare Source

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

  Fixes #​1295

v9.0.3

Compare Source

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

  Closes #​1246

v9.0.2

Compare Source

• 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

v9.0.1

Compare Source

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

  Closes #​1284

v9.0.0

Compare Source

👋 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'
    }
  }
}

v8.0.6

Compare Source

• Fixed: Allow custom styling for prop names and types (#​1211)

  Closes #​1205

v8.0.5

Compare Source

• Fixed: Upgrade react-docgen to 3.0.0-rc.2 (#​1200)

  Closes #​1177

v8.0.4

Compare Source

• Fixed: Highlight currently selected page on sidebar (#​1195)

v8.0.3

Compare Source

• Fixed: Use aliased import to allow for custom ReactExample (#​1190)

v8.0.2

Compare Source

• Fixed: Support Component/index.js in the default getExampleFilename (#​1185)

  Fixes #​1169

v8.0.1

Compare Source

• Fixed: Upgrade markdown-to-jsx

  Closes #​1181

v8.0.0

Compare Source

👋 Support Styleguidist on Open Collective 👋

Breaking changes

Drop webpack 3 support

Webpack 3 is no longer supported, webpack 4 is the minimum required version.

As a side effect you shouldn’t see any webpack warnings when you run Styleguidist.

We’ve also replaced no longer maintainer uglify-es with Terser to minify production JavaScript bundle.

• #​1175, #​1178 by @​derz
• #​1165 by @​elevatebart
• #​1148 by @​elevatebart
• #​915, #​1023 by @​stepancar
• #​1180 by @​AndreyGladkov

---

Renovate configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻️ Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Renovate Bot. View repository job log here.

[helfi92]

This is not fully working locally. Created reactjs/react-docgen#333.

[helfi92]

Blocker: styleguidist/react-styleguidist#1288

[djmitche]

I'm going to close this as it was opened by the old (non-forking) renovate bot.