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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/docs/intl/API/intlstore.mdx +1 -1
  2. package/docs/intl/API/mobx-intl-provider.mdx +27 -0
  3. package/docs/intl/API/use-intl.mdx +7 -5
  4. package/docs/intl/currency.mdx +92 -0
  5. package/docs/intl/dates.mdx +42 -38
  6. package/docs/intl/index.mdx +46 -12
  7. package/docs/intl/numbers.mdx +34 -19
  8. package/docs/intl/times.mdx +93 -0
  9. package/docs/testing-library/index.mdx +0 -2
  10. package/package.json +2 -2
  11. package/docs/intl/API/intl-store-provider.mdx +0 -23
package/docs/intl/API/intlstore.mdx CHANGED
@@ -10,7 +10,7 @@ It is preferred to use the [`useIntl` hook](./use-intl.mdx) instead of directly
10
10
 
11
11
  ## Overview
12
12
 
13
- 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 a combination of [`IntlProvider`](./intl-provider.mdx) and [`IntlStoreProvider`](./intl-store-provider.mdx), and is updated when `IntlProvider`'s props change.
13
+ 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).
14
14
 
15
15
  ## Basic Usage
16
16
 
package/docs/intl/API/mobx-intl-provider.mdx ADDED
@@ -0,0 +1,27 @@
1
+ ---
2
+ title: MobxIntlProvider
3
+ ---
4
+
5
+ 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>`.
6
+
7
+ ```tsx
8
+ import { useMemo } from 'react';
9
+ import { IntlConfig } from '@servicetitan/intl';
10
+ import { MobxIntlProvider } from '@servicetitan/intl/mobx';
11
+
12
+ const ExampleApp = () => {
13
+ const currency = 'USD';
14
+ const locale = 'en-US';
15
+ const timeZone = 'America/Los_Angeles';
16
+ const intlConfig: IntlConfig = useMemo(
17
+ () => ({ currency, locale, timeZone }),
18
+ [currency, locale, timeZone]
19
+ );
20
+
21
+ return (
22
+ <MobxIntlProvider config={intlConfig}>
23
+ <App />
24
+ </MobxIntlProvider>
25
+ );
26
+ };
27
+ ```
package/docs/intl/API/use-intl.mdx CHANGED
@@ -5,7 +5,7 @@ title: useIntl
5
5
  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.
6
6
 
7
7
  :::note
8
- If using [`react-intl` Formatted components](https://formatjs.github.io/docs/react-intl/components)--such as those described in [Dates and Time](../dates.mdx), [Numbers and Currency](../numbers.mdx), and [Plurals](../plurals.mdx) documentation--you do not need to use the `useIntl` hook directly.
8
+ 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.
9
9
  :::
10
10
 
11
11
  ## Overview
@@ -24,8 +24,8 @@ function MyComponent() {
24
24
  <div>
25
25
  <p>Current locale: {intl.locale}</p>
26
26
  <p>Current timezone: {intl.timeZone}</p>
27
- <p>Formatted date: {intl.formatDate(new Date(), { format: 'short' })}</p>
28
- <p>Formatted currency: {intl.formatNumber(1234.56, { style: 'currency', currency: 'USD' })}</p>
27
+ <p>Formatted date: {intl.formatDate(new Date())}</p>
28
+ <p>Formatted currency: {intl.formatCurrency(1234.56)}</p>
29
29
  </div>
30
30
  );
31
31
  }
@@ -37,21 +37,23 @@ The [`intl`](https://formatjs.github.io/docs/react-intl/api#intlshape) object re
37
37
 
38
38
  ### Standard Formatting Functions
39
39
 
40
- - [`formatDate()`](../dates.mdx) - Format dates and times
40
+ - [`formatDate()`](../dates.mdx) - Format dates
41
41
  - [`formatDisplayName()`](https://formatjs.github.io/docs/react-intl/api/#formatdisplayname) - Format display names for locales, currencies, etc.
42
42
  - [`formatList()`](https://formatjs.github.io/docs/react-intl/api/#formatlist) - Format lists of items
43
43
  - [`formatMessage()`](https://formatjs.github.io/docs/react-intl/api/#formatmessage) - Format messages with interpolation (note: translating messages is not yet configured within ServiceTitan)
44
44
  - [`formatNumber()`](../numbers.mdx) - Format numbers and currency
45
45
  - [`formatPlural()`](https://formatjs.github.io/docs/react-intl/api/#formatplural) - Handle pluralization
46
46
  - [`formatRelativeTime()`](https://formatjs.github.io/docs/react-intl/api/#formatrelativetime) - Format relative time (e.g., "2 hours ago")
47
- - [`formatTime()`](https://formatjs.github.io/docs/react-intl/api/#formattime) - Format time values
47
+ - [`formatTime()`](https://formatjs.github.io/docs/react-intl/api/#formattime) - Format times
48
48
 
49
49
  ### Custom ServiceTitan Formatters
50
50
 
51
+ - [`formatCurrency()`](../currency.mdx) - Format currency
51
52
  - [`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
