@opsa-dev/ui-shared 1.0.0

package/lib/scripts/components/logo.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+export function OpsaLogo(props) {
+    return (_jsxs("div", { className: "Logo", children: [_jsx("div", { className: "left", children: "Opsa" }), _jsx("div", { className: "right", children: props.title })] }));
+}
+class OpsaLogoComponent extends HTMLElement {
+    connectedCallback() {
+        let shadow = this.attachShadow({ mode: 'open' });
+        shadow.adoptedStyleSheets = [];
+        createRoot(shadow).render(_jsx(OpsaLogo, { title: this.getAttribute('title') ?? '[Unknown]' }));
+    }
+}
+customElements.define("opsa-logo", OpsaLogoComponent);

package/lib/scripts/components/tooltip.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FloatingArrow, arrow, autoUpdate, flip, offset, shift, size, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from '@floating-ui/react';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { formatClass } from '@opsa-dev/ui-shared/scripts/utilities.js';
+export function Tooltip(props) {
+    let [isOpen, setIsOpen] = useState(false);
+    let arrowRef = useRef(null);
+    let { refs, floatingStyles, context } = useFloating({
+        middleware: [
+            offset(6),
+            flip(),
+            shift({ padding: 5 }),
+            ...(props.arrow
+                ? [arrow({
+                        element: arrowRef,
+                        padding: 0,
+                    })]
+                : []),
+            size({
+                padding: 5, // Same as in shift()
+                apply(state) {
+                    let availableWidth = `${Math.max(0, state.availableWidth)}px`;
+                    let availableHeight = `${Math.max(0, state.availableHeight)}px`;
+                    state.elements.floating.style.setProperty('--available-width', availableWidth);
+                    state.elements.floating.style.setProperty('--available-height', availableHeight);
+                },
+            }),
+        ],
+        onOpenChange: (open) => void setIsOpen(open && (!('enabled' in props) || !!props.enabled)),
+        open: isOpen,
+        placement: (props.placement ?? 'top'),
+        whileElementsMounted: autoUpdate,
+    });
+    let hover = useHover(context, { move: false });
+    let focus = useFocus(context);
+    let dismiss = useDismiss(context);
+    let role = useRole(context, { role: 'tooltip' });
+    let { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+    useEffect(() => {
+        if (!props.enabled) {
+            setIsOpen(false);
+        }
+    }, [props.enabled]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: formatClass('TooltipTarget', { '_open': open }), ref: (el) => {
+                    if (el) {
+                        if (el.children.length !== 1) {
+                            throw new Error('Tooltip must have exactly one child');
+                        }
+                        refs.setReference(el.children[0]);
+                    }
+                    else {
+                        refs.setReference(null);
+                    }
+                }, ...getReferenceProps(), children: props.children }), isOpen && createPortal((_jsxs("div", { className: "Tooltip", ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: [props.arrow && (_jsx(FloatingArrow, { className: "arrow", width: 10, height: 5, context: context, ref: arrowRef })), props.contents] })), document.body)] }));
+}

package/lib/scripts/index.js

@@ -0,0 +1,3 @@
+export * from './components/logo.js';
+export * from './components/tooltip.js';
+export * from './utilities.js';

package/lib/scripts/utilities.js

@@ -0,0 +1,19 @@
+export function formatClass(...input) {
+    return input
+        .filter((item) => item)
+        .flatMap((item) => {
+        if (typeof item === 'string') {
+            return item;
+        }
+        if (Array.isArray(item)) {
+            return formatClass(...item);
+        }
+        if ((typeof item === 'object') && (item.constructor === Object)) {
+            return Object.entries(item)
+                .filter(([key, value]) => (key && value))
+                .map(([key, _value]) => key);
+        }
+        return [];
+    })
+        .join(' ');
+}

package/lib/types/components/logo.d.ts

@@ -0,0 +1,3 @@
+export declare function OpsaLogo(props: {
+    title: string;
+}): import("react").JSX.Element;

package/lib/types/components/tooltip.d.ts

