@alxgrn/telefrag-ui 0.0.1

package/dist/components/ui/popup/Popup.js

@@ -0,0 +1,100 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as v, useState as y, useEffect as m } from "react";
+import { CSSTransition as S } from "react-transition-group";
+import L from "../portal/Portal.js";
+import '../../../assets/Popup.css';const P = 100, I = ({
+  parent: s,
+  isOpen: d,
+  onClose: i,
+  vertical: p = "auto",
+  horizontal: f = "auto",
+  margin: o = "0",
+  maxHeight: h = "none",
+  width: b = "auto",
+  position: l = "absolute",
+  children: w
+}) => {
+  const u = v(null), [E, g] = y({}), [x, k] = y({});
+  return m(() => {
+    if (!d) return;
+    if (!s.current) {
+      g({}), k({});
+      return;
+    }
+    const r = document.documentElement.clientWidth, n = document.documentElement.clientHeight, e = s.current.getBoundingClientRect();
+    k({
+      position: l,
+      top: l === "fixed" ? e.top : e.top + window.scrollY,
+      left: l === "fixed" ? e.left : e.left + window.scrollX,
+      width: e.width,
+      height: e.height
+    });
+    const t = {
+      width: b === "parent" ? e.width : "auto"
+    };
+    let c = 0;
+    switch (p) {
+      case "top":
+        t.bottom = "100%", t.marginBottom = o, c = e.top;
+        break;
+      case "bottom":
+        t.top = "100%", t.marginTop = o, c = n - e.bottom;
+        break;
+      case "inner-top":
+        t.top = 0, c = n - e.top;
+        break;
+      case "inner-bottom":
+        t.bottom = 0, c = e.bottom;
+        break;
+      default:
+        e.top < n - e.bottom ? (t.top = "100%", t.marginTop = o, c = n - e.bottom) : (t.bottom = "100%", t.marginBottom = o, c = e.top);
+        break;
+    }
+    switch (h === "auto" && (t.maxHeight = `calc(${c}px - 2 * ${o})`), f) {
+      case "left":
+        t.right = "100%", t.marginRight = o;
+        break;
+      case "right":
+        t.left = "100%", t.marginLeft = o;
+        break;
+      case "inner-left":
+        t.left = 0;
+        break;
+      case "inner-right":
+        t.right = 0;
+        break;
+      default:
+        e.left < r - e.right ? (t.left = "100%", t.marginLeft = o) : (t.right = "100%", t.marginRight = o);
+        break;
+    }
+    g(t);
+  }, [s, d, o, p, f, h, b, l]), m(() => {
+    const r = (n) => {
+      u.current && !u.current.contains(n.target) && i();
+    };
+    return document.addEventListener("click", r, !0), () => {
+      document.removeEventListener("click", r, !0);
+    };
+  }, [i]), m(() => {
+    const r = (n) => {
+      n.key === "Escape" && i();
+    };
+    return document.body.addEventListener("keydown", r), () => {
+      document.body.removeEventListener("keydown", r);
+    };
+  }, [i]), /* @__PURE__ */ a(L, { id: "alxgrn-popup", children: /* @__PURE__ */ a(
+    S,
+    {
+      in: d,
+      timeout: P,
+      unmountOnExit: !0,
+      classNames: "Popup",
+      nodeRef: u,
+      children: /* @__PURE__ */ a("div", { className: "Popup", style: x, children: /* @__PURE__ */ a("div", { className: "PopupInner", ref: u, style: E, children: w }) })
+    }
+  ) });
+};
+export {
+  I as Popup,
+  I as default
+};

package/dist/components/ui/portal/Portal.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export type PortalProps = {
+    id: string;
+    fixBody?: boolean;
+};
+declare const Portal: React.FC<React.PropsWithChildren<PortalProps>>;
+export default Portal;

package/dist/components/ui/portal/Portal.js

@@ -0,0 +1,20 @@
+import { createPortal as n } from "react-dom";
+const i = ({ id: t, fixBody: o, children: d }) => {
+  let e = document.getElementById(t);
+  return e || (e = document.createElement("div"), e.setAttribute("id", t), document.body.append(e), o && new MutationObserver(() => {
+    var s = (e == null ? void 0 : e.innerHTML) === "";
+    s ? l() : r();
+  }).observe(e, {
+    childList: !0
+    // наблюдать за непосредственными детьми
+  })), n(d, e);
+}, r = () => {
+  const t = `-${window.scrollY}px`;
+  document.body.style.position = "fixed", document.body.style.top = t, document.body.style.left = "0px", document.body.style.right = "0px";
+}, l = () => {
+  const t = document.body.style.top;
+  document.body.style.position = "", document.body.style.top = "", document.body.style.left = "", document.body.style.right = "", window.scrollTo(0, parseInt(t || "0") * -1);
+};
+export {
+  i as default
+};

package/dist/components/ui/prompt/Prompt.d.ts

@@ -0,0 +1,16 @@
+import { default as React, FC } from 'react';
+import { ButtonType } from '../../button/Button';
+export interface PromptProps {
+    value?: string | null;
+    title?: string | null;
+    top?: string | null | React.ReactNode;
+    bottom?: string | null | React.ReactNode;
+    limit?: number | null;
+    isOpen: boolean;
+    submit?: string | null;
+    submitType?: ButtonType;
+    onCancel: () => void;
+    onSubmit: (value: string) => void;
+}
+declare const Prompt: FC<PromptProps>;
+export default Prompt;

package/dist/components/ui/prompt/Prompt.js

