ci: add workflow to validate lint and format (#1345)

* ci: add workflow to validate lint and format

* style: apply formatting

* chore: cleanup lint errors and warnings

* Revert "build(deps): bump stylelint and stylelint-scss (#1334)"

This reverts commit 071efb6.

* fix: correct formmat change

* ci: require build-and-test before release

* ci: rename for clarity

* ci: rename for clarity

* chore: test => validate

.github/workflows/release.yml

@@ -1,6 +1,11 @@
 name: release-it
 
 on:
+  workflow_run:
+    workflows: ['Validate']
+    branches: [main]
+    types:
+      - completed
   push:
     branches:
       - main

.github/workflows/validate-and-build.yaml

@@ -0,0 +1,44 @@
+name: Validate
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  validate-and-build:
+    runs-on: ubuntu-20.04
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Validate
+        run: yarn validate
+
+      - name: Build
+        run: yarn build:prefix

package.json

@@ -22,12 +22,16 @@
     "serve:prefix": "yarn build:prefix && yarn workspace example serve --prefix-paths",
     "now-build": "yarn workspace example build",
     "format": "prettier --write \"**/*.{css,scss,json,html,yaml,mdx}\"",
+    "format:ci": "prettier --check \"**/*.{css,scss,json,html,yaml,mdx}\"",
+    "lint": "eslint . && stylelint \"packages/**/*.scss\"",
+    "lint:fix": "yarn lint:js && yarn lint:scss",
     "lint:js": "eslint . --fix",
     "lint:scss": "stylelint \"packages/**/*.scss\" --fix",
     "release": "release-it",
     "release:pre": "release-it --preRelease=next",
     "release:ci": "release-it --ci",
-    "release:dry": "release-it --dry-run"
+    "release:dry": "release-it --dry-run",
+    "validate": "yarn format:ci && yarn lint"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -96,9 +100,9 @@
     "prettier-config-carbon": "^0.11.0",
     "release-it": "^14.14.3",
     "release-it-yarn-workspaces": "^2.0.1",
-    "stylelint": "^15.10.3",
+    "stylelint": "^13.13.1",
     "stylelint-config-recommended-scss": "^4.3.0",
-    "stylelint-scss": "^5.1.0"
+    "stylelint-scss": "^3.21.0"
   },
   "version": "3.1.14",
   "packageManager": "yarn@3.3.0"

packages/example/src/gatsby-theme-carbon/components/Layout.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useEffect } from 'react';
 
 import { Information } from '@carbon/icons-react';

packages/example/src/pages/components/ArticleCard.mdx

@@ -5,14 +5,12 @@ description: Usage instructions for the ArticleCard component
 
 <PageDescription>
 
-
 The `<ArticleCard>` component should generally be used inside of a `<Row>` and
 `<Column>` with a `noGutterMdLeft` prop on the `<Column>` to allow it to "hang"
 to the left.
 
 </PageDescription>
 
-
 ## Example
 
 <Row>
@@ -26,7 +24,6 @@ to the left.
       href="/"
       >
 
-
 ![Dark article layout mockup](/images/Article_06.png)
 
   </ArticleCard>
@@ -39,7 +36,6 @@ to the left.
       actionIcon="arrowRight"
       >
 
-
 ![Dark article layout mockup](/images/Article_06.png)
 
   </ArticleCard>
@@ -51,7 +47,6 @@ to the left.
       disabled
       >
 
-
 ![Dark article layout mockup](/images/Article_06.png)
 
   </ArticleCard>
@@ -64,7 +59,6 @@ to the left.
       actionIcon="download"
       >
 
-
 ![Dark article layout mockup](/images/Article_06.png)
 
   </ArticleCard>
@@ -80,7 +74,6 @@ to the left.
       actionIcon="email"
       >
 
-
 ![Dark article layout mockup](/images/Article_06.png)
 
   </ArticleCard>
@@ -96,14 +89,12 @@ to the left.
       disabled
       >
 
-
 ![Dark article layout mockup](/images/Article_06.png)
 
   </ArticleCard>
 </Column>
 </Row>
 
-
 ## Code
 
 ```mdx path=components/ArticleCard/ArticleCard.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/ArticleCard
@@ -119,7 +110,6 @@ to the left.
 
 ![Dark article layout mockup](/images/Article_06.png)
 
-
     </ArticleCard>
 
   </Column>
@@ -132,7 +122,6 @@ to the left.
 
 ![Dark article layout mockup](/images/Article_06.png)
 
-
     </ArticleCard>
 
   </Column>
@@ -144,7 +133,6 @@ to the left.
 
 ![Dark article layout mockup](/images/Article_06.png)
 
-
     </ArticleCard>
 
   </Column>
@@ -157,7 +145,6 @@ to the left.
 
 ![Dark article layout mockup](/images/Article_06.png)
 
-
     </ArticleCard>
 
   </Column>
@@ -172,7 +159,6 @@ to the left.
 
 ![Dark article layout mockup](/images/Article_06.png)
 
-
     </ArticleCard>
 
   </Column>
@@ -187,12 +173,10 @@ to the left.
 
 ![Dark article layout mockup](/images/Article_06.png)
 
-
     </ArticleCard>
 
   </Column>
 </Row>
-
 ```
 
 ### Props

packages/example/src/pages/components/Caption.mdx

@@ -5,14 +5,12 @@ description: Usage instructions for the Caption component
 
 <PageDescription>
 
-
 The `<Caption>` component is typically used below images or videos. They will
 default to 4 columns wide unless placed inside a `<Row>` component. In this
 case, it will assume the full width of its containing column.
 
 </PageDescription>
 
-
 ## Example
 
 <Title>Normal</Title>
@@ -49,12 +47,10 @@ case, it will assume the full width of its containing column.
 ```mdx path=components/Caption/Caption.js src= https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Caption
 <Caption fullWidth>
 
-
 This is a full width caption. With this prop, the caption’s width will be 100%
 so it will fill its container.
 
 </Caption>
-
 ```
 
 ### Props