Sandals Church React Components

A combination of react components used throughout Sandals Church applications.

Install

yarn add @sandals/real-components
# or
npm install @sandals/real-components

Example usage

import { Modal } from '@sandals/real-components';

const App = () => {
    return (
        <Modal>
            Hello
        </Modal>
    )
}

Storybooks

To see the all of the components, clone this repository and run

yarn install
yarn storybook

Creating new components

The best way to develop is components is to run yarn storybook and create a unique page for your components. Once your component is ready for usage include it in src/components/index.js and export it.

Example

import MyNewComponents from './MyNewComponents';

export {
    ...
    MyNewComponents
};

Before pushing you update, make sure to run yarn build and commit the dist directory.

Testing your components

Each components should have a test file under /src/tests. We use Jest alongside React Testing Library. If you are new to React Testing Library, checkout this video, it's also always useful to read through their documentation. For running your test you can use the following scripts.

# runs one time
yarn test
# listens for file changes
yarn test --watch

Before you push your changes, make sure you write a test for it and check that it did not cause any other tests to fail.