parallel-design v0.0.2

Parallel-Design

publishe?

Project setup & maintenance

1. Clone the project
2. Install lerna globaly npm i -g lerna
3. Add the project dependecies with lerna bootstrap
4. To add a new package(component) run lerna create <name> --es-module
5. To start storybook just yarn start
6. To create a dependece to an internal package(component) lerna add <internalPackage> --scope=<dependentpackage> ex: We want the grocery package to depend on both the apple and banana packages. We run: lerna add apple banana --scope=grocery

How to use

Import the component(s) you want to use into your project, there are four ways to change the styling: 1. Using the Theme Provider *(details in next section):

```
	import { ThemeProvider } from 'styled-components';
		:
		:
	const theme = {...}
		:
		:
	return (
		<ThemeProvider theme={theme}>
			<App />
		<ThemeProvider>
	)
```

1. Extending component(s):

   import styled from 'styled-components';
   import <Component> from 'parallel-design';
   	:
   	:
   const ExtendedComponent = styled(Component)`
   	color: black;
   	text-align: right;
   `;

2. Inline style objects:

   	:
   	:
   return <Component style={{ textAlign: 'right' }}>
   `;

3. Using classes:

   	:
   	:
   return <Component className="name_class">

Update theme*

1. Simple usage:
   • color pallet
2. Extended usage:
   • inputs
   • buttons
   • icons
   • header

Description

React components to use accross your project, key values:

• small
• reusable
• configurable
• extensible

Project's Stack

This project is built withStyled-Components for the styling and Flow for Type checking:

• Styled-Components
• Flow
• storybook
• material-icons, temporary till we create our own fonts
• lodash.get

ESLint

Yes, we lint our files.
Lint will ensure that so best practices are followed. Search the error messages and learn with that.
Make sure that all your .js files are passing the lint check before open a PR.
There is pre-commit hook that won't allow you to commit without fixing the lint alerts.

Unit Test

Following TDD you need first to write a small story, with an empty component and the unit tests and then we develop the component.
Test stack consist of jest, Enzyme and Sinon.
The test are attached with an addon to the component story. You can follow the tests results directly through Storybook at the right panel under the specification tab.