@tecsinapse/react-core 1.21.2 → 1.21.3

package/src/components/molecules/Calendar/Calendar.tsx

@@ -1,159 +0,0 @@
-import { add, format, getWeeksInMonth, set } from 'date-fns';
-import * as React from 'react';
-import { View, ViewProps } from 'react-native';
-import { Icon } from '../../atoms/Icon';
-import { Text, TextProps } from '../../atoms/Text';
-import {
-  Content,
-  Control,
-  getCapitalizedTextComponent,
-  TitleContainer,
-} from './styled';
-import { Weekdays, MonthWeek } from './components';
-
-export type SelectionType = 'range' | 'day';
-
-export type DateRange = { lowest: Date; highest?: Date };
-
-export type Value<T extends SelectionType> = T extends 'range'
-  ? DateRange
-  : Date;
-
-export interface CalendarProps<T extends SelectionType> extends ViewProps {
-  TextComponent?: React.FC<TextProps>;
-  year?: number;
-  month?: number;
-  onChange?: (value?: Value<T>) => void | never;
-  type?: T;
-  value?: Value<T>;
-  locale?: Locale;
-}
-
-const now = set(new Date(), {
-  date: 1,
-  hours: 0,
-  minutes: 0,
-  seconds: 0,
-  milliseconds: 0,
-});
-
-function dayOfWeekFromWeekStart(dayOfWeek: number, weekStartsOn: number) {
-  return dayOfWeek === 0 ? 0 : dayOfWeek - weekStartsOn;
-}
-
-function Calendar<T extends SelectionType>({
-  TextComponent = Text,
-  year: _year,
-  month: _month,
-  value,
-  type,
-  onChange,
-  locale,
-  ...rest
-}: CalendarProps<T>): JSX.Element {
-  const _referenceDate = React.useMemo(
-    () =>
-      _year && _month
-        ? new Date(_year, _month, 1, 0, 0, 0, 0)
-        : _month
-        ? new Date(now.getFullYear(), _month, 1, 0, 0, 0, 0)
-        : now,
-    [_year, _month]
-  );
-
-  const [referenceDate, setReferenceDate] = React.useState(_referenceDate);
-
-  const startingWeekDay = React.useMemo(
-    () =>
-      dayOfWeekFromWeekStart(
-        referenceDate.getDay(),
-        locale?.options?.weekStartsOn ?? 0
-      ),
-    [referenceDate, locale]
-  );
-
-  const weeksInMonth = React.useMemo(
-    () =>
-      getWeeksInMonth(referenceDate, {
-        weekStartsOn: locale?.options?.weekStartsOn ?? 0,
-      }),
-    [referenceDate, locale]
-  );
-
-  const Capitalized = React.useMemo(
-    () => getCapitalizedTextComponent(TextComponent),
-    [TextComponent]
-  );
-
-  const calendar = React.useMemo(
-    () =>
-      [...Array(weeksInMonth).keys()].map(week =>
-        [...Array(7).keys()].map(weekDayIndex =>
-          add(referenceDate, {
-            days: 6 * week + week + weekDayIndex - startingWeekDay,
-          })
-        )
-      ),
-    [weeksInMonth, startingWeekDay, referenceDate]
-  );
-
-  const handlePressNext = React.useCallback(() => {
-    setReferenceDate(add(referenceDate, { months: 1 }));
-  }, [referenceDate, setReferenceDate]);
-
-  const handlePressPrev = React.useCallback(() => {
-    setReferenceDate(add(referenceDate, { months: -1 }));
-  }, [referenceDate, setReferenceDate]);
-
-  return (
-    <View {...rest}>
-      <TitleContainer>
-        <Control onPress={handlePressPrev} align={'start'} isLeft>
-          <Icon
-            name={'chevron-left'}
-            type={'material-community'}
-            size={'kilo'}
-            colorVariant={'secondary'}
-            colorTone={'medium'}
-          />
-        </Control>
-        <Capitalized
-          colorVariant={'secondary'}
-          colorTone={'xdark'}
-          fontWeight={'bold'}
-        >
-          {format(referenceDate, 'MMMM yyyy', { locale })}
-        </Capitalized>
-        <Control onPress={handlePressNext} align={'end'} isRright>
-          <Icon
-            name={'chevron-right'}
-            type={'material-community'}
-            size={'kilo'}
-            colorVariant={'secondary'}
-            colorTone={'medium'}
-          />
-        </Control>
-      </TitleContainer>
-      <Content>
-        <Weekdays
-          locale={locale}
-          calendar={calendar}
-          Capitalized={Capitalized}
-        />
-        {calendar.map((week, index) => (
-          <MonthWeek
-            week={week}
-            type={type}
-            value={value}
-            key={`week-${index}`}
-            onChange={onChange}
-            TextComponent={TextComponent}
-            referenceDate={referenceDate}
-          />
-        ))}
-      </Content>
-    </View>
-  );
-}
-
-export default Calendar;

package/src/components/molecules/Calendar/components/MonthWeek.tsx

@@ -1,139 +0,0 @@
-import React from 'react';
-import { compareAsc as compare, isSameDay } from 'date-fns';
-import { Cell, Selected, Week } from '../styled';
-import { Value, DateRange, SelectionType } from '../Calendar';
-import { TextProps } from '@tecsinapse/react-core';
-
-interface IMonthWeek<T extends SelectionType> {
-  TextComponent: React.FC<TextProps>;
-  /** any as workaround for TS type mismatching */
-  onChange?: (value?: any) => void | never;
-  type?: T;
-  value?: Value<T>;
-  week: Date[];
-  referenceDate: Date;
-}
-
-const MonthWeek = <T extends SelectionType>({
-  week,
-  referenceDate,
-  type,
-  value,
-  TextComponent,
-  onChange,
-}: IMonthWeek<T>) => {
-  const checkIfIsBetween = React.useCallback(
-    (date: Date, _value?: Value<T>) => {
-      if (type !== 'range' || !_value) return false;
-      else {
-        const { lowest, highest } = _value as DateRange;
-        if (!highest) return false;
-        return compare(lowest, date) <= 0 && compare(highest, date) >= 0;
-      }
-    },
-    [type]
-  );
-
-  const checkIfIsSelected = React.useCallback(
-    (date: Date, _value?: Value<T>) => {
-      if (!_value) return false;
-      else if (type === 'range' && _value) {
-        const { lowest, highest } = _value as DateRange;
-        return (
-          isSameDay(lowest, date) ||
-          (highest ? isSameDay(highest, date) : false)
-        );
-      } else {
-        return isSameDay(_value as Date, date);
-      }
-    },
-    [type]
-  );
-
-  const handlePressCell = React.useCallback(
-    (date: Date, _value?: Value<T>) => () => {
-      if (type === 'day') {
-        onChange?.(date as never);
-      } else if (!_value) {
-        onChange?.({ lowest: date } as never);
-      } else {
-        let newValue;
-        const { lowest, highest } = _value as DateRange;
-
-        if (!highest) {
-          if (compare(date, lowest) === -1) {
-            newValue = { lowest: date, highest: undefined };
-          } else if (compare(date, lowest) === 0) {
-            newValue = undefined;
-          } else {
-            newValue = { lowest: lowest, highest: date };
-          }
-        } else {
-          if (compare(date, lowest) === -1) {
-            newValue = { lowest: date, highest: undefined };
-          } else if (compare(date, lowest) === 0) {
-            newValue = undefined;
-          } else {
-            if (compare(date, highest) === -1) {
-              newValue = { lowest: lowest, highest: date };
-            } else if (compare(date, highest) === 0) {
-              newValue = { lowest: lowest, highest: undefined };
-            } else {
-              newValue = { lowest: lowest, highest: date };
-            }
-          }
-        }
-
-        onChange?.(newValue as never);
-      }
-    },
-    [onChange, type]
-  );
-
-  return (
-    <Week>
-      {week.map((date, index) => {
-        const isSelected = checkIfIsSelected(date, value);
-        const isBetween = checkIfIsBetween(date, value);
-
-        let isRangeStart, isRangeEnd;
-
-        if (type === 'range' && value) {
-          const { lowest, highest } = value as DateRange;
-          isRangeStart = highest && isSameDay(lowest, date);
-          isRangeEnd = !!highest && isSameDay(highest, date);
-        } else {
-          isRangeStart = false;
-          isRangeEnd = false;
-        }
-
-        const colorTone = isSelected
-          ? 'xlight'
-          : date.getMonth() === referenceDate.getMonth()
-          ? 'xdark'
-          : 'light';
-
-        return (
-          <Cell
-            key={date.getDate()}
-            selected={isSelected}
-            highlighted={isBetween}
-            isLineEnd={index === 6}
-            isLineStart={index === 0}
-            isRangeStart={isRangeStart}
-            isRangeEnd={isRangeEnd}
-            onPress={handlePressCell(date, value)}
-          >
-            <Selected selected={isSelected} pointerEvents={'none'}>
-              <TextComponent colorVariant={'secondary'} colorTone={colorTone}>
-                {date.getDate()}
-              </TextComponent>
-            </Selected>
-          </Cell>
-        );
-      })}
-    </Week>
-  );
-};
-
-export default React.memo(MonthWeek);

