@servicetitan/docs-anvil-uikit-contrib 32.4.1 → 32.6.0

package/docs/intl/API/intl-provider.mdx

@@ -0,0 +1,22 @@
+---
+title: IntlProvider
+---
+
+Applications must be wrapped with the `<IntlProvider>` component in order to access internationalization features throughout the application.
+
+`locale` and `timeZone` may be passed to the provider via the `config` prop. `locale` defaults to `en-US` and `timeZone` defaults to the user's local time zone if not provided.
+
+The config object must be wrapped with `useMemo` to avoid unnecessary re-renders.
+
+```tsx
+import { IntlConfig, IntlProvider } from '@servicetitan/intl';
+
+const locale = 'en-US';
+const timeZone = 'America/Los_Angeles';
+const intlConfig: IntlConfig = useMemo(() => ({ locale, timeZone }), [locale, timeZone]);
+return (
+    <IntlProvider config={intlConfig}>
+        <App />
+    </IntlProvider>
+);
+```

package/docs/intl/API/intlstore.mdx

@@ -0,0 +1,38 @@
+---
+title: IntlStore
+---
+
+The `IntlStore` is a dependency injected store that provides access to internationalization functionality in MobX stores in situations where formatting within React components is not possible.
+
+:::note
+It is preferred to use the [`useIntl` hook](./use-intl.mdx) instead of directly accessing the `IntlStore`, as it is preferred to do formatting in the "view" layer of your application vs the "data" layer.
+:::
+
+## Overview
+
+The `IntlStore` is an injectable store that maintains an [`intl`](https://formatjs.github.io/docs/react-intl/api#intlshape) object with the same formatting functions and locale information available through the [`useIntl`](./use-intl.mdx) hook. It extends the standard `react-intl` functionality with custom ServiceTitan formatters. The `IntlStore` is provided by [`MobxStoreProvider`](./mobx-store-provider.mdx).
+
+## Basic Usage
+
+```tsx
+import { inject, injectable } from '@servicetitan/react-ioc';
+import { IntlStore } from '@servicetitan/intl/mobx';
+
+@injectable()
+export class UserService {
+    constructor(@inject(IntlStore) private intlStore: IntlStore) {}
+
+    formatUserData(user: User) {
+        const intl = this.intlStore.intl;
+
+        return {
+            joinDate: intl.formatDate(user.joinDate, { format: 'long' }),
+            balance: intl.formatNumber(user.balance, { style: 'currency', currency: 'USD' })
+        };
+    }
+}
+```
+
+## Available Functions
+
+See [`useIntl`](./use-intl.mdx#available-functions) for a list of functions and properties available in the `intl` object.

package/docs/intl/API/mobx-intl-provider.mdx

@@ -0,0 +1,27 @@
+---
+title: MobxIntlProvider
+---
+
+Applications wrapped with the `<MobxIntlProvider>` component are provided access to internationalization features both in components and in MobX stores. `<MobxIntlProvider>` is used instead of `<IntlProvider>`.
+
+```tsx
+import { useMemo } from 'react';
+import { IntlConfig } from '@servicetitan/intl';
+import { MobxIntlProvider } from '@servicetitan/intl/mobx';
+
+const ExampleApp = () => {
+    const currency = 'USD';
+    const locale = 'en-US';
+    const timeZone = 'America/Los_Angeles';
+    const intlConfig: IntlConfig = useMemo(
+        () => ({ currency, locale, timeZone }),
+        [currency, locale, timeZone]
+    );
+
+    return (
+        <MobxIntlProvider config={intlConfig}>
+            <App />
+        </MobxIntlProvider>
+    );
+};
+```

package/docs/intl/API/use-intl.mdx

@@ -0,0 +1,66 @@
+---
+title: useIntl
+---
+
+The `useIntl` hook is the primary way to access direct internationalization functions in your React components. It provides access to all formatting functions and locale information needed for internationalization.
+
+:::note
+If using [`react-intl` Formatted components](https://formatjs.github.io/docs/react-intl/components)--such as those described in [Dates](../dates.mdx) and [Plurals](../plurals.mdx) documentation--you do not need to use the `useIntl` hook directly.
+:::
+
+## Overview
+
+The `useIntl` hook extends the standard [`react-intl` `useIntl`](https://formatjs.github.io/docs/react-intl/api/#useintl-hook) hook with additional custom formatters specific to ServiceTitan applications. It returns an `intl` object that contains all the formatting functions and locale information.
+
+## Basic Usage
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+
+function MyComponent() {
+    const intl = useIntl();
+
+    return (
+        <div>
+            <p>Current locale: {intl.locale}</p>
+            <p>Current timezone: {intl.timeZone}</p>
+            <p>Formatted date: {intl.formatDate(new Date())}</p>
+            <p>Formatted currency: {intl.formatCurrency(1234.56)}</p>
+        </div>
+    );
+}
+```
+
+## Available Functions
+
+The [`intl`](https://formatjs.github.io/docs/react-intl/api#intlshape) object returned by `useIntl` provides access to [all standard `Format.js` formatting functions](https://formatjs.github.io/docs/react-intl/api#intlshape), plus custom ServiceTitan formatters:
+
+### Standard Formatting Functions
+
+- [`formatDate()`](../dates.mdx) - Format dates
+- [`formatDisplayName()`](https://formatjs.github.io/docs/react-intl/api/#formatdisplayname) - Format display names for locales, currencies, etc.
+- [`formatList()`](https://formatjs.github.io/docs/react-intl/api/#formatlist) - Format lists of items
+- [`formatMessage()`](https://formatjs.github.io/docs/react-intl/api/#formatmessage) - Format messages with interpolation (note: translating messages is not yet configured within ServiceTitan)
+- [`formatNumber()`](../numbers.mdx) - Format numbers and currency
+- [`formatPlural()`](https://formatjs.github.io/docs/react-intl/api/#formatplural) - Handle pluralization
+- [`formatRelativeTime()`](https://formatjs.github.io/docs/react-intl/api/#formatrelativetime) - Format relative time (e.g., "2 hours ago")
+- [`formatTime()`](https://formatjs.github.io/docs/react-intl/api/#formattime) - Format times
+
+### Custom ServiceTitan Formatters
+
+- [`formatCurrency()`](../currency.mdx) - Format currency
+- [`formatPluralMessage()`](../plurals.mdx#formatpluralmessage) - Provide a number and messages associated with plural forms, and receive the appropriate message for the current locale and plural form
+
+### Locale Information
+
+- `currency` - Current currency code (e.g., 'USD')
+- `locale` - Current locale (e.g., 'en-US')
+- `timeZone` - Current time zone
+- `messages` - Available messages for the current locale (note: translating messages is not yet configured within ServiceTitan)
+
+## See Also
+
+For detailed information about specific formatting functions and their options, refer to the Format.js documentation:
+
+- [useIntl Hook Documentation](https://formatjs.github.io/docs/react-intl/api/#useintl-hook) which our `useIntl` is a wrapper around
+- [Format.JS Imperative API](https://formatjs.github.io/docs/react-intl/api/) contains all of the formatting functions available on the `intl` object

package/docs/intl/currency.mdx

@@ -0,0 +1,92 @@
+---
+title: Currency
+---
+
+import Tabs from '@theme/Tabs';
+
+Numbers can be formatted as currency either by using the `FormattedCurrency` component from `@servicetitan/intl`, or via the `formatCurrency()` function as part of the `intl` object, which can be retrieved via the [`useIntl()`](./API/use-intl.mdx) hook or through the [`IntlStore`](./API/intlstore.mdx) store.
+
+`FormattedCurrency` and `formatCurrency` will use the `currency` provided to the `IntlProvider` or `MobxIntlProvider` by default, but you can override this by providing a different currency code as a prop/option.
+
+## Usage
+
+### FormattedCurrency
+
+```
+props: NumberFormatOptions &
+  {
+    value: number,
+    children: (formattedNumber: string) => ReactElement,
+  }
+```
+
+```tsx
+import { FormattedCurrency } from '@servicetitan/intl';
+
+function CurrencyExample() {
+    return (
+        <>
+            <p>Currency defaults to currency provided to IntlProvider/MobxIntlProvider, or USD</p>
+            <FormattedCurrency value={1234.56} />
+            <p>Use currency prop to specify a different currency</p>
+            <FormattedCurrency value={1234.56} currency="EUR" />
+        </>
+    );
+};
+```
+
+### formatCurrency
+
+<Tabs
+    defaultValue="hooks"
+    values={[
+        { label: 'React hooks', value: 'hooks' },
+        { label: 'Store', value: 'store' },
+    ]}
+>
+<TabItem value="hooks">
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+
+function CurrencyExample() {
+    const intl = useIntl();
+
+    return (
+        <>
+            <p>Currency defaults to currency provided to IntlProvider/MobxIntlProvider, or USD</p>
+            {intl.formatCurrency(1234.56)}
+            <p>Use currency prop to specify a different currency</p>
+            {intl.formatCurrency(1234.56, { style: 'currency', currency: 'EUR' })}
+        </>
+    );
+};
+```
+
+</TabItem>
+<TabItem value="store">
+
+```tsx
+import { IntlStore } from '@servicetitan/intl/mobx';
+
+@injectable()
+class CurrencyExampleStore {
+    constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
+
+    formatCurrency() {
+        return [
+            // Currency defaults to currency provided to IntlProvider/MobxIntlProvider, or USD
+            this.intlStore.intl.formatCurrency(1234.56),
+            // Use currency prop to specify a different currency
+            this.intlStore.intl.formatCurrency(1234.56, { style: 'currency', currency: 'EUR' }),
+        ];
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### Further customization
+
+If you need to customize the formatting further, `FormattedCurrency` and `formatCurrency` accept the same options as the native `Intl.NumberFormat` API, but `style` is always set to `"currency"`, and `currency` defaults to `currency` from the `IntlProvider`/`MobxIntlProvider`. See [`Intl.NumberFormat` for more information about those options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

package/docs/intl/dates.mdx

@@ -0,0 +1,92 @@
+---
+title: Dates
+---
+
+import Tabs from '@theme/Tabs';
+
+Dates can be formatted either by using the [`FormattedDate`](#formatteddate) component from `@servicetitan/intl`, or via the [`formatDate`](#formatdate) function as part of the `intl` object, which can be retrieved via the [`useIntl`](./API/use-intl.mdx) hook or through the [`IntlStore`](./API/intlstore.mdx) store.
+
+:::note
+`FormattedDate` is a wrapper around `react-intl`'s `FormattedDate` component, but defaults the `format` to *short*. Make sure you import it from `@servicetitan/intl`, not `react-intl`.
+:::
+
+## Available Formats
+
+The following standard ServiceTitan formats are available to use as part of date formatting. The *short* format is used if none is specified. The formats follow the "Dates and time" section of the ["Style Guide - General guidelines"](https://servicetitan.atlassian.net/wiki/spaces/DTW/pages/262701057/Style+Guide+-+General+guidelines#Dates-and-time).
+
+- `short` results in `09/02/25` (default if no format is specified)
+- `long` results in `September 2, 2025`
+
+## Usage
+
+### FormattedDate
+
+```tsx
+import { FormattedDate } from '@servicetitan/intl';
+
+function DateExample() {
+    const date = new Date('2025-09-02');
+
+    return (
+        <div>
+            <FormattedDate value={date} /> {/* "09/02/25" */}
+            <FormattedDate value={date} format="short" /> {/* "09/02/25" */}
+            <FormattedDate value={date} format="long" /> {/* "September 2, 2025" */}
+        </div>
+    );
+}
+```
+
+### formatDate
+
+<Tabs
+    defaultValue="hooks"
+    values={[
+        { label: 'React hooks', value: 'hooks' },
+        { label: 'Store', value: 'store' },
+    ]}
+>
+<TabItem value="hooks">
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+
+function DateExample() {
+    const intl = useIntl();
+
+    return (
+        <>
+            {intl.formatDate(new Date())} {/* "09/02/25" */}
+            {intl.formatDate(new Date(), { format: 'short' })} {/* "09/02/25" */}
+            {intl.formatDate(new Date(), { format: 'long' })} {/* "September 2, 2025" */}
+        </>
+    );
+}
+```
+
+</TabItem>
+<TabItem value="store">
+
+```tsx
+import { IntlStore } from '@servicetitan/intl/mobx';
+
+@injectable()
+class MyStore {
+    constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
+
+    formatDate() {
+        return [
+            this.intlStore.intl.formatDate(new Date()), // 09/02/25
+            this.intlStore.intl.formatDate(new Date(), { format: 'short' }), // 09/02/25
+            this.intlStore.intl.formatDate(new Date(), { format: 'long' }), // September 2, 2025
+        ];
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### Further customization
+
+If you need to customize the formatting further, `FormattedDate` and `formatDate` accept the same options as the native `Intl.DateTimeFormat` API. See [`Intl.DateTimeFormat` for more information about those options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), and see Format.js [`FormattedDate` documentation](https://formatjs.github.io/docs/react-intl/components/#formatteddate) or [`formatDate` documentation](https://formatjs.github.io/docs/react-intl/api/#formatdate) for more information on how to use them.

package/docs/intl/index.mdx

@@ -0,0 +1,120 @@
+---
+title: Intl (Internationalization)
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+`@servicetitan/intl` is a solution for helping setup internationalization in React projects (with optional MobX store) that is a light wrapper around [`Format.js`](https://formatjs.github.io/) and [`react-intl`](https://formatjs.github.io/docs/react-intl/). This library creates an internationalization API with a provided *locale*, *timeZone*, and *currency*, and provides that API to `react-intl` to be used within React context, as well as a store to be used within MobX.
+
+## Setup
+
+This project should be installed as one of your project's `dependencies`:
+
+```bash
+npm install @servicetitan/intl
+```
+
+This library has `peerDependencies` for:
+-   `"@servicetitan/react-ioc": ">=22.0.0"`
+-   `"react-intl": ">=7.1.11"`
+
+### Provider
+
+Wrap your application with [`<IntlProvider>`](./API/intl-provider.mdx) or [`<MobxIntlProvider>`](./API/mobx-intl-provider.mdx), providing `locale`, `timeZone`, and `currency` through the `config` prop:
+
+#### IntlProvider
+
+[`IntlProvider`](./API/intl-provider.mdx) is the most basic provider, and should be used if you do not use Mobx.
+
+```tsx
+import { IntlProvider } from '@servicetitan/intl';
+...
+const locale = 'en-US';
+const timeZone = 'America/Los_Angeles';
+const currency = 'USD';
+const intlConfig: IntlConfig = useMemo(() =>
+    ({ currency, locale, timeZone }), [currency, locale, timeZone]);
+return (
+    <IntlProvider config={intlConfig}>
+        <App />
+    </IntlProvider>
+);
+```
+
+#### MobxIntlProvider
+
+[`MobxIntlProvider`](./API/mobx-intl-provider.mdx) should be used if you are using Mobx, as it provides the [`IntlStore`](./API/intlstore.mdx) to access internationalization features in stores.
+
+```tsx
+import { MobxIntlProvider } from '@servicetitan/intl/mobx';
+...
+const locale = 'en-US';
+const timeZone = 'America/Los_Angeles';
+const currency = 'USD';
+const intlConfig: IntlConfig = useMemo(() =>
+    ({ currency, locale, timeZone }), [currency, locale, timeZone]);
+return (
+    <MobxIntlProvider config={intlConfig}>
+        <App />
+    </MobxIntlProvider>
+);
+```
+
+:::note
+If you are doing work in the monolith, `MobxIntlProvider` has already been implemented for you, providing the `currency`, `locale`, and `timeZone` from available Business Units, Culture, Features, and Tenant stores. If you are instead implementing an MFE but would use the same monolith data, you should use the [`IntlProvider` from `@servicetitan/application-data/tanstack/intl`](/docs/frontend/application-data/intl-provider), which will likewise provide the `currency`, `locale`, and `timeZone` for you via monolith data stores.
+:::
+
+## Features
+
+`Format.js` and `react-intl` provide many components and utilities for handling internationalization, including caching and wrapping most of the [native `Intl` formatters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl). The following APIs are are particularly useful to us at this stage:
+
+- [Formatting currency](./currency.mdx)
+- [Formatting dates](./dates.mdx)
+- [Formatting numbers](./numbers.mdx)
+- [Formatting times](./times.mdx)
+- [Plurals](./plurals.mdx)
+
+:::note
+Translating messages is not yet supported, as we currently have no need for it. But using `@servicetitan/intl` ensures the framework is in place for when we do begin translating messages.
+:::
+
+## React Hooks vs Store
+
+We recommend using the hooks API to access the internationalization API for most cases, as it is preferred to do formatting in the "view" layer of your application vs the "data" layer.
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+
+function MyComponent() {
+    const intl = useIntl();
+
+    return (
+        <div>
+            <p>Formatted date: {intl.formatDate(new Date())}</p>
+            <p>Formatted currency: {intl.formatCurrency(1234.56)}</p>
+        </div>
+    );
+}
+```
+
+However, if you have the need to access the internationalization API in MobX stores, you must use the wrapper component [`<MobxStoreProvider>`](./API/mobx-intl-provider.mdx) instead of `<IntlProvider>`, and you can use the provided [`IntlStore`](./API/intlstore.mdx) to access the same functionality.
+
+```tsx
+import { inject, injectable } from '@servicetitan/react-ioc';
+import { IntlStore } from '@servicetitan/intl/mobx';
+
+@injectable()
+export class UserService {
+    constructor(@inject(IntlStore) private intlStore: IntlStore) {}
+
+    formatUserData(user: User) {
+        const intl = this.intlStore.intl;
+
+        return {
+            joinDate: intl.formatDate(user.joinDate),
+            balance: intl.formatCurrency(user.balance)
+        };
+    }
+}
+```

package/docs/intl/numbers.mdx

@@ -0,0 +1,79 @@
+---
+title: Numbers
+---
+
+import Tabs from '@theme/Tabs';
+
+Numbers can be formatted either by using the `FormattedNumber` component from `react-intl`, or via the `formatNumber()` function as part of the `intl` object, which can be retrieved via the [`useIntl()`](./API/use-intl.mdx) hook or through the [`IntlStore`](./API/intlstore.mdx) store.
+
+## Usage
+
+### FormattedNumber
+
+```tsx
+import { FormattedNumber } from 'react-intl';
+
+function NumberExample() {
+    return (
+        <>
+            <FormattedNumber value={0.75} style="percent" /> {/* "75%" */}
+            <FormattedNumber value={1234.567} maximumFractionDigits={2} /> {/* "1,234.57" */}
+        </>
+    );
+}
+```
+
+### formatNumber
+
+<Tabs
+    defaultValue="hooks"
+    values={[
+        { label: 'React hooks', value: 'hooks' },
+        { label: 'Store', value: 'store' },
+    ]}
+>
+<TabItem value="hooks">
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+
+function NumberExample() {
+    const intl = useIntl();
+
+    return (
+        <>
+            <p>{intl.formatNumber(0.75, { style: 'percent' })}</p> {/* "75%" */}
+            <p>{intl.formatNumber(1234.567, { maximumFractionDigits: 2 })}</p> {/* "1,234.57" */}
+        </>
+    );
+}
+```
+
+</TabItem>
+<TabItem value="store">
+
+```tsx
+import { inject, injectable } from '@servicetitan/react-ioc';
+import { IntlStore } from '@servicetitan/intl/mobx';
+
+@injectable()
+class ReportService {
+    constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
+
+    formatReportData() {
+        const intl = this.intlStore.intl;
+
+        return [
+            intl.formatNumber(0.75, { style: 'percent' }), // "75%"
+            intl.formatNumber(1234.567, { maximumFractionDigits: 2 }), // "1,234.57"
+        ];
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### Further customization
+
+If you need to customize the formatting further, `FormattedNumber` and `formatNumber` accept the same options as the native `Intl.NumberFormat` API. See [`Intl.NumberFormat` for more information about those options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), and see Format.js [`FormattedNumber` documentation](https://formatjs.github.io/docs/react-intl/components/#formattednumber) or [`formatNumber` documentation](https://formatjs.github.io/docs/react-intl/api/#formatnumber) for more information on how to use them.

package/docs/intl/plurals.mdx

@@ -0,0 +1,75 @@
+---
+title: Plurals
+---
+
+import Tabs from '@theme/Tabs';
+
+Plurals can be formatted by using the `FormattedPlural` component from `react-intl`, or via the `formatPluralMessage()` function as part of the `intl` object, which can be retrieved via the [`useIntl()`](./API/use-intl.mdx) hook or through the [`IntlStore`](./API/intlstore.mdx) store.
+
+[`FormattedPlural`](#formattedplural) and [`formatPluralMessage()`](#formatpluralmessage) are only meant to be used with one language. Since ServiceTitan currently only supports English, and [English only uses "one" and "other" forms](https://www.unicode.org/cldr/charts/42/supplemental/language_plural_rules.html#en), those will be the only forms you will use at this time.
+
+:::note
+When ServiceTitan eventually supports multiple languages, the library will be updated to support `FormattedMessage` and `formatMessage`.
+:::
+
+## Usage
+
+### FormattedPlural
+
+See Format.js [FormattedPlural documentation](https://formatjs.github.io/docs/react-intl/components/#formattedplural) for more information.
+
+```tsx
+import { FormattedPlural } from 'react-intl';
+...
+<FormattedPlural value={5} one="item" other="items" />
+```
+
+### formatPluralMessage
+
+`formatPluralMessage` is a custom formatter which accepts a number value, an object of messages keyed by plural forms, and [`Intl.PluralRules` options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/PluralRules#options). It returns the message corresponding to the plural form of the value for the current locale.
+
+| Name       | Type                  | Description                                          |
+| :--------- | :-------------------- | :--------------------------------------------------- |
+| `value`    | `number`              | The number value to determine the plural form.       |
+| `messages` | `PluralMessages`      | An object containing messages keyed by plural forms.  |
+| `options?`  | `FormatPluralOptions` | [Options to customize the pluralization behavior](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/PluralRules#options). Defaults to using "cardinal".
+
+<Tabs
+    defaultValue="hooks"
+    values={[
+        { label: 'React hooks', value: 'hooks' },
+        { label: 'Store', value: 'store' },
+    ]}
+>
+<TabItem value="hooks">
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+...
+const intl = useIntl();
+...
+intl.formatPluralMessage(1, { one: 'item', other: 'items' });
+// Results in "item"
+intl.formatPluralMessage(3, { one: 'item', other: 'items' });
+// Results in "items"
+```
+
+</TabItem>
+<TabItem value="store">
+
+```tsx
+import { IntlStore } from '@servicetitan/intl/mobx';
+...
+@injectable()
+class MyStore {
+    constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
+    ...
+    this.intlStore.intl.formatPluralMessage(1, { one: 'item', other: 'items' });
+    // Results in "item"
+    this.intlStore.intl.formatPluralMessage(3, { one: 'item', other: 'items' });
+    // Results in "items"
+}
+```
+
+</TabItem>
+</Tabs>

package/docs/intl/times.mdx

@@ -0,0 +1,93 @@
+---
+title: Times
+---
+
+import Tabs from '@theme/Tabs';
+
+Times can be formatted either by using the [`FormattedTime`](#formattedtime) component from `react-intl`, or via the [`formatTime`](#formattime) function as part of the `intl` object, which can be retrieved via the [`useIntl`](./API/use-intl.mdx) hook or through the [`IntlStore`](./API/intlstore.mdx) store.
+
+## Available Formats
+
+The following standard ServiceTitan formats are available to use as part of time formatting. The *short* format is used if none is specified. The formats follow the "Dates and time" section of the ["Style Guide - General guidelines"](https://servicetitan.atlassian.net/wiki/spaces/DTW/pages/262701057/Style+Guide+-+General+guidelines#Dates-and-time).
+
+- `short` results in `4:00 PM` (default if no format is specified)
+- `medium` results in `4:00:00 PM`
+
+## Usage
+
+### FormattedTime
+
+```tsx
+import { FormattedTime } from 'react-intl';
+
+function TimeExample() {
+    const time = new Date();
+
+    return (
+        <>
+            <FormattedTime value={time} /> {/* "4:00 PM" */}
+            <FormattedTime value={time} format="short" /> {/* "4:00 PM" */}
+            <FormattedTime value={time} format="medium" /> {/* "4:00:00 PM" */}
+        </>
+    );
+}
+```
+
+### formatTime
+
+<Tabs
+    defaultValue="hooks"
+    values={[
+        { label: 'React hooks', value: 'hooks' },
+        { label: 'Store', value: 'store' },
+    ]}
+>
+<TabItem value="hooks">
+
+```tsx
+import { useIntl } from '@servicetitan/intl';
+
+function TimeExample() {
+    const intl = useIntl();
+    const time = new Date();
+
+    return (
+        <>
+            <p>{intl.formatTime(time)}</p> {/* "4:00 PM" */}
+            <p>{intl.formatTime(time, { format: 'short' })}</p> {/* "4:00 PM" */}
+            <p>{intl.formatTime(time, { format: 'medium' })}</p> {/* "4:00:00 PM" */}
+        </>
+    );
+}
+```
+
+</TabItem>
+<TabItem value="store">
+
+```tsx
+import { inject, injectable } from '@servicetitan/react-ioc';
+import { IntlStore } from '@servicetitan/intl/mobx';
+
+@injectable()
+class ScheduleService {
+    constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
+
+    formatTime() {
+        const intl = this.intlStore.intl;
+        const time = new Date();
+
+        return [
+            intl.formatTime(time), // "4:00 PM"
+            intl.formatTime(time, { format: 'short' }), // "4:00 PM"
+            intl.formatTime(time, { format: 'medium' }), // "4:00:00 PM"
+        ];
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### Further customization
+
+If you need to customize the formatting further, `FormattedTime` and `formatTime` accept the same options as the native `Intl.DateTimeFormat` API. See [`Intl.DateTimeFormat` for more information about those options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), and see Format.js [`FormattedTime` documentation](https://formatjs.github.io/docs/react-intl/components/#formattedtime) or [`formatTime` documentation](https://formatjs.github.io/docs/react-intl/api/#formattime) for more information on how to use them.

package/docs/tanstack-query-mobx.mdx

@@ -4,7 +4,7 @@ title: TanStack Query MobX Integration
 
 import {
     AppExample, HasInitialDataExample, NoInitialDataExample, PageExample, StaleTime0Example, StaleTime10MinutesExample
-} from '@servicetitan/tanstack-query-mobx/dist/demo';
+} from '@servicetitan/tanstack-query-mobx/demo';
 
 import { CodeDemo } from '@site/src/components/code-demo';
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/docs-anvil-uikit-contrib",
-    "version": "32.4.1",
+    "version": "32.6.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -16,5 +16,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "5bc4f3c9c8a181df124fdc614964757e5490ea9b"
+    "gitHead": "91ddc9aa77c756301ac1b429a71e2c317b850ce7"
 }