Storybook

.github/workflows/chromatic.yml

@@ -0,0 +1,47 @@
+name: 'Chromatic'
+
+# Event for the workflow
+on:
+  push:
+  workflow_dispatch:
+
+# List of jobs
+jobs:
+  storybook-build:
+    # Operating System
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: NodeModules Cache
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: node_modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        working-directory: ./src/Ombi/ClientApp
+        run: yarn
+
+      - name: Publish to Chromatic
+        if: github.ref != 'refs/heads/master'
+        uses: chromaui/action@v1
+        with:
+          projectToken: 7c47e1a1a4bd
+          exitZeroOnChanges: true
+          workingDir: ./src/Ombi/ClientApp
+          buildScriptName: storybookbuild
+          exitOnceUploaded: true
+
+      - name: Publish to Chromatic and auto accept changes
+        if: github.ref == 'refs/heads/master'
+        uses: chromaui/action@v1
+        with:
+          projectToken: 7c47e1a1a4bd
+          autoAcceptChanges: true # 👈 Option to accept all changes
+          workingDir: ./src/Ombi/ClientApp
+          buildScriptName: storybookbuild
+          exitOnceUploaded: true

.github/workflows/cypress.yml

@@ -34,15 +34,17 @@ jobs:
     - name: Install Frontend Deps
       run: yarn --cwd ./src/Ombi/ClientApp install
 
+    - name: Start Frontend
+      run: |
+          nohup yarn --cwd ./src/Ombi/ClientApp start &
+
     - name: Install Automation Deps
       run: yarn --cwd ./tests install
 
     - name: Start Backend
       run: |
           nohup dotnet run --project ./src/Ombi -- --host http://*:3577 &
-    - name: Start Frontend
-      run: |
-          nohup yarn --cwd ./src/Ombi/ClientApp start &
+
     - name: Cypress Tests
       uses: cypress-io/github-action@v2.8.2
       with:
@@ -51,8 +53,8 @@ jobs:
         headless: true
         working-directory: tests
         wait-on: http://localhost:3577/
-        # 7 minutes
-        wait-on-timeout: 420
+        # 10 minutes
+        wait-on-timeout: 600
       env:
         CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/Ombi/ClientApp/.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/angular",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  },
+  "staticDirs": ['../../wwwroot/images']
+}

src/Ombi/ClientApp/.storybook/preview-body.html

@@ -0,0 +1,5 @@
+<style>
+    .test-class {
+        background-color: purple;
+    }
+</style>

src/Ombi/ClientApp/.storybook/preview.js

@@ -0,0 +1,14 @@
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+setCompodocJson(docJson);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: { inlineStories: true },
+}

src/Ombi/ClientApp/.storybook/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../src/tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "node"
+    ],
+    "typeRoots": [
+      "../node_modules/@typings"
+  ],
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*",
+    "../projects/**/*"
+  ],
+  "files": [
+    "./typings.d.ts"
+  ]
+}

src/Ombi/ClientApp/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

src/Ombi/ClientApp/documentation.json

@@ -0,0 +1,18 @@
+{
+    "pipes": [],
+    "interfaces": [],
+    "injectables": [],
+    "guards": [],
+    "interceptors": [],
+    "classes": [],
+    "directives": [],
+    "components": [],
+    "modules": [],
+    "miscellaneous": [],
+    "routes": [],
+    "coverage": {
+        "count": 0,
+        "status": "low",
+        "files": []
+    }
+}

src/Ombi/ClientApp/package.json

@@ -5,7 +5,11 @@
     "ng": "ng",
     "start": "ng serve --port 3578 --configuration hmr",
     "build": "node --max_old_space_size=6144 node_modules/@angular/cli/bin/ng build -c production",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
+    "storybook": "start-storybook -p 6006",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "storybookbuild": "yarn build-storybook"
   },
   "private": true,
   "dependencies": {
@@ -22,7 +26,7 @@
     "@angular/platform-server": "^14.0.0",
     "@angular/router": "^14.0.0",
     "@angularclass/hmr": "^3.0.0",
-    "@aspnet/signalr": "^1.1.0",
+    "@microsoft/signalr": "^6.0.7",
     "@auth0/angular-jwt": "^5.0.2",
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@fullcalendar/core": "^4.2.0",
@@ -59,22 +63,39 @@
     "ts-md5": "^1.2.7",
     "tslib": "^1.10.0",
     "tslint-angular": "^1.1.2",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.4",
+    "protractor": "~5.4.0",
+    "ts-node": "~5.0.1",
+    "tslint": "^5.12.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.0.0",
     "@angular/cli": "^14.0.0",
     "@angular/compiler-cli": "^14.0.0",
     "@angular/language-service": "^14.0.0",
+    "@babel/core": "^7.18.9",
+    "@compodoc/compodoc": "^1.1.19",
+    "@types/node": "^16.11.45",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/angular": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^16.10.9",
+    "babel-loader": "^8.2.5",
+    "chromatic": "^6.7.1",
     "codelyzer": "^6.0.1",
     "typescript": "~4.7.3"
   },
   "optionalDependencies": {
     "protractor": "~5.4.0",
     "ts-node": "~5.0.1",
     "tslint": "^5.12.0"
-  }
-}
+  },
+  "readme": "ERROR: No README data found!",
+  "_id": "ombi@3.0.0"
+}

src/Ombi/ClientApp/src/app/components/image/image.component.stories.ts

@@ -0,0 +1,73 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { APP_BASE_HREF } from '@angular/common';
+import { Story, Meta, moduleMetadata } from '@storybook/angular';
+import { RequestType } from '../../interfaces';
+import { ImageComponent } from './image.component';
+
+// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+export default {
+  title: 'Image Component',
+  component: ImageComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: APP_BASE_HREF,
+          useValue: ""
+      },
+      ]
+    })
+  ]
+} as Meta;
+
+// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+const Template: Story<ImageComponent> = (args: ImageComponent) => ({
+  props: args,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+Primary.args = {
+  src: 'https://ombi.io/img/logo-orange-small.png',
+  type: RequestType.movie
+};
+
+export const ClassApplied = Template.bind({});
+ClassApplied.args = {
+  src: 'https://ombi.io/img/logo-orange-small.png',
+  type: RequestType.movie,
+  class: 'test-class'
+};
+
+export const StyleApplied = Template.bind({});
+StyleApplied.args = {
+  src: 'https://ombi.io/img/logo-orange-small.png',
+  type: RequestType.movie,
+  style: 'background-color: red;'
+};
+
+export const IdApplied = Template.bind({});
+IdApplied.args = {
+  src: 'https://ombi.io/img/logo-orange-small.png',
+  type: RequestType.movie,
+  id: 'testId123'
+};
+
+// export const InvalidMovieImage = Template.bind({});
+// InvalidMovieImage.args = {
+//   src: 'https://httpstat.us/429',
+//   type: RequestType.movie,
+//   id: 'testId123'
+// };
+
+// export const InvalidTvImage = Template.bind({});
+// InvalidTvImage.args = {
+//   src: 'https://httpstat.us/429',
+//   type: RequestType.tvShow,
+// };
+
+// export const InvalidMusicImage = Template.bind({});
+// InvalidMusicImage.args = {
+//   src: 'https://httpstat.us/429',
+//   type: RequestType.album,
+// };