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 react-aria. Please migrate components away from Radix to react-aria if you have time.

• react-aria

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.

❌

<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:

• https://kentcdodds.com/blog/compound-components-with-react-hooks
• https://felixgerschau.com/react-component-composition/