Update npm v7 and devDependencies

It has been some time since we have updated the devDependencies of the UIKit
npm 6 -> 7 upgrade looks like a good time to do it

Updates:
  * npm v7 peer dependency fix
  * Updates ->
    * storybook 6
    * jest 27
    * typescript 4
    * React 17
    * rollup 2

Author: sravan-s

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
         "tsx": "never",
       },
     ],
+    "react/forbid-prop-types": 0,
   },
   settings: {
     "import/resolver": {

.github/workflows/test-n-lint.yml

@@ -12,14 +12,18 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [v12.16]
+        node-version: [14]
 
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v2.2.0
       with:
         node-version: ${{ matrix.node-version }}
+
+    - name: Upgrade npm
+      run: npm install -g npm@7
+
     - run: npm install
     - run: npm run eslint
     - run: npm run eslint-ts

.gitignore

@@ -8,6 +8,7 @@ node_modules
 build
 dist
 .rpt2_cache
+release
 
 # misc
 .DS_Store

.storybook/main.js

@@ -1,12 +1,25 @@
 module.exports = {
   stories: [
-    '../src/**/*.stories.(js|mdx)',
-    '../docs/**/*.(js|mdx)',
+    '../src/**/*.stories.@(js|mdx)',
+    '../docs/**/*.@(js|mdx)',
   ],
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/preset-scss'
+    '@storybook/preset-scss',
   ],
+  webpackFinal: async (config, { configType }) => {
+    const fileLoaderRule = config.module.rules.find(
+      (rule) => !Array.isArray(rule.test) && rule.test.test(".svg"),
+    );
+    // !important! -> read
+    // https://github.com/storybookjs/storybook/issues/6188#issuecomment-654884130
+    fileLoaderRule.exclude = /\.svg$/;
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
 };

.storybook/webpack.config.js

@@ -1,4 +1,4 @@
-# sendbird-uikit-react
+# sendbird-uikit
 
 > React based UI kit based on sendbird javascript SDK
 
@@ -27,17 +27,24 @@ With Sendbird UI Kit React, we export these components:
 ### Prerequisites
 
 You need to install:
-* nodejs 12.xx LTS https://nodejs.org/en/download/
-* npm 6.8 or above
+* nodejs 14 LTS https://nodejs.org/en/download/
+* npm 7 or above
+
+```
+npm 14 deprecated warnings for fsevents& chokidar@2.1.8 will be fixed when storybook is updated to webpack 5
+https://github.com/storybookjs/storybook/issues/12425#issuecomment-723043137
+```
 
 We tried development on Mac OS / Linux systems. You might encounter problems in running `npm run build` in Windows machines
 
- ### Development
-We use storybook for development and rollup for building bundled JS file
-Make sure you have nodejs and npm installed and follow these steps:
+### Development
+
+We use storybook for development and rollup for building the npm distribution(bundled JS file)
+Make sure you have nodejs and npm installed and run
+
 ```
 Make a copy of env.example and save it as .env
-Inside the .env file, set your appId  `STORYBOOK_APP_ID=appId (no quotes)`
+Set your appId STORYBOOK_APP_ID
 npm install
 npm run storybook
 ```
@@ -54,6 +61,11 @@ We use rollupJS for building the production bundle script that you want to use i
 
 We have both esm and commonjs output
 
+```
+rollup -c
+```
+or
+
 ```
 npm run build
 ```
@@ -90,4 +102,3 @@ npm run lint
   `export NewComponent from './src/location/of/NewComponent';`
 3. Add the following line to './rollup.config.js' `input`
   `NewComponent: 'src/location/of/NewComponent',`
-

README.md

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="Docs | Basics" />
 

docs/Basics.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Docs|Custom User List" />
 

docs/CustomUserList.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Docs|Introduction" />
 

docs/Introduction.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Docs|Requirements" />