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
Vikas Gourav
@yasvg
Thanks in advance!
Esa Juhana
@thevangelist

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?
mandolyte
@mandolyte
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
@bmeise
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
@tasadar

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
@danoc93
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
@thevangelist

Hey,

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
@thevangelist
Works fine in the dev version
Esa Juhana
@thevangelist
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
@osnysantos
Hello folks, Im trying to start styleguidist server but getting this error: https://share.getcloudapp.com/5zu5E2jO
Random bug
@Fleuv

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
@luizzzdev
hey guys, is someone else having problem when running the build ?
image.png
image.png
rammohangowdt
@rammohangowdt
Hi All
Can I add a screenshot in document
Олег Филинюк
@mr-koshkins

Hello everyone :)
Help me, please(

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

Dimitri KOPRIWA
@kopax
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
@spideep_twitter
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
@bmight
Sorry if this has been asked already. Trying to find the cleanest way to add documentation for hooks in my library.
Philipp Kursawe
@pke
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
@pke
How do I render my components with the apps global index.css?
Zerka1982
@Zerka1982
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
Zerka1982
@Zerka1982
image.png
here is the look and feel I am trying to achieve
Dimitri KOPRIWA
@kopax
What is the appropriate webpack loader to use static keywords ?
Esa Juhana
@thevangelist
What is the import path I should use inside the [root]/docs, when I want to import components from [root]/src/components/ ?
Mathieu Marques
@angrybacon
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
@edwinjoseph
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
@edwinjoseph

@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
@edwinjoseph

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?

dhuang612
@dhuang612

Hi,

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?

dhuang612
@dhuang612
never mind, figured it out