@@ -0,0 +1,48 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { useState as p, useEffect as h } from "react";
+import x from "../modal/Modal.js";
+import { Form as b } from "../../form/Form.js";
+import j from "../../input/Input.js";
+const g = ({
+  value: o,
+  title: e,
+  top: n,
+  bottom: i,
+  limit: s,
+  submit: a,
+  submitType: f,
+  isOpen: t,
+  onCancel: l,
+  onSubmit: c
+}) => {
+  const [u, m] = p("");
+  return h(() => {
+    m(o ?? "");
+  }, [o, t]), /* @__PURE__ */ d(x, { isOpen: t, onClose: l, children: [
+    e && /* @__PURE__ */ r("h1", { children: e }),
+    /* @__PURE__ */ r(
+      b,
+      {
+        submit: a ?? "Ok",
+        submitType: f,
+        onSubmit: () => c(u),
+        children: /* @__PURE__ */ r(
+          j,
+          {
+            id: "value",
+            required: !0,
+            value: u,
+            onChange: m,
+            limit: s,
+            top: n,
+            bottom: i,
+            autoFocus: !0
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  g as default
+};

package/dist/main.d.ts

@@ -0,0 +1,27 @@
+import { Form, FormData } from './components/form/Form';
+import { default as Date } from './components/date/Date';
+import { default as Time } from './components/time/Time';
+import { default as Files } from './components/files/Files';
+import { default as Input } from './components/input/Input';
+import { default as Label } from './components/label/Label';
+import { default as RadioList } from './components/radio/RadioList';
+import { default as Button } from './components/button/Button';
+import { default as Select } from './components/select/Select';
+import { default as Hidden } from './components/hidden/Hidden';
+import { default as Checkbox } from './components/checkbox/Checkbox';
+import { default as CheckboxList } from './components/checkbox/CheckboxList';
+import { default as Fieldset } from './components/fieldset/Fieldset';
+import { default as FormRow } from './components/form/FormRow';
+import { default as FormCol } from './components/form/FormCol';
+import { default as DatePicker } from './components/date/DatePicker';
+import { Menu, MenuItem } from './components/ui/menu/Menu';
+import { default as Modal } from './components/ui/modal/Modal';
+import { default as Popup } from './components/ui/popup/Popup';
+import { default as Portal } from './components/ui/portal/Portal';
+import { default as Message } from './components/ui/message/Message';
+import { default as Alert } from './components/ui/alert/Alert';
+import { default as Confirm } from './components/ui/confirm/Confirm';
+import { default as Prompt } from './components/ui/prompt/Prompt';
+import { default as Editable } from './components/ui/editable/Editable';
+export { Form, Date, Time, Files, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Modal, Popup, Portal, Message, Alert, Confirm, Prompt, Editable, };
+export type { FormData, MenuItem, };

package/dist/main.js

@@ -0,0 +1,52 @@
+import { Form as r } from "./components/form/Form.js";
+import { default as a } from "./components/date/Date.js";
+import { default as m } from "./components/time/Time.js";
+import { Files as l } from "./components/files/Files.js";
+import { default as d } from "./components/input/Input.js";
+import { default as u } from "./components/label/Label.js";
+import { RadioList as n } from "./components/radio/RadioList.js";
+import { default as b } from "./components/button/Button.js";
+import { Select as C } from "./components/select/Select.js";
+import { default as k } from "./components/hidden/Hidden.js";
+import { default as M } from "./components/checkbox/Checkbox.js";
+import { CheckboxList as D } from "./components/checkbox/CheckboxList.js";
+import { default as g } from "./components/fieldset/Fieldset.js";
+import { default as A } from "./components/form/FormRow.js";
+import { default as E } from "./components/form/FormCol.js";
+import { default as I } from "./components/date/DatePicker.js";
+import { Menu as T } from "./components/ui/menu/Menu.js";
+import { default as q } from "./components/ui/modal/Modal.js";
+import { Popup as y } from "./components/ui/popup/Popup.js";
+import { default as G } from "./components/ui/portal/Portal.js";
+import { default as K } from "./components/ui/message/Message.js";
+import { default as O } from "./components/ui/alert/Alert.js";
+import { default as U } from "./components/ui/confirm/Confirm.js";
+import { default as W } from "./components/ui/prompt/Prompt.js";
+import { default as Y } from "./components/ui/editable/Editable.js";
+export {
+  O as Alert,
+  b as Button,
+  M as Checkbox,
+  D as CheckboxList,
+  U as Confirm,
+  a as Date,
+  I as DatePicker,
+  Y as Editable,
+  g as Fieldset,
+  l as Files,
+  r as Form,
+  E as FormCol,
+  A as FormRow,
+  k as Hidden,
+  d as Input,
+  u as Label,
+  T as Menu,
+  K as Message,
+  q as Modal,
+  y as Popup,
+  G as Portal,
+  W as Prompt,
+  n as RadioList,
+  C as Select,
+  m as Time
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@alxgrn/telefrag-ui",
+  "description": "UI library for The Daily Telefrag project",
+  "version": "0.0.1",
+  "private": false,
+  "author": "Alexander Fedorov <alex@molner.ru>",
+  "license": "Apache-2.0",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "telefrag"
+  ],
+  "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig.build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-children-utilities": "^2.10.0",
+    "react-dom": "^18.2.0",
+    "react-transition-group": "^4.4.5"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.5",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-transition-group": "^4.4.11",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "glob": "^11.0.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.2.4",
+    "vite-plugin-lib-inject-css": "^2.1.1"
+  }
+}