## Where communities thrive

• Join over 1.5M+ people
• Join over 100K+ communities
• Free without limits
##### 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
Daniel Ortiz Costa
@danoc93
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
@alfonsoar
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
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?
2 replies
@javvaru
Hi all!! I am in the process of converting all of my .jsx files to typescript (.tsx). I would like to generate documentation for props in .jsx and .tsx files in my project. Is there any way to use react-docgen and react-docgen-typescript at the same time in styleguide.config.js to generate documentation for props?
Andrew Blowe
@tehandyb
What is the best way to add multiple example tabs, for example one tab for React, and one for Vanilla html? I was able to get it to work, but it was very clunky to implement so I was hoping there was a straighforward solution. Here's what I have above ^
Jamie Woodmancy
@jamie29w

Hey there, I'm using Styled Components in a React Native project, and they work great. However, we're at a point where we want to start documenting our components. I've read and re-read the docs for standard and third-party configurations. I've also done gone over the config steps and examples from both the RN and SC example repos. The docs page loads when I run locally, but the components aren't styled. I prefer using the css={css...} syntax, because it allows me to pass fewer props. But I've also tried the styled.Text syntax. Neither way seems to be passing the styling to the elements.

Also, I've confirmed that my theme values are received at the component level. So that's not the problem.

Has anyone else had any luck with this kind of setup or know what I might be doing wrong?

Aavgeen singh
@aavgeen1
Hey folks. I am getting a Unexpected token error for JSX when i try to serve the docs using styleguidist server
Here is my webpack config:
 webpackConfig: {
module: {
rules: [
{
test: /\.js?$/, exclude: new RegExp('/node_modules/(?!react-kuic).*/'), loader: 'babel-loader' }, // Other loaders that are needed for your components { test: /\.css$/,
},
{
test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|ico)\$/,
}
]
}
}
kwzm
@kwzm
Hi, can i export the markdown files when run styleguidist build?
Esa Juhana
@thevangelist
How do I EASILY sort components in alphabetical order when I have components in subfolders too, such as /forms/input, /forms/checkable
Esa Juhana
@thevangelist
juliane nagao
@junagao
Hi, how do I enable the props and methods tab?
Esa Juhana
@thevangelist

MVP method for ordering the components in alphabetical order:

Make folder names such as "001_color" or so, gather all components with Barrelsby or something similar

001_color is the first one on sidebar
giedriusla
@giedriusla
Is there any support for multiple tabs in the code example ?
Annie
@apennell
Has anyone set up a library with Styleguidist that's using styled-components and JS (not TypeScript!) and has a public repo? I have a good handle on Styleguidist but I'm starting a fresh library for work and want to use styled-components, which I've never used before. I'd like to see examples of best practices for component structure and setup, but most that I've found use TypeScript and I'm not familiar enough with that to pick out the relevant parts.
Rohit Garg
@gargroh
Esa Juhana
@thevangelist

Have you experienced this...

Links to components are not working in build version. For example

/#/Components?id=textarea

Just goes to my first component, which is accordion (instead to textarea)

@sapegin
I am using: "pagePerSection: true,"
@javvaru

Currently, StyleGuidist generates one parent comonent StyleGuide and all other components are part of it except ReactExample component. So, the structure would be like in the image.
I want to wrap all of it with a single theme component

<ThemeComponent>
<StyleGuide />
<ReactExample />
<ReactExample />
<ReactExample />
</ThemeComponent>

Does any know if that is possible with Styleguidist ?

5 replies
@javvaru

my usecase is bit different.
If you navigate to the URL here - https://react-styleguidist.js.org/examples/basic/ , you would see list of examples in React styleguidist. Open the developer tools and if you have the extension - React Developer Tools, you would see a tab called 'Components' and you can see how the components are rendered. So, i want to wrap all of the components of the StyleGuidist with my custom theme provider.

my end goal of my issue to get something like below, so that I can use theme colors in all of my examples.

 <ThemeProvider>
<StyleGuide />
<ReactExample />
<ReactExample />
<ReactExample />
</ThemeProvider>

Is there any way we can do this using Styleguidist or using build process?

Hello everyone,
I have a question about testing. I just ran a test on my Styleguidist clone repo and it failed. I tested before any change in the code.
Here is my log file:
(2020-10-02T16_36_30_192Z-debug.log)
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'test:jest'
1 verbose cli ]
2 info using npm@6.14.8
3 info using node@v12.18.4
4 verbose run-script [ 'pretest:jest', 'test:jest', 'posttest:jest' ]
5 info lifecycle react-styleguidist@11.0.0-beta2~pretest:jest: react-styleguidist@11.0.0-beta2
6 info lifecycle react-styleguidist@11.0.0-beta2~test:jest: react-styleguidist@11.0.0-beta2
7 verbose lifecycle react-styleguidist@11.0.0-beta2~test:jest: unsafe-perm in lifecycle true
8 verbose lifecycle react-styleguidist@11.0.0-beta2~test:jest: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;F:\repo\react-styleguidist\node_modules.bin;C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;F:\repo\react-styleguidist\node_modules.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files (x86)\Skype\Phone\;C:\ProgramData\chocolatey\bin;C:\Users\GameDev\AppData\Roaming\Python\Python38\Scripts;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Program Files\MySQL\MySQL Shell 8.0\bin\;C:\Users\GameDev\AppData\Local\Programs\Python\Python38-32\Scripts\;C:\Users\GameDev\AppData\Local\Programs\Python\Python38-32\;C:\Users\GameDev\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\GameDev\AppData\Local\GitHubDesktop\bin;C:\Users\GameDev\AppData\Roaming\Python\Python38\Scripts;C:\Users\GameDev\AppData\Roaming\npm
9 verbose lifecycle react-styleguidist@11.0.0-beta2~test:jest: CWD: F:\repo\react-styleguidist
10 silly lifecycle react-styleguidist@11.0.0-beta2~test:jest: Args: [ '/d /s /c', 'jest' ]
11 silly lifecycle react-styleguidist@11.0.0-beta2~test:jest: Returned: code: 1 signal: null
12 info lifecycle react-styleguidist@11.0.0-beta2~test:jest: Failed to exec test:jest script
13 verbose stack Error: react-styleguidist@11.0.0-beta2 test:jest: jest
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid react-styleguidist@11.0.0-beta2
15 verbose cwd F:\repo\react-styleguidist
16 verbose Windows_NT 6.1.7601
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "test:jest"
18 verbose node v12.18.4
19 verbose npm v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error react-styleguidist@11.0.0-beta2 test:jest: jest
22 error Exit status 1
23 error Failed at the react-styleguidist@11.0.0-beta2 test:jest script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]