techsbcn-storybook 0.21.2 → 0.21.3

package/dist/index.d.ts

@@ -20,3 +20,4 @@ export * from './components/forms/ResetPasswordForm';
 export * from './components/modals/ModalComponent';
 export * from './components/wrappers/TabsComponent/TabsComponent';
 export * from './components/wrappers/LinearProgressComponent/LinearProgressComponent';
+export * from './components/fields/DatePickerComponent/DatePickerComponent';

package/dist/techsbcn-storybook.cjs.development.js

@@ -18,6 +18,8 @@ var yup = require('yup');
 var reactHookForm = require('react-hook-form');
 var yup$1 = require('@hookform/resolvers/yup');
 var lab = require('@mui/lab');
+var xDatePickers = require('@mui/x-date-pickers');
+var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -3121,10 +3123,86 @@ var TabsComponent = function TabsComponent(props) {
   }))));
 };
 
+var css_248z$h = ".data-picker-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.data-picker-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 25px !important;\n}\n.data-picker-component .MuiInputBase-root.no-border {\n  border: none !important;\n  padding: 0 !important;\n  width: fit-content !important;\n}\n.data-picker-component .MuiInputBase-root {\n  color: #666666 !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.data-picker-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.data-picker-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.data-picker-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid #3299C7;\n}\n.data-picker-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.data-picker-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.data-picker-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.data-picker-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n  color: #666666;\n}";
+styleInject(css_248z$h);
+
+var DatePickerComponent = function DatePickerComponent(props) {
+  var _React$useState = React__default.useState(props.value),
+      value = _React$useState[0],
+      setValue = _React$useState[1];
+
+  var _React$useState2 = React__default.useState(false),
+      hover = _React$useState2[0],
+      setHover = _React$useState2[1];
+
+  return React__default.createElement(_.Box, {
+    className: "data-picker-component",
+    width: "100%"
+  }, React__default.createElement(xDatePickers.LocalizationProvider, {
+    dateAdapter: AdapterDayjs.AdapterDayjs
+  }, React__default.createElement(xDatePickers.DatePicker, {
+    value: value,
+    maxDate: props.maxDate,
+    minDate: props.minDate,
+    disabled: props.disabled,
+    inputFormat: props.inputFormat,
+    inputRef: props.inputRef,
+    disableMaskedInput: true,
+    onChange: function onChange(d, e) {
+      setValue(d);
+      props.onChange(d, e);
+    },
+    renderDay: function renderDay(_day, _selectedDays, pickersDayProps) {
+      return React__default.createElement(xDatePickers.PickersDay, Object.assign({}, pickersDayProps, {
+        classes: {
+          selected: 'main-background-color'
+        }
+      }));
+    },
+    renderInput: function renderInput(params) {
+      var _params$InputProps;
+
+      return React__default.createElement(_.TextField, Object.assign({}, params, {
+        onMouseEnter: function onMouseEnter() {
+          return setHover(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return setHover(false);
+        },
+        name: props.name,
+        error: props.error,
+        id: props.id,
+        label: props.label,
+        className: props.className,
+        required: props.required,
+        variant: "standard",
+        InputProps: {
+          className: (props.noBorders ? 'no-border' : '') + " " + (!props.disabled && hover ? 'main-border-color' : ''),
+          disableUnderline: true,
+          startAdornment: props.startIcon,
+          endAdornment: (_params$InputProps = params.InputProps) == null ? void 0 : _params$InputProps.endAdornment,
+          classes: {
+            focused: 'main-border-color'
+          }
+        },
+        InputLabelProps: {
+          shrink: true
+        },
+        helperText: props.helperText,
+        fullWidth: props.fullWidth
+      }));
+    }
+  })));
+};
+DatePickerComponent.defaultProps = {
+  fullWidth: true
+};
+
 exports.AppHeader = AppHeader;
 exports.AppSidebar = AppSidebar;
 exports.ButtonComponent = ButtonComponent;
 exports.ChangePasswordForm = ChangePasswordForm;
+exports.DatePickerComponent = DatePickerComponent;
 exports.DrawerSidebar = DrawerSidebar;
 exports.LinearProgressComponent = LinearProgressComponent;
 exports.LoginForm = LoginForm;