@genai-fi/base 4.0.0 → 4.0.1

package/README.md

@@ -1,18 +1,15 @@
-# Introduction 
+# Introduction
+
 [Generation AI](https://www.generation-ai-stn.fi) base code library for all common components of our educational apps.
 
 # Getting Started
+
 ```bash
-npm install @knicos/genai-base
+npm install @genai-fi/base
 ```
 
-```typescript
-import { ConnectionMonitor } from '@knicos/genai-base';
-
-function MyComponent() {
-    return <ConnectionMonitor />;
-}
-```
+See the Ladle stories in the `src` folder.
 
 # Build and Test
+
 Use `npm run build` to build the library in the `dist` folder. Testing uses vitest with `npm test`.

package/dist/{DialogQR-CyZcX7ul.js → DialogQR-wJru73YO.js}

@@ -12,6 +12,7 @@ import "./style/theme.js";
 import "./util/canvas.js";
 import "./FileSaver.min-DhePf63e.js";
 import "./components/BusyButton/BusyButton.js";
+import "./components/WorkflowLayout/lines.js";
 import "./components/WorkflowLayout/Widget.js";
 import "./components/IconMenu/context.js";
 import "@emotion/react";
@@ -1567,7 +1568,7 @@ const ze = /* @__PURE__ */ le(ke), Ve = "_link_1udre_3", He = "_container_1udre_
 }, Ye = me(/* @__PURE__ */ U("path", {
   d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
 }), "ContentCopy");
