helpwave hightide

This repository contains all components and themes employed by helpwave's web application.

Installing in your React app

Step 1 — Install

npm install @helpwave/hightide

Step 2 — Import the stylesheet

Import the pre-built CSS in your app entry point:

// app entry (main.tsx, index.tsx, layout.tsx, …)
import "@helpwave/hightide/style/globals.css";

Two stylesheet exports are available:

• @helpwave/hightide/style/globals.css — pre-built, prefixed CSS (recommended)
• @helpwave/hightide/style/uncompiled/globals.css — source CSS for apps that compile Tailwind themselves

Step 3 — Wrap your app with HightideProvider

import { HightideProvider } from "@helpwave/hightide";

<HightideProvider theme={{ theme: "system" }} locale={{ locale: "system" }}>
  {children}
</HightideProvider>;

Step 4 — Use components

import { LoadingAnimation } from "@helpwave/hightide";

Uncompiled CSS path (advanced)

If you compile Tailwind in your own app, install tailwindcss and @tailwindcss/postcss, add a postcss.config.mjs matching hightide's setup, and import the uncompiled stylesheet:

@import "tailwindcss";

@import "@helpwave/hightide/style/uncompiled/globals.css";
@source "./node_modules/@helpwave/hightide";

/* Your Custom Styles */

Development — Getting Started

To start developing in the project, run:

npm run init

Translations

Translations are handled similar to Flutter's intl package with .arb files using ICU patterns for string replacements. These files are found in the locales folder and the typed translations are built with:

npm run build-intl

The resulting files are by default found in the i18n folder.

Theming

Theming is achieved through an extensive tailwindcss config in the globals.css.

Storybook

We use storybook for easily testing and showcasing our component library.

npm run storybook

To test on physical devices over the local network:

npm run storybook:devices

Open http://<your-ip>:6006 on your phone or tablet.

To build a static Storybook for hosted previews:

npm run build-storybook

Publishing a new version

• Increase the version number in the package.json
• Update the CHANGELOG.md

npm run build