@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Forms/InputHelper/InputHelper.js

@@ -1,277 +0,0 @@
-import { useState, useRef } from "react";
-import { useTheme } from "@mui/material/styles";
-import IconButton from "@mui/material/IconButton";
-import Input from "@mui/material/Input";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import FilledInput from "@mui/material/FilledInput";
-import InputLabel from "@mui/material/InputLabel";
-import InputAdornment from "@mui/material/InputAdornment";
-import FormControl from "@mui/material/FormControl";
-import Translate from "@mui/icons-material/Translate";
-import Tooltip from "@mui/material/Tooltip";
-import Popover from "@mui/material/Popover";
-import Box from "@mui/material/Box";
-import ButtonBase from "@mui/material/ButtonBase";
-import FormHelperText from "@mui/material/FormHelperText";
-import { Smile } from "react-feather";
-import Picker from "emoji-picker-react";
-import Dialog from "@mui/material/Dialog";
-import { randomId } from "../../utils/index";
-import { grey } from "@mui/material/colors";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export function Adornment(props) {
-  const {
-    t = text => text,
-    onChange,
-    characters,
-    emoji,
-    name,
-    value,
-    adornmentPosition = "end",
-    iconButtonEdge = "end",
-    icon = /*#__PURE__*/_jsx(Translate, {}),
-    title = "accents_and_special_characters",
-    activeRef,
-    whiteIcon = false,
-    isDisabled,
-    whiteCharacters = false
-  } = props;
-  const theme = useTheme();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-  const handleClickAccents = event => setAnchorEl(event.currentTarget);
-  const handleCloseAccents = () => setAnchorEl(null);
-  const toggleEmojiPicker = () => setShowEmojiPicker(prev => !prev);
-  const handleEmojiClose = () => setShowEmojiPicker(false);
-  const onEmojiClick = event => {
-    const newText = activeRef ? [value.slice(0, activeRef.current.selectionStart), `${event.emoji}`, value.slice(activeRef.current.selectionStart)].join("") : event.emoji;
-    onChange({
-      target: {
-        name: name,
-        value: newText
-      }
-    });
-    setShowEmojiPicker(false);
-  };
-  const handleClickOption = option => {
-    handleCloseAccents();
-    const newText = [value.slice(0, activeRef.current.selectionStart), `${option}`, value.slice(activeRef.current.selectionStart)].join("");
-    onChange({
-      target: {
-        name: name,
-        value: newText
-      }
-    });
-  };
-  const handleKeyDown = event => {
-    const {
-      key,
-      target
-    } = event;
-    if (key === "Enter" || key === " ") {
-      event.preventDefault();
-      if (target.id === "emoji-button") {
-        toggleEmojiPicker();
-      } else if (target.id === "accents-button") {
-        handleClickAccents(event);
-      }
-    }
-  };
-  const cellSx = {
-    width: 40,
-    height: 40,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "1.15rem",
-    borderRadius: 1,
-    cursor: "pointer",
-    transition: "background-color 0.1s",
-    "&:hover": {
-      backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.08)"
-    },
-    "&:focus-visible": {
-      outline: `2px solid ${theme.palette.primary.main}`,
-      outlineOffset: -2
-    }
-  };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(InputAdornment, {
-      position: adornmentPosition,
-      children: [emoji && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Dialog, {
-          open: showEmojiPicker,
-          onClose: handleEmojiClose,
-          children: /*#__PURE__*/_jsx(Picker, {
-            pickerStyle: {
-              width: "100%"
-            },
-            theme: theme.palette.mode === "dark" ? "dark" : "light",
-            onEmojiClick: onEmojiClick
-          })
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("insert_emoji"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            id: "emoji-button",
-            edge: iconButtonEdge,
-            "aria-haspopup": "true",
-            "aria-label": "Emoji Picker",
-            onClick: toggleEmojiPicker,
-            onKeyDown: handleKeyDown,
-            size: "large",
-            disabled: isDisabled,
-            sx: {
-              padding: "8px",
-              ...(whiteIcon && {
-                "& svg": {
-                  fill: theme.palette.mode === "light" ? "white" : "inherit"
-                }
-              })
-            },
-            children: /*#__PURE__*/_jsx(Smile, {})
-          })
-        })]
-      }), characters && characters.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: t(title),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            id: "accents-button",
-            onClick: handleClickAccents,
-            onKeyDown: handleKeyDown,
-            edge: iconButtonEdge,
-            "aria-haspopup": "true",
-            "aria-expanded": Boolean(anchorEl),
-            "aria-label": title,
-            size: "large",
-            sx: {
-              padding: "8px",
-              ...(whiteIcon && {
-                "& svg": {
-                  fill: theme.palette.mode === "light" ? "white" : "inherit"
-                }
-              }),
-              ...(whiteCharacters && {
-                "& svg": {
-                  fill: "white"
-                }
-              })
-            },
-            children: icon
-          })
-        }), /*#__PURE__*/_jsx(Popover, {
-          id: `char-grid-${name}`,
-          anchorEl: anchorEl,
-          open: Boolean(anchorEl),
-          onClose: handleCloseAccents,
-          anchorOrigin: {
-            vertical: "bottom",
-            horizontal: "center"
-          },
-          transformOrigin: {
-            vertical: "top",
-            horizontal: "center"
-          },
-          children: /*#__PURE__*/_jsx(Box, {
-            sx: {
-              display: "grid",
-              gridTemplateColumns: "repeat(7, 40px)",
-              gap: 0.25,
-              p: 1
-            },
-            role: "grid",
-            "aria-label": t(title),
-            children: characters.map(c => /*#__PURE__*/_jsx(ButtonBase, {
-              sx: cellSx,
-              onClick: () => handleClickOption(c),
-              "aria-label": c,
-              children: c
-            }, c))
-          })
-        })]
-      })]
-    })
-  });
-}
-function InputHelper(props) {
-  const {
-    id,
-    label,
-    variant,
-    characters = ["¡", "¿", "ß", "à", "á", "â", "ã", "ä", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ñ", "ò", "ó", "ô", "õ", "ö", "ù", "ú", "û", "ü", "œ", "À", "Á", "Â", "Ã", "Ä", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "Ù", "Ú", "Û", "Ü"],
-    helperText,
-    adornmentPosition = "end",
-    margin,
-    inputRef,
-    maxLength,
-    autoFocus
-  } = props;
-  const textInput = useRef(null);
-  const activeRef = inputRef || textInput;
-  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
-  const inputLabelId = label && id ? `${id}-label` : undefined;
-  const handleKeyDown = event => {
-    if ((event.key === "Enter" || event.key === " ") && adornmentPosition) {
-      const adornmentButton = document.getElementById(`${id}-adornment`);
-      if (adornmentButton) {
-        adornmentButton.click();
-        event.preventDefault();
-      }
-    }
-  };
-  const adornment = characters && characters.length > 0 ? /*#__PURE__*/_jsx(Adornment, {
-    ...props,
-    activeRef: activeRef,
-    id: `${id}-adornment`,
-    role: "button",
-    tabIndex: 0,
-    "aria-haspopup": "true",
-    onKeyDown: handleKeyDown
-  }) : null;
-  return /*#__PURE__*/_jsxs(FormControl, {
-    ...props,
-    id: props.id ? `${props.id}FormControl` : undefined,
-    children: [label && /*#__PURE__*/_jsx(InputLabel, {
-      htmlFor: id,
-      id: `${inputLabelId}${randomId()}`,
-      sx: theme => ({
-        color: theme.palette.mode === "light" ? grey[800] : grey[300]
-      }),
-      children: label
-    }), variant === "filled" && /*#__PURE__*/_jsx(FilledInput, {
-      ...props,
-      margin: margin === "normal" ? "none" : margin,
-      startAdornment: adornmentPosition === "start" ? adornment : null,
-      endAdornment: adornmentPosition === "end" ? adornment : null,
-      inputRef: activeRef,
-      autoFocus: autoFocus,
-      inputProps: {
-        maxLength
-      },
-      onKeyDown: handleKeyDown
-    }), variant === "outlined" && /*#__PURE__*/_jsx(OutlinedInput, {
-      ...props,
-      margin: margin === "normal" ? "none" : margin,
-      startAdornment: adornmentPosition === "start" ? adornment : null,
-      endAdornment: adornmentPosition === "end" ? adornment : null,
-      labelWidth: 150,
-      inputRef: activeRef,
-      autoFocus: autoFocus,
-      inputProps: {
-        maxLength
-      },
-      onKeyDown: handleKeyDown
-    }), (variant === "standard" || variant !== "outlined" && variant !== "filled") && /*#__PURE__*/_jsx(Input, {
-      ...props,
-      startAdornment: adornmentPosition === "start" ? adornment : null,
-      endAdornment: adornmentPosition === "end" ? adornment : null,
-      inputRef: activeRef,
-      inputProps: {
-        maxLength
-      }
-    }), helperText && /*#__PURE__*/_jsx(FormHelperText, {
-      id: `${helperTextId}${randomId()}`,
-      children: helperText
-    })]
-  });
-}
-export default InputHelper;

package/dist/Forms/InputHelper/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "InputHelper",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./InputHelper.js"
-}

