@wavelengthusaf/components 2.6.0 → 2.7.1

package/README.md

@@ -14,6 +14,16 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.7.1
+
+- 4/1/2025
+- Updated WavelengthTextField component to have another variant.
+
+### 2.7.0
+
+- 3/24/2025
+- Added a Comment Component
+
 ### 2.6.0
 
 - Added a new component, WavelengthProgressBar

package/dist/cjs/index.cjs

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment15 = REACT_FRAGMENT_TYPE;
+        var Fragment14 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment15;
+        exports.Fragment = Fragment14;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -4714,6 +4714,62 @@ function WavelengthProgressBar({ width: width2 = "425px", height: height2 = "12p
   ] });
 }
 
+// src/components/PageComponents/WavelengthCommentDisplay.tsx
+
+var _CheckCircleOutline = require('@mui/icons-material/CheckCircleOutline'); var _CheckCircleOutline2 = _interopRequireDefault(_CheckCircleOutline);
+var _CheckCircle = require('@mui/icons-material/CheckCircle'); var _CheckCircle2 = _interopRequireDefault(_CheckCircle);
+
+
+function WavelengthCommentDisplay(props) {
+  const [selected, setSelected] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: props.width || "332px",
+        minHeight: "fit",
+        height: props.height || "fit-content",
+        backgroundColor: props.backgroundColor || "rgba(250, 242, 236, 1)",
+        border: props.border || "1px solid rgba(0, 0, 0, 0.05)",
+        borderRadius: "6px",
+        padding: "12px",
+        color: props.textColor || "black"
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 600, display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: 0 }, children: [
+          props.author,
+          !selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.IconButton,
+            {
+              onClick: () => {
+                setSelected(!selected);
+                props.onClick;
+              },
+              style: { padding: "0px" },
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { fontSize: "small" })
+            }
+          ),
+          selected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.IconButton,
+            {
+              onClick: () => {
+                setSelected(!selected);
+                props.onClick;
+              },
+              style: { padding: "0px" },
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle2.default, { fontSize: "small", sx: { color: props.iconSelectedColor || "rgba(209, 106, 47, 1)" } })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "12px", fontWeight: 400, opacity: 0.6 }, children: props.date }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", fontWeight: 400 }, children: props.comments })
+      ]
+    }
+  );
+}
+
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
 
@@ -5903,6 +5959,54 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
 
 
 
