@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/datetimePicker/TimePickerV2.js

@@ -1,222 +0,0 @@
-import { useState, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import OutsideClickHandler from 'react-outside-click-handler';
-import { useCustomPopper } from '@cashub/hooks';
-import { generateRange } from '@cashub/utils';
-import pad from './utils/pad';
-import { Input } from '../form';
-import scrollbar from '../styles/mixin/scrollbar';
-
-const LENGTH = 2;
-const PAD_STRING = '0';
-const HOUR_OPTIONS = generateRange(0, 23).map((value) => {
-  return pad(value, LENGTH, PAD_STRING);
-});
-const MINUTE_SECOND_OPTIONS = generateRange(0, 59).map((value) => {
-  return pad(value, LENGTH, PAD_STRING);
-});
-const EMPTY_TIME = {
-  hour: '',
-  minute: '',
-  second: '',
-};
-
-const getTimeFromSelected = (selected, allowEmpty) => {
-  let time = new Date(Date.parse(selected));
-
-  if (isNaN(time)) {
-    if (allowEmpty) {
-      return EMPTY_TIME;
-    }
-
-    time = new Date();
-  }
-
-  return {
-    hour: pad(time.getHours(), LENGTH, PAD_STRING),
-    minute: pad(time.getMinutes(), LENGTH, PAD_STRING),
-    second: pad(time.getSeconds(), LENGTH, PAD_STRING),
-  };
-};
-
-const TimePickerV2 = ({ selected, onSelect, allowEmpty = false }) => {
-  const [display, setDisplay] = useState(false);
-  const [targetElement, setTargetElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const [time, setTime] = useState(() => {
-    return getTimeFromSelected(selected, allowEmpty);
-  });
-
-  const { styles, attributes, state, update } = useCustomPopper(
-    targetElement,
-    popperElement,
-    { placement: 'bottom-start' },
-  );
-
-  const handleToggle = () => {
-    setDisplay(!display);
-    update();
-  };
-
-  const handleChange = (type, value) => {
-    const next = { ...time, [type]: value };
-
-    setTime(next);
-
-    if (
-      typeof onSelect === 'function' &&
-      next.hour &&
-      next.minute &&
-      next.second
-    ) {
-      onSelect(`${next.hour}:${next.minute}:${next.second}`);
-    }
-  };
-
-  // sync time picker state when selected value changes
-  useEffect(() => {
-    setTime(getTimeFromSelected(selected, allowEmpty));
-  }, [allowEmpty, selected]);
-
-  useEffect(() => {
-    if (display) {
-      const { childNodes } = popperElement;
-      childNodes.forEach((panel) => {
-        const selectedItem = panel.querySelector('[aria-selected="true"]');
-        if (panel.scrollHeight > panel.clientHeight) {
-          panel.scrollTop = selectedItem ? selectedItem.offsetTop : 0;
-        }
-      });
-    }
-  }, [display, popperElement]);
-
-  return (
-    <OutsideClickHandler
-      onOutsideClick={() => {
-        setDisplay(false);
-      }}
-    >
-      <>
-        <Input
-          ref={setTargetElement}
-          type='text'
-          readOnly
-          onClick={handleToggle}
-          value={
-            time.hour && time.minute && time.second
-              ? `${time.hour}:${time.minute}:${time.second}`
-              : ''
-          }
-        />
-        <Panel
-          ref={setPopperElement}
-          $display={display}
-          style={styles.popper}
-          {...attributes.popper}
-          placement={state && state.placement}
-        >
-          <Picker>
-            {HOUR_OPTIONS.map((option) => {
-              return (
-                <Option
-                  key={option}
-                  role='option'
-                  onClick={() => {
-                    handleChange('hour', option);
-                  }}
-                  selected={option === time.hour}
-                  aria-selected={option === time.hour}
-                >
-                  {option}
-                </Option>
-              );
-            })}
-          </Picker>
-          <Picker>
-            {MINUTE_SECOND_OPTIONS.map((option) => {
-              return (
-                <Option
-                  key={option}
-                  role='option'
-                  onClick={() => {
-                    handleChange('minute', option);
-                  }}
-                  selected={option === time.minute}
-                  aria-selected={option === time.minute}
-                >
-                  {option}
-                </Option>
-              );
-            })}
-          </Picker>
-          <Picker>
-            {MINUTE_SECOND_OPTIONS.map((option) => {
-              return (
-                <Option
-                  key={option}
-                  role='option'
-                  onClick={() => {
-                    handleChange('second', option);
-                  }}
-                  selected={option === time.second}
-                  aria-selected={option === time.second}
-                >
-                  {option}
-                </Option>
-              );
-            })}
-          </Picker>
-        </Panel>
-      </>
-    </OutsideClickHandler>
-  );
-};
-
-const Panel = styled.div`
-  display: flex;
-  visibility: ${({ $display }) => ($display ? 'visible' : 'hidden')};
-  width: 100%;
-  max-width: 360px;
-  background: var(--color-background1);
-  color: var(--font-on-background);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  z-index: 85;
-`;
-
-const Picker = styled.ul`
-  flex: 1;
-  text-align: center;
-  max-height: 144px;
-  overflow-y: auto;
-
-  ${scrollbar}
-
-  &:first-child {
-    border-top-left-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
-  }
-
-  &:not(:last-child) {
-    border-right: var(--border-width) solid var(--border-color);
-  }
-`;
-
-const Option = styled.li`
-  padding: var(--spacing-xs) 0;
-  background: var(--color-background1);
-  transition: background 0.3s;
-
-  &:hover {
-    background: var(--color-hover);
-  }
-
-  ${({ selected }) =>
-    selected &&
-    css`
-      background: var(--color-hover);
-    `}
-`;
-
-export default TimePickerV2;

package/src/datetimePicker/__stories__/DatePicker.stories.js

@@ -1,51 +0,0 @@
-import DatePicker from '../DatePicker';
-import { formatDate } from '@cashub/utils';
-import { useState } from 'react';
-
-const metadata = {
-  title: 'DatetimePicker/DatePicker',
-  component: DatePicker,
-  argTypes: {
-    onConfirm: {
-      description: 'A callback that tells the component to the selected date.',
-      control: {
-        action: 'onConfirm',
-      },
-      disabled: {
-        description: 'Disable datePicker component',
-      },
-    },
-  },
-};
-
-const Template = ({ onConfirm, ...args }) => {
-  const [data, setData] = useState({
-    start_time: formatDate(new Date()),
-  });
-
-  const handleChangeValue = (value, key) => {
-    const newData = { ...data };
-    newData[key] = value;
-
-    setData(newData);
-    onConfirm(value);
-  };
-
-  return (
-    <DatePicker
-      {...args}
-      onConfirm={(date) => {
-        handleChangeValue(date, 'start_time');
-      }}
-    />
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  selected: formatDate(new Date()),
-  disabled: false,
-};
-
-export default metadata;
-export { Default };

package/src/datetimePicker/__stories__/DatePickerV2.stories.js

@@ -1,73 +0,0 @@
-import { useState } from 'react';
-import { formatDate } from '@cashub/utils';
-import DatePicker from '../DatePickerV2';
-
-const metadata = {
-  title: 'DatetimePicker/DatePickerV2',
-  component: DatePicker,
-  argTypes: {
-    selected: {
-      description:
-        'selected date, can accept date object or string (format example: 2022-08-16 15:05:10 )',
-    },
-    fixedYear: {
-      description: 'Fixed year, accepts boolean values',
-    },
-    allowClear: {
-      description: 'Allow clear selected date or not',
-    },
-    maxDate: {
-      description:
-        'limit max date, can accept  JavaScript Date objects or string (format example: "2022-08-16 15:05:10")',
-      control: {
-        action: 'maxDate',
-      },
-    },
-    minDate: {
-      description:
-        'limit min date, can accept  JavaScript Date objects or string (format example: "2022-08-16 15:05:10")',
-      control: {
-        action: 'minDate',
-      },
-    },
-    onConfirm: {
-      description: 'A callback that tells the component to the selected date.',
-      control: {
-        action: 'onConfirm',
-      },
-    },
-    disabled: {
-      description: 'Disable datetimePicker component',
-    },
-  },
-};
-
-const Default = ({ maxDate, minDate, ...args }) => {
-  const { onConfirm } = args;
-  const [selected, setSelected] = useState(formatDate(new Date(), 'date'));
-
-  return (
-    <>
-      <DatePicker
-        selected={selected}
-        maxDate={maxDate}
-        minDate={minDate}
-        {...args}
-        onConfirm={(date) => {
-          setSelected(date);
-          onConfirm(date);
-        }}
-      />
-    </>
-  );
-};
-Default.args = {
-  fixedYear: false,
-  allowClear: false,
-  minDate: '2021-01-01',
-  maxDate: '2024-12-31',
-  disabled: false,
-};
-
-export default metadata;
-export { Default };

package/src/datetimePicker/__stories__/DatetimePicker.stories.js

@@ -1,74 +0,0 @@
-import DatetimePicker from '../DatetimePicker';
-import { formatDate } from '@cashub/utils';
-import { useState, useEffect } from 'react';
-
-const metadata = {
-  title: 'DatetimePicker/DatetimePicker',
-  component: DatetimePicker,
-  argTypes: {
-    selected: {
-      description: 'Current selected date',
-    },
-    onChange: {
-      description: 'A callback that return new selected date',
-    },
-    dateFormat: {
-      description: 'Date format',
-    },
-    minDate: {
-      description: 'Minimum date',
-    },
-    maxDate: {
-      description: 'Maximum date',
-    },
-    showTimeInput: {
-      description: 'Show time input',
-    },
-    readOnly: {
-      description: "Just read only, can't update value",
-    },
-    disabled: {
-      description: 'Disable datetimePicker component',
-    },
-    onBlur: {
-      description: 'A callback, called when the DatetimePicker panel is closed',
-    },
-    allowClear: {
-      description: 'Clear selected date',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange } = args;
-  const [selected, setSelected] = useState(args.selected);
-
-  useEffect(() => {
-    setSelected(args.selected);
-  }, [args.selected]);
-
-  return (
-    <>
-      <DatetimePicker
-        {...args}
-        onChange={(date) => {
-          setSelected(date ? formatDate(date) : '');
-          onChange();
-        }}
-        selected={selected}
-      />
-    </>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  showTimeInput: true,
-  readOnly: true,
-  selected: formatDate(new Date()),
-  disabled: false,
-  allowClear: false,
-};
-
-export default metadata;
-export { Default };

package/src/datetimePicker/__stories__/DatetimePickerV2.stories.js

@@ -1,91 +0,0 @@
-import { useState } from 'react';
-import { formatDate, datetimeTFormat } from '@cashub/utils';
-import DatetimePickerV2 from '../DatetimePickerV2';
-
-const metadata = {
-  title: 'DatetimePicker/DatetimePickerV2',
-  component: DatetimePickerV2,
-  argTypes: {
-    selected: {
-      description:
-        'selected date, can accept date object or string (format example: 2022-08-16 15:05:10 )',
-    },
-    fixedYear: {
-      description: 'Fixed year, accepts boolean values',
-    },
-    maxDate: {
-      description:
-        'limit max date, can accept  JavaScript Date objects or string (format example: "2022-08-16 15:05:10")',
-      control: {
-        action: 'maxDate',
-      },
-    },
-    minDate: {
-      description:
-        'limit min date, can accept  JavaScript Date objects or string (format example: "2022-08-16 15:05:10")',
-      control: {
-        action: 'minDate',
-      },
-    },
-    onConfirm: {
-      description: 'A callback that tells the component to the selected date.',
-      control: {
-        action: 'onConfirm',
-      },
-    },
-    onBlur: {
-      description:
-        'A callback, called when the DatetimePickerV2 panel is closed',
-    },
-    disabled: {
-      description: 'Disable datetimePicker component',
-    },
-  },
-};
-
-const Default = ({ maxDate, minDate, onConfirm, onBlur, ...args }) => {
-  const [data, setData] = useState({
-    startTime: formatDate(new Date().setHours(0, 0, 0, 0)),
-  });
-
-  const max = maxDate
-    ? formatDate(new Date(datetimeTFormat(maxDate)))
-    : undefined;
-  const min = minDate
-    ? formatDate(new Date(datetimeTFormat(minDate)))
-    : undefined;
-
-  const handleChangeValue = (value, key) => {
-    const newData = { ...data };
-    newData[key] = value;
-
-    setData(newData);
-    onConfirm(value);
-  };
-
-  return (
-    <>
-      <DatetimePickerV2
-        selected={data.startTime}
-        maxDate={max}
-        minDate={min}
-        {...args}
-        onConfirm={(date) => {
-          handleChangeValue(date, 'startTime');
-        }}
-        onBlur={() => {
-          onBlur();
-        }}
-      />
-    </>
-  );
-};
-Default.args = {
-  fixedYear: false,
-  minDate: new Date().setFullYear(2021),
-  maxDate: new Date().setFullYear(2024),
-  disabled: false,
-};
-
-export default metadata;
-export { Default };

package/src/datetimePicker/__stories__/DatetimePickerV3.stories.js

@@ -1,80 +0,0 @@
-import { useState, useEffect } from 'react';
-import { formatDate } from '@cashub/utils';
-import DatetimePickerV3 from '../DatetimePickerV3';
-
-const metadata = {
-  title: 'DatetimePicker/DatetimePickerV3',
-  component: DatetimePickerV3,
-  argTypes: {
-    selected: {
-      description: 'Current selected date',
-    },
-    onChange: {
-      description: 'A callback that return new selected date',
-    },
-    dateFormat: {
-      description: 'Date format',
-    },
-    minDate: {
-      description: 'Minimum date',
-    },
-    maxDate: {
-      description: 'Maximum date',
-    },
-    showTimeInput: {
-      description: 'Show time input',
-    },
-    readOnly: {
-      description: "Just read only, can't update value",
-    },
-    disabled: {
-      description: 'Disable datetimePicker component',
-    },
-    onBlur: {
-      description:
-        'A callback, called when the DatetimePickerV3 panel is closed',
-    },
-    allowClear: {
-      description: 'Clear selected date',
-    },
-    allowTimeInputEmpty: {
-      description:
-        'Allow the time input to remain empty when showTimeInput is true and no date has been selected yet',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange } = args;
-  const [selected, setSelected] = useState(args.selected);
-
-  useEffect(() => {
-    setSelected(args.selected);
-  }, [args.selected]);
-
-  return (
-    <>
-      <DatetimePickerV3
-        {...args}
-        onChange={(date) => {
-          setSelected(date ? formatDate(date) : '');
-          onChange(date);
-        }}
-        selected={selected}
-      />
-    </>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  showTimeInput: true,
-  readOnly: true,
-  selected: formatDate(new Date()),
-  disabled: false,
-  allowClear: false,
-  allowTimeInputEmpty: false,
-};
-
-export default metadata;
-export { Default };

package/src/datetimePicker/__stories__/TimeInput.stories.js

@@ -1,67 +0,0 @@
-import { useState, useEffect } from 'react';
-import moment from 'moment';
-import { formatDate } from '@cashub/utils';
-import TimeInput from '../TimeInput';
-
-const metadata = {
-  title: 'DatetimePicker/TimeInput',
-  component: TimeInput,
-  argTypes: {
-    format: {
-      description: 'format',
-    },
-    allowEmpty: {
-      description: 'The input is allowed to be empty',
-    },
-    showSecond: {
-      description: 'Can show second',
-    },
-    onChange: {
-      description: 'A callback that return new selected time',
-    },
-    onClose: {
-      description: 'A callback, called when the TimePicker panel is closed',
-    },
-    disabled: {
-      description: 'Disable TimeInput component',
-    },
-  },
-};
-
-const Template = (args) => {
-  const { onChange, onClose } = args;
-  const [selected, setSelected] = useState(args.value);
-
-  useEffect(() => {
-    setSelected(args.value);
-  }, [args.value]);
-
-  return (
-    <>
-      <TimeInput
-        {...args}
-        onChange={(value) => {
-          if (!value) return;
-          setSelected(value);
-          onChange();
-        }}
-        value={moment(selected, 'HH:mm:ss')}
-        onClose={() => {
-          onClose();
-        }}
-      />
-    </>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  allowEmpty: false,
-  showSecond: true,
-  format: 'HH:mm:ss',
-  value: formatDate(Date.now(), 'time'),
-  disabled: false,
-};
-
-export default metadata;
-export { Default };

package/src/datetimePicker/__stories__/TimePicker.stories.js

@@ -1,29 +0,0 @@
-import TimePicker from '../TimePicker';
-
-const metadata = {
-  title: 'DatetimePicker/TimePicker',
-  component: TimePicker,
-  argTypes: {
-    labelName: {
-      description: 'label text',
-    },
-    value: {
-      description: 'Current time value',
-    },
-    showSecond: {
-      description: 'Can show second',
-    },
-    onChange: {
-      description: 'A callback that return new selected time',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <TimePicker {...args} />;
-};
-
-const Default = Template.bind({});
-
-export default metadata;
-export { Default };

package/src/datetimePicker/__stories__/TimePickerV2.stories.js

@@ -1,22 +0,0 @@
-import { fn } from '@storybook/test';
-import TimePickerV2 from '../TimePickerV2';
-
-const metadata = {
-  title: 'DatetimePicker/TimePickerV2',
-  component: TimePickerV2,
-  args: { onSelect: fn() },
-  argTypes: {
-    onSelect: {
-      description: 'A callback that return new selected time',
-    },
-  },
-};
-
-const Template = (args) => {
-  return <TimePickerV2 {...args} />;
-};
-
-const Default = Template.bind({});
-
-export default metadata;
-export { Default };