package/dist/Forms/LanguageSelector/LanguageSelector.js

@@ -1,49 +0,0 @@
-import PropTypes from "prop-types";
-import { MenuItem, TextField } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
-  languageText: {
-    textTransform: "capitalize"
-  }
-}));
-function LangaugeSelector(props) {
-  const {
-    t = text => text,
-    languages = {},
-    value = "",
-    disabled,
-    ...otherProps
-  } = props;
-  const {
-    classes
-  } = useStyles();
-  const languageKeys = Object.keys(languages).filter(lang => lang !== "irish");
-  const languageOptions = languageKeys.map((key, idx) => {
-    const keyId = `lang_${key}_${idx}`;
-    return /*#__PURE__*/_jsx(MenuItem, {
-      value: key,
-      className: classes.languageText,
-      children: t(key)
-    }, keyId);
-  });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(TextField, {
-      className: classes.languageText,
-      disabled: disabled,
-      select: true,
-      value: value,
-      ...otherProps,
-      children: languageOptions
-    })
-  });
-}
-LangaugeSelector.propTypes = {
-  t: PropTypes.func.isRequired,
-  languages: PropTypes.object.isRequired,
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  error: PropTypes.bool
-};
-export default LangaugeSelector;

package/dist/Forms/LanguageSelector/LanguageSelector.test.js