52
53
 
53
54
  ### Locale Information
54
55
 
56
+ - `currency` - Current currency code (e.g., 'USD')
55
57
  - `locale` - Current locale (e.g., 'en-US')
56
58
  - `timeZone` - Current time zone
57
59
  - `messages` - Available messages for the current locale (note: translating messages is not yet configured within ServiceTitan)
package/docs/intl/currency.mdx ADDED
@@ -0,0 +1,92 @@
1
+ ---
2
+ title: Currency
3
+ ---
4
+
5
+ import Tabs from '@theme/Tabs';
6
+
7
+ 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.
8
+
9
+ `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.
10
+
11
+ ## Usage
12
+
13
+ ### FormattedCurrency
14
+
15
+ ```
16
+ props: NumberFormatOptions &
17
+ {
18
+ value: number,
19
+ children: (formattedNumber: string) => ReactElement,
20
+ }
21
+ ```
22
+
23
+ ```tsx
24
+ import { FormattedCurrency } from '@servicetitan/intl';
25
+
26
+ function CurrencyExample() {
27
+ return (
28
+ <>
29
+ <p>Currency defaults to currency provided to IntlProvider/MobxIntlProvider, or USD</p>
30
+ <FormattedCurrency value={1234.56} />
31
+ <p>Use currency prop to specify a different currency</p>
32
+ <FormattedCurrency value={1234.56} currency="EUR" />
33
+ </>
34
+ );
35
+ };
36
+ ```
37
+
38
+ ### formatCurrency
39
+
40
+ <Tabs
41
+ defaultValue="hooks"
42
+ values={[
43
+ { label: 'React hooks', value: 'hooks' },
44
+ { label: 'Store', value: 'store' },
45
+ ]}
46
+ >
47
+ <TabItem value="hooks">
48
+
49
+ ```tsx
50
+ import { useIntl } from '@servicetitan/intl';
51
+
52
+ function CurrencyExample() {
53
+ const intl = useIntl();
54
+
55
+ return (
56
+ <>
57
+ <p>Currency defaults to currency provided to IntlProvider/MobxIntlProvider, or USD</p>
58
+ {intl.formatCurrency(1234.56)}
59
+ <p>Use currency prop to specify a different currency</p>
60
+ {intl.formatCurrency(1234.56, { style: 'currency', currency: 'EUR' })}
61
+ </>
62
+ );
63
+ };
64
+ ```
65
+
66
+ </TabItem>
67
+ <TabItem value="store">
68
+
69
+ ```tsx
70
+ import { IntlStore } from '@servicetitan/intl/mobx';
71
+
72
+ @injectable()
73
+ class CurrencyExampleStore {
74
+ constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
75
+
76
+ formatCurrency() {
77
+ return [
78
+ // Currency defaults to currency provided to IntlProvider/MobxIntlProvider, or USD
79
+ this.intlStore.intl.formatCurrency(1234.56),
80
+ // Use currency prop to specify a different currency
81
+ this.intlStore.intl.formatCurrency(1234.56, { style: 'currency', currency: 'EUR' }),
82
+ ];
83
+ }
84
+ }
85
+ ```
86
+
87
+ </TabItem>
88
+ </Tabs>
89
+
90
+ ### Further customization
91
+
92
+ 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 CHANGED
@@ -1,35 +1,40 @@
1
1
  ---
2
- title: Dates and Times
2
+ title: Dates
3
3
  ---
4
4
 
5
5
  import Tabs from '@theme/Tabs';
6
6
 
7
- Dates and times can be formatted either by using the [`FormattedDate`](#formatteddate) component from `react-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.
7
+ 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.
8
+
9
+ :::note
10
+ `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`.
11
+ :::
8
12
 
