@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/datetimePicker/subComponent/Accordion.js

@@ -0,0 +1,407 @@
+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

@@ -0,0 +1,48 @@
+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

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

package/src/datetimePicker/utils/GMTDate.js

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,7 @@
+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

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

package/src/divider/Divider.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const Divider = styled.hr`
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: var(--spacing-s);
+
+  ${({ noMarginX }) => {
+    return (
+      noMarginX &&
+      `
+        margin-left: 0;
+        margin-right: 0;
+      `
+    );
+  }}
+
+  ${({ dashed }) => dashed && 'border-top-style: dashed;'}
+`;
+
+export default Divider;