feat: add stylelint

Signed-off-by: hxtree <[email protected]>
hxtree · Apr 2, 2024 · c0349ec · c0349ec
1 parent 099bba5
commit c0349ec
Show file tree

Hide file tree

Showing 25 changed files with 779 additions and 212 deletions.
diff --git a/clients/design-system/.stylelintrc.json b/clients/design-system/.stylelintrc.json
@@ -0,0 +1,16 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "alpha-value-notation": "number"
+  },
+  "overrides": [
+    {
+      "files": ["*.scss", "**/*.scss"],
+      "customSyntax": "postcss-scss",
+      "rules": {
+        "scss/no-global-function-names": null,
+        "selector-pseudo-class-no-unknown": null
+      }
+    }
+  ]
+}
diff --git a/clients/design-system/package.json b/clients/design-system/package.json
@@ -23,7 +23,7 @@
     "test": "jest --runInBand",
     "test:cov": "jest --coverage --runInBand",
     "watch": "tsc -w",
-    "lint": "eslint --format visualstudio \"./src/**/*.tsx\"  --fix",
+    "lint": "eslint --format visualstudio \"./src/**/*.tsx\" --fix && stylelint \"./src/**/*.scss\" --fix",
     "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\"  --fix-dry-run",
     "size": "size-limit",
     "analyze": "size-limit --why",