9
13
  ## Available Formats
10
14
 
11
- The following standard ServiceTitan formats are available to use as part of date/time formatting. 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).
15
+ 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).
12
16
 
13
- - `short` results in `09/02/25`
17
+ - `short` results in `09/02/25` (default if no format is specified)
14
18
  - `long` results in `September 2, 2025`
15
- - `timeShort` results in `4:00 PM`
16
- - `timeMedium` results in `4:00:00 PM`
17
19
 
18
20
  ## Usage
19
21
 
20
22
  ### FormattedDate
21
23
 
22
24
  ```tsx
23
- import { FormattedDate } from 'react-intl';
24
- ...
25
- <FormattedDate value={new Date()} format="short" />
26
- // Results in 09/02/25
27
- <FormattedDate value={new Date()} format="long" />
28
- // Results in September 2, 2025
29
- <FormattedDate value={new Date()} format="timeShort" />
30
- // Results in 4:00 PM
31
- <FormattedDate value={new Date()} format="timeMedium" />
32
- // Results in 4:00:00 PM
25
+ import { FormattedDate } from '@servicetitan/intl';
26
+
27
+ function DateExample() {
28
+ const date = new Date('2025-09-02');
29
+
30
+ return (
31
+ <div>
32
+ <FormattedDate value={date} /> {/* "09/02/25" */}
33
+ <FormattedDate value={date} format="short" /> {/* "09/02/25" */}
34
+ <FormattedDate value={date} format="long" /> {/* "September 2, 2025" */}
35
+ </div>
36
+ );
37
+ }
33
38
  ```
34
39
 
35
40
  ### formatDate
@@ -45,17 +50,18 @@ import { FormattedDate } from 'react-intl';
45
50
 
46
51
  ```tsx
47
52
  import { useIntl } from '@servicetitan/intl';
48
- ...
49
- const intl = useIntl();
50
- ...
51
- intl.formatDate(new Date(), { format: 'short' });
52
- // Results in 09/02/25
53
- intl.formatDate(new Date(), { format: 'long' });
54
- // Results in September 2, 2025
55
- intl.formatDate(new Date(), { format: 'timeShort' });
56
- // Results in 4:00 PM
57
- intl.formatDate(new Date(), { format: 'timeMedium' });
58
- // Results in 4:00:00 PM
53
+
54
+ function DateExample() {
55
+ const intl = useIntl();
56
+
57
+ return (
58
+ <>
59
+ {intl.formatDate(new Date())} {/* "09/02/25" */}
60
+ {intl.formatDate(new Date(), { format: 'short' })} {/* "09/02/25" */}
61
+ {intl.formatDate(new Date(), { format: 'long' })} {/* "September 2, 2025" */}
62
+ </>
63
+ );
64
+ }
59
65
  ```
60
66
 
61
67
  </TabItem>
@@ -63,20 +69,18 @@ intl.formatDate(new Date(), { format: 'timeMedium' });
63
69
 
64
70
  ```tsx
65
71
  import { IntlStore } from '@servicetitan/intl/mobx';
66
- ...
72
+
67
73
  @injectable()
68
74
  class MyStore {
69
75
  constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
70
- ...
71
- this.intlStore.intl.formatDate(new Date(), { format: 'short' });
72
- // Results in 09/02/25
73
- this.intlStore.intl.formatDate(new Date(), { format: 'long' });
74
- // Results in September 2, 2025
75
- this.intlStore.intl.formatDate(new Date(), { format: 'timeShort' });
76
- // Results in 4:00 PM
77
- this.intlStore.intl.formatDate(new Date(), { format: 'timeMedium' });
78
- // Results in 4:00:00 PM
79
- ...
76
+
77
+ formatDate() {
78
+ return [
79
+ this.intlStore.intl.formatDate(new Date()), // 09/02/25
80
+ this.intlStore.intl.formatDate(new Date(), { format: 'short' }), // 09/02/25
81
+ this.intlStore.intl.formatDate(new Date(), { format: 'long' }), // September 2, 2025
82
+ ];
83
+ }
80
84
  }
81
85
  ```
82
86
 
