@cloudline/cloudline-styled-components

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 [e-mail]: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.

✍🏼 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.