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
Mahmoud Zakria
@mahmoud-zakria-sociomantic
Hey guys, I'm using styleguidist with a third-party library and PropTypes doesn't generated unless I re-write the components from scratch in a new file
image.png
I can't find any solution in the provided solution page
I want to remove these warnings and generate PropTypes
Mahmoud Zakria
@mahmoud-zakria-sociomantic
Mahmoud Zakria
@mahmoud-zakria-sociomantic
???
Lukasz Gonciarz
@vanluke
Hi all,
Lukasz Gonciarz
@vanluke
I am new to styleguidist.
I have a structure like eg. src/components/icons/about-bg/...
I can not make it to work with this structure.
What happens? When it generates links for the sidebar it removes dash so about-bg becomes aboutbg, then when I am trying to create some preview with .md it does not work at all (was trying with require without success). Any idea?
Gesma94
@Gesma94
Hi all!
I'm using styleguidist to create a showcase. For each component, beside a NameComponent.md file to run the example, I have a ComponentDOC.md file that explain some developers choice and deepen the usage of the Component.
Is it possible to link the ComponentDOC.md file from the NameComponent.md file?
Hi all!
I'm using styleguidist to create a showcase. For each component, beside a NameComponent.md file to run the example, I have a ComponentDOC.md file that explain some developers choice and deepen the usage of the Component.
Is it possible to link the ComponentDOC.md file from the NameComponent.md file?
Eivind Løland-Andersen
@eivindland
Hi! I'm trying to simplify the component example pages, by splitting the content into tabs. (Button.md => Button.code.md + Button.accessibility.md + Button.usage.md, and hide the relative content behind tabs.) How would you propose to do this?
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.