Merge pull request #15 from eug-vs/refactor/orientation

Revise BENZIN orientation

12 files changed, 19 insertions, 122 deletions

diff --git a/README.md b/README.md
index 902f6f2..f2473c4 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,16 @@
 <p align="center"><img src="src/assets/icon.svg" /></p>
 <h1 align="center"> BENZIN </h1>
 
-[React](https://reactjs.org/) Material components library. It supplies you with cool pre-defined style, while assuring that your project will follow all [Material Design guidelines](https://material.io/).
-
-[![](https://img.shields.io/npm/v/react-benzin?logo=npm)](https://github.com/eug-vs/react-benzin/releases)
-[![](https://img.shields.io/circleci/build/github/eug-vs/react-benzin?logo=circleci)](https://github.com/eug-vs/react-benzin/commits/develop)
-[![](https://img.shields.io/david/eug-vs/react-benzin)](https://github.com/eug-vs/react-benzin/network/dependencies)
-[![](https://img.shields.io/github/languages/code-size/eug-vs/react-benzin)](https://github.com/eug-vs/react-benzin/releases)
-[![](https://img.shields.io/npm/l/react-benzin)](https://github.com/eug-vs/react-benzin/blob/develop/LICENSE.md)
-
+<p align="center">
+ <a href="https://reactjs.org/">React</a> <a href="https://material-ui.com/">Material</a> library for content-display featuring Markdown rendering.
+</p>
+<p align="center">
+ <img src="https://img.shields.io/npm/v/react-benzin?logo=npm" />
+ <img src="https://img.shields.io/circleci/build/github/eug-vs/react-benzin?logo=circleci" />
+ <img src="https://img.shields.io/david/eug-vs/react-benzin" />
+ <img src="https://img.shields.io/github/languages/code-size/eug-vs/react-benzin" />
+ <img src="https://img.shields.io/npm/l/react-benzin" />
+</p>
 
 # Getting started
 ## Installation
@@ -16,26 +18,15 @@ You can easily add **BENZIN** to your project with `npm`:
 ```bash
 $ npm install react-benzin
 ```
-**BENZIN** works best in kick-starting new projects and allows you to focus on the functionality, while all the beauty will be maintained by our library.
-
-**TIP:** *Create-React-App with Typescript* is your GO-TO in most of the cases. [Learn more.](https://create-react-app.dev/docs/adding-typescript/)
+**TIP:** **BENZIN** is designed to work in Material-UI environment, so it's best to use them together:
+```bash
+$ npm @material-ui/core
+```
 
-![Preview screenshot](https://user-images.githubusercontent.com/51545008/73991116-46b04f00-495c-11ea-9733-865bcc6c8807.png)
+![Preview screenshot](https://user-images.githubusercontent.com/51545008/95653266-209d0900-0b00-11eb-9a0a-f3aa81c878e5.png)
 
 You can find a minimal usage example [here](src/index.tsx).
 
-## Functionality
-**BENZIN** provides you with a bunch of cool components that greatly integrate with each other. 
-
-[Explore](src/lib) `src/lib/` folder to see what's available. Documentation is yet to come, but for now you can enjoy type definitons.
-
-[Chrono-Cube](https://github.com/eug-vs/chrono-cube/) will also be a great example of usage, since it's the actual project which inspired us to create **BENZIN**.
- 
- 
-# Explore NPM package online
-https://www.npmjs.com/package/react-benzin 
-
-
 # Development
 ## Running live demo
 To run a live example, clone a repo and execute following commands:
diff --git a/package-lock.json b/package-lock.json
index f24f00a..f560291 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1774,24 +1774,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-virtualized-auto-sizer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz",
-      "integrity": "sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/react-window": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.1.tgz",
-      "integrity": "sha512-V3k1O5cbfZIRa0VVbQ81Ekq/7w42CK1SuiB9U1oPMTxv270D9qUn7rHb3sZoqMkIJFfB1NZxaH7NRDlk+ToDsg==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -9307,11 +9289,6 @@
         "p-is-promise": "^2.0.0"
       }
     },
-    "memoize-one": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
-      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
-    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -12375,20 +12352,6 @@
         "prop-types": "^15.6.2"
       }
     },
-    "react-virtualized-auto-sizer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
-      "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg=="
-    },
-    "react-window": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.5.tgz",
-      "integrity": "sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "memoize-one": ">=3.1.1 <6"
-      }
-    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
diff --git a/package.json b/package.json
index 76dd8d1..79faca8 100644
--- a/package.json
+++ b/package.json
@@ -24,16 +24,12 @@
     "emojilib": "^2.4.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.5",
     "typeface-roboto": "0.0.75"
   },
   "devDependencies": {
     "@types/node": "^13.5.0",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
-    "@types/react-virtualized-auto-sizer": "^1.0.0",
-    "@types/react-window": "^1.8.1",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.19.0",
     "eslint": "^6.8.0",
diff --git a/src/lib/Button/Button.tsx b/src/demo/Button/Button.tsx
index 6bc0f98..6bc0f98 100644
--- a/src/lib/Button/Button.tsx
+++ b/src/demo/Button/Button.tsx
diff --git a/src/lib/Header/Header.tsx b/src/demo/Header/Header.tsx
index 58be989..58be989 100644
--- a/src/lib/Header/Header.tsx
+++ b/src/demo/Header/Header.tsx
diff --git a/src/lib/Window/Window.tsx b/src/demo/Window/Window.tsx
index beaa672..beaa672 100644
--- a/src/lib/Window/Window.tsx
+++ b/src/demo/Window/Window.tsx
diff --git a/src/lib/Window/WindowSurface.tsx b/src/demo/Window/WindowSurface.tsx
index 1900901..1900901 100644
--- a/src/lib/Window/WindowSurface.tsx
+++ b/src/demo/Window/WindowSurface.tsx
diff --git a/src/lib/Window/types.ts b/src/demo/Window/types.ts
index 9e18fe3..9e18fe3 100644
--- a/src/lib/Window/types.ts
+++ b/src/demo/Window/types.ts
diff --git a/src/index.tsx b/src/index.tsx
index 4dd760b..5ba33a0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,21 +1,19 @@
 import React, { useState, useRef } from 'react';
 import ReactDOM from 'react-dom';
-
 import {
   makeStyles,
   TextField,
   Button,
   Link,
 } from '@material-ui/core';
-
 import {
   Benzin,
-  Header,
-  Window,
   Markdown,
   ContentSection,
 } from './lib';
 
+import Header from './demo/Header/Header';
+import Window from './demo/Window/Window';
 import icon from './assets/icon.svg';
 
 interface RenderPropTypes {
@@ -23,7 +21,6 @@ interface RenderPropTypes {
   style: React.CSSProperties;
 }
 
-
 const useStyles = makeStyles(theme => ({
   window: {
     padding: theme.spacing(4),
@@ -102,7 +99,8 @@ const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {
       <ContentSection sectionName="Markdown live preview" level={2}>
         <p>
           Start typing and see your text rendered on the left window!
-          You can find the list of all Markdown features {' '}
+          You can find the list of all Markdown features
+          {' '}
           <Link href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">
             here
           </Link>
diff --git a/src/lib/ContentSection/ContentSection.tsx b/src/lib/ContentSection/ContentSection.tsx
index 28b1ad5..3432bd5 100644
--- a/src/lib/ContentSection/ContentSection.tsx
+++ b/src/lib/ContentSection/ContentSection.tsx
@@ -16,10 +16,6 @@ const useStyles = makeStyles(theme => ({
   content: {
     padding: theme.spacing(2, 2, 1, 3),
     marginBottom: theme.spacing(1),
-
-    '& .MuiButton-root': {
-      margin: theme.spacing(1, 2, 2, 0),
-    },
   },
 }));
 
diff --git a/src/lib/SmartList/SmartList.tsx b/src/lib/SmartList/SmartList.tsx
deleted file mode 100644
index c86c127..0000000
--- a/src/lib/SmartList/SmartList.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { FixedSizeList } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
-
-
-interface RenderPropTypes {
-  index: number;
-  style: React.CSSProperties;
-}
-
-interface PropTypes {
-  itemSize: number;
-  itemCount: number;
-  renderItem: React.FC<RenderPropTypes>;
-}
-
-interface Size {
-  height: number;
-  width: number;
-}
-
-
-const SmartList: React.FC<PropTypes> = ({ itemSize, itemCount, renderItem }) => {
-  const ResizedList: React.FC<Size> = ({ width, height }) => (
-    <FixedSizeList
-      height={height}
-      width={width}
-      itemSize={itemSize}
-      itemCount={itemCount}
-    >
-      {renderItem}
-    </FixedSizeList>
-  );
-
-  return (
-    <div style={{ flex: '1 1 auto', overflow: 'hidden' }}>
-      <AutoSizer children={ResizedList} />
-    </div>
-  );
-};
-
-
-export default SmartList;
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 0f31104..545e6f8 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,7 +1,3 @@
-export { default as Window } from './Window/Window';
-export { default as Header } from './Header/Header';
 export { default as ContentSection } from './ContentSection/ContentSection';
-export { default as SmartList } from './SmartList/SmartList';
 export { default as Benzin } from './Benzin/Benzin';
-export { default as Button } from './Button/Button';
 export { default as Markdown } from './Markdown/Markdown';