@tecsinapse/react-core 1.21.1-beta.1 → 1.21.1-beta.3

package/src/components/molecules/DateTimeSelector/DateTimeSelector.tsx

@@ -1,319 +0,0 @@
-import {
-  add,
-  compareAsc,
-  format as formatDate,
-  getDaysInMonth,
-  isSameDay,
-  isSameMonth,
-  isSameYear,
-  set,
-  sub,
-} from 'date-fns';
-import * as React from 'react';
-import { ViewProps } from 'react-native';
-import { Button } from '../../atoms/Button';
-import { Icon } from '../../atoms/Icon';
-import { Text, TextProps } from '../../atoms/Text';
-import { Granularity, Selector } from './Selector';
-import { BackButton, Content, Header, Root, SelectorContainer } from './styled';
-
-export type DateTimeSelectorMode = 'date' | 'time' | 'datetime' | 'month';
-
-export interface DateTimeSelectorProps extends ViewProps {
-  TextComponent?: React.FC<TextProps>;
-  value?: Date;
-  onChange?: (value: Date) => void | never;
-
-  /**
-   * Defines the Picker behavior
-   * Must be one of ['date', 'time', 'datetime', 'month']
-   */
-  mode?: DateTimeSelectorMode;
-  format?: string;
-  locale?: Locale;
-
-  /**
-   * Maximum date from today
-   */
-  upperDateThreshold?: Date;
-
-  /**
-   * Minimum date from today
-   */
-  lowerDateThreshold?: Date;
-
-  /**
-   * Minimum and maximum date in distance units from today.
-   * The distance unit used depends on the picker mode
-   * If mode is date, the unit is day
-   * If mode is time, the unit is hour
-   * If mode is datetime, the unit is day
-   * If mode is month, the unit is month
-   */
-  offsetThreshold?: number;
-
-  /**
-   * Maximum date in distance units from today.
-   * The distance unit used depends on the picker mode
-   * If mode is date, the unit is day
-   * If mode is time, the unit is hour
-   * If mode is datetime, the unit is day
-   * If mode is month, the unit is month
-   */
-  upperOffsetThreshold?: number;
-
-  /**
-   * Minimum date in distance units from today.
-   * The distance unit used depends on the picker mode
-   * If mode is date, the unit is day
-   * If mode is time, the unit is hour
-   * If mode is datetime, the unit is day
-   * If mode is month, the unit is month
-   */
-  lowerOffsetThreshold?: number;
-
-  dateModalTitle?: string;
-  timeModalTitle?: string;
-  dateConfirmButtonText?: string;
-  timeConfirmButtonText?: string;
-  dayLabel?: string;
-  monthLabel?: string;
-  yearLabel?: string;
-  hourLabel?: string;
-  minuteLabel?: string;
-}
-
-function getThresholdUnit(mode: DateTimeSelectorMode, threshold?: number) {
-  if (!threshold) return {};
-  if (mode === 'month') {
-    return { months: threshold };
-  } else if (['date', 'datetime'].includes(mode)) {
-    return { days: threshold };
-  } else {
-    return { hours: threshold };
-  }
-}
-
-const DateTimeSelector: React.FC<DateTimeSelectorProps> = ({
-  TextComponent = Text,
-  value,
-  onChange,
-  mode = 'date',
-  locale,
-  upperDateThreshold: _upperDateThreshold,
-  lowerDateThreshold: _lowerDateThreshold,
-  offsetThreshold,
-  upperOffsetThreshold,
-  lowerOffsetThreshold,
-  dateModalTitle,
-  timeModalTitle,
-  dateConfirmButtonText,
-  timeConfirmButtonText,
-  dayLabel,
-  monthLabel,
-  yearLabel,
-  hourLabel,
-  minuteLabel,
-  ...rest
-}) => {
-  const lowerDateThreshold =
-    _lowerDateThreshold ||
-    ((offsetThreshold || lowerOffsetThreshold) &&
-      sub(
-        new Date(),
-        getThresholdUnit(mode, offsetThreshold || lowerOffsetThreshold)
-      ));
-
-  const upperDateThreshold =
-    _upperDateThreshold ||
-    ((offsetThreshold || upperOffsetThreshold) &&
-      add(
-        new Date(),
-        getThresholdUnit(mode, offsetThreshold || upperOffsetThreshold)
-      ));
-
-  const [date, setDate] = React.useState<Date>(value || new Date());
-  const [currentMode, setCurrentMode] = React.useState<0 | 1>(0);
-
-  const isDate =
-    ['date', 'month'].includes(mode) ||
-    (mode === 'datetime' && currentMode === 0);
-
-  const modalTitle = isDate ? dateModalTitle : timeModalTitle;
-  const confirmButtonText = isDate
-    ? dateConfirmButtonText
-    : timeConfirmButtonText;
-
-  const handleChange = (granularity: Granularity) => (newValue: number) => {
-    setDate(date => {
-      let newState: Date;
-      // Months and years must have a different handling for being
-      // the only date units that may interfere another unit.
-      if (['month', 'year'].includes(granularity)) {
-        let newDate = set(date, { [granularity]: newValue });
-        const daysInMonth = getDaysInMonth(newDate);
-        if (granularity === 'year' && date.getMonth() != newDate.getMonth()) {
-          newDate = set(newDate, { month: date.getMonth() });
-          newState = set(newDate, { date: getDaysInMonth(newDate) });
-        }
-        newState =
-          daysInMonth < date.getDate()
-            ? set(newDate, { date: daysInMonth })
-            : newDate;
-      } else {
-        newState = set(date, { [granularity]: newValue });
-      }
-
-      if (upperDateThreshold && compareAsc(newState, upperDateThreshold) > 0) {
-        return upperDateThreshold;
-      } else if (
-        lowerDateThreshold &&
-        compareAsc(newState, lowerDateThreshold) < 0
-      ) {
-        return lowerDateThreshold;
-      } else {
-        return newState;
-      }
-    });
-  };
-
-  const getDisplayedValue = (granularity: Granularity) => (value: number) => {
-    return granularity === 'month'
-      ? formatDate(date, 'MMM', { locale: locale }).slice(0, 3)
-      : value.toString().padStart(2, '0');
-  };
-
-  const handlePressConfirm = () => {
-    if (mode === 'datetime' && currentMode === 0) {
-      setCurrentMode(1);
-    } else {
-      onChange?.(date);
-    }
-  };
-
-  const handlePressBack = () => {
-    setCurrentMode(0);
-  };
-
-  return (
-    <Root {...rest}>
-      <Header>
-        {currentMode === 1 && (
-          <BackButton onPress={handlePressBack}>
-            <Icon
-              type={'material-community'}
-              name={'chevron-left'}
-              size={'mega'}
-              colorVariant={'secondary'}
-            />
-          </BackButton>
-        )}
-        <TextComponent typography={'base'} colorVariant={'secondary'}>
-          {modalTitle}
-        </TextComponent>
-      </Header>
-
-      {isDate ? (
-        <Content>
-          {mode !== 'month' && (
-            <SelectorContainer isFirst>
-              <Selector
-                TextComponent={TextComponent}
-                onChange={handleChange('date')}
-                referenceDate={date}
-                value={date.getDate()}
-                label={dayLabel || 'Day'}
-                granularity={'date'}
-                getDisplayValue={getDisplayedValue('date')}
-                preventUpper={
-                  upperDateThreshold
-                    ? isSameDay(upperDateThreshold, date)
-                    : false
-                }
-                preventLower={
-                  lowerDateThreshold
-                    ? isSameDay(lowerDateThreshold, date)
-                    : false
-                }
-              />
-            </SelectorContainer>
-          )}
-          <SelectorContainer>
-            <Selector
-              TextComponent={TextComponent}
-              onChange={handleChange('month')}
-              referenceDate={date}
-              value={date.getMonth()}
-              label={monthLabel || 'Month'}
-              granularity={'month'}
-              getDisplayValue={getDisplayedValue('month')}
-              preventUpper={
-                upperDateThreshold
-                  ? isSameMonth(upperDateThreshold, date)
-                  : false
-              }
-              preventLower={
-                lowerDateThreshold
-                  ? isSameMonth(lowerDateThreshold, date)
-                  : false
-              }
-            />
-          </SelectorContainer>
-          <SelectorContainer isLast>
-            <Selector
-              TextComponent={TextComponent}
-              onChange={handleChange('year')}
-              referenceDate={date}
-              value={date.getFullYear()}
-              label={yearLabel || 'Year'}
-              granularity={'year'}
-              getDisplayValue={getDisplayedValue('year')}
-              preventUpper={
-                upperDateThreshold
-                  ? isSameYear(upperDateThreshold, date)
-                  : false
-              }
-              preventLower={
-                lowerDateThreshold
-                  ? isSameYear(lowerDateThreshold, date)
-                  : false
-              }
-            />
-          </SelectorContainer>
-        </Content>
-      ) : (
-        <Content>
-          <SelectorContainer isFirst>
-            <Selector
-              TextComponent={TextComponent}
-              onChange={handleChange('hours')}
-              referenceDate={date}
-              value={date.getHours()}
-              label={hourLabel || 'Hour'}
-              granularity={'hours'}
-              getDisplayValue={getDisplayedValue('hours')}
-            />
-          </SelectorContainer>
-          <SelectorContainer isLast>
-            <Selector
-              TextComponent={TextComponent}
-              onChange={handleChange('minutes')}
-              referenceDate={date}
-              value={date.getMinutes()}
-              label={minuteLabel || 'Minute'}
-              granularity={'minutes'}
-              getDisplayValue={getDisplayedValue('minutes')}
-            />
-          </SelectorContainer>
-        </Content>
-      )}
-      <Button color={'primary'} onPress={handlePressConfirm}>
-        <TextComponent fontWeight="bold" fontColor="light">
-          {confirmButtonText || 'OK'}
-        </TextComponent>
-      </Button>
-    </Root>
-  );
-};
-
-export default DateTimeSelector;

package/src/components/molecules/DateTimeSelector/Selector.tsx

@@ -1,122 +0,0 @@
-import { getDaysInMonth } from 'date-fns';
-import * as React from 'react';
-import { ViewProps } from 'react-native';
-import { Icon } from '../../atoms/Icon';
-import { TextProps } from '../../atoms/Text';
-import { Control, SelectorRoot, SelectorValue } from './styled';
-
-export type Granularity = 'date' | 'month' | 'year' | 'hours' | 'minutes';
-
-interface SelectorProps extends ViewProps {
-  TextComponent: React.FC<TextProps>;
-  granularity: Granularity;
-  referenceDate: Date;
-  label: string;
-  value: number;
-  getDisplayValue: (value: number) => string;
-  onChange: (value: number) => void | never;
-  preventUpper?: boolean;
-  preventLower?: boolean;
-}
-
-function getPrevAndNext(
-  value: number,
-  granularity: Granularity,
-  daysInMonth: number,
-  multiplier = 1
-): [number, number] {
-  let next = value + multiplier,
-    prev = value - multiplier;
-
-  if (granularity === 'date') {
-    next = next > daysInMonth ? 1 : next;
-    prev = prev < 1 ? daysInMonth : prev;
-  } else if (granularity === 'month') {
-    next = next > 11 ? 0 : next;
-    prev = prev < 0 ? 11 : prev;
-  } else if (granularity === 'hours') {
-    next = next > 23 ? 0 : next;
-    prev = prev < 0 ? 23 : prev;
-  } else if (granularity === 'minutes') {
-    next = next > 59 ? 0 : next;
-    prev = prev < 0 ? 59 : prev;
-  }
-
-  return [prev, next];
-}
-export const Selector: React.FC<SelectorProps> = ({
-  granularity,
-  label,
-  value,
-  onChange,
-  getDisplayValue,
-  referenceDate,
-  preventUpper,
-  preventLower,
-  TextComponent,
-  ...rest
-}) => {
-  const pressInTimeoutRef = React.useRef<number>();
-
-  const handlePressInNext = (_next?: number) => {
-    const daysInMonth = getDaysInMonth(referenceDate);
-    const next = _next || getPrevAndNext(value, granularity, daysInMonth)[1];
-    clearTimeout(pressInTimeoutRef.current);
-    pressInTimeoutRef.current = setTimeout(() => {
-      handlePressInNext(getPrevAndNext(next, granularity, daysInMonth, 3)[1]);
-    }, 500);
-    onChange(next);
-  };
-
-  const handlePressInPrev = (_prev?: number) => {
-    const daysInMonth = getDaysInMonth(referenceDate);
-    const prev = _prev || getPrevAndNext(value, granularity, daysInMonth)[0];
-    clearTimeout(pressInTimeoutRef.current);
-    pressInTimeoutRef.current = setTimeout(() => {
-      handlePressInPrev(getPrevAndNext(prev, granularity, daysInMonth, 3)[0]);
-    }, 500);
-    onChange(prev);
-  };
-
-  const handlePressOut = () => {
-    pressInTimeoutRef.current && clearTimeout(pressInTimeoutRef.current);
-  };
-
-  return (
-    <SelectorRoot {...rest}>
-      <Control
-        onPressIn={() => requestAnimationFrame(() => handlePressInNext())}
-        onPressOut={handlePressOut}
-        disabled={preventUpper}
-      >
-        <Icon
-          name={'chevron-up'}
-          type={'material-community'}
-          size={'mega'}
-          colorVariant={'primary'}
-        />
-      </Control>
-      <SelectorValue>
-        <TextComponent colorVariant={'secondary'} typography={'sub'}>
-          {label}
-        </TextComponent>
-        <TextComponent fontWeight={'bold'} typography={'h5'}>
-          {getDisplayValue(value)}
-        </TextComponent>
-      </SelectorValue>
-      <Control
-        onPressIn={() => requestAnimationFrame(() => handlePressInPrev())}
-        onPressOut={handlePressOut}
-        disabled={preventLower}
-        style={{ opacity: preventLower ? 0 : 1 }}
-      >
-        <Icon
-          name={'chevron-down'}
-          type={'material-community'}
-          size={'mega'}
-          colorVariant={'primary'}
-        />
-      </Control>
-    </SelectorRoot>
-  );
-};

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

@@ -1,5 +0,0 @@
-export { default as DateTimeSelector } from './DateTimeSelector';
-export type {
-  DateTimeSelectorProps,
-  DateTimeSelectorMode,
-} from './DateTimeSelector';

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

@@ -1,55 +0,0 @@
-import styled from '@emotion/native';
-import { StyleProps } from '../../../types/defaults';
-import { RFValueStr } from '../../../utils';
-import { PressableSurface } from '../../atoms/PressableSurface';
-
-export const Root = styled.View<Partial<StyleProps>>`
-  position: relative;
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-`;
-
-export const Content = styled.View<Partial<StyleProps>>`
-  flex-direction: row;
-  justify-content: space-between;
-  margin-vertical: ${({ theme }) => theme.spacing.deca};
-`;
-
-export const SelectorRoot = styled.View<Partial<StyleProps>>`
-  border-width: ${RFValueStr('1px')};
-  border-color: ${({ theme }) => theme.color.secondary.xlight};
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-`;
-
-export const SelectorValue = styled.View`
-  align-items: center;
-`;
-
-export const SelectorContainer = styled.View<
-  Partial<StyleProps> & { isFirst?: boolean; isLast?: boolean }
->`
-  margin-right: ${({ theme, isFirst }) => (isFirst ? theme.spacing.deca : 0)};
-  margin-left: ${({ theme, isLast }) => (isLast ? theme.spacing.deca : 0)};
-  flex: 1;
-`;
-
-export const Control = styled(PressableSurface)<Partial<StyleProps>>`
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-  padding: ${({ theme }) => theme.spacing.micro};
-  margin-vertical: ${({ theme }) => theme.spacing.mili};
-  margin-horizontal: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const Header = styled.View`
-  width: 100%;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const BackButton = styled(PressableSurface)<Partial<StyleProps>>`
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-  padding: ${({ theme }) => theme.spacing.micro};
-  position: absolute;
-  aspect-ratio: 1;
-  left: 0;
-`;

package/src/components/molecules/Grid/functions.ts

@@ -1,25 +0,0 @@
-import { GridSpacing, PaddingPosition, Spacing } from '@tecsinapse/react-core';
-import { extractNumbersFromString } from '../../../utils';
-
-export const getGridItemPadding = (
-  pos: PaddingPosition,
-  _spacing: GridSpacing | undefined,
-  themeSpacing: Spacing
-): number | undefined => {
-  if (_spacing) {
-    if (typeof _spacing === 'string')
-      return extractNumbersFromString(themeSpacing[_spacing]);
-    else if (typeof _spacing === 'object' && _spacing[pos]) {
-      return extractNumbersFromString(themeSpacing[_spacing[pos] ?? '0']);
-    } else return undefined;
-  } else return undefined;
-};
-
-/**
- * Calc the basis width percentage for a given item
- * @param columns - number of grid columns
- * @param span - number of columns to merge
- * @returns {number} - value in %
- */
-export const getGridItemColumSpan = (columns: number, span: number): number =>
-  100 / (columns / span);

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

@@ -1,66 +0,0 @@
-import React from 'react';
-import { SpacingType } from '@tecsinapse/react-core';
-
-export interface IGrid {
-  children: JSX.Element[];
-  /** Layout should represent the multiplier of columns to fill the rows properly.
-   * Example:
-   * const layout = [
-   *   [6, 6], // Two elements on row
-   *   [4, 4, 4], // Three elements on row
-   *   [12], // One element on row
-   * ];
-   * */
-  layout?: number[][];
-  /** Number of grid columns to be considered (not the number of elements per row) */
-  columns?: number;
-  spacing?:
-    | SpacingType
-    | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-      };
-}
-
-export type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
-export type FlexAlignBase = FlexPositioning | 'stretch';
-export type FlexAlignType = FlexAlignBase | 'baseline';
-export type FlexSpacing = 'space-between' | 'space-around';
-export type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
-
-export type GridSpacing =
-  | SpacingType
-  | {
-      top?: SpacingType;
-      right?: SpacingType;
-      bottom?: SpacingType;
-      left?: SpacingType;
-    };
-
-export interface IGridItem {
-  children: React.ReactElement;
-  /** Number of columns to fill */
-  span: number;
-  /** You don't have to give this property since is inherited from Grid */
-  columns?: number;
-  loading?: boolean;
-  /** If your GridItem has a loading state, specify the component here (Skeleton) */
-  loadingComponent?: React.ReactElement;
-  /** Flex properties below */
-  alignContent?: FlexAlignBase | FlexSpacing;
-  alignItems?: FlexAlignType;
-  alignSelf?: 'auto' | FlexAlignType;
-  flex?: number;
-  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-  flexGrow?: number;
-  flexShrink?: number;
-  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
-  /** You don't have to give this property since is inherited from Grid */
-  spacing?: GridSpacing;
-  /** Used to wrap children in a View when its style extrapolates the dimensions*/
-  wrapper?: boolean;
-}
-
-export { getGridItemColumSpan, getGridItemPadding } from './functions';

