@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Misc/ColorSelector/ColorSelector.js

@@ -1,143 +0,0 @@
-import { useState } from "react";
-import { makeStyles } from "tss-react/mui";
-import { IconButton, Tooltip, Menu, FormLabel, FormControl, FormControlLabel, RadioGroup, Radio, Chip } from "@mui/material";
-import InvertColors from "@mui/icons-material/InvertColors";
-import { indigo, blue, purple, teal, blueGrey } from "@mui/material/colors";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  menu: {
-    padding: 0
-  },
-  formControl: {
-    margin: theme.spacing(1)
-  },
-  group: {
-    margin: theme.spacing(1)
-  },
-  color: {
-    marginTop: "auto",
-    marginBottom: "auto",
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(2)
-  },
-  default: {
-    backgroundColor: purple[500],
-    color: "#fff"
-  },
-  blue: {
-    backgroundColor: blue[500],
-    color: "#fff"
-  },
-  indigo: {
-    backgroundColor: indigo[500],
-    color: "#fff"
-  },
-  teal: {
-    backgroundColor: teal[500],
-    color: "#fff"
-  },
-  blueGrey: {
-    backgroundColor: blueGrey[500],
-    color: "#fff"
-  }
-}));
-function ColorSelector({
-  t,
-  changePrimaryColor
-}) {
-  const {
-    classes
-  } = useStyles();
-  function handleChangeColor(event) {
-    const value = event.target.value;
-    changePrimaryColor(value);
-    handleCloseMenu();
-  }
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  function handleMenu(event) {
-    setAnchorEl(event.currentTarget);
-  }
-  function handleCloseMenu() {
-    setAnchorEl(null);
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: t("change_app_colors"),
-      enterDelay: 300,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        onClick: handleMenu,
-        "aria-label": t("change_app_colors"),
-        size: "large",
-        "aria-expanded": Boolean(anchorEl),
-        children: /*#__PURE__*/_jsx(InvertColors, {})
-      })
-    }), /*#__PURE__*/_jsx(Menu, {
-      id: "color-selector-menu-appbar",
-      className: classes.menu,
-      anchorEl: anchorEl,
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      keepMounted: true,
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      open: open,
-      onClose: handleCloseMenu,
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        component: "fieldset",
-        className: classes.formControl,
-        children: [/*#__PURE__*/_jsx(FormLabel, {
-          component: "legend",
-          children: t("color")
-        }), /*#__PURE__*/_jsxs(RadioGroup, {
-          "aria-label": "color",
-          name: "color",
-          className: classes.group,
-          onChange: handleChangeColor,
-          children: [/*#__PURE__*/_jsx(FormControlLabel, {
-            value: "default",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(Chip, {
-              label: "Default",
-              className: classes.default
-            })
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "blue",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(Chip, {
-              label: "Blue",
-              className: classes.blue
-            })
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "indigo",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(Chip, {
-              label: "Indigo",
-              className: classes.indigo
-            })
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "teal",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(Chip, {
-              label: "Teal",
-              className: classes.teal
-            })
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "blueGrey",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(Chip, {
-              label: "Blue Grey",
-              className: classes.blueGrey
-            })
-          })]
-        })]
-      })
-    })]
-  });
-}
-export default ColorSelector;

package/dist/Misc/ColorSelector/package.json

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

package/dist/Misc/CustomChipInput/CustomChipInput.js

