@savesa/calabash NPM

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.

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

Before you start coding

Your system needs to have NodeJS 14 running

Download here

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

NVM For windows

NVM For Linux

NVM For Mac

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/

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/ 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 :)