@pushwoosh/dumb-components 1.0.13 → 1.0.15

package/DateTimePicker/components/AutosizeInput/AutosizeInput.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { AutosizeInputProps } from './types';
+export declare function AutosizeInput(props: AutosizeInputProps): ReactElement;

package/DateTimePicker/components/AutosizeInput/AutosizeInput.js

@@ -0,0 +1,35 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Input } from '../Input';
+import { Hidden } from './styles';
+export function AutosizeInput(props) {
+  const {
+    value,
+    placeholder,
+    isDisabled,
+    onChange,
+    onKeyUp,
+    onKeyDown,
+    onBlur
+  } = props;
+  const ref = useRef(null);
+  const [width, setWidth] = useState(12);
+  useEffect(() => {
+    const {
+      offsetWidth
+    } = ref.current;
+    const addWidth = offsetWidth ? 12 : 16;
+    setWidth(offsetWidth + addWidth);
+  }, [value]);
+  return React.createElement(React.Fragment, null, React.createElement(Input, {
+    value: value,
+    placeholder: placeholder,
+    width: width,
+    isDisabled: isDisabled,
+    onChange: onChange,
+    onKeyUp: onKeyUp,
+    onKeyDown: onKeyDown,
+    onBlur: onBlur
+  }), React.createElement(Hidden, {
+    ref: ref
+  }, value || placeholder));
+}

package/DateTimePicker/components/AutosizeInput/index.d.ts

@@ -0,0 +1 @@
+export * from './AutosizeInput';

package/DateTimePicker/components/AutosizeInput/index.js

@@ -0,0 +1 @@
+export * from './AutosizeInput';

package/DateTimePicker/components/AutosizeInput/styles.d.ts

@@ -0,0 +1 @@
+export declare const Hidden: import("styled-components").StyledComponent<"span", any, {}, never>;

package/DateTimePicker/components/AutosizeInput/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const Hidden = styled.span.withConfig({
+  displayName: "Hidden",
+  componentId: "sc-1p643dm-0"
+})(["position:absolute;visibility:hidden;"]);

package/DateTimePicker/components/AutosizeInput/types.d.ts

@@ -0,0 +1,10 @@
+import type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react';
+export interface AutosizeInputProps {
+    value: string;
+    placeholder?: string;
+    isDisabled?: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+}

package/DateTimePicker/components/AutosizeInput/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DatePickerProps } from './types';
+export declare function DatePicker(props: DatePickerProps): ReactElement;

package/DateTimePicker/components/DatePicker/DatePicker.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { format } from '../../helpers';
+import { CalendarBox } from '../../styles';
+import { DecadeView } from '../DecadeView';
+import { MonthView } from '../MonthView';
+import { YearView } from '../YearView';
+export function DatePicker(props) {
+  const {
+    value,
+    userInputDay,
+    minDate,
+    maxDate,
+    slotAfterMonth,
+    onChange
+  } = props;
+  const [view, setView] = useState('month');
+  const [month, setMonth] = useState(() => format(userInputDay || value || new Date(), 'year-month'));
+  useEffect(() => {
+    if (userInputDay) {
+      setMonth(format(userInputDay, 'year-month'));
+      setView('month');
+    }
+  }, [userInputDay]);
+  return React.createElement(CalendarBox, null, view === 'month' && React.createElement(Vertical, {
+    "$gap": 16
+  }, React.createElement(MonthView, {
+    month: month,
+    activeDay: value ? format(value, 'year-month-day') : undefined,
+    userInputDay: userInputDay,
+    minDate: minDate,
+    maxDate: maxDate,
+    onChange: setMonth,
+    onDaySelect: onChange,
+    onShowYear: () => setView('year'),
+    onShowDecade: () => setView('decade')
+  }), slotAfterMonth && slotAfterMonth()), view === 'year' && React.createElement(YearView, {
+    year: format(month, 'year'),
+    activeDay: value ? format(value, 'year-month-day') : undefined,
+    onChange: setMonth,
+    onSelect: newMon => {
+      setMonth(newMon);
+      setView('month');
+    }
+  }), view === 'decade' && React.createElement(DecadeView, {
+    value: format(month, 'year'),
+    activeDay: value ? format(value, 'year-month-day') : undefined,
+    onChange: setMonth,
+    onSelect: newYear => {
+      setMonth(newYear);
+      setView('year');
+    }
+  }));
+}