@@ -1,391 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import PropTypes from "prop-types";
-import Input from "@mui/material/Input";
-import FilledInput from "@mui/material/FilledInput";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import Chip from "@mui/material/Chip";
-import { makeStyles } from "tss-react/mui";
-import { useTheme } from "@mui/material/styles";
-import { blue } from "@mui/material/colors";
-import { FormControl } from "@mui/material";
-import FormHelperText from "@mui/material/FormHelperText";
-import cx from "classnames";
-import IconButton from "@mui/material/IconButton";
-import CancelIcon from "@mui/icons-material/Cancel";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const variantComponents = {
-  standard: Input,
-  filled: FilledInput,
-  outlined: OutlinedInput
-};
-const useStyles = makeStyles()(theme => {
-  const isLightMode = theme.palette.mode === "light";
-  const bottomLineColor = isLightMode ? "rgba(0, 0, 0, 0.42)" : "rgba(255, 255, 255, 0.7)";
-  return {
-    root: {},
-    inputRoot: {
-      display: "inline-flex",
-      flexWrap: "wrap",
-      flex: 1,
-      marginTop: 0,
-      minWidth: 70,
-      "&.outlined, &.filled": {
-        boxSizing: "border-box"
-      },
-      [`&.outlined`]: {
-        paddingTop: 14
-      },
-      [`&.filled`]: {
-        paddingTop: 28
-      }
-    },
-    input: {
-      display: "inline-block",
-      textOverflow: "ellipsis",
-      overflow: "hidden",
-      whiteSpace: "nowrap",
-      appearance: "none",
-      WebkitTapHighlightColor: "rgba(0,0,0,0)",
-      flex: 1,
-      [`&.outlined`]: {
-        height: 16,
-        paddingTop: 4,
-        paddingBottom: 12,
-        marginTop: 4,
-        marginBottom: 4
-      },
-      [`&.filled`]: {
-        height: 22,
-        marginBottom: 4,
-        marginTop: 4,
-        paddingTop: 0
-      }
-    },
-    chipContainer: {
-      display: "flex",
-      flexFlow: "row wrap",
-      cursor: "text",
-      marginBottom: -2,
-      minHeight: 40,
-      [`&.labeled&.standard`]: {
-        marginTop: 18
-      }
-    },
-    outlined: {},
-    filled: {},
-    standard: {},
-    labeled: {},
-    label: {
-      top: 4,
-      [`&.outlined:not(.labelShrink)`]: {
-        top: 2,
-        "&.marginDense": {
-          top: 5
-        }
-      },
-      [`&.filled:not(.labelShrink)`]: {
-        top: 15,
-        "&.marginDense": {
-          top: 20
-        }
-      }
-    },
-    labelShrink: {
-      top: 0
-    },
-    helperText: {
-      marginBottom: -20
-    },
-    underline: {
-      "&:after": {
-        borderBottom: `2px solid ${theme.palette.primary[isLightMode ? "dark" : "light"]}`,
-        transform: "scaleX(0)",
-        transition: theme.transitions.create("transform", {
-          duration: theme.transitions.duration.shorter,
-          easing: theme.transitions.easing.easeOut
-        })
-      },
-      "&.focused:after": {
-        transform: "scaleX(1)"
-      },
-      "&.error:after": {
-        borderBottomColor: theme.palette.error.main,
-        transform: "scaleX(1)"
-      },
-      "&:before": {
-        borderBottom: `1px solid ${bottomLineColor}`
-      },
-      "&:hover:not(.disabled):before": {
-        borderBottom: `2px solid ${theme.palette.text.primary}`
-      }
-    },
-    chip: {
-      margin: "8px 8px 8px 0",
-      backgroundColor: theme.palette.primary.main,
-      color: "white",
-      "&:hover": {
-        backgroundColor: theme.palette.primary.light
-      }
-    },
-    focused: {},
-    disabled: {},
-    marginDense: {}
-  };
-});
-const keyCodes = {
-  BACKSPACE: 8,
-  DELETE: 46,
-  LEFT_ARROW: 37,
-  RIGHT_ARROW: 39
-};
-const CustomChipInput = props => {
-  const {
-    allowDuplicates = false,
-    blurBehavior = "clear",
-    delayBeforeAdd = false,
-    newChipKeyCodes = [13],
-    newChipKeys = ["Enter"],
-    variant = "outlined",
-    chipRenderer = DefaultChipRenderer,
-    onBlur,
-    value,
-    onAdd,
-    onDelete,
-    rootRef,
-    fullWidth,
-    fullWidthInput,
-    className,
-    error,
-    required,
-    disabled,
-    label,
-    helperText,
-    delimiter
-  } = props;
-  const theme = useTheme();
-  const {
-    classes
-  } = useStyles({
-    theme
-  });
-  const inputRef = useRef(null);
-  const [chips, setChips] = useState(value || []);
-  const [inputValue, setInputValue] = useState("");
-  const [focusedChip, setFocusedChip] = useState(null);
-  const [inputBlurTimeout, setInputBlurTimeout] = useState(null);
-  const chipsRef = useRef(chips);
-  useEffect(() => {
-    chipsRef.current = chips;
-  }, [chips]);
-  useEffect(() => {
-    clearTimeout(inputBlurTimeout);
-  }, [inputBlurTimeout]);
-  const handleInputBlur = event => {
-    if (onBlur) onBlur(event);
-    setFocusedChip(null);
-    const value = event.target.value;
-    if (blurBehavior === "add" || blurBehavior === "add-or-clear") {
-      if (delayBeforeAdd) {
-        const numChipsBefore = chips.length;
-        setInputBlurTimeout(setTimeout(() => {
-          if (chipsRef.current.length === numChipsBefore) handleAddChip(value, chipsRef.current);else setInputValue("");
-        }, 150));
-      } else handleAddChip(value);
-    } else if (blurBehavior === "clear") setInputValue("");
-  };
-  const handleKeyDown = event => {
-    const chipList = value || chips;
-    if (newChipKeyCodes.includes(event.keyCode) || newChipKeys.includes(event.key)) {
-      handleAddChip(event.target.value);
-      event.preventDefault();
-      return;
-    }
-    switch (event.keyCode) {
-      case keyCodes.BACKSPACE:
-        if (event.target.value === "") {
-          if (focusedChip != null) handleDeleteChip(chipList[focusedChip], focusedChip);else setFocusedChip(chipList.length - 1);
-        }
-        break;
-      case keyCodes.DELETE:
-        if (event.target.value === "" && focusedChip != null) {
-          handleDeleteChip(chipList[focusedChip], focusedChip);
-        }
-        break;
-      case keyCodes.LEFT_ARROW:
-        if (focusedChip == null && event.target.value === "" && chipList.length) {
-          setFocusedChip(chipList.length - 1);
-        } else if (focusedChip != null && focusedChip > 0) {
-          setFocusedChip(focusedChip - 1);
-        }
-        break;
-      case keyCodes.RIGHT_ARROW:
-        if (focusedChip != null && focusedChip < chipList.length - 1) {
-          setFocusedChip(focusedChip + 1);
-        } else setFocusedChip(null);
-        break;
-      default:
-        setFocusedChip(null);
-        break;
-    }
-  };
-  const handleAddChip = (chip, currentChips = chips) => {
-    if (chip.trim().length > 0) {
-      if (!allowDuplicates && currentChips.includes(chip)) {
-        return;
-      }
-      const splitChips = chip.split(delimiter);
-      const updatedChips = [...currentChips, ...splitChips];
-      setChips(updatedChips);
-      setInputValue("");
-      if (onAdd) onAdd(chip);
-    }
-  };
-  const handleDeleteChip = (chip, i) => {
-    const updatedChips = chips.filter((_, index) => index !== i);
-    setChips(updatedChips);
-    if (onDelete) onDelete(chip, i);
-  };
-  const chipComponents = chips.map((chip, i) => {
-    return chipRenderer({
-      value: chip,
-      text: chip,
-      chip,
-      isFocused: focusedChip === i,
-      handleClick: () => setFocusedChip(i),
-      handleDelete: () => handleDeleteChip(chip, i),
-      className: classes.chip,
-      theme
-    }, i);
-  });
-  const InputComponent = variantComponents[variant];
-  return /*#__PURE__*/_jsxs(FormControl, {
-    ref: rootRef,
-    fullWidth: fullWidth,
-    className: cx(className, classes.root),
-    error: error,
-    required: chips.length > 0 ? undefined : required,
-    onClick: () => inputRef.current && inputRef.current.focus(),
-    disabled: disabled,
-    variant: variant,
-    ...props,
-    children: [/*#__PURE__*/_jsx(InputComponent, {
-      ref: inputRef,
-      classes: {
-        input: cx(classes.input, classes[variant]),
-        root: cx(classes.inputRoot, classes[variant])
-      },
-      value: inputValue,
-      onChange: e => setInputValue(e.target.value),
-      onKeyDown: handleKeyDown,
-      onBlur: handleInputBlur,
-      disabled: disabled,
-      fullWidth: fullWidthInput,
-      placeholder: label,
-      startAdornment: /*#__PURE__*/_jsx(_Fragment, {
-        children: chipComponents
-      })
-    }), helperText && /*#__PURE__*/_jsx(FormHelperText, {
-      className: cx(classes.helperText),
-      children: helperText
-    })]
-  });
-};
-CustomChipInput.propTypes = {
-  /** Allows duplicate chips if set to true. */
-  allowDuplicates: PropTypes.bool,
-  /** If true, the placeholder will always be visible. */
-  alwaysShowPlaceholder: PropTypes.bool,
-  /** Behavior when the chip input is blurred: 'clear' clears the input, 'add' creates a chip and 'ignore' keeps the input. */
-  blurBehavior: PropTypes.oneOf(["clear", "add", "add-or-clear", "ignore"]),
-  /** A function of the type ({ value, text, chip, isFocused, isDisabled, isReadOnly, handleClick, handleDelete, className }, key) => node that returns a chip based on the given properties. This can be used to customize chip styles.  Each item in the dataSource array will be passed to chipRenderer as arguments chip, value and text. If dataSource is an array of objects and dataSourceConfig is present, then value and text will instead correspond to the object values defined in dataSourceConfig. If dataSourceConfig is not set and dataSource is an array of objects, then a custom chipRenderer must be set. chip is always the raw value from dataSource, either an object or a string. */
-  chipRenderer: PropTypes.func,
-  /** Whether the input value should be cleared if the value prop is changed. */
-  clearInputValueOnChange: PropTypes.bool,
-  /** Data source for auto complete. This should be an array of strings or objects. */
-  dataSource: PropTypes.array,
-  /** Config for objects list dataSource, e.g. { text: 'text', value: 'value' }. If not specified, the dataSource must be a flat array of strings or a custom chipRenderer must be set to handle the objects. */
-  dataSourceConfig: PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired
-  }),
-  /** The chips to display by default (for uncontrolled mode). */
-  defaultValue: PropTypes.array,
-  /** Whether to use setTimeout to delay adding chips in case other input events like onSelection need to fire first */
-  delayBeforeAdd: PropTypes.bool,
-  /** Disables the chip input if set to true. */
-  disabled: PropTypes.bool,
-  /** Disable the input underline. Only valid for 'standard' variant */
-  disableUnderline: PropTypes.bool,
-  /** Props to pass through to the FormHelperText component. */
-  FormHelperTextProps: PropTypes.object,
-  /** If true, the chip input will fill the available width. */
-  fullWidth: PropTypes.bool,
-  /** If true, the input field will always be below the chips and fill the available space. By default, it will try to be beside the chips. */
-  fullWidthInput: PropTypes.bool,
-  /** Helper text that is displayed below the input. */
-  helperText: PropTypes.node,
-  /** Props to pass through to the InputLabel. */
-  InputLabelProps: PropTypes.object,
-  /** Props to pass through to the Input. */
-  InputProps: PropTypes.object,
-  /** Use this property to pass a ref callback to the native input component. */
-  inputRef: PropTypes.func,
-  /** The input value (enables controlled mode for the text input if set). */
-  inputValue: PropTypes.string,
-  /* The content of the floating label. */
-  label: PropTypes.node,
-  /** The key codes (KeyboardEvent.keyCode) used to determine when to create a new chip. */
-  newChipKeyCodes: PropTypes.arrayOf(PropTypes.number),
-  /** The keys (KeyboardEvent.key) used to determine when to create a new chip. */
-  newChipKeys: PropTypes.arrayOf(PropTypes.string),
-  /** Callback function that is called when a new chip was added (in controlled mode). */
-  onAdd: PropTypes.func,
-  /** Callback function that is called with the chip to be added and should return true to add the chip or false to prevent the chip from being added without clearing the text input. */
-  onBeforeAdd: PropTypes.func,
-  /** Callback function that is called when the chips change (in uncontrolled mode). */
-  onChange: PropTypes.func,
-  /** Callback function that is called when a new chip was removed (in controlled mode). */
-  onDelete: PropTypes.func,
-  /** Callback function that is called when the input changes. */
-  onUpdateInput: PropTypes.func,
-  /** A placeholder that is displayed if the input has no values. */
-  placeholder: PropTypes.string,
-  /** Makes the chip input read-only if set to true. */
-  readOnly: PropTypes.bool,
-  /** The chips to display (enables controlled mode if set). */
-  value: PropTypes.array,
-  /** The variant of the Input component */
-  variant: PropTypes.oneOf(["outlined", "standard", "filled"])
-};
-export const DefaultChipRenderer = ({
-  value,
-  text,
-  isFocused,
-  handleClick,
-  handleDelete,
-  className
-}, key) => {
-  return /*#__PURE__*/_jsx(Chip, {
-    className: className,
-    style: {
-      backgroundColor: isFocused ? blue[300] : undefined
-    },
-    onClick: handleClick,
-    onDelete: handleDelete,
-    deleteIcon: /*#__PURE__*/_jsx(IconButton, {
-      tabIndex: 0,
-      onClick: handleDelete,
-      "aria-label": "Delete",
-      type: "button",
-      role: "button",
-      style: {
-        padding: "0",
-        color: "white"
-      },
-      children: /*#__PURE__*/_jsx(CancelIcon, {})
-    }),
-    label: text,
-    value: value
-  }, key);
-};
-export default CustomChipInput;

