Update README and project.json to include storybook

Author: trungvose

README.md

@@ -1,8 +1,8 @@
 # A simplified Jira clone built with Angular 10, Akita and ng-zorro
 
-> Phase two will not be completed as planned for 25 July. Both [Chau Tran][chau] and I was too busy with some other commitments. View our [working in progress Graph QL branch][gql].
+> Phase two will not be completed as planned. Both [Chau Tran][chau] and I was too busy with some other commitments. View our [working in progress Graph QL branch][gql].
 >
-> You can check the latest Tetris game that I built with Angular and Akita in the meantime ➡ [tetris.trungk18.com](https://tetris.trungk18.com/) 🎮
+> You can check the storybook collection of components I wrote for Jira Clone ➡ [jira-storybook.trungk18.com](https://jira-storybook.trungk18.com/) 📕
 >
 > Thanks for your continuous support. Stay tuned! :muscle:
 
@@ -14,9 +14,11 @@ This is not only a simplified Jira clone built with Angular 9, but also an examp
   <summary>Table Of Content</summary>
   <p>
 
-- [A simplified Jira clone built with Angular 9 and Akita](#a-simplified-jira-clone-built-with-angular-9-and-akita)
-
+- [A simplified Jira clone built with Angular 10, Akita and ng-zorro](#a-simplified-jira-clone-built-with-angular-10-akita-and-ng-zorro)
   - [Working application](#working-application)
+  - [Storybook](#storybook)
+    - [What is Storybook](#what-is-storybook)
+    - [Jira Clone Storybook](#jira-clone-storybook)
   - [Support](#support)
   - [Who is it for 🤷‍♀️](#who-is-it-for-️)
   - [Tech stack](#tech-stack)
@@ -58,7 +60,7 @@ That makes it easy to develop hard-to-reach states. Save these UI states as **st
 
 ### Jira Clone Storybook
 
-This is the collection of components that I wrote for [jira.trungk18.com][jira], includes
+This is the collection of components that I wrote for [jira.trungk18.com][jira], includes:
 
 - Avatar
 - Breadcrumbs
@@ -316,6 +318,7 @@ Feel free to use my code on your project. It would be great if you put a referen
 
 [MIT](https://opensource.org/licenses/MIT)
 
+[jira]: http://jira.trungk18.com/
 [oldboyxx]: https://github.com/oldboyxx/jira_clone
 [datlyfe]: https://github.com/Datlyfe/jira_clone
 [stack]: frontend/src/assets/img/jira-clone-tech-stack.png

frontend/src/app/project/pages/board/board.component.html

@@ -1,6 +1,6 @@
-<div class="pr-6 py-8 pl-8 h-full w-full flex flex-col">
+<div class="flex flex-col w-full h-full py-8 pl-8 pr-6">
     <breadcrumbs [items]="breadcrumbs"></breadcrumbs>
-    <header class="mt-3 flex justify-between text-textDarkest">
+    <header class="flex justify-between mt-3 text-textDarkest">
         <div class="text-2xl font-medium">Kanban board</div>
         <div class="social-links">
             <a href="https://www.buymeacoffee.com/tuantrungvo"
@@ -17,6 +17,13 @@
                 </j-button>
             </a>
 
+            <a href="https://jira-storybook.trungk18.com/"
+               target="_blank"
+               rel="noopener">
+                <j-button className="btn-secondary mr-2"> 📕 Storybook
+                </j-button>
+            </a>
+
             <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Ftrungk18%2Fjira-clone-angular&text=Awesome%20Jira%20clone%20app%20built%20with%20Angular%209%20and%20Akita&hashtags=angular,akita,typescript"
                (click)="sendTwitterEventButton()"
                target="_blank"

frontend/src/assets/data/project.json

@@ -52,6 +52,20 @@
       "userIds": ["d65047e5-f4cf-4caa-9a38-6073dcbab7d1"],
       "listPosition": 1
     },
+    {
+      "type": "Story",
+      "priority": "Medium",
+      "title": "Jira Clone Storybook - Update 10/2020",
+      "description": "<h3>What is Storybook</h3><p>Storybook helps you build UI components in isolation from your app's business logic, data, and context. That makes it easy to develop hard-to-reach states. Save these UI states as&nbsp;stories&nbsp;to revisit during development, testing, or QA.</p><h3><br></h3><h3>Jira Clone Storybook</h3><p>This is the collection of components that I wrote for <a href='http://jira.trungk18.com/' rel='noopener noreferrer' target='_blank' style='color: var(--vscode-textLink-foreground);'>jira.trungk18.com</a>, includes:</p><ul><li>Avatar</li><li>Breadcrumbs</li><li>Button</li><li>Input</li><li>More to come...</li></ul><p><br></p><p>Check out the&nbsp;storybook demo&nbsp;-&gt;&nbsp;<a href=\"https://jira-storybook.trungk18.com/\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: var(--color-text-link);\">https://jira-storybook.trungk18.com/</a></p><p><br></p><p><a href=\"https://github.com/trungk18/jira-clone-angular/blob/master/frontend/src/assets/img/jira-storybook.gif\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: var(--color-text-link); background-color: var(--color-bg-primary);\"><img src=\"https://github.com/trungk18/jira-clone-angular/raw/master/frontend/src/assets/img/jira-storybook.gif\" alt=\"Jira clone built with Angular 10, Akita and ng-zorro\"></a></p>",
+      "reporterId": "d65047e5-f4cf-4caa-9a38-6073dcbab7d1",
+      "userIds": ["d65047e5-f4cf-4caa-9a38-6073dcbab7d1"],
+      "id": "73",
+      "status": "Backlog",
+      "createdAt": "2020-10-26T15:13:08.070Z",
+      "updatedAt": "2020-10-26T15:13:10.418Z",
+      "listPosition": 1
+    },
+
     {
       "type": "Story",
       "priority": "Highest",