@luscii-healthtech/web-ui 0.0.0-alpha.2fcd0e9 → 0.0.0-alpha.372afaa

package/README.md

@@ -2,178 +2,180 @@
 
 The `web-ui` repository contains the UI components for Luscii's frontend projects. It is published to NPM for usage into our projects. It uses Storybook and is published to Chromatic for easy review and tracking of visual changes.
 
-## Running locally
+## Table of contents
 
-If you want to run Storybook locally you can use:
+- 🚀 [Getting started](#getting-started)
+  - 📖 [Fonts](#fonts)
+- 📦 [How to use](#how-to-use)
+- 🤝 [Contributing](#contributing)
 
-```bash
-yarn install
-yarn dev # runs a Tailwind watcher and Storybook
-```
-
-## Testing your production build
-
-Assuming the following setup:
-
-- The `web-ui` and `cVitals-Web` repositories are siblings in the same folder.
-- You ran `yarn install` in `cVitals-Web`.
-- You ran `yarn build` in `web-ui`.
+## Getting started
 
-Run the script below in your terminal, _in the parent folder of the repositories_.
+To use WebUI, you need to add it as a dependency to your project:
 
+```bash
+yarn add @luscii-healthtech/web-ui
 ```
-cp -a web-ui/dist/. cVitals-Web/node_modules/@luscii-healthtech/web-ui/dist
-```
-
-Or use the shortcut:
-
-```
-yarn test-copy-build
-```
-
-When you run `cVitals-Web` again, it should contain your latest updates in the component library. Use this to make sure your changes are solid before opening a pull request.
-
-## Contributing
-
-Thank you for your help in keeping our component library organized and easy to use!
-
-When adding components, please make sure to implement them consistently in our projects and that it is clear where and when they should be used. We want to avoid having many similar components. If you want to add components, do so in the `/src/components` directory. When you create new components, add them to Storybook as well. Stories go in the `/stories` directory.
-
-If you add new components, please make sure they fit in with our existing ones and that it's clear where and when they should be used. We want to avoid having too many similar components.
-
-### Documentation
-
-Every component should have proper documentation that explains when, where and how to use it. This sounds like a lot of work, but it doesn't have to be. And it's important, also for you, to quickly see how to best use a component.
 
-Component documentation should include the following parts:
+Then you can use components like this:
 
-- A short explanation of each prop in a JSDoc comment style.
-- A stories file (`<ComponentName>.stories.tsx`).
-- A docs file (`<ComponentName>.docs.mdx`).
-
-Below is an explanation of each.
-
-#### Props documented via JSDoc comments
-
-A short explanation of each prop in a JSDoc comment style. These will show up in your IDE for on the fly documentation when you need it. It will also show up in Storybook, so this is a double-whammy and provides documentation exactly where you need it.
+```tsx
+import { Text } from "@luscii-healthtech/web-ui";
 
-```ts
-type Props = {
-  /**
-   * Optional description that will be shown close to the label, used to provide more
-   * detail about the field next to the concise text of the label.
-   */
-  helperText?: string;
-};
+function MyComponent() {
+  return <Text>Some beautiful text from WebUI!</Text>;
+}
 ```
 
-#### Stories file
+### Fonts
 
-Stories files (`*stories.tsx`) will show up in Storybook as separate entries/pages for each component. Each component can have multiple stories defined for it, showing different use cases, variants and states of that component.  
-It is important to include stories for a lot of these different variants and states, because visual snapshots will be created of these stories by a tool called Chromatic. This allows us to visually track changes to the component over time, and ensure that it looks and behaves correctly across different use cases. By writing stories that showcase all the different ways your component can be used, you can catch issues early and ensure that your component is robust and reliable.
+WebUI uses the Inter font family for most of its text. This font should be provided by your application if you're using WebUI. The weights needed to show the full gamut of weights in the design system are 400, 500, 600 and 700. One way of doing this is using a Google Fonts link in your HTML file:
 
-You can find the Chromatic project for WebUI [here](https://www.chromatic.com/library?appId=62b0c4d5afd432f7ee70a740).
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+```
 
-#### Docs file
+For some headings WebUI uses the Avenir Next LT Pro font family. If you want to use these, you need to make them available in your project. You can do this by declaring the following `@font-face` rules in your CSS:
+
+```css
+@font-face {
+  font-family: "AvenirNextLTPro-Regular";
+  src:
+    url("./<regular-font-file>.eot") format("embedded-opentype"),
+    url("./<regular-font-file>.woff2") format("woff2"),
+    url("./<regular-font-file>.woff") format("woff"),
+    url("./<regular-font-file>.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "AvenirNextLTPro-Bold";
+  src:
+    url("./<bold-font-file>.eot") format("embedded-opentype"),
+    url("./<bold-font-file>.woff2") format("woff2"),
+    url("./<bold-font-file>.woff") format("woff"),
+    url("./<bold-font-file>.ttf") format("truetype");
+}
+```
 
-The component docs file brings everything together and should be considered the source of truth about the component. What should be documented:
+The `font-family` property value is important, as this is what WebUI is referencing to use the font. The `src` property values should point to the font files you want to use.
 
-- Why we have the component and where it should be used.
-- An overview of the different variants and states.
-- Usage guidelines of when and where to use the component.
-- Best practices to show what to do and what not do when working with the component.
+If you don't declare these `@font-face` rules, the font will not be available and the headings will gracefully fall back to next available font in your application.
 
-> 🔎 If you need to e.g. create a story to show how NOT to use a component, you might not want
-> to create a snapshot for that component or show it in the sidebar of Storybook. To omit a story
-> from snapshots, add the following to its parameters:
->
-> ```ts
-> chromatic: { disableSnapshot: true },
-> ```
->
-> To hide a story from the sidebar, prefix the story (variable) name
-> with `HIDE_`.
+### LocaleProvider
 
-Please see examples of other components' docs files for inspiration and try to stay consistent with how they are documented.
+WebUI exposes a `LocaleProvider`, which is used to make components adjust their data formats to the locale of the application.
+You should wrap your app with the `LocaleProvider`.
 
-### Accessibility
+```tsx
+import { LocaleProvider } from "@luscii-healthtech/web-ui";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+function start() {
+  const root = createRoot(document.querySelector("#root"));
+  root.render(
+    <LocaleProvider value="nl-NL">
+      <App />
+    </LocaleProvider>
+  );
+}
+```
 
-WebUI is not currently designed to support screen reader usage. This is because our application is designed specifically for healthcare providers and is not publicly accessible. Our primary users are caregivers who work in healthcare and do not rely on screen readers to be able to use our application.  
-However, it is important for developers to write accessible frontend code. Even if our current application is not designed to support screen reader usage. This means following best practices for web accessibility, such as using semantic HTML, providing alternative text for images, and ensuring keyboard navigation is possible. While our primary users may not rely on screen readers, it is important to make our application as inclusive as possible to all users.
+The locale passed should adhere to the `{language}-{region}` format, for example:
 
-### Testing
+- `nl-NL`
+- `en-GB`
+- `pt-PT`
+- `de-DE`
+- `fr-FR`
 
-WebUI relies on two types of testing: Visual snapshot testing via Chromatic and interaction testing via Storybook.
+### Tooltip Provider
 
-Visual snapshot testing is handled for you. Any story you write will be picked up by Chromatic and it will create a snapshot for it.
+Install the `@radix-ui/react-tooltip` peer dependency into your project:
 
-Interaction testing via Storybook allows to programmatically interact with the component. This is very helpful in testing any logic that the component may use internally and any states of the component that might be hard/impossible to trigger from the outside.  
-More information on how to approach writing interaction tests can be found in [this page of the Storybook documentation](https://storybook.js.org/docs/react/writing-tests/interaction-testing#write-an-interaction-test).
+```bash
+yarn add @radix-ui/react-tooltip
+```
 
-### Adding icons
+Wrap your app with the `Tooltip.Provider` component:
 
-Add new icons by following these steps:
+```tsx
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+function start() {
+  const root = createRoot(document.querySelector("#root"));
+  root.render(
+    <Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
+      <App />
+    </Tooltip.Provider>
+  );
+}
+```
 
-- Add the svg file(s) in `src/components/Icons/icons`.
-- Run `yarn icons`.
+More about this component can be found in its [documentation](https://www.radix-ui.com/primitives/docs/components/tooltip).
 
-The icons are optimized by SVGO and transformed into React components by [SVGR](https://react-svgr.com) which are placed in `src/components/Icons`.
+## How to use
 
-## CI setup
+The primary goal of WebUI is to make frontend development faster. It does this by providing a set of commonly used components that can be composed together to build user interfaces.  
+WebUI aims to have every component well documented, both in the code and in Storybook. You can find all available components and documentation on how to
+use them at [design.luscii.com](https://design.luscii.com/).
 
-### Branching
+### Example scenario
 
-The `main` branch is our default branch. When you contribute, branch from there and use the following branch naming convention:
+Say you're tasked with building a UI that contains a card. This card has a title, a subtitle, some body text and a button. You could build this UI by writing the following code:
 
+```tsx
+import { Card, Text, Button } from "@luscii-healthtech/web-ui";
+
+function MyComponent() {
+  return (
+    <div className="my-layout">
+      <Card>
+        <Card.Title>Heart program</Card.Title>
+        <Card.Subtitle>79 participants</Card.Subtitle>
+        <Card.Text>Some description of how great this program is.</Card.Text>
+        <Card.Button>View program</Card.Button>
+      </Card>
+    </div>
+  );
+}
 ```
-  // Branch naming convention (enforced)
 
-  major/*      // For a new design system or changes that effect our foundations (e.g. typography, color).
-  minor/*      // For new components and stories.
-  patch/*      // For small improvements to existing components or stories.
-  bug/*        // For bugs or fixes.
-  chore/*      // For things related to development that don't impact the output for consumers and/or users.
-```
+Often times WebUI will provide a component that is a composition of other components. In this case, the `Card` component is a composition of `Card.Title`, `Card.Subtitle`, `Card.Text` and `Card.Button`. This allows you to build UIs faster, as you don't have to think about where to get a certain component. You can just use `Card` and its subcomponents and everything will be styled correctly.
 
-We have configured at lot of magic for your convenience.
+## Frequently asked questions
 
-### On every PR
+<details>
+<summary>The feature I'm building needs a component from WebUI that doesn't exist.</summary>
 
-1. The module build, lint and tests are checked.
-2. The Storybook build is published to Chromatic.
-3. Labels are added based on the branch name and PR size.
-4. Branch names must follow the convention and are checked.
+Please get in touch with the design system circle by sending us a message in the [#design-system-circle channel](https://luscii.slack.com/archives/C03507ZKRCY). We'll discuss your needs and see what would be the best way to move forward.
 
-### On merge to main
+</details>
 
-1. Drafts a GitHub release.
-2. Bumps the version of the package.
-3. Publishes the new package version to NPM.
+<details>
+<summary>The component I'm using doesn't have the props/subcomponents to build my feature.</summary>
 
-## Stories
+In most cases you can build the UI you need by composing the components that are available. If for instance `Card.Text` doesn't exist, go "one level up" and find the component that is closest to what you need. In this case, you can use the `Text` component and configure it with the correct props to match the design.
 
-### Stories using deprecated props
+In case the component is missing a prop that you need, please get in touch with the design system circle by sending us a message in the [#design-system-circle channel](https://luscii.slack.com/archives/C03507ZKRCY). We'll discuss your needs and see what would be the best way to move forward.
 
-When creating new stories for components with deprecated functionality please prefix the story name with `Deprecated`. In addition, also mark it with a "DEPRECATED" badge via the story's parameters.
+</details>
 
-For example a story of a `FullPageModal` component using the deprecated `primaryButtonProps` prop would look like this:
+## Contributing
 
-```tsx
-import { BADGES } from "../.storybook/constants";
-
-export const DeprecatedWithPrimaryButtonProps = {
-  render: OneColumTemplate,
-  args: {
-    isOpen: true,
-    primaryButtonProps: {
-      onClick: action("onClick Primary Button"),
-      text: "Primary",
-    },
-  },
-  parameters: {
-    badges: [BADGES.DEPRECATED],
-  },
-};
-```
+Great to have you help making WebUI better! We have a few guidelines and tips
+to make sure we can keep the library consistent and easy to use. You can find
+them in our [contributing guide](CONTRIBUTING.md).
+
+### Reporting bugs
 
-This groups deprecated stories together and will make it easier to remove them later on.
+If you find a bug, please report it by sending us a message in the [#design-system-circle channel](https://luscii.slack.com/archives/C03507ZKRCY). It helps us a lot knowing of anything that is not working as expected.

package/dist/.storybook/constants.d.ts

@@ -0,0 +1,18 @@
+export declare enum BADGES {
+    NEEDS_REVISION = "needs-revision",
+    DOCUMENTED = "documented",
+    STABLE = "stable",
+    NEW = "new",
+    DEPRECATED = "deprecated"
+}
+/**
+ * For stories specifically used in the Docs page that are not intended
+ * to be used for snapshots. E.g. stories that are used to demonstrate
+ * what NOT to do, or stories that are used to demonstrate a component
+ * and that don't need to show up in snapshots.
+ */
+export declare const NO_SNAPSHOT_PARAMS: {
+    chromatic: {
+        disableSnapshot: boolean;
+    };
+};

package/dist/.storybook/decorators.d.ts

@@ -0,0 +1,31 @@
+import { Decorator } from "@storybook/react";
+import { ModalDialog } from "../src";
+import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+export declare const LocaleDecorator: Decorator;
+export declare const TooltipDecorator: Decorator;
+export declare const createHoverCardDecorator: (trigger: ReactNode) => Decorator;
+export declare const CenteredDecorator: Decorator;
+/**
+ * Wraps the story in a div with the provided role.
+ *
+ * @example // Wrap the story within <div role="status"><Story /></div>
+ *
+ * const story = {
+ *   // ...
+ *   decorators: [createRoleDecorator("status")]
+ * }
+ *
+ */
+export declare const createRoleDecorator: (role: HTMLAttributes<HTMLDivElement>["role"]) => Decorator;
+/**
+ * Wraps the story in a ModalDialog.
+ *
+ * @example // Wrap the story within <ModalDialog variant="side-modal" size="l"><ModalDialog.Body><Story /></ModalDialog.Body></ModalDialog>
+ *
+ * const story = {
+ *   // ...
+ *   decorators: [createModalDialogDecorator({ size: "l", variant: "side-modal" })]
+ * }
+ *
+ */
+export declare const createModalDialogDecorator: (options?: Pick<ComponentProps<typeof ModalDialog>, "variant" | "size">) => Decorator;