Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 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
Vikas Gourav
Thanks in advance!
Esa Juhana

From the docs:

1. Install Styleguidist
2. Configure your style guide
3. Start your style guide
4. Start documenting your components
  1. Then what? What alternatives I have for using those components in real project?

Publishing npm or what?

How do I import {Button} from 'my-design-system' in my project?
So my styleguidist builds perfectly locally (i.e., with yarn start it looks good). But when I deploy the Github Pages, the left navigation is missing and only the root README is showing. Any ideas?
Brian Meise
Does anyone know the proper way to style the styleguidist site itself? I'm current adding style to the styleguide-wrap.scss file – which works but I'm applying to classes like .rsg--logo-70
The problem is that these numbers on classes change I think when content gets added/removed?
So I can't target specific elements
Chuntonov Mikhail

hi everyone. I just started to work with react-stylequidist, and when I try to run any example, I have unexpected token error

SyntaxError: Unexpected token (1:6)
1 : <React.Fragment><Loader />

I have made Pastebin example where u can see my config, component and .md file. https://pastebin.com/uVzSGQBC

I tried to find some solutions at goggle but didn't find anything helpful. Sorry for my English

Daniel Ortiz Costa
Hey is there any ideas on how to implement a global theme selector? I want to have a drop down at the top that sets the current theme but unfortunately each component gets rendered independently so they can’t access the global theme provider that I put on style guiderender.... is there any way to get this to work without using local storage to share the theme?
Esa Juhana


Any tips on configuring font-faces? I am using Icomoon for icons, but in the build version this font-face is not working (in /src/components/)

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?yj5r32');
  src: url('fonts/icomoon.eot?yj5r32#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?yj5r32') format('truetype'),
    url('fonts/icomoon.woff?yj5r32') format('woff'),
    url('fonts/icomoon.svg?yj5r32#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
Should I configure these things in styleguide.config.js?
It's a CRA project
Esa Juhana
Works fine in the dev version
Esa Juhana
I love this channel, everyone's asking questions but no one is answering :DDD
@mandolyte Sounds like you've done something wrong in the deployment tutorial
@bmeise make a themeWrapper like this to styleguide.config.js:
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/components/ThemeWrapper')
My ThemeWrapper (Typescript):

import React, {Component, ReactChild} from 'react';
import {ThemeProvider} from 'styled-components';
import {theme} from './theme';
import './styleguidist.css';

interface ThemeWrapperProps {
  children: ReactChild;

export default class ThemeWrapper extends Component<ThemeWrapperProps> {
  render() {
    return <ThemeProvider theme={theme}>{this.props.children}</ThemeProvider>;
Osny Netto
Hello folks, Im trying to start styleguidist server but getting this error: https://share.getcloudapp.com/5zu5E2jO
Random bug

I love this channel, everyone's asking questions but no one is answering :DDD

Yeah, basically only questions, no answers at all in this channel.

Anyway, I got here to actually complain about something else ':D
A fix for issue: styleguidist/react-styleguidist#1321 is required for me to continue using this package.
Luiz Fernando Rodrigues Sanches
hey guys, is someone else having problem when running the build ?
Hi All
Can I add a screenshot in document
Олег Филинюк

Hello everyone :)
Help me, please(

can I use typescript & javascript components at the same time?

Merry Christmas IRC friends. Lot'S of success and less bugs to all. and sorry for amsg :)!
Merry Christmas IRC friends. Lot'S of success and less bugs to all. and sorry for amsg :)!
Alexis Rengifo
Hi @here, glad to join.
My first question would be... Is there a feature to show components in different mobile views? Like this: http://demo.patternlab.io/ (look at top rght buttons)
Brandon Might
Sorry if this has been asked already. Trying to find the cleanest way to add documentation for hooks in my library.
Philipp Kursawe
My components are not sorted correctly it seems. There a multiple components in different sub-directories. Might this throw it off?
@bmight yeah I am also still figuring this out
Philipp Kursawe
How do I render my components with the apps global index.css?
Hi guys,
Any expert here in CSS to help me solve a challenge
I am trying to work on a side navigation bar. First we see Level 1. If we hover we see Level 2. The issue with level 2 is that I would like to have it side by side with the first level. Same thing with Level 3 and 4. If we hover we would like to display the sub menu in parallel ( vertically ), starting always from the top
here is the look and feel I am trying to achieve
What is the appropriate webpack loader to use static keywords ?
Esa Juhana
What is the import path I should use inside the [root]/docs, when I want to import components from [root]/src/components/ ?
Mathieu Marques
Is there a way to only expose a specific component from a file? I have a components/Foo/index.js file that exports a wrapper around my Foo component. And I need Foo to be exposed to styleguidist, not the wrapper
Edwin Joseph
Anyone else having an issue using styled components when building the style guide? Some of my styles are missing. Not sure what it is, I believe it is to do with code splitting but am not sure. Works fine when I run it locally. Here is the public site https://wbly-style-guide.herokuapp.com/
Edwin Joseph

@Zerka1982 Here is one way of doing it https://codepen.io/edwinj3829/pen/qBEMVPb. Personally I think this is not a great way of displaying navigation as:

  1. It isn't responsive, i.e. you can't hover on mobile nor do you have the screen space to display all sublists.
  2. If you work out if an item has a sublist on hover, there is no way to let the user know if then need to hover on an item to see a sublist.

I would try to update your data to be something like:

const data = [
    name: "Item 1",
    sublist: [
        name: "Item 1.1",
        sublist: [...],

and create a function that iterates through the list and each sublist to render actual DOM elements. As for how I'd display it, I'd make the user click on an item to display the sublist and have the sublist on top of the parent list with the option to "go back" hiding the sublist.

Edwin Joseph

So I figured out why my styles were missing, it has nothing to do with code splitting but in fact was to do with using styled components to select a child DOM element.

For example, doing this:

const NavItem = styled.li`
  & > a {
    color: red;

caused the css in production to not style the a tag.

Instead I'd have to do this:

const NavLink = styled.a``;

const NavItem = styled.li`
  & > ${NavLink} {
    color: red;

Does anyone know how I'd be able to avoid this?



I picked up the issue on completing code coverage.

When I review the coverage, I see logger.ts as only having 72%.

When I look under test files I don't see an folder for scripts which is where this file lives under the project?

never mind, figured it out