feat(ui-webview): Added a new library for webview components to be us…

…ed in vscode

packages/ui-webview/README.md

@@ -0,0 +1,7 @@
+# ui-webview
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-webview` to execute the unit tests via [Vitest](https://vitest.dev/).

packages/ui-webview/eslint.config.js

@@ -0,0 +1,19 @@
+const baseConfig = require("../../eslint.config.js");
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+    parserOptions: { project: ["packages/ui-webview/tsconfig.*?.json"] },
+    rules: {}
+  },
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    rules: {}
+  },
+  {
+    files: ["**/*.js", "**/*.jsx"],
+    rules: {}
+  },
+  ...compat.extends("plugin:@nx/react")
+];

packages/ui-webview/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@acidic/ui-webview",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

packages/ui-webview/project.json

@@ -0,0 +1,36 @@
+{
+  "name": "ui-webview",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/ui-webview/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/packages/ui-webview"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "../../coverage/packages/ui-webview"
+      }
+    }
+  }
+}

packages/ui-webview/src/index.ts

@@ -0,0 +1 @@
+export * from "./lib/ui-webview";

packages/ui-webview/src/lib/ui-webview.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

packages/ui-webview/src/lib/ui-webview.tsx

@@ -0,0 +1,31 @@
+import styles from "./ui-webview.module.css";
+
+/* eslint-disable-next-line */
+export interface UiWebviewProps {}
+
+export function UiWebview(props: UiWebviewProps) {
+  return (
+    <div className={styles["container"]}>
+      <h1>Welcome to UiWebview!</h1>
+    </div>
+  );
+}
+
+export default UiWebview;
+
+if (import.meta.vitest) {
+  // add tests related to your file here
+  // For more information please visit the Vitest docs site here: https://vitest.dev/guide/in-source.html
+
+  const { it, expect, beforeEach } = import.meta.vitest;
+  let render: typeof import("@testing-library/react").render;
+
+  beforeEach(async () => {
+    render = (await import("@testing-library/react")).render;
+  });
+
+  it("should render successfully", () => {
+    const { baseElement } = render(<UiWebview />);
+    expect(baseElement).toBeTruthy();
+  });
+}

packages/ui-webview/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

packages/ui-webview/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client",
+      "vitest/importMeta"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

packages/ui-webview/tsconfig.spec.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

packages/ui-webview/vite.config.ts

@@ -0,0 +1,66 @@
+/// <reference types='vitest' />
+import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
+import react from "@vitejs/plugin-react-swc";
+import * as path from "path";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: "../../node_modules/.vite/packages/ui-webview",
+
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    dts({
+      entryRoot: "src",
+      tsConfigFilePath: path.join(__dirname, "tsconfig.lib.json"),
+      skipDiagnostics: true
+    })
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: "../../dist/packages/ui-webview",
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: "src/index.ts",
+      name: "ui-webview",
+      fileName: "index",
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ["es", "cjs"]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ["react", "react-dom", "react/jsx-runtime"]
+    }
+  },
+  define: {
+    "import.meta.vitest": undefined
+  },
+  test: {
+    globals: true,
+    cache: {
+      dir: "../../node_modules/.vitest"
+    },
+    environment: "jsdom",
+    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    includeSource: ["src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    reporters: ["default"],
+    coverage: {
+      reportsDirectory: "../../coverage/packages/ui-webview",
+      provider: "v8"
+    }
+  }
+});