Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Mar 23 2018 05:16
    ZxBing0066 opened #887
  • Mar 22 2018 21:22
    sapegin closed #886
  • Mar 22 2018 16:17
    sapegin labeled #886
  • Mar 22 2018 16:17
    sapegin labeled #886
  • Mar 22 2018 14:36
    stefanheine opened #886
  • Mar 22 2018 11:24
    sapegin labeled #826
  • Mar 22 2018 11:24
    sapegin closed #867
  • Mar 22 2018 11:23
    sapegin closed #883
  • Mar 22 2018 10:34
    sapegin closed #885
  • Mar 22 2018 09:49
    sapegin closed #881
  • Mar 22 2018 09:44
    RusinovAnton opened #885
  • Mar 22 2018 09:32
    sapegin closed #882
  • Mar 22 2018 09:32
    sapegin milestoned #883
  • Mar 22 2018 09:31
    sapegin labeled #883
  • Mar 22 2018 09:31
    sapegin labeled #884
  • Mar 22 2018 08:15
    sapegin edited #195
  • Mar 21 2018 22:56
    jsphstls opened #884
  • Mar 21 2018 20:14
    denchen edited #883
  • Mar 21 2018 20:13
    denchen opened #883
  • Mar 21 2018 18:08
    sapegin milestoned #868
Khalid Azam
@khalidAzam
Hi All, is there any way to do visual teating for the style guide component
I see, storybook has visual testing —> https://storybook.js.org/testing/automated-visual-testing/
can we do similar visual testing for react styleguide
Christopher Dieringer
@cdaringe

hi all. i'm seeing an unexpected webpack error:

  Local:            http://localhost:6060/
  On your network:  http://10.0.0.150:6060/

