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

package/src/datetimePicker/subComponent/Accordion.js

@@ -1,407 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { MdArrowBackIosNew, MdArrowForwardIos } from 'react-icons/md';
-import { IoMdArrowDropup } from 'react-icons/io';
-import styled, { css } from 'styled-components';
-import { formatDate, generateRange } from '@cashub/utils';
-import scrollbar from '../../styles/mixin/scrollbar';
-
-const monthArr = [
-  { number: '01', name: 'Jan' },
-  { number: '02', name: 'Feb' },
-  { number: '03', name: 'Mar' },
-  { number: '04', name: 'Apr' },
-  { number: '05', name: 'May' },
-  { number: '06', name: 'Jun' },
-  { number: '07', name: 'Jul' },
-  { number: '08', name: 'Aug' },
-  { number: '09', name: 'Sep' },
-  { number: '10', name: 'Oct' },
-  { number: '11', name: 'Nov' },
-  { number: '12', name: 'Dec' },
-];
-
-const Accordion = ({
-  type,
-  handleDisplayAccordionContent,
-  handleChangeTitle,
-  setCurrentDisplayType,
-  currentDisplayType,
-  selectedYear,
-  setSelectedYear,
-  selectedMonth,
-  setSelectedMonth,
-  fixedYear,
-  minDate,
-  maxDate,
-  selectedDay,
-}) => {
-  const bodyRef = useRef(null);
-  const selectedYearRef = useRef(null);
-  const [display, setDisplay] = useState(false);
-  const [yearArr, setYearArr] = useState([]);
-
-  const minYear = minDate ? new Date(minDate).getFullYear() : 1;
-  const minMonth = minDate ? new Date(minDate).getMonth() : null;
-  const maxYear = maxDate ? new Date(maxDate).getFullYear() : null;
-  const maxMonth = maxDate ? new Date(maxDate).getMonth() : null;
-
-  const accordionTitle = () => {
-    if (type === 'year') {
-      return selectedYear ? selectedYear : new Date().getFullYear();
-    } else if (type === 'month') {
-      return monthArr[selectedMonth ? selectedMonth : new Date().getMonth()]
-        ?.name;
-    }
-  };
-  const handleChangeMonth = useCallback(
-    (month) => {
-      setSelectedMonth(month);
-      setCurrentDisplayType(null);
-    },
-    [setCurrentDisplayType, setSelectedMonth],
-  );
-
-  const handleChangeYear = useCallback(
-    (year) => {
-      setSelectedYear(year);
-      setCurrentDisplayType(null);
-    },
-    [setCurrentDisplayType, setSelectedYear],
-  );
-
-  const handleYearItemDisable = useCallback(
-    (year) => {
-      if (minDate !== undefined && maxDate !== undefined) {
-        return !(minYear <= year && year <= maxYear);
-      }
-      if (minDate) {
-        return minYear > year;
-      } else if (maxDate) {
-        return maxYear < year;
-      }
-
-      return false;
-    },
-    [minYear, maxYear, maxDate, minDate],
-  );
-
-  const handleMonthItemDisable = useCallback(
-    (month) => {
-      const date = formatDate(new Date(selectedYear, month, selectedDay));
-
-      if (minDate !== undefined && maxDate !== undefined) {
-        return !(minDate <= date && date <= maxDate);
-      } else if (minDate) {
-        return !(minDate <= date);
-      } else if (maxDate) {
-        return !(date <= maxDate);
-      }
-      return false;
-    },
-    [maxDate, minDate, selectedYear, selectedDay],
-  );
-
-  const handleDisableArrow = useCallback(
-    (arrowType) => {
-      if (type === 'year') {
-        if (arrowType === 'previous') {
-          return minYear > selectedYear - 1;
-        } else if (arrowType === 'next') {
-          if (maxYear) {
-            return maxYear < selectedYear + 1;
-          }
-
-          return false;
-        }
-      } else if (type === 'month') {
-        const date =
-          arrowType === 'previous'
-            ? formatDate(
-                new Date(
-                  selectedYear,
-                  selectedMonth - 1 < 0 ? 11 : selectedMonth - 1,
-                  1,
-                ),
-              )
-            : formatDate(
-                new Date(
-                  selectedYear,
-                  selectedMonth + 1 > 11 ? 0 : selectedMonth + 1,
-                  1,
-                ),
-              );
-
-        if (fixedYear) {
-          if (fixedYear && !minDate && !maxDate) {
-            return false;
-          }
-        } else if (!minDate && !maxDate) {
-          return false;
-        } else {
-          const minDate1st = formatDate(new Date(minYear, minMonth, 1));
-          const maxDate1st = formatDate(new Date(maxYear, maxMonth, 1));
-
-          if (minDate && !maxDate) {
-            return !(minDate1st <= date);
-          } else if (maxDate && !minDate) {
-            return !(maxDate1st >= date);
-          } else if (minDate && maxDate) {
-            return !(minDate1st <= date && maxDate1st >= date);
-          }
-        }
-      }
-    },
-    [
-      minDate,
-      selectedYear,
-      selectedMonth,
-      minYear,
-      type,
-      fixedYear,
-      maxDate,
-      maxYear,
-      maxMonth,
-      minMonth,
-    ],
-  );
-
-  const MonthContent = useMemo(() => {
-    return monthArr.map((month, index) => (
-      <Item
-        selected={selectedMonth === index}
-        onClick={() => {
-          handleChangeMonth(index);
-        }}
-        key={month.number}
-        disabled={handleMonthItemDisable(index)}
-      >
-        {month.name}
-      </Item>
-    ));
-  }, [handleChangeMonth, selectedMonth, handleMonthItemDisable]);
-
-  const YearContent = useMemo(() => {
-    return yearArr.map((year, index) => (
-      <Item
-        ref={selectedYear === year ? selectedYearRef : null}
-        selected={selectedYear === year}
-        onClick={() => {
-          handleChangeYear(year);
-        }}
-        key={index}
-        disabled={handleYearItemDisable(year)}
-      >
-        {year}
-      </Item>
-    ));
-  }, [selectedYear, yearArr, handleChangeYear, handleYearItemDisable]);
-
-  useEffect(() => {
-    if (!fixedYear) {
-      const start = selectedYear - 16 ? selectedYear - 16 : 1;
-      const end = selectedYear + 16;
-      const yearRange = generateRange(start, end);
-      setYearArr(yearRange);
-    }
-  }, [fixedYear, selectedYear]);
-
-  const scroll = useCallback(() => {
-    if (bodyRef?.current && selectedYearRef?.current) {
-      const body = bodyRef.current;
-
-      if (body.scrollTop < 200) {
-        body.removeEventListener('scroll', scroll);
-        setTimeout(() => {
-          body.scrollTo({
-            top: body.scrollTop + 200,
-          });
-        }, 400);
-        setTimeout(() => {
-          setYearArr((previousParams) => {
-            body.addEventListener('scroll', scroll);
-            const addYearRange = generateRange(
-              previousParams[0] - 15,
-              previousParams[0] - 1,
-            );
-            return [...addYearRange, ...previousParams];
-          });
-        }, 400);
-      } else if (body.scrollTop + body.clientHeight >= body.scrollHeight) {
-        body.removeEventListener('scroll', scroll);
-
-        setTimeout(() => {
-          setYearArr((previousParams) => {
-            body.addEventListener('scroll', scroll);
-            const addYearRange = generateRange(
-              previousParams[previousParams.length - 1] + 1,
-              previousParams[previousParams.length - 1] + 15,
-            );
-            return [...previousParams, ...addYearRange];
-          });
-        }, 400);
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    bodyRef.current.addEventListener('scroll', scroll);
-  }, [scroll]);
-
-  useEffect(() => {
-    setDisplay(currentDisplayType === type);
-  }, [currentDisplayType, type]);
-
-  useEffect(() => {
-    if (
-      display &&
-      bodyRef?.current &&
-      currentDisplayType === 'year' &&
-      selectedYearRef?.current
-    ) {
-      bodyRef.current.scrollTo({
-        top: selectedYearRef.current.offsetTop - bodyRef.current.offsetTop,
-      });
-    }
-  }, [currentDisplayType, display]);
-  return (
-    <>
-      <Header>
-        <IconButton
-          onClick={() => {
-            handleChangeTitle('previous');
-          }}
-          disabled={handleDisableArrow('previous')}
-        >
-          <MdArrowBackIosNew />
-        </IconButton>
-        <div>{accordionTitle()}</div>
-        <IconButton
-          onClick={() => {
-            handleChangeTitle('next');
-          }}
-          disabled={handleDisableArrow('next')}
-        >
-          <MdArrowForwardIos />
-        </IconButton>
-
-        <IconButton
-          $display={display}
-          right
-          onClick={handleDisplayAccordionContent}
-        >
-          <IoMdArrowDropup />
-        </IconButton>
-      </Header>
-      <Body fixedYear={!fixedYear} ref={bodyRef} type={type} $display={display}>
-        {type === 'month' && MonthContent}
-        {type === 'year' && YearContent}
-      </Body>
-    </>
-  );
-};
-
-const IconButton = styled.button`
-  width: 36px;
-  height: 36px;
-  background: var(--color-background1);
-  border: none;
-  color: var(--font-on-background);
-  padding: 0;
-  transition: 0.3s;
-
-  &:hover {
-    color: var(--color-primary);
-  }
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      opacity: 0.5;
-
-      &:hover {
-        color: var(--font-on-background);
-      }
-    `}
-
-  ${({ right, $display }) =>
-    right &&
-    `
-    position: absolute;
-    right: 0;
-    ${
-      $display &&
-      css`
-        transform: rotate(180deg);
-      `
-    }
-  `}
-`;
-
-const Header = styled.div`
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  position: relative;
-
-  > div {
-    width: 72px;
-    line-height: 36px;
-    text-align: center;
-  }
-
-  &::before {
-    content: '';
-    border-bottom: var(--border-width) solid var(--border-color);
-    position: absolute;
-    width: 300px;
-    bottom: 0;
-    z-index: 1;
-    right: -16px;
-  }
-`;
-
-const Body = styled.div`
-  flex-wrap: wrap;
-  height: 0;
-  width: 100%;
-  display: ${({ $display }) => ($display ? 'flex' : 'none')};
-  ${({ type, fixedYear }) =>
-    type &&
-    css`
-      min-height: ${type === 'year' ? '197' : fixedYear ? '144' : '192'}px};
-      transition: .3s;
-      
-      ${
-        type === 'year' &&
-        css`
-          overflow-y: scroll;
-          gap: 12px 0;
-          ${scrollbar}
-        `
-      };
-  `}
-
-  transition: 0.3s;
-`;
-
-const Item = styled.button`
-  width: 84px;
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
-  border-radius: var(--border-radius-s);
-  padding: 0;
-  border: none;
-  color: var(--font-on-background);
-  background: var(--color-background1);
-
-  &:hover {
-    ${({ disabled }) => !disabled && 'background: var(--color-primary)'}
-  }
-
-  ${({ disabled }) => disabled && 'color: var(--font-on-mute)'}
-
-  ${({ selected }) => selected && 'background: var(--color-hover)'}
-`;
-
-export default Accordion;

package/src/datetimePicker/subComponent/CustomTimeInput.js

@@ -1,48 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const CustomTimeInput = ({ date, onCustomChange }) => {
-  const [time, setTime] = useState('');
-
-  const changeDate = () => {
-    let hh = '';
-    let mm = '';
-    let ss = '';
-
-    if (time.indexOf(':') !== -1) {
-      [hh, mm, ss] = time.split(':');
-    } else {
-      hh = time.substring(0, 2);
-      mm = time.substring(2, 4);
-      ss = time.substring(4, 6);
-    }
-
-    const targetDate = date instanceof Date && !isNaN(date) ? date : new Date();
-    targetDate.setHours(Number(hh) || 0, Number(mm) || 0, Number(ss) || 0);
-    onCustomChange(targetDate);
-  };
-
-  useEffect(() => {
-    const defaultTime =
-      date instanceof Date && !isNaN(date)
-        ? // Getting time from Date beacuse `value` comes here without seconds
-          date.toLocaleTimeString('it-IT')
-        : '';
-
-    setTime(defaultTime);
-  }, [date]);
-
-  return (
-    <input
-      value={time}
-      onBlur={changeDate}
-      onKeyUp={(event) => {
-        if (event.key === 'Enter') {
-          changeDate();
-        }
-      }}
-      onChange={(event) => setTime(event.target.value)}
-    />
-  );
-};
-
-export default CustomTimeInput;

package/src/datetimePicker/subComponent/DateTimePickerContext.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const DateTimePicker = createContext(null);
-
-export default DateTimePicker;

package/src/datetimePicker/utils/GMTDate.js

@@ -1,13 +0,0 @@
-import { formatDate, datetimeTFormat } from '@cashub/utils';
-
-const GMTDate = (date) => {
-  if (!date) return;
-
-  let newDate = new Date(datetimeTFormat(date));
-  newDate.setTime(newDate.getTime() + newDate.getTimezoneOffset() * 60 * 1000);
-  newDate = formatDate(newDate);
-
-  return newDate;
-};
-
-export default GMTDate;

package/src/datetimePicker/utils/pad.js

@@ -1,9 +0,0 @@
-const pad = (value, length, padString) => {
-  if (!length || !padString) {
-    return value;
-  }
-
-  return String(value).padStart(length, padString);
-};
-
-export default pad;

package/src/datetimePicker/utils/toUTC0.js

@@ -1,10 +0,0 @@
-const toUTC0 = (date) => {
-  if (!date) return;
-
-  const newDate = new Date(date);
-  newDate.setTime(newDate.getTime() + newDate.getTimezoneOffset() * 60 * 1000);
-
-  return newDate;
-};
-
-export default toUTC0;

package/src/descriptionList/DescriptionDetail.js

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-const DescriptionDetail = styled.dd`
-  font-size: var(--font-h3);
-  line-height: 1.25;
-  font-weight: bold;
-  color: var(--font-on-background);
-  word-break: break-all;
-  white-space: pre-line;
-
-  > a {
-    color: var(--color-primary);
-  }
-
-  ${({ fontNormal }) => fontNormal && 'font-weight: normal;'}
-`;
-
-export default DescriptionDetail;

package/src/descriptionList/DescriptionList.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const DescriptionList = styled.dl`
-  flex: 1;
-
-  &:not(:last-child) {
-    border-right: var(--border-width) solid var(--border-color);
-    margin-right: var(--spacing);
-    padding-right: var(--spacing);
-  }
-
-  ${({ invisible }) => invisible && 'visibility: hidden'}
-`;
-
-export default DescriptionList;

package/src/descriptionList/DescriptionTerm.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const DescriptionTerm = styled.dt`
-  font-size: var(--font-h3);
-  color: var(--font-on-mute);
-  padding-bottom: var(--spacing-xs);
-`;
-
-export default DescriptionTerm;

package/src/descriptionList/__stories__/DescriptionDetail.stories.js

@@ -1,39 +0,0 @@
-import FlexContainer from '../../container/FlexContainer';
-import DescriptionList from '../DescriptionList';
-import DescriptionTerm from '../DescriptionTerm';
-import DescriptionDetail from '../DescriptionDetail';
-
-const metadata = {
-  title: 'DescriptionList/DescriptionDetail',
-  component: DescriptionDetail,
-  argTypes: {
-    fontNormal: {
-      description: 'font normal<br>(if fontNormal===true,font-weight: normal)',
-    },
-  },
-};
-
-const Template = (args) => (
-  <FlexContainer>
-    <DescriptionList>
-      <DescriptionTerm>Version</DescriptionTerm>
-      <DescriptionDetail {...args}>2.0</DescriptionDetail>
-    </DescriptionList>
-    <DescriptionList>
-      <DescriptionTerm>Size</DescriptionTerm>
-      <DescriptionDetail {...args}>12</DescriptionDetail>
-    </DescriptionList>
-    <DescriptionList>
-      <DescriptionTerm>UpdatedTime</DescriptionTerm>
-      <DescriptionDetail {...args}>2022-05-17 04:55:32</DescriptionDetail>
-    </DescriptionList>
-  </FlexContainer>
-);
-
-const Default = Template.bind({});
-Default.args = {
-  fontNormal: false,
-};
-
-export default metadata;
-export { Default };

package/src/descriptionList/__stories__/DescriptionList.stories.js

@@ -1,39 +0,0 @@
-import FlexContainer from '../../container/FlexContainer';
-import DescriptionList from '../DescriptionList';
-import DescriptionTerm from '../DescriptionTerm';
-import DescriptionDetail from '../DescriptionDetail';
-
-const metadata = {
-  title: 'DescriptionList/DescriptionList',
-  component: DescriptionList,
-  argTypes: {
-    invisible: {
-      description: 'DescriptionList can be hidden',
-    },
-  },
-};
-
-const Template = (args) => (
-  <FlexContainer>
-    <DescriptionList {...args}>
-      <DescriptionTerm>Version</DescriptionTerm>
-      <DescriptionDetail>2.0</DescriptionDetail>
-    </DescriptionList>
-    <DescriptionList>
-      <DescriptionTerm>Size</DescriptionTerm>
-      <DescriptionDetail>12</DescriptionDetail>
-    </DescriptionList>
-    <DescriptionList>
-      <DescriptionTerm>UpdatedTime</DescriptionTerm>
-      <DescriptionDetail>2022-05-17 04:55:32</DescriptionDetail>
-    </DescriptionList>
-  </FlexContainer>
-);
-
-const Default = Template.bind({});
-Default.args = {
-  invisible: false,
-};
-
-export default metadata;
-export { Default };

package/src/descriptionList/__stories__/DescriptionTerm.stories.js

@@ -1,13 +0,0 @@
-import DescriptionTerm from '../DescriptionTerm';
-
-const metadata = {
-  title: 'DescriptionList/DescriptionTerm',
-  component: DescriptionTerm,
-};
-
-const Default = () => {
-  return <DescriptionTerm>Version</DescriptionTerm>;
-};
-
-export default metadata;
-export { Default };

package/src/descriptionList/__test__/DescriptionDetail.test.js

@@ -1,13 +0,0 @@
-import { screen, render } from '@testing-library/react';
-import DescriptionDetail from '../DescriptionDetail';
-
-test('render DescriptionDetail', () => {
-  render(<DescriptionDetail fontNormal>test</DescriptionDetail>);
-
-  const descriptionDetail = screen.getByRole('definition');
-
-  expect(descriptionDetail).toBeInTheDocument();
-  expect(descriptionDetail).toHaveStyle({
-    fontWeight: 'normal',
-  });
-});

package/src/descriptionList/__test__/DescriptionList.test.js

@@ -1,12 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import DescriptionList from '../DescriptionList';
-
-test('render DescriptionList', () => {
-  render(<DescriptionList invisible>test</DescriptionList>);
-  const descriptionList = screen.getByText('test');
-  expect(descriptionList).toBeInTheDocument();
-  expect(descriptionList).toHaveStyle({
-    visibility: 'hidden',
-  });
-  expect(descriptionList).not.toBeVisible();
-});

package/src/descriptionList/__test__/DescriptionTerm.test.js

@@ -1,7 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import DescriptionTerm from '../DescriptionTerm';
-
-test('render DescriptionTerm', () => {
-  render(<DescriptionTerm>test</DescriptionTerm>);
-  expect(screen.getByText('test')).toBeInTheDocument();
-});

package/src/descriptionList/index.js

@@ -1,3 +0,0 @@
-export { default as DescriptionDetail } from './DescriptionDetail';
-export { default as DescriptionList } from './DescriptionList';
-export { default as DescriptionTerm } from './DescriptionTerm';