package/src/components/molecules/Calendar/components/Weekdays.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Cell, Week } from '../styled';
-import { format } from 'date-fns';
-
-interface IWeekdays {
-  calendar: Date[][];
-  locale?: Locale;
-  Capitalized: React.ElementType;
-}
-
-const Weekdays = ({ calendar, locale, Capitalized }: IWeekdays) => {
-  return (
-    <Week>
-      {calendar[0].map(date => (
-        <Cell
-          key={date.getDate()}
-          selected={false}
-          highlighted={false}
-          isLineEnd={false}
-          isLineStart={false}
-          isRangeStart={false}
-          isRangeEnd={false}
-          pointerEvents={'none'}
-        >
-          <Capitalized colorVariant={'secondary'} colorTone={'medium'}>
-            {format(date, 'EEE', { locale }).slice(0, 3)}
-          </Capitalized>
-        </Cell>
-      ))}
-    </Week>
-  );
-};
-
-export default React.memo(Weekdays);

package/src/components/molecules/Calendar/components/index.ts

@@ -1,2 +0,0 @@
-export { default as Weekdays } from './Weekdays';
-export { default as MonthWeek } from './MonthWeek';

package/src/components/molecules/Calendar/index.ts

@@ -1,7 +0,0 @@
-export { default as Calendar } from './Calendar';
-export type {
-  CalendarProps,
-  SelectionType,
-  DateRange,
-  Value,
-} from './Calendar';

package/src/components/molecules/Calendar/styled.ts

