chore(website): fix build for Node 20 and update all versions

.clean-publish

@@ -1,4 +1,6 @@
 {
-  "packageManager": "yarn",
-  "files": ["website"]
+  "packageManager": "npm",
+  "files": [
+    "website"
+  ]
 }

.github/workflows/checks.yml

@@ -12,7 +12,7 @@ jobs:
       CI_JOB_NUMBER: 1
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Check size
         uses: andresz1/size-limit-action@v1
         with:
@@ -27,10 +27,8 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 20
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-        with:
-          install-command: yarn --frozen-lockfile --ignore-engines
+        run: npm i
       - name: Check storybook
-        run: yarn build:storybook
+        run: npm run build:storybook

.github/workflows/ci.yml

@@ -13,17 +13,12 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 20
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-        with:
-          install-command: yarn --frozen-lockfile --ignore-engines
+        run: npm i
       - name: Run tests
-        run: yarn test
-      - name: Collect coverage
-        uses: codecov/codecov-action@v2
-        if: success()
+        run: npm run test
+      - uses: codecov/codecov-action@v4
         with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          files: ./coverage/lcov.info
           fail_ci_if_error: true
+          token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/publish.yml

@@ -11,15 +11,13 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16
-          registry-url: 'https://registry.npmjs.org'
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-        with:
-          install-command: yarn --frozen-lockfile --ignore-engines
+        run: npm i
       - name: Publish
         run: |
-          yarn cleanPublish --without-publish --temp-dir package
-          yarn publish --non-interactive package
+          npm run cleanPublish --without-publish --temp-dir package
+          npm run publish --non-interactive package
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.simple-git-hooks.json

@@ -1,5 +1,5 @@
 {
-  "commit-msg": "yarn commitlint --edit \"$1\"",
-  "pre-commit": "yarn nano-staged",
-  "pre-push": "yarn test"
+  "commit-msg": "npm run commitlint",
+  "pre-commit": "npm run nano-staged",
+  "pre-push": "npm run test"
 }

.size-limit

@@ -12,7 +12,7 @@
   },
   {
     "path": "dist/index.js",
-    "limit": "6 KB",
+    "limit": "6.3 KB",
     "webpack": false,
     "running": false
   },

.storybook/main.js

@@ -1,14 +1,43 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-  stories: ['../stories/*.tsx'],
+  stories: ["../stories/*.tsx"],
+
   addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-controls',
-    '@storybook/addon-actions',
+    "@storybook/addon-docs",
+    "@storybook/addon-controls",
+    "@storybook/addon-actions",
+    "@storybook/addon-webpack5-compiler-babel",
+    "@chromatic-com/storybook",
   ],
+
   webpackFinal(config) {
-    config.resolve.alias['react-google-charts'] = path.resolve(__dirname, '../src');
+    config.resolve.alias["react-google-charts"] = path.resolve(
+      __dirname,
+      "../src"
+    );
     return config;
   },
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+
+  babel: async (options) => {
+    return {
+      ...options,
+      presets: [
+        ...(options.presets ?? []),
+        "@babel/preset-react",
+        "@babel/preset-typescript",
+      ],
+    };
+  },
 };

.storybook/manager.js

@@ -1,8 +1,8 @@
-import { addons } from '@storybook/addons';
+import { addons } from "@storybook/manager-api";
 
-import { theme } from './theme';
+import { theme } from "./theme";
 
 addons.setConfig({
   theme,
-  panelPosition: 'right',
+  panelPosition: "right",
 });

.storybook/preview.js

@@ -1,5 +1,6 @@
-import { configureActions } from '@storybook/addon-actions';
+import { configureActions } from "@storybook/addon-actions";
 
 configureActions({
   depth: 5,
 });
+export const tags = ["autodocs"];

CONTRIBUTING.md

@@ -4,12 +4,12 @@
 
 ## Installation
 
-- Running `yarn` in the components's root directory will install everything you need for development.
+- Running `npm i` in the components's root directory will install everything you need for development.
 
 ## Demo Development Server
 
-- `yarn start` will run a development server with the component's demo app at [http://localhost:1234](http://localhost:1234) with hot module reloading.
+- `npm start` will run a development server with the component's demo app at [http://localhost:1234](http://localhost:1234) with hot module reloading.
 
 ## Build
 
-- `yarn build`
+- `npm run build`

README.md

@@ -25,13 +25,7 @@ A thin, typed, React wrapper for [Google Charts](https://developers.google.com/c
 Install this library with your favorite package manager:
 
 ```bash
-yarn add react-google-charts
-```
-
-or
-
-```bash
-npm install --save react-google-charts
+npm i react-google-charts
 ```
 
 Then, import and use it:
@@ -41,11 +35,15 @@ import { Chart } from "react-google-charts";
 
 <Chart
   chartType="ScatterChart"
-  data={[["Age", "Weight"], [4, 5.5], [8, 12]]}
+  data={[
+    ["Age", "Weight"],
+    [4, 5.5],
+    [8, 12],
+  ]}
   width="100%"
   height="400px"
   legendToggle
-/>
+/>;
 ```
 
 ## Docs
@@ -65,6 +63,6 @@ Contributions are very welcome. Check out [CONTRIBUTING.md](CONTRIBUTING.md)
 ```bash
 git clone https://www.github.com/rakannimer/react-google-charts
 cd react-google-charts
-yarn
-yarn start:storybook
+npm i
+npm run start:storybook
 ```