From e3ac8e4a10d14d4ec35491d760b6962b28b18870 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Wed, 10 Aug 2022 06:55:54 +0200 Subject: [PATCH 01/12] Fix references from DDB to DPL These are leftovers from the roots of the project, the ddb-react project. --- docs/code_guidelines.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/code_guidelines.md b/docs/code_guidelines.md index 5ace0342c9..8b09f29468 100644 --- a/docs/code_guidelines.md +++ b/docs/code_guidelines.md @@ -11,7 +11,7 @@ help achieve: * The best possible conditions for the individual library website to customize configuration and appearance -Contributions to the DDB React project will be reviewed by members of the Core +Contributions to the DPL React project will be reviewed by members of the Core team. These guidelines should inform contributors about what to expect in such a review. If a review comment cannot be traced back to one of these guidelines it indicates that the guidelines should be updated to ensure transparency. @@ -22,8 +22,8 @@ The project follows the [Airbnb JavaScript Style Guide](https://airbnb.io/javasc and [Airbnb React/JSX Style Guide](https://airbnb.io/javascript/react/). This choice is based on multiple factors: -1. Historically the community of developers working with DDB - [has ties to the Drupal project](https://github.com/ding2/ding2/). +1. Historically the community of developers working with the Danish Public + Libraries [has ties to the Drupal project](https://github.com/ding2/ding2/). [Drupal has adopted the Airbnb JavaScript Style Guide](https://www.drupal.org/node/2873849) so this choice should ensure consistency between the two projects. 2. Airbnb's standard is one of the best known and most used in the JavaScript From 697332f5f8201ca239ea9cb4f27d1b085e601af4 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Wed, 10 Aug 2022 06:57:27 +0200 Subject: [PATCH 02/12] Fix typos in README and code guidelines --- README.md | 2 +- docs/code_guidelines.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 847440e38f..0ae17cee30 100644 --- a/README.md +++ b/README.md @@ -344,7 +344,7 @@ __Cowabunga!__ You now got styling in your application If the component is simple enough to be a primitive you would use in multiple occasions it's called an 'atom'. Such as a button or a link. If it's more -specific that that and to be used across apps we just call it a component. An +specific than that and to be used across apps we just call it a component. An example would be some type of media presented alongside a header and some text. The process when creating an atom or a component is more or less similar, but diff --git a/docs/code_guidelines.md b/docs/code_guidelines.md index 8b09f29468..4decd4a27b 100644 --- a/docs/code_guidelines.md +++ b/docs/code_guidelines.md @@ -27,7 +27,7 @@ choice is based on multiple factors: [Drupal has adopted the Airbnb JavaScript Style Guide](https://www.drupal.org/node/2873849) so this choice should ensure consistency between the two projects. 2. Airbnb's standard is one of the best known and most used in the JavaScript - ccoding standard landscape. + coding standard landscape. 3. Airbnb’s standard is both comprehensive and well documented. 4. Airbnb’s standards cover both JavaScript in general React/JSX specifically. This avoids potential conflicts between multiple standards. From 0798960efb553f22242895679974a86dcf70b755 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Wed, 10 Aug 2022 07:00:20 +0200 Subject: [PATCH 03/12] References TypeScript in README and code guidelines Replace TypeScript instead of JavaScript in our documentation to clarify that this is the primary language of the project. --- README.md | 6 +++--- docs/code_guidelines.md | 10 ++++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 0ae17cee30..e41abd51ed 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ [![codecov](https://codecov.io/gh/danskernesdigitalebibliotek/dpl-react/branch/master/graph/badge.svg)](https://codecov.io/gh/danskernesdigitalebibliotek/dpl-react) A set of React components and applications providing self-service features for -Danish public libraries. +Danish public libraries implemented in TypeScript. @@ -17,7 +17,7 @@ Danish public libraries. - [Access tokens](#access-tokens) - [Installation](#installation) - [Standard and style](#standard-and-style) - - [JavaScript + JSX](#javascript--jsx) + - [TypeScript + TSX](#typescript--tsx) - [Named functions Vs. Anonymous arrow functions](#named-functions-vs-anonymous-arrow-functions) - [Create a new application](#create-a-new-application) - [Application state-machine](#application-state-machine) @@ -84,7 +84,7 @@ When storybook is started, you can access it at: [dpl-react.docker](http://dpl-r ### Standard and style -#### JavaScript + JSX +#### TypeScript + TSX For static code analysis we make use of the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) and for formatting we make use of [Prettier](https://github.com/prettier/prettier) diff --git a/docs/code_guidelines.md b/docs/code_guidelines.md index 4decd4a27b..9ab352c90c 100644 --- a/docs/code_guidelines.md +++ b/docs/code_guidelines.md @@ -5,7 +5,7 @@ components for the Danish Public Libraries CMS project. The guidelines should help achieve: * A stable, secure and high quality foundation for building and maintaining - client-side JavaScript components for library websites + client-side TypeScript components for library websites * Consistency across multiple developers participating in the project * The best possible conditions for sharing components between library websites * The best possible conditions for the individual library website to customize @@ -19,8 +19,10 @@ indicates that the guidelines should be updated to ensure transparency. ## Coding standards The project follows the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/) -and [Airbnb React/JSX Style Guide](https://airbnb.io/javascript/react/). This -choice is based on multiple factors: +and [Airbnb React/JSX Style Guide](https://airbnb.io/javascript/react/). They +have been [extended to support TypeScript](https://github.com/iamturns/eslint-config-airbnb-typescript). + +This choice is based on multiple factors: 1. Historically the community of developers working with the Danish Public Libraries [has ties to the Drupal project](https://github.com/ding2/ding2/). @@ -52,7 +54,7 @@ be especially aware of. * Firefox * Samsung Browser -### JavaScript +### TypeScript #### Named functions vs. anonymous arrow functions From 1d83153c187056a47cce385b7d42dc35b43a0f23 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Wed, 10 Aug 2022 07:03:03 +0200 Subject: [PATCH 04/12] Update examples to use TypeScript instead of JavaScript Since TypeScript is the language used by the project we want this to be reflected in the documentation. Remove examples for components and atoms since they use JavaScript for now. --- README.md | 273 +++++++++++++++--------------------------------------- 1 file changed, 74 insertions(+), 199 deletions(-) diff --git a/README.md b/README.md index e41abd51ed..4eeb13c67e 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,6 @@ Danish public libraries implemented in TypeScript. - [Application state-machine](#application-state-machine) - [Style your application](#style-your-application) - [Cross application components](#cross-application-components) - - [Creating an atom](#creating-an-atom) - - [Creating a component](#creating-a-component) - [Editor example configuration](#editor-example-configuration) - [Usage](#usage) - [Naive app mount](#naive-app-mount) @@ -134,24 +132,17 @@ stacktraces.
1. Create a new application component -```javascript -// ./src/apps/my-new-application/my-new-application.jsx -import React from "react"; -import PropTypes from "prop-types"; +```typescript +// ./src/apps/my-new-application/my-new-application.tsx +import * as React from "react"; -export function MyNewApplication({ text }) { - return ( -

{text}

- ); +interface MyNewApplicationProps { + text: string; } -MyNewApplication.defaultProps = { - text: "The fastest man alive!" -}; - -MyNewApplication.propTypes = { - text: PropTypes.string -}; +const MyNewApplication: React.FC = ({ text }) => ( +

{text}

+); export default MyNewApplication; ``` @@ -161,18 +152,20 @@ export default MyNewApplication;
2. Create the entry component -```javascript -// ./src/apps/my-new-application/my-new-application.entry.jsx -import React from "react"; -import PropTypes from "prop-types"; -import MyNewApplication from "./my-new-application"; +```typescript +// ./src/apps/my-new-application/my-new-application.entry.tsx +import * as React from "react"; + +interface MyNewApplicationEntryProps { + text: string; +} // The props of an entry is all of the data attributes that were // set on the DOM element. See the section on "Naive app mount." for // an example. -export function MyNewApplicationEntry(props) { - return ; -} +const MyNewApplicationEntry: React.FC = ({ + text +}) =>

