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
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
Zerka1982
@Zerka1982
@edwinjoseph thank you dude. Looking forward to hear from u soon.
dhuang612
@dhuang612

Hey guys, I'm working on new cypress tests, and created a new file under test/cypress/integration

placeholder_spec.js

However, even when I rerun the commands to setup the cypress test environment the new file is

npm run test:cypress:pre

still not being found?

 Specs:    2 found (component_spec.js, core_spec.js)

is the output when I run:

npm run test:cypress:run

from cypress.json I see that this integration folder is where this test belongs, so I'm not sure on next steps?

"integrationFolder": "test/cypress/integration"
Mathieu Marques
@angrybacon
Hello, I've read in an issue that it wasn't recommended to overwrite non-rendered components. How else should I overwrite slots? https://github.com/styleguidist/react-styleguidist/blob/master/src/client/rsg-components/slots/index.ts
That is, in order to toggle off specifics elements from the styleguide
Mathieu Marques
@angrybacon
Another question, is it possible to have custom modifiers on Markdow code blocks?
Jonathan Krone
@jonkrone_gitlab
Hi there community, I have a question I've been unable to effectively search for or find an answer to.
I'd like to render a content-only page (like an introduction to this documentation site) but have some fancier effects going on and so would like to write the page as a React component itself. Is there anyway to render a component instead of a .md file for the content of a page?
Eric Morton
@xec
@jonkrone_gitlab I would like to know the same. So far i've only been able to use a .md file as content for a section. HTML is allowed here, but I'm unable to use React components
Daniel Ortiz Costa
@danoc93
You can use a mn
an md file with a jsx block as your container... if the md file is not linked to a component it will
not add any code playground and it should embed regular components
Eric Morton
@xec
@danoc93 thanks! i got it working by wrapping the entire content of the .md file in a jsx noeditor code block
Pierre Nel
@pierrenel
When I run styleguide server, I see my styled component code (themeprovider + global style etc) - but on styleguidist build, the examples in the mdx somehow dont have the styled component err styles applied :confused:
Andrew Bail
@Blastoplex

Hey Styleguidist friends. Im looking at my options to add release notes to my styleguidist page.
My styleguidist is currently structured in a way that each component has its own page, where you can see examples, experience usage and API documentation.
You can see this here: https://feelix.myob.com/#/Components/Forms/Button
What I want is to put a changelog at the base of each component, to include all the changes that effect that component.
I also want a page that includes all of the changes for a certain version.
So for example you would see:
components

Button

Changelog

5.0.1

Bug fix
5.2.0
New prop

Release notes

5.0.1

Button

Bug fix
Dropdown
A different fix
5.2.0
Button
New prop

I was trying to do this by making my sections a function that looks to the file system and inside a component directory would find all the relevant files. I was using fs for this

    {
      name: "Changelog",
      sections: (path) => {
        const sectionTemplate = (fileName, path) => ({
          name: fileName,
          content: `${path}/${fileName}`
        });
        files = fs.readdirSync(path).filter(fn => fn.endsWith('.md') && fn.startsWith('v'));
        return files.map(file=> sectionTemplate(file, path))
      }("../../my/component/verisons"),
    },

It looks like that this code is being run both during compile time, and in the browser. this code then fails as browsers dont have access to a fs module.

Has anyone had success with containing dynamic sections with markdown in them?

What I would want, is that this is run a build time based on the file system. then the code run in the browser is simply rendering that.
Cristian Yáñez
@ycanales

Hi everyone. I'm using styleguidist 7.2.5 + react-scripts 1.1.4. I've updated to react-scripts 2.0.3 and the following is happening:

The server runs but when loading the page is blank and the following error apears in the console: index.js:93 Uncaught TypeError: Cannot read property '_import' of undefined

My end goal is get up to date with Styleguidist, but it drops support for Webpack 3 so that's why I'm updating react-scripts.
Well, I've tried updating to react-styleguidist==7.3.11 and now it works fine, leaving the message here in case it's useful for someone.
lin onetwo
@linonetwo
HI, how to add another language, to make the doc i18n?
There is an issue said there is a doc for that, but I can't find any doc related to language, i18n or translation.
Ghost
@ghost~5e738b64d73408ce4fdd5744
Hi, I have question regarding readme.md file. Is there any way to have if statement in readme.md file? We have two different theme in our application and base on the theme we want to show different components in readme.md file. For example theme A we show two buttons but in theme B we want to show three buttons. There is button on our styleguiddist application that you can switch between theme. Basically we want to have dynamic readme file.How can I do that? thanks
MatthijsBon
@MatthijsBon
This message was deleted
MatthijsBon
@MatthijsBon

Hi everyone. I'm trying to create a PR to add anchors to MarkdownHeadings (see styleguidist/react-styleguidist#833).

I thought it would be wise to add this as a styleguid.config.js option, as I don't know how else the MarkdownHeadingRenderer would know to render an achor as well. However, I can't find how to acces this particular config option from the context of the MarkdownHeading(Renderer). Is there a way to access the config (using something like context?)

Alfonso Austin
@agar23
Hey all, how can i get styleguidist to auto-launch on a different domain? so instead of launching on localhost:6060 --> localhost.mydomain.com
idesignpixels
@idesignpixels
Hi all, I have just started using styleguidist and was wondering if there was a way for the components to share a context?
For example:
A LoginButton and a ProfileView component that use an authentication context, when you login with LoginButton the ProfileView will update.
Hxiaotong
@Hxiaotong
image.png
image.png
Who can help me solve this problem
Eduardo Reis Nobre
@reisnobre
Hi guys, kinda of a dumb question... but how do I add my styles to the preview written on the markdown files on my project?