Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@theroutingcompany/components
Advanced tools
Readme
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.
npm run ready:prerelease
Use the release step to deploy the next version of the library.
npm run ready:release
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 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.
❌
<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:
FAQs
The Routing Company Components
The npm package @theroutingcompany/components receives a total of 189 weekly downloads. As such, @theroutingcompany/components popularity was classified as not popular.
We found that @theroutingcompany/components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.