React Widgets Library • Package Adjustment

Scripts

On package folder

# To run Storybook sandbox in watch mode
yarn start:storybook
# To build Storybook sandbox for publishing
yarn build:storybook
# To build package library in IIFE format
yarn build:library
# To test package with Testing Library
yarn test
# To publish package in NPM
yarn publish

Install

In webComponent/common from our Yii projects:

yarn install @castine/adjustment

Usage Example

In our Yii projects assets folder:

namespace frontend\assets;

class ReactAdjustmentComponentsAsset extends ReactComponentsAsset
{
    public $sourcePath = '@webComponents/common/node_modules/@castine/adjustment/dist/';
}

In our Yii projects controllers:

public function actionIndex()
{
    return $this->render('index', [
        'graphqlEndpoint'       => $this->graphqlEndpoint(),
        'authorizationToken'    => $this->jwt(),
        'createURL'             => "/trade/adjustment/create",
        'updateURL'             => "/trade/adjustment/update?id=<payreq_id>",
    ]);
}

In our Yii projects views:

use frontend\widgets\ReactComponent;
use frontend\assets\ReactAdjustmentComponentsAsset;

$this->params['containerClass']='container-fluid';
ReactAdjustmentComponentsAsset::register($this);

ReactComponent::widget([
    "component" => "widgets.Adjustment",
    'container' => 'default',
    "params" => [
        'graphqlEndpoint' => $graphqlEndpoint,
        'authorizationToken' => $authorizationToken,
        'createURL' => $createURL,
        'updateURL' => $updateURL,
        'width' => '100%',
        'height' => '100%',
        'density' => 'standard',
        'headerColor' => "#eee",
        'showTools' => false,
        'showSettings' => true,
    ]
])