open-index/open-npm huggingface dataset:
npm package: @sandals/real-components
Description: Sandals Church react components
Author: Bryan Orozco
Latest version: 0.3.1

[![Actions Status](https://github.com/sandalschurch/real-components/workflows/test/badge.svg)](https://github.com/sandalschurch/real-components/actions) [![npm?](https://img.shields.io/npm/v/@sandals/real-components
)](https://www.npmjs.com/package/@sandals/real-components)

![Real Components](img/real-components.jpg?raw=true)

# Sandals Church React Components

A combination of react components used throughout Sandals Church applications.

## Install

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

## Example usage
```jsx
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](src/components/index.js) and export it.

### Example
```jsx
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](https://jestjs.io/) alongside [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). If you are new to React Testing Library, checkout [this video](https://www.youtube.com/watch?v=JKOwJUM4_RM), it's also always useful to read through their [documentation](https://testing-library.com/docs/react-testing-library/intro). For running your test you can use the following scripts.

```shell
# 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.