# cloudline-styled-components

A collection of UI components for Cloudline projects.

## 📦 Install

To install cloudline-styled-components first login to your npm account through terminal:

```
npm login
```

You will be prompted to enter your username, password and email:

```
Username:
Password:
Email: (this IS public)
```

After successful log in, install cloudline-styled-components:

```
npm install @cloudline/cloudline-styled-components
```

## 🔨 Clone repository and set up local environment

```
git clone git@github.com:cloudline-app/cloudline-styled-components.git
```

```
cd cloudline-styled-components
npm install
```

## 🚀 Publish package

You have to be logged in through terminal to your npm account before publishing the package.

Update version in package.json:

```
  "version": "1.9.0"
```

Build the package:

```
npm run build
```

Publish package to npm:

```
npm publish
```

## 📕 Write and run Storybook

To view and test Cloudline components you can use Storybook. It's a development environment for UI components that allows to interactively develop and test components.

To add new story create a file in stories folder following this structure: #number-Component.stories.js:

```
1-Button.stories.js
```

Import react, the component and write new story:

```
import React from "react";
import Button from "../src/components/Button";

export default {
  title: "Button",
  component: Button
};

export const DefaultButton = () => (
  <Button className="b-reg bg-primary">Join queue</Button>
);
```

Each story is a single state of the component. You can add multiple stories for the same component in one story file.

Run your Storybook with:

```
npm run storybook
```

[Open Storybook on localhost](http://localhost:6006/?path=/story/welcome--to-cloudline-storybook).

## ✍🏼 Usage

To use cloudline-styled-components styles (font color, size, ect.) import main css file to the Layout component:

```
import "../node_modules/@cloudline/cloudline-styled-components/src/css/main.css";
```

Import and render any component from the library:

```
import { Button } from '@cloudline/cloudline-styled-components';

const App = () => (
  <Button>
    Join queue
  </Button>
)
```

After a new version of package is published, update the package in project where it's used:

```
npm update @cloudline/cloudline-styled-components
```

## 📁 Folder and file structure

```
.
├── .storybook                # Storybook configuration.
├── dist                      # Compiled files.
├── docs                      # Documentation files, usually one file for one component.
├── node_modules
├── src                       # Source files.
│   ├── components            # UI and styled components. One component per file.
│   ├── css                   # Style files.
│   │   ├── globalStyle.js    # globalStyle - temporary, for media queries.// Possibly could be renamed or removed.
│   │   └── main.css          # Main css file with all available classNames.
│   index.js                  # Exporting all components from this file.
├── stories                   # All story files.
├── .babelrc
├── .gitignore
├── package-lock.json
├── package.json
└── README.md                 # Main readme file.
```

## 📄 Documentation

Detailed documentation available [here](docs/README.md).
