Init.

.config/.eslintrc

@@ -0,0 +1,12 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+ {
+  "extends": ["@grafana/eslint-config"],
+  "root": true,
+  "rules": {
+    "react/prop-types": "off"
+  }
+}

.config/.prettierrc.js

@@ -0,0 +1,16 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+
+module.exports = {
+  "endOfLine": "auto",
+  "printWidth": 120,
+  "trailingComma": "es5",
+  "semi": true,
+  "jsxSingleQuote": false,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2
+};

.config/Dockerfile

@@ -0,0 +1,15 @@
+ARG grafana_version=latest
+
+FROM grafana/grafana:9.5.1
+
+# Make it as simple as possible to access the grafana instance for development purposes
+# Do NOT enable these settings in a public facing / production grafana instance
+ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
+ENV GF_AUTH_ANONYMOUS_ENABLED "true"
+ENV GF_AUTH_BASIC_ENABLED "false"
+# Set development mode so plugins can be loaded without the need to sign
+ENV GF_DEFAULT_APP_MODE "development"
+
+# Inject livereload script into grafana index.html
+USER root
+RUN sed -i 's/<\/body><\/html>/<script src=\"http:\/\/localhost:35729\/livereload.js\"><\/script><\/body><\/html>/g' /usr/share/grafana/public/views/index.html

.config/README.md

@@ -0,0 +1,120 @@
+# Default build configuration by Grafana
+
+**This is an auto-generated directory and is not intended to be changed! ⚠️**
+
+The `.config/` directory holds basic configuration for the different tools
+that are used to develop, test and build the project. In order to make it updates easier we ask you to
+not edit files in this folder to extend configuration.
+
+## How to extend the basic configs?
+
+Bear in mind that you are doing it at your own risk, and that extending any of the basic configuration can lead
+to issues around working with the project.
+
+### Extending the ESLint config
+
+Edit the `.eslintrc` file in the project root in order to extend the ESLint configuration.
+
+**Example:**
+```json
+{
+  "extends": "./.config/.eslintrc",
+  "rules": {
+      "react/prop-types": "off"
+  }
+}
+```
+
+---
+
+### Extending the Prettier config
+
+Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration.
+
+**Example:**
+```javascript
+module.exports = {
+  // Prettier configuration provided by Grafana scaffolding
+  ...require("./.config/.prettierrc.js"),
+
+  semi: false,
+};
+```
+
+---
+
+### Extending the Jest config
+
+There are two configuration in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`.
+
+**`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to
+set up the Jest DOM for the testing library and to apply some polyfills. ([link to Jest docs](https://jestjs.io/docs/configuration#setupfilesafterenv-array))
+
+**`jest.config.js`:** The main Jest configuration file that is extending our basic Grafana-tailored setup. ([link to Jest docs](https://jestjs.io/docs/configuration))
+
+---
+
+### Extending the TypeScript config
+
+Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration.
+
+**Example:**
+```json
+{
+  "extends": "./.config/tsconfig.json",
+  "compilerOptions": {
+    "preserveConstEnums": true
+  }
+}
+```
+
+---
+
+### Extending the Webpack config
+
+Follow these steps to extend the basic Webpack configuration that lives under `.config/`:
+
+#### 1. Create a new Webpack configuration file
+
+Create a new config file that is going to extend the basic one provided by Grafana.
+It can live in the project root, e.g. `webpack.config.ts`.
+
+#### 2. Merge the basic config provided by Grafana and your custom setup
+We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this.
+
+```typescript
+// webpack.config.ts
+import type { Configuration } from 'webpack';
+import { merge } from 'webpack-merge';
+import grafanaConfig from './.config/webpack/webpack.config';
+
+const config = async (env): Promise<Configuration> => {
+  const baseConfig = await grafanaConfig(env);
+
+  return merge(baseConfig, {
+    // Add custom config here...
+    output: {
+      asyncChunks: true,
+    },
+  });
+};
+
+export default config;
+
+```
+
+#### 3. Update the `package.json` to use the new Webpack config
+
+We need to update the `scripts` in the `package.json` to use the extended Webpack configuration.
+
+**Update for `build`:**
+```diff
+-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
++"build": "webpack -c ./webpack.config.ts --env production",
+```
+
+**Update for `dev`:**
+```diff
+-"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
++"dev": "webpack -w -c ./webpack.config.ts --env development",
+```

.config/jest-setup.js

@@ -0,0 +1,24 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+
+import '@testing-library/jest-dom';
+
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(global, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+HTMLCanvasElement.prototype.getContext = () => {};

.config/jest.config.js

@@ -0,0 +1,36 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+
+module.exports = {
+  moduleNameMapper: {
+    "\\.(css|scss|sass)$": "identity-obj-proxy",
+  },
+  modulePaths: ['<rootDir>/src'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
+  testEnvironment: 'jest-environment-jsdom',
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
+  ],
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        sourceMaps: true,
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+            decorators: false,
+            dynamicImport: true,
+          },
+        },
+      },
+    ],
+  },
+  transformIgnorePatterns: [],
+};

.config/tsconfig.json

@@ -0,0 +1,25 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * In order to extend the configuration follow the steps in .config/README.md
+ */
+ {
+  "compilerOptions": {
+    "alwaysStrict": true,
+    "declaration": false,
+    "rootDir": "../src",
+    "baseUrl": "../src",
+    "typeRoots": ["../node_modules/@types"],
+    "resolveJsonModule": true
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs",
+      "target": "es5",
+      "esModuleInterop": true
+    },
+    "transpileOnly": true
+  },
+  "include": ["../src", "./types"],
+  "extends": "@grafana/tsconfig"
+}

.config/types/custom.d.ts

@@ -0,0 +1,37 @@
+// Image declarations
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+// Font declarations
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.eot';
+declare module '*.ttf';
+declare module '*.otf';

.config/webpack/constants.ts

@@ -0,0 +1,2 @@
+export const SOURCE_DIR = 'src';
+export const DIST_DIR = 'dist';

.config/webpack/utils.ts

@@ -0,0 +1,42 @@
+import fs from 'fs';
+import path from 'path';
+import util from 'util';
+import glob from 'glob';
+import { SOURCE_DIR } from './constants';
+
+const globAsync = util.promisify(glob);
+
+export function getPackageJson() {
+  return require(path.resolve(process.cwd(), 'package.json'));
+}
+
+export function getPluginId() {
+  const { id } = require(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
+
+  return id;
+}
+
+export function hasReadme() {
+  return fs.existsSync(path.resolve(process.cwd(), SOURCE_DIR, 'README.md'));
+}
+
+export async function getEntries(): Promise<Record<string, string>> {
+  const parent = '..';
+  const pluginsJson = await globAsync('**/src/**/plugin.json');
+
+  const plugins = await Promise.all(pluginsJson.map(pluginJson => {
+    const folder = path.dirname(pluginJson);
+    return globAsync(`${folder}/module.{ts,tsx,js}`);
+  }));
+
+  return plugins.reduce((result, modules) => {
+    return modules.reduce((result, module) => {
+      const pluginPath = path.resolve(path.dirname(module), parent);
+      const pluginName = path.basename(pluginPath);
+      const entryName = plugins.length > 1 ? `${pluginName}/module` : 'module';
+
+      result[entryName] = path.join(parent, module);
+      return result;
+    }, result);
+  }, {});
+}