@servicetitan/docs-anvil-uikit-contrib 37.0.0 → 37.0.2

package/docs/intl/index.mdx

@@ -25,7 +25,7 @@ Wrap your application with [`<IntlProvider>`](./API/intl-provider.mdx) or [`<Mob
 
 #### IntlProvider
 
-[`IntlProvider`](./API/intl-provider.mdx) is the most basic provider, and should be used if you do not use Mobx.
+[`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';
@@ -44,7 +44,7 @@ return (
 
 #### 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.
+[`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';
@@ -61,13 +61,17 @@ return (
 );
 ```
 
-:::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.
-:::
+### Monolith
+
+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 using `@servicetitan/intl` formatters within a Shared React Component that is used within a Knockout template (`window.sharedReactComponent`), the library's context will not be available. Wrap your component directly with a provider to ensure the context is available within the component's tree. We recommend you use [the monolith's `IntlProvider`](https://github.com/search?q=repo:servicetitan/app+%22export+const+IntlProvider%22+path:%22/packages/desktop/%22&type=code), as it already provides the `currency`, `locale`, and `timezone`.
+
+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:
+`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 particularly useful to us at this stage:
 
 - [Formatting currency](./currency.mdx)
 - [Formatting dates](./dates.mdx)

package/docs/testing-library/01-api.mdx

@@ -12,16 +12,18 @@ When it isn't practical to [mock the API service classes](/docs/frontend/testing
 ### Examples
 
 <Tabs
-defaultValue="jest"
-values={[
-{ label: 'Jest (default)', value: 'jest' },
-{ label: 'Vitest', value: 'vitest' },
-{ label: 'Storybook', value: 'storybook' },
-]}
+    defaultValue="jest"
+    values={[
+    { label: 'Jest (default)', value: 'jest' },
+    { label: 'Vitest', value: 'vitest' },
+    { label: 'Storybook', value: 'storybook' },
+    ]}
 >
 <TabItem value="jest">
 
 ```ts
+import { MockApiCalls } from '@servicetitan/testing-library';
+
 describe('[admin] AppRoutes', () => {
     // Create helper to mock API calls
     const apiResponses = new MockApiCalls();
@@ -42,10 +44,10 @@ describe('[admin] AppRoutes', () => {
 </TabItem>
 <TabItem value="vitest">
 
-For Vitest tests, import from the `/vitest` entry point:
+When using Vitest, import from the `/vitest` entry point:
 
 ```ts
-import { MockApiCalls } from '@servicetitan/testing-library/vitest';
+import { MockApiCalls } from '@servicetitan/testing-library/vitest'; // Import from /vitest
 import { describe, it, expect, beforeEach } from 'vitest';
 
 describe('[admin] AppRoutes', () => {
@@ -72,7 +74,7 @@ describe('[admin] AppRoutes', () => {
 For use in Storybook stories or other contexts without Jest or Vitest, import from the `/mock-api-calls` entry point:
 
 ```ts
-import { MockApiCalls } from '@servicetitan/testing-library/mock-api-calls';
+import { MockApiCalls } from '@servicetitan/testing-library/mock-api-calls'; // Import from /mock-api-calls
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof MyComponent> = {

package/docs/testing-library/02-queries.mdx

@@ -2,17 +2,43 @@
 title: Queries
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Testing Library includes custom [queries](https://testing-library.com/docs/queries/about) that find elements with ServiceTitan specific attributes.
 
 ## Usage
 
 To use custom queries, import them from Testing Library and merge them with the default set of queries attached to rendered components.
 
+<Tabs defaultValue="jest"
+values={[
+    { label: 'Jest (default)', value: 'jest' },
+    { label: 'Vitest', value: 'vitest'},
+]}>
+<TabItem value="jest">
+
 ```ts
 import { queries, render } from '@testing-library/react'; // Import default queries
 import { queries as customQueries } from '@servicetitan/testing-library'; // Import custom queries
 
-// ...
+const subject = () => {
+    return render(
+        <MyComponent />,
+        // Merge custom queries with defaults
+        { queries: { ...queries, ...customQueries } }
+    );
+};
+```
+
+</TabItem>
+<TabItem value="vitest">
+
+When using Vitest, import from the `/vitest` entry point:
+
+```ts
+import { queries, render } from '@testing-library/react'; // Import default queries
+import { queries as customQueries } from '@servicetitan/testing-library/vitest'; // Import from /vitest
 
 const subject = () => {
     return render(
@@ -23,6 +49,9 @@ const subject = () => {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 ## ByAnvilComponentName
 
 > getByAnvilComponentName, queryByAnvilComponentName, getAllByAnvilComponentName, queryAllByAnvilComponentName, findByAnvilComponentName, findAllByAnvilComponentName

package/docs/testing-library/03-matchers.mdx

@@ -2,6 +2,38 @@
 title: Matchers
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Testing library includes several [custom matchers](https://jestjs.io/docs/using-matchers).
+
+## Usage
+
+To register matchers import the library into tests, or into the global setup:
+
+<Tabs defaultValue="jest"
+values={[
+    { label: 'Jest (default)', value: 'jest' },
+    { label: 'Vitest', value: 'vitest'},
+]}>
+<TabItem value="jest">
+
+```ts
+import '@servicetitan/testing-library';
+```
+
+</TabItem>
+<TabItem value="vitest">
+
+When using Vitest, import from the `/vitest` entry point:
+
+```ts
+import '@servicetitan/testing-library/vitest';
+```
+
+</TabItem>
+</Tabs>
+
 ## toBeWithinRange
 
 Checks whether a value equals another value, plus or minus the specified delta.

package/docs/testing-library/index.mdx

@@ -18,3 +18,11 @@ This library has `peerDependencies` for:
 -   `@testing-library/react`: >=12.0.0
 -   `@testing-library/react-hooks`: >=7.0.0 (only if using `@testing-library/react` v12)
 -   `react`: >=17.0.0
+
+## Using with Vitest
+
+When using Vitest, import from the `/vitest` entry point:
+
+```ts
+import '@servicetitan/testing-library/vitest';
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/docs-anvil-uikit-contrib",
-    "version": "37.0.0",
+    "version": "37.0.2",
     "description": "",
     "repository": {
         "type": "git",
@@ -16,5 +16,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "307168f771cf472154019492936165c9a31ed1e9"
+    "gitHead": "e5cc4337a19b32de0595e1f23d13029c40b350c2"
 }