@tecsinapse/react-core 1.21.1 → 1.21.3

package/src/components/atoms/Tag/styled.ts

@@ -1,45 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { Animated, ViewProps } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
-import { Icon, IconProps } from '../Icon';
-import { TagProps } from './Tag';
-
-const smallVariant = ({ theme, variant }: Partial<TagProps> & StyleProps) =>
-  variant === 'small' &&
-  css`
-    border-radius: ${theme.borderRadius.micro};
-    padding: ${theme.spacing.nano} ${theme.spacing.mili};
-  `;
-
-const defaultVariant = ({ theme, variant }: Partial<TagProps> & StyleProps) =>
-  variant === 'default' &&
-  css`
-    border-radius: ${theme.borderRadius.mili};
-    padding: ${theme.spacing.micro} ${theme.spacing.centi};
-  `;
-
-const StyledTagContainerBase = styled(Animated.View)<
-  Partial<TagProps> & Partial<StyleProps> & ViewProps & { visible: boolean }
->`
-  background-color: ${({ theme }) => theme.miscellaneous.bodyColor};
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  align-self: center;
-  display: ${({ visible }) => (visible ? 'flex' : 'none')};
-`;
-
-export const StyledTagContainer = styled(StyledTagContainerBase)(
-  props => css`
-    ${smallVariant(props)}
-    ${defaultVariant(props)}
-  `
-);
-
-export const StyledLeftIcon = styled(Icon)<Partial<StyleProps> & IconProps>`
-  margin-right: ${({ theme }) => theme.spacing.micro};
-`;
-
-export const StyledCloseIcon = styled(Icon)<Partial<StyleProps> & IconProps>`
-  margin-left: ${({ theme }) => theme.spacing.nano};
-`;

package/src/components/atoms/Text/Text.stories.tsx

@@ -1,32 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import { Text, TextProps } from './index';
-
-export default {
-  title: 'Hybrid/Text',
-  component: Text,
-};
-
-const Template: Story<TextProps> = ({
-  fontColor,
-  fontWeight,
-  typography,
-  ...args
-}) => (
-  <Text
-    {...args}
-    fontColor={fontColor}
-    fontWeight={fontWeight}
-    typography={typography}
-  >
-    Text
-  </Text>
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  fontColor: 'dark',
-  fontWeight: 'regular',
-  typography: 'h3',
-};

package/src/components/atoms/Text/Text.tsx

@@ -1,68 +0,0 @@
-import React, { FC } from 'react';
-import {
-  ColorGradationType,
-  ColorType,
-  FontColorType,
-  FontStackType,
-  FontWeightType,
-  TypographyVariationType,
-} from '@tecsinapse/react-core';
-import { StyleProp, TextStyle } from 'react-native';
-import { StyledColoredText } from './styled';
-import { getLabel } from './functions';
-
-export interface TextProps {
-  /** Font theme text color */
-  fontColor?: FontColorType;
-  /** Font theme weight */
-  fontWeight?: FontWeightType;
-  /** Font theme sizes */
-  typography?: TypographyVariationType;
-  /** Font theme stack */
-  fontStack?: FontStackType;
-  /** Palette theme colors. You can specify this prop to override theme fontColor */
-  colorVariant?: ColorType;
-  /** Palette theme colors gradation */
-  colorTone?: ColorGradationType;
-  numberOfLines?: number;
-  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
-  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
-  capitalFirst?: boolean;
-  style?: StyleProp<TextStyle>;
-  children?: React.ReactNode;
-}
-
-/** NOTE: When using colors, be careful to not override fontColor by using colorVariant and colorTone, referent to theme colors and not text colors. */
-const Text: FC<TextProps> = ({
-  children,
-  style,
-  fontColor = 'dark',
-  colorTone = 'medium',
-  colorVariant,
-  fontWeight = 'regular',
-  typography = 'base',
-  numberOfLines,
-  ellipsizeMode,
-  textTransform = 'none',
-  capitalFirst = false,
-  ...rest
-}): JSX.Element => {
-  return (
-    <StyledColoredText
-      {...rest}
-      style={style}
-      fontColor={fontColor}
-      colorTone={colorTone}
-      colorVariant={colorVariant}
-      fontWeight={fontWeight}
-      typography={typography}
-      numberOfLines={numberOfLines}
-      ellipsizeMode={ellipsizeMode}
-      textTransform={textTransform}
-    >
-      {getLabel(children, capitalFirst)}
-    </StyledColoredText>
-  );
-};
-
-export default Text;

package/src/components/atoms/Text/functions.ts

@@ -1,8 +0,0 @@
-export const getFirstCapitalCharacter = (value: string): string =>
-  value.charAt(0).toUpperCase().concat(value.slice(1));
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const getLabel = (children, capitalFirst: boolean) =>
-  typeof children === 'string' && capitalFirst
-    ? getFirstCapitalCharacter(children)
-    : children;

package/src/components/atoms/Text/index.ts

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

package/src/components/atoms/Text/styled.ts

@@ -1,31 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { StyleProps, TextProps } from '@tecsinapse/react-core';
-import { Text as RNText } from 'react-native';
-
-export const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`
-  color: ${({ theme, fontColor = 'dark' }) => theme.font.color[fontColor]};
-  font-weight: ${({ theme, fontWeight = 'regular' }) =>
-    theme.font.weight[fontWeight]};
-  font-size: ${({ theme, typography = 'base' }) =>
-    theme.typography[typography].fontSize};
-  line-height: ${({ theme, typography = 'base' }) =>
-    theme.typography[typography].lineHeight};
-  font-family: ${({ theme, fontStack = 'default' }) =>
-    `'${theme.font.stack[fontStack]}'`};
-  text-transform: ${({ textTransform = 'none' }) => `${textTransform}`};
-`;
-
-const colorStyles = ({
-  colorVariant,
-  colorTone,
-  theme,
-}: TextProps & StyleProps) =>
-  colorVariant &&
-  colorTone &&
-  css`
-    color: ${theme.color[colorVariant][colorTone]};
-  `;
-
-export const StyledColoredText = styled(StyledText)<
-  TextProps & Partial<StyleProps>
->(colorStyles);

package/src/components/atoms/shared/PaperAndCard.ts

@@ -1,24 +0,0 @@
-import { css } from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const baseStyles = ({ theme }: StyleProps): any => css`
-  border-radius: ${theme.borderRadius.mili};
-  background-color: ${theme.miscellaneous.surfaceColor};
-`;
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export const elevatedStyles = ({
-  theme,
-  elevated = false,
-}: { elevated?: boolean } & StyleProps): any =>
-  elevated && [
-    css({
-      shadowColor: theme.miscellaneous.shadow,
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.05,
-      shadowRadius: 5,
-      elevation: 2,
-    }),
-  ];
-/* eslint-enable @typescript-eslint/no-explicit-any */

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

@@ -1,20 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import { Calendar, CalendarProps } from './index';
-import { DateRange } from './Calendar';
-import { ptBR } from 'date-fns/locale';
-
-export default {
-  title: 'Hybrid/Calendar',
-  component: Calendar,
-};
-
-const Template: Story<CalendarProps<'range'>> = ({ ...args }) => {
-  const [value, setValue] = React.useState<DateRange>();
-
-  return (
-    <Calendar type={'range'} value={value} onChange={setValue} locale={ptBR} />
-  );
-};
-
-export const Base = Template.bind({});

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';