Torq North Tools

A collection of react components, hooks and other utilities used in various projects

Getting it running

Upon pulling down the repo, in order to get the component browser running, all you need to do is run npm install in the root, and then run npm run ladle once that's done. This should provide you with a link to a site containing a list of all the components available in crew-2ls.

Session expiry redirects

The API helpers (sendGet, sendPost, etc.) can automatically detect when a user's session has expired and redirect them to the login page. This is triggered when any API call receives a 401 response, or when the server issues a redirect to /auth/login, which is the typical behaviour of a Symfony OAuth firewall that redirects rather than returning 401 directly.

This behaviour is opt-in. Call enableAuthRedirect once at app startup with the login URL to activate it:

import { enableAuthRedirect } from "@torq-north/react-tools";

enableAuthRedirect("/auth/login");

If enableAuthRedirect is never called, session expiry responses are left for the call site to handle as normal errors.

Dev environments

In local development the frontend and backend often run on different ports. If the backend is on a different port than the Vite dev server, navigating to /auth/login will hit Vite instead of the backend and the login page won't render correctly. Pass the full backend URL for dev:

enableAuthRedirect(
  import.meta.env.DEV ? "http://localhost:8103/auth/login" : "/auth/login"
);

Replace 8103 with whichever port your backend is exposed on locally. In production the relative URL is used and no special configuration is needed.

Adding your own component

1. Copy/paste in component from IRC project
2. Add a story that gives a basic demonstration of your component. Check out the ladle documentation on how to create stories
3. Add jsDocs comments (/** */) to your components props, indicating what each one does as well as any default behaviors for optional props (just so downstream users know what does what)
4. Export your component from src/index.ts (which is what actually adds your component to the final built npm package)

Building and Publishing

You can build the project using npm run build to see what the final npm package looks like. Unfortunately though, deploying currently can only be done by Nick MacDonald until the package is moved under the @torqit scope