rts-react-components-v3 v0.0.7
⚛️ 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:
- Encourage consistent development practices
- Improve quality, reliability, and performance of RTS products
- Increase developer bandwidth
- Reduce the cost and duration of product development
- 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.