@@ -37,71 +37,42 @@
     "depcheck": "npx depcheck"
   },
   "peerDependencies": {
+    "@emotion/react": "~11.11.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@emotion/react": "~11.11.1"
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@cats-cradle/base-nodejs": "workspace:*",
+    "@cats-cradle/promare-gradients": "workspace:*",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "~6.4.2",
     "@fortawesome/free-solid-svg-icons": "~6.4.2",
-    "@cats-cradle/base-nodejs": "workspace:*",
-    "jsdom": "~23.0.1",
-    "lodash": "~4.17.21",
-    "bootstrap": "~5.3.2",
     "@popperjs/core": "2.11.8",
     "@rollup/plugin-multi-entry": "~6.0.1",
-    "xss": "~1.0.14",
-    "@cats-cradle/promare-gradients": "workspace:*"
+    "bootstrap": "~5.3.2",
+    "jsdom": "~23.0.1",
+    "lodash": "~4.17.21",
+    "xss": "~1.0.14"
   },
   "devDependencies": {
-    "@types/react-modal": "3.16.3",
-    "@types/styled-components": "~5.1.30",
-    "@types/node": "20.11.25",
-    "@types/react": "18.2.59",
-    "@types/react-dom": "18.2.19",
-    "@types/jest": "29.5.12",
-    "@types/testing-library__jest-dom": "5.14.5",
-    "@types/react-syntax-highlighter": "~15.5.10",
-    "vite-plugin-checker": "0.6.2",
-    "react-day-picker": "8.9.1",
-    "react-intl": "6.5.5",
-    "react-router-dom": "6.22.1",
-    "react-google-charts": "~4.0.1",
-    "@typescript-eslint/eslint-plugin": "~6.16.0",
-    "@typescript-eslint/parser": "~6.16.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "8.57.0",
-    "eslint-plugin-react-hooks": "~4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
-    "glob": "^10.3.10",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "5.3.3",
-    "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.6.3",
-    "vite-plugin-lib-inject-css": "^1.3.0",
-    "@mui/lab": "~5.0.0-alpha.134",
-    "@mui/material": "~5.12.2",
-    "@mui/system": "~5.12.1",
-    "@emotion/react": "~11.11.1",
-    "@emotion/styled": "11.11.0",
-    "react-syntax-highlighter": "~15.5.0",
-    "@fortawesome/react-fontawesome": "~0.2.0",
-    "ts-node": "10.9.2",
-    "@cats-cradle/eslint-config": "1.0.11",
-    "autoprefixer": "~10.4.16",
-    "constructs": "^10.2.70",
-    "aws-cdk-lib": "2.129.0",
     "@babel/core": "7.23.5",
     "@babel/preset-env": "7.23.5",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
+    "@cats-cradle/create-artifact": "2.0.7",
+    "@cats-cradle/eslint-config": "1.0.11",
+    "@emotion/react": "~11.11.1",
+    "@emotion/styled": "11.11.0",
+    "@fortawesome/react-fontawesome": "~0.2.0",
+    "@mui/lab": "~5.0.0-alpha.134",
+    "@mui/material": "~5.12.2",
+    "@mui/system": "~5.12.1",
     "@storybook/addon-a11y": "7.6.3",
     "@storybook/addon-actions": "7.6.3",
     "@storybook/addon-essentials": "7.6.3",
     "@storybook/addon-interactions": "7.6.3",
     "@storybook/addon-links": "7.6.3",
+    "@storybook/addon-styling": "~1.3.7",
     "@storybook/builder-vite": "7.6.3",
     "@storybook/node-logger": "7.6.3",
     "@storybook/react": "7.6.3",
@@ -111,16 +82,47 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "14.5.1",
+    "@types/jest": "29.5.12",
+    "@types/lodash": "~4.14.202",
+    "@types/node": "20.11.25",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
+    "@types/react-modal": "3.16.3",
+    "@types/react-syntax-highlighter": "~15.5.10",
+    "@types/styled-components": "~5.1.30",
+    "@types/testing-library__jest-dom": "5.14.5",
+    "@typescript-eslint/eslint-plugin": "~6.16.0",
+    "@typescript-eslint/parser": "~6.16.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "~10.4.16",
+    "aws-cdk-lib": "2.129.0",
     "axios": "^1.6.7",
+    "constructs": "^10.2.70",
+    "eslint": "8.57.0",
+    "eslint-plugin-react-hooks": "~4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "glob": "^10.3.10",
+    "identity-obj-proxy": "~3.0.0",
     "jest": "29.7.0",
+    "react": "18.2.0",
+    "react-day-picker": "8.9.1",
+    "react-dom": "18.2.0",
+    "react-google-charts": "~4.0.1",
+    "react-intl": "6.5.5",
+    "react-router-dom": "6.22.1",
+    "react-syntax-highlighter": "~15.5.0",
     "sass": "^1.47.0",
     "storybook": "7.6.3",
     "ts-jest": "29.1.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.3.3",
     "uuid": "~9.0.1",
-    "@storybook/addon-styling": "~1.3.7",
-    "@types/lodash": "~4.14.202",
-    "identity-obj-proxy": "~3.0.0",
-    "@cats-cradle/create-artifact": "2.0.7"
+    "vite": "^4.5.0",
+    "vite-plugin-checker": "0.6.2",
+    "vite-plugin-dts": "^3.6.3",
+    "vite-plugin-lib-inject-css": "^1.3.0",
+    "stylelint": "~16.3.1",
+    "stylelint-config-standard-scss": "~13.0.0"
   },
   "watch": {
     "copy-files": {
@@ -130,5 +132,7 @@
       "extensions": "css,scss",
       "runOnChangeOnly": true
     }
-  }
+  },
+  "author": "hxtree",
+  "license": "MIT"
 }
diff --git a/clients/design-system/src/components/Alert/style.module.scss b/clients/design-system/src/components/Alert/style.module.scss
@@ -1,27 +1,35 @@
 .alert {
- box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 30px 0px;
+ box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0;
  border-radius: 3px;
  border: none;
+
  &.alert-success {
   background-color: #f9fef9  !important;
+
   svg {
       color: #59ca97;
    }
   }
+
  &.alert-warning {
   background-color: #fefbf9 !important;
+
   svg {
     color: #f1963b;
    }
   }
+
  &.alert-info {
   background-color: #fafdff !important;
+
   svg {
     color: #1174ff;
   }
  }
+
  &.alert-danger {
   background-color: #fffafb !important;
+
   svg {
     color: #bf1722;
   }

diff --git a/clients/design-system/src/components/AppBar/style.module.scss b/clients/design-system/src/components/AppBar/style.module.scss
@@ -2,21 +2,25 @@
 
 @keyframes pulsate {
   0% {
-    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0);
+    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0);
   }
+
   50% {
-    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2);
   }
