@theroutingcompany/components v0.0.79
TRC TREX Component Library
View the StoryBook.
Developing Locally
Clone the dashboard repo at the same level as this one. Then run npm link ../component-library
from the dashboard repo. Then run npm run dev
from the component library repo. This will make hot module reloading within dash work with the changes you make to the component files.
Publishing
First double check if everything that needs to exported is added to the components/index.js
or helpers/index.js
and run npm run build
before.
Prerelease
Use the prerelease step to preview your changes using an alpha url provided when running the command.
- Login to NPM with the shared TREX 1pass creds.
- Execute the ./scripts/prerelease.sh file.
npm run ready:prerelease
Release
Use the release step to deploy the next version of the library.
- Login to NPM with the shared TREX 1pass creds.
- Execute the ./scripts/release.sh file.
npm run ready:release
Storybook deployment
- Run the docker script aliases to deploy the storybook.
TODO
- Change the cloudbuild.yaml to auto build/tag/deploy the cloud run.
- Fix the Dockerfile to get design.trc.dev to work. (Need to serve the app with something other than Python so the CORS isn't broken.)
UI Libraries
The component library is built on the following 'component primitive' UI libraries, low-level unstyled building blocks.
They are similar in spirit but take a slightly different approach. Radix follows a component-based approach, while react-aria takes a hook-based approach. Either is acceptable if the solution meets the UI/UX requirements we need.
Styling
Styling is done with styled-components, a CSS-in-JS library.
Styled System
We use something called styled-system to help manage our component composition, responsive styled props, and typescript prop interfaces/types.
Start Simple
Or the “Principle of Least Power”.
For example, don’t start building a table component that covers many use-cases. Instead, start with just the reusable parts of the table that can be shared between many use-cases.
For content, prefer composition over props
- ❌
<Text text="Some text" />
- ✅
<Text>Some text</Text>
Prefer 'compound/composed components' over one large component with many props
Similar to last point. Compound/composed components scale better.
❌
<AlertDialog
title='Header'
description='Optional description'
cancelButtonText='Close'
onCancel={() => {}}
confirmButtonText='Delete'
confirmButtonVariant='primary'
onDelete={() => {}}
// ... and so on
>
<Text>
Powering the next generation of transit We help build more sustainable
cities with convenient and reliable transit for all
</Text>
</AlertDialog>
✅
<Alert.Dialog>
<Alert.Trigger asChild>
<Button size='small'>Open dialog</Button>
</Alert.Trigger>
<Alert.Content size={size}>
<Alert.Title>Header</Alert.Title>
<Alert.Description>Optional description</Alert.Description>
<Text>
Powering the next generation of transit We help build more sustainable
cities with convenient and reliable transit for all
</Text>
<Alert.Footer>
<Alert.Action asChild>
<Button size='large' variant='danger'>
Delete
</Button>
</Alert.Action>
</Alert.Footer>
</Alert.Content>
</Alert.Dialog>
Resources:
15 days ago
16 days ago
19 days ago
19 days ago
22 days ago
23 days ago
23 days ago
26 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 months ago
6 months ago
10 months ago
6 months ago
10 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
6 months ago
7 months ago
8 months ago
6 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
10 months ago
7 months ago
10 months ago
10 months ago
7 months ago
7 months ago
7 months ago
7 months ago
10 months ago
10 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
10 months ago
10 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago