chore: improve config files, ran linting

Author: HedwigJDoets

packages/pluggableWidgets/skiplink-web/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@mendix/pluggable-widget-skiplink-web",
+    "name": "@mendix/skiplink-web",
     "widgetName": "SkipLink",
     "version": "1.0.0",
     "description": "Adds a skip link to the top of the page for accessibility.",
@@ -30,14 +30,19 @@
         "e2e": "run-e2e ci",
         "e2edev": "run-e2e dev --with-preps",
         "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .",
-        "lint": "eslint src package.json",
+        "lint": "eslint src/ package.json",
         "publish-marketplace": "rui-publish-marketplace",
         "release": "pluggable-widgets-tools release:web",
         "start": "pluggable-widgets-tools start:server",
         "test": "jest --projects jest.config.js",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },
+    "dependencies": {
+        "@floating-ui/react": "^0.26.27",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
+        "classnames": "^2.5.1"
+    },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
         "@mendix/eslint-config-web-widgets": "workspace:*",

packages/pluggableWidgets/skiplink-web/src/SkipLink.editorConfig.ts

@@ -1,4 +1,4 @@
-import { hidePropertiesIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
+import { Problem, Properties } from "@mendix/pluggable-widgets-tools";
 import {
     StructurePreviewProps,
     RowLayoutProps,
@@ -7,7 +7,7 @@ import {
     structurePreviewPalette
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 
-export function getProperties(values: any, defaultValues: Properties): Properties {
+export function getProperties(defaultValues: Properties): Properties {
     // No conditional properties for skiplink, but function provided for consistency
     return defaultValues;
 }

packages/pluggableWidgets/skiplink-web/src/SkipLink.editorPreview.tsx

@@ -1,35 +1,34 @@
 import { createElement, ReactElement } from "react";
-
-export interface SkipLinkPreviewProps {
-    linkText: string;
-    mainContentId: string;
-}
+import { SkipLinkPreviewProps } from "../typings/SkipLinkProps";
 
 export const preview = (props: SkipLinkPreviewProps): ReactElement => {
-    return (
-        <div style={{ position: "relative", height: 40 }}>
-            <a
-                href={`#${props.mainContentId}`}
-                style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    background: "#fff",
-                    color: "#0078d4",
-                    padding: "8px 16px",
-                    zIndex: 1000,
-                    textDecoration: "none",
-                    border: "2px solid #0078d4",
-                    borderRadius: 4,
-                    fontWeight: "bold"
-                }}
-            >
-                {props.linkText}
-            </a>
-        </div>
-    );
+    if (props.renderMode === "xray") {
+        return (
+            <div style={{ position: "relative", height: 40 }}>
+                <a
+                    href={`#${props.mainContentId}`}
+                    style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        background: "#fff",
+                        color: "#0078d4",
+                        padding: "8px 16px",
+                        zIndex: 1000,
+                        textDecoration: "none",
+                        border: "2px solid #0078d4",
+                        borderRadius: 4,
+                        fontWeight: "bold"
+                    }}
+                >
+                    {props.linkText}
+                </a>
+            </div>
+        );
+    }
+    return <div />;
 };
 
 export function getPreviewCss(): string {
-    return require("./SkipLink.css");
+    return require("./ui/SkipLink.scss");
 }

packages/pluggableWidgets/skiplink-web/src/SkipLink.tsx

@@ -1,4 +1,4 @@
-import "./ui/SkipLink.css";
+import "./ui/SkipLink.scss";
 import { useEffect } from "react";
 
 export interface SkipLinkProps {