sag_components 1.0.480 → 1.0.482

package/dist/index.js

@@ -5,6 +5,8 @@ var _react = _interopRequireDefault(require("react"));
 var _client = _interopRequireDefault(require("react-dom/client"));
 require("./index.css");
 var _App = _interopRequireDefault(require("./App"));
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 const root = _client.default.createRoot(document.getElementById('root'));
 root.render( /*#__PURE__*/_react.default.createElement(_react.default.StrictMode, null, /*#__PURE__*/_react.default.createElement(_App.default, null)));
 

package/dist/stories/components/AttachedFile.js

@@ -13,15 +13,19 @@ var _AttachedIcon = _interopRequireDefault(require("./icons/AttachedIcon"));
 var _FileIcon = _interopRequireDefault(require("./icons/FileIcon"));
 const AttachedFile = props => {
   const {
-    inputText
+    inputText,
+    onSelectFile,
+    onRemoveFile
   } = props;
   const [selectedFiles, setSelectedFiles] = (0, _react.useState)([]);
   const handleFileChange = event => {
     const files = Array.from(event.target.files);
     setSelectedFiles([...selectedFiles, ...files]);
+    onSelectFile();
   };
   const handleRemoveFile = fileToRemove => {
     setSelectedFiles(selectedFiles.filter(file => file !== fileToRemove));
+    onRemoveFile();
   };
   return /*#__PURE__*/_react.default.createElement(_AttachedFile.AttachedFileContainer, null, selectedFiles.map((file, index) => /*#__PURE__*/_react.default.createElement(_AttachedFile.UploadedFile, {
     key: index
@@ -41,6 +45,7 @@ const AttachedFile = props => {
 };
 var _default = exports.default = AttachedFile;
 AttachedFile.defaultProps = {
-  inputText: 'Attach file'
-  // onSelect: () => {},
+  inputText: 'Attach file',
+  onSelectFile: () => {},
+  onRemoveFile: () => {}
 };

package/dist/stories/components/Input.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _fa = require("react-icons/fa");
+var _Input = require("./Input.style");
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable react/require-default-props */
+/* eslint-disable no-nested-ternary */
+// CustomInput.js
+
+const Input = _ref => {
+  let {
+    label,
+    value,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    password,
+    defaultValue,
+    error,
+    errorMessage,
+    type,
+    borderColor,
+    // Added borderColor prop
+    textColor // Added textColor prop
+  } = _ref;
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [showPassword, setShowPassword] = (0, _react.useState)(false);
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Input.Container, {
+    onClick: handleFocus,
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Input.StyledLabel, {
+    onClick: handleFocus,
+    isFocused: isFocused,
+    hasValue: value || defaultValue,
+    disabled: disabled,
+    textColor: textColor
+  }, label, required && /*#__PURE__*/_react.default.createElement(_Input.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
+    type: password && !showPassword ? 'password' : type,
+    value: value,
+    onChange: onChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    borderRadius: borderRadius,
+    width: width,
+    height: height,
+    placeholder: isFocused ? placeholder : '',
+    disabled: disabled,
+    defaultValue: defaultValue,
+    error: error,
+    borderColor: borderColor,
+    textColor: textColor
+  }), error && /*#__PURE__*/_react.default.createElement(_Input.ErrorLabel, null, errorMessage), password && /*#__PURE__*/_react.default.createElement(_Input.EyeIcon, {
+    onClick: toggleShowPassword,
+    textColor: textColor
+  }, showPassword ? /*#__PURE__*/_react.default.createElement(_fa.FaEyeSlash, null) : /*#__PURE__*/_react.default.createElement(_fa.FaEye, null)));
+};
+// Adding defaultProps
+Input.defaultProps = {
+  required: true,
+  width: '200%',
+  height: '50px',
+  disabled: false,
+  password: false,
+  defaultValue: '',
+  placeholder: 'Enter here..',
+  error: false,
+  errorMessage: 'Input is invalid',
+  type: 'text',
+  borderColor: '#000000',
+  // Default borderColor prop value
+  textColor: '#000000' // Default textColor prop value
+};
+var _default = exports.default = Input;

package/dist/stories/components/Input.style.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.EyeIcon = exports.ErrorLabel = exports.Container = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+/* eslint-disable no-nested-ternary */
+const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-bottom: 20px;\n  width: ", ";\n  height: ", ";\n"])), props => props.width || '100%', props => props.height || '40px');
+const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 10px;\n  font-size: 16px;\n  border: 2px solid\n    ", ";\n  border-radius: ", ";\n  outline: none;\n  width: ", ";\n  height: ", ";\n  transition: border-color 0.3s ease;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColor || '#bdbdbd', props => props.borderRadius || '4px', props => props.width || '100%', props => props.height || '40px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.disabled ? 'not-allowed' : 'text', props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2');
+const StyledLabel = exports.StyledLabel = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  padding-inline-end: 5px;\n  padding-inline-start: 5px;\n  margin-right: 10px;\n  color: ", ";\n  background-color: white;\n  position: absolute;\n  top: ", ";\n  left: 10px;\n  transform: translateY(-50%);\n  transition: top 0.3s ease, font-size 0.3s ease;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), props => props.isFocused || props.hasValue ? '12px' : '16px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.isFocused || props.hasValue ? '0px' : '50%');
+const RequiredIndicator = exports.RequiredIndicator = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: red;\n  margin-left: 5px;\n"])));
+const EyeIcon = exports.EyeIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 50%;\n  right: 10px;\n  transform: translateY(-50%);\n  cursor: pointer;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), props => props.textColor || '#888', props => props.textColor || '#333');
+const ErrorLabel = exports.ErrorLabel = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  color: red;\n  margin-top: 5px;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.480",
+  "version": "1.0.482",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -60,6 +60,7 @@
     "react-ace": "^10.1.0",
     "react-css-modules": "^4.7.11",
     "react-hook-form": "^7.46.2",
+    "react-icons": "^5.0.1",
     "react-loading-skeleton": "^3.3.1",
     "recharts": "^2.9.2",
     "storybook": "^7.4.6",