+
   100% {
     box-shadow: inset 0 -3px 0 $color-blue;;
   }
 }
 
 .app-bar {
   background-color: $color-white;
+
   .navbar-menu {
-    box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 30px 0px
+    box-shadow: rgb(0 0 0 / 0.12) 0 4px 30px 0
   }
+
   .navbar-brand {
     font-weight: bold;
     font-size: 2rem !important;
@@ -27,30 +31,34 @@
 
 .app-bar-light {
   padding: 0;
-  background-color: rgb(255, 253, 251);
-  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 2px 0px, rgba(0, 0, 0, 0.14) 0px 1.008px 2px 0px;
+  background-color: rgb(255 253 251);
+  box-shadow: rgb(0 0 0 / 0.12) 0 0 2px 0, rgb(0 0 0 / 0.14) 0 1.008px 2px 0;
 
   ul {
     padding: 0;
     margin: 0;
+
     li {
       margin-right: 2rem;
       padding: 0;
+
       a {
         color: $color-blue;
         display: inline-block;
         text-decoration: none;
         padding-top: 1rem;
         padding-bottom: 1rem;
+
         &:hover {
           color: $color-blue;
           animation: pulsate 0.5s ease-in-out forwards;
           transition: border-color 0.5s ease;
-          box-shadow: inset 0 -4px 0 rgba(0, 123, 255, 0.5);
+          box-shadow: inset 0 -4px 0 rgb(0 123 255 / 0.5);
         }
+
         &.active {
           color: $color-blue;
-          box-shadow: inset 0 -4px 0 rgba(0, 123, 255, 0.5);
+          box-shadow: inset 0 -4px 0 rgb(0 123 255 / 0.5);
         }
       }
     }

diff --git a/clients/design-system/src/components/Article/style.module.scss b/clients/design-system/src/components/Article/style.module.scss
@@ -10,8 +10,10 @@ $nugde-out-width: 3.0625rem;
   background-color: $color-cta-white;
   overflow-x: hidden;
   width: 100%;
+
   & .container {
     position:relative;
+
     &::before {
       content: "";
       position: absolute;
@@ -21,8 +23,10 @@ $nugde-out-width: 3.0625rem;
       width: 1px;
       background-color: $color-light-gray;
     }
+
     h2 {
       position: relative;
+
       &::before {
         content: "";
         position: absolute;

diff --git a/clients/design-system/src/components/BlurbPair/BlurbIconColors.enum.ts b/clients/design-system/src/components/BlurbPair/BlurbIconColors.enum.ts
@@ -0,0 +1,6 @@
+export enum BlurbIconColors {
+  BLUE = 'blue',
+  ORANGE = 'orange',
+  GREEN = 'green',
+  PURPLE = 'purple',
+}
diff --git a/clients/design-system/src/components/BlurbPair/BlurbPair.tsx b/clients/design-system/src/components/BlurbPair/BlurbPair.tsx
@@ -3,13 +3,7 @@ import './style.module.scss';
 import {IconDefinition} from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from "../Button/Button";
-
-export enum BlurbIconColors {
-  BLUE = 'blue',
-  ORANGE = 'orange',
-  GREEN = 'green',
-  PURPLE = 'purple',
-}
+import { BlurbIconColors } from "./BlurbIconColors.enum";
 
 export type BlurbPairProps = {
   iconRight: IconDefinition;

diff --git a/clients/design-system/src/components/BlurbPair/style.module.scss b/clients/design-system/src/components/BlurbPair/style.module.scss
@@ -9,18 +9,22 @@
       }
     }
   }
+
   .blurb-pair-left,
   .blurb-pair-right {
     .icon {
       &.icon-color-blue {
         color: $color-blue !important;
       }
+
       &.icon-color-orange {
         color: $color-orange !important;
       }
+
       &.icon-color-green {
         color: $color-light-green !important;
       }
+
       &.icon-color-purple {
         color: $color-dark-purple !important;
       }