From a6542719df220a4f60990abfb3c8bdb21272264e Mon Sep 17 00:00:00 2001
From: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>
Date: Tue, 17 Oct 2023 01:06:07 +0500
Subject: [PATCH] Addresses issue #1906 (#2074)

* refactored Storybook UI

* refactored Storybook UI

* removed extra cards from the doc, added card for ui components

* added hover behavior to doc page & made it look selected

* separate storybook docs and tests

* separating storybook tests and docs
---
 docs/src/css/custom.css              |  9 +++++++++
 front/.storybook/main.js             |  8 ++++++--
 front/.storybook/test-runner-jest.js |  2 +-
 front/nyc.config.js                  |  4 +++-
 front/package.json                   | 14 ++++++++------
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 7f69a5831..26cfdbe2f 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -158,6 +158,15 @@ li.coming-soon a::after {
   color: var(--level-1-color);
 }
 
+.theme-doc-sidebar-item-category-level-1 > .menu__link:hover{
+  color:inherit
+} 
+
+.menu__list-item--level1 > .menu__link--active > .icon-and-text{
+  color: black;
+}
+
+
 .menu__list-item--level1 > .menu__link--active,
 .menu__list-item--level1 > .menu__link:hover {
   background: inherit;
diff --git a/front/.storybook/main.js b/front/.storybook/main.js
index 031b2e12f..699315238 100644
--- a/front/.storybook/main.js
+++ b/front/.storybook/main.js
@@ -1,7 +1,7 @@
 const path = require('path');
 
 computeStoriesGlob = () => {
-  if (process.env.STORYBOOK_STORIES_FOLDER === 'pages') {
+  if (process.env.STORYBOOK_SCOPE === 'pages') {
     return [
       '../src/pages/**/*.stories.@(js|jsx|ts|tsx)',
       '../src/__stories__/*.stories.@(js|jsx|ts|tsx)',
@@ -10,10 +10,14 @@ computeStoriesGlob = () => {
     ]
   }
 
-  if (process.env.STORYBOOK_STORIES_FOLDER === 'modules') {
+  if (process.env.STORYBOOK_SCOPE === 'modules') {
     return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)', '../src/modules/**/*.docs.mdx']
   }
 
+  if (process.env.STORYBOOK_SCOPE === 'ui-docs') {
+      return ['../src/modules/ui/**/*.docs.mdx'];
+  }
+
   return ['../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.docs.mdx']
 };
 
diff --git a/front/.storybook/test-runner-jest.js b/front/.storybook/test-runner-jest.js
index 77f5ee218..1d99e046b 100644
--- a/front/.storybook/test-runner-jest.js
+++ b/front/.storybook/test-runner-jest.js
@@ -9,5 +9,5 @@ module.exports = {
   /** Add your own overrides below
    * @see https://jestjs.io/docs/configuration
    */
-  testTimeout: process.env.STORYBOOK_STORIES_FOLDER === 'pages' ? 60000 : 15000,
+  testTimeout: process.env.STORYBOOK_SCOPE=== 'pages' ? 60000 : 15000,
 };
\ No newline at end of file
diff --git a/front/nyc.config.js b/front/nyc.config.js
index 3b050162c..ea3c88972 100644
--- a/front/nyc.config.js
+++ b/front/nyc.config.js
@@ -26,7 +26,9 @@ const pagesCoverage = {
   ]
 };
 
-const storybookStoriesFolders = process.env.STORYBOOK_STORIES_FOLDER;
+
+
+const storybookStoriesFolders = process.env.STORYBOOK_SCOPE;
 
 module.exports = storybookStoriesFolders === 'pages' ?
   pagesCoverage : storybookStoriesFolders === 'modules' ? modulesCoverage
diff --git a/front/package.json b/front/package.json
index 46174efb0..7e914a05d 100644
--- a/front/package.json
+++ b/front/package.json
@@ -76,12 +76,14 @@
     "storybook:test-slow": "test-storybook --maxWorkers=3",
     "storybook:build": "storybook build -s public",
     "storybook:coverage": "test-storybook --coverage --maxWorkers=3 && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
-    "storybook:modules:dev": "STORYBOOK_STORIES_FOLDER=modules yarn storybook:dev",
-    "storybook:pages:dev": "STORYBOOK_STORIES_FOLDER=pages yarn storybook:dev",
-    "storybook:modules:build": "STORYBOOK_STORIES_FOLDER=modules yarn storybook:build",
-    "storybook:pages:build": "STORYBOOK_STORIES_FOLDER=pages yarn storybook:build",
-    "storybook:modules:coverage": "STORYBOOK_STORIES_FOLDER=modules yarn storybook:coverage",
-    "storybook:pages:coverage": "STORYBOOK_STORIES_FOLDER=pages yarn storybook:coverage",
+    "storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev",
+    "storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev",
+    "storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev",
+    "storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
+    "storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
+    "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build",
+    "storybook:modules:coverage": "STORYBOOK_SCOPE=modules yarn storybook:coverage",
+    "storybook:pages:coverage": "STORYBOOK_SCOPE=pages yarn storybook:coverage",
     "graphql:data:generate": "dotenv cross-var graphql-codegen -- --config codegen.js",
     "graphql:metadata:generate": "dotenv cross-var graphql-codegen -- --config codegen-metadata.js",
     "chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",