From 90b82d8783b83a79687be8c7cfbc406f98220522 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Tue, 26 Jul 2022 20:01:50 +0100 Subject: [PATCH] more chromatic plus CI --- .github/workflows/chromatic.yml | 44 ++++ src/Ombi/ClientApp/package.json | 12 +- .../ClientApp/src/stories/Button.stories.ts | 42 ---- .../ClientApp/src/stories/Header.stories.ts | 35 --- .../src/stories/Introduction.stories.mdx | 211 ------------------ .../ClientApp/src/stories/Page.stories.ts | 36 --- src/Ombi/ClientApp/src/stories/User.ts | 2 - .../src/stories/assets/code-brackets.svg | 1 - .../ClientApp/src/stories/assets/colors.svg | 1 - .../ClientApp/src/stories/assets/comments.svg | 1 - .../src/stories/assets/direction.svg | 1 - .../ClientApp/src/stories/assets/flow.svg | 1 - .../ClientApp/src/stories/assets/plugin.svg | 1 - .../ClientApp/src/stories/assets/repo.svg | 1 - .../ClientApp/src/stories/assets/stackalt.svg | 1 - .../ClientApp/src/stories/button.component.ts | 53 ----- src/Ombi/ClientApp/src/stories/button.css | 30 --- .../ClientApp/src/stories/header.component.ts | 75 ------- src/Ombi/ClientApp/src/stories/header.css | 32 --- .../ClientApp/src/stories/page.component.ts | 77 ------- src/Ombi/ClientApp/src/stories/page.css | 69 ------ 21 files changed, 53 insertions(+), 673 deletions(-) create mode 100644 .github/workflows/chromatic.yml delete mode 100644 src/Ombi/ClientApp/src/stories/Button.stories.ts delete mode 100644 src/Ombi/ClientApp/src/stories/Header.stories.ts delete mode 100644 src/Ombi/ClientApp/src/stories/Introduction.stories.mdx delete mode 100644 src/Ombi/ClientApp/src/stories/Page.stories.ts delete mode 100644 src/Ombi/ClientApp/src/stories/User.ts delete mode 100644 src/Ombi/ClientApp/src/stories/assets/code-brackets.svg delete mode 100644 src/Ombi/ClientApp/src/stories/assets/colors.svg delete mode 100644 src/Ombi/ClientApp/src/stories/assets/comments.svg delete mode 100644 src/Ombi/ClientApp/src/stories/assets/direction.svg delete mode 100644 src/Ombi/ClientApp/src/stories/assets/flow.svg delete mode 100644 src/Ombi/ClientApp/src/stories/assets/plugin.svg delete mode 100644 src/Ombi/ClientApp/src/stories/assets/repo.svg delete mode 100644 src/Ombi/ClientApp/src/stories/assets/stackalt.svg delete mode 100644 src/Ombi/ClientApp/src/stories/button.component.ts delete mode 100644 src/Ombi/ClientApp/src/stories/button.css delete mode 100644 src/Ombi/ClientApp/src/stories/header.component.ts delete mode 100644 src/Ombi/ClientApp/src/stories/header.css delete mode 100644 src/Ombi/ClientApp/src/stories/page.component.ts delete mode 100644 src/Ombi/ClientApp/src/stories/page.css diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 000000000..614fa27cf --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,44 @@ +name: 'Chromatic' + +# Event for the workflow +on: + push: + workflow_dispatch: + +# List of jobs +jobs: + chromatic-deployment: + # Operating System + runs-on: ubuntu-latest + defaults: + run: + working-directory: ./src/Ombi/ClientApp + # Job steps + 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 + run: yarn + + - name: Publish to Chromatic + if: github.ref != 'refs/heads/master' + uses: chromaui/action@v1 + with: + projectToken: 7c47e1a1a4bd + exitZeroOnChanges: 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 diff --git a/src/Ombi/ClientApp/package.json b/src/Ombi/ClientApp/package.json index 1ddd01f18..91bc92b8d 100644 --- a/src/Ombi/ClientApp/package.json +++ b/src/Ombi/ClientApp/package.json @@ -8,7 +8,8 @@ "lint": "ng lint", "docs:json": "compodoc -p ./tsconfig.json -e json -d .", "storybook": "start-storybook -p 6006", - "build-storybook": "yarn docs:json && build-storybook" + "build-storybook": "yarn docs:json && build-storybook", + "chromatic": "chromatic --exit-zero-on-changes" }, "private": true, "dependencies": { @@ -62,7 +63,10 @@ "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", @@ -91,5 +95,7 @@ "protractor": "~5.4.0", "ts-node": "~5.0.1", "tslint": "^5.12.0" - } + }, + "readme": "ERROR: No README data found!", + "_id": "ombi@3.0.0" } diff --git a/src/Ombi/ClientApp/src/stories/Button.stories.ts b/src/Ombi/ClientApp/src/stories/Button.stories.ts deleted file mode 100644 index 6264dd173..000000000 --- a/src/Ombi/ClientApp/src/stories/Button.stories.ts +++ /dev/null @@ -1,42 +0,0 @@ -// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1 -import { Story, Meta } from '@storybook/angular/types-6-0'; -import Button from './button.component'; - -// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: Button, - // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as Meta; - -// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args -const Template: Story`, - styleUrls: ['./button.css'], -}) -export default class ButtonComponent { - /** - * Is this the principal call to action on the page? - */ - @Input() - primary = false; - - /** - * What background color to use - */ - @Input() - backgroundColor?: string; - - /** - * How large should the button be? - */ - @Input() - size: 'small' | 'medium' | 'large' = 'medium'; - - /** - * Button contents - * - * @required - */ - @Input() - label = 'Button'; - - /** - * Optional click handler - */ - @Output() - onClick = new EventEmitter(); - - public get classes(): string[] { - const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - - return ['storybook-button', `storybook-button--${this.size}`, mode]; - } -} diff --git a/src/Ombi/ClientApp/src/stories/button.css b/src/Ombi/ClientApp/src/stories/button.css deleted file mode 100644 index dc91dc763..000000000 --- a/src/Ombi/ClientApp/src/stories/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 700; - border: 0; - border-radius: 3em; - cursor: pointer; - display: inline-block; - line-height: 1; -} -.storybook-button--primary { - color: white; - background-color: #1ea7fd; -} -.storybook-button--secondary { - color: #333; - background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; -} -.storybook-button--small { - font-size: 12px; - padding: 10px 16px; -} -.storybook-button--medium { - font-size: 14px; - padding: 11px 20px; -} -.storybook-button--large { - font-size: 16px; - padding: 12px 24px; -} diff --git a/src/Ombi/ClientApp/src/stories/header.component.ts b/src/Ombi/ClientApp/src/stories/header.component.ts deleted file mode 100644 index 51b0f310a..000000000 --- a/src/Ombi/ClientApp/src/stories/header.component.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { User } from './User'; - -@Component({ - selector: 'storybook-header', - template: `
-
-
- - - - - - - -

