armtek-uikit-react 1.0.2 → 1.0.3

package/lib/esm/Form/Checkbox/Checkbox.js

@@ -0,0 +1,49 @@
+"use client";
+
+import css from './Checkbox.module.scss';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Checkbox = props => {
+  let {
+    label,
+    intermediate,
+    color = 'primary',
+    size = 'large',
+    variant = 'outlined',
+    onChange,
+    className,
+    ...inputProps
+  } = props;
+  let [checked, setChecked] = useState(!!props.defaultChecked);
+  const handleClick = e => {
+    if (!inputProps.disabled) {
+      if (inputProps.checked === undefined) setChecked(prev => !prev);
+      if (onChange) onChange(e);
+    }
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: clsx(css.checkbox, className),
+      children: [/*#__PURE__*/_jsx("input", {
+        className: css.checkbox__input,
+        ...inputProps,
+        type: props.type || 'checkbox'
+      }), /*#__PURE__*/_jsx("label", {
+        onClick: handleClick,
+        className: clsx(css.checkbox__label, css['checkbox_' + size], css['checkbox_' + variant], css['checkbox_' + color], {
+          [css.checkbox__label_checked]: inputProps.checked !== undefined ? inputProps.checked : checked,
+          [css.checkbox__label_intermediate]: !!intermediate,
+          [css.checkbox__label_disabled]: !!inputProps.disabled
+        }),
+        children: label && /*#__PURE__*/_jsx("span", {
+          className: css.checkbox__text,
+          children: label
+        })
+      })]
+    })
+  });
+};
+export default Checkbox;

package/lib/esm/Form/Checkbox/Checkbox.module.scss

