Isolated React component development environment with a living style guide

Overview
React Styleguidist

Isolated React component development environment with a living style guide

npm CI status Codecov Join the chat at https://gitter.im/styleguidist/styleguidist Open Source Helpers

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files. Check out the demo style guide.

React Styleguidist in action

Usage

Advanced documentation

Examples

Showcase

Real projects using React Styleguidist:

Integration with other tools

Third-party tools

Resources

Change log

The change log can be found on the Releases page.

Contributing

Everyone is welcome to contribute. Please take a moment to read the contributing guidelines and the developer guide.

Sponsoring

Become a sponsor and get your logo on our Readme on GitHub with a link to your site.

Become a backer get your image on our Readme on GitHub with a link to your site.

Buy Me A Coffee

Authors and license

Artem Sapegin and contributors.

Logo by Sara Vieira and Andrey Okonetchnikov.

MIT License, see the included License.md file.

Issues
  • Logo

    Logo

    I’m going to make a proper site for Styleguidist after 5.x release, so a proper logo would a very nice addition.

    Unfortunately I have no ideas of my own ;-£

    /cc @okonet

    help wanted 
    opened by sapegin 81
  • Who uses React Styleguidist?

    Who uses React Styleguidist?

    Do you use React Styleguidist in your project? Let us know about that! It’d be great if you can share some details: screenshot, link, number of components, etc.

    We use it at Here for a component library that we use to develop internal tools. Right now we have 41 component and it’s growing:

    question 
    opened by sapegin 44
  • WIP: Emulate responsive behavior

    WIP: Emulate responsive behavior

    Hi!

    This PR is related to #133.

    It's still a WIP. But is this implementation good enough for passing down the configuration ?

    Next, I'll have to do:

    • a bit of design
    • add some scaling behavior if the width is too big compared to the container

    Cheers

    opened by JulienPradet 42
  • Automated Visual Testing

    Automated Visual Testing

    We spoke about it once, I though it might be good to at least kick off the discussion here.

    So the idea is that we can trigger visual snapshot testing which will essentially create graphics for each demo so that next time you run it it can compare and report mismatches.

    I think react-styleguidist is a good place to do this because it already has lots of configured components if one uses it havily, so it would not cost much for the user to use this.

    List of screenshot tools:

    • https://github.com/garris/BackstopJS
    • https://github.com/segmentio/niffy
    wontfix request for comments 
    opened by kof 40
  • Plugin API first draft

    Plugin API first draft

    • [x] plugins config option
    • [x] Load plugins and pass to the style guide
    • [x] Convert slots to core plugins
    • [ ] Ability to modify style guide config from a plugin (?)
    • [x] Containers (similar to slow but wraps children in all passed wrappers)
    • [ ] Add validation
    • [ ] Add tests
    • [ ] Add docs

    I have no idea how to do:

    • [ ] Store and change state for plugins (I suppose it should be separate state for style guide / component / example).
    • [ ] Change style guide in any way (for example something similar to the Wrapper component).
    wontfix 
    opened by sapegin 39
  • feat(editor): Passes all codeMirror options to editor

    feat(editor): Passes all codeMirror options to editor

    All you now pass inside codeMirrorOptions in your styleguide config will be passed to codeMirror. I left highlight theme out because I didn't want to cause a breaking change

    closes #648

    opened by SaraVieira 39
  • You many need an appropriate loader to handle this file type

    You many need an appropriate loader to handle this file type

    When starting the server I get the following error:

    /react-styleguidist/src/index.js Line 1: Unexpected token
    You may need an appropriate loader to handle this file type.
    | import React from 'react';
    | import ReactDOM from 'react-dom';
    | import { setComponentsNames, globalizeComponents } from './utils/utils';```
    

    Wondering if babel isn't transpiling the import.

    opened by withgallantry 36
  • UI improvements proposal (UI 2.0)

    UI improvements proposal (UI 2.0)

    We keep adding new function and new “buttons” to the UI and right now it’s inconsistent and far from perfect. Adding more features (and there are plans and wishes to do that) will most likely destroy user experience completely. I was thinking about that for a long time and here are my thoughts.

    Goals I want to solve in this issue:

    • Improve developer experience (component development process);
    • Simplify and streamline the UI;
    • Add UI extension points for plugins.

    Styleguidist UI consists of these three “levels” (and actions you can do on each level, with some future plans):

    • Global (toggle sidebar, toggle props/description, switch background, close isolation = go home);
    • Component / section (get anchor link, open in isolation);
    • Example (open in isolation, toggle code visibility, show snapshots).

    As a possible solution I see something like this:

    ui2

    Sorry for my drawing skills but basically we’ll have toolbars for each “level” that could be possible to extend from plugins plus (also extendable) tab bar for each example (this was already discussed in a relation to the plugin API).

    Related issues: #354, #333, #327, #424, #421, #235.

    Any feedback? Some design help would be very useful here ;-)

    wontfix request for comments 
    opened by sapegin 33
  • ci: Use a monorepo to host styleguidist

    ci: Use a monorepo to host styleguidist

    Objective: enable splitting react-styleguidist into multiple packages without losing any developer experience.

    • [x] Move all code into packages/react-styleguidist
    • [x] Use yarn workspaces to manage dependencies
    • [x] Make compile + jest tests pass
    • [x] Make sure all scripts are still working the same
    • [x] Fix dangerfile
    • [x] cypress should pass green
    • [x] Review ci to use lerna
    • [x] Adapt documentation for change of log convention

    NOTA: I voluntarily left out all the changes regarding extracting the core of styleguidist from the rest. I feel they would confuse proofreading.

    wontfix 
    opened by elevatebart 29
  • Suggestions

    Suggestions

    I wasn't sure where to post this so I'm just putting it in an issue. After having worked with this awesome tool a bit over the weekend here are some suggestions which I think would make it more extensible for larger projects:

    • [x] Set path to styleguide.config.js
    • [x] Set path to template for output
    • [x] Set a different syntax highlighter
    • [x] If a type is "union" list out the possible types within it
    • [x] Ability to toggle showing/hiding code examples
    • [x] Ability to somehow group components with a navigation so you can show/hide only what section you want to see

    As for the last item, I think this is pretty important for larger codebases where there are lots of components to be shown. It would be fantastic to have something that functions similar to this:

    http://spothero.com/uniform/#ui/css

    What do you think about these?

    enhancement help wanted 
    opened by reintroducing 29
  • Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/cra

    Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/cra

    Bumps follow-redirects from 1.9.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Build(deps): Bump follow-redirects from 1.13.0 to 1.14.7 in /site

    Build(deps): Bump follow-redirects from 1.13.0 to 1.14.7 in /site

    Bumps follow-redirects from 1.13.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/react-native

    Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/react-native

    Bumps follow-redirects from 1.9.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Build(deps): Bump shelljs from 0.8.4 to 0.8.5 in /site

    Build(deps): Bump shelljs from 0.8.4 to 0.8.5 in /site

    Bumps shelljs from 0.8.4 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Build(deps): Bump follow-redirects from 1.13.0 to 1.14.7 in /examples/webpack

    Build(deps): Bump follow-redirects from 1.13.0 to 1.14.7 in /examples/webpack

    Bumps follow-redirects from 1.13.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/preact

    Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/preact

    Bumps follow-redirects from 1.9.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/customised

    Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/customised

    Bumps follow-redirects from 1.9.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/express

    Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/express

    Bumps follow-redirects from 1.9.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Next.js / TS Webpack Config: Error on interface declaration

    Next.js / TS Webpack Config: Error on interface declaration

    I'm building a React project with Next.js, and trying to use react-styleguidist to generate autodocs. However, I can't seem to get the two to play nice. I'll drop config files (tsconfig.json, .babelrc, styleguid.config.js) below. I've already installed babel according to the getting started guide, but still no luck. The error I'm getting is odule parse failed: The keyword 'interface' is reserved (5:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. on a typescript interface declaration I'm using for component props. I feel like this is something with the babel configuration? Any help would be appreciated :).

    styleguide.config.js:

    module.exports = {
      propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json').parse,
      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
            },
            {
              test: /\.css$/,
              use: ['style-loader', 'css-loader'],
            },
          ],
        },
      },
      sections: [...],
    };
    

    .babelrc:

    {
      "presets": ["@babel/preset-react"]
    }
    

    tsconfig.json:

    {
      "extends": "./node_modules/gts/tsconfig-google.json",
      "rules": {
        "max-line-length": [true, 120]
      },
      "compilerOptions": {
        "target": "es6",
        "lib": ["dom", "dom.iterable", "esnext"],
        "rootDir": ".",
        "outDir": "build",
        "allowJs": true,
        "skipLibCheck": true,
        "noEmit": true,
        "incremental": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "react",
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext"
      },
      "include": ["src/**/*.tsx", "test/**/*.tsx", "images", "styleguide.config.js"]
    }
    

    Example of interface that it's failing on:

    interface BannerProps {
      /** If set to true, no logo is shown. */
      noImage?: boolean;
      /** If set to true, no text is shown. */
      noText?: boolean;
      /** Passthrough for wrapper div props */
      wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
      /** Passthrough for next/image Image props */
      imageProps?: ImageProps;
    }
    
    opened by EvilTeliportist 1
  • Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/sections

    Build(deps): Bump follow-redirects from 1.9.0 to 1.14.7 in /examples/sections

    Bumps follow-redirects from 1.9.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v11.1.8)
Owner
Styleguidist
React style guide generator
Styleguidist
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Vladimir Bezrukov 1 Oct 28, 2021
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Carte Blanche IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore. Carte Blanche is an iso

Carte Blanche 1.5k Dec 29, 2021
Utopia is an integrated design and development environment for React.

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It's early software, but you can try it today, look at an example project, or read about it on our blog!

Utopia 3.3k Jan 20, 2022
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

Standard JS 26.5k Jan 17, 2022
Dev environment for building scalable, high-quality user interfaces

React Cosmos A dev environment for building scalable, high-quality user interfaces. Visual TDD. Develop one component at a time. Isolate the UI you're

React Cosmos 7.4k Jan 17, 2022
Dev environment for building scalable, high-quality user interfaces

React Cosmos A dev environment for building scalable, high-quality user interfaces. Visual TDD. Develop one component at a time. Isolate the UI you're

React Cosmos 7.4k Jan 12, 2022
A 'heatpack' command for quick React development with webpack hot reloading

DEPRECATED If you want to quickly prototype React apps without setting up a project, try nwb's react command instead. If you want something to tweak a

Jonny Buchanan 355 May 7, 2021
A set of tools to facilitate react-redux development and decouple logic from compontents

react-redux-api-tools This project provides a middleware and a request helper to streamline react-redux data fetching. Installing Just run npm install

labcodes 36 Jan 1, 2022
The reactive library for the spreadsheet driven development

Sunrise Spreadsheet-like dataflow programming in TypeScript Example import { cell, formula, swap, deref } from '@snapview/sunrise' const inc = (a) =>

Snapview GmbH 21 Jan 12, 2022
Test-new-app - Next.js + Tailwind CSS + TypeScript starter packed with useful development features

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed

Luís Freitas 2 Jan 11, 2022
transform react class component to function component

react-class-to-fc ⭐ 特性 将react class组件转化为react 函数组件 ?? 安装 npm i react-class-to-fc -g ?? 使用 ctfc -i react-demo.js -o fc.js 就会将 react-demo.js文件中的class组

一口獠牙的小甜甜 48 Nov 22, 2021
A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

OSLabs Beta 48 Jan 10, 2022
An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

This project has migrated to github.com/facebook/react The source code for the v3 of the extension can be found in the v3 branch. To build the v3 brow

Facebook 11k Jan 16, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 68.1k Jan 14, 2022
React JSON inspector component

React JSON Inspector Component React-based JSON inspector that features tree expansion and fast search. Live demo Installation npm install react-json-

Aziz Yuldoshev 284 Jan 11, 2022
Prevent React component subtrees from rendering

React Freeze Prevent React component subtrees from rendering. What is this? ?? This library allows for freezing renders of the parts of the React comp

Software Mansion – Labs 847 Jan 15, 2022
React component wrap for SimpleMDE Markdown Editor(v1.x)

react-simplemde-v1 React.js(v16.x+) component wrap for SimpleMDE Markdown Editor(v1.x+) Installation $ npm install --save simplemde react-simplemde-v1

Zhentian Lu 8 Dec 6, 2021
A flexible, responsive, and easy-to-use crossword component for React apps.

Install npm install --save @jaredreisinger/react-crossword # or # yarn add @jaredreisinger/react-crossword Usage See also the styleguidist docs for

Jared Reisinger 77 Jan 6, 2022
A component simplifies Goftino widget usage in your React application

@mohsen007/react-goftino A component simplifies Goftino widget usage in your React application Introduction This component applies to Goftino Web Widg

Mohsen Lotfi 4 Jan 3, 2022