Merge pull request #439 from jean-the-coder/fix-storybook

Fix Storybook

.github/workflows/ci.yaml

@@ -1,66 +1,22 @@
 name: CI
-# This workflow is triggered on pushes & pull requests
+# This workflow is triggered on pushes
 on:
-  pull_request:
-    branches:
-      - main
-      - sandbox
-      - beta
   push:
     branches: [ main, beta ]
     # Publish semver tags as releases.
   release:
     types: [published]
 jobs:
-  test-frontend:
+  test:
-    name: Test Frontend
+    uses: ./.github/workflows/development.yaml
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: test
-        uses: actions/setup-node@v1
-        with:
-          node-version: 20.x
-      - name: Test Frontend
-        run: |
-          make test-frontend-coverage
-      - name: Upload coverage
-        uses: actions/upload-artifact@v3
-        with:
-          name: coverage
-          path: ${{ github.workspace }}/frontend/coverage/fastenhealth/lcov.info
-          retention-days: 1
-  test-backend:
-    name: Test Backend
-    runs-on: ubuntu-latest
-    container: ghcr.io/packagrio/packagr:latest-golang
-    env:
-      STATIC: true
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Test Backend
-        run: |
-          go install github.com/golang/mock/mockgen@v1.6.0
-          go generate ./...
-          make test-backend-coverage
-          CGO_ENABLED=0 go build -buildvcs=false ./backend/cmd/fasten/
-      - name: Upload coverage
-        uses: actions/upload-artifact@v3
-        with:
-          name: coverage
-          path: ${{ github.workspace }}/backend-coverage.txt
-          retention-days: 1
   test-coverage:
     name: Test Coverage Upload
     needs:
-      - test-backend
+      - test
-      - test-frontend
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Download coverage reports
         uses: actions/download-artifact@v3
         with:
@@ -72,12 +28,11 @@ jobs:
           flags: unittests
           fail_ci_if_error: true
           verbose: true
-
   storybook:
     name: Storybook Upload
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - run: cd frontend && yarn install

.github/workflows/development.yaml

@@ -0,0 +1,68 @@
+name: Development
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - reopened
+  workflow_call:
+
+jobs:
+  test-frontend:
+    name: Test Frontend
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - name: Test Frontend
+        run: |
+          make test-frontend-coverage
+      - name: Upload coverage
+        uses: actions/upload-artifact@v3
+        with:
+          name: coverage
+          path: ${{ github.workspace }}/frontend/coverage/fastenhealth/lcov.info
+          retention-days: 1
+  test-backend:
+    name: Test Backend
+    runs-on: ubuntu-latest
+    container: ghcr.io/packagrio/packagr:latest-golang
+    env:
+      STATIC: true
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Setup
+        run: |
+          go install github.com/golang/mock/mockgen@v1.6.0
+          go generate ./...
+      - name: Test Backend
+        run: |
+          make test-backend-coverage
+          CGO_ENABLED=0 go build -buildvcs=false ./backend/cmd/fasten/
+      - name: Upload coverage
+        uses: actions/upload-artifact@v3
+        with:
+          name: coverage
+          path: ${{ github.workspace }}/backend-coverage.txt
+          retention-days: 1
+  compile-storybook:
+    name: Compile Storybook
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Setup
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - run: |
+          make build-storybook
+
+  

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
 ```
 
 

Makefile

@@ -7,9 +7,13 @@
 .PHONY: test
 test: test-backend test-frontend
 
-.PHONY: serve-frontend-storybook
+.PHONY: build-storybook
-serve-frontend-storybook:
+build-storybook: dep-frontend
-	cd frontend && ng run fastenhealth:storybook
+	cd frontend && npx ng run fastenhealth:build-storybook
+
+.PHONY: serve-storybook
+serve-storybook: dep-frontend
+	cd frontend && npx ng run fastenhealth:storybook
 
 .PHONY: serve-frontend
 serve-frontend: dep-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

frontend/.gitignore

@@ -6,6 +6,7 @@
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
+/storybook-static
 
 # dependencies
 /node_modules

frontend/src/app/components/medical-sources-card/medical-sources-card.stories.ts

@@ -1,17 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/angular';
+import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+
 import {MedicalSourcesCardComponent} from './medical-sources-card.component'
+import { PatientAccessBrand } from 'src/app/models/patient-access-brands';
+import { ImageFallbackDirective } from 'src/app/directives/image-fallback.directive';
 
 // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
 const meta: Meta<MedicalSourcesCardComponent> = {
   title: 'Components/MedicalSourcesCard',
   component: MedicalSourcesCardComponent,
   decorators: [
-    // moduleMetadata({
+    componentWrapperDecorator((story) => `<div style="width: 300px">${story}</div>`),
-    //   imports: [AppModule]
+    moduleMetadata({
-    // })
+      declarations: [ImageFallbackDirective]
-    // applicationConfig({
+    })
-    //   providers: [importProvidersFrom(AppModule)],
-    // }),
   ],
   tags: ['autodocs'],
   render: (args: MedicalSourcesCardComponent) => ({
@@ -33,41 +35,26 @@ const meta: Meta<MedicalSourcesCardComponent> = {
 export default meta;
 type Story = StoryObj<MedicalSourcesCardComponent>;
 
+const brand: PatientAccessBrand = {
+  id: 'b53c77ed-c0f4-4d6a-bddf-5c0e3934c2d6',
+  name: 'Aetna',
+  last_updated: '2024-01-12T05:20:50.52Z',
+  portal_ids: []
+};
+
 // More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
 export const Entry: Story = {
   args: {
     sourceInfo: {
-      metadata: {
+      brand: brand
-        // aliases?: string[]
+    },
-        // brand_logo?: string
-        category: [],
-        display: "Aetna",
-        hidden: false,
-        // identifiers?: {[name:string]: string}
-        // patient_access_description?: string
-        // patient_access_url?: string
-        platform_type: "aetna",
-        source_type: "aetna"
-      }
-    }
   }
 };
 
 export const LoadingAuthorize: Story = {
   args: {
     sourceInfo: {
-      metadata: {
+      brand: brand
-        // aliases?: string[]
-        // brand_logo?: string
-        category: [],
-        display: "Aetna",
-        hidden: false,
-        // identifiers?: {[name:string]: string}
-        // patient_access_description?: string
-        // patient_access_url?: string
-        platform_type: "aetna",
-        source_type: "aetna"
-      }
     },
     status: 'authorize'
   },
@@ -76,18 +63,7 @@ export const LoadingAuthorize: Story = {
 export const LoadingToken: Story = {
   args: {
     sourceInfo: {
-      metadata: {
+      brand: brand
-        // aliases?: string[]
-        // brand_logo?: string
-        category: [],
-        display: "Aetna",
-        hidden: false,
-        // identifiers?: {[name:string]: string}
-        // patient_access_description?: string
-        // patient_access_url?: string
-        platform_type: "aetna",
-        source_type: "aetna"
-      }
     },
     status: 'token'
   },
@@ -96,57 +72,18 @@ export const LoadingToken: Story = {
 export const Failed: Story = {
   args: {
     sourceInfo: {
-      metadata: {
+      brand: brand
-        // aliases?: string[]
-        // brand_logo?: string
-        category: [],
-        display: "Aetna",
-        hidden: false,
-        // identifiers?: {[name:string]: string}
-        // patient_access_description?: string
-        // patient_access_url?: string
-        platform_type: "aetna",
-        source_type: "aetna"
-      }
     },
     status: 'failed'
   },
 };
 
-
+export const MissingLogo: Story = {
-export const Hidden: Story = {
   args: {
     sourceInfo: {
-      metadata: {
+      brand: {
-        // aliases?: string[]
+        ...brand,
-        // brand_logo?: string
+        id: 'aetna-123',
-        category: [],
-        display: "Aetna",
-        hidden: true,
-        // identifiers?: {[name:string]: string}
-        // patient_access_description?: string
-        // patient_access_url?: string
-        platform_type: "aetna",
-        source_type: "aetna"
-      }
-    }
-  },
-};
-
-export const CustomBrandLogo: Story = {
-  args: {
-    sourceInfo: {
-      metadata: {
-        // aliases?: string[]
-        brand_logo: 'bluebutton.png',
-        category: [],
-        display: "Aetna",
-        hidden: false,
-        // identifiers?: {[name:string]: string}
-        // patient_access_description?: string
-        // patient_access_url?: string
-        platform_type: "aetna",
-        source_type: "aetna"
       }
     }
   },