chore: Update Docs and deps

- update dumi package
- fix "Edit this doc on GitHub" btn
- add Demo block on main page
- hide Codesandbox exmples

Author: sakhnyuk

docs/README.md

@@ -9,8 +9,8 @@ React scrollbars component.
 
 `rc-scrollbars` is rejuvenated project of <a href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">react-custom-scrollbars</a>
 
-[![npm](https://img.shields.io/badge/npm-rc--scrollbars-brightgreen.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
-[![npm version](https://img.shields.io/npm/v/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
+[![npm](https://img.shields.io/badge/npm-rc--scrollbars-brightgreen.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars) 
+[![npm version](https://img.shields.io/npm/v/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars) 
 [![npm downloads](https://img.shields.io/npm/dm/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
 
 * frictionless native browser scrolling
@@ -25,6 +25,22 @@ React scrollbars component.
 
 #### **[Demos](/demo) · [API](/api)  ·  [GitHub](https://github.com/sakhnyuk/rc-scrollbars)**
 
+```jsx
+/**
+ * title: Basic DEMO of scrollbar
+ * hideActions: ['CSB', 'EXTERNAL']
+ */
+import React from 'react';
+import { Scrollbars } from 'rc-scrollbars';
+import { Lorem } from './components/Lorem';
+
+export default () => (
+  <Scrollbars style={{ maxWidth: 600, height: 300 }}>
+    <Lorem />
+  </Scrollbars>
+);
+```
+
 ## Installation
 ```bash
 npm install rc-scrollbars --save

docs/demo.md

@@ -11,6 +11,7 @@ order: 5
 /**
  * title: Default vertical content
  * desc: Default usage of rc-scrollbars with vertical scroll
+ * hideActions: ['CSB']
  */
 import React from 'react';
 import { Scrollbars } from 'rc-scrollbars';
@@ -27,6 +28,7 @@ export default () => (
 /**
  * title: Default hozintal content
  * desc: Default usage of rc-scrollbars with horizontal and vertical scroll
+ * hideActions: ['CSB']
  */
 import React from 'react';
 import { Scrollbars } from 'rc-scrollbars';
@@ -44,6 +46,9 @@ export default () => (
 ## Auto-hide
 
 ```jsx
+/**
+ * hideActions: ['CSB']
+ */
 import React from 'react';
 import { Scrollbars } from 'rc-scrollbars';
 import { Lorem } from './components/Lorem';
@@ -67,6 +72,7 @@ export default class App extends React.Component {
 /**
  * title: Colored Scrollbar
  * desc: Example type customization of scrollbar and view
+ * hideActions: ['CSB']
  */
 import React from 'react';
 import ColoredScrollbars from './components/ColoredScrollbars';
@@ -84,6 +90,7 @@ export default () => (
 ```jsx
 /**
  * title: Shadow view
+ * hideActions: ['CSB']
  */
 import React from 'react';
 import { Scrollbars } from 'rc-scrollbars';
@@ -106,6 +113,7 @@ export default class App extends React.Component {
 ```tsx
 /**
  * title: Styled scrollbar
+ * hideActions: ['CSB']
  */
 import React from 'react';
 import { Scrollbars } from 'rc-scrollbars';
@@ -153,6 +161,7 @@ export default class App extends React.Component {
 ```jsx
 /**
  * title: Spring Scrollbar
+ * hideActions: ['CSB']
  */
 import React from 'react';
 import SpringScrollbarsExample from './components/SpringScrollbars/SpringScrollbarsExample';

docs/usage.md

@@ -34,7 +34,7 @@ Also don't forget to set the `viewport` meta tag, if you want to **support mobil
 
 There are several events you can listen to:
 
-```javascript
+```jsx | pure
 import { Scrollbars } from 'rc-scrollbars';
 
 class App extends Component {
@@ -65,7 +65,7 @@ You can activate auto-hide by setting the `autoHide` property.
 
 Check out [demo](/demo#auto-hide)
 
-```javascript
+```jsx | pure
 import { Scrollbars } from 'rc-scrollbars';
 
 class App extends Component {
@@ -90,7 +90,7 @@ class App extends Component {
 
 You can activate auto-height by setting the `autoHeight` property.
 
-```jsx pure
+```jsx | pure
 import React from 'react';
 import { Scrollbars } from 'rc-scrollbars';
 import { Lorem } from './components/Lorem';
@@ -108,17 +108,14 @@ export default () => {
 
 If your app runs on both client and server, activate the `universal` mode. This will ensure that the initial markup on client and server are the same:
 
-```javascript
+```jsx | pure
 import { Scrollbars } from 'rc-scrollbars';
 
-class App extends Component {
-  render() {
-    return (
-      // This will activate universal mode
-      <Scrollbars universal>
-        <p>Some great content...</p>
-      </Scrollbars>
-    );
-  }
-}
+export const Component = () => {
+  return (
+    <Scrollbars universal>
+      <p>Some great content...</p>
+    </Scrollbars>
+  );
+};
 ```

package.json

@@ -18,7 +18,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/sakhnyuk/rc-scrollbars.git"
+    "url": "https://github.com/sakhnyuk/rc-scrollbars.git",
+    "branch": "main"
   },
   "keywords": [
     "scroll",
@@ -43,7 +44,7 @@
     "@typescript-eslint/parser": "^4.9.1",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.3",
-    "dumi": "^1.0.38",
+    "dumi": "^1.1.4",
     "eslint": "^7.15.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-config-react-app": "^6.0.0",