+
+var InputWrapper = _styledcomponents2.default.div`
+  position: relative;
+  width: 100%;
+`;
+var StandardTextField = _styledcomponents2.default.input`
+  width: ${(props) => props.width || "320px"};
+  height: ${(props) => props.height || "35px"};
+  padding-left: 12px;
+  font-size: 16px;
+  border: none;
+  border-bottom: 2px solid ${(props) => props.error ? "red" : props.borderColor || "#ccc"}; /* Red border when error */
+  color: ${(props) => props.textColor || "black"};
+  outline: none;
+  box-sizing: border-box;
+  background-color: transparent;
+
+  &:focus {
+    border-bottom-color: ${(props) => props.error ? "red" : props.focusColor || "#d16a2f"};
+  }
+
+  &::placeholder {
+    opacity: 0.4;
+    color: ${(props) => props.error ? "red" : "#888"}; /* Placeholder color changes to red on error */
+  }
+
+  &:focus + label,
+  &:valid + label {
+    top: -5px;
+    font-size: 12px;
+    color: ${(props) => props.error ? "red" : props.labelColor}; // Change label color on error
+  }
+
+  &:not(:placeholder-shown) + label {
+    top: -8px;
+    font-size: 12px;
+    color: ${(props) => props.error ? "red" : props.labelColor}; // Label color when input has a value
+  }
+`;
+var StyledLabel = _styledcomponents2.default.label`
+  position: absolute;
+  top: 8px;
+  left: 16px;
+  font-size: 14px;
+  color: ${(props) => props.color || "#aaa"};
+  pointer-events: none;
+  transition: all 0.3s ease-out;
+`;
 function WavelengthTextField(props) {
   const [hasError, setHasError] = _react.useState.call(void 0, false);
   const handleChange = _react.useCallback.call(void 0, 
@@ -5913,48 +6017,74 @@ function WavelengthTextField(props) {
       }
     },
     [props.regex]
-    // Ensures function doesn't change unless `regex` does
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _TextField2.default,
-    {
-      type: props.type,
-      required: props.required,
-      label: props.label,
-      onChange: (e) => {
-        handleChange(e);
-        _optionalChain([props, 'access', _18 => _18.onChange, 'optionalCall', _19 => _19(e)]);
-      },
-      error: hasError,
-      helperText: hasError ? "Invalid Input" : "",
-      sx: {
-        "& .MuiInputBase-root": {
-          height: props.height || "51px",
-          width: props.width || "320px",
-          borderRadius: "8px"
+  if (props.variant === "outlined") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _TextField2.default,
+      {
+        type: props.type,
+        required: props.required,
+        label: props.label,
+        onChange: (e) => {
+          handleChange(e);
+          _optionalChain([props, 'access', _18 => _18.onChange, 'optionalCall', _19 => _19(e)]);
         },
-        "&.MuiTextField-root": {
-          "& label": { color: !hasError ? props.labelColor || "rgba(89, 99, 129, 1)" : "red" },
-          "& .MuiOutlinedInput-root": {
-            "& fieldset": {
-              border: "1px solid",
-              borderColor: !hasError ? props.borderColor || `rgba(89, 99, 129, 1)` : "red"
-            },
-            "&.Mui-focused fieldset": {
-              borderColor: !hasError ? props.focusColor || `rgba(26, 128, 131, 0.1)` : "red"
+        error: hasError,
+        helperText: hasError ? props.errorMessage : "",
+        sx: {
+          "& .MuiInputBase-root": {
+            height: props.height || "51px",
+            width: props.width || "320px",
+            borderRadius: "8px"
+          },
+          "&.MuiTextField-root": {
+            "& label": { color: !hasError ? props.labelColor || "rgba(89, 99, 129, 1)" : "red" },
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": {
+                border: "1px solid",
+                borderColor: !hasError ? props.borderColor || `rgba(89, 99, 129, 1)` : "red"
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: !hasError ? props.focusColor || `rgba(26, 128, 131, 0.1)` : "red"
+              }
             }
           }
+        },
+        placeholder: props.placeholder,
+        InputLabelProps: {
+          shrink: props.shrink
+        },
+        InputProps: {
+          style: { color: props.textColor || "inherit" }
         }
-      },
-      placeholder: props.placeholder,
-      InputLabelProps: {
-        shrink: props.shrink
-      },
-      InputProps: {
-        style: { color: props.textColor || "inherit" }
       }
-    }
-  ) });
+    );
+  } else if (props.variant === "standard") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputWrapper, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        StandardTextField,
+        {
+          type: props.type,
+          id: "custom-input",
+          placeholder: props.placeholder,
+          required: props.required,
+          focusColor: props.focusColor,
+          borderColor: props.borderColor,
+          width: props.width,
+          height: props.height,
+          textColor: props.textColor,
+          error: hasError,
+          onChange: (e) => {
+            handleChange(e);
+            _optionalChain([props, 'access', _20 => _20.onChange, 'optionalCall', _21 => _21(e)]);
+          }
+        }
+      ),
+      props.label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledLabel, { htmlFor: "custom-input", color: props.labelColor, children: props.label }),
+      props.error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: ".75rem", color: "red", paddingLeft: "12px", marginTop: "3px" }, children: props.errorMessage })
+    ] });
+  }
+  return null;
 }
 
 
@@ -6002,7 +6132,8 @@ function WavelengthTextField(props) {
 
 
 
-exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+
+exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: