[Tree-widget]: learning snippets

apps/learning-snippets/package.json

@@ -4,13 +4,14 @@
   "description": "Learning snippets for ReadMes",
   "private": true,
   "scripts": {
-    "build": "tsc",
+    "build": "npm run link:deps && tsc",
     "build:watch": "tsc -w",
     "clean": "rimraf lib build",
     "cover": "npm run -s test",
     "lint": "eslint ./src/**/*.{ts,tsx}",
     "test": "mocha --enable-source-maps --config ./.mocharc.json",
-    "docs": "betools extract --fileExt=ts,tsx --extractFrom=./src --recursive --out=./build/docs/extract"
+    "docs": "betools extract --fileExt=ts,tsx --extractFrom=./src --recursive --out=./build/docs/extract",
+    "link:deps": "node ./scripts/linkWorkspaceDeps.js"
   },
   "dependencies": {
     "@itwin/tree-widget-react": "workspace:*",

apps/learning-snippets/scripts/linkWorkspaceDeps.js

@@ -0,0 +1,75 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const fs = require("fs");
+const path = require("path");
+const watch = process.argv[2] && process.argv[2] === "--watch";
+
+const packages = [
+  {
+    name: "@itwin/tree-widget-react",
+    dir: "tree-widget",
+  },
+];
+
+linkPackages();
+
+function linkPackages() {
+  for (const pack of packages) {
+    const sourcePath = getSourceLibPath(pack.dir, pack.libDirName);
+    if (!fs.existsSync(sourcePath)) {
+      console.warn(`Package ${pack.name} source path does not exist: ${sourcePath}`);
+      continue;
+    }
+    const targetPath = getTargetLibPath(pack.name, pack.libDirName);
+
+    copyChangedFiles(pack.name, sourcePath, targetPath);
+
+    if (watch) {
+      let lastChange = undefined;
+      fs.watch(sourcePath, { recursive: true }, () => {
+        const now = new Date();
+        if (now === lastChange) {
+          return;
+        }
+        lastChange = now;
+        setTimeout(() => {
+          if (now === lastChange) {
+            copyChangedFiles(pack.name, sourcePath, targetPath);
+            lastChange = undefined;
+          }
+        }, 100);
+      });
+    }
+  }
+}
+
+function copyChangedFiles(packageName, sourceDir, targetDir) {
+  console.log(`[${new Date().toLocaleTimeString()}] Updating ${packageName}`);
+  fs.cpSync(sourceDir, targetDir, {
+    recursive: true,
+    filter: (source, dest) => {
+      if (!fs.existsSync(dest)) {
+        return true;
+      }
+      const sourceStat = fs.statSync(source);
+      if (sourceStat.isDirectory()) {
+        return true;
+      }
+      const destStat = fs.statSync(dest);
+      return sourceStat.mtime.getTime() > destStat.mtime.getTime();
+    },
+  });
+}
+
+function getTargetLibPath(packageName, distDirName) {
+  const packagePath = path.resolve(__dirname, "../node_modules", packageName);
+  const realPath = fs.realpathSync(packagePath);
+  return path.resolve(realPath, distDirName ?? "lib");
+}
+
+function getSourceLibPath(packageDir, distDirName) {
+  const sourcePath = path.resolve(__dirname, "../../../packages/itwin", packageDir);
+  return path.resolve(sourcePath, distDirName ?? "lib");
+}

apps/learning-snippets/src/test/tree-widget/CategoriesTree.test.tsx

@@ -14,10 +14,10 @@ import { ECSchemaRpcInterface } from "@itwin/ecschema-rpcinterface-common";
 import { ECSchemaRpcImpl } from "@itwin/ecschema-rpcinterface-impl";
 import { PresentationRpcInterface } from "@itwin/presentation-common";
 import { HierarchyCacheMode, initialize as initializePresentationTesting, terminate as terminatePresentationTesting } from "@itwin/presentation-testing";
-// __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Categories-tree-example-imports
+// __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.CategoriesTreeExampleImports
 import { CategoriesTreeComponent } from "@itwin/tree-widget-react";
 // __PUBLISH_EXTRACT_END__
-// __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Custom-categories-tree-example-imports
+// __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.CustomCategoriesTreeExampleImports
 import {
   TreeWithHeader,
   useCategoriesTree,
@@ -35,8 +35,8 @@ import { cleanup, render, waitFor } from "@testing-library/react";
 import { buildIModel, insertPhysicalElement, insertPhysicalModelWithPartition, insertSpatialCategory } from "../../utils/IModelUtils";
 import { getSchemaContext, getTestViewer, mockGetBoundingClientRect, TestUtils } from "../../utils/TestUtils";
 
-describe("Tree-widget", () => {
-  describe("Learning-snippets", () => {
+describe("Tree widget", () => {
+  describe("Learning snippets", () => {
     describe("Components", () => {
       describe("Categories tree", () => {
         before(async function () {
@@ -73,7 +73,7 @@ describe("Tree-widget", () => {
           sinon.restore();
         });
 
-        it("Categories tree snippet", async function () {
+        it.only("Renders <CategoriesTreeComponent />", async function () {
           const imodel = (
             await buildIModel(this, async (builder) => {
               const physicalModel = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel" });
@@ -88,7 +88,7 @@ describe("Tree-widget", () => {
           sinon.stub(UiFramework, "getIModelConnection").returns(imodel);
           mockGetBoundingClientRect();
 
-          // __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Categories-tree-example
+          // __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.CategoriesTreeExample
           function MyWidget() {
             return (
               <CategoriesTreeComponent
@@ -110,7 +110,7 @@ describe("Tree-widget", () => {
           cleanup();
         });
 
-        it("Custom categories tree snippet", async function () {
+        it("Renders custom categories tree", async function () {
           const imodelConnection = (
             await buildIModel(this, async (builder) => {
               const physicalModel = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel" });
@@ -125,7 +125,7 @@ describe("Tree-widget", () => {
           sinon.stub(UiFramework, "getIModelConnection").returns(imodelConnection);
           mockGetBoundingClientRect();
 
-          // __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Custom-categories-tree-example
+          // __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.CustomCategoriesTreeExample
           type VisibilityTreeRendererProps = ComponentPropsWithoutRef<typeof VisibilityTreeRenderer>;
           type CustomCategoriesTreeRendererProps = Parameters<ComponentPropsWithoutRef<typeof VisibilityTree>["treeRenderer"]>[0];
 

apps/learning-snippets/src/test/tree-widget/CustomTree.test.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 /* eslint-disable import/no-duplicates */
 import { join } from "path";
-// __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Custom-tree-example-imports
+// __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.CustomTreeExampleImports
 import type { ComponentPropsWithoutRef } from "react";
 import type { IModelConnection } from "@itwin/core-frontend";
 import { Tree, TreeRenderer } from "@itwin/tree-widget-react";
@@ -24,8 +24,8 @@ import { cleanup, render, waitFor } from "@testing-library/react";
 import { buildIModel, insertPhysicalElement, insertPhysicalModelWithPartition, insertSpatialCategory } from "../../utils/IModelUtils";
 import { getSchemaContext, getTestViewer, mockGetBoundingClientRect, TestUtils } from "../../utils/TestUtils";
 
-describe("Tree-widget", () => {
-  describe("Learning-snippets", () => {
+describe("Tree widget", () => {
+  describe("Learning snippets", () => {
     describe("Components", () => {
       before(async function () {
         await initializePresentationTesting({
@@ -61,7 +61,7 @@ describe("Tree-widget", () => {
         sinon.restore();
       });
 
-      it("Custom tree snippet", async function () {
+      it("Renders custom tree", async function () {
         const imodelConnection = (
           await buildIModel(this, async (builder) => {
             const physicalModel = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel" });
@@ -76,7 +76,7 @@ describe("Tree-widget", () => {
         sinon.stub(UiFramework, "getIModelConnection").returns(imodelConnection);
         mockGetBoundingClientRect();
 
-        // __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Custom-tree-example
+        // __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.CustomTreeExample
         type TreeProps = ComponentPropsWithoutRef<typeof Tree>;
         const getHierarchyDefinition: TreeProps["getHierarchyDefinition"] = ({ imodelAccess }) => {
           // create a hierarchy definition that defines what should be shown in the tree

apps/learning-snippets/src/test/tree-widget/CustomVisibilityTree.test.tsx

@@ -6,7 +6,7 @@
 import { join } from "path";
 import sinon from "sinon";
 import { UiFramework } from "@itwin/appui-react";
-// __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Custom-visibility-tree-example-imports
+// __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.CustomVisibilityTreeExampleImports
 import { BeEvent } from "@itwin/core-bentley";
 import { VisibilityTree, VisibilityTreeRenderer } from "@itwin/tree-widget-react";
 import { createClassBasedHierarchyDefinition, createNodesQueryClauseFactory } from "@itwin/presentation-hierarchies";
@@ -28,8 +28,8 @@ import { getSchemaContext, getTestViewer, mockGetBoundingClientRect, TestUtils }
 import type { HierarchyNode } from "@itwin/presentation-hierarchies";
 import type { VisibilityStatus } from "@itwin/tree-widget-react";
 
-describe("Tree-widget", () => {
-  describe("Learning-snippets", () => {
+describe("Tree widget", () => {
+  describe("Learning snippets", () => {
     describe("Components", () => {
       before(async function () {
         await initializePresentationTesting({
@@ -65,7 +65,7 @@ describe("Tree-widget", () => {
         sinon.restore();
       });
 
-      it("Custom visibility tree snippet", async function () {
+      it("Renders custom visibility tree", async function () {
         const imodelConnection = (
           await buildIModel(this, async (builder) => {
             const physicalModel = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel" });
@@ -80,7 +80,7 @@ describe("Tree-widget", () => {
         sinon.stub(UiFramework, "getIModelConnection").returns(imodelConnection);
         mockGetBoundingClientRect();
 
-        // __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Custom-visibility-tree-example
+        // __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.CustomVisibilityTreeExample
         type VisibilityTreeProps = ComponentPropsWithoutRef<typeof VisibilityTree>;
         const getHierarchyDefinition: VisibilityTreeProps["getHierarchyDefinition"] = ({ imodelAccess }) => {
           // create a hierarchy definition that defines what should be shown in the tree
@@ -118,11 +118,11 @@ describe("Tree-widget", () => {
           return {
             // event that can be used to notify tree when visibility of instances represented by tree nodes changes from outside.
             onVisibilityChange: new BeEvent(),
-            async getVisibilityStatus(_node: HierarchyNode): Promise<VisibilityStatus> {
+            async getVisibilityStatus(node: HierarchyNode): Promise<VisibilityStatus> {
               return { state: "visible" };
               // determine visibility status of the instance represented by tree node.
             },
-            async changeVisibility(_node: HierarchyNode, _on: boolean): Promise<void> {
+            async changeVisibility(node: HierarchyNode, on: boolean): Promise<void> {
               // change visibility of the instance represented by tree node.
             },
             dispose() {

apps/learning-snippets/src/test/tree-widget/FilteredPaths.test.tsx

@@ -25,7 +25,7 @@ import { getSchemaContext, getTestViewer, mockGetBoundingClientRect, TestUtils }
 import type { SelectionStorage } from "@itwin/unified-selection";
 import type { IModelConnection, Viewport } from "@itwin/core-frontend";
 
-// __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Get-filtered-paths-component-example
+// __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.GetFilteredPathsComponentExample
 type useModelsTreeProps = Parameters<typeof useModelsTree>[0];
 
 interface CustomCategoriesTreeProps {
@@ -50,8 +50,8 @@ function CustomModelsTreeComponent({ getFilteredPaths, viewport, selectionStorag
 }
 // __PUBLISH_EXTRACT_END__
 
-describe("Tree-widget", () => {
-  describe("Learning-snippets", () => {
+describe("Tree widget", () => {
+  describe("Learning snippets", () => {
     describe("Components", () => {
       describe("Filtered paths", () => {
         before(async function () {
@@ -88,7 +88,7 @@ describe("Tree-widget", () => {
           sinon.restore();
         });
 
-        it("Filtered paths snippet", async function () {
+        it("Renders custom models tree component with filtered paths", async function () {
           const imodel = await buildIModel(this, async (builder) => {
             const physicalModel = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel" });
             const physicalModel2 = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel 2" });
@@ -105,7 +105,7 @@ describe("Tree-widget", () => {
           mockGetBoundingClientRect();
 
           const { getByText, queryByText } = render(
-            // __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Get-filtered-paths-example
+            // __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.GetFilteredPathsExample
             <CustomModelsTreeComponent
               selectionStorage={unifiedSelectionStorage}
               imodel={imodel.imodel}
@@ -127,7 +127,7 @@ describe("Tree-widget", () => {
           cleanup();
         });
 
-        it("Custom Filtered paths snippet", async function () {
+        it("Renders custom models tree component with filtered paths with options", async function () {
           const imodel = await buildIModel(this, async (builder) => {
             const physicalModel = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel" });
             const physicalModel2 = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel 2" });
@@ -144,7 +144,7 @@ describe("Tree-widget", () => {
           mockGetBoundingClientRect();
 
           const { getByText, queryByText } = render(
-            // __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Get-filtered-paths-with-options-example
+            // __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.GetFilteredPathsWithOptionsExample
             <CustomModelsTreeComponent
               selectionStorage={unifiedSelectionStorage}
               imodel={imodel.imodel}

apps/learning-snippets/src/test/tree-widget/GetSchemaContext.test.tsx

@@ -11,14 +11,14 @@ import { ECSchemaRpcImpl } from "@itwin/ecschema-rpcinterface-impl";
 import { PresentationRpcInterface } from "@itwin/presentation-common";
 import { HierarchyCacheMode, initialize as initializePresentationTesting, terminate as terminatePresentationTesting } from "@itwin/presentation-testing";
 import { buildIModel, insertPhysicalElement, insertPhysicalModelWithPartition, insertSpatialCategory } from "../../utils/IModelUtils";
-// __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Get-schema-context-example-imports
+// __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.GetSchemaContextExampleImports
 import { SchemaContext } from "@itwin/ecschema-metadata";
 import { ECSchemaRpcLocater } from "@itwin/ecschema-rpcinterface-common";
 import type { IModelConnection } from "@itwin/core-frontend";
 // __PUBLISH_EXTRACT_END__
 
-describe("Tree-widget", () => {
-  describe("Learning-snippets", () => {
+describe("Tree widget", () => {
+  describe("Learning snippets", () => {
     describe("Components", () => {
       describe("GetSchemaContext", () => {
         before(async function () {
@@ -44,7 +44,7 @@ describe("Tree-widget", () => {
           await terminatePresentationTesting();
         });
 
-        it("getSchemaContext learning snippet", async function () {
+        it("Returns schema context", async function () {
           const imodelConnection = (
             await buildIModel(this, async (builder) => {
               const model = insertPhysicalModelWithPartition({ builder, codeValue: "model", partitionParentId: IModel.rootSubjectId });
@@ -53,13 +53,12 @@ describe("Tree-widget", () => {
               return { model, category };
             })
           ).imodel;
-          // __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Get-schema-context-example
+          // __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.GetSchemaContextExample
           const schemaContextCache = new Map<string, SchemaContext>();
           function getSchemaContext(imodel: IModelConnection) {
             const key = imodel.getRpcProps().key;
             let schemaContext = schemaContextCache.get(key);
             if (!schemaContext) {
-              // eslint-disable-next-line @itwin/no-internal
               const schemaLocater = new ECSchemaRpcLocater(imodel.getRpcProps());
               schemaContext = new SchemaContext();
               schemaContext.addLocater(schemaLocater);

apps/learning-snippets/src/test/tree-widget/IModelContentTree.test.tsx

@@ -11,16 +11,16 @@ import { ECSchemaRpcInterface } from "@itwin/ecschema-rpcinterface-common";
 import { ECSchemaRpcImpl } from "@itwin/ecschema-rpcinterface-impl";
 import { PresentationRpcInterface } from "@itwin/presentation-common";
 import { HierarchyCacheMode, initialize as initializePresentationTesting, terminate as terminatePresentationTesting } from "@itwin/presentation-testing";
-// __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Imodel-content-tree-example-imports
+// __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.ImodelContentTreeExampleImports
 import { IModelContentTreeComponent } from "@itwin/tree-widget-react";
 // __PUBLISH_EXTRACT_END__
 import { createStorage } from "@itwin/unified-selection";
 import { cleanup, render, waitFor } from "@testing-library/react";
 import { buildIModel, insertSubject } from "../../utils/IModelUtils";
 import { getSchemaContext, getTestViewer, mockGetBoundingClientRect, TestUtils } from "../../utils/TestUtils";
 
-describe("Tree-widget", () => {
-  describe("Learning-snippets", () => {
+describe("Tree widget", () => {
+  describe("Learning snippets", () => {
     describe("Components", () => {
       describe("Imodel content tree", () => {
         before(async function () {
@@ -57,7 +57,7 @@ describe("Tree-widget", () => {
           sinon.restore();
         });
 
-        it("Imodel content tree snippet", async function () {
+        it("Renders <IModelContentTreeComponent />", async function () {
           const imodel = (
             await buildIModel(this, async (builder) => {
               const subjectA = insertSubject({ builder, codeValue: "A", parentId: IModel.rootSubjectId });
@@ -70,7 +70,7 @@ describe("Tree-widget", () => {
           sinon.stub(UiFramework, "getIModelConnection").returns(imodel);
           mockGetBoundingClientRect();
 
-          // __PUBLISH_EXTRACT_START__ Presentation.Tree-widget.Imodel-content-tree-example
+          // __PUBLISH_EXTRACT_START__ Presentation.TreeWidget.ImodelContentTreeExample
           function MyWidget() {
             return (
               <IModelContentTreeComponent
@@ -84,7 +84,7 @@ describe("Tree-widget", () => {
           // __PUBLISH_EXTRACT_END__
           const { getByText } = render(<MyWidget />);
 
-          await waitFor(() => getByText("tree-widget-learning-snippets-components-imodel-content-tree-imodel-content-tree-snippet"));
+          await waitFor(() => getByText("tree-widget-learning-snippets-components-imodel-content-tree-renders-imodelcontenttreecomponent-"));
           cleanup();
         });
       });