Improve build and lint scripts

.github/workflows/ci.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
 
 jobs:
-  build:
+  test-and-build:
     runs-on: ubuntu-latest
 
     steps:
@@ -15,5 +15,5 @@ jobs:
           cache: 'yarn'
       - run: yarn install --immutable --prefer-offline
       - run: yarn lint
-      - run: yarn typecheck
-      - run: yarn jest
+      - run: yarn jest
+      - run: yarn build

.github/workflows/plugin-e2e.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        gfVersion: ["8.4.7", "main", "latest"]
+        gfVersion: ['8.4.7', 'main', 'latest']
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -53,7 +53,7 @@ jobs:
       - name: Wait for grafana to start
         uses: nev7n/wait_for_response@v1
         with:
-          url: "http://localhost:3000/"
+          url: 'http://localhost:3000/'
           responseCode: 200
           timeout: 600000
           interval: 500

.github/workflows/publish-npm.yml

@@ -30,13 +30,13 @@ jobs:
         if: steps.version_check.outputs.changed == 'true'
         uses: actions/setup-node@v2
         with:
-          node-version: "18"
-          registry-url: "https://registry.npmjs.org"
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies
         if: steps.version_check.outputs.changed == 'true'
         run: yarn
-        
+
       - name: Build library
         if: steps.version_check.outputs.changed == 'true'
         run: yarn build
@@ -45,4 +45,4 @@ jobs:
         if: steps.version_check.outputs.changed == 'true'
         run: npm publish --access public
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  endOfLine: 'auto',
+  printWidth: 120,
+  trailingComma: 'es5',
+  semi: true,
+  jsxSingleQuote: false,
+  singleQuote: true,
+  useTabs: false,
+  tabWidth: 2,
+};

.storybook/main.js

@@ -1,7 +1,4 @@
 module.exports = {
-  stories: [
-    '../src/**/*.(stories|story).mdx',
-    '../src/**/*.(stories|story).@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../src/**/*.(stories|story).mdx', '../src/**/*.(stories|story).@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
 };

.storybook/preview.js

@@ -1,3 +1,3 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};

babel.config.json

@@ -1,11 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-   "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-runtime"
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
 }

cspell.config.json

@@ -0,0 +1,4 @@
+{
+  "ignorePaths": [".github/**", "node_modules/**", "dist/**", "yarn.lock"],
+  "words": ["cascader", "lefthook", "Datasource", "datasource", "gdev", "pickone", "arrowdown", "inlinesvg"]
+}

jest/react-inlinesvg.tsx

@@ -16,7 +16,7 @@ export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
 
 const SVG_FILE_NAME_REGEX = /(.+)\/(.+)\.svg$/;
 
-const InlineSVG = ({ src, innerRef }: { src: string, innerRef: Ref<SVGSVGElement>; }) => {
+const InlineSVG = ({ src, innerRef }: { src: string; innerRef: Ref<SVGSVGElement> }) => {
   // testId will be the file name without extension (e.g. `public/img/icons/angle-double-down.svg` -> `angle-double-down`)
   const testId = src.replace(SVG_FILE_NAME_REGEX, '$2');
   return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} ref={innerRef} viewBox="0 0 24 24" />;

jest/style.ts

@@ -1 +1 @@
-export const style = 'style';	
+export const style = 'style';

lefthook.yml

@@ -0,0 +1,11 @@
+pre-commit:
+  parallel: true
+  commands:
+    frontend-lint:
+      glob: '*.{js,ts,tsx}'
+      run: |
+        yarn lint --fix {staged_files}
+        yarn prettier --write {staged_files}
+      stage_fixed: true
+    spellcheck:
+      run: yarn cspell -c cspell.config.json {staged_files}

package.json

@@ -9,6 +9,7 @@
     "build": "tsc -p tsconfig.build.json && yarn copy-files",
     "copy-files": "copyfiles -u 1 src/**/*.css dist/",
     "test": "jest --watch",
+    "spellcheck": "cspell -c cspell.config.json \"**/*.{ts,tsx,js,md,mdx,yml,yaml,json,scss,css}\"",
     "storybook": "start-storybook -p 6006",
     "storybook:build": "build-storybook",
     "changeset": "ts-node src/utils/changeset/index.ts",
@@ -69,10 +70,14 @@
     "@types/testing-library__jest-dom": "^5.9.5",
     "babel-loader": "^8.2.2",
     "copyfiles": "^2.4.1",
+    "cspell": "^8.14.4",
+    "eslint-plugin-prettier": "^5.2.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
+    "lefthook": "^1.7.18",
     "mockdate": "^3.0.2",
+    "prettier": "^3.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rxjs": "^7.8.1",

src/Introduction.stories.mdx

@@ -7,6 +7,7 @@ This library of reusable Grafana Enterprise components and guidelines helps with
 Components here can also be added to the [@grafana/ui](https://github.com/grafana/grafana/tree/master/packages/grafana-ui) library.
 
 ## Content Generation
+
 To generate content for the stories, [Chance.js](https://chancejs.com/) is used.
 
 ## Related links