Help ReactJS classes for development of vis widgets based on ReactJS

Development

How to develop a vis widget based on React?

See here: https://github.com/ioBroker/ioBroker.vis-2-widgets-react-template

Migration v2 => v3

• Add to import import { getProps } from '@iobroker/vis-2-widgets-react-dev/visDevUtils';
• Add in constructor

    constructor(props) {
        super(props);
        this.refParent = React.createRef();

        this.widgetProps = getProps(
            {
                socket: this.socket,
                theme: this.state.theme,
                refParent: this.refParent,
            },
            {
                // Your test settings for widget
                type: 'all',
            },
            {
                // Your test styles for widget
                width: 600,
                height: 200,
            },
        );
    }

• Modify renderer

    renderWidget() {
        return <div
            ref={this.refParent}
            style={{
                width: 600,
                height: 200,
            }}
        >
            <DemoWidget
                {...this.widgetProps}
            />
        </div>;
    }

Here is an example of the widget:

import React from 'react';

import WidgetDemoApp from '@iobroker/vis-2-widgets-react-dev/widgetDemoApp';
import { I18n } from '@iobroker/adapter-react-v5';

import { getProps } from '@iobroker/vis-2-widgets-react-dev/visDevUtils';

import DemoWidget from './DemoWidget';
import translations from './translations';

class App extends WidgetDemoApp {
    constructor(props) {
        super(props);

        // init translations
        I18n.extendTranslations(translations);

        this.refParent = React.createRef();

        this.widgetProps = getProps(
            {
                socket: this.socket,
                theme: this.state.theme,
                refParent: this.refParent,
            },
            {
                type: 'all',
            },
            {
                width: 600,
                height: 200,
            },
        );
    }

    renderWidget() {
        return <div
            ref={this.refParent}
            style={{
                width: 600,
                height: 200,
            }}
        >
            <DemoWidget
                {...this.widgetProps}
            />
        </div>;
    }
}

export default App;

Changelog

4.0.4 (2024-11-25)

• (bluefox) Updated adapter-react-v5

4.0.3 (2024-09-05)

• (bluefox) Improvement for vis-2 widgets
• (bluefox) Removed gulp from a build process

3.0.7 (2024-07-23)

• (bluefox) Optimization of packages

3.0.6 (2024-07-22)

• (bluefox) Corrected deleteFoldersRecursive function

3.0.5 (2024-07-20)

• (bluefox) Rewritten with typescript

2.0.2 (2024-07-10)

• (bluefox) Updated packages

2.0.1 (2024-06-30)

• (Steiger04) Removed version warning

2.0.0 (2024-06-30)

• (bluefox) Removed dependency to @mui/styles

1.0.7 (2024-06-09)

• (bluefox) updated packages

1.0.6 (2024-04-18)

• (bluefox) added getWidgetView to visRxWidget

1.0.5 (2023-12-05)

• (bluefox) updated packages

1.0.2 (2023-12-04)

• (foxriver76) port to @iobroker/types

1.0.1 (2023-11-07)

• (bluefox) Corrected error in deleteFoldersRecursive

1.0.0 (2023-10-31)

• (bluefox) Updated packages

0.4.6 (2023-07-31)

• (bluefox) Corrected simulation of widgets

0.4.5 (2023-07-30)

• (bluefox) Packages updated

0.4.4 (2023-07-01)

• (bluefox) Corrected simulation of widgets

0.4.2 (2023-06-27)

• (bluefox) Packages updated

0.4.0 (2023-06-07)

• (bluefox) Packages updated
• (bluefox) Disable craco-esbuild plugin

0.3.19 (2023-03-22)

• (bluefox) Added gulp helper

0.3.16 (2023-03-17)

• (bluefox) Added developer settings: proxy

0.3.15 (2023-03-07)

• (bluefox) Try to fix error in webpack

0.3.14 (2023-02-27)

• (dilesoft) Try to fix error in webpack

0.3.11 (2023-02-22)

• (bluefox) added some common methods like formatValue or wrapContent

0.3.10 (2023-02-22)

• (bluefox) GUI packages updated

0.3.9 (2022-11-15)

• Better i18n support

0.3.6 (2022-10-26)

• (bluefox) Better i18n support

0.3.3 (2022-10-11)

• (bluefox) Better i18n support

0.3.2 (2022-08-15)

• (bluefox) Added method onStateUpdated

0.3.1 (2022-08-04)

• (bluefox) Added search for i18n keys in the tooltips

0.3.0 (2022-08-02)

• (bluefox) Renamed to vis-2-widgets-react-dev

0.2.3 (2022-08-02)

• (bluefox) Corrected simulation of data and style

0.2.2 (2022-07-25)

• (bluefox) Added search for i18n keys in the code

0.1.7 (2022-07-22)

• (bluefox) Added modulefederation and craco config files

0.1.5 (2022-07-20)

• (bluefox) visRxWidget was optimized

0.1.1 (2022-07-08)

• (bluefox) initial commit

License

The MIT License (MIT)

Copyright (c) 2022-2024 bluefox [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.