@luscii-healthtech/web-ui 0.0.0-alpha.ccdf511 → 0.0.0-alpha.d330180

package/README.md

@@ -29,7 +29,18 @@ function MyComponent() {
 
 ### Fonts
 
-WebUI uses the Avenir Next LT Pro font family for some headings. 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:
+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 300, 400, 500, 600 and 700. One way of doing this is using a Google Fonts link in your HTML file:
+
+```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@300;400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+```
+
+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 {
@@ -55,6 +66,63 @@ The `font-family` property value is important, as this is what WebUI is referenc
 
 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.
 
+### LocaleProvider
+
+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`.
+
+```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>
+  );
+}
+```
+
+The locale passed should adhere to the `{language}-{region}` format, for example:
+
+- `nl-NL`
+- `en-GB`
+- `pt-PT`
+- `de-DE`
+- `fr-FR`
+
+### Tooltip Provider
+
+Install the `@radix-ui/react-tooltip` peer dependency into your project:
+
+```bash
+yarn add @radix-ui/react-tooltip
+```
+
+Wrap your app with the `Tooltip.Provider` component:
+
+```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>
+  );
+}
+```
+
+More about this component can be found in its [documentation](https://www.radix-ui.com/primitives/docs/components/tooltip).
+
 ## How to use
 
 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.  

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

@@ -0,0 +1,35 @@
+import { type Meta } from "@storybook/react-vite";
+export declare const BADGES: {
+    readonly NEEDS_REVISION: "needs-revision";
+    readonly DOCUMENTED: "documented";
+    readonly STABLE: "stable";
+    readonly NEW: "new";
+    readonly DEPRECATED: "deprecated";
+};
+type TAGS = (typeof BADGES)[keyof typeof BADGES][];
+/**
+ * A drop-in replacements for `"@storybook/react"`'s Meta type which extends the type with web-ui's tags.
+ *
+ * @example
+ *
+ * const meta = {
+ *  title: "Layout/SplitViewLayout",
+ *  component: Component,
+ *  tags: ["new"], // `tags` is now type-checked and auto-completes
+ * } satisfies MMeta<typeof Component>;
+ */
+export type MMeta<T> = Meta<T> & {
+    tags: TAGS;
+};
+/**
+ * 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;
+    };
+};
+export {};

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

@@ -0,0 +1,31 @@
+import { type Decorator } from "@storybook/react-vite";
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from "react";
+import { ModalDialog } from "../src";
+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;

package/dist/codemods/v48-tag-props-update.d.ts

@@ -0,0 +1,2 @@
+import type { API, FileInfo } from "jscodeshift";
+export default function transformer(file: FileInfo, api: API): string;

package/dist/codemods/v48-tag-props-update.js

@@ -0,0 +1,163 @@
+"use strict";
+// Codemod for Tag component breaking changes.
+//
+// Handles:
+// - colorTheme="red"|"amber"|"green"|"gray"|"blue" → _type="danger"|"negative"|"positive"|"neutral"|"info"
+// - size="base" → _size="large", size="small" → _size="small"
+// - variant → _variant
+// - truncate → _truncate
+// - text="..." → children (prop removed, value becomes children)
+// - showIcon → _leadingIcon with a TODO comment (boolean → ReactNode, can't auto-migrate)
+// - as → _as (on direct <Tag> elements only)
+// - Also handles polymorphic usage via `as={Tag}` (e.g. <Stack as={Tag} variant="bordered" />),
+//   transforming Tag-specific props on the parent element (but not renaming `as` itself)
+//
+// Usage: npx jscodeshift --parser=tsx --extensions=tsx,ts -t @luscii-healthtech/web-ui/dist/codemods/v48-tag-props-update <target-dir>
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const COLOR_THEME_TO_TYPE = {
+    red: "danger",
+    amber: "negative",
+    green: "positive",
+    gray: "neutral",
+    blue: "info",
+};
+// Props that simply get an underscore prefix (no value change)
+const RENAMED_PROPS = {
+    type: "_type",
+    variant: "_variant",
+    truncate: "_truncate",
+};
+/**
+ * Transform Tag-specific props on a JSX opening element.
+ * Returns true if any changes were made.
+ */
+function transformTagProps(opening, j) {
+    var _a, _b, _c, _d, _e, _f;
+    let changed = false;
+    // --- colorTheme → _type (with value mapping) ---
+    const colorThemeAttr = findAttribute(opening, "colorTheme");
+    if (colorThemeAttr) {
+        colorThemeAttr.name = j.jsxIdentifier("_type");
+        if (((_a = colorThemeAttr.value) === null || _a === void 0 ? void 0 : _a.type) === "StringLiteral") {
+            const mapped = COLOR_THEME_TO_TYPE[colorThemeAttr.value.value];
+            if (mapped) {
+                colorThemeAttr.value = j.stringLiteral(mapped);
+            }
+        }
+        else if (((_b = colorThemeAttr.value) === null || _b === void 0 ? void 0 : _b.type) === "JSXExpressionContainer" &&
+            colorThemeAttr.value.expression.type === "StringLiteral") {
+            const mapped = COLOR_THEME_TO_TYPE[colorThemeAttr.value.expression.value];
+            if (mapped) {
+                colorThemeAttr.value = j.stringLiteral(mapped);
+            }
+        }
+        changed = true;
+    }
+    // --- size → _size (with "base" → "large") ---
+    const sizeAttr = findAttribute(opening, "size");
+    if (sizeAttr) {
+        sizeAttr.name = j.jsxIdentifier("_size");
+        if (((_c = sizeAttr.value) === null || _c === void 0 ? void 0 : _c.type) === "StringLiteral") {
+            if (sizeAttr.value.value === "base") {
+                sizeAttr.value = j.stringLiteral("large");
+            }
+        }
+        else if (((_d = sizeAttr.value) === null || _d === void 0 ? void 0 : _d.type) === "JSXExpressionContainer" &&
+            sizeAttr.value.expression.type === "StringLiteral" &&
+            sizeAttr.value.expression.value === "base") {
+            sizeAttr.value = j.stringLiteral("large");
+        }
+        changed = true;
+    }
+    // --- Simple renames (variant → _variant, truncate → _truncate) ---
+    for (const [oldName, newName] of Object.entries(RENAMED_PROPS)) {
+        const attr = findAttribute(opening, oldName);
+        if (attr) {
+            attr.name = j.jsxIdentifier(newName);
+            changed = true;
+        }
+    }
+    // --- showIcon → _leadingIcon with TODO ---
+    const showIconAttr = findAttribute(opening, "showIcon");
+    if (showIconAttr) {
+        const attrIndex = (_f = (_e = opening.attributes) === null || _e === void 0 ? void 0 : _e.indexOf(showIconAttr)) !== null && _f !== void 0 ? _f : -1;
+        if (attrIndex !== -1 && opening.attributes) {
+            opening.attributes[attrIndex] = j.jsxAttribute(j.jsxIdentifier("_leadingIcon"), j.jsxExpressionContainer(j.identifier("undefined /* TODO: showIcon was removed — pass a ReactNode icon to _leadingIcon instead */")));
+        }
+        changed = true;
+    }
+    return changed;
+}
+function transformer(file, api) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let hasChanges = false;
+    // --- Pass 1: Direct <Tag> elements ---
+    root.findJSXElements("Tag").forEach((path) => {
+        var _a;
+        const opening = path.value.openingElement;
+        if (transformTagProps(opening, j)) {
+            hasChanges = true;
+        }
+        // --- as → _as (Tag's own polymorphic prop) ---
+        const asAttr = findAttribute(opening, "as");
+        if (asAttr) {
+            asAttr.name = j.jsxIdentifier("_as");
+            hasChanges = true;
+        }
+        // --- text="..." → children (only for direct <Tag> usage) ---
+        const textAttr = findAttribute(opening, "text");
+        if (textAttr) {
+            const textValue = textAttr.value;
+            // Remove the text attribute
+            opening.attributes = (_a = opening.attributes) === null || _a === void 0 ? void 0 : _a.filter((a) => {
+                if (a.type !== "JSXAttribute") {
+                    return true;
+                }
+                return a.name.type === "JSXIdentifier" && a.name.name !== "text";
+            });
+            // Convert self-closing to open/close if needed
+            if (path.value.openingElement.selfClosing) {
+                path.value.openingElement.selfClosing = false;
+                path.value.closingElement = j.jsxClosingElement(j.jsxIdentifier("Tag"));
+            }
+            if ((textValue === null || textValue === void 0 ? void 0 : textValue.type) === "StringLiteral") {
+                path.value.children = [j.jsxText(textValue.value)];
+            }
+            else if ((textValue === null || textValue === void 0 ? void 0 : textValue.type) === "JSXExpressionContainer") {
+                path.value.children = [textValue];
+            }
+            hasChanges = true;
+        }
+    });
+    // --- Pass 2: Polymorphic as={Tag} usage (e.g. <Stack as={Tag} variant="bordered" />) ---
+    root.find(j.JSXOpeningElement).forEach((path) => {
+        var _a;
+        const opening = path.value;
+        const asAttr = findAttribute(opening, "as");
+        if (!asAttr) {
+            return;
+        }
+        // Check for as={Tag}
+        const isTagAs = ((_a = asAttr.value) === null || _a === void 0 ? void 0 : _a.type) === "JSXExpressionContainer" &&
+            asAttr.value.expression.type === "Identifier" &&
+            asAttr.value.expression.name === "Tag";
+        if (!isTagAs) {
+            return;
+        }
+        if (transformTagProps(opening, j)) {
+            hasChanges = true;
+        }
+    });
+    if (!hasChanges) {
+        return file.source;
+    }
+    return root.toSource({ quote: "double" });
+}
+function findAttribute(opening, name) {
+    var _a;
+    return (_a = opening.attributes) === null || _a === void 0 ? void 0 : _a.find((attr) => attr.type === "JSXAttribute" &&
+        attr.name.type === "JSXIdentifier" &&
+        attr.name.name === name);
+}