@@ -0,0 +1,297 @@
+@import "../../assets/styles";
+
+.checkbox{
+  position: relative;
+}
+.checkbox__input{
+  display: none;
+}
+.checkbox__label{
+  cursor: pointer;
+  text-align: left;
+  position: relative;
+  display: block;
+  font-size: 16px;
+  line-height: 1.2;
+  width:22px;
+  height: 22px;
+  & .checkbox__text{
+    display: block;
+    padding-left: 31px;
+  }
+  &:before{
+    width: 100%;
+    height: 100%;
+    border-radius: $radius;
+    border: 1px solid $color-gray-700;
+    background: #fff;
+    position: absolute;
+    content: '';
+    left: 0;
+    top: -3px;
+  }
+  &:after{
+    content: '';
+    position: absolute;
+    transform: rotate(45deg);
+    left: 9px;
+    top: 1px;
+    width: 5px;
+    height: 10px;
+    border-bottom: 2px solid;
+    border-right: 2px solid;
+    display: none;
+  }
+  & span{
+    display: inline-block;
+    padding-left: 5px;
+  }
+}
+
+.checkbox_medium{
+  width:18px;
+  height: 18px;
+  & .checkbox__text{
+    //padding-left: 27px;
+  }
+  &:after{
+    left: 7px;
+    top: 1px;
+  }
+  &:before{
+    top:-1px;
+  }
+}
+.checkbox_small{
+  font-size: 14px;
+  width:16px;
+  height: 16px;
+  & .checkbox__text{
+    padding-left: 25px;
+  }
+  &:after{
+    left: 7px;
+    top: 1px;
+    height: 8px;
+    width: 3px;
+  }
+  &:before{
+    top: -2px;
+  }
+}
+.checkbox__label_intermediate{
+  &:after{
+    border-left: none;
+    width: 16px;
+    transform: none;
+    top: 7px;
+    height: 0;
+    left: 4px;
+    border-right: none;
+  }
+  &.checkbox_medium:after{
+    width: 12px;
+  }
+  &.checkbox_small:after{
+    width: 10px;
+    top: 6px;
+  }
+}
+
+.checkbox__label_intermediate,
+.checkbox__label_checked{
+  &:before{
+    border-color: transparent;
+    background: $color-primary;
+  }
+  &:after{
+    border-color: #fff;
+    display: block;
+  }
+  &.checkbox_secondary{
+    &:before{
+      background: $color-secondary;
+    }
+  }
+
+  &.checkbox_contained{
+    &.checkbox_secondary{
+      &:before{
+        background: $color-secondary;
+      }
+    }
+    &.checkbox_neutral{
+      &:before{
+        background: $color-neutral;
+      }
+    }
+    &.checkbox_success{
+      &:before{
+        background: $color-success;
+      }
+    }
+    &.checkbox_error{
+      color: $color-error-dark;
+      &:before{
+        background: $color-error-dark;
+      }
+    }
+    &.checkbox_warning{
+      &:before{
+        background: $color-warning;
+      }
+    }
+  }
+}
+.checkbox_outlined{
+  &:before{
+    background: transparent;
+    border-color: $color-primary;
+  }
+  &:after{
+    border-color: $color-primary;
+  }
+  &.checkbox_secondary{
+    &:before{
+      border-color: $color-secondary;
+    }
+    &:after{
+      border-color: $color-secondary;
+    }
+  }
+  &.checkbox_neutral{
+    &:before{
+      border-color: $color-neutral;
+    }
+    &:after{
+      border-color: $color-neutral;
+    }
+  }
+  &.checkbox_success{
+    &:before{
+      border-color: $color-success;
+    }
+    &:after{
+      border-color: $color-success;
+    }
+  }
+  &.checkbox_error{
+    color: $color-error-dark;
+    &:before{
+      border-color: $color-error-dark;
+    }
+    &:after{
+      border-color: $color-error-dark;
+    }
+  }
+  &.checkbox_warning{
+    &:before{
+      border-color: $color-warning;
+    }
+    &:after{
+      border-color: $color-warning;
+    }
+  }
+}
+
+.checkbox__label_disabled{
+  color: $color-gray-500 !important;
+  pointer-events: none;
+  &:before{
+    background-color: $color-gray-400;
+  }
+  &:after{
+    border-color: $color-gray-200;
+  }
+  &.checkbox_outlined{
+    &:before{
+      background-color: transparent;
+      border-color: $color-gray-200;
+    }
+    &:after{
+      border-color: $color-gray-200;
+    }
+  }
+}
+
+.radio{
+  & .checkbox__label{
+    &:before{
+      border-radius: 50%;
+    }
+    &:after{
+      border: none;
+      border-radius: 50%;
+      background: $color-primary;
+      width: 12px;
+      height: 12px;
+      margin-top: -2px;
+      margin-left: 1px;
+      top:50%;
+      left:50%;
+      transform: translate(-50%, -50%);
+    }
+    &.checkbox_medium{
+      &:after{
+        width: 8px;
+        height: 8px;
+        margin-top: 0;
+      }
+    }
+    &.checkbox_small{
+      &:after{
+        width: 6px;
+        height: 6px;
+        margin-top: -1px;
+      }
+    }
+    &.checkbox_error:before{
+      border-color: $color-error-dark;
+    }
+    &.checkbox_secondary:before{
+      border-color: $color-secondary;
+    }
+    &.checkbox_success:before{
+      border-color: $color-success;
+    }
+    &.checkbox_warning:before{
+      border-color: $color-warning;
+    }
+    &.checkbox_neutral:before{
+      border-color: $color-neutral;
+    }
+    &.checkbox_error:after{
+      background: $color-error-dark;
+    }
+    &.checkbox_secondary:after{
+      background: $color-secondary;
+    }
+    &.checkbox_success:after{
+      background: $color-success;
+    }
+    &.checkbox_warning:after{
+      background: $color-warning;
+    }
+    &.checkbox_neutral:after{
+      background: $color-neutral;
+    }
+    &_disabled:after{
+      background: $color-gray-200 !important;
+    }
+    &.checkbox_contained:after{
+      background: #fff;
+    }
+
+    &.checkbox__label_disabled:before{
+      background: transparent !important;
+      border-color: $color-gray-400;
+    }
+    &_checked{
+      &.checkbox__label_disabled:before{
+        background: #B1BCC6 !important;
+      }
+    }
+
+
+  }
+}

