fix(ci): fix ci build, update nodejs and fix react jsx

Author: pyatyispyatil

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [16.x]
+                node-version: [20.x]
 
         steps:
             - uses: actions/checkout@v2

.github/workflows/github-pages.yml

@@ -14,7 +14,7 @@ jobs:
             - name: Setup NodeJS
               uses: actions/setup-node@v2.4.1
               with:
-                  node-version: 16
+                  node-version: 20
                   registry-url: https://registry.npmjs.org/
 
             - name: Checkout

.github/workflows/tagged-release.yml

@@ -21,7 +21,7 @@ jobs:
             - uses: actions/checkout@v1
             - uses: actions/setup-node@v1
               with:
-                  node-version: 16
+                  node-version: 20
                   registry-url: https://registry.npmjs.org/
             - run: npm ci
             - run: npm run build:npm

.stylelintrc

@@ -2,7 +2,6 @@
     "plugins": ["stylelint-prettier"],
     "extends": [
         "stylelint-config-standard",
-        "stylelint-config-prettier",
         "stylelint-config-css-modules"
     ],
     "ignoreFiles": [

README.md

@@ -141,7 +141,64 @@ const flameChart = new FlameChartContainer({
 
 #### Usage with React
 
-You can use the [classic flame chart with react like this](https://github.com/pyatyispyatil/flame-chart-js/blob/master/example/src/components/charts/flame-chart-wrapper.tsx) or [like this with pluggins](https://github.com/pyatyispyatil/flame-chart-js/blob/master/example/src/components/charts/flame-chart-container-wrapper.tsx).
+Default flame chart:
+```tsx
+import { FlameChartWrapper } from 'flame-chart-js/react';
+
+export const DefaultFlameChart = ({
+    flameChartData,
+    stylesSettings,
+    onSelect,
+}) => {
+    const settings = useMemo(
+        () => ({
+            styles: stylesSettings,
+        }),
+        [stylesSettings],
+    );
+
+    return (
+        <FlameChartWrapper
+            data={flameChartData}
+            settings={settings}
+            onSelect={onSelect}
+            className={styles.flameChart}
+        />
+    );
+};
+```
+
+Custom flame chart:
+```tsx
+import { FlameChartContainerWrapper } from 'flame-chart-js/react';
+
+const CustomFlameChart = ({ flameChartData, stylesSettings }) => {
+  const plugins = useMemo(() => {
+    return [
+      new TimeGridPlugin(),
+      new TogglePlugin('FlameChart 1'),
+      new FlameChartPlugin({
+        name: 'flameChart1',
+        data: flameChartData[0],
+      }),
+      new TogglePlugin('FlameChart 2'),
+      new FlameChartPlugin({
+        name: 'flameChart2',
+        data: flameChartData[1],
+      }),
+    ];
+  }, [flameChartData]);
+
+  const settings = useMemo(
+    () => ({
+      styles: stylesSettings,
+    }),
+    [stylesSettings],
+  );
+
+  return <FlameChartContainerWrapper settings={settings} plugins={plugins} className={styles.flameChart} />;
+};
+```
 
 #### Settings