docs: updates frontend docs with styleguide and consolidation

frontend/README.md

@@ -11,11 +11,11 @@ Amundsen is a metadata driven application for improving the productivity of data
 
 The frontend service leverages a separate [search service](./../search) for allowing users to search for data resources, and a separate [metadata service](./../metadata) for viewing and editing metadata for a given resource. It is a Flask application with a React frontend.
 
-For information about Amundsen and our other services, refer to this [README.md](./../README.md). Please also see our instructions for a [quick start](./../docs/installation.md#bootstrap-a-default-version-of-amundsen-using-docker) setup  of Amundsen with dummy data, and an [overview of the architecture](./../docs/architecture.md#architecture).
+For information about Amundsen and our other services, refer to this [README.md](https://github.com/amundsen-io/amundsen). Please also see our instructions for a [quick start](https://www.amundsen.io/amundsen/installation/) setup  of Amundsen with dummy data, and an [overview of the architecture](https://www.amundsen.io/amundsen/architecture/).
 
 ## Requirements
 - Python >= 3.6
-- Node = v10 or v12 
+- Node = v12
 - npm >= 6.x.x
 
 ## Homepage
@@ -28,37 +28,40 @@ For information about Amundsen and our other services, refer to this [README.md]
 
 Please note that the mock images only served as demonstration purpose.
 
-- **Landing Page**: The landing page for Amundsen including 1. search bars; 2. popular used tables;
-
-    ![](docs/img/landing_page.png)
-
-- **Search Preview**: See inline search results as you type
-
-    ![](docs/img/search_preview.png)
-
-- **Table Detail Page**: Visualization of a Hive / Redshift table
-
-    ![](docs/img/table_detail_page.png)
-
-- **Column detail**: Visualization of columns of a Hive / Redshift table which includes an optional stats display
-
-    ![](docs/img/column_details.png)
-
-- **Data Preview Page**: Visualization of table data preview which could integrate with [Apache Superset](https://github.com/apache/incubator-superset)
-
-    ![](docs/img/data_preview.png)
-
-## Installation
-
+<figure>
+  <img href="https://www.amundsen.io/amundsen/frontend/docs/img/landing_page.png" alt="">
+  <figcaption align="center"><bold>Landing Page</bold>: The landing page for Amundsen including 1. search bars; 2. popular used tables</figcaption>
+</figure>
+
+<figure>
+  <img href="https://www.amundsen.io/amundsen/frontend/docs/img/search_preview.png" alt="">
+  <figcaption align="center"><bold>Search Preview</bold>: See inline search results as you type</figcaption>
+</figure>
+
+<figure>
+  <img href="https://www.amundsen.io/amundsen/frontend/docs/img/table_detail_page.png" alt="">
+  <figcaption align="center"><bold>Table Detail Page</bold>: Visualization of a Hive / Redshift table</figcaption>
+</figure>
+
+<figure>
+  <img href="https://www.amundsen.io/amundsen/frontend/docs/img/column_details.png" alt="">
+  <figcaption align="center"><bold>Column detail</bold>: Visualization of columns of a Hive / Redshift table which includes an optional stats display</figcaption>
+</figure>
+
+<figure>
+  <img href="https://www.amundsen.io/amundsen/frontend/docs/img/column_details.png" alt="">
+  <figcaption align="center"><bold>Data Preview Page</bold>: Visualization of table data preview which could integrate with <a href="https://github.com/apache/incubator-superset">Apache Superset</a></figcaption>
+</figure>
+
+## Next Steps
+### Install
 Please visit [Installation guideline](docs/installation.md) on how to install Amundsen.
 
-## Configuration
-
-Please visit [Configuration doc](docs/configuration.md) on how to configure Amundsen various enviroment settings(local vs production).
-
-## Developer Guidelines
+### Configure
+Please visit [Configuration doc](docs/configuration.md) on how to configure Amundsen various enviroment settings.
 
+### Developer Guidelines
 Please visit [Developer guidelines](docs/developer_guide.md) if you want to build Amundsen in your local environment.
 
-# License
-[Apache 2.0 License.](/LICENSE)
+### Contribute
+Check our [Contribution Guide](https://github.com/amundsen-io/amundsen/blob/main/CONTRIBUTING.md) to get you started contributing to Amundsen. Read our [Frontend Strategy doc](https://github.com/amundsen-io/amundsen/blob/main/frontend/docs/strategy.md#L1) to see where can you help today.

frontend/amundsen_application/static/package.json

@@ -609,6 +609,13 @@
       "npm run stylelint:fix"
     ]
   },
+  "resolutions": {
+    "@storybook/react/webpack": "^5",
+    "@storybook/core-common/webpack": "^5",
+    "@storybook/core-server/webpack": "^5",
+    "@storybook/builder-webpack4/webpack": "^5",
+    "@storybook/manager-webpack4/webpack": "^5"
+  },
   "scripts": {
     "betterer:update": "betterer --update",
     "betterer:merge": "betterer merge",
@@ -634,12 +641,5 @@
     "tsc": "tsc --pretty --noEmit",
     "type-check": "tsc --pretty --noEmit",
     "watch": "cross-env TS_NODE_PROJECT='tsconfig.webpack.json' webpack --progress --config webpack.dev.ts --watch"
-  },
-  "resolutions": {
-    "@storybook/react/webpack": "^5",
-    "@storybook/core-common/webpack": "^5",
-    "@storybook/core-server/webpack": "^5",
-    "@storybook/builder-webpack4/webpack": "^5",
-    "@storybook/manager-webpack4/webpack": "^5"
   }
 }

frontend/docs/developer_guide.md

@@ -58,11 +58,11 @@ Using Storybook makes it much easier to quickly iterate on components when getti
 
 ### Frontend Type Checking
 
-We use TypeScript in our codebase, so `npm run tsc` conducts type checking. The build commands `npm run build` and `npm run dev-build` also conduct type checking, but are slower because they also build the source code. Run any of these commands and fix all failed checks before submitting a PR.
+We use TypeScript in our codebase, so `npm run tsc` performs a type checking, however your IDE should point issues to you right in the code. The build commands `npm run build` and `npm run dev-build` also conduct type checking, but are slower because they also build the source code. Run any of these commands and fix all failed checks before submitting a PR.
 
 ### Frontend Linting and Formatting
 
-We have in place two linters – [ESLint][eslint] for our JavaScript and TypeScript files, [Stylelint][stylelint] for our Sass files. If you have both ESLint and Stylelint extensions installed on your IDE, you should get warnings on your editor by default.
+We have in place two linters – [ESLint][eslint] for our JavaScript and TypeScript files and [Stylelint][stylelint] for our Sass files. If you have both ESLint and Stylelint extensions installed on your IDE, you should get warnings on your editor by default.
 
 We also use [Prettier][prettier] to help us keep consistent formatting on our TypeScript and Sass code.
 
@@ -74,7 +74,6 @@ Whenever you want to run these tasks manually, you can execute:
 
 We also check your changed files and format them when you create a new commit, making it easy for you and for the project to keep a consistent code style. We do this leveraging [Husky][husky] and [Lint-staged][lint-staged].
 
-Looking forward, we aim at setting more strict best practices using ESLint and Stylelint. For that, we are leveraging a project called [betterer][betterer], which keeps track of our errors when a given test is passed. You can run it using `npm run betterer` and it will break if you introduce any new eslint errors. If you want to ignore the new errors you can run `npm run betterer:update` to update the betterer.results file. We do not recommend adding or introducing new eslint errors.
 
 ### Accessibility and Semantic Markup
 
@@ -99,7 +98,7 @@ In the past, we have used several classes to set the styling of our heading and
 }
 ```
 
-You can find the complete list of placeholder selectors for text in [this file](https://github.com/amundsen-io/amundsen/blob/main/frontend/amundsen_application/static/css/_typography-default.scss#L12). In the cases were a text class works best, you can use their equivalent classes.
+You can find the complete list of placeholder selectors for text in [this file](https://github.com/amundsen-io/amundsen/blob/main/frontend/amundsen_application/static/css/_typography-default.scss#L12), and its implementation in the storybook when running `npm run storybook`.
 
 ### Iconography