@@ -1,15 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
-import LanguageSelector from "./LanguageSelector";
-import { props } from "./LanguageSelector.stories";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe("LanguageSelector", () => {
-  it("renders without crashing", () => {
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(LanguageSelector, {
-      ...props
-    }));
-    unmount();
-  });
-});

package/dist/Forms/MarkdownEditor/MarkdownEditor.js

@@ -1,72 +0,0 @@
-import { useMemo, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import ReactMarkdownEditor from "react-simplemde-editor";
-import "easymde/dist/easymde.min.css";
-import ResponsiveDialog from "../../Dialogs/ResponsiveDialog/ResponsiveDialog";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export default function MarkdownEditor({
-  imageUploadFunction = () => {},
-  handleChange = () => {},
-  name = "",
-  value = "",
-  placeholder,
-  toolbar = ["bold", "italic", "strikethrough", "|", "heading", "heading-bigger", "heading-smaller", "|", "horizontal-rule", "quote", "unordered-list", "ordered-list", "|", "link", "upload-image", "|", "guide"],
-  autofocus = false,
-  spellChecker = false,
-  uploadImage = true
-}) {
-  const [openPreviewDialog, setOpenPreviewDialog] = useState(false);
-  const handleClickOpen = () => {
-    setOpenPreviewDialog(true);
-  };
-  const handleClose = () => {
-    setOpenPreviewDialog(false);
-  };
-  const mdeOptions = useMemo(() => {
-    return {
-      autofocus,
-      spellChecker,
-      placeholder,
-      toolbar: [{
-        name: "custom-preview",
-        action: () => {
-          if (openPreviewDialog) {
-            handleClose();
-          } else {
-            handleClickOpen();
-          }
-        },
-        className: "fa fa-eye",
-        text: "Preview ",
-        title: "Toggle Preview"
-      }, "|", ...toolbar],
-      uploadImage,
-      imageUploadFunction: imageUploadFunction
-    };
-  }, []);
-  const onChange = value => {
-    handleChange({
-      target: {
-        name,
-        value
-      }
-    });
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ReactMarkdownEditor, {
-      id: `${name}-md-editor`,
-      onChange: onChange,
-      value: value,
-      options: mdeOptions
-    }), /*#__PURE__*/_jsx(ResponsiveDialog, {
-      open: openPreviewDialog,
-      handleClose: handleClose,
-      children: /*#__PURE__*/_jsx("div", {
-        className: "content",
-        children: /*#__PURE__*/_jsx(ReactMarkdown, {
-          children: value
-        })
-      })
-    })]
-  });
-}

package/dist/Forms/MarkdownEditor/MarkdownEditor.test.js

@@ -1,35 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it, beforeAll, afterAll } from "vitest";
-import MarkdownEditor from "./MarkdownEditor";
-import { props } from "./MarkdownEditor.stories";
-
-// Mock getBoundingClientRect globally
-import { jsx as _jsx } from "react/jsx-runtime";
-beforeAll(() => {
-  global.Range.prototype.getBoundingClientRect = () => ({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  });
-  global.Range.prototype.getClientRects = () => [];
-});
-afterAll(() => {
-  // Clean up global mocks
-  delete global.Range.prototype.getBoundingClientRect;
-  delete global.Range.prototype.getClientRects;
-});
-describe("MarkdownEditor", () => {
-  it("renders without crashing", () => {
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(MarkdownEditor, {
-      ...props
-    }));
-    unmount();
-  });
-});

package/dist/Forms/MarkdownEditor/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "MarkdownEditor",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./MarkdownEditor.js"
-}

package/dist/Forms/MultiStepForm/Debug.js

@@ -1,38 +0,0 @@
-import { FormikConsumer } from "formik";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Debug = () => /*#__PURE__*/_jsxs("div", {
-  style: {
-    margin: "3rem 0",
-    borderRadius: 4,
-    background: "#f6f8fa",
-    boxShadow: "0 0 1px  #eee inset"
-  },
-  children: [/*#__PURE__*/_jsx("div", {
-    style: {
-      textTransform: "uppercase",
-      fontSize: 11,
-      borderTopLeftRadius: 4,
-      borderTopRightRadius: 4,
-      fontWeight: 500,
-      padding: ".5rem",
-      background: "#555",
-      color: "#fff",
-      letterSpacing: "1px"
-    },
-    children: "Formik State"
-  }), /*#__PURE__*/_jsx(FormikConsumer, {
-    children: ({
-      validationSchema,
-      validate,
-      onSubmit,
-      ...rest
-    }) => /*#__PURE__*/_jsx("pre", {
-      style: {
-        fontSize: ".65rem",
-        padding: ".25rem .5rem",
-        overflowX: "scroll"
-      },
-      children: JSON.stringify(rest, null, 2)
-    })
-  })]
-});