ingo-canvas-library-milton
v0.1.73
Published
Design library for ingo react-native projects
Downloads
5
Readme
react-native-components
Design library for ingo react-native projects
Design guide
https://www.figma.com/file/8wxizvQ1u2RnV4WAaM1VuK/Host-App-Components
How to use
yarn add canvas-library
- Start using components
import {
Heading,
normalizeFontSize,
Text
} from 'canvas-library';
Storybook:
- For every component you add, create a story file for the same to demonstrate the use of it. storybook -> .stories.js
- 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')} />);
- In order to see web navigator of run, yarn storybook which will redirect you to http://localhost:7007/?path=/story/*
Knobs:
- 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
- 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