View the StoryBook.
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.
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.
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
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
- Run the docker script aliases to deploy the storybook.
- 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.)
The component library is built on react-aria. Please migrate components away from Radix to react-aria if you have time.
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 is done with styled-components, a CSS-in-JS library.
We use something called styled-system to help manage our component composition, responsive styled props, and typescript prop interfaces/types.
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.
- ❌
<Text text="Some text" /> - ✅
<Text>Some text</Text>
Similar to last point. Compound/composed components scale better.
❌
<ConfirmationModal
title='Header'
// ... and so on
>
<Text>
Powering the next generation of transit We help build more sustainable
cities with convenient and reliable transit for all
</Text>
</ConfirmationModal>✅
<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: