@servicetitan/docs-anvil-uikit-contrib 25.0.1 → 25.4.1

package/README.md

@@ -0,0 +1,74 @@
+# `@servicetitan/docs-anvil-uikit-contrib`
+
+This package contains documentation for Frontend Community packages, published at https://docs.st.dev.
+
+<!---
+## Preview changes locally
+
+To preview changes use the local `docusaurus` project. See the `docusaurus` README for instructions.
+-->
+
+## Preview changes in situ
+
+Use `yalc` to preview changes within the entire ServiceTitan Engineering documentation.
+
+### Initial setup
+
+1. Install the `yalc` package globally
+
+```sh
+$ npm i yalc -g
+```
+
+2. Build the `anvil-uikit-contrib` packages
+
+```sh
+$ cd <path-to-anvil-uikit-contrib>
+$ npm run build
+```
+
+3. Run `yalc publish` in the `packages/docs` folder to publish the package documentation locally
+
+```sh
+$ cd ./packages/docs
+$ yalc publish
+```
+
+4. Run `yalc add @servicetitan/docs-anvil-uikit-contrib` in the `servicetitan/docs` repo to use the locally published documents
+
+```sh
+$ cd <path-to-servicetitan/docs>
+$ yalc add @servicetitan/docs-anvil-uikit-contrib
+```
+
+5. Update dependencies
+
+```sh
+$ npm i
+```
+
+6. Start Docusaurus
+
+```sh
+$ npm start
+```
+
+This opens the documentation in a browser window.
+
+### Live updates
+
+To see further changes without having to restart the server,
+
+1. Run `yalc push` in the anvil-uikit-contrib `packages/docs` folder to push changes to `servicetitan/docs`
+
+```sh
+# > anvil-uikit-contrib/packages/docs
+$ yalc push
+```
+
+2. Run `npm run prebuild` (or `npm run import-package-docs`) in `servicetitan/docs`
+
+```sh
+# > servicetitan/docs
+$ npm run prebuild
+```

package/docs/form-state.mdx

@@ -2,8 +2,6 @@
 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

package/docs/notifications-center.mdx

@@ -18,7 +18,7 @@ import {
     ServerCustomExample,
 } from '@servicetitan/notifications/dist/demo';
 
-import { CodeDemo } from '@site/src/components/code-demo';
+import { CodeDemo, DemoCodeBlock } 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.
 
@@ -92,40 +92,42 @@ Notification Center will automatically show notifications to the user sent from
 
 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' +
-    ');';
+export const defaultServerCode = `
+    IUserNotifier notification;
+    
+    var payload = new DefaultPayload {
+        Title = "Server Notification",
+        Message = "Task was pushed into queue."
+    };
+    notification = await notificationCenter.CreateNotifierAsync(
+        GetUserId(),
+        initialPayload: payload
+    );
+    
+    await Task.Delay(2000);
+    
+    payload.Message = "Task is running.";
+    await notification.OnChangePayload(
+        payload,
+        UserNotificationStatus.InProgress
+    );
+    
+    for (int progress = 0; progress < 100; progress += 5) {
+        payload.Progress = progress;
+        await notification.OnChangePayload(payload);
+    
+        await Task.Delay(250);
+    }
+    
+    payload.Message = "Task was successfully completed.";
+    payload.Progress = null;
+    await notification.OnChangePayload(
+        payload,
+        UserNotificationStatus.Success
+    );
+`
+    .replace(/\n\s{4}/g, '\n')
+    .trim();
 
 <Tabs
     defaultValue="example"
@@ -138,7 +140,7 @@ export const defaultServerCode =
         <ServerDefaultExample />
     </TabItem>
     <TabItem value="server">
-        <CodeBlock className="csharp">{defaultServerCode}</CodeBlock>
+        <CodeBlock language="csharp">{defaultServerCode}</CodeBlock>
     </TabItem>
 </Tabs>
 
@@ -148,22 +150,24 @@ But if you need to show something more specific, then you can create a custom no
 
 **_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' +
-    ');';
+export const customServerCode = `
+    public class CustomPayload : INotificationPayload
+    {
+        public string Username { get; set; }
+        public string Message { get; set; }
+    }
+    
+    await notificationCenter.CreateNotifierAsync(
+        GetUserId(),
+        "CustomServerNotification",
+        initialPayload: new CustomPayload {
+           Username = "Jane",
+           Message = "Hello, your order completed."
+        }
+    );
+`
+    .replace(/\n\s{4}/g, '\n')
+    .trim();
 
 <Tabs
     defaultValue="example"
@@ -177,12 +181,10 @@ export const customServerCode =
         <ServerCustomExample />
     </TabItem>
     <TabItem value="client">
-        <CodeBlock className="ts">
-            {require('@servicetitan/notifications/src/demo/server-custom-preview.tsx?raw')}
-        </CodeBlock>
+        <DemoCodeBlock srcPath="notifications/src/demo/server-custom-preview.tsx" />
     </TabItem>
     <TabItem value="server">
-        <CodeBlock className="csharp">{customServerCode}</CodeBlock>
+        <CodeBlock language="csharp">{customServerCode}</CodeBlock>
     </TabItem>
 </Tabs>
 

package/docs/table.mdx

@@ -170,7 +170,7 @@ export interface TableProps<T, TId extends IdType = any, P = never, PId extends
 
 Simple example with some out of the box functionality.
 
-<CodeDemo example={TableExample} srcPath="table/src/demo/overview/table.tsx" />
+<CodeDemo example={TableExample} srcPath="table/src/demo/overview/table.tsx" theme="light" />
 
 _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)._
 
@@ -181,6 +181,7 @@ Table rows can expand and show additional content related to the open row. Anoth
 <CodeDemo
     example={TableMasterDetailExample}
     srcPath="table/src/demo/master-detail/table-master-detail.tsx"
+    theme="light"
 />
 
 _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)._
@@ -192,6 +193,7 @@ Table State can be exported to restore it later. In the example below, we can sw
 <CodeDemo
     example={TableStateCachingExample}
     srcPath="table/src/demo/state-caching/state-caching-table.tsx"
+    theme="light"
 />
 
 _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)._

package/package.json

@@ -1,17 +1,20 @@
 {
     "name": "@servicetitan/docs-anvil-uikit-contrib",
-    "version": "25.0.1",
+    "version": "25.4.1",
     "description": "",
     "repository": {
         "type": "git",
         "url": "https://github.com/servicetitan/anvil-uikit-contrib.git",
-        "directory": "packages/docs"
+        "directory": "docusaurus"
     },
-    "files": ["docs"],
+    "files": [
+        "docs"
+    ],
     "publishConfig": {
         "access": "public"
     },
     "cli": {
         "webpack": false
-    }
+    },
+    "gitHead": "47af4bd32673af7e0292f1e55316164615135b74"
 }

package/docs/backendless.md

@@ -1,35 +0,0 @@
----
-id: backendless
-title: Backendless
----
-
-Backendless lets you develop the frontend in the monolith app without running the backend.
-
-## Setup
-
-1. `cd` to your **app** project, then to `Clients/Web`
-2. Run `npm start`
-3. Run `npm run wwwroot` (admin or sudo rights are required to generate a trusted HTTPS certificate during the first run)
-4. In a browser, open https://next.servicetitan.com/manage (or any other current environment), and login with your ServiceTitan credentials.
-5. Open the developer console (**CTRL+Shift+J** on PC or **CMD+OPT+J** on Mac), and run `backendless.start()`
-6. The ST page should reload and you should now see the Backendless logo
-7. Have a happy development! 🙂
-
-To deactivate Backendless, you can run `backendless.end()` or unregister the Backendless service worker via the developer tools.
-
-*If you find any issues or have additional questions, please post them in the [#dev-backendless](https://servicetitan.slack.com/archives/C018D8C088L) Slack channel.*
-
-## Troubleshooting
-
-### WSL Certificate
-
-If you are using WSL2 on Windows, and are running `npm run wwwroot` from within WSL, you may experience an issue with your browser in Windows not trusting the certificate that gets generated and used for localhost.
-
-One solution is to run `npm run wwwroot` from Windows instead of WSL, so that the certificate will get correctly installed and trusted within Windows.
-
-There is another, longer solution that will allow you to continue running the script from within WSL after some setup.
-1. Run `npm run wwwroot` within WSL first, so that WSL will know it generated a certificate already. Those certificates will likely be added to `/home/[UBUNTU_USERNAME]/.config/https-localhost/localhost.crt`.
-2. Run `npm run wwwroot` within Windows. This may require you cloning the repo again from Windows, and will require node to be installed on Windows. This will add certificates to `C:\Users\[USERNAME]\AppData\Roaming\https-localhost`.
-3. Copy the **localhost.crt** and **localhost.key** from `C:\Users\[username]\AppData\Roaming\https-localhost` to `/home/[UBUNTU_USERNAME]/.config/https-localhost/localhost.crt`. The WSL mount can be accessed from Windows via `\\wsl$\Ubuntu\home\[UBUNTU_USERNAME]]\.config\https-localhost\localhost.crt`.
-
-From then on, you should be able to run `npm run wwwroot` directly from WSL with no issues, because it is serving using the certificate generated from Windows and Windows trusts that certificate.