ingo-canvas-library-milton v0.1.73

react-native-components

Design library for ingo react-native projects

Design guide

https://www.figma.com/file/8wxizvQ1u2RnV4WAaM1VuK/Host-App-Components

How to use

1. yarn add canvas-library
2. Start using components

import {
  Heading,
  normalizeFontSize,
  Text
} from 'canvas-library';

Storybook:

1. For every component you add, create a story file for the same to demonstrate the use of it. storybook -> .stories.js
2. First page of stoy should have all versions of the component and then each individually, eg.,

storiesOf('Button', module)
 .addDecorator(Usage)
 .add(
   'All Buttons',
   () => (
     <>
       <Button {...getProps('primary')} />
       <Button {...getProps('secondary')} />
       <Button {...getProps('tertiary')} />
       <Button {...getProps('thin')} />
     </>
   ),
   {
     notes: 'A small component'
   }
 )
 .add('Default', () => <Button {...getProps('primary')} />)
 .add('Secondary', () => <Button {...getProps('secondary')} />)
 .add('Tertiary', () => <Button {...getProps('tertiary')} />)
 .add('Thin', () => <Button {...getProps('thin')} />);

3. In order to see web navigator of run, yarn storybook which will redirect you to http://localhost:7007/?path=/story/*

Knobs:

1. In order to provide control content in storybook to change context we can use Knobs: https://github.com/storybookjs/storybook/tree/master/addons/knobs#object
2. In case you pass object as value for a prop then make sure to enter valid JSON syntax while editing values inside the knob in app.

Screenshots