package/lib/esm/Form/Checkbox/Radio.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxPropsType } from './Checkbox';
+declare const Radio: (props: CheckboxPropsType) => import("react/jsx-runtime").JSX.Element;
+export default Radio;

package/lib/esm/Form/Checkbox/Radio.js

@@ -0,0 +1,15 @@
+import Checkbox from './Checkbox';
+import css from './Checkbox.module.scss';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Radio = props => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Checkbox, {
+      ...props,
+      className: clsx(props.className, css.radio, css['radio_' + props.size || 'large'], css['radio_' + props.color || 'primary']),
+      type: 'radio'
+    })
+  });
+};
+export default Radio;

package/lib/esm/Form/DateField/DateField.d.ts

@@ -0,0 +1,26 @@
+import { TextFieldProps } from '../TextField/TextField';
+import { ChangeEvent } from 'react';
+export type DateFieldProps = {
+    format?: string;
+    onInput?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (value: Date | null) => void;
+    showTime?: boolean;
+    showTimeOnly?: boolean;
+} & TextFieldProps;
+declare const DateField: import("react").ForwardRefExoticComponent<{
+    format?: string | undefined;
+    onInput?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    onChange?: ((value: Date | null) => void) | undefined;
+    showTime?: boolean | undefined;
+    showTimeOnly?: boolean | undefined;
+} & {
+    label?: string | undefined;
+    size?: "small" | "large" | undefined;
+    variant?: import("../../shared/types/theme").VariantType | undefined;
+    error?: boolean | undefined;
+    success?: boolean | undefined;
+    helperText?: string | undefined;
+    endAdornment?: import("react").ReactNode;
+    multiline?: boolean | undefined;
+} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+export default DateField;

package/lib/esm/Form/DateField/DateField.js

@@ -0,0 +1,66 @@
+"use client";
+
+import TextField from '../TextField/TextField';
+import { forwardRef, useState } from 'react';
+import ButtonIcon from '../../Button/ButtonIcon';
+import Card from '../../Card/Card';
+import DatePicker from '../DatePicker/DatePicker';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const DateInput = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    showTime,
+    showTimeOnly,
+    ...restProps
+  } = props;
+  let inputIcon = showTime && showTimeOnly ? 'schedule' : 'calendar_today';
+  console.log(restProps);
+  return /*#__PURE__*/_jsx(TextField, {
+    ref: ref,
+    ...restProps,
+    endAdornment: /*#__PURE__*/_jsx(ButtonIcon, {
+      size: 'medium',
+      variant: 'transparent',
+      onClick: props.onClick,
+      color: 'neutral',
+      className: 'material_icon',
+      children: inputIcon
+    })
+  });
+});
+const DateField = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    onChange,
+    format = 'dd.MM.yyyy',
+    onInput,
+    showTime,
+    showTimeOnly,
+    ...restProps
+  } = props;
+  let [date, setDate] = useState(null);
+  if (showTime && !showTimeOnly) format = 'dd.MM.yyyy HH:mm';else if (showTimeOnly) format = 'HH:mm';
+  const handleChange = d => {
+    setDate(d);
+    if (onChange) onChange(d);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(DatePicker, {
+      onChange: handleChange,
+      selected: date,
+      showTimeSelect: !!showTime,
+      timeIntervals: 15,
+      showTimeSelectOnly: !!showTimeOnly && !!showTime,
+      customInput: /*#__PURE__*/_jsx(DateInput, {
+        showTime: showTime,
+        showTimeOnly: showTimeOnly,
+        ref: ref,
+        ...restProps
+      }),
+      inline: false,
+      calendarContainer: Card,
+      popperPlacement: "top-end",
+      dateFormat: format
+    })
+  });
+});
+export default DateField;

package/lib/esm/Form/DateField/DateField.module.scss

@@ -0,0 +1 @@
+ @import "../../assets/styles";

package/lib/esm/Form/DateField/TimeField.d.ts

@@ -0,0 +1,3 @@
+import { DateFieldProps } from './DateField';
+declare const TimeField: (props: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default TimeField;

package/lib/esm/Form/DateField/TimeField.js

@@ -0,0 +1,13 @@
+import DateField from './DateField';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const TimeField = props => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(DateField, {
+      ...props,
+      showTime: true,
+      showTimeOnly: true
+    })
+  });
+};
+export default TimeField;

package/lib/esm/Form/DatePicker/DatePicker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ReactDatePickerProps } from 'react-datepicker';
+import '!style-loader!css-loader!./styles.css';
+declare const DatePicker: import("react").ForwardRefExoticComponent<{
+    selectsRange?: boolean | undefined;
+} & Omit<ReactDatePickerProps<never, boolean | undefined>, "selectsRange"> & import("react").RefAttributes<unknown>>;
+export default DatePicker;

package/lib/esm/Form/DatePicker/DatePicker.js

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import ReactDatePicker, { registerLocale } from 'react-datepicker';
+import '!style-loader!css-loader!./styles.css';
+import ru from 'date-fns/locale/ru';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+registerLocale('ru', ru);
+const renderDayContents = day => {
+  return /*#__PURE__*/_jsx("div", {
+    className: 'customDay',
+    children: day
+  });
+};
+const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    onChange,
+    selectsRange = false,
+    ...restProps
+  } = props;
+  const handleChange = (date, event) => {
+    if (onChange) onChange(date, event);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: 'ui-datepicker',
+      children: /*#__PURE__*/_jsx(ReactDatePicker, {
+        ref: ref,
+        locale: 'ru',
+        onChange: handleChange,
+        inline: true,
+        renderDayContents: renderDayContents,
+        ...restProps,
+        selectsRange: selectsRange,
+        onBlur: () => {
+          console.log(1);
+        }
+      })
+    })
+  });
+});
+export default DatePicker;

package/lib/esm/Form/DatePicker/DatePicker.module.scss

@@ -0,0 +1,7 @@
+@import "../../assets/styles";
+
+.datepicker{
+  & .react-datepicker{
+    border:none;
+  }
+}

package/lib/esm/Form/DatePicker/PeriodSelect.d.ts

@@ -0,0 +1,2 @@
+declare const PeriodSelect: () => import("react/jsx-runtime").JSX.Element;
+export default PeriodSelect;

package/lib/esm/Form/DatePicker/PeriodSelect.js

@@ -0,0 +1,24 @@
+"use client";
+
+import DatePicker from './DatePicker';
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const PeriodSelect = () => {
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(null);
+  const handleChange = date => {
+    setStartDate(date[0]);
+    setEndDate(date[1]);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(DatePicker, {
+      selected: startDate,
+      onChange: handleChange,
+      startDate: startDate,
+      endDate: endDate,
+      selectsRange: true
+    })
+  });
+};
+export default PeriodSelect;

package/lib/esm/Form/DatePicker/TimePicker.d.ts

@@ -0,0 +1,2 @@
+declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;
+export default TimePicker;

package/lib/esm/Form/DatePicker/TimePicker.js

@@ -0,0 +1,23 @@
+"use client";
+
+import DatePicker from './DatePicker';
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const TimePicker = () => {
+  const [startDate, setStartDate] = useState(new Date());
+  const handleChange = date => {
+    setStartDate(date);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(DatePicker, {
+      selected: startDate,
+      onChange: handleChange,
+      timeIntervals: 5,
+      showTimeSelect: true,
+      showTimeSelectOnly: true,
+      timeCaption: ''
+    })
+  });
+};
+export default TimePicker;