@@ -1,117 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { FC } from 'react';
-import { Platform, PressableProps, ViewProps } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { PressableSurface } from '../../atoms/PressableSurface';
-import { TextProps } from '../../atoms/Text';
-
-const isWeb = Platform.OS === 'web';
-
-interface ButtonBorders {
-  isLeft?: boolean;
-  isRright?: boolean;
-}
-
-export const TitleContainer = styled.View<Partial<StyleProps>>`
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  background-color: ${({ theme }) => theme.color.secondary.xlight};
-`;
-
-export const Control = styled(PressableSurface)(
-  (
-    props: Partial<StyleProps> & ButtonBorders & { align: 'start' | 'end' }
-  ) => css`
-    align-items: flex-${props.align};
-    padding: ${props.theme?.spacing.centi};
-    border-radius: ${props.theme?.borderRadius.mili};
-    margin: ${props.theme?.spacing.mili};
-  `
-);
-
-export const getCapitalizedTextComponent = (component: FC<TextProps>) => {
-  return styled(component)`
-    text-transform: capitalize;
-  `;
-};
-
-export const Content = styled.View<ViewProps & Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.deca};
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-`;
-
-export const Week = styled.View<Partial<StyleProps>>`
-  flex-direction: row;
-`;
-
-export const Selected = styled.View<
-  Partial<StyleProps> & { selected: boolean }
->`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${({ theme, selected }) =>
-    selected ? theme.color.primary.medium : 'transparent'};
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-  width: 100%;
-  height: 100%;
-`;
-
-export const Cell = styled(PressableSurface)<
-  PressableProps &
-    Partial<StyleProps> & {
-      selected: boolean;
-      highlighted: boolean;
-      isLineEnd: boolean;
-      isLineStart: boolean;
-      isRangeStart: boolean;
-      isRangeEnd: boolean;
-    }
->(
-  ({
-    theme,
-    selected,
-    highlighted,
-    isLineEnd,
-    isLineStart,
-    isRangeStart,
-    isRangeEnd,
-  }) => {
-    const borderRadiusSize = theme.borderRadius.mili;
-
-    const { rightBorderRadius, leftBorderRadius } = {
-      rightBorderRadius:
-        (selected && !isRangeStart) || isLineEnd ? borderRadiusSize : 0,
-      leftBorderRadius:
-        (selected && !isRangeEnd) || isLineStart ? borderRadiusSize : 0,
-    };
-
-    const borderEffect = highlighted ? 0 : borderRadiusSize;
-
-    const backgroundColor = highlighted
-      ? theme.color.primary.light
-      : 'transparent';
-
-    return css`
-      ${isWeb
-        ? css`
-            width: 32px;
-            height: 32px;
-          `
-        : css`
-            aspect-ratio: 1;
-            flex: 1;
-          `}
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: ${borderEffect};
-      border-top-left-radius: ${leftBorderRadius};
-      border-bottom-left-radius: ${leftBorderRadius};
-      border-top-right-radius: ${rightBorderRadius};
-      border-bottom-right-radius: ${rightBorderRadius};
-      background-color: ${backgroundColor};
-    `;
-  }
-);

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -1,140 +0,0 @@
-import { format as formatDate } from 'date-fns';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { InputContainerProps, useInputFocus } from '../../atoms/Input';
-import { Text, TextProps } from '../../atoms/Text';
-import { CalendarProps, DateRange, SelectionType } from '../Calendar';
-import { HintInputContainer } from '../HintInputContainer';
-import { CalendarIcon, getStyledTextComponent } from './styled';
-
-export interface DatePickerProps<T extends SelectionType>
-  extends InputContainerProps,
-    Omit<CalendarProps<T>, 'style'> {
-  controlComponent?: (
-    onPress: () => void,
-    displayValue?: string
-  ) => JSX.Element;
-  TextComponent?: React.FC<TextProps>;
-  CalendarComponent: React.FC<CalendarProps<T>>;
-  placeholder?: string;
-  onFocus?: () => void | never;
-  onBlur?: () => void | never;
-  format?: string;
-  closeOnPick?: boolean;
-  renderCalendar: (
-    calendar: React.ReactElement,
-    blur?: () => void
-  ) => JSX.Element | null;
-  requestShowCalendar: () => void;
-  requestCloseCalendar: () => void;
-}
-
-function DatePicker<T extends SelectionType>({
-  /** DatePicker props */
-  month,
-  year,
-  onChange,
-  value,
-  type,
-  format = 'yyyy-MM-dd',
-  placeholder,
-  onFocus,
-  onBlur,
-  disabled,
-  controlComponent,
-  hintComponent,
-  hint,
-  variant,
-  TextComponent = Text,
-  CalendarComponent,
-  rightComponent,
-  style,
-  locale,
-  closeOnPick = false,
-  renderCalendar,
-  requestShowCalendar,
-  requestCloseCalendar,
-  ...rest
-}: DatePickerProps<T>): JSX.Element {
-  const { focused, handleBlur, handleFocus } = useInputFocus(
-    onFocus,
-    onBlur,
-    !disabled
-  );
-
-  const handleShowCalendar = React.useCallback(() => {
-    requestShowCalendar();
-    handleFocus();
-  }, [handleFocus, requestShowCalendar]);
-
-  const getDisplayValue = () => {
-    if (!value) return placeholder;
-    if (type === 'day') {
-      return formatDate(value as Date, format, { locale: locale });
-    } else {
-      const { lowest, highest } = value as DateRange;
-      if (highest)
-        return `${formatDate(lowest, format, {
-          locale: locale,
-        })} - ${formatDate(highest, format, { locale: locale })}`;
-      else return formatDate(lowest, format, { locale: locale });
-    }
-  };
-
-  const StyledText = getStyledTextComponent(TextComponent);
-
-  useEffect(() => {
-    if (closeOnPick && value && type === 'day') {
-      setTimeout(requestCloseCalendar, 200);
-    }
-    if (closeOnPick && value && type === 'range') {
-      const { lowest, highest } = value as DateRange;
-      lowest && highest && setTimeout(requestCloseCalendar, 200);
-    }
-  }, [value, closeOnPick, type, requestCloseCalendar]);
-
-  const calendar = (
-    <CalendarComponent
-      pointerEvents={'box-none'}
-      type={type}
-      value={value}
-      month={month}
-      year={year}
-      onChange={onChange}
-      locale={locale}
-    />
-  );
-
-  return (
-    <>
-      {controlComponent ? (
-        controlComponent(handleShowCalendar, getDisplayValue())
-      ) : (
-        <HintInputContainer
-          focused={focused}
-          viewStyle={style}
-          onPress={handleShowCalendar}
-          disabled={disabled}
-          hintComponent={hintComponent}
-          LabelComponent={TextComponent}
-          variant={variant}
-          hint={hint}
-          rightComponent={
-            <>
-              <CalendarIcon name="calendar-sharp" type="ionicon" size="centi" />
-              {rightComponent}
-            </>
-          }
-          {...rest}
-        >
-          <StyledText fontWeight="bold" disabled={disabled}>
-            {getDisplayValue() || ' '}
-          </StyledText>
-        </HintInputContainer>
-      )}
-      {renderCalendar(calendar, handleBlur)}
-    </>
-  );
-}
-
-export default DatePicker;

package/src/components/molecules/DatePicker/index.ts

@@ -1,2 +0,0 @@
-export { default as DatePicker } from './DatePicker';
-export type { DatePickerProps } from './DatePicker';

package/src/components/molecules/DatePicker/styled.ts

@@ -1,20 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { FC } from 'react';
-import { StyleProps } from '../../../types/defaults';
-import { Icon } from '../../atoms/Icon';
-import { disabledInputStyles, InputContainerProps } from '../../atoms/Input';
-import { TextProps } from '../../atoms/Text';
-
-export const getStyledTextComponent = (component: FC<TextProps>) => {
-  return styled(component)(
-    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`
-      line-height: ${props.theme?.typography.h5.lineHeight};
-      ${disabledInputStyles(props)}
-    `
-  );
-};
-
-export const CalendarIcon = styled(Icon)<Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.centi};
-  color: ${({ theme }) => theme.color.secondary.medium};
-`;