Keeping styles consistent
Michał Koźmiński
App lifecycle
- Start with modular system
- Build more and more custom components
- Abandon unused components
- Unused code lying in codebase
- A lot of custom CSS
- Reset
Michał Koźmiński
Interested in functional programming and AI. In free time enjoying cycling and mountain climbing.
Software Engineer @ Klara
michalkozminski
UI First Development
With shared components
Why?
How?
now with styling
styled-components
𝙛 := make blue
Keep components dumb and separated
How much separated?
How much separated?
Separate repository
Downsides
- Updating subprojects
- Breaking changes in new versions
- Version tracking
How to manage this?
CI with reverse testing
Shared Components
Project A
Project B
Project C
trigger update/test
Style guides
Motivations behind style guides
Solutions
Solutions
- electrode-explorer
- atellier
- react-storybook
- react-styleguidist
Solutions
- electrode-explorer
- atellier
- react-storybook
- react-styleguidist
react-storybook in action
How does it work
- Separate webpack dev server
- User defined "stories"
- Stories represent component
- Keep all passed props
- Keep notes
But why not to autoimport?
Knobs
Knobs and props
stories.add('with a button', () => (
<button disabled={boolean('Disabled', false)} >
{text('Label', 'Hello Button')}
</button>
))
const propTypes = {
active: PropTypes.bool,
disabled: PropTypes.bool,
block: PropTypes.bool,
onClick: PropTypes.func,
componentClass: elementType,
href: PropTypes.string,
/**
* Defines HTML button type attribute
* @defaultValue 'button'
*/
type: PropTypes.oneOf(['button', 'reset', 'submit']),
};
react-storybook-importer
Styleguides advises
Let user change props
Show all possible states
Add executable to run style guide from common components
TLDR;
-
Make sure all project use the same version of components
-
Host/export style guides
-
Don't create different versions of one component
-
wrap them
-
-
Create repository/directory with shared components
