README

CP Component Library

CP Component Library is in development and has not yet been officially released!

Description

Reusable, extensible, and maintainable Web component library. Created for ContactPartners :briefcase: and the rest of the world! :punch: You can view the live documentation and a full list of the components listed in "Our live Storybook"

:boy: Humans :girl:

Arsam Sarabi arsamsarabi@me.com

Using cp-component-library in your projects

:one: Install cp-component-library using the packagae manager of your choice.

If you use Yarn:

yarn add cp-component-library

If you use NPM:

npm i cp-component-library

:two: Import the component that you'd line to use into your file. See example below:

import { Button } from 'cp-component-library'

:bulb: For the full list of our components and to read the relevant Documentations please visit our Storybook

Notice

Currently you must supply a theme file through a ThemeProvider to your app component which will then be passed down to "CP Components" through context. Please see the example below:

import React, { Component } from 'react';
import { ThemeProvider } from "styled-components";
import { Button } from 'cp-component-library';
import theme from './styles/theme';
import './App.css';

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <div className="App">
          <Button
            label="Hello World!"
            icon={<i className="mdi mdi-death-star-variant"/>}
          />
        </div>
      </ThemeProvider>
    );
  }
}

export default App;

The theme file must follow the format in the example below:

import colors from './colors.js';

const theme = {
  colors: {
    bg: colors.snow,
    darkBg: colors.black,
    text: colors.black,
    lightText: colors.snow,
    primary: colors.darkBlue,
    secondary: colors.darkPurple,
    accent: colors.darkPink,
    info: colors.blue,
    success: colors.darkGreen,
    warning: colors.orange,
    danger: colors.darkRed,
  },
};

export default theme;

Development

:computer: How to get the project running locally

Use "yarn" to install dependencies, once completed run

To build Atoms, Molecules, and Organisms

yarn build

To run the build script in watch mode

yarn build:watch

:bulb: You can run the development Storybook locally on port 4200

yarn storybook

:gem: Running the linter

To run the linter you can run:

yarn lint

To run the linter in the watch mode

yarn lint:watch

:squirrel: Running the test suite

To run the automated tests you can run:

yarn test

To run the automated tests in the watch mode it is:

yarn test:watch

:ledger: Building the Docs

To build the Storybook in the docs folder, run the script below in the terminal:

yarn build:storybook

:gift_heart: How to contribute

:nut_and_bolt: Steps to submit a PR

:sos: How to raise issues

:information_desk_person: Changelog

For the full changelog please see changelog.md

Project started on 6th July 2018
Button and IconButton components are production ready.

Usage no npm install needed!

README

CP Component Library