$ npm install -g noodl-lab-cli

$ mkdir my-workspace-folder
$ cd my-workspace-folder

$ curl -O https://s3.amazonaws.com/updates.noodlcloud.com/lab
s/noodl-starter-lab.zip
$ unzip noodl-starter-lab.zip

$ noodl-lab init --accessKey "XXX" --name "your-workspace-nam
e"

$ noodl-lab push

$ cd library
$ curl -O https://s3.amazonaws.com/updates.noodlcloud.com/lab
s/react-module-template.zip
$ unzip react-module-template.zip

feed
library/
newmodule-project
newmodule
newmodule-icon.png

$ mv newmodule mymodule
$ mv newmodule-project mymodule-project
$ mv newmodule-icon.png mymodule-icon.png

{
"name"︓ "com-your-domain-module-name"
...
}

$ npm install

$ npm run build

mymodule/
  assets/
  node_modules/
  src/
    index.js
  package.json
  package-lock.json
  webpack.config.json

[
   {
      "label":"My React Module",
      "desc":"I made this myself!",
      "thumb":"mymodule-icon.png",
      "project":"mymodule-project"
 }
]

$ noodl-lab push

import FieldRange from '@atlaskit/range'; // https://atlaskit.atlassian.com/packages/core/range

//サードパーティReactコンポーネントの例
//Third party react component example

const AtlasKitRange = {
    //ノード名、Noodlで呼ばれるもの。必須
    name: 'Atlas Range', //name of the node, this is what it'll be called in Noodl. Mandatory
    //カテゴリも必須
    category: 'Atlas', //A category is also mandatory.

    //ここでReactコンポーネントを返す必要があります
    //Here we need to return the React Component.
    getReactComponent() {
        return FieldRange;
    },

    //Reactコンポーネントに転送されるすべての入力リスト
    //A list of all inputs that will be forwarded to the react component
    inputProps: {
        isDisabled: {type: 'boolean', default: false},
        max: {type: 'number', default: 100},
        min: {type: 'number', default: 0},
        value: {type: 'number'}
    },
    //出力プロパティはNoodlノードの出力で生成される以外、inputPropsと非常に似ています
    //これらは通常Reactのコールバックで、Noodlは値をキャッチして出力として送信します
    //these props are very similar to the inputProps, except that they will generate outputs on the Noodl node
    //these are typically callbacks in React, and Noodl will catch the value and and send it as an output
    outputProps: {
        onChange: {
            type: 'number',
            displayName: 'New Value',
            // Reactコンポーネントに送信されるカスタムコールバックを定義できます。Noodlはここで出力で送信する値が返ってくることを期待しています
            // この例は非常に単純なので、カスタムの「getValue」関数を定義する必要はありません。
            // Noodlが自動的に判断しgetValu関数を補完します 
            // You can define a custom callback that's sent to the React component. Noodl expect you to return a value here
            // that Noodl will send on the output. In this case its so simple that we don't need to define a custom 'getValue' function.
            // Noodl will automatically figure it out 
            // getValue: sliderValue => sliderValue
        }
    }
}

//カスタムReactコンポーネントの例
//Custom react component example

function MyCustomReactComponent(props) {
    const style = {
        color: props.textColor,
        backgroundColor: props.backgroundColor,
        borderRadius: '10px',
        padding: '20px',
        marginBottom: props.marginBottom
    };

    return <div style={style} onClick={props.onClick} >{props.children}</div>
}

const MyCustomReactComponentNode = {
    name: 'Custom React Component',
    category: 'Tutorial',
    getReactComponent() {
        return MyCustomReactComponent;
    },
    inputProps: {
        backgroundColor: {type: 'color', default: 'white'},
        marginBottom: {type: {name: 'number', units: ['px'], defaultUnit: 'px'}, default: 10}
    },
    outputProps: {
        onClick: {type: 'signal', displayName: 'Click'}
    }
}


Noodl.defineModule({
    reactNodes: [
        AtlasKitRange,
        MyCustomReactComponentNode
    ],
    nodes:[
    ],
    setup() {
        //起動時に一度呼び出されます
        //this is called once on startup
    }
});