Updated Docs

pagesource · Jun 4, 2022 · 779e450 · 779e450
1 parent 9ae7133
commit 779e450
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 15 deletions.
diff --git a/docs/atomic-design.md b/docs/atomic-design.md
@@ -0,0 +1,10 @@
+---
+id: atomic-design
+title: Atomic Design Driven 
+---
+
+Universal React generator has [Atomic Design Philosophy](https://atomicdesign.bradfrost.com/chapter-2/) at its core. Apart from setting up Atomic scaffolding structure (Atoms, Molecules, Organism and Template) it brings along customizable npm packages [@xt-pagesource/generate-plop](/universal-react-docs/docs/generate-plop/) to create components, services and hooks on the fly. 
+
+## Implementing Atomic Design
+
+Atomic design is a mental modal, when applied correctly it can do wonders in developing applications with great speed, brings great design consistency and reusability. It pushes you to identify and capture repeatable patterns throughout the application in reusable components. These components in turn will help develop user journeys faster and consistently. Components should be created with [Single Responsibility](https://en.wikipedia.org/wiki/Single-responsibility_principle) in mind to achieve maximum reusability.
diff --git a/docs/generate-plop.md b/docs/generate-plop.md
@@ -3,10 +3,7 @@
 
 [![Generate-plop Introduction by Khushboo Kumari](https://s7.gifyu.com/images/Banner0395df38ffe0484140.jpg)](https://web.microsoftstream.com/video/4508e6c4-7434-4247-a3a4-3a65e47f9352 "Generate-plop Introduction by Khushboo Kumari")
 
-Generate-plop is a simple, scalable and fast component generator. It can help 
-you to scaffold components, templates, hooks and pages simply by running few 
-cli commands. Automating the component creation process makes really easy for 
-the team to maintain consistency and saves good time. 
+[@xt-pagesource/generate-plop](https://www.npmjs.com/package/@xt-pagesource/generate-plop) is a simple, extensible  and scalable component generator. It can help you to scaffold components, templates, hooks and pages simply by running few cli commands. Automating the component creation process makes really easy for the team to maintain consistency and saves good time. 
 
 This tool will generate typescript files by default. However, we can generate
 javascript files as well by passing --js in script command.

diff --git a/docs/how.md b/docs/how.md
@@ -6,23 +6,17 @@ title: How it works?
 There are 2 Key Pillars of Universal React.
 
 ## 1. Instant initial setup
-
 React developers can run `npx create-universal-react` generator for setting up Micro Frontend and/or SPA architecture with essential tooling instantly. 
 ## 2. On-demand addition of optional features 
 
 React developers can continuously improve their project by running `npx create-universal-react` generator again for adding optional features like mocking, end-to-end testing or even new projects to their evolving applications. 
 
 ## Architecture Overview
-
 Using this generator you can setup and evolve a project into a combination of following architecture types. 
 
 ![Architecture Types with Universal React generator](/img/universal-react-arch-types-2x.png)
 
 ### How does Universal React achieve Micro Frontend? 
-
-
-
-
 There are 2 ways you can achieve Micro Frontend in this ecosystem. 
 
 1. **Micro-App Loader**: A small NPM package to load any React micro app or Web Component into a given container. Learn more [here](/universal-react-docs/docs/loader/).

diff --git a/docs/intro.md b/docs/intro.md
@@ -5,9 +5,9 @@ title: Universal React
 
 [![Forks](https://img.shields.io/github/forks/pagesource/universal-react-v2)](https://img.shields.io/github/forks/pagesource/universal-react-v2) [![Stars](https://img.shields.io/github/stars/pagesource/universal-react-v2)](https://img.shields.io/github/stars/pagesource/universal-react-v2) [![License](https://img.shields.io/github/license/pagesource/universal-react-v2)](https://img.shields.io/github/license/pagesource/universal-react-v2)
 
-An accelerator for setting-up scalable frontend architecture with Next.js and React.
+An accelerator for setting-up scalable frontend architecture with React and Next.js.
 
-This accelerator is a command line tool for generating SSR, SSG & Micro-App type of applications. This enables you to setup a working Micro Frontend or SPA development ecosystem with essential tooling for great dev experience and delivery quality.
+This accelerator is a command line tool for generating SSR, SSG & Micro-App type of applications. This enables you to setup a full-fledged Micro Frontend development ecosystem with essential tooling for great dev experience and delivery quality.
 
 This will help project teams in building applications with great quality, by giving them more time to focus on business problems rather than web development chores.
 
@@ -25,7 +25,7 @@ Following flow chart explains the workings of generator.
 
 ![Execution flow of Universal React generator](/img/universal-react-generator-2x.png)
 
-## CLI walk-through 
+## CLI walk through 
 
 [![CLI Generator Features by Rakesh Kumar 10](https://s7.gifyu.com/images/Banner018d3b1cbb27ffe53f.jpg)](https://web.microsoftstream.com/video/3b7ca6eb-d0ac-47e9-819b-d3e5e398ba09 "CLI Generator Features by Rakesh Kumar 10")
 

diff --git a/docs/storybook.md b/docs/storybook.md
@@ -11,4 +11,15 @@ Storybook setup is equipped with important add-ons to test for A11Y as well.
 ## Commands
 
 - Start `yarn storybook`
-- Build `yarn build-storybook`
+- Build `yarn build-storybook`
+
+## Configured Addons 
+Storybook is configured with great addons for setting up an ideal dev ecosystem. 
+
+- @storybook/addon-a11y: Validate accessability for each component. 
+- @storybook/addon-actions: Actions can be used to display data received by event handlers
+- @storybook/addon-docs: Document Stories in Storybook easily. 
+- @storybook/addon-knobs: Change prop values and test components variations. 
+- @storybook/addon-links: Create links that navigate between stories in Storybook.
+- storybook-design-token: Browse project design tokens in storybook. 
+- @storybook/addon-viewport: Test component in various viewport. 
diff --git a/sidebars.js b/sidebars.js
@@ -1,6 +1,6 @@
 module.exports = {
   someSidebar: {
     Introduction: ['intro', 'features', 'why', 'how', 'road-map', 'contribution', 'adoption', 'support'],
-    Features: ['monorepo', 'smart-context', 'design-system', 'loader', 'logger', 'generate-plop', 'module-federation', 'storybook', 'quality-control', 'unit-testing' ],
+    Features: ['monorepo', 'smart-context', 'design-system', 'atomic-design', 'loader', 'logger', 'generate-plop', 'module-federation', 'storybook', 'quality-control', 'unit-testing' ],
   },
 };