 Panda Common Controls

This library came out as a personal project to create a list of reusable components and also as a test to build my first public module to use with NPM.

It contains some "fancy looking" components like:

• Animations
• Badges
• Button
• Calendar
• Card
• Checkbox
• Dropdown List
• Graphs
• Icons
• Menus Layout
• Modals
• RadioButton
• Tabs
• TextBox (an input tag with a little more functionality)
• Toast Notifications
• ToolTip

These components where created using the styled-componets library.

You can see them in action here.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installing

NOTE: In order to use these components you will need to install the styled-components and styled-theming packages.

npm install --save styled-components styled-theming

To install this module using npm just run this command:

npm install --save panda-common-controls

This will install the following files into your project:

    .
    ├── lib
    |     ├── animations
    |     |       └── animations.js
    |     ├── badges
    |     |       └── badges.js
    |     ├── buttons
    |     |       └── buttons.js
    |     ├── calendar
    |     |       ├── calendar.js
    |     |       ├── month.js
    |     |       ├── months.js
    |     |       └── years.js
    |     ├── cards
    |     |       └── cards.js
    |     ├── checkboxes
    |     |       └── checkboxes.js
    |     ├── dropdownlists
    |     |       └── dropdownlists.js
    |     ├── graphs
    |     |       └── graphs.js
    |     ├── icons
    |     |       └── icons.js
    |     ├── menus
    |     |       └── menus.js
    |     ├── modals
    |     |       └── modals.js
    |     ├── radiobuttons
    |     |       └── radiobuttons.js
    |     ├── tabs
    |     |       └── tabs.js
    |     ├── textboxes
    |     |       └── textboxes.js
    |     ├── toastnotifications
    |     |       └── toastnotifications.js
    |     └── tooltip
    |             └── tooltip.js
    ├── index.js
    ├── package.json
    └── README.md

For a complete list of the files, including a running examples and tests, you can check the GitHub repository.

Basic usage

Components

• Animations
• Badges
• Buttons
• Calendar
• Cards
• CheckBoxes
• DropDown Lists
• Graphs
• Icons
• Menus
• Modals
• RadioButtons
• Tabs
• TextBoxes
• Toast Notifications
• ToolTip

You can clone the repository, start it and check the meta-storybook page to see some of the components in action.

**To clone it**
git clone https://github.com/pecadorcelestial/panda-common-controls.git

**To start it**
npm start

Running the tests

The test where build using Jest and Enzyme, to run them just copy the repository and type:

npm test

This includes the coverage command.

Built With

• styled-componets - For visuals and animations.
• Jest - Testing sandbox.
• Enzyme - JS testing utility.

Authors

• Francisco Rodríguez - Initial work - GitHub

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• These components are highly inspired by the React-MDL library.
• The font awesome by Dave Gandy is used... it really is awesome.