The itwinjs-sandbox npm module is missing

[kardoka]

I cannot find the @itwinjs-sandbox npm module used in ViewAttributesApp.tsx. It doesn't seem to be mentioned in the API docs and it isn't available on npmjs.com. Have I missed something in the tutorial?

---

⚠ Do not edit this section. It is required for imodeljs.github.io ➟ GitHub issue linking

• LINK: Adding-showcase-widgets-to-your-iTwin-Viewer---iTwin.js-link-to-docs
• TAG: imodeljs-docs-question
• SOURCE: https://www.itwinjs.org/learning/tutorials/showcase-to-viewer/

[StefanRetief]

@itwinjs-sandbox is internal to the showcase, and you can see some its contents by right-clicking on the desired import and using the "go to definition" option. However, most of the content that is in the @itwinjs-sandbox package will not be desirable, and it can be safely removed as an import.

It would be more beneficial to keep the original App.tsx file rather than copying the app file from the showcase and modifying the props necessary on the Viewer component. In the case of adding a ViewAttributesWidget, it would mean importing the component into the App.tsx file:

import { ViewAttributesWidgetProvider } from "./ViewAttributesWidget";

const uiProviders = [new ViewAttributesWidgetProvider()];

And modifying the viewer component like so:

<Viewer
  contextId={process.env.IMJS_AUTH_CLIENT_CONTEXT_ID as string}
  iModelId={process.env.IMJS_AUTH_CLIENT_IMODEL_ID as string}
  authConfig={{ oidcClient: AuthorizationClient.oidcClient }}
  uiProviders={uiProviders}
/>

[kardoka]

@itwinjs-sandbox is internal to the showcase, and you can see some its contents by right-clicking on the desired import and using the "go to definition" option. However, most of the content that is in the @itwinjs-sandbox package will not be desirable, and it can be safely removed as an import.

It would be more beneficial to keep the original App.tsx file rather than copying the app file from the showcase and modifying the props necessary on the Viewer component. In the case of adding a ViewAttributesWidget, it would mean importing the component into the App.tsx file:

import { ViewAttributesWidgetProvider } from "./ViewAttributesWidget";

const uiProviders = [new ViewAttributesWidgetProvider()];

And modifying the viewer component like so:

<Viewer
  contextId={process.env.IMJS_AUTH_CLIENT_CONTEXT_ID as string}
  iModelId={process.env.IMJS_AUTH_CLIENT_IMODEL_ID as string}
  authConfig={{ oidcClient: AuthorizationClient.oidcClient }}
  uiProviders={uiProviders}
/>

I didn't quite understand the file structure at that time. Everything is working fine now, thanks.