{text}

; export default MyNewApplicationEntry; ``` @@ -183,7 +176,7 @@ export default MyNewApplicationEntry; 3. Create the mount ```javascript -// ./src/apps/my-new-application/my-new-application.mount.js +// ./src/apps/my-new-application/my-new-application.mount.ts import addMount from "../../core/addMount"; import MyNewApplication from "./my-new-application.entry"; @@ -195,24 +188,28 @@ addMount({ appName: "my-new-application", app: MyNewApplication });
4. Add a story for local development -```javascript -// ./src/apps/my-new-application/my-new-application.dev.jsx +```typescript +// ./src/apps/my-new-application/my-new-application.dev.tsx +import { ComponentMeta, ComponentStory } from "@storybook/react"; import React from "react"; -import MyNewApplicationEntry from "./my-new-application.entry"; -import MyNewApplication from "./my-new-application"; - -export default { title: "Apps|My new application" }; - -export function Entry() { - // Testing the version that will be shipped. - return ; -} - -export function WithoutData() { - // Play around with the application itself without server side data. - return ; -} - +import MyNewApplication, { + MyNewApplicationEntryProps +} from "./my-new-application.entry"; + +export default { + title: "My new application", + component: MyNewApplication, + argTypes: { + text: { + defaultValue: "Text", + control: { type: "text" } + } + } +} as ComponentMeta; + +export const App: ComponentStory = ( + args: MyNewApplicationEntryProps +) => ; ```
@@ -240,7 +237,7 @@ for you to tinker around. Most applications will have multiple internal states, so to aid consistency, it's recommended to: -``` javascript +``` typescript const [status, setStatus] = useState(""); ``` @@ -278,7 +275,7 @@ appropriate. ```scss // ./src/apps/my-new-application/my-new-application.scss -.dpl-warm { +.warm { color: maroon; } ``` @@ -288,24 +285,17 @@ appropriate.
2. Add the class to your application -```javascript -// ./src/apps/my-new-application/my-new-application.jsx -import React from "react"; -import PropTypes from "prop-types"; +```typescript +// ./src/apps/my-new-application/my-new-application.tsx +import * as React from "react"; -export function MyNewApplication({ text }) { - return ( -

{text}

- ); +interface MyNewApplicationProps { + text: string; } -MyNewApplication.defaultProps = { - text: "The fastest man alive!" -}; - -MyNewApplication.propTypes = { - text: PropTypes.string -}; +const MyNewApplication: React.FC = ({ text }) => ( +

{text}

+); export default MyNewApplication; ``` @@ -315,25 +305,29 @@ export default MyNewApplication;
3. Import the scss into your story -```javascript -// ./src/apps/my-new-application/my-new-application.dev.jsx +```typescript +import { ComponentMeta, ComponentStory } from "@storybook/react"; import React from "react"; -import MyNewApplicationEntry from "./my-new-application.entry"; -import MyNewApplication from "./my-new-application"; - -import './my-new-application.scss'; - -export default { title: "Apps|My new application" }; - -export function Entry() { - // Testing the version that will be shipped. - return ; -} - -export function WithoutData() { - // Play around with the application itself without server side data. - return ; -} +import MyNewApplication, { + MyNewApplicationEntryProps +} from "./my-new-application.entry"; + +import "./my-new-application.css"; + +export default { + title: "My new application", + component: MyNewApplication, + argTypes: { + text: { + defaultValue: "Text", + control: { type: "text" } + } + } +} as ComponentMeta; + +export const App: ComponentStory = ( + args: MyNewApplicationEntryProps +) => ; ```
@@ -343,130 +337,11 @@ __Cowabunga!__ You now got styling in your application ### Cross application components If the component is simple enough to be a primitive you would use in multiple -occasions it's called an 'atom'. Such as a button or a link. If it's more -specific than that and to be used across apps we just call it a component. An -example would be some type of media presented alongside a header and some text. +occasions it's called n component. -The process when creating an atom or a component is more or less similar, but +The process when creating an component or an app is more or less similar, but some structural differences might be needed. -#### Creating an atom - -
- 1. Create the atom - -```javascript -// ./src/components/atoms/my-new-atom/my-new-atom.jsx -import React from "react"; -import PropTypes from 'prop-types'; - -/** - * A simple button. - * - * @export - * @param {object} props - * @returns {ReactNode} - */ -export function MyNewAtom({ className, children }) { - return ; -} - -MyNewAtom.propTypes = { - className: PropTypes.string, - children: PropTypes.node.isRequired -} - -MyNewAtom.defaultProps = { - className: "" -} - -export default MyNewAtom; -``` - -
- -
- 2. Create styles for the atom - -```scss -// ./src/components/atoms/my-new-atom/my-new-atom.scss -.dpl-btn { - color: blue; -} -``` - -
- -
- 3. Import the atom's styles into the component stylesheet - -```scss -// ./src/components/components.scss -@import 'atoms/button/button.scss'; -@import 'atoms/my-new-atom/my-new-atom.scss'; -``` - -
- -
- 4. Create a story for your atom - -```javascript -// ./src/components/atoms/my-new-atom/my-new-atom.dev.jsx -import React from "react"; -import MyNewAtom from "./my-new-atom"; - -export default { title: "Atoms|My new atom" }; - -export function WithText() { - return Cick me!; -} -``` - -
- -
- 5. Import the atom into the applications or other components where -you would want to use it - -```javascript -// ./src/apps/my-new-application/my-new-application.jsx -import React, {Fragment} from "react"; -import PropTypes from "prop-types"; - -import MyNewAtom from "../../components/atom/my-new-atom/my-new-atom" - -export function MyNewApplication({ text }) { - return ( - -

{text}

- - - ); -} - -MyNewApplication.defaultProps = { - text: "The fastest man alive!" -}; - -MyNewApplication.propTypes = { - text: PropTypes.string -}; - -export default MyNewApplication; -``` - -
- -__Finito!__ You now know how to share code across applications - -#### Creating a component - -Repeat all of the same steps as with an atom but place it in it's own directory -inside `components`. - -Such as `./src/components/my-new-component/my-new-component.jsx` - ### Editor example configuration If you use [Code](https://github.com/microsoft/vscode) we provide some easy to From e4f81862eee59c08b6a037e9744dee68762e90ef Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Mon, 15 Aug 2022 11:37:03 +0200 Subject: [PATCH 05/12] Do not remove dpl- prefix from CSS class names in example The prefix is dictated by our coding guidelines. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4eeb13c67e..f59ed944f2 100644 --- a/README.md +++ b/README.md @@ -275,7 +275,7 @@ appropriate. ```scss // ./src/apps/my-new-application/my-new-application.scss -.warm { +.dpl-warm { color: maroon; } ``` @@ -294,7 +294,7 @@ interface MyNewApplicationProps { } const MyNewApplication: React.FC = ({ text }) => ( -