package/src/components/molecules/HintInputContainer/HintInputContainer.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
-import {
-  Hint,
-  InputVariantType,
-  PressableInputContainer,
-  PressableInputContainerProps,
-} from '../../atoms/Input';
-import { TextProps } from '../../atoms/Text';
-
-export interface HintInputContainerProps extends PressableInputContainerProps {
-  viewStyle?: StyleProp<ViewStyle>;
-  focused: boolean;
-  LabelComponent?: React.FC<TextProps>;
-  onPress?: () => void | never;
-  disabled?: boolean;
-  hint?: string;
-  hintComponent?: JSX.Element;
-  variant?: InputVariantType;
-  rightComponent?: JSX.Element;
-}
-
-const HintInputContainer: React.FC<HintInputContainerProps> = ({
-  viewStyle,
-  onPress,
-  focused,
-  disabled,
-  LabelComponent,
-  variant = 'default',
-  rightComponent,
-  children,
-  hint,
-  hintComponent,
-  ...rest
-}) => {
-  const _hint = hintComponent || (
-    <Hint TextComponent={LabelComponent} text={hint} variant={variant} />
-  );
-
-  return (
-    <View style={viewStyle}>
-      <PressableInputContainer
-        onPress={onPress}
-        focused={focused}
-        disabled={disabled}
-        LabelComponent={LabelComponent}
-        variant={variant}
-        rightComponent={rightComponent}
-        {...rest}
-      >
-        {children}
-      </PressableInputContainer>
-      {hint && _hint}
-    </View>
-  );
-};
-
-export default HintInputContainer;

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

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

package/src/components/molecules/IconTextButton/IconComponent.tsx

@@ -1,27 +0,0 @@
-import { ButtonSizeType, FontColor, IconProps } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Icon } from '../../atoms/Icon';
-
-interface IconComponentProps {
-  iconProps?: IconProps;
-  size?: ButtonSizeType;
-  defaultFontColor: keyof FontColor;
-}
-
-const IconComponent: FC<IconComponentProps> = ({
-  iconProps,
-  size = 'default',
-  defaultFontColor,
-}) => {
-  return iconProps ? (
-    <Icon
-      size={iconProps.size ?? size === 'small' ? 'deca' : 'kilo'}
-      fontColor={iconProps.fontColor ?? defaultFontColor}
-      {...iconProps}
-    />
-  ) : (
-    <></>
-  );
-};
-
-export default React.memo(IconComponent);

package/src/components/molecules/IconTextButton/IconTextButton.ts

@@ -1,10 +0,0 @@
-import { ButtonProps, IconProps, TextProps } from '@tecsinapse/react-core';
-
-export type IconPositionOptions = 'left' | 'right';
-
-export interface IconTextButtonProps extends ButtonProps {
-  iconProps?: IconProps;
-  iconPosition?: IconPositionOptions;
-  textProps?: TextProps;
-  label?: string;
-}