@servicetitan/docs-anvil-uikit-contrib 25.0.1-canary.0

package/docs/confirm-navigation.mdx

@@ -0,0 +1,11 @@
+---
+title: Confirm Navigation
+---
+
+import { BasicExample } from '@servicetitan/confirm-navigation/dist/demo';
+
+import { CodeDemo } from '@site/src/components/code-demo';
+
+Sometimes you might want user to confirm leaving from page e.g. if he has some unsaved changes. `@servicetitan/confirm-navigation` is a component that receives title, message, and condition to determinate when confirmation should be shown.
+
+<CodeDemo example={BasicExample} srcPath="confirm-navigation/src/demo/basic.tsx" />

package/docs/confirm.mdx

@@ -0,0 +1,54 @@
+---
+title: Confirm
+---
+
+import {
+    BasicExample,
+    HookExample,
+    ConfigurableExample,
+    ToggleableExample,
+    YesNoExample,
+    CustomExample,
+} from '@servicetitan/confirm/dist/demo';
+
+import { CodeDemo } from '@site/src/components/code-demo';
+
+Sometimes you might want user to confirm actions like destructive button clicks. `@servicetitan/confirm` is a high order component that helps managing confirmation dialog state without creating one. `Confirm` patches passed `onConfirm` handler that you can later pass to trigger component, calling patched `onConfirm` would cause confirmation dialog to appear.
+
+## Examples
+
+### Basic
+
+Zero configuration approach. Good fit for most use-cases.
+
+<CodeDemo example={BasicExample} srcPath="confirm/src/demo/basic.tsx" />
+
+### React Hook
+
+Alternatively you can use `useConfirm` hook to create patched handler and confirmation component. This might be useful to debulk syntax in case of having several actions that need confirmation in a same component.
+
+<CodeDemo example={HookExample} srcPath="confirm/src/demo/hook.tsx" />
+
+### Configurable default dialog
+
+Confirmation dialog title and message can be customized via prop.
+
+<CodeDemo example={ConfigurableExample} srcPath="confirm/src/demo/configurable.tsx" />
+
+### Toggleable confirmation
+
+Toggle confirmation state conditionally.
+
+<CodeDemo example={ToggleableExample} srcPath="confirm/src/demo/toggleable.tsx" />
+
+### (Yes / No / Cancel) confrimation
+
+`YesNoConfirmation` component is another option of a confirmation dialog.
+
+<CodeDemo example={YesNoExample} srcPath="confirm/src/demo/yes-no.tsx" />
+
+### Custom confirmation component
+
+Finally you can have totally custom confirmation.
+
+<CodeDemo example={CustomExample} srcPath="confirm/src/demo/custom.tsx" />

package/docs/culture.mdx

@@ -0,0 +1,84 @@
+---
+title: Culture
+---
+
+`@servicetitan/culture` holds UI culture (internationalization) settings.
+
+## Usage
+
+```tsx
+import React from 'react';
+import { useDependencies } from '@servicetitan/react-ioc';
+import { CultureProvider, CULTURE_TOKEN } from '@servicetitan/culture';
+
+const App: React.FC = () => {
+    return (
+        <CultureProvider
+            value={{
+                Name: 'en-US',
+                NumberFormat: {
+                    CurrencyPositivePattern: '%s%v',
+                    CurrencyNegativePattern: '%s-%v',
+                    CurrencySymbol: '$',
+                    CurrencyDecimalSeparator: '.',
+                    CurrencyGroupSeparator: ',',
+                    CurrencyDecimalDigits: 2,
+                    NumberDecimalSeparator: '.',
+                    NumberGroupSeparator: ',',
+                    NumberDecimalDigits: 2,
+                },
+            }}
+        >
+            <DisplayCulture />
+        </CultureProvider>
+    );
+};
+
+// Somewhere later in the component tree you can consume culture settings via CULTURE_TOKEN
+const DisplayCulture: React.FC = () => {
+    const [culture] = useDependencies(CULTURE_TOKEN);
+    return <span>culture.Name</span>;
+};
+```
+
+## Package contents
+
+### CultureProvider
+
+React Component that passes culture setttings to `@servicetitan/react-ioc` container.
+
+#### Props
+
+|  Name   |   Type    |       Description       | Required |
+| :-----: | :-------: | :---------------------: | :------: |
+| `value` | `Culture` | Culture settings object |   Yes    |
+
+### Culture
+
+TS inteface of culture setttings.
+
+```ts
+interface Culture {
+    Name: string;
+    DateTimeFormat: {
+        MomentShortDatePattern: string;
+        MomentShortYearDatePattern: string;
+        MomentShortYearDateTimePattern: string;
+    };
+    NumberFormat: {
+        NumberDecimalSeparator: string;
+        NumberGroupSeparator: string;
+    };
+    PhoneFormat: {
+        PhoneFormatInfo: {
+            Pattern: RegExp;
+        };
+        PhoneMask: string;
+        SimplePhoneMask: string;
+    };
+}
+```
+
+### CULTURE_TOKEN
+
+InversifyJS token to resolve culture settings from `@servicetitan/react-ioc` container.