package/DateTimePicker/components/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePicker';

package/DateTimePicker/components/DatePicker/index.js

@@ -0,0 +1 @@
+export * from './DatePicker';

package/DateTimePicker/components/DatePicker/types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface DatePickerProps {
+    value?: string;
+    userInputDay?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    slotAfterMonth?: () => ReactNode | null;
+    onChange: (day: string) => void;
+}
+export type ViewType = 'month' | 'year' | 'decade';

package/DateTimePicker/components/DatePicker/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/DatePickerField/DatePickerField.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DatePickerFieldProps } from './types';
+export declare function DatePickerField(props: DatePickerFieldProps): ReactElement;

package/DateTimePicker/components/DatePickerField/DatePickerField.js

@@ -0,0 +1,59 @@
+import { useFloating, offset, autoPlacement } from '@floating-ui/react-dom';
+import React, { useState, useEffect } from 'react';
+import { CalendarIcon } from '@pushwoosh/kit-icons';
+import { format, monthName, get } from '../../helpers';
+import { InputFrame } from '../../styles';
+import { DatePicker } from '../DatePicker';
+export function DatePickerField(props) {
+  const {
+    value,
+    error,
+    allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+    zIndex = 1000,
+    onChange
+  } = props;
+  const [showPicker, setShowPicker] = useState(false);
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    middleware: [offset(4), autoPlacement({
+      allowedPlacements
+    })]
+  });
+  useEffect(() => {
+    if (!showPicker) {
+      return;
+    }
+    const handleClickListener = e => {
+      var _refs$floating$curren;
+      if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target)) && !refs.reference.current.contains(e.target)) {
+        setShowPicker(false);
+      }
+    };
+    document.addEventListener('click', handleClickListener);
+    return () => {
+      document.removeEventListener('click', handleClickListener);
+    };
+  }, [showPicker, refs]);
+  const onSelect = date => onChange(date);
+  return React.createElement(React.Fragment, null, React.createElement(InputFrame, {
+    ref: refs.setReference,
+    "$gap": 8,
+    "$error": error,
+    "$empty": !value,
+    onClick: () => setShowPicker(!showPicker)
+  }, React.createElement(CalendarIcon, {
+    size: "medium",
+    view: "lined"
+  }), value ? React.createElement(React.Fragment, null, format(value, 'day '), monthName(get(value, 'month'), 'long'), format(value, ' year')) : 'Select date'), showPicker && React.createElement("div", {
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles,
+      zIndex
+    }
+  }, React.createElement(DatePicker, {
+    value: value,
+    onChange: onSelect
+  })));
+}

package/DateTimePicker/components/DatePickerField/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePickerField';

package/DateTimePicker/components/DatePickerField/index.js

@@ -0,0 +1 @@
+export * from './DatePickerField';

package/DateTimePicker/components/DatePickerField/types.d.ts

@@ -0,0 +1,8 @@
+import type { Placement } from '@floating-ui/react-dom';
+export interface DatePickerFieldProps {
+    value: string;
+    error?: boolean;
+    allowedPlacements?: Placement[];
+    zIndex?: number;
+    onChange: (day: string) => void;
+}

package/DateTimePicker/components/DatePickerField/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DateTimePickerProps } from './types';
+export declare function DateTimePicker(props: DateTimePickerProps): ReactElement;

package/DateTimePicker/components/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Collapse, Horizontal } from '@pushwoosh/kit-helpers';
+import { format, createUTCDate } from '../../helpers';
+import { DatePicker } from '../DatePicker';
+import { NumberPicker } from '../NumberPicker';
+export function DateTimePicker(props) {
+  const {
+    value,
+    userInputDay,
+    onChange
+  } = props;
+  const date = value ? new Date(value) : new Date();
+  const handleChange = formattedDate => {
+    const [year, month, day] = formattedDate.split('-').map(Number);
+    const utcDate = createUTCDate(year, month, day, date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+    onChange(utcDate.toUTCString());
+  };
+  const handleChangeHour = hours => {
+    date.setUTCHours(hours);
+    onChange(date.toUTCString());
+  };
+  const handleChangeMinutes = minutes => {
+    date.setUTCMinutes(minutes);
+    onChange(date.toUTCString());
+  };
+  const handleChangeSeconds = seconds => {
+    date.setUTCSeconds(seconds);
+    onChange(date.toUTCString());
+  };
+  return React.createElement(DatePicker, {
+    value: format(date, 'year-month-dayThour:minute:second'),
+    userInputDay: userInputDay,
+    onChange: handleChange,
+    slotAfterMonth: () => React.createElement(Collapse, {
+      expanded: !!value
+    }, React.createElement(Horizontal, {
+      "$padding": `0 ${Spacing.S5}`,
+      "$gap": 8
+    }, React.createElement(NumberPicker, {
+      placeholder: "00",
+      value: date.getUTCHours(),
+      onChange: handleChangeHour
+    }), React.createElement(NumberPicker, {
+      placeholder: "00",
+      value: date.getUTCMinutes(),
+      onChange: handleChangeMinutes
+    }), React.createElement(NumberPicker, {
+      placeholder: "00",
+      value: date.getUTCSeconds(),
+      onChange: handleChangeSeconds
+    })))
+  });
+}

package/DateTimePicker/components/DateTimePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DateTimePicker';

package/DateTimePicker/components/DateTimePicker/index.js

@@ -0,0 +1 @@
+export * from './DateTimePicker';

package/DateTimePicker/components/DateTimePicker/types.d.ts

@@ -0,0 +1,5 @@
+export interface DateTimePickerProps {
+    value: string;
+    userInputDay?: string;
+    onChange: (day: string) => void;
+}

package/DateTimePicker/components/DateTimePicker/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DateTimePickerFieldProps } from './types';
+export declare function DateTimePickerField(props: DateTimePickerFieldProps): ReactElement;

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.js

@@ -0,0 +1,67 @@
+import { useFloating, offset, autoPlacement } from '@floating-ui/react-dom';
+import React, { useState, useEffect } from 'react';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { CalendarIcon } from '@pushwoosh/kit-icons';
+import { useUTCDate } from './helpers';
+import { InputFrame } from '../../styles';
+import { DateTimePicker } from '../DateTimePicker';
+export function DateTimePickerField(props) {
+  const {
+    value,
+    error,
+    allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+    zIndex = 1000,
+    onChange
+  } = props;
+  const [showPicker, setShowPicker] = useState(false);
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    middleware: [offset(4), autoPlacement({
+      allowedPlacements
+    })]
+  });
+  useEffect(() => {
+    if (!showPicker) {
+      return;
+    }
+    const handleClickListener = e => {
+      var _refs$floating$curren;
+      if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target)) && !refs.reference.current.contains(e.target)) {
+        setShowPicker(false);
+      }
+    };
+    document.addEventListener('click', handleClickListener);
+    return () => {
+      document.removeEventListener('click', handleClickListener);
+    };
+  }, [showPicker, refs]);
+  const onSelect = date => onChange(date);
+  const {
+    year,
+    month,
+    day,
+    hours,
+    minutes
+  } = useUTCDate(value);
+  return React.createElement(React.Fragment, null, React.createElement(InputFrame, {
+    ref: refs.setReference,
+    "$gap": Spacing.S3,
+    "$empty": !value,
+    "$error": error,
+    onClick: () => setShowPicker(!showPicker)
+  }, React.createElement(CalendarIcon, {
+    size: "medium",
+    view: "lined"
+  }), value ? `${day} ${month} ${year} ${hours}:${minutes}` : 'Select date and time'), showPicker && React.createElement("div", {
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles,
+      zIndex
+    }
+  }, React.createElement(DateTimePicker, {
+    value: value,
+    onChange: onSelect
+  })));
+}

package/DateTimePicker/components/DateTimePickerField/helpers.d.ts

@@ -0,0 +1,8 @@
+export declare const useUTCDate: (dateString: string) => {
+    year: number;
+    month: string;
+    day: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+};

