Isolated React component development environment with a living style guide
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
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;
} styleguideComponents: {
Wrapper: path.join(__dirname, 'src/components/ThemeWrapper')
},
`
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>;
}
}
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)
@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?
