@servicetitan/docs-anvil-uikit-contrib 32.6.1 → 33.0.0

package/docs/intl/API/intlstore.mdx

@@ -10,7 +10,7 @@ It is preferred to use the [`useIntl` hook](./use-intl.mdx) instead of directly
 
 ## 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).
+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 [`MobxIntlProvider`](./mobx-intl-provider.mdx).
 
 ## Basic Usage
 

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

@@ -51,7 +51,7 @@ The [`intl`](https://formatjs.github.io/docs/react-intl/api#intlshape) object re
 - [`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
+### Properties
 
 - `currency` - Current currency code (e.g., 'USD')
 - `locale` - Current locale (e.g., 'en-US')

package/docs/intl/currency.mdx

@@ -2,6 +2,10 @@
 title: Currency
 ---
 
+import {
+    FormattedCurrencyMiniDemo
+} from '@servicetitan/intl/demo';
+import { DemoExample } from '@site/src/components/code-demo';
 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.
@@ -90,3 +94,7 @@ class CurrencyExampleStore {
 ### 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).
+
+### Demo
+
+<DemoExample example={FormattedCurrencyMiniDemo} />

package/docs/intl/dates.mdx

@@ -2,6 +2,10 @@
 title: Dates
 ---
 
+import {
+    FormattedDateMiniDemo
+} from '@servicetitan/intl/demo';
+import { DemoExample } from '@site/src/components/code-demo';
 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.
@@ -14,8 +18,8 @@ Dates can be formatted either by using the [`FormattedDate`](#formatteddate) com
 
 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`
+- `short` results in `09/02/2025` for 'en-US' locale (default if no format is specified)
+- `long` results in `September 2, 2025` for 'en-US' locale
 
 ## Usage
 
@@ -29,8 +33,8 @@ function DateExample() {
 
     return (
         <div>
-            <FormattedDate value={date} /> {/* "09/02/25" */}
-            <FormattedDate value={date} format="short" /> {/* "09/02/25" */}
+            <FormattedDate value={date} /> {/* "09/02/2025" */}
+            <FormattedDate value={date} format="short" /> {/* "09/02/2025" */}
             <FormattedDate value={date} format="long" /> {/* "September 2, 2025" */}
         </div>
     );
@@ -53,12 +57,13 @@ import { useIntl } from '@servicetitan/intl';
 
 function DateExample() {
     const intl = useIntl();
+    const date = new Date('2025-09-02');
 
     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" */}
+            {intl.formatDate(date)} {/* "09/02/2025" */}
+            {intl.formatDate(date, { format: 'short' })} {/* "09/02/2025" */}
+            {intl.formatDate(date, { format: 'long' })} {/* "September 2, 2025" */}
         </>
     );
 }
@@ -75,10 +80,11 @@ class MyStore {
     constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
 
     formatDate() {
+        const date = new Date('2025-09-02');
         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
+            this.intlStore.intl.formatDate(date), // 09/02/2025
+            this.intlStore.intl.formatDate(date, { format: 'short' }), // 09/02/2025
+            this.intlStore.intl.formatDate(date, { format: 'long' }), // September 2, 2025
         ];
     }
 }
@@ -90,3 +96,7 @@ class MyStore {
 ### 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.
+
+### Demo
+
+<DemoExample example={FormattedDateMiniDemo} />

package/docs/intl/numbers.mdx

@@ -2,16 +2,20 @@
 title: Numbers
 ---
 
+import {
+    FormattedNumberMiniDemo
+} from '@servicetitan/intl/demo';
+import { DemoExample } from '@site/src/components/code-demo';
 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.
+Numbers can be formatted either by using the `FormattedNumber` component from `@servicetitan/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';
+import { FormattedNumber } from '@servicetitan/intl';
 
 function NumberExample() {
     return (
@@ -77,3 +81,7 @@ class ReportService {
 ### 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.
+
+### Demo
+
+<DemoExample example={FormattedNumberMiniDemo} />

package/docs/intl/plurals.mdx

@@ -2,9 +2,13 @@
 title: Plurals
 ---
 
+import {
+    FormattedPluralMiniDemo
+} from '@servicetitan/intl/demo';
+import { DemoExample } from '@site/src/components/code-demo';
 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.
+Plurals can be formatted by using the `FormattedPlural` component from `@servicetitan/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.
 
@@ -19,7 +23,7 @@ When ServiceTitan eventually supports multiple languages, the library will be up
 See Format.js [FormattedPlural documentation](https://formatjs.github.io/docs/react-intl/components/#formattedplural) for more information.
 
 ```tsx
-import { FormattedPlural } from 'react-intl';
+import { FormattedPlural } from '@servicetitan/intl';
 ...
 <FormattedPlural value={5} one="item" other="items" />
 ```
@@ -73,3 +77,8 @@ class MyStore {
 
 </TabItem>
 </Tabs>
+
+
+### Demo
+
+<DemoExample example={FormattedPluralMiniDemo} />

package/docs/intl/times.mdx

@@ -2,32 +2,46 @@
 title: Times
 ---
 
+import {
+    FormattedTimeMiniDemo
+} from '@servicetitan/intl/demo';
+import { DemoExample } from '@site/src/components/code-demo';
 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.
+Times can be formatted either by using the [`FormattedTime`](#formattedtime) component from `@servicetitan/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).
+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 "Date and time" section of the [Anvil2 Content documentation](https://anvil.servicetitan.com/web/content/date-and-time).
+
+:::note
+The example results that follow use a locale of 'en-US' and time zone of 'America/New_York'
+:::
 
 - `short` results in `4:00 PM` (default if no format is specified)
+- `shortTimezone` results in `4:00 PM EDT`
+- `utc` results in `08:00 PM UTC` (forces UTC timezone and adds leading zero)
 - `medium` results in `4:00:00 PM`
+- `mediumTimeZone` results in `4:00:00 PM EDT`
 
 ## Usage
 
 ### FormattedTime
 
 ```tsx
-import { FormattedTime } from 'react-intl';
+import { FormattedTime } from '@servicetitan/intl';
 
 function TimeExample() {
-    const time = new Date();
+    const time = new Date('2025-09-02 16:00:00');
 
     return (
         <>
             <FormattedTime value={time} /> {/* "4:00 PM" */}
             <FormattedTime value={time} format="short" /> {/* "4:00 PM" */}
+            <FormattedTime value={time} format="shortTimeZone" /> {/* "4:00 PM EDT" */}
+            <FormattedTime value={time} format="utc" /> {/* "08:00 PM" UTC*/}
             <FormattedTime value={time} format="medium" /> {/* "4:00:00 PM" */}
+            <FormattedTime value={time} format="mediumTimeZone" /> {/* "4:00:00 PM EDT" */}
         </>
     );
 }
@@ -49,7 +63,7 @@ import { useIntl } from '@servicetitan/intl';
 
 function TimeExample() {
     const intl = useIntl();
-    const time = new Date();
+    const time = new Date('2025-09-02 16:00:00');
 
     return (
         <>
@@ -74,7 +88,7 @@ class ScheduleService {
 
     formatTime() {
         const intl = this.intlStore.intl;
-        const time = new Date();
+        const time = new Date('2025-09-02 16:00:00');
 
         return [
             intl.formatTime(time), // "4:00 PM"
@@ -91,3 +105,7 @@ class ScheduleService {
 ### 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.
+
+### Demo
+
+<DemoExample example={FormattedTimeMiniDemo} />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/docs-anvil-uikit-contrib",
-    "version": "32.6.1",
+    "version": "33.0.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -16,5 +16,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "0a1b8d2487f81f39aa9f500b514525865a02376a"
+    "gitHead": "73576ba8cbadb851c04aacc9c2fd295be3678d29"
 }