Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

panda-common-controls-ts

2.0.2 • Public • Published

🐼 Panda Common Controls + TS

This library is basically the same as the panda-common-controls, but with a little more TypeScript and a little less Babel... actually is all TypeScript and zero Babel.

So in resume, it is the same but different and still the same.

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

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

Authors

  • Francisco Rodríguez - Initial work - GitHub

License

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

Acknowledgments

Install

npm i panda-common-controls-ts

DownloadsWeekly Downloads

0

Version

2.0.2

License

ISC

Unpacked Size

1.98 MB

Total Files

4122

Last publish

Collaborators

  • avatar