Skip to content
This repository has been archived by the owner on Oct 27, 2020. It is now read-only.

Update dependency react-styleguidist to v11 #65

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

renovate[bot]
Copy link

@renovate renovate bot commented Mar 14, 2020

This PR contains the following updates:

Package Type Update Change
react-styleguidist devDependencies major ^7.1.0 -> ^11.0.0

Release Notes

styleguidist/react-styleguidist

v11.1.1

Compare Source

Bug Fixes

v11.1.0

Compare Source

Features
  • Add expand option for sections and allow custom root section options (#​1689) (3ab6f8d)

v11.0.11

Compare Source

Bug Fixes

v11.0.10

Compare Source

Bug Fixes

v11.0.9

Compare Source

Bug Fixes

v11.0.8

Compare Source

Fix

v11.0.7

Compare Source

Fix

v11.0.6

Compare Source

chore
Chore
Docs
Fix

v11.0.5

Compare Source

fix
Fix

v11.0.4

Compare Source

Fix

v11.0.3

Compare Source

Fix

v11.0.2

Compare Source

Docs
Fix

v11.0.1

Compare Source

chore
Chore
Fix

v11.0.0

Compare Source

Breaking changes

TypeScript is supported out of the box

We’ve upgraded react-docgen to 5.0.0, which adds TypeScript support out of the box. The are some limitations, so you may still need react-docgen-typescript — see docs for more details.

(#​1500, #​1354 by @​thecodejack)

Fenced code blocks in Markdown with tags typescript, ts and tsx are rendered as an interactive playground. Use the static modifier to render only the source code.

(#​1543 by @​mitsuruog)

Prefer default exports over named exports

When your component has both default and named exports, Styleguidist will use the default export. This is a bug fix but may break some style guides.

import React from 'react';
import styled from 'styled-components';

export const C: React.FC = () => {
  ...
}

const StyledC = styled(C)``;

export default StyledC;

(#​1504 by @​Lazyuki)

Remove initialState/setState/state

Use React’s useState hook instead:

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

(#​1501 by @​thecodejack)

Drop Node.js 8 support

The minimum supported version on Node.js is 10.

(#​1545)

New features

v10.6.2

Compare Source

Fix

v10.6.1

Compare Source

Build
Fix

v10.6.0

Compare Source

New

v10.5.0

Compare Source

Docs
New

v10.4.2

Compare Source

Build
fix
Fix

v10.4.1

Compare Source

Fix

v10.4.0

Compare Source

Build
chore
  • Add By me a coffee button (35e5d65)
Docs
New

v10.3.2

Compare Source

Fix

v10.3.1

Compare Source

Fix

v10.3.0

Compare Source

Bug fixes
New features

v10.2.1

Compare Source

Build
  • Add funding field to package.json (266f5d4)
Chore
Docs
Fix

v10.2.0

Compare Source

New

v10.1.0

Compare Source

New
  • Modifier to add whitespace between example components (#​1456 by @​apennell, fixes #​841) (4e0bd70)

    Let users to be able to add padding between example components without
    adding manual styling to their example code. This adds the padded modifier option
    to the Playground that adds padding between each example component in that block.

    <Button>Push Me</Button>
    <Button>Click Me</Button>
    <Button>Tap Me</Button>

v10.0.1

Compare Source

Fix

v10.0.0

Compare Source

👋 Support Styleguidist on Open Collective 👋

Mostly code cleanup (use official React Context API, remove deprecated React APIs and patterns, etc.) and dependencies updates.

#​1355 by @​tienpham94, #​1440 by @​J-Kallunki, #​1453 by @​sapegin

Breaking changes

  • Node 8.9 is the lowest supported version
  • React 16.8 is the lowest supported version

v9.2.0

Compare Source

New features

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

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

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

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

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

v9.0.1

Compare Source

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.

New editor

(#​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

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. 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: '#&#8203;6d6d6d',
      codePunctuation: '#&#8203;999',
      codeProperty: '#&#8203;905',
      codeDeleted: '#&#8203;905',
      codeString: '#&#8203;690',
      codeInserted: '#&#8203;690',
      codeOperator: '#&#8203;9a6e3a',
      codeKeyword: '#&#8203;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

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.


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 you tick the rebase/retry checkbox.

🔕 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 WhiteSource Renovate. View repository job log here.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant