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

package/README.md

@@ -0,0 +1,61 @@
+# `@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.
+
+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 `docs` package folder to publish the package 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 package
+
+```sh
+$ cd <path-to-servicetitan-docs>
+$ yalc add @servicetitan/docs-anvil-uikit-contrib
+```
+
+5. Update dependencies and start Docusaurus
+
+```sh
+$ npm i
+```
+
+6. Start Docusaurus
+
+```sh
+$ npm start
+```
+
+This opens the documentation in a browser window.
+
+To see further changes without having to restart the server, run `yalc push` in the anvil-uikit-contrib `docs` package folder
+
+```sh
+$ cd <path-to-anvil-uikit-contrib>/packages/docs
+$ yalc push
+```

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,11 +1,11 @@
 {
     "name": "@servicetitan/docs-anvil-uikit-contrib",
-    "version": "25.0.1-canary.0",
+    "version": "25.4.0",
     "description": "",
     "repository": {
         "type": "git",
         "url": "https://github.com/servicetitan/anvil-uikit-contrib.git",
-        "directory": "packages/docs"
+        "directory": "docusaurus"
     },
     "files": [
         "docs"
@@ -15,5 +15,6 @@
     },
     "cli": {
         "webpack": false
-    }
+    },
+    "gitHead": "7811e93c496c0ff26beb0f80475024718c1fc680"
 }