{text}

+

{text}

); export default MyNewApplication; From 41c4e4b4446bdc1660deb52a1f17749d152f1700 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Mon, 15 Aug 2022 11:37:19 +0200 Subject: [PATCH 06/12] Fix typos --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f59ed944f2..e833e73f05 100644 --- a/README.md +++ b/README.md @@ -337,9 +337,9 @@ __Cowabunga!__ You now got styling in your application ### Cross application components If the component is simple enough to be a primitive you would use in multiple -occasions it's called n component. +occasions it's called a component. -The process when creating an component or an app is more or less similar, but +The process when creating a component or an app is more or less similar, but some structural differences might be needed. ### Editor example configuration From d7115c6605054ba8d6da742c919a672ca6dd3191 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Mon, 15 Aug 2022 11:38:07 +0200 Subject: [PATCH 07/12] All example code is TypeScript - not JavaScript This was missing in step 3. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e833e73f05..0b06d25119 100644 --- a/README.md +++ b/README.md @@ -175,7 +175,7 @@ export default MyNewApplicationEntry;
3. Create the mount -```javascript +```typescript // ./src/apps/my-new-application/my-new-application.mount.ts import addMount from "../../core/addMount"; import MyNewApplication from "./my-new-application.entry"; From 4c1731f1f8978be1d3221766ec0e56e593ab248a Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Mon, 15 Aug 2022 11:39:14 +0200 Subject: [PATCH 08/12] Use .ts and .tsx extensions for filenames in coding guidelines We use TypeScript - not JavaScript. --- docs/code_guidelines.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/code_guidelines.md b/docs/code_guidelines.md index 9ab352c90c..70545b9922 100644 --- a/docs/code_guidelines.md +++ b/docs/code_guidelines.md @@ -120,29 +120,29 @@ Files provided by components must be placed in the following folders and have the extensions defined here. * Components (React applications) - * apps/[component-name]/[component-name].jsx - * Core JSX component. + * apps/[component-name]/[component-name].tsx + * Core TSX component. * components/[component-name]/[component-name].scss * Stylesheet for the component. - * apps/[component-name]/[component-name].entry.jsx + * apps/[component-name]/[component-name].entry.tsx * Main application entrypoint. * This will usually also be where state management is implemented. * This must _not_ include the default stylesheet. - * apps/[component-name]/[component-name].dev.jsx + * apps/[component-name]/[component-name].dev.tsx * Storybook entry for the component. * If the component has a stylesheet this must also be included here. - * apps/[component-name]/[component-name].mount.js + * apps/[component-name]/[component-name].mount.ts * Code for registering the application to be booted when a page is loaded on the host system. - * apps/[component-name]/[component-name].test.js + * apps/[component-name]/[component-name].test.ts * Test of the component implemented with [Cypress](https://www.cypress.io/) * Reusable elements (React components) - * components/[component-name]/[component-name].dev.jsx - * components/[component-name]/[component-name].jsx + * components/[component-name]/[component-name].dev.tsx + * components/[component-name]/[component-name].tsx * components/[component-name]/[component-name].scss * Reusable functions and classes - * core/[function].js - * core/[Class].js + * core/[function].ts + * core/[Class].ts ## Third party code From d1066ff476410b3c0daf6bfcd566feb5a56768bc Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Mon, 15 Aug 2022 11:42:21 +0200 Subject: [PATCH 09/12] Remove references to atoms from documentation It is not a concept we use in practice anymore. Now everything is either a component or an app. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0b06d25119..39028868fc 100644 --- a/README.md +++ b/README.md @@ -418,7 +418,7 @@ this:
As a minimum you will need the `runtime.js` and `bundle.js`. For styling -of atoms and components you will need to import `components.css`. +of components you will need to import `components.css`. Each application also has its own JavaScript artifact and it might have a CSS artifact as well. Such as `add-to-checklist.js` and `add-to-checklist.css`. @@ -515,7 +515,7 @@ can reuse various levels of infrastructure provided by the project such as: 1. [Integration with various webservices](src/core) 2. [User authentication and token management](src/core) -3. [Visual atoms or components](#cross-application-components) +3. [Visual components](#cross-application-components) 4. Visual representations of [existing applications](src/apps) 5. [Styling using SCSS](#style-your-application) 6. Test infrastructure From 3c7e5fb173787f5f8ff84fa6be61c0ee30607b53 Mon Sep 17 00:00:00 2001 From: Kasper Garnaes Date: Mon, 5 Sep 2022 09:22:53 +0200 Subject: [PATCH 10/12] Make Codecov less noisy in pull requests Add a codecov.yml file with configurations that will make Codecov less noisy in pull requests. Most importantly Codecov checks will no longer be marked as failed when coverage decrease and annotations for missing coverage will no longer be shown. These can cause doubts for developers who think they might have missed something and hide issues that must be addressed. --- codecov.yml | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 codecov.yml diff --git a/codecov.yml b/codecov.yml new file mode 100644 index 0000000000..1c30714524 --- /dev/null +++ b/codecov.yml @@ -0,0 +1,13 @@ +# PR comments and annotations duplicate information that is also available in +# the Codecov UI +comment: false +github_checks: + annotations: false + +coverage: + status: + project: + default: + # Use informational status checks as we do not have a hard policy + # regarding code coverage at the moment. + informational: true From 92f23dd01642eaa3efa09ed196245f5b43d1423e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= Date: Fri, 16 Sep 2022 14:48:36 +0200 Subject: [PATCH 11/12] Move build job to separate workflow in GitHub Actions We need to customize it for use with Relative CI including running it on pushes and reacting to it in a future RelativeCI workflow. This is not needed for or related to the rest of the jobs in the pull request workflow. Consequently we move it to a sepate workflow. --- .github/workflows/build.yml | 36 ++++++++++++++++++++++++++++++ .github/workflows/pull_request.yml | 30 ------------------------- 2 files changed, 36 insertions(+), 30 deletions(-) create mode 100644 .github/workflows/build.yml diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000000..352f4b2674 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,36 @@ +name: Build + +on: + push: + pull_request: + +jobs: + build: + name: Build artifacts + if: '!github.event.deleted' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + with: + # Required to fetch all commits and tags + fetch-depth: 0 + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version-file: '.nvmrc' + cache: 'yarn' + registry-url: 'https://npm.pkg.github.com' + env: + NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - name: Install Dependencies + run: yarn install + - name: Build artifacts + run: | + VERSION_FILE_NAME=$GITHUB_REPOSITORY \ + VERSION_FILE_VERSION=$(git describe --tags --exclude=latest) \ + yarn build + - name: Upload + uses: actions/upload-artifact@v1 + with: + name: dist + path: dist diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml index 61f53cd5f5..270604fd77 100644 --- a/.github/workflows/pull_request.yml +++ b/.github/workflows/pull_request.yml @@ -75,36 +75,6 @@ jobs: - name: Lint Javascript run: yarn lint:js - build: - name: Build artifacts - if: '!github.event.deleted' - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - with: - # Required to fetch all commits and tags - fetch-depth: 0 - - name: Setup Node - uses: actions/setup-node@v3 - with: - node-version-file: '.nvmrc' - cache: 'yarn' - registry-url: 'https://npm.pkg.github.com' - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - name: Install Dependencies - run: yarn install - - name: Build artifacts - run: | - VERSION_FILE_NAME=$GITHUB_REPOSITORY \ - VERSION_FILE_VERSION=$(git describe --tags --exclude=latest) \ - yarn build - - name: Upload - uses: actions/upload-artifact@v1 - with: - name: dist - path: dist - validate_docs: name: Validate documentation if: '!github.event.deleted' From e0aa650c5c654ffc730903a6e899b23f3f243a00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= Date: Mon, 19 Sep 2022 11:51:10 +0200 Subject: [PATCH 12/12] Build webpack stats and upload to Relative CI This setup is in accordance with the workflow_run setup recommended by RelativeCI for projects using a fork-based workflow. https://relative-ci.com/documentation/setup/agent/github-action/#workflow_run-event --- .github/workflows/build.yml | 9 +++++++-- .github/workflows/relative_ci.yml | 17 +++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 .github/workflows/relative_ci.yml diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 352f4b2674..f8b6b18339 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -26,11 +26,16 @@ jobs: run: yarn install - name: Build artifacts run: | + yarn build:css:prod VERSION_FILE_NAME=$GITHUB_REPOSITORY \ VERSION_FILE_VERSION=$(git describe --tags --exclude=latest) \ - yarn build - - name: Upload + yarn build:js:prod --json webpack-stats.json + - name: Upload build uses: actions/upload-artifact@v1 with: name: dist path: dist + - name: Upload webpack stats artifact + uses: relative-ci/agent-upload-artifact-action@v1 + with: + webpackStatsFile: ./webpack-stats.json diff --git a/.github/workflows/relative_ci.yml b/.github/workflows/relative_ci.yml new file mode 100644 index 0000000000..ed9f46a163 --- /dev/null +++ b/.github/workflows/relative_ci.yml @@ -0,0 +1,17 @@ +name: RelativeCI + +on: + workflow_run: + workflows: ["Build"] + types: + - completed + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Send webpack stats to RelativeCI + uses: relative-ci/agent-action@v2 + with: + key: ${{ secrets.RELATIVE_CI_KEY }} + token: ${{ secrets.GITHUB_TOKEN }}