From f4454b9cac4b39b20f354a028fb6c6215e620184 Mon Sep 17 00:00:00 2001
From: Jean Fernandez <jean.fernandez.code@gmail.com>
Date: Sat, 2 Mar 2024 00:35:48 -0500
Subject: [PATCH] Update docs and Makefile commands

---
 CONTRIBUTING.md     | 16 ++++++++++++++--
 Makefile            | 13 ++++++-------
 frontend/.gitignore |  1 +
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 917dfdf7..d3c51e59 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -239,9 +239,21 @@ curl -H "Authorization: Bearer ${JWT_TOKEN_HERE}" http://localhost:5984/_session
 ```
 
 
-# Run Component Storybook
+# How do I work with Storybook?
+
+[Storybook](https://storybook.js.org) allows development and testing of frontend components in isolation.
+When running the Storybook server, each defined story can be viewed and interacted with on it's own allowing for defining and testing of various states and conditions.
+
+In order to run the Storybook server, run the following command and open the url provided:
+
 ```bash
-ng run fastenhealth:storybook
+make serve-storybook
+```
+
+If you only want to verify that all stories build properly (a check that is run on commits and PRs), you can run the following command:
+
+```bash
+make build-storybook
 ```
 
 
diff --git a/Makefile b/Makefile
index 1027a3be..631c2bce 100644
--- a/Makefile
+++ b/Makefile
@@ -7,8 +7,12 @@
 .PHONY: test
 test: test-backend test-frontend
 
-.PHONY: serve-frontend-storybook
-serve-frontend-storybook:
+.PHONY: build-storybook
+build-storybook: dep-frontend
+	cd frontend && ng run fastenhealth:build-storybook
+
+.PHONY: serve-storybook
+serve-storybook: dep-frontend
 	cd frontend && ng run fastenhealth:storybook
 
 .PHONY: serve-frontend
@@ -83,7 +87,6 @@ build-frontend-desktop-prod: dep-frontend
 build-frontend-offline-sandbox: dep-frontend
 	cd frontend && yarn build -- -c offline_sandbox
 
-
 .PHONY: test-frontend
 # reduce logging, disable angular-cli analytics for ci environment
 test-frontend: dep-frontend
@@ -98,7 +101,3 @@ test-frontend-coverage: dep-frontend
 # reduce logging, disable angular-cli analytics for ci environment
 test-frontend-coverage-ci: dep-frontend
 	cd frontend && npx ng test --watch=false --code-coverage --browsers=ChromeHeadlessCI
-
-.PHONY: test-frontend-storybook
-test-frontend-storybook:
-	cd frontend && ng run fastenhealth:storybook
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 8ce15f69..720acb29 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -6,6 +6,7 @@
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
+/storybook-static
 
 # dependencies
 /node_modules