@@ -0,0 +1,8 @@
+import { Placement } from '@floating-ui/react';
+import { PropsWithChildren, ReactNode } from 'react';
+export declare function Tooltip(props: PropsWithChildren<{
+    arrow: boolean;
+    contents: ReactNode;
+    enabled?: unknown;
+    placement?: Placement;
+}>): import("react").JSX.Element;

package/lib/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/logo.js';
+export * from './components/tooltip.js';
+export * from './utilities.js';

package/lib/types/utilities.d.ts

@@ -0,0 +1,2 @@
+export type OrdinaryId = number | string;
+export declare function formatClass(...input: (Record<string, unknown> | string | undefined)[]): string;

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@opsa-dev/ui-shared",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "lib/scripts/index.js",
+  "types": "lib/types/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.27.19",
+    "@fontsource/finlandica-text": "^5.2.1",
+    "react": "19",
+    "react-dom": "19"
+  },
+  "devDependencies": {
+    "@slietar/tsconfig": "^1.0.0"
+  }
+}

package/styles/components/logo.css

@@ -0,0 +1,30 @@
+@import url("@fontsource/finlandica-text");
+
+
+.Logo {
+  display: flex;
+  align-items: baseline;
+  column-gap: 6px;
+
+  font-family: "Finlandica Text";
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+  text-transform: uppercase;
+
+  cursor: default;
+  user-select: none;
+
+  .left {
+    padding: 1px 8px;
+
+    background-color: #444342;
+    border-radius: 6px;
+
+    color: #fff;
+  }
+
+  .right {
+    color: #444342;
+  }
+}

package/styles/index.css

@@ -0,0 +1,2 @@
+@import url("./reset.css") layer(reset);
+@import url("./components/logo.css");

package/styles/reset.css

@@ -0,0 +1,184 @@
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  margin: initial;
+}
+
+:focus {
+  outline: initial;
+}
+
+a {
+  display: block;
+
+  color: inherit;
+  text-decoration: initial;
+
+  &:focus {
+    outline: initial;
+  }
+}
+
+ul {
+  margin: initial;
+  padding: initial;
+}
+
+li {
+  display: block;
+  list-style-type: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: initial;
+}
+
+h1 {
+  /* Overrides user agent stylesheet such as section > h1. */
+  font-size: 2em;
+}
+
+p {
+  margin: initial;
+}
+
+input, button, select, textarea {
+  display: block;
+  inline-size: stretch;
+
+  margin: initial;
+  padding: initial;
+
+  appearance: none;
+  background: initial;
+  border: initial;
+  outline: initial;
+
+  color: inherit;
+  font: inherit;
+  text-align: initial;
+
+  &:disabled {
+    color: inherit;
+    opacity: initial;
+  }
+
+  &:active {
+    color: currentColor;
+  }
+}
+
+option {
+  padding: initial;
+}
+
+input::placeholder {
+  opacity: initial;
+  color: initial;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+input[type="submit"], button {
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+output {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:invalid {
+  box-shadow: initial;
+}
+
+dialog {
+  max-width: unset;
+  max-height: unset;
+
+  margin: unset;
+  padding: unset;
+
+  background: transparent;
+  border: unset;
+
+  &::backdrop {
+    background: unset;
+  }
+}
+
+a, button {
+  -webkit-tap-highlight-color: transparent;
+}
+
+dl, dd {
+  margin: initial;
+}
+
+samp {
+  display: block;
+
+  margin: 1em 0;
+}
+
+label {
+  display: block;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+table {
+  width: 100%;
+  border-spacing: initial;
+}
+
+th {
+  font-weight: initial;
+  text-align: initial;
+}
+
+tr, td {
+  padding: initial;
+}
+
+video {
+  display: block;
+}
+
+svg {
+  display: block;
+  /* width: 100%; */
+  height: intrinsic;
+}
+
+strong {
+  font-weight: unset;
+}
+
+iframe, object {
+  display: block;
+  width: 100%;
+}
+
+iframe {
+  height: 100%;
+  border: initial;
+}
+
+kbd {
+  font-family: inherit;
+}