Tropical Components React

Lets get tropical!

This repository provides a collection of SSB Components implemented using React.

Demos & Live Docs

** Components are subject to change so please consult the storybook documentation for usage **

Installation

Tropical Components (Required)

We include all the library files you will need for styling inside one package called tropical-components. We do this so that you can still get consistent styled components whether you are using react or not. Included for right now are bootstrap 3 and tropical (ssb styles for bs3).

npm install tropical-components
    or
yarn add tropical-components

Tropical Components React

This is the library of custom react components built on top of tropical-components. Components will be added periodically to fit the needs of apps that we are in the process of building. This will be a long process but the end goal is to have react components that cover every component in bs3 and tropical-components.

npm install tropical-components-react
    or
yarn add tropical-components-react

Important Notice

For the time being, a complete list of "Complete" components will be kept on the bottom of this page. This should not stop you from using tropical-components for future apps since you will still get the benefit of consistent styles going forward. For example, we do not currently have a button react component, but importing tropical.scss from tropical-components will allow you to write

    <button class="btn">Enter</button>

and still get the same styles as if you were to import { Button} from our component library

Usage

Tropical Components

After successfully installing the tropical-components npm package, in your global scss file, add:

@import "~tropical-components/src/bootstrap/bootstrap.css";
// If you want to utilize material icons
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import "~tropical-components/src/ssb/tropical.scss";

Tropical Components React

After successfully installing the tropical-components-react npm package, in one of your component files, add:

import { ComponentName } from "tropical-components-react";

Live Components

• Forms
  • DynamicForm
  • Radio
  • Select
  • TextInput
  • TextArea
  • CreatableSingleSelect
  • MultiSelect
  • SingleSelect (should replace select)
• Cards
  • Card
  • CardImage
• Button
  • Button
• Loading
  • Loading

Pipeline

• Table
  • Action Bar (not exclusive to table)
    • Search Input
    • Action Buttons
  • Pagination
• New Radio Inputs
• Checkboxes
• Toggle
• Alerts
• Modal
• Remote Source Select Options
• Navigation Items (Still Planning)
• Dropdown