Using components from @umbraco-cms/backoffice in my own components

[enkelmedia]

Hi!

I know it's easy to reuse backoffice components when developing extensions when they are mounted in the backoffice. I'm trying to use Storybook to build up the "basics" and then mount components at a later stage.

For example I'm trying to use the umb-input-date element in one of my tests.

The only way that I've managed to get this to be imported is by referencing the full path to the element it self

import './../../../../node_modules/@umbraco-cms/backoffice/dist-cms/packages/core/components/input-date/input-date.element.js';

render() {
return html`<div>
   <uui-box>
        <umb-input-date></umb-input-date>
   </uui-box>
</div>`
}

I feel quite sure that this is not the "right" way to use one of the components exposed by the backoffice NPM-package.

Importing the type for the element works fine:

import {UmbInputDateElement} from '@umbraco-cms/backoffice/components';

But this does not include the code to render the component in my artifacts, I've tried this:

import '@umbraco-cms/backoffice/components';

But at this point it just blows up:

It would be nice to know if this use case is considered/tested for when building the NPM-package build and also if anyone knows how I could import these elements in the right way so that I can use them in while building components using storybook.

As a sidenote: This works great for importing all the elements from UUI.

import '@umbraco-cms/backoffice/external/uui';