medic-react-component-library v0.1.1

README

This is the medic component library - a place for common components used by the medic team. It uses storybook for ease of testing out components.

How do I add a component?

####There are three steps to add a component to the library:

#####One Create a folder for your component under the src/components directory. Include the javascript file, as well as any assets it needs, css, and the .test file for unit tests.

Use .component.js for your component file Use .test.js for your test file

#####Two Under the /src/stories directory, create a story file for your component .stories.js You can use the Example.stories.js as a template, if you would like.

Basically you need to import your component into the stories file, and have the default export be your component with a title attribute. You can use "args" similar to props Create a template and associate the args with the template

export const Default = Template.bind({}); Default.args = { task: { id: '1', title: 'Test Task', state: 'TASK_INBOX', }, };

You can have different "variations" of components with different props/state, etc.

More info on storybook can be found here: https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/

#####Three Import your component into index.js Export your component from index.js Index.js is the entry file

###How to run my component in storybook for testing

To test your component in storybook, you can run: npm run storybook