clean up ui src files

netbox/project-static/package.json

@@ -36,6 +36,7 @@
     "@babel/preset-env": "^7.13.9",
     "@babel/preset-typescript": "^7.13.0",
     "@types/bootstrap": "^5.0.8",
+    "@types/clipboard": "^2.0.1",
     "@types/cookie": "^0.4.0",
     "@types/masonry-layout": "^4.2.2",
     "@typescript-eslint/eslint-plugin": "^4.17.0",

netbox/project-static/src/index.ts

@@ -1,13 +1,5 @@
-// const jquery = require("jquery");
-/* // @ts-expect-error */
-// window.$ = window.jQuery = jquery;
-// require("jquery-ui");
-// require("select2");
-// require("./js/forms");
-
-require('babel-polyfill');
-require('@popperjs/core');
-require('bootstrap');
-require('clipboard');
-require('flatpickr');
-require('./netbox');
+import 'babel-polyfill';
+import '@popperjs/core';
+import 'bootstrap';
+import 'clipboard';
+import './netbox';

netbox/project-static/src/netbox.ts

@@ -5,6 +5,7 @@ import { initDateSelector } from './dateSelector';
 import { initMessageToasts } from './toast';
 import { initSpeedSelector, initForms } from './forms';
 import { initSearchBar } from './search';
+import { getElements } from './util';
 
 const INITIALIZERS = [
   initSearchBar,
@@ -18,13 +19,13 @@ const INITIALIZERS = [
 ] as (() => void)[];
 
 /**
- * Enable Tooltips everywhere
- * @see https://getbootstrap.com/docs/5.0/components/tooltips/
+ * Enable any defined Bootstrap Tooltips.
+ *
+ * @see https://getbootstrap.com/docs/5.0/components/tooltips
  */
 function initBootstrap(): void {
   if (document !== null) {
-    const tooltips = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-    for (const tooltip of tooltips) {
+    for (const tooltip of getElements('[data-bs-toggle="tooltip"]')) {
       new Tooltip(tooltip, { container: 'body', boundary: 'window' });
     }
     initMessageToasts();
@@ -32,10 +33,12 @@ function initBootstrap(): void {
   }
 }
 
-function initMasonry() {
+/**
+ * Initialize masonry-layout for homepage (or any other masonry layout cards).
+ */
+function initMasonry(): void {
   if (document !== null) {
-    const grids = document.querySelectorAll('.masonry');
-    for (const grid of grids) {
+    for (const grid of getElements('.masonry')) {
       new Masonry(grid, {
         itemSelector: '.masonry-item',
         percentPosition: true,
@@ -46,6 +49,7 @@ function initMasonry() {
 
 /**
  * Create a slug from any input string.
+ *
  * @param slug Original string.
  * @param chars Maximum number of characters.
  * @returns Slugified string.

netbox/project-static/yarn.lock

@@ -1158,6 +1158,11 @@
     "@popperjs/core" "^2.6.0"
     "@types/jquery" "*"
 
+"@types/clipboard@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/clipboard/-/clipboard-2.0.1.tgz#75a74086c293d75b12bc93ff13bc7797fef05a40"
+  integrity sha512-gJJX9Jjdt3bIAePQRRjYWG20dIhAgEqonguyHxXuqALxsoDsDLimihqrSg8fXgVTJ4KZCzkfglKtwsh/8dLfbA==
+
 "@types/cookie@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.0.tgz#14f854c0f93d326e39da6e3b6f34f7d37513d108"