Isolated React component development environment with a living style guide
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']
}
]
}
}
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 ?
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?
jest
jest
TypeError: code.appendLeft is not a function
error in example blocks. I found out that error occurres when I use jsx in example. Does anyone know what it's error mean and how to fix it?
I'm getting an error when starting styleguidist server. I receive
Warning: Cannot parse src/components/Panel/Panel.module.scss: SyntaxError: Panel/Panel.module.scss: Unexpected keyword 'import' (1:1)
@import "~pathtoscssvars/vars.scss";
I'm pointing styleguidist to the same webpack.config
I run the project with, and does work when the app is run with webpack-dev-server. Any thoughts as to what is going wrong here?
Network: http://10.10.0.164:8000
ERROR Failed to compile with 1 errors 4:09:59 PM
error in ./node_modules/react-docgen-typescript/lib/parser.js
Module not found: Error: Can't resolve 'fs' in '/Users/light/Documents/Landray_company/mk-project/simple-ui/node_modules/react-docgen-typescript/lib'
Here's my styleguide.config.js
// styleguide.config.js
const path = require('path');
module.exports = {
title: 'UI React Components',
sections: [
{
name: 'Getting Started',
content: 'GettingStarted.md',
},
{
name: 'Atoms',
sections: [
{
name: 'Components',
components: () => [
'src/lib/Atoms/Anchor/index.js',
],
},
],
},
],
components: 'src/lib/[A-Z]/**/.js',
styleguideComponents: {
Wrapper: path.join(dirname, 'styleguide/Wrapper'),
TableOfContentsRenderer: path.join(
dirname,
'styleguide/TableOfContentsRenderer',
),
},
serverPort: 6161,
showSidebar: true,
skipComponentsWithoutExample: true,
template: {
favicon: './src/assets/favicon.io',
},
theme: {
fontFamily: {
base: 'Circular',
},
color: {
link: '#0F15D4',
linkHover: '#343DF5',
sidebarBackground: '#E6E6E6',
codeBackground: '#F5F5F5',
codeBase: '#4B4B4B',
},
},
styles: {
StyleGuide: {
content: {
minWidth: 'unset',
maxWidth: 'unset',
width: 'auto',
},
},
},
};
My Anchor component:
import PropTypes from 'prop-types';
import React from 'react';
import styled, { css } from 'styled-components';
import { smallerThan } from '../../../style/variables';
const getMargin = p => (p.mL ? '0 0 0 4px' : p.mR ? '0 4px 0 0' : p.margin);
const AnchorStyle = styled.a text-decoration: none; margin: ${p => getMargin(p)}; font-size: ${p => p.fontSize || p.theme.anchor.fontSize}; font-family: ${p => p.fontFamily || p.theme.anchor.fontFamily}; font-weight: ${p => p.fontWeight}; cursor: pointer; color: ${p => p.color || p.theme.anchor.color}; ${p => css
${p.padding && padding: ${p.padding}};
}; &:hover { color: ${p => p.colorHover || p.theme.anchor.hover}; text-decoration: ${p => p.decorationHover || 'underline'}; } &:active { color: ${p => p.colorActive || p.theme.anchor.active}; } / need verification from design / &:visited { color: ${p => p.colorActive || p.theme.anchor.visited}; } @media (${smallerThan.tablet}) { font-size: ${p => p.fontSizeMobile || p.theme.anchor.fontSizeMobile}; } ;
const Anchor = props => <AnchorStyle href={props.href ? props.href : '#'} {...props}>{props.text};
Anchor.propTypes = {
children: PropTypes.node,
/* Theme default: font color /
color: PropTypes.string,
/ Theme default: font color hover /
colorHover: PropTypes.string,
/ Theme default: font color active /
colorActive: PropTypes.string,
/ Theme default: font color visited - undefined /
colorVisited: PropTypes.string,
/ Theme default: underline text on hover /
decorationHover: PropTypes.string,
/ Theme default: body font /
fontFamily: PropTypes.string,
/ Theme default: body font size - 16px /
fontSize: PropTypes.string,
/ Theme default: body font mobile size - 12px /
fontSizeMobile: PropTypes.string,
fontWeight: PropTypes.string,
/ Default: 0 unless mL or mR is passed /
margin: PropTypes.string,
/ Adds margin-left for inline links. If true: '0 0 0 4px' /
mL: PropTypes.bool,
/ Adds margin-right for inline links. If true: '0 4px 0 0' /
mR: PropTypes.bool,
padding: PropTypes.string,
text: PropTypes.string,
href: PropTypes.string,
onClick: PropTypes.func,
onKeyDown: PropTypes.func,
};
export { Anchor, AnchorStyle };
I am currently importing the component like import { Anchor } from '@frontend/ui-components'; This results into the import of my entire library and it makes my bundle (main.js) to be more than 1MB.
I want to do like import { Anchor } from '@frontend/ui-components/Anchor' so that I only import Anchor component and my bundle is not too big; But when I do like this I get errors.
Am I missing something?