# frontend-react-components

## Setup
```bash
yarn install
```

### To run the styleguide locally:
We have an interactive styleguide that allows you to dynamically render components from the library in a sandbox environment. This is useful for testing and development, as well as to get an idea of usage. To run this styleguide, enter the following command after setup:
```bash
yarn start
```

This will then start up the styleguide on localhost:6060

### To test the components:
- `yarn test` tests the library and runs the linter
- `yarn watch` runs the tests and re-runs them on any change

## Design Hub
[https://frontend-react-components.theorchard.io/](https://frontend-react-components.theorchard.io/)

## Creating new components
### Add the component with its tests
Components should be added to their own folder under the `src/components` folder, named in a kebab case style that mimics the name of the component. In this folder, there should be the component js file (named the same as the folder) as well as optionally:
-  a `.scss` file containing any styles needed for the component.
- a `.md` file containing any examples of component variations and behavior.

Additionally, tests should be added in a subdirectory here in a folder named `__tests__` An example of this structure is as follows:
```yaml
src:
  components:
    my-component-name:
      __tests__:
        - my-component-name.spec.js
      - my-component-name.js
      - my-component-name.scss
      - my-component-name.md
      - index.js
```

[Read more about adding SVG icons](docs/adding-svg-icons.md)

### Export the component from the index file
To make a component available for use externally, add an export statement in `src/index.js`. Components should be thematically organized within the file and placed in alphabetical order for improved readability.

```js
export { default as MyComponent } from './components/my-component-name';
```

## Release a new version
After you've issued a PR with your new component or component modification and merged the changes, you must cut a new release in order to make the change available to other repositories. To do this, issue a new PR with the following file updates:
- `package.json` with the new version number following the `v3.x.x` pattern.
- `CHANGELOG.md` with short description about updates since previous release.

**NB** If your PR includes BREAKING changes then make sure to bump the minor version.

Non-breaking changes:
`3.0.1 => 3.0.2`

Breaking changes:
`3.0.1 => 3.1.0`

## To use in other projects:
The package is hosted by our private npm registry packagecloud.io. The package is available as `frontend-react-components` and `@orchard/frontend-react-components`.

### Using packagecloud.io
- Add the registry to your npm configuration.
  ```bash
  # add registry to your .nmprc file
  curl -s https://6bd4037e86b46b80283617ab4a2d836cde73271b342a357d:@packagecloud.io/install/repositories/orchardit/npm/script.node.sh | bash
  ```

- Then, include the library to the project, using regular yarn commands.:
  ```bash
  yarn add frontend-react-components
  ```
  or the namespaced version
  ```bash
  yarn add @orchard/frontend-react-components
  ```

### Styles
Include the following into styles entry file ( app.scss )
```scss
@import "~frontend-react-components/build/frontend-react-components.main.css";

// include orchard specific variables like color system
@import "~frontend-react-components/src/scss/variables";

// include bootstrap configured variables
@import "~frontend-react-components/src/scss/theme";
```

### Component usage:
After you've set up the component library, you're ready to use the components in your project. To do this, import the component as you would from any other third party repository with an import statement like so:

```js
import { Button } from 'frontend-react-components;
```