SONAR-18491 Set up the build system for the new UI

8 files changed, 276 insertions, 0 deletions

diff --git a/server/sonar-web/design-system/.eslintrc b/server/sonar-web/design-system/.eslintrc
new file mode 100644
index 00000000000..ead8e7410dc
--- /dev/null
+++ b/server/sonar-web/design-system/.eslintrc
@@ -0,0 +1,65 @@
+{
+  "extends": ["sonarqube"],
+  "plugins": ["header", "typescript-sort-keys"],
+  "rules": {
+    // Custom SonarCloud config that differs from eslint-config-sonarqube
+    "camelcase": "off",
+    "react/jsx-sort-props": "error",
+    "react/jsx-pascal-case": [2, { "allowNamespace": true }],
+    "react/jsx-no-constructed-context-values": "error",
+    "react/jsx-uses-react": "off",
+    "react/no-unstable-nested-components": ["error", { "allowAsProps": true }],
+    "react/react-in-jsx-scope": "off",
+    "testing-library/no-node-access": ["error", { "allowContainerFirstChild": true }],
+    "no-implicit-coercion": [2, { "boolean": true, "number": true, "string": true }],
+    "jest/no-large-snapshots": ["warn", { "maxSize": 200 }],
+
+    // New rules added after updating eslint packages to more recent versions than eslint-config-sonarqube
+    "jest/prefer-mock-promise-shorthand": "error",
+    "header/header": [
+      "error",
+      "block",
+      [
+        "",
+        " * SonarQube",
+        " * Copyright (C) 2009-2023 SonarSource SA",
+        " * mailto:info AT sonarsource DOT com",
+        " *",
+        " * This program is free software; you can redistribute it and/or",
+        " * modify it under the terms of the GNU Lesser General Public",
+        " * License as published by the Free Software Foundation; either",
+        " * version 3 of the License, or (at your option) any later version.",
+        " *",
+        " * This program is distributed in the hope that it will be useful,",
+        " * but WITHOUT ANY WARRANTY; without even the implied warranty of",
+        " * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU",
+        " * Lesser General Public License for more details.",
+        " *",
+        " * You should have received a copy of the GNU Lesser General Public License",
+        " * along with this program; if not, write to the Free Software Foundation,",
+        " * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.",
+        " "
+      ],
+      1
+    ],
+    "typescript-sort-keys/interface": "error",
+    "promise/catch-or-return": ["warn", { "allowThen": true, "allowFinally": true }]
+  },
+  "overrides": [
+    {
+      "files": ["*-stories.tsx"],
+      "rules": {
+        "react/function-component-definition": "off"
+      }
+    },
+    {
+      "files": ["*-test.tsx"],
+      "rules": {
+        "react/jsx-no-constructed-context-values": "off"
+      }
+    }
+  ],
+  "settings": {
+    "testing-library/utils-module": "~helpers/testUtils"
+  }
+}
diff --git a/server/sonar-web/design-system/.gitignore b/server/sonar-web/design-system/.gitignore
new file mode 100644
index 00000000000..c3af857904e
--- /dev/null
+++ b/server/sonar-web/design-system/.gitignore
@@ -0,0 +1 @@
+lib/
diff --git a/server/sonar-web/design-system/babel.config.js b/server/sonar-web/design-system/babel.config.js
new file mode 100644
index 00000000000..039a97f749d
--- /dev/null
+++ b/server/sonar-web/design-system/babel.config.js
@@ -0,0 +1,34 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+export default {
+  plugins: [
+    'babel-plugin-macros',
+    [
+      '@emotion/babel-plugin-jsx-pragmatic',
+      {
+        export: 'jsx',
+        import: '__cssprop',
+        module: '@emotion/react',
+      },
+    ],
+    ['@babel/plugin-transform-react-jsx', { pragma: '__cssprop' }, 'twin.macro'],
+  ],
+};
diff --git a/server/sonar-web/design-system/package.json b/server/sonar-web/design-system/package.json
new file mode 100644
index 00000000000..11fbab61a09
--- /dev/null
+++ b/server/sonar-web/design-system/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "design-system",
+  "version": "1.0.0",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "scripts": {
+    "build": "yarn lint && vite build",
+    "build-release": "yarn install --immutable && yarn build",
+    "lint": "npx eslint --ext js,ts,tsx,snap --quiet src"
+  },
+  "devDependencies": {
+    "@babel/core": "7.20.5",
+    "@babel/plugin-transform-react-jsx": "7.20.13",
+    "@emotion/babel-plugin-jsx-pragmatic": "0.2.0",
+    "@vitejs/plugin-react": "3.1.0",
+    "eslint-plugin-header": "3.1.1",
+    "eslint-plugin-typescript-sort-keys": "2.1.0",
+    "twin.macro": "3.1.0",
+    "vite": "4.1.1",
+    "vite-plugin-dts": "1.7.2"
+  },
+  "peerDependencies": {
+    "@emotion/react": "11.10.5",
+    "@emotion/styled": "11.10.5",
+    "@typescript-eslint/parser": "5.49.0",
+    "eslint": "8.32.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "tailwindcss": "3.2.6",
+    "typescript": "4.9.4"
+  }
+}
diff --git a/server/sonar-web/design-system/src/components/DummyComponent.tsx b/server/sonar-web/design-system/src/components/DummyComponent.tsx
new file mode 100644
index 00000000000..8470a1351a3
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/DummyComponent.tsx
@@ -0,0 +1,23 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+export function DummyComponent() {
+  return <div>I&apos;m a dummy</div>;
+}
diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts
new file mode 100644
index 00000000000..a96434d2ea2
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/index.ts
@@ -0,0 +1,21 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+export * from './DummyComponent';
diff --git a/server/sonar-web/design-system/tsconfig.json b/server/sonar-web/design-system/tsconfig.json
new file mode 100644
index 00000000000..a7abe85ba4f
--- /dev/null
+++ b/server/sonar-web/design-system/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../tsconfig.base",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "lib": ["dom", "dom.iterable", "es2022"],
+    "module": "commonjs",
+    "noEmit": true,
+    "paths": {
+      "~components/*": ["src/components/*"],
+      "~helpers/*": ["src/helpers/*"],
+      "~icons/*": ["src/icons/*"],
+      "~types/*": ["src/types/*"],
+      "~utils/*": ["src/utils/*"],
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+  }
+}
diff --git a/server/sonar-web/design-system/vite.config.js b/server/sonar-web/design-system/vite.config.js
new file mode 100644
index 00000000000..a1b283bbe0e
--- /dev/null
+++ b/server/sonar-web/design-system/vite.config.js
@@ -0,0 +1,79 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import react from '@vitejs/plugin-react';
+import autoprefixer from 'autoprefixer';
+import { resolve } from 'node:path';
+import postCssCalc from 'postcss-calc';
+import postCssCustomProperties from 'postcss-custom-properties';
+import tailwind from 'tailwindcss';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { getCustomProperties } from '../config/utils';
+import babelConfig from './babel.config';
+import * as packageJson from './package.json';
+
+const customProperties = getCustomProperties();
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve('src', 'components/index.ts'),
+      name: 'MIUI',
+      formats: ['es'],
+      fileName: (_format) => `index.js`,
+    },
+    outDir: 'lib',
+    rollupOptions: {
+      external: [...Object.keys(packageJson.peerDependencies)],
+    },
+  },
+  css: {
+    postcss: {
+      plugins: [
+        tailwind('../tailwind.config.js'),
+        autoprefixer,
+        postCssCustomProperties({
+          importFrom: { customProperties },
+          preserve: false,
+        }),
+        postCssCalc,
+      ],
+    },
+  },
+  esbuild: {
+    // https://github.com/vitejs/vite/issues/8644#issuecomment-1159308803
+    logOverride: { 'this-is-undefined-in-esm': 'silent' },
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      target: 'es2022',
+    },
+  },
+  plugins: [
+    react({
+      babel: babelConfig,
+    }),
+    dts({
+      include: ['src/components/'],
+    }),
+  ],
+});