package/docs/form-state.mdx

@@ -0,0 +1,245 @@
+---
+title: FormState
+---
+
+import { CodeDemo } from '@site/src/components/code-demo';
+
+`@servicetitan/form-state` is a collection of utils to simplify daily routine related to form state management.
+
+## Utilities
+
+### Anvil/Kendo/Semantic helpers
+
+In order to avoid verbose `onChange` syntax we created a collection of `FieldState` extensions, each of them has custom `onChangeHandler` method that can be passed directly to `onChange` prop in JSX.
+
+`FieldState` extensions vary by type of form element they represent e.g. for inputs there is `InputFieldState`, for dropdowns it is `DropdownFieldState` and so on.
+
+```tsx
+const searchForm = new FormState({
+    jobStatus: new DropdownFieldState(JobStatus.Scheduled),
+    customerName: new InputFieldState(''),
+    details: new TextAreaFieldState(''),
+    isActive: new CheckboxFieldState(false),
+    from: new DatetimeFieldState(new Date()),
+    to: new DatetimeFieldState(new Date()),
+});
+
+const SearchForm: React.FC = () => (
+    <Form>
+        <Form.Dropdown
+            value={searchForm.$.jobStatus.value}
+            onChange={searchForm.$.jobStatus.onChangeHandler}
+            options={enumToOptions(JobStatus)}
+            placeholder="Job Status"
+        />
+        <Form.Input
+            value={searchForm.$.customerName.value}
+            onChange={searchForm.$.customerName.onChangeHandler}
+            placeholder="Customer Name"
+        />
+        <Form.TextArea
+            value={searchForm.$.details.value}
+            onChange={searchForm.$.details.onChangeHandler}
+            placeholder="Details"
+        />
+        <Form.Checkbox
+            label="Is Active"
+            checked={searchForm.$.isActive.value}
+            onChange={searchForm.$.isActive.onChangeHandler}
+        />
+        <DatePicker value={searchForm.$.from.value} onChange={searchForm.$.from.onChangeHandler} />
+        <DatePicker value={searchForm.$.to.value} onChange={searchForm.$.to.onChangeHandler} />
+    </Form>
+);
+```
+
+### FormValidators
+
+-   `required` - checks if value is defined
+-   `hasLowerCase` - checks if string has lower case letter
+-   `hasUpperCase` - checks if string has upper case letter
+-   `hasNumber` - checks if string has digit symbol
+-   `passwordIsValidFormat` - checks if string have more than 7 symbols length and contains at least one lower letter, upper letter, and digit
+-   `emailFormatIsValid` - checks if string contains a valid email address
+-   `isDateValid` - checks if date between `new Date(1900, 1, 1)` and `new Date(2099, 12, 31)`
+-   `isDateRangeValid` - checks if start date isn't greater than end date
+-   `isDateRangeLessThanMaxLength` - checks if date range isn't greater than maximum duration
+-   `isAlphaNumeric` - checks if string contains only letters, numbers or underscores
+-   `isMatchingRegex` - checks if string match a regular expression
+-   `maxLength` - checks if string length isn't greater than maximum
+
+### PersistentFormState
+
+We have extended the `FormState` library to enable saving the state of form and re-applying them to their previous condition. It encrypts the data before saving and decrypts after fetching for security concerns.
+
+Available 3 different ways to save the current state of form:
+
+-   `Domain` - form data saved in [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), it will persists through out multiple sessions
+-   `Session` - form data saved in [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage), it persists in the one session you currently are in
+-   `InMemory` - form data saved in memory, it will not persist if there is any reload/refresh of browser (no encryption is done with this method)
+
+_Currently implemented only `InMemory` storage, `Session` and `Domain` will throw an error._
+
+#### Constructor parameters
+
+1. `$` - javascript object where values can be either `FieldState`s or [wrapper of FieldStates](#anvilkendosemantic-helpers) or `FormState` itself
+2. `cacheKey` - unique string that represents the form in the storage system
+3. `persistenceMode` - type of storage system that will be used, there is a enum of possible values called `PersistenceMode`
+4. `autoSave` - flag indicates if the form data will be saved automatically on change
+
+#### Methods
+
+-   `save` - saves form in the preferred storage system, must be used if autoSave is disabled.
+-   `reset` - resets all the form fields and clear the data saved in storage.
+
+#### Example
+
+```tsx
+const form = new PersistentFormState(
+    {
+        field1: new FieldState(''),
+        field2: new InputFieldState(''),
+    },
+    'uniqueNameOfForm',
+    PersistenceMode.InMemory,
+    true
+);
+```
+
+### formStateToJS
+
+Creates `JSON` object that has the same structure and values as `FormState`.
+
+```tsx
+const form = new FormState({
+    a: new FieldState(7),
+    b: new FormState({
+        c: new FieldState('Lorem ipsum'),
+    }),
+});
+
+formStateToJS(form); // { a: 7, b: { c: 'Lorem ipsum' } }
+```
+
+### setFormStateValues
+
+Applies new values to `FormState` based on `JSON` object with the same structure, fields aren't mentioned in the object will be skipped.
+
+```tsx
+const form = new FormState({
+    a: new FieldState(7),
+    b: new FormState({
+        c: new FieldState('Lorem ipsum'),
+    }),
+});
+
+setFormStateValues(form, { b: { c: 'New value' } });
+
+formStateToJS(form); // { a: 7, b: { c: 'New value' } }
+```
+
+### traverseFormState
+
+Goes through `FormState` tree and calls callbacks for visited `FieldState`s and `FormState`s.
+
+```tsx
+const form = new FormState({
+    a: new FieldState(7),
+    b: new FormState({
+        c: new FieldState('Lorem ipsum'),
+    }),
+});
+
+traverseFormState(
+    true,
+    form,
+    () => console.log("I'm in FormState"),
+    () => console.log("I'm in FieldState")
+);
+```
+
+### isFormStateChanged
+
+Checks if any of `FieldState`s were changed.
+
+```tsx
+const form = new FormState({
+    a: new FieldState(7),
+});
+const isFormChanged = isFormStateChanged(form);
+
+isFormChanged.get(); // false
+
+form.$.a.onChange(777);
+
+isFormChanged.get(); // true
+```
+
+### commitFormState
+
+Makes `FieldState`s current values as initials and marks them as untouched.
+
+```tsx
+const form = new FormState({
+    a: new FieldState(7),
+});
+const isFormChanged = isFormStateChanged(form);
+
+form.$.a.onChange(777);
+
+commitFormState(form);
+
+isFormChanged.get(); // false
+
+form.reset();
+
+form.$.a.value; // 777
+```
+
+### camelCaseToTitleCase
+
+Adds spaces between words in `UpperCamelCase` notation strings, useful for enum keys transformation.
+
+```tsx
+const key = CampaignType[CampaignType.ExpiringMemberships]; // ExpiringMemberships
+camelCaseToTitleCase(key); // Expiring Memberships
+```
+
+### enumToOptions
+
+Creates `Option`s collection compatible with Anvil dropdowns based on enum.
+
+```tsx
+enum CampaignType {
+    Default,
+    UnsoldEstimates,
+    ExpiringMemberships,
+    IdleAccount,
+    AgingEquipment,
+    Other,
+}
+
+// enum keys will be used as options texts
+enumToOptions(CampaignType);
+
+// enums texts will be calculated using values
+const campaignTypeOptions = enumToOptions(CampaignType, value =>
+    camelCaseToTitleCase(CampaignType[value])
+);
+```
+
+### getEnumKeys
+
+Returns collection with all enum keys.
+
+```tsx
+getEnumKeys(CampaignType); // ['Default', 'UnsoldEstimates', 'ExpiringMemberships', 'IdleAccount', 'AgingEquipment', 'Other']
+```
+
+### getEnumValues
+
+Returns collection with all enum values.
+
+```tsx
+getEnumValues(CampaignType); // [0, 1, 2, 3, 4, 5]
+```

package/docs/form.mdx

@@ -0,0 +1,151 @@
+---
+title: Form
+---
+
+import { NumberInputExample, FileUploaderExample } from '@servicetitan/form/dist/demo';
+
+import { CodeDemo } from '@site/src/components/code-demo';
+
+`@servicetitan/form` is a collection of utils and components to simplify daily routine related to forms.
+
+Form state helpers was moved to [`@servicetitan/form-state`](./form-state) package. You can import helpers from `@servicetitan/form-state` or `@servicetitan/form`.
+
+## Components
+
+### Label
+
+More powerful label version, it supports error message and tooltips. Designed to be used with Anvil form controls.
+
+#### Props
+
+```tsx
+interface LabelProps {
+    label: string;
+    tooltip?: string;
+    tooltipDirection?: TooltipProps['direction'];
+    hasError?: boolean;
+    error?: string;
+}
+```
+
+#### Example
+
+```tsx
+const form = new FormState({
+    name: new InputFieldState(''),
+});
+
+const NameInput: React.FC = () => {
+    const { name } = form.$;
+
+    return (
+        <Input
+            label={
+                <Label
+                    label="Name"
+                    tooltip="Unique display user name"
+                    hasError={name.hasError}
+                    error={name.error}
+                />
+            }
+            value={name.value}
+            onChange={name.onChangeHandler}
+            error={name.hasError}
+        />
+    );
+};
+```
+
+### FileUploader
+
+Wrapper around `Resumable.js` and Anvil's `FilePicker` have to be used in most of file uploading cases.
+
+#### Props
+
+```tsx
+interface FileUploaderConfig {
+    target?: string;
+    downloadLink?: string;
+    chunkSize?: number;
+    testChunks?: boolean;
+    forceChunkSize?: boolean;
+    simultaneousUploads?: number;
+    headers?: Record<string, string>;
+    permanentErrors?: number[];
+}
+
+interface FileUploaderProps
+    extends Pick<FilePickerProps, 'limitReached' | 'typesNote' | 'multiple' | 'accept'> {
+    config?: FileUploaderConfig;
+    value: FileDescriptor[];
+    onChange?(value: FileDescriptor[]): void;
+    folderName: string;
+    hideReplace?: boolean;
+    hideDownload?: boolean;
+    centerAligned?: boolean;
+    layout?: 'grid' | 'list';
+}
+```
+
+#### Example
+
+<CodeDemo example={FileUploaderExample} srcPath="form/src/demo/file-uploader.tsx" />
+
+### NumberInput
+
+Visually looks the same as regular input but only numbers can be typed. Supports min, max, and precision configuration.
+
+#### Props
+
+```tsx
+type EmptyValue = 0 | undefined;
+type NumberValue<TEmpty extends EmptyValue> = TEmpty extends 0 ? number : number | undefined;
+
+interface NumberInputProps<TEmpty extends EmptyValue>
+    extends Omit<InputProps, 'value' | 'onChange'> {
+    value: NumberValue<TEmpty>;
+    onChange(value: NumberValue<TEmpty>): void;
+    emptyValue: TEmpty;
+    decimalPlaces?: number;
+    useEmptyThousandsSeparator?: boolean;
+    min?: number;
+    max?: number;
+    useKeyboardNavigation?: boolean;
+}
+```
+
+#### Example
+
+<CodeDemo example={NumberInputExample} srcPath="form/src/demo/number-input.tsx" />
+
+### FormStateErrorBanner
+
+Accumulates all `FieldState`s errors in a single banner.
+
+#### Props
+
+```tsx
+interface FormStateErrorBannerProps<T extends ValidatableMapOrArray> {
+    form: FormState<T>;
+    errorTitle?: string;
+    successTitle?: string;
+    className?: string;
+}
+```
+
+#### Example
+
+```tsx
+const form = new FormState({
+    login: new InputFieldState(''),
+    password: new InputFieldState(''),
+});
+
+const ValidationBanner: React.FC = () => (
+    <FormStateErrorBanner
+        form={form}
+        errorTitle="Make sure if all fields valid"
+        successTitle="The form is ready to submit"
+    />
+);
+```

package/docs/link-item.mdx

@@ -0,0 +1,65 @@
+---
+title: Link Item
+---
+
+`@servicetitan/link-item` is a collection of wrappers around various navigation components adapted to work with React router.
+
+## SideNavLinkItem
+
+For use inside of the Anvil's [SideNav](https://anvil.servicetitan.com/#/navigation/sidenav).
+
+### Props
+
+```tsx
+interface SideNavLinkItemProps {
+    /** When true, will only match if the path matches the location.pathname exactly */
+    exact?: boolean;
+    /** A string representing the path to link to */
+    pathname: string;
+    /** Adds one or more classnames for an element */
+    className?: string;
+}
+```
+
+### Example
+
+```tsx
+<SideNav title="Navigation">
+    <SideNavLinkItem pathname="/" exact>
+        Home
+    </SideNavLinkItem>
+    <SideNavLinkItem pathname="/section1">Section 1</SideNavLinkItem>
+    <SideNavLinkItem pathname="/section2">Section 2</SideNavLinkItem>
+    <SideNavLinkItem pathname="/section3">Section 3</SideNavLinkItem>
+</SideNav>
+```
+
+## TabLinkItem
+
+For use inside of the Anvil's [TabGroup](https://anvil.servicetitan.com/#/navigation/tab).
+
+### Props
+
+```tsx
+interface TabLinkItemProps {
+    /** When true, will only match if the path matches the location.pathname exactly */
+    exact?: boolean;
+    /** A string representing the path to link to */
+    pathname: string;
+    /** Adds one or more classnames for an element */
+    className?: string;
+}
+```
+
+### Example
+
+```tsx
+<TabGroup title="Navigation">
+    <TabLinkItem pathname="/" exact>
+        Home
+    </TabLinkItem>
+    <TabLinkItem pathname="/section1">Section 1</TabLinkItem>
+    <TabLinkItem pathname="/section2">Section 2</TabLinkItem>
+    <TabLinkItem pathname="/section3">Section 3</TabLinkItem>
+</TabGroup>
+```

package/docs/notifications-center.mdx

@@ -0,0 +1,307 @@
+---
+title: Notifications Center
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+import {
+    BasicExample,
+    StatusVariationsExample,
+    DurationExample,
+    ActionButtonExample,
+    ProgressExample,
+    PreventDuplicatesExample,
+    MultilineMessageExample,
+    ServerDefaultExample,
+    ServerCustomExample,
+} from '@servicetitan/notifications/dist/demo';
+
+import { CodeDemo } from '@site/src/components/code-demo';
+
+There're a lot of cases when a user should be notified in the result of various events. It could be from a simple one-time notification about the result of the network request to informing about the state of a complex long-running process launched on the worker.
+
+Notification Center was created to simplify and generalize everything related to user notifications. It provides few touchpoints: `NotificationCenter` to send various notification types from the backend, `NotificationsService` to show messages on the frontend, and `register` function to configure rendering of notifications arrived from the backend.
+
+## Examples
+
+### Client-side notifications
+
+To initiate notifications from the client side it's enough to call one of the `NotificationsService` methods. They accept `options` - a configuration of the visible part of notification which should cover most of the use cases and `preventDuplicates` flag used to avoid rendering of notifications that are already visible to a user.
+
+#### Basic
+
+To show simple notification it's just enough to pass title and maybe in various cases, you'll also need a message.
+
+<CodeDemo example={BasicExample} srcPath="notifications/src/demo/basic-preview.tsx" />
+
+#### Status Variations
+
+Depends on situations various color schemes could be used.
+
+<CodeDemo
+    example={StatusVariationsExample}
+    srcPath="notifications/src/demo/status-variations-preview.tsx"
+/>
+
+#### Duration
+
+By default, notification automatically disappears in 8 seconds. However, it can be configured. Zero value could be used to avoid automatically disappearing.
+
+<CodeDemo example={DurationExample} srcPath="notifications/src/demo/duration-preview.tsx" />
+
+#### Action Button
+
+Sometimes it could be useful to add a button to suggest some actions to the user, it can be from a simple URL redirection to complex calculations encapsulated in a handler function.
+
+<CodeDemo
+    example={ActionButtonExample}
+    srcPath="notifications/src/demo/action-button-preview.tsx"
+/>
+
+#### Progress
+
+Also, it's possible to show a progress bar in a notification.
+
+<CodeDemo example={ProgressExample} srcPath="notifications/src/demo/progress-preview.tsx" />
+
+#### Prevent Duplicates
+
+Sometimes it can be redundant to show equal notifications to the user, in that case, you can easily achieve this with `preventDuplicates` option.
+
+<CodeDemo
+    example={PreventDuplicatesExample}
+    srcPath="notifications/src/demo/prevent-duplicates-preview.tsx"
+/>
+
+#### Multiline Message
+
+Notification message supports the newline control character, so if you need to show something list like just add `\r\n` between rows.
+
+<CodeDemo
+    example={MultilineMessageExample}
+    srcPath="notifications/src/demo/multiline-message-preview.tsx"
+/>
+
+### Server-side notifications
+
+Notification Center will automatically show notifications to the user sent from the backend and also guarantee delivery in cases when the user is offline. Right now it only covers the scenario of notifying a single user, it couldn't be used for something like broadcast.
+
+#### Basic
+
+Most of the cases could be easily covered with default notification type and `DefaultPayload` container, it's also the preferable way.
+
+export const defaultServerCode =
+    '' +
+    'IUserNotifier notification;\r\n' +
+    '\r\n' +
+    'var payload = new DefaultPayload {\r\n' +
+    '    Title = "Server Notification",\r\n' +
+    '    Message = "Task was pushed into queue."\r\n' +
+    '};\r\n' +
+    'notification = await notificationCenter.CreateNotifierAsync(\r\n' +
+    '    GetUserId(),\r\n' +
+    '    initialPayload: payload\r\n' +
+    ');\r\n' +
+    '\r\n' +
+    'await Task.Delay(2000);\r\n' +
+    '\r\n' +
+    'payload.Message = "Task is running.";\r\n' +
+    'await notification.OnChangePayload(\r\n' +
+    '    payload,\r\n' +
+    '    UserNotificationStatus.InProgress\r\n' +
+    ');\r\n' +
+    '\r\n' +
+    'for (int progress = 0; progress < 100; progress += 5) {\r\n' +
+    '    payload.Progress = progress;\r\n' +
+    '    await notification.OnChangePayload(payload);\r\n' +
+    '\r\n' +
+    '    await Task.Delay(250);\r\n' +
+    '}\r\n' +
+    '\r\n' +
+    'payload.Message = "Task was successfully completed.";\r\n' +
+    'payload.Progress = null;\r\n' +
+    'await notification.OnChangePayload(\r\n' +
+    '    payload,\r\n' +
+    '    UserNotificationStatus.Success\r\n' +
+    ');';
+
+<Tabs
+    defaultValue="example"
+    values={[
+        { label: 'Example', value: 'example' },
+        { label: 'Server', value: 'server' },
+    ]}
+>
+    <TabItem value="example">
+        <ServerDefaultExample />
+    </TabItem>
+    <TabItem value="server">
+        <CodeBlock className="csharp">{defaultServerCode}</CodeBlock>
+    </TabItem>
+</Tabs>
+
+#### Custom notification component
+
+But if you need to show something more specific, then you can create a custom notification type and register renderer for it, which should determine what would be shown to a user depending on a notification status.
+
+**_It's required to register all your custom renderers in the `custom-notifications.ts` file on the module level, which should be imported in your module file._**
+
+export const customServerCode =
+    '' +
+    'public class CustomPayload : INotificationPayload\r\n' +
+    '{\r\n' +
+    '    public string Username { get; set; }\r\n' +
+    '    public string Message { get; set; }\r\n' +
+    '}\r\n' +
+    '\r\n' +
+    'await notificationCenter.CreateNotifierAsync(\r\n' +
+    '    GetUserId(),\r\n' +
+    '    "CustomServerNotification",\r\n' +
+    '    initialPayload: new CustomPayload {\r\n' +
+    '       Username = "Jane",\r\n' +
+    '       Message = "Hello, your order completed."\r\n' +
+    '    }\r\n' +
+    ');';
+
+<Tabs
+    defaultValue="example"
+    values={[
+        { label: 'Example', value: 'example' },
+        { label: 'Client', value: 'client' },
+        { label: 'Server', value: 'server' },
+    ]}
+>
+    <TabItem value="example">
+        <ServerCustomExample />
+    </TabItem>
+    <TabItem value="client">
+        <CodeBlock className="ts">
+            {require('@servicetitan/notifications/src/demo/server-custom-preview.tsx?raw')}
+        </CodeBlock>
+    </TabItem>
+    <TabItem value="server">
+        <CodeBlock className="csharp">{customServerCode}</CodeBlock>
+    </TabItem>
+</Tabs>
+
+## API Reference
+
+### NotificationCenter
+
+```csharp
+public interface INotificationCenter {
+    Task<IUserNotifier> CreateNotifierAsync(
+        long userId,
+        string type = "DefaultServerNotification",
+        UserNotificationStatus initialStatus = UserNotificationStatus.Info,
+        INotificationPayload initialPayload = null
+    );
+
+    IUserNotifier GetNotifier(long userId, long id);
+}
+
+public enum UserNotificationStatus {
+    Info = 0,
+    InProgress = 1,
+    Success = 2,
+    Failure = 3
+}
+
+public interface INotificationPayload {}
+
+public interface IUserNotifier {
+    Task<NotificationUpdateResult> OnChangeStatus(
+        UserNotificationStatus newStatus
+    );
+
+    Task<NotificationUpdateResult> OnChangePayload(
+        INotificationPayload notificationPayload,
+        UserNotificationStatus? newStatus = null
+    );
+}
+```
+
+### DefaultPayload
+
+```csharp
+public class DefaultPayload : INotificationPayload {
+    public string Title { get; set; }
+    public string Message { get; set; }
+    public int? Progress { get; set; }
+    public LinkAction Action { get; set; }
+
+    public class LinkAction {
+        public string Label { get; set; }
+        public string Link { get; set; }
+    }
+}
+```
+
+### NotificationsService
+
+```ts
+interface NotificationsService {
+    show(options: DefaultNotificationOptions, preventDuplicates?: boolean): void;
+
+    info(options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean): void;
+
+    success(options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean): void;
+
+    warning(options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean): void;
+
+    error(options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean): void;
+}
+
+interface DefaultNotificationOptions {
+    status?: Status;
+    title: string;
+    message?: string;
+    duration?: number;
+    progress?: number;
+    action?: LinkAction | FunctionAction;
+}
+
+enum Status {
+    Info = 'info',
+    Success = 'success',
+    Warning = 'warning',
+    Error = 'critical',
+}
+
+interface LinkAction {
+    label: string;
+    link: string;
+}
+
+interface FunctionAction {
+    label: string;
+    onClick(): void;
+}
+```
+
+### register
+
+```ts
+register(type: string, mapper: NotificationMapper): void;
+
+type NotificationMapper = React.ComponentType<{
+    notification: Notification;
+    onClose(): void;
+}>;
+```
+
+## FAQ
+
+### What is the delivery logic, what happens if user has several windows open?
+
+Notifications will be delivered to each window.
+
+### What happens if user closes window without closing notification?
+
+Unclosed notifications will be shown again on application reopen.
+
+### How will be displayed a large number of notifications?
+
+Only 5 notifications will be shown at a time, the rest will appear after displayed ones closing.

package/docs/skeleton.mdx

@@ -0,0 +1,38 @@
+---
+title: Skeleton
+---
+
+import { AutoExample } from '@servicetitan/skeleton/dist/demo/auto';
+import { ManualExample } from '@servicetitan/skeleton/dist/demo/manual';
+
+import { CodeDemo } from '@site/src/components/code-demo';
+
+`@servicetitan/skeleton` allows you to create fancy skeletons for the loading state. It provides a set of global CSS-styles that can be used to add skeletons over any component.
+
+This package doesn't contain any components. But you can use the same components that you use in your project - make it dumb, provide some fake data, and add skeleton classes while data is loading. It will make your skeletons look the same as real components, which is a very fancy UI.
+
+## Usage
+
+To add global styles, install `@servicetitan/skeleton` and add the following code to your global CSS.
+
+```css
+@import '~@servicetitan/skeleton/dist/styles.css';
+```
+
+### Auto-styles
+
+`skeleton-auto` is a global CSS-class that automatically applies skeleton background for basic anvil components. You just need to add this class to your component when it is in loading state.
+
+<CodeDemo example={AutoExample} srcPath="skeleton/src/demo/auto.tsx" />
+
+### Manual-styles
+
+`skeleton`, `skeleton-item`, and `skeleton-text` is a global CSS-classes that allows you to add skeleton-functionality to any component you want. You just need to add the `skeleton-item` or `skeleton-text` class to all child components you need and then add the `skeleton` class for the parent component when it should be in a loading state.
+
+The difference between `skeleton-item` and `skeleton-text` is that `skeleton-text` adds small border-radius. Use it for text components.
+
+<CodeDemo example={ManualExample} srcPath="skeleton/src/demo/manual.tsx" />
+
+### Fixed width texts
+
+If your component contains several text lines close to each other, they usually have different widths in a loading state. You can use `skeleton-text-75`, `skeleton-text-50` or `skeleton-text-33` CSS-classes to achieve this. You can use it both with `skeleton` and `skeleton-auto` parent classes.

package/docs/table.mdx

@@ -0,0 +1,224 @@
+---
+title: Table
+---
+
+import {
+    TableExample,
+    TableMasterDetailExample,
+    TableStateCachingExample,
+} from '@servicetitan/table/dist/demo';
+
+import { CodeDemo } from '@site/src/components/code-demo';
+
+`@servicetitan/table` is a table implementation we use to display large data sets that require filtering, sorting, pagination and grouping. Use-cases of Table include, but not limited to Reporting Engine, Pricebook Pro, Phones Pro and Feature Management.
+
+Package encapsulates and re-exports table components from `@servicetitan/design-system` with additional set of extensions and MobX state management.
+
+For more info about available options and settings visit [Design System website](https://anvil.servicetitan.com/components/visualization/table/).
+
+## Data Sources
+
+`DataSource` is an abstraction used to provide items to the `TableState`.
+
+```tsx
+interface DataSource<T, TId extends IdType = never> {
+    /** Gets the items, applying the specified operation descriptors */
+    getData(params: State): Promise<ProcessedData<T>>;
+    /** Adds an item to the data source to `index` position (to the end if omitted) */
+    addData?(row: T, index?: number): Promise<T>;
+    /** Applies changes for an item by id */
+    updateData?(id: TId, changes: Partial<T>): Promise<void>;
+    /** Remove an item by id */
+    removeData?(id: TId): Promise<T | undefined>;
+    /** Returns unique identifier by item, must be persistent */
+    idSelector?(row: T): TId;
+    /** Gets all items excluded by the filter (only for persistent data sources) */
+    getFilteredPersistentItems?: (filter: CompositeFilterDescriptor) => T[];
+}
+```
+
+### InMemoryDataSource
+
+It's a persistent data source contains the whole collection of items, operations return a deep copy of items.
+
+#### Constructor parameters
+
+1. `data` - collection of items
+2. `idSelector` - method returns unique identifier by item
+3. `preprocessors` - object with item fields transformations, using for sorting, filtering, and other operations, transformations don't affect on item objects
+
+### AsyncDataSource
+
+It doesn't store any items inside and used to handle server-side table operations.
+
+#### Constructor parameters
+
+1. `operations` - object with get/add/update/remove methods
+2. `idSelector` - method returns unique identifier by item
+
+## TableState
+
+`TableState` makes all dirty `Table`'s job: it stores state, applies operations, paging and etc.
+
+### Constructor parameters
+
+-   `dataSource` - an instance of `DataSource`, source of items for table
+-   `getDetailTableState` - method returns detail table state for an item, used to `Master/Detail` tables
+-   `getFormState` - method returns form state for an item, used to editable tables
+-   `isRowUnselectable` - method used to disable some items selection
+-   `pageSize` - number of items per page, paging is disabled if omitted
+-   `parent` - object with parent item and table state, used to `Master/Detail` tables
+-   `selectionLimit` - number of items can be selected, unlimited if omitted
+-   `initialState` - `TableStateModel` object with initial state values
+
+### Properties
+
+-   `aggregates` - applied aggregate descriptors
+-   `data` - items shown at current page
+-   `dataSource` - currently used data source instance
+-   `filter` - applied filter descriptors
+-   `filteredCount` - number of items after application current filters
+-   `group` - applied group descriptors
+-   `isAllPageRowsSelected` - indicates if all current page items selected
+-   `isAllRowsSelected` - indicates if all items selected
+-   `isSomePageRowsSelected` - indicates if some current page items selected but not all
+-   `isSomeRowsSelected` - indicates if some items selected but not all
+-   `selectableCount` - number of items can be selected
+-   `selectedCount` - number of selected items
+-   `skip` - number of items on previous pages
+-   `sort` - applied sort descriptors
+-   `totalCount` - number of items in data source
+-   `totalFilteredSelectableCount` - number of items can be selected after application current filters
+
+### Methods
+
+-   `addToDataSource` - adds an item to data source and refresh current page
+-   `cancelEdit` - discards item modifications
+-   `cancelEditAll` - discards all items modifications
+-   `deselectAll` - deselects all items
+-   `deselectPage` - deselects all current page items
+-   `edit` - runs edit mode for item
+-   `editAll` - runs edit mode for all items
+-   `exportExcel` - initiates excel export process
+-   `exportPdf` - initiates pdf export process
+-   `fetchData` - applies new descriptors values and refresh current page (only mentioned descriptors will be changed)
+-   `removeFromDataSource` - removes an item from data source and refresh current page
+-   `reset` - resets table to initial state
+-   `saveEdit` - saves item modifications
+-   `saveEditAll` - saves all items modifications
+-   `selectAll` - selects all items
+-   `selectPage` - selects all current page items
+-   `setDataSource` - replaces active data source and goes to the first page
+-   `setRowsSelection` - changes selection of items collection
+-   `toggleRowSelection` - toggles item selection
+-   `exportState` - gets `TableStateModel` object
+-   `importState` - sets state values from `TableStateModel`
+
+## Table
+
+### Props
+
+```tsx
+type ExcludedTableProps =
+    | 'data'
+    | 'editField'
+    | 'filter'
+    | 'onFilterChange'
+    | 'group'
+    | 'onGroupChange'
+    | 'onExpandChange'
+    | 'expandField'
+    | 'sort'
+    | 'onSortChange'
+    | 'onHeaderSelectionChange'
+    | 'onSelectionChange'
+    | 'selectedField'
+    | 'pageable'
+    | 'pageSize'
+    | 'skip'
+    | 'onPageChange'
+    | 'total';
+
+export interface TableProps<T, TId extends IdType = any, P = never, PId extends IdType = never>
+    extends Omit<AnvilTableProps, ExcludedTableProps> {
+    /** Enables items selection, data source should support `idSelector` */
+    selectable?: boolean;
+    /** Enables table export */
+    exportable?: boolean;
+    /** Hides checkbox in the header row, works with `selectable` property */
+    hideSelectAll?: boolean;
+    /** Name of export result file, works with `exportable` property */
+    exportFileName?: string;
+    /** Enables loading spinner */
+    loading?: boolean;
+    /** An instance of `TableState` which must be shown */
+    tableState: TableState<T, TId, P, PId>;
+    /** Enables zebra-striping for table rows, `true` by default */
+    striped?: boolean;
+    /** Enables cell borders, `horizontal` is `true` by default if `striped` is `false` */
+    borders?: { vertical?: boolean; horizontal?: boolean };
+    /** Adds one or more classnames for an element */
+    className?: string;
+    /** Custom selection component, works with `selectable` property */
+    selectionControl?: SelectionControlType;
+}
+```
+
+### Examples
+
+#### Basic
+
+Simple example with some out of the box functionality.
+
+<CodeDemo example={TableExample} srcPath="table/src/demo/overview/table.tsx" />
+
+_This example consists of several files, the full code can be found [here](https://github.com/servicetitan/uikit/tree/master/packages/table/src/demo/overview)._
+
+#### Detail Row
+
+Table rows can expand and show additional content related to the open row. Another useful supported feature is a row selection in detail row that is connected with a global selection state.
+
+<CodeDemo
+    example={TableMasterDetailExample}
+    srcPath="table/src/demo/master-detail/table-master-detail.tsx"
+/>
+
+_This example consists of several files, the full code can be found [here](https://github.com/servicetitan/uikit/tree/master/packages/table/src/demo/master-detail)._
+
+#### State Caching (`TableStateModel`)
+
+Table State can be exported to restore it later. In the example below, we can switch between two states without losing the previous state.
+
+<CodeDemo
+    example={TableStateCachingExample}
+    srcPath="table/src/demo/state-caching/state-caching-table.tsx"
+/>
+
+_This example consists of several files, the full code can be found [here](https://github.com/servicetitan/uikit/tree/master/packages/table/src/demo/state-caching)._
+
+## Utility
+
+### useObservingTableState
+
+`useObservingTableState` is a utility hook to pass observable data and update table contents automatically right inside your React component.
+
+```tsx
+const tableState = useTableState(
+    data, // usual observable data array
+    { pageSize: 5 }, // TableState constructor parameters
+    { idSelector: p => p.ProductID }, // InMemoryDataSource constructor parameters
+    ResetPaginationMode.Never // when to reset pagination (see below)
+);
+
+<Table tableState={tableState} sortable groupable>
+    // some columns
+</Table>;
+```
+
+`ResetPaginationMode` is a parameter indicating whether you would like to reset the current table page on data update or not. Possible modes are:
+
+-   `Never` - never reset the current page (except in cases when new data does not contain enough pages)
+-   `Always` - the current page will be reset on any data update
+-   `OnUpdateDataRoot` (default) - the current page will be reset when the reference to the `data` variable changes. When only the inner contents of the array are changed - the table page is kept.
+
+You can check the demonstration of different pagination reset modes at [anvil-uikit-contrib's Storybook page](https://anvil-uikit-contrib.st.dev/?path=/story/table-useobservingtablestate)

package/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@servicetitan/docs-anvil-uikit-contrib",
+    "version": "25.0.1-canary.0",
+    "description": "",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/servicetitan/anvil-uikit-contrib.git",
+        "directory": "packages/docs"
+    },
+    "files": [
+        "docs"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "cli": {
+        "webpack": false
+    }
+}