Hey all, I am trying to integrate Atlaskit React c...

# javascript

[Alexander Weickmann]

Hey all,
I am trying to integrate Atlaskit React components into a Kotlin Fullstack application. Unfortunately, I cannot get this working, would appreciate any help.

I am starting with this component, because it is the simplest in terms of props:
Overview: https://atlaskit.atlassian.com/packages/core/blanket
Code: https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/packages/core/blanket/src/Blanket.tsx

Compiled JS:

import * as tslib_1 from "tslib";
import * as React from 'react';
import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent, } from '@atlaskit/analytics-next';
import { name as packageName, version as packageVersion } from './version.json';
import Div from './styled';
var Blanket = /** @class */ (function (_super) {
    tslib_1.__extends(Blanket, _super);
    function Blanket() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Blanket.prototype.render = function () {
        var _a = this.props, canClickThrough = _a.canClickThrough, isTinted = _a.isTinted, onBlanketClicked = _a.onBlanketClicked;
        var onClick = canClickThrough ? null : onBlanketClicked;
        var containerProps = { canClickThrough: canClickThrough, isTinted: isTinted, onClick: onClick };
        return React.createElement(Div, tslib_1.__assign({}, containerProps));
    };
    Blanket.defaultProps = {
        canClickThrough: false,
        isTinted: false,
        onBlanketClicked: function () { },
    };
    return Blanket;
}(React.Component));
export { Blanket as BlanketWithoutAnalytics };
var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
export default withAnalyticsContext({
    componentName: 'blanket',
    packageName: packageName,
    packageVersion: packageVersion,
})(withAnalyticsEvents({
    onBlanketClicked: createAndFireEventOnAtlaskit({
        action: 'clicked',
        actionSubject: 'blanket',
        attributes: {
            componentName: 'blanket',
            packageName: packageName,
            packageVersion: packageVersion,
        },
    }),
})(Blanket));
//# sourceMappingURL=Blanket.js.map

My binding:

@file:JsModule("@atlaskit/blanket")

package atlaskit

import org.w3c.dom.events.Event
import react.*

external class Blanket : Component<BlanketProps, RState> {
    override fun render()
}

external interface BlanketProps : RProps {
    var canClickThrough: Boolean
    var isTinted: Boolean
    var onBlanketClicked: (Event) -> Unit
}

Creation:

child(Blanket::class) {
                    attrs.isTinted = true
                    attrs.canClickThrough = true
                    attrs.onBlanketClicked = {}
                }

This prints following error to the console: "Uncaught (in promise) TypeError: Cannot read property '$metadata$' of undefined"
Any tips on what I am doing wrong?

[Alexander Weickmann]

Actually got it basically working, with the help of this guide:
https://stackoverflow.com/questions/51431848/how-to-import-node-module-in-react-kotlin