Isolated React component development environment with a living style guide
@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:
- It isn't responsive, i.e. you can't hover on mobile nor do you have the screen space to display all sublists.
- 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.
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?
Hey guys, I'm working on new cypress tests, and created a new file under test/cypress/integration
placeholder_spec.jsHowever, even when I rerun the commands to setup the cypress test environment the new file is
npm run test:cypress:prestill not being found?
Specs: 2 found (component_spec.js, core_spec.js)is the output when I run:
npm run test:cypress:runfrom 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"
That is, in order to toggle off specifics elements from the styleguide
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 propRelease 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?
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
react-styleguidist==7.3.11 and now it works fine, leaving the message here in case it's useful for someone.
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?)
For example:
A LoginButton and a ProfileView component that use an authentication context, when you login with LoginButton the ProfileView will update.
2 replies
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?
webpackConfig: {
module: {
rules: [
// Babel loader will use your project’s babel.config.js
{
test: /\.js?$/,
exclude: new RegExp('/node_modules/(?!react-kuic).*/'),
loader: 'babel-loader'
},
// Other loaders that are needed for your components
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|ico)$/,
use: ['file-loader']
}
]
}
}