package/dist/Misc/CustomChipInput/package.json

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

package/dist/Misc/DefaultColourButton/DefaultColourButton.js

@@ -1,39 +0,0 @@
-import { forwardRef } from "react";
-import { styled } from "@mui/material/styles";
-import Button from "@mui/material/Button";
-import { grey } from "@mui/material/colors";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ColorButton = styled(Button)(({
-  theme,
-  variant
-}) => ({
-  ...(variant === "contained" && {
-    backgroundColor: grey[200],
-    border: `1.5px solid ${theme.palette.primary.main}`
-  }),
-  ...(variant === "outlined" && {
-    borderColor: theme.palette.action.disabled
-  }),
-  color: theme.palette.text.primary,
-  ...(variant === "contained" && {
-    color: `rgba(0,0,0,0.87)`
-  }),
-  "&:hover": {
-    backgroundColor: theme.palette.action.hover,
-    ...(variant === "contained" && {
-      backgroundColor: "#d5d5d5"
-    }),
-    ...(variant === "outlined" && {
-      borderColor: theme.palette.action.disabled
-    })
-  }
-}));
-const DefaultColourButton = /*#__PURE__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/_jsx(ColorButton, {
-    ref: ref,
-    ...props,
-    children: props.children
-  });
-});
-DefaultColourButton.displayName = "DefaultColourButton";
-export default DefaultColourButton;

package/dist/Misc/DefaultColourButton/package.json

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