⚛️ RTS React Component Library

The React Component Library is a collection of components used within the RTS Design System to provide a consistent foundation for client projects at RTS. The Library is intended to improve the quality and efficiency of RTS developed products by jump-starting development with ready-made components that solve for common design elements or product features. Basic styles are provided out-of-the-box for quickly wireframing or testing proposed solutions.

Purpose

The Library is designed to meet several business goals of RTS and its customers:

1. Encourage consistent development practices
2. Improve quality, reliability, and performance of RTS products
3. Increase developer bandwidth
4. Reduce the cost and duration of product development
5. Reduce the time to onboard new developers

Maintainers

These contributors are the primary maintainers of this library. This list will be updated over time as contributors join or depart.

• Chris Monaccio (@cmonaccio)
• Trevor Kirpaul (@trevorKirpaulRTS)
• Caitlin Munley (@CaitlinWeb)

See contributors for other contacts.

👩‍💻 Using the Library

Installation

Install the Library package using npm:

npm install @rtslabs/rts-react-components --save

Importing Components

Include a provided component in your project:

import { Button } from "@rtslabs/rts-react-components";

Rendering a Component

Use the element within the render function:

ReactDOM.render(
  <Button onClick={() => alert("Button clicked!")}>Example button</Button>
);

Styling a Component

We've chosen Styled Components for styling and themeing our components. It uses tagged template literals

This is a basic example of how components are styled within the library:

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>Hello World!</Title>
  </Wrapper>
);

For a full description on how to style a component, please refer to Styled Components' Documentation.

📆 Components Status

| COMPONENT | PLATFORM | TYPESCRIPT CONVERSION | DEFAULT STYLES | TESTS AVAILABLE | STORYBOOK STORY | | --------------------------- | -------- | --------------------- | -------------- | --------------- | --------------- | | Accordion | Web | Pending | Pending | Pending | Pending | | Alert | Web | Pending | Pending | Pending | Pending | | Box | Web | Complete | Pending | Pending | Pending | | Breadcrumbs | Web | Pending | Pending | Pending | Pending | | Button | Web | Complete | Pending | Pending | Pending | | Card | Web | Pending | Pending | Pending | Pending | | Checkbox | Web | Complete | Pending | Pending | Pending | | Color Picker | Web | Pending | Pending | Pending | Pending | | Cookie Warning | Web | Pending | Pending | Pending | Pending | | Drag & Drop | Web | Pending | Pending | Pending | Pending | | Dropdown/Popover | Web | Pending | Pending | Pending | Pending | | Embedded Content | Web | Pending | Pending | Pending | Pending | | Empty State | Web | Pending | Pending | Pending | Pending | | Field | Web | Complete | Pending | Pending | Pending | | Heading/Subheading | Web | Complete | Pending | Pending | Pending | | Icon | Web | Pending | Pending | Pending | Pending | | Image (Media?) | Web | Pending | Pending | Pending | Pending | | Input | Web | Pending | Pending | Pending | Pending | | Label | Web | Pending | Pending | Pending | Pending | | Link | Web | Pending | Pending | Pending | Pending | | List | Web | Pending | Pending | Pending | Pending | | Loading/Placeholder Content | Web | Pending | Pending | Pending | Pending | | Login Form | Web | Pending | Pending | Pending | Pending | | Modal | Web | Pending | Pending | Pending | Pending | | Navigation | Web | Pending | Pending | Pending | Pending | | Pagination | Web | Pending | Pending | Pending | Pending | | Progress | Web | Pending | Pending | Pending | Pending | | Radio/Toggle | Web | Pending | Pending | Pending | Pending | | Rating | Web | Pending | Pending | Pending | Pending | | Resizable Content | Web | Pending | Pending | Pending | Pending | | Scrollable Container | Web | Pending | Pending | Pending | Pending | | Search | Web | Pending | Pending | Pending | Pending | | Secure Password Field | Web | Pending | Pending | Pending | Pending | | Selection | Web | Complete | Pending | Pending | Pending | | Stepper | Web | Pending | Pending | Pending | Pending | | Sticky content | Web | Pending | Pending | Pending | Pending | | Table | Web | Pending | Pending | Pending | Pending | | Tabs | Web | Pending | Pending | Pending | Pending | | Tags | Web | Pending | Pending | Pending | Pending | | TextStyle | Web | Pending | Pending | Pending | Pending | | Toast | Web | Pending | Pending | Pending | Pending | | Tooltip | Web | Pending | Pending | Pending | Pending | | Upload/Dropzone | Web | Pending | Pending | Pending | Pending |

👩‍🎤 Contributing

For more information, refer to the Developer Docs wiki page.