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:
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.