package/DateTimePicker/components/DateTimePickerField/helpers.js

@@ -0,0 +1,13 @@
+export const useUTCDate = dateString => {
+  const date = new Date(dateString);
+  return {
+    year: date.getUTCFullYear(),
+    month: date.toLocaleString('en-US', {
+      month: 'long'
+    }),
+    day: String(date.getUTCDate()).padStart(2, '0'),
+    hours: String(date.getUTCHours()).padStart(2, '0'),
+    minutes: String(date.getUTCMinutes()).padStart(2, '0'),
+    seconds: String(date.getUTCSeconds()).padStart(2, '0')
+  };
+};

package/DateTimePicker/components/DateTimePickerField/index.d.ts

@@ -0,0 +1 @@
+export * from './DateTimePickerField';

package/DateTimePicker/components/DateTimePickerField/index.js

@@ -0,0 +1 @@
+export * from './DateTimePickerField';

package/DateTimePicker/components/DateTimePickerField/types.d.ts

@@ -0,0 +1,8 @@
+import type { Placement } from '@floating-ui/react-dom';
+export interface DateTimePickerFieldProps {
+    value: string;
+    error?: boolean;
+    allowedPlacements?: Placement[];
+    zIndex?: number;
+    onChange: (day: string) => void;
+}

package/DateTimePicker/components/DateTimePickerField/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/DecadeView/DecadeView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { DecadeViewProps } from './types';
+export declare function DecadeView(props: DecadeViewProps): ReactElement;

package/DateTimePicker/components/DecadeView/DecadeView.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Columns } from '@pushwoosh/kit-helpers';
+import { format, parseStringToArray, addPeriod, setPeriod } from '../../helpers';
+import { CellBox } from '../../styles';
+import { PickerPlate } from '../PickerPlate';
+export function DecadeView(props) {
+  const {
+    activeDay,
+    value,
+    onChange,
+    onSelect
+  } = props;
+  const [activeDayYear] = parseStringToArray(activeDay || '');
+  const valueYear = +value;
+  const firstYear = valueYear - valueYear % 12;
+  return React.createElement(PickerPlate, {
+    onPrev: () => onChange(format(addPeriod(value, 'year', -12), 'year')),
+    onNext: () => onChange(format(addPeriod(value, 'year', 12), 'year'))
+  }, React.createElement(Columns, {
+    "$sizes": 4,
+    "$gap": Spacing.S1
+  }, Array.from({
+    length: 12
+  }).map((_, i) => {
+    const year = firstYear + i;
+    return React.createElement(CellBox, {
+      key: year,
+      height: "59px",
+      "$isActive": year === activeDayYear,
+      onClick: () => onSelect(format(setPeriod(value, 'year', year), 'year'))
+    }, year);
+  })));
+}

package/DateTimePicker/components/DecadeView/index.d.ts

@@ -0,0 +1 @@
+export * from './DecadeView';

package/DateTimePicker/components/DecadeView/index.js

@@ -0,0 +1 @@
+export * from './DecadeView';

package/DateTimePicker/components/DecadeView/types.d.ts

@@ -0,0 +1,6 @@
+export interface DecadeViewProps {
+    activeDay?: string;
+    value: string;
+    onChange: (value: string) => void;
+    onSelect: (value: string) => void;
+}

package/DateTimePicker/components/DecadeView/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/Input/Input.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { InputProps } from './types';
+export declare function Input(props: InputProps): ReactElement;

package/DateTimePicker/components/Input/Input.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { InputStyled } from './styles';
+export function Input(props) {
+  const {
+    width,
+    isDisabled,
+    ...rest
+  } = props;
+  return React.createElement(InputStyled, {
+    type: "text",
+    disabled: isDisabled,
+    style: {
+      width: width || '100%'
+    },
+    ...rest
+  });
+}

package/DateTimePicker/components/Input/index.d.ts

@@ -0,0 +1 @@
+export * from './Input';

package/DateTimePicker/components/Input/index.js

@@ -0,0 +1 @@
+export * from './Input';

package/DateTimePicker/components/Input/styles.d.ts