-function ln({ url: r, open: o, onClose: i }) {
+function fn({ url: r, open: o, onClose: i }) {
   var s;
   const { t: n } = he("translation"), t = ue(null), e = ae(() => {
     navigator.clipboard.writeText(r);
@@ -1624,7 +1625,7 @@ function ln({ url: r, open: o, onClose: i }) {
   );
 }
 export {
-  ln as D,
+  fn as D,
   ze as q,
   je as s
 };

package/dist/{SvgLayer-CA0elY7q.js → SvgLayer-DQQ6Pb5G.js}

@@ -1,24 +1,25 @@
 import { jsx as o } from "react/jsx-runtime";
-import './assets/SvgLayer.css';const n = "_svglayer_yu6sc_3", y = "_workspace_yu6sc_10", d = "_container_yu6sc_19", g = {
-  svglayer: n,
-  workspace: y,
-  container: d
+import './assets/SvgLayer.css';const d = "_svglayer_yu6sc_3", n = "_workspace_yu6sc_10", y = "_container_yu6sc_19", i = {
+  svglayer: d,
+  workspace: n,
+  container: y
 }, a = 20;
-function i({ lines: c }) {
+function h({ lines: c }) {
   return /* @__PURE__ */ o(
     "svg",
     {
-      className: g.svglayer,
+      className: i.svglayer,
       xmlns: "http://www.w3.org/2000/svg",
       width: "100%",
       height: "100%",
       "aria-hidden": !0,
-      children: c.map((r, e) => {
-        const s = r.direction === "horizontal" ? a : 0, t = r.direction === "vertical" ? a : 0;
+      children: c.map((t, e) => {
+        const r = t.direction === "horizontal" ? a : 0, s = t.direction === "vertical" ? a : 0;
         return /* @__PURE__ */ o(
           "path",
           {
-            d: `M ${r.x1} ${r.y1} C ${r.x1 + s} ${r.y1 + t}, ${r.x2 - s} ${r.y2 - t}, ${r.x2} ${r.y2}`,
+            "data-testid": `line-${t.id1}-${t.id2}`,
+            d: `M ${t.x1} ${t.y1} C ${t.x1 + r} ${t.y1 + s}, ${t.x2 - r} ${t.y2 - s}, ${t.x2} ${t.y2}`,
             fill: "none",
             stroke: "rgb(174, 37, 174)",
             strokeWidth: "2",
@@ -31,6 +32,6 @@ function i({ lines: c }) {
   );
 }
 export {
-  i as S,
-  g as s
+  h as S,
+  i as s
 };

package/dist/assets/Widget.css

@@ -1 +1 @@
-._widget_becos_3{background:#fff;border-radius:6px;padding:0;display:flex;flex-direction:column;box-shadow:2px 2px 4px #bbb;flex-shrink:0;animation:_fadein_becos_1 .5s 1;box-sizing:border-box;border:1px solid white;position:relative}@media only screen and (max-height: 500px),(max-width: 700px){._widget_becos_3{max-width:100%}}@keyframes _fadein_becos_1{0%{opacity:.1}to{opacity:1}}._widgetDisabled_becos_32{pointer-events:none;opacity:.5}._widgetActive_becos_38{border:1px dashed #008297}._widget_title_becos_43{font-size:14pt;font-weight:700;margin:0}._widget_header_becos_49{display:flex;justify-content:left;border-bottom:1px solid #008297;padding:.6rem 1rem;align-items:center}._widget_header_becos_49 input{padding:.2rem;height:initial;box-sizing:border-box;border:2px solid transparent;cursor:pointer;margin-right:1rem}._widget_header_becos_49 input:focus{border:2px solid #008297;border-radius:5px;cursor:initial}._widget_header_becos_49 fieldset{border:none}._widget_menu_becos_76{flex-grow:1;text-align:right}._widget_content_becos_81{padding:1rem;display:flex;flex-direction:column}._widget_content_becos_81>p{color:#444;font-size:12pt;margin:1rem 1.4rem}
+._widget_9aoli_3{background:#fff;border-radius:6px;padding:0;display:flex;flex-direction:column;box-shadow:2px 2px 4px #bbb;flex-shrink:0;animation:_fadein_9aoli_1 .5s 1;box-sizing:border-box;position:relative;overflow:hidden}@media only screen and (max-height: 500px),(max-width: 700px){._widget_9aoli_3{max-width:100%}}@keyframes _fadein_9aoli_1{0%{opacity:.1}to{opacity:1}}._widgetDisabled_9aoli_33{pointer-events:none;opacity:.5}._widgetActive_9aoli_39{border:1px dashed #008297}._widget_title_9aoli_44{font-size:14pt;font-weight:700;margin:0}._widget_header_9aoli_50{display:flex;justify-content:left;padding:.6rem 1rem;align-items:center}._widget_header_9aoli_50 input{padding:.2rem;height:initial;box-sizing:border-box;border:2px solid transparent;cursor:pointer;margin-right:1rem}._widget_header_9aoli_50 input:focus{border:2px solid #008297;border-radius:5px;cursor:initial}._widget_header_9aoli_50 fieldset{border:none}._widget_menu_9aoli_77{flex-grow:1;text-align:right}._widget_content_9aoli_82{padding:1rem;display:flex;flex-direction:column}._widget_content_9aoli_82>p{color:#444;font-size:12pt;margin:1rem 1.4rem}

package/dist/components/QRCode/DialogQR.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { D as g } from "../../DialogQR-CyZcX7ul.js";
+import { D as h } from "../../DialogQR-wJru73YO.js";
 import "@mui/material";
 import "react-i18next";
 import "../../state/webrtcState.js";
@@ -11,9 +11,10 @@ import "../../style/theme.js";
 import "../../util/canvas.js";
 import "../../FileSaver.min-DhePf63e.js";
 import "../BusyButton/BusyButton.js";
+import "../WorkflowLayout/lines.js";
 import "../WorkflowLayout/Widget.js";
 import "../IconMenu/context.js";
 import "@emotion/react";
 export {
-  g as default
+  h as default
 };

package/dist/components/QRCode/QRCode.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { useRef as h, useState as m, useEffect as u, Suspense as v } from "react";
-import { q as p, s as o, D as b } from "../../DialogQR-CyZcX7ul.js";
+import { q as p, s as o, D as b } from "../../DialogQR-wJru73YO.js";
 function q({ url: a, size: r, code: c, label: l, dialog: d }) {
   const t = h(null), [f, n] = m(!1);
   return u(() => {

package/dist/components/WorkflowLayout/Layout.js

@@ -1,43 +1,44 @@
-import { jsx as c, jsxs as m } from "react/jsx-runtime";
-import { useState as d, useRef as i, useEffect as p } from "react";
-import { extractNodesFromElements as v, generateLines as y } from "./lines.js";
-import { s as a, S as g } from "../../SvgLayer-CA0elY7q.js";
-function L({ children: n, connections: o }) {
-  const [l, u] = d([]), r = i(null), s = i();
-  return p(() => {
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { useState as p, useRef as l, useEffect as v } from "react";
+import { extractNodesFromElements as y, generateLines as g } from "./lines.js";
+import { s as u, S as h } from "../../SvgLayer-DQQ6Pb5G.js";
+function k({ children: n, connections: i }) {
+  const [f, m] = p([]), r = l(null), t = l();
+  return v(() => {
     if (r.current) {
-      s.current = new ResizeObserver(() => {
+      const s = () => {
         if (r.current) {
-          const e = v(r.current);
-          u(y(e, o));
+          const e = y(r.current), c = g(e, i);
+          m(c);
         }
-      }), s.current.observe(r.current);
-      const t = r.current.children;
-      if (t)
-        for (let e = 0; e < t.length; ++e) {
-          const f = t[e];
-          s.current.observe(f);
+      };
+      t.current = new ResizeObserver(s), t.current.observe(r.current);
+      const o = r.current.children;
+      if (o)
+        for (let e = 0; e < o.length; ++e) {
+          const c = o[e];
+          t.current.observe(c);
         }
-      return () => {
+      return s(), () => {
         var e;
-        (e = s.current) == null || e.disconnect();
+        (e = t.current) == null || e.disconnect();
       };
     }
-  }, [o]), /* @__PURE__ */ c("div", { className: a.workspace, children: /* @__PURE__ */ m(
+  }, [i]), /* @__PURE__ */ a("div", { className: u.workspace, children: /* @__PURE__ */ d(
     "div",
     {
-      className: a.container,
+      className: u.container,
       ref: r,
       style: {
-        gridTemplateColumns: `repeat(${Array.isArray(n) ? n.filter((t) => !!t).length : 1}, max-content)`
+        gridTemplateColumns: `repeat(${Array.isArray(n) ? n.filter((s) => !!s).length : 1}, max-content)`
       },
       children: [
-        /* @__PURE__ */ c(g, { lines: l }),
+        /* @__PURE__ */ a(h, { lines: f }),
         n
       ]
     }
   ) });
 }
 export {
-  L as default
+  k as default
 };

package/dist/components/WorkflowLayout/SvgLayer.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { S as a } from "../../SvgLayer-CA0elY7q.js";
+import { S as a } from "../../SvgLayer-DQQ6Pb5G.js";
 export {
   a as default
 };

package/dist/components/WorkflowLayout/Widget.d.ts

@@ -13,6 +13,7 @@ interface Props extends React.HTMLProps<HTMLDivElement> {
     id?: string;
     noPadding?: boolean;
     contentStyle?: CSSProperties;
+    headerColour?: string;
 }
-export declare function Widget({ disabled, focus, title, setTitle, children, menu, className, hidden, dataWidget, id, noPadding, active, contentStyle, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Widget({ disabled, focus, title, setTitle, children, menu, className, hidden, dataWidget, id, noPadding, active, contentStyle, headerColour, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};