./node_modules/react-styleguidist/lib/rsg-components/Editor/EditorLoader.js 76:6
Module parse failed: 'import' and 'export' may only appear at the top level (76:6)
You may need an appropriate loader to handle this file type.
|       var _this2 = this;
|
>       import('rsg-components/Editor/Editor').then(function (module) {
|         _this2.setState({
|           editor: module.default
 @ ./node_modules/react-styleguidist/lib/rsg-components/Editor/index.js 1:0-61 1:0-61

my styleguidist config is ~==

{
  skipComponentsWithoutExample: true,
  styleguideDir: path.join(__dirname, 'docs'),
  title: '...',
  webpackConfig, // require('/path/to/react-scripts/config/webpack.dev.js')('development')
  components: 'src/client/components/**/*.tsx'
}

any idea?

Christopher Dieringer
@cdaringe
i expected the react-scripts config to just work
Joan Mira
@gazpachu

Hiya!,

I've just released sugUI, a design system template based on Styleguidist that uses the sugUI components library: https://gazpachu.github.io/sugui-design-system/

Zeljko Marinkovic
@zeljkomarinkovic
Hi all Is it posible to make options like in image, to have name, type, desc cols...
Khalid Azam
@khalidAzam
@gazpachu : love it
Michell Ocaña
@michellocana
hi everyone! i want to hide a custom propType from my component documentation, is there a way to do it with rsg?
Farzad
@farzad-jafari
hi . i use create-react-app
Warning: Cannot parse src/components/Card/Card.jsx: SyntaxError: Invalid regular expression flag (1:8)

It usually means that react-docgen does not understand your source code, try to file an issue here:
https://github.com/reactjs/react-docgen/issues
import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// @material-ui/icons

// core components
import cardStyle from "./cardStyle.jsx";

function Card({ ...props }) {
    const { classes, className, children, plain, carousel, ...rest } = props;
    const cardClasses = classNames({
        [classes.card]: true,
        [classes.cardPlain]: plain,
        [classes.cardCarousel]: carousel,
        [className]: className !== undefined
    });
    return (
        <div className={cardClasses} {...rest}>
            {children}
        </div>
    );
}

Card.propTypes = {
    classes: PropTypes.object.isRequired,
    className: PropTypes.string,
    plain: PropTypes.bool,
    carousel: PropTypes.bool,
    children: PropTypes.object.isRequired
};

export default withStyles(cardStyle)(Card);
what is my wrong?
and i have styleguide.config.js whith follow lines
propsParser: require("react-docgen").parse,
    webpackConfig: require("react-scripts/config/webpack.config")
Савенков Илья
@slaeme

Hello, I use react-styleguidist": "^9.0.0, I use ES import in jsx in README.md

import Button from ".../Button";

...

and see error:
import or require() statements can be added only by editing a Markdown example file: .../Button.

What am I doing wrong?

Tobias Lohse
@MrLoh
Hi, I'm just trying to figure out how to use styleguidist for react native. Do I understand correctly, that styleguidist only allows rendering a style guide with react-native-web but doesn't really generate a style guide in a react-native app? It seems like the app in the code example doesn't really use anything from react-styleguidist
Matthew Bulfair
@mbulfair
Does anyone know how to add some kind of code clipboard with the latest version ? I am running 9x
Iraitz Puente
@iRepo

Hello! I'm having an issue when trying to make the build of my styleguide it says: Cannot read property 'endsWith' of undefined

I've read and created a styleguide.config.js with this:
module.exports = { webpackConfig: require('./node_modules/react-scripts/config/webpack.config.js'), };

But same message

Patrick Macom
@pmacom
Is there a way to include markdown code snippets without styleguidist automatically creating an example from it?
I'm looking for something similar to ```jsx noEditor
The code doesn't really provide a ```jsx noExample that I know of. Any help would be greatly appreciated. I could also submit a PR for this feature if it's necessary.
Opps. Nevermind lol. Found ```jsx static
:thumbsup: I love this tool! Keep up the great work. I'll try to contribute too
Matthew Bulfair
@mbulfair
how do I get code snippets to show the clipboard option?
jcleefw
@jcleefw

hey i'm wondering in the styleguide config, is it possible to exclude files based on regex?

for example. .. i'm trying to exclude any files that starts with a _

components: 'src/components/**/*.jsx',
ignore: ['**/components/App.jsx', '**/components/**/^_.*.jsx'],

but i couldn't seem to get it to work

Ilya Lytvynov
@IlyaLytvynov
Hello, did somebody try to use styleguidist with react-jss, any examples how to connect it?
JuanCarlosJr97
@juancarlosjr97
Hi guys, some one could help with CSS?
Andy Cook
@andycook71_twitter
Hi, I am rendering my styleguide with one page per section (pagePerSection: true) but the default page of the styleguide shows all the components on one long page. Is there a way to have a custom page (eg index.md) as the default page?
Andy Cook
@andycook71_twitter
I was able to achieve the default page by introducing sections, and having the first section with just a markup file, no components
Maciej Stankiewicz
@tawez
Is there a way to change the env passed to webpack? Now it is set to "development". I'd like to have something like --env.styleguide
Joonas Kallunki
@J-Kallunki
Hi! I did not get pagePerSection to work with sections: [{components: () => ...}] so I made a codesandbox example that shows the problem, is it a bug or something in the API design or just do not understand? https://github.com/styleguidist/react-styleguidist/issues/1145#issuecomment-487824219
Joonas Kallunki
@J-Kallunki
Hey! I'm using React-axe to validate accessibility of the components I create with Styleguidist. But Styleguidist has accessibility errors so it makes the validating a bit harder - I created a PR to fix those errors: styleguidist/react-styleguidist#1359
After if we get the PR through I could make a simple example and/or post how to use Styleguidist to develop accessibility validated components :)
Dominic
@NoobSkywalker_gitlab
hey guys i am having issues during parsing of my modules:

`Module parse failed: Unexpected token (5:7)
You may need an appropriate loader to handle this file type.
| import IconSVG, { Props as IconSVGProps } from './IconSVG';
|

export type Props = IconSVGProps & {`

Daniel K.
@FredyC
hi, does anyone knows why a file with React hook needs to have TSX extension to be considered a "component"? when I tried with TS extension it did not bother with loading it
Jason Dunn
@stillstate_twitter
My example React component is <SimpleButton />, which merely renders a <button>. My styleguidist markdown is basically the pizza example with no props. It's about as simple as a create-react-app can be. styleguidist in browser is giving me: SyntaxError: Unexpected token (1:6)
1 : <React.Fragment><SimpleButton /></React.Fragment>;
I've checked the issues (open and closed) and it seems like there are similar but not the same problems. Have tried blowing away node_modules, updating all my packages, etc. Am unclear as to how to proceed on debugging "why is React.Fragment a problem here?"
Jason Dunn
@stillstate_twitter
Well, starting with a completely new project, RSG works as advertised. So this is something I'm doing wrong. Sorry for the noise here.
Peter Lyons
@focusaurus
Anyone know what's up with this error message? serverPort config option should be number, received number.
@focusaurus I'm fine with the default value of 6060 for serverPort and don't have it in my styleguide.config.js
@focusaurus Ah I have a theory now...
Vicenzo Naves
@vinchbr
Hello
Trying to implement this wonderful tool at my job
but for the life of me I can't make the props appear on the page
dysticus
@dysticus
@vinchbr Please provide at least a repo, there could be numerous of reasons
Vicenzo Naves
@vinchbr
espern
@espern

Hi everybody. I'm having issues when trying to run styleguidist on my React project (created with create-react-app)
After running npx styleguidist server, when I go to http://localhost:6060/ nothing appears on the page, and I have an error in the console :


Uncaught Error: react-modal: No elements were found for selector #root.
at assertNodeList (ariaAppHider.js:30)
at Object.setElement (ariaAppHider.js:39)
at Function.setAppElement (Modal.js:247)
at Module../src/components/address/UserDetail.jsx (UserDetail.jsx:19)
at webpack_require (bootstrap:786)
at fn (bootstrap:149)
at Object../node_modules/react-styleguidist/lib/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/client/index.js (index.js?3b40:52)
at webpack_require (bootstrap:786)
at fn (bootstrap:149)
at render (index.js:37)


I have forgotten some setup ?
Thanks a lot

dysticus
@dysticus
@espern looks to me like a error in one of your components instead of RSG