@@ -0,0 +1 @@
+export declare const InputStyled: import("styled-components").StyledComponent<"input", any, {}, never>;

package/DateTimePicker/components/Input/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+export const InputStyled = styled.input.withConfig({
+  displayName: "InputStyled",
+  componentId: "sc-17gtn04-0"
+})(["&:disabled{background-color:", ";}"], Color.FROZEN);

package/DateTimePicker/components/Input/types.d.ts

@@ -0,0 +1,11 @@
+import type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react';
+export interface InputProps {
+    value: string;
+    width?: number;
+    placeholder?: string;
+    isDisabled?: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+}

package/DateTimePicker/components/Input/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/Month/Month.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { MonthProps } from './types';
+export declare function Month(props: MonthProps): ReactElement;

package/DateTimePicker/components/Month/Month.js

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Columns } from '@pushwoosh/kit-helpers';
+import { format, firstDayOfWeek, parseStringToDate, differenceInDays, isSamePeriod, isInRange } from '../../helpers';
+import { CellBox, DayHeader } from '../../styles';
+export function Month(props) {
+  const {
+    month,
+    activeDay,
+    userInputDay,
+    minDate,
+    maxDate,
+    onDaySelect
+  } = props;
+  const [firstDayDate, days] = useMemo(() => {
+    const monthDate = parseStringToDate(month);
+    const firstDayOfMonth = new Date(monthDate);
+    firstDayOfMonth.setUTCDate(1);
+    const lastDayOfMonth = new Date(month);
+    lastDayOfMonth.setUTCMonth(lastDayOfMonth.getUTCMonth() + 1);
+    lastDayOfMonth.setUTCDate(0);
+    const firstDayOfFirstWeek = firstDayOfWeek(firstDayOfMonth);
+    const firstDayOfLastWeek = firstDayOfWeek(lastDayOfMonth);
+    const daysInCalendar = differenceInDays(firstDayOfLastWeek, firstDayOfFirstWeek) + 7;
+    return [firstDayOfFirstWeek, daysInCalendar];
+  }, [month]);
+  return React.createElement(Columns, {
+    "$sizes": 7,
+    "$gap": Spacing.S1
+  }, React.createElement(DayHeader, null, "Sun"), React.createElement(DayHeader, null, "Mon"), React.createElement(DayHeader, null, "Tue"), React.createElement(DayHeader, null, "Wed"), React.createElement(DayHeader, null, "Thu"), React.createElement(DayHeader, null, "Fri"), React.createElement(DayHeader, null, "Sat"), Array.from({
+    length: days
+  }).map((_, i) => {
+    const curDay = new Date(firstDayDate.getUTCFullYear(), firstDayDate.getUTCMonth(), firstDayDate.getUTCDate() + i);
+    const isDisabled = isInRange({
+      value: curDay,
+      minDate: minDate || undefined,
+      maxDate: maxDate || undefined
+    });
+    return React.createElement(CellBox, {
+      key: `${curDay}`,
+      "$isActive": !!activeDay && isSamePeriod(curDay, activeDay, 'day'),
+      "$isDisabled": isDisabled,
+      "$secondary": !isSamePeriod(month, curDay, 'month'),
+      "$secondActive": !!userInputDay && isSamePeriod(curDay, userInputDay, 'day'),
+      onClick: () => onDaySelect(format(curDay, 'year-month-day'))
+    }, curDay.getUTCDate());
+  }));
+}

package/DateTimePicker/components/Month/index.d.ts

@@ -0,0 +1 @@
+export * from './Month';

package/DateTimePicker/components/Month/index.js

@@ -0,0 +1 @@
+export * from './Month';

package/DateTimePicker/components/Month/types.d.ts

@@ -0,0 +1,8 @@
+export interface MonthProps {
+    month: string;
+    activeDay?: string;
+    userInputDay?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    onDaySelect: (day: string) => void;
+}

package/DateTimePicker/components/Month/types.js

@@ -0,0 +1 @@
+export {};

package/DateTimePicker/components/MonthView/MonthView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { MonthViewProps } from './types';
+export declare function MonthView(props: MonthViewProps): ReactElement;