package/docs/intl/index.mdx CHANGED
@@ -2,7 +2,10 @@
2
2
  title: Intl (Internationalization)
3
3
  ---
4
4
 
5
- `@servicetitan/intl` is a solution for helping setup internationalization in React and MobX projects 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* and *timeZone*, and provides that API to `react-intl` to be used within React context, as well as a store to be used within MobX.
5
+ import Tabs from '@theme/Tabs';
6
+ import TabItem from '@theme/TabItem';
7
+
8
+ `@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.
6
9
 
7
10
  ## Setup
8
11
 
@@ -16,16 +19,22 @@ This library has `peerDependencies` for:
16
19
  - `"@servicetitan/react-ioc": ">=22.0.0"`
17
20
  - `"react-intl": ">=7.1.11"`
18
21
 
19
- ### IntlProvider
22
+ ### Provider
23
+
24
+ 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:
25
+
26
+ #### IntlProvider
20
27
 
21
- Wrap your application in the `<IntlProvider>` component, providing `locale` and `timeZone` through the `config` prop:
28
+ [`IntlProvider`](./API/intl-provider.mdx) is the most basic provider, and should be used if you do not use Mobx.
22
29
 
23
30
  ```tsx
24
31
  import { IntlProvider } from '@servicetitan/intl';
25
-
32
+ ...
26
33
  const locale = 'en-US';
27
34
  const timeZone = 'America/Los_Angeles';
28
- const intlConfig: IntlConfig = useMemo(() => ({ locale, timeZone }), [locale, timeZone]);
35
+ const currency = 'USD';
36
+ const intlConfig: IntlConfig = useMemo(() =>
37
+ ({ currency, locale, timeZone }), [currency, locale, timeZone]);
29
38
  return (
30
39
  <IntlProvider config={intlConfig}>
31
40
  <App />
@@ -33,12 +42,37 @@ return (
33
42
  );
34
43
  ```
35
44
 
45
+ #### MobxIntlProvider
46
+
47
+ [`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.
48
+
49
+ ```tsx
50
+ import { MobxIntlProvider } from '@servicetitan/intl/mobx';
51
+ ...
52
+ const locale = 'en-US';
53
+ const timeZone = 'America/Los_Angeles';
54
+ const currency = 'USD';
55
+ const intlConfig: IntlConfig = useMemo(() =>
56
+ ({ currency, locale, timeZone }), [currency, locale, timeZone]);
57
+ return (
58
+ <MobxIntlProvider config={intlConfig}>
59
+ <App />
60
+ </MobxIntlProvider>
61
+ );
62
+ ```
63
+
64
+ :::note
65
+ 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.
66
+ :::
67
+
36
68
  ## Features
37
69
 
38
70
  `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:
39
71
 
40
- - [Formatting dates and time](./dates.mdx)
41
- - [Formatting numbers and currency](./numbers.mdx)
72
+ - [Formatting currency](./currency.mdx)
73
+ - [Formatting dates](./dates.mdx)
74
+ - [Formatting numbers](./numbers.mdx)
75
+ - [Formatting times](./times.mdx)
42
76
  - [Plurals](./plurals.mdx)
43
77
 
44
78
  :::note
@@ -57,14 +91,14 @@ function MyComponent() {
57
91
 
58
92
  return (
59
93
  <div>
60
- <p>Formatted date: {intl.formatDate(new Date(), { format: 'short' })}</p>
61
- <p>Formatted currency: {intl.formatNumber(1234.56, { style: 'currency', currency: 'USD' })}</p>
94
+ <p>Formatted date: {intl.formatDate(new Date())}</p>
95
+ <p>Formatted currency: {intl.formatCurrency(1234.56)}</p>
62
96
  </div>
63
97
  );
64
98
  }
65
99
  ```
66
100
 
67
- However, if you have the need to access the internationalization API in MobX stores, you must use an additional wrapper component, [`<IntlStoreProvider>`](./API/intl-store-provider.mdx), and you can use the provided `IntlStore` to access the same functionality.
101
+ 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.
68
102
 
69
103
  ```tsx
70
104
  import { inject, injectable } from '@servicetitan/react-ioc';
@@ -78,8 +112,8 @@ export class UserService {
78
112
  const intl = this.intlStore.intl;
79
113
 
80
114
  return {
81
- joinDate: intl.formatDate(user.joinDate, { format: 'long' }),
82
- balance: intl.formatNumber(user.balance, { style: 'currency', currency: 'USD' })
115
+ joinDate: intl.formatDate(user.joinDate),
116
+ balance: intl.formatCurrency(user.balance)
83
117
  };
84
118
  }
85
119
  }
package/docs/intl/numbers.mdx CHANGED
@@ -1,10 +1,10 @@
1
1
  ---
2
- title: Numbers and Currency
2
+ title: Numbers
3
3
  ---
4
4
 
5
5
  import Tabs from '@theme/Tabs';
6
6
 
7
- Numbers and currency 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.
7
+ 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.
8
8
 
9
9
  ## Usage
10
10
 
@@ -12,10 +12,15 @@ Numbers and currency can be formatted either by using the `FormattedNumber` comp
12
12
 
13
13
  ```tsx
14
14
  import { FormattedNumber } from 'react-intl';
15
- ...
16
- <FormattedNumber value={1234.56} style="currency" currency="USD" />
17
- <FormattedNumber value={0.75} style="percent" />
18
- <FormattedNumber value={1234.567} maximumFractionDigits={2} />
15
+
16
+ function NumberExample() {
17
+ return (
18
+ <>
19
+ <FormattedNumber value={0.75} style="percent" /> {/* "75%" */}
20
+ <FormattedNumber value={1234.567} maximumFractionDigits={2} /> {/* "1,234.57" */}
21
+ </>
22
+ );
23
+ }
19
24
  ```
20
25
 
21
26
  ### formatNumber
@@ -31,28 +36,38 @@ import { FormattedNumber } from 'react-intl';
31
36
 
32
37
  ```tsx
33
38
  import { useIntl } from '@servicetitan/intl';
34
- ...
35
- const intl = useIntl();
36
- ...
37
- intl.formatNumber(1234.56, { style: 'currency', currency: 'USD' });
38
- intl.formatNumber(0.75, { style: 'percent' });
39
- intl.formatNumber(1234.567, { maximumFractionDigits: 2 });
39
+
40
+ function NumberExample() {
41
+ const intl = useIntl();
42
+
43
+ return (
44
+ <>
45
+ <p>{intl.formatNumber(0.75, { style: 'percent' })}</p> {/* "75%" */}
46
+ <p>{intl.formatNumber(1234.567, { maximumFractionDigits: 2 })}</p> {/* "1,234.57" */}
47
+ </>
48
+ );
49
+ }
40
50
  ```
41
51
 
42
52
  </TabItem>
43
53
  <TabItem value="store">
44
54
 
45
55
  ```tsx
56
+ import { inject, injectable } from '@servicetitan/react-ioc';
46
57
  import { IntlStore } from '@servicetitan/intl/mobx';
47
- ...
58
+
48
59
  @injectable()
49
- class MyStore {
60
+ class ReportService {
50
61
  constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
51
- ...
52
- this.intlStore.intl.formatNumber(1234.56, { style: 'currency', currency: 'USD' });
53
- this.intlStore.intl.formatNumber(0.75, { style: 'percent' });
54
- this.intlStore.intl.formatNumber(1234.567, { maximumFractionDigits: 2 });
55
- ...
62
+
63
+ formatReportData() {
64
+ const intl = this.intlStore.intl;
65
+
66
+ return [
67
+ intl.formatNumber(0.75, { style: 'percent' }), // "75%"
68
+ intl.formatNumber(1234.567, { maximumFractionDigits: 2 }), // "1,234.57"
69
+ ];
70
+ }
56
71
  }
57
72
  ```
58
73
 
package/docs/intl/times.mdx ADDED
@@ -0,0 +1,93 @@
1
+ ---
2
+ title: Times
3
+ ---
4
+
5
+ import Tabs from '@theme/Tabs';
6
+
7
+ 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.
8
+
9
+ ## Available Formats
10
+
11
+ 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).
12
+
13
+ - `short` results in `4:00 PM` (default if no format is specified)
14
+ - `medium` results in `4:00:00 PM`
15
+
16
+ ## Usage
17
+
18
+ ### FormattedTime
19
+
20
+ ```tsx
21
+ import { FormattedTime } from 'react-intl';
22
+
23
+ function TimeExample() {
24
+ const time = new Date();
25
+
26
+ return (
27
+ <>
28
+ <FormattedTime value={time} /> {/* "4:00 PM" */}
29
+ <FormattedTime value={time} format="short" /> {/* "4:00 PM" */}
30
+ <FormattedTime value={time} format="medium" /> {/* "4:00:00 PM" */}
31
+ </>
32
+ );
33
+ }
34
+ ```
35
+
36
+ ### formatTime
37
+
38
+ <Tabs
39
+ defaultValue="hooks"
40
+ values={[
41
+ { label: 'React hooks', value: 'hooks' },
42
+ { label: 'Store', value: 'store' },
43
+ ]}
44
+ >
45
+ <TabItem value="hooks">
46
+
47
+ ```tsx
48
+ import { useIntl } from '@servicetitan/intl';
49
+
50
+ function TimeExample() {
51
+ const intl = useIntl();
52
+ const time = new Date();
53
+
54
+ return (
55
+ <>
56
+ <p>{intl.formatTime(time)}</p> {/* "4:00 PM" */}
57
+ <p>{intl.formatTime(time, { format: 'short' })}</p> {/* "4:00 PM" */}
58
+ <p>{intl.formatTime(time, { format: 'medium' })}</p> {/* "4:00:00 PM" */}
59
+ </>
60
+ );
61
+ }
62
+ ```
63
+
64
+ </TabItem>
65
+ <TabItem value="store">
66
+
67
+ ```tsx
68
+ import { inject, injectable } from '@servicetitan/react-ioc';
69
+ import { IntlStore } from '@servicetitan/intl/mobx';
70
+
71
+ @injectable()
72
+ class ScheduleService {
73
+ constructor(@inject(IntlStore) private readonly intlStore: IntlStore) {}
74
+
75
+ formatTime() {
76
+ const intl = this.intlStore.intl;
77
+ const time = new Date();
78
+
79
+ return [
80
+ intl.formatTime(time), // "4:00 PM"
81
+ intl.formatTime(time, { format: 'short' }), // "4:00 PM"
82
+ intl.formatTime(time, { format: 'medium' }), // "4:00:00 PM"
83
+ ];
84
+ }
85
+ }
86
+ ```
87
+
88
+ </TabItem>
89
+ </Tabs>
90
+
91
+ ### Further customization
92
+
93
+ 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/testing-library/index.mdx CHANGED
@@ -18,5 +18,3 @@ This library has `peerDependencies` for:
18
18
  - `@testing-library/react`: >=12.0.0
19
19
  - `@testing-library/react-hooks`: >=7.0.0 (only if using `@testing-library/react` v12)
20
20
  - `react`: >=17.0.0
21
-
22
- **Note:** This library is not compatible with React Testing Library versions 13+.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/docs-anvil-uikit-contrib",
3
- "version": "32.5.0",
3
+ "version": "32.6.1",
4
4
  "description": "",
5
5
  "repository": {
6
6
  "type": "git",
@@ -16,5 +16,5 @@
16
16
  "cli": {
17
17
  "webpack": false
18
18
  },
19
- "gitHead": "25988db91418cf6ff9018760bd03ef6c3d7ef8ec"
19
+ "gitHead": "0a1b8d2487f81f39aa9f500b514525865a02376a"
20
20
  }
package/docs/intl/API/intl-store-provider.mdx DELETED
@@ -1,23 +0,0 @@
1
- ---
2
- title: IntlStoreProvider
3
- ---
4
-
5
- Applications may be wrapped with the `<IntlStoreProvider>` component in order to provide access to internationalization features in MobX stores.
6
-
7
- `<IntlStoreProvider>` must be a child of `<IntlProvider>`, and should be placed as high in the component tree as possible to ensure all stores have access to the `IntlStore`.
8
-
9
- ```tsx
10
- import { IntlProvider } from '@servicetitan/intl';
11
- import { IntlStoreProvider } from '@servicetitan/intl/mobx';
12
-
13
- const locale = 'en-US';
14
- const timeZone = 'America/Los_Angeles';
15
- const intlConfig: IntlConfig = useMemo(() => ({ locale, timeZone }), [locale, timeZone]);
16
- return (
17
- <IntlProvider config={intlConfig}>
18
- <IntlStoreProvider>
19
- <App />
20
- </IntlStoreProvider>
21
- </IntlProvider>
22
- );
23
- ```