Acme

-
-
-
- - Welcome, {{ user.name }}! - - -
-
- - -
-
-
-
`, - styleUrls: ['./header.css'], -}) -export default class HeaderComponent { - @Input() - user: User | null = null; - - @Output() - onLogin = new EventEmitter(); - - @Output() - onLogout = new EventEmitter(); - - @Output() - onCreateAccount = new EventEmitter(); -} diff --git a/src/Ombi/ClientApp/src/stories/header.css b/src/Ombi/ClientApp/src/stories/header.css deleted file mode 100644 index 830610e6f..000000000 --- a/src/Ombi/ClientApp/src/stories/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.wrapper { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - display: flex; - align-items: center; - justify-content: space-between; -} - -svg { - display: inline-block; - vertical-align: top; -} - -h1 { - font-weight: 900; - font-size: 20px; - line-height: 1; - margin: 6px 0 6px 10px; - display: inline-block; - vertical-align: top; -} - -button + button { - margin-left: 10px; -} - -.welcome { - color: #333; - font-size: 14px; - margin-right: 10px; -} diff --git a/src/Ombi/ClientApp/src/stories/page.component.ts b/src/Ombi/ClientApp/src/stories/page.component.ts deleted file mode 100644 index aceee9900..000000000 --- a/src/Ombi/ClientApp/src/stories/page.component.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { Component } from '@angular/core'; -import { User } from './User'; - -@Component({ - selector: 'storybook-page', - template: `
- -
-

Pages in Storybook

-

- We recommend building UIs with a - - component-driven - - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at - - Storybook tutorials - - . Read more in the - docs - . -

-
- Tip Adjust the width of the canvas with the - - - - - - Viewports addon in the toolbar -
-
-
`, - styleUrls: ['./page.css'], -}) -export default class PageComponent { - user: User | null = null; - - doLogout() { - this.user = null; - } - - doLogin() { - this.user = { name: 'Jane Doe' }; - } - - doCreateAccount() { - this.user = { name: 'Jane Doe' }; - } -} diff --git a/src/Ombi/ClientApp/src/stories/page.css b/src/Ombi/ClientApp/src/stories/page.css deleted file mode 100644 index fbc32aea2..000000000 --- a/src/Ombi/ClientApp/src/stories/page.css +++ /dev/null @@ -1,69 +0,0 @@ -section { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 24px; - padding: 48px 20px; - margin: 0 auto; - max-width: 600px; - color: #333; -} - -section h2 { - font-weight: 900; - font-size: 32px; - line-height: 1; - margin: 0 0 4px; - display: inline-block; - vertical-align: top; -} - -section p { - margin: 1em 0; -} - -section a { - text-decoration: none; - color: #1ea7fd; -} - -section ul { - padding-left: 30px; - margin: 1em 0; -} - -section li { - margin-bottom: 8px; -} - -section .tip { - display: inline-block; - border-radius: 1em; - font-size: 11px; - line-height: 12px; - font-weight: 700; - background: #e7fdd8; - color: #66bf3c; - padding: 4px 12px; - margin-right: 10px; - vertical-align: top; -} - -section .tip-wrapper { - font-size: 13px; - line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -section .tip-wrapper svg { - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - vertical-align: top; - margin-top: 3px; -} - -section .tip-wrapper svg path { - fill: #1ea7fd; -}