ncochard

import {Component, Fragment} from "react";
import * as React from "react";
import { MySimpleComponentA } from "./my-componentA";
// import { MySimpleComponentB } from "./my-componentB";
import { MySimpleComponentC } from "./my-componentC";

export class MyApp extends Component {
    public render() {
        return <Fragment>
            <MySimpleComponentA lastName="Cochard" /> {/*DOES NOT COMPILE*/}

ncochard

The function withInfo(...) in @storybook/addon-info accepts 0 or 1 argument.

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

const { Component } = React;

storiesOf('Component', module)

.add('no info',

ncochard

When you create a npm package, remember it might be used in a browser or a server, or even a command line utility… For each package you create, please pay attention at what it will be used for:

1. Is it going to be used as a dependency to a nodejs application that is not bundled? (e.g. command line utilities)
2. Is it going to be used as a dependency to a nodejs application that is bundled? (e.g. AWS Lambdas)
3. Is it going to be used as a dependency to a browser application (always bundled)?.

• In cases 2) and 3) you want to allow for tree shaking.
• In cases 1) and 2) you want to benefit from the "ES6"/"ES next" features supported natively by nodejs.
• In case 3) you also want to benefit from the native support of "ES6" from your browser.