npm package: @savesa/calabash
Description: Something local design system
Latest version: 1.0.11

# calabash

Calabash is the UI design system for the Save SA Something Local website.

Calabash is not meant to be the actual Something Local website but is the repository for all the components 
we will be using to build the Something Local website.

### Storybook

Calabash uses Storybook as a means of developing and visually testing our components.

Storybook is an open source tool for building UI components and pages in isolation.

[Read more here](https://storybook.js.org/)

### Styled Components

Calabash uses the Styled Components library instead of Sass or CSS files to style it's components.

Styled-components helps us write CSS inside our JavaScript

[Read more here](https://styled-components.com/)

#### Before you start coding

Your system needs to have NodeJS 14 running 

[Download here](https://nodejs.org/en/)

It is reccomend to use NVM (Node Version Manager) to manage your node versions

[NVM For windows](https://github.com/coreybutler/nvm-windows)

[NVM For Linux](https://tecadmin.net/how-to-install-nvm-on-ubuntu-20-04/)

[NVM For Mac](https://github.com/nvm-sh/nvm)

Once installed you can use the following commands to setup your dev environment

- `nvm install 14`
- `nvm use 14`

Although coding on a Windows PC is possible it can be full of frustrations, We reccommend you use a Unix machine (Linux / Mac)
#### To start coding

 Run the following commands :

 - `npm install`
 - `npm run storybook`
 -  Visit [http://localhost:6006/](http://localhost:6006/ )



## Extra info

 #### When Creating a Component

Create your component in in the `src/components` folder and give it and `index.js` followed by an `index.stories.js`
The `index./stories.js` file is the pice of code you will be using to setup a test for the component.

For example say you want to create a button component. 

You will need to create the folder `src/components/button` and inside this folder you will need to add your index.js which may contain your actual styled component.

E.G


```
import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  background: blue;
  border: 1px solid red;
  padding:10px;
`;

const Button = styled.button`
    border: 1px solid grey;
    background: lightslategrey;
    padding: 10px;
`;


class Button extends React.Component {

  render() {
    
    return (
      <Container>
        <Button> {this.props.children} </Button>
      </Container>
    );
  }

}

export default Button;
```

And your `index.stories.js` will contain your test story for the button component

```
import React from 'react';

import { storiesOf } from '@storybook/react';
import Button from './index';

storiesOf('Form Components', module)
  .addParameters({ info: { inline: false, header: false } })
  .add(
    'Button',
    () => (
      <div>
        <Button> My Button </Button>
      </div>
    ),
    {
      info: {
        inline: true,
        header: false,
        source: false,
        text: '',
      },
    }
  );
```

Then you can `npm run storybook`, navigate to [http://localhost:6006/](http://localhost:6006/) and see your component live.
Storybook will update the component as you code.

You need not worry about adding your `index.stories.js` anywhere. Storybook will automatically find it :)

## License

Licensed under the MIT License, Copyright © 2021 Save South Africa.