- Install:
npm i penny-ds --save
- Import styles in your index.js:
import 'penny-ds/index.css'
- Add provider before router:
import { DesignSystemProvider } from 'penny-ds' const App = () => <DesignSystemProvider> <Router> ... </Router> </DesignSystemProvider> export default App
- Import components!
import { Button } from 'penny-ds' const MyComp = () => <Button id="my_id"> My button! </Button> export default MyComp
Follow these steps to start the project
in development
- Clone repository.
git clone git@git.in.ripio.com:ripio_public/penny-ds.git
- Install dependencies in the project folder.
npm install
. - If there's some problems with dependencis, run
npx sb update
- Run Storybook
npm run start
, this command run Storybook and build tokens. This comman run 2 tasknpm run tokens
andnpm run storybook
Check the package.json
file, there you will find the commands necessary for the development
- Run
npm run test
For this project will be using the methodology to create componentes called Atomic Design. The component library will be creating just Atoms and Molecules with the following definitions:
For this project an atom will be a component that is composed by an unique Atom with or without HTML tags, or just HTML tags.
For this project a molecule is a component that is composed by at least 2 different atoms or stateful componentes
Design tokens are central and tiny pieces of UI information to store design related information such as colors, fonts, spaces, animations, etc... Their benefits is that they can be transformed and formatted to meet the needs of any platform (Android, iOS, Web, etc…).
Once Design Tokens are generated we have to create a file in src/styles/theme
and import the tokens. This isn't automatically.
We use Styled Components
We have a CLI tool to create automatically a component. Run npm run cc
(cc stands for create component)