@tecsinapse/react-native-kit 1.22.2 → 1.22.3

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

@@ -1,12 +0,0 @@
-import styled from '@emotion/native';
-import { RFValueStr, StyleProps } from '@tecsinapse/react-core';
-import { SkeletonProps } from './Skeleton';
-
-export const Wrapper = styled.View<Partial<StyleProps & SkeletonProps>>`
-  width: ${({ width }) => (width ? `${RFValueStr(`${width}px`)}` : '100%')};
-  height: ${({ height }) => (height ? `${RFValueStr(`${height}px`)}` : 'auto')};
-  border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>
-    radius ? theme.borderRadius[radius] : 0};
-  overflow: hidden;
-  position: relative;
-`;

package/src/components/atoms/Skeleton/types.ts

@@ -1,13 +0,0 @@
-export type ChildrenLayout = {
-  width: number;
-  height: number;
-  x: number;
-  y: number;
-};
-
-export interface IAnimationComponent {
-  width?: number;
-  height?: number;
-  active?: boolean;
-  childrenLayout: ChildrenLayout;
-}

package/src/components/atoms/SnappingSlider/SnappingSlider.tsx

@@ -1,85 +0,0 @@
-import * as React from 'react';
-import { Dimensions, ScrollView, ScrollViewProps, View } from 'react-native';
-import {
-  extractNumbersFromString,
-  SpacingType,
-  ThemeProp,
-} from '@tecsinapse/react-core';
-import { useTheme } from '@emotion/react';
-
-export interface SnappingSliderProps
-  extends Omit<ScrollViewProps, 'horizontal' | 'snapToOffsets'> {
-  /**
-   * Amount in screen elements.
-   * Should never be lower than scrollAmount, otherwise some elements will be skipped.
-   */
-  showAmount: number;
-
-  /**
-   * Amount of items to scroll within a single swipe.
-   * Should never be greater than showAmount, otherwise some elements will be skipped.
-   */
-  scrollAmount: number;
-
-  /**
-   * Spacing between elements.
-   * Must be one of [nano, micro, mili, centi, deca, kilo, mega, giga, tera, peta, hexa]
-   */
-  spacing?: SpacingType;
-}
-
-const SnappingSlider: React.FC<SnappingSliderProps> = ({
-  children,
-  showAmount,
-  scrollAmount,
-  spacing,
-  ...rest
-}) => {
-  const theme = useTheme() as ThemeProp;
-
-  const childCount = React.Children.count(children);
-  const screenWidth = Dimensions.get('window').width;
-  const totalSlideWidth = Math.round(screenWidth / showAmount);
-  const horizontalPadding = spacing
-    ? extractNumbersFromString(theme.spacing[spacing]) / 2
-    : 0;
-
-  const snapToOffsets = [
-    ...Array(Math.ceil(childCount / scrollAmount)).keys(),
-  ].map(index => {
-    const offset = totalSlideWidth * scrollAmount * index;
-    const padCompensation = horizontalPadding * Math.sign(index);
-    return offset + padCompensation;
-  });
-
-  return (
-    <ScrollView
-      horizontal
-      snapToOffsets={snapToOffsets}
-      snapToStart
-      snapToEnd
-      showsHorizontalScrollIndicator={false}
-      {...rest}
-    >
-      {React.Children.map(children, (child, index) => {
-        const isFirst = index === 0;
-        const isLast = index === childCount - 1;
-
-        return (
-          <View
-            style={{
-              width: totalSlideWidth,
-              paddingHorizontal: horizontalPadding,
-              paddingLeft: isFirst ? 0 : horizontalPadding,
-              paddingRight: isLast ? 0 : horizontalPadding,
-            }}
-          >
-            {child}
-          </View>
-        );
-      })}
-    </ScrollView>
-  );
-};
-
-export default SnappingSlider;

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

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

package/src/components/atoms/Tag/Tag.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import {
-  Tag as TagCore,
-  TagProps as TagCoreProps,
-} from '@tecsinapse/react-core';
-import { Text } from '../Text';
-
-export interface TagProps extends Omit<TagCoreProps, 'value'> {
-  value: string;
-}
-
-const Tag: React.FC<TagProps> = ({ value, ...rest }): JSX.Element => {
-  return (
-    <TagCore
-      value={
-        <Text
-          colorVariant="secondary"
-          colorTone="dark"
-          fontStack="default"
-          fontWeight="bold"
-          typography={rest.variant === 'small' ? 'sub' : 'base'}
-        >
-          {value}
-        </Text>
-      }
-      {...rest}
-    />
-  );
-};
-
-export default Tag;

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

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

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

@@ -1,11 +0,0 @@
-import { TextProps } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { StyledNativeText } from './styled';
-
-export type TextNativeProps = TextProps;
-
-const Text: FC<TextNativeProps> = ({ children, ...rest }): JSX.Element => {
-  return <StyledNativeText {...rest}>{children}</StyledNativeText>;
-};
-
-export default Text;

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

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

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

@@ -1,31 +0,0 @@
-import styled, { css } from '@emotion/native';
-import {
-  FontStackType,
-  FontWeightType,
-  StyleProps,
-  Text,
-} from '@tecsinapse/react-core';
-import { Platform } from 'react-native';
-import { TextNativeProps } from './Text';
-
-export interface Font {
-  fontStack?: FontStackType;
-  fontWeight?: FontWeightType;
-}
-
-export const fontStyles = ({
-  theme,
-  fontStack = 'default',
-  fontWeight = 'regular',
-}: Partial<Font & Partial<StyleProps>>) => {
-  const fontFamily = theme?.font.stack[fontStack] || '';
-  const fontStyle = theme?.font.files[fontWeight];
-  return css`
-    ${Platform.OS === 'android' ? 'font-weight: normal;' : undefined}
-    font-family: ${fontStyle?.replace('{0}', fontFamily)};
-  `;
-};
-
-export const StyledNativeText = styled(Text)<
-  Font & Partial<TextNativeProps> & Partial<StyleProps>
->(fontStyles);

package/src/components/atoms/TextArea/TextArea.tsx

@@ -1,85 +0,0 @@
-import React, { FC } from 'react';
-import {
-  useInputFocus,
-  TextAreaProps as ITACore,
-  TextArea as TACore,
-} from '@tecsinapse/react-core';
-import { Text } from '../Text';
-import { StyledNativeInput } from './styled';
-
-export type TextAreaProps = Omit<ITACore, 'TextComponent' | 'focused'>;
-
-const TextArea: FC<TextAreaProps> = ({
-  label,
-  labelColor,
-  labelColorVariant,
-  labelColorTone,
-  labelTypography,
-  labelStack,
-  labelWeight,
-  leftComponent,
-  rightComponent,
-  disabled,
-  style,
-  borderColor,
-  borderColorGradation,
-  inputFontStack = 'default',
-  inputFontWeight = 'bold',
-  inputContainerStyle,
-  variant = 'default',
-  hintComponent,
-  hint,
-  onFocus,
-  onBlur,
-  value,
-  maxLength,
-  ...rest
-}) => {
-  const { focused, handleBlur, handleFocus } = useInputFocus(
-    onFocus,
-    onBlur,
-    !disabled
-  );
-
-  return (
-    <TACore
-      label={label}
-      labelColor={labelColor}
-      labelColorVariant={labelColorVariant}
-      labelColorTone={labelColorTone}
-      labelTypography={labelTypography}
-      labelStack={labelStack}
-      labelWeight={labelWeight}
-      LabelComponent={Text}
-      leftComponent={leftComponent}
-      rightComponent={rightComponent}
-      borderColor={borderColor}
-      borderColorGradation={borderColorGradation}
-      inputContainerStyle={inputContainerStyle}
-      focused={focused}
-      disabled={disabled}
-      variant={variant}
-      value={value}
-      hintComponent={hintComponent}
-      hint={hint}
-      style={style}
-      TextComponent={Text}
-      maxLength={maxLength}
-    >
-      <StyledNativeInput
-        {...rest}
-        fontStack={inputFontStack}
-        fontWeight={inputFontWeight}
-        disabled={disabled}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        textAlignVertical={'top'}
-        multiline
-        value={value}
-        maxLength={maxLength}
-      />
-    </TACore>
-  );
-};
-
-export default TextArea;

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

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

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

@@ -1,8 +0,0 @@
-import styled from '@emotion/native';
-import { StyleProps, TextAreaInputBase } from '@tecsinapse/react-core';
-import { Font, fontStyles } from '../Text/styled';
-import { TextAreaProps } from './TextArea';
-
-export const StyledNativeInput = styled(TextAreaInputBase)<
-  Font & Partial<TextAreaProps> & Partial<StyleProps>
->(fontStyles);

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

@@ -1,21 +0,0 @@
-import {
-  Calendar as CalendarCore,
-  CalendarProps,
-  SelectionType,
-} from '@tecsinapse/react-core';
-import React from 'react';
-import { getLocale } from '../../../utils/date';
-import { Text } from '../../atoms/Text';
-
-export const Calendar = <T extends SelectionType>({
-  locale,
-  ...rest
-}: CalendarProps<T>): JSX.Element => {
-  return (
-    <CalendarCore
-      {...rest}
-      TextComponent={Text}
-      locale={locale ?? getLocale()}
-    />
-  );
-};

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

@@ -1 +0,0 @@
-export { Calendar } from './Calendar';

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

@@ -1,56 +0,0 @@
-import {
-  DatePicker as DatePickerCore,
-  DatePickerProps,
-  SelectionType,
-  Value,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { getLocale } from '../../../utils/date';
-import { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';
-import { Text } from '../../atoms/Text';
-import { Calendar } from '../Calendar';
-import { CalendarBoxContent } from './styled';
-
-export type NativeDatePickerProps<T extends SelectionType> = Omit<
-  DatePickerProps<T>,
-  | 'CalendarComponent'
-  | 'renderCalendar'
-  | 'requestCloseCalendar'
-  | 'requestShowCalendar'
->;
-
-export const DatePicker = <T extends SelectionType>({
-  locale,
-  onChange,
-  ...rest
-}: NativeDatePickerProps<T>): JSX.Element => {
-  const modal = useLazyModalManager();
-
-  const handleChange = (value?: Value<T>) => {
-    onChange?.(value);
-    modal.requestUpdate();
-  };
-
-  return (
-    <DatePickerCore
-      {...rest}
-      TextComponent={Text}
-      CalendarComponent={Calendar}
-      locale={locale ?? getLocale()}
-      onChange={handleChange}
-      requestShowCalendar={() => modal.show()}
-      requestCloseCalendar={() => modal.close()}
-      renderCalendar={(calendar, blur) =>
-        modal.sync(<NativeModal onClose={blur}>{calendar}</NativeModal>)
-      }
-    />
-  );
-};
-
-const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
-  return (
-    <ModalView BoxComponent={CalendarBoxContent} {...others}>
-      {children}
-    </ModalView>
-  );
-};

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

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

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

@@ -1,6 +0,0 @@
-import styled from '@emotion/native';
-import { BoxContent, StyleProps } from '@tecsinapse/react-core';
-
-export const CalendarBoxContent = styled(BoxContent)<Partial<StyleProps>>`
-  background-color: ${({ theme }) => theme.color.secondary.xlight};
-`;

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -1,42 +0,0 @@
-import {
-  DateTimePicker as DateTimePickerCore,
-  DateTimePickerProps,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { getLocale } from '../../../utils/date';
-import { IBaseModal, ModalView, useLazyModalManager } from '../../atoms/Modal';
-import { Text } from '../../atoms/Text';
-import { DateTimeSelector } from '../DateTimeSelector';
-
-export type NativeDateTimePickerProps = Omit<
-  DateTimePickerProps,
-  | 'DateTimeSelectorComponent'
-  | 'renderSelector'
-  | 'requestCloseSelector'
-  | 'requestShowSelector'
->;
-
-export const DateTimePicker: FC<NativeDateTimePickerProps> = ({
-  locale,
-  ...rest
-}) => {
-  const modal = useLazyModalManager();
-
-  return (
-    <DateTimePickerCore
-      {...rest}
-      TextComponent={Text}
-      DateTimeSelectorComponent={DateTimeSelector}
-      locale={locale ?? getLocale()}
-      requestShowSelector={() => modal.show()}
-      requestCloseSelector={() => modal.close()}
-      renderSelector={(selector, blur) =>
-        modal.sync(<NativeModal onClose={blur}>{selector}</NativeModal>)
-      }
-    />
-  );
-};
-
-const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
-  return <ModalView {...others}>{children}</ModalView>;
-};

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

@@ -1,2 +0,0 @@
-export { DateTimePicker } from './DateTimePicker';
-export type { NativeDateTimePickerProps } from './DateTimePicker';

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

@@ -1,20 +0,0 @@
-import {
-  DateTimeSelector as DateTimeSelectorCore,
-  DateTimeSelectorProps,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { Text } from '../../atoms/Text';
-import { getLocale } from '../../../utils/date';
-
-export const DateTimeSelector: FC<DateTimeSelectorProps> = ({
-  locale,
-  ...rest
-}) => {
-  return (
-    <DateTimeSelectorCore
-      {...rest}
-      TextComponent={Text}
-      locale={locale ?? getLocale()}
-    />
-  );
-};

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

@@ -1 +0,0 @@
-export { DateTimeSelector } from './DateTimeSelector';

package/src/components/molecules/Grid/Grid.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { View, ViewProps } from 'react-native';
-import { GridItem } from './Item';
-import { IGrid } from '@tecsinapse/react-core';
-
-export type IGridNative = IGrid & ViewProps;
-
-const Grid = ({
-  children,
-  columns = 12,
-  layout,
-  style,
-  spacing,
-  ...rest
-}: IGridNative): JSX.Element => {
-  if (layout) {
-    const flatLayout = layout.flat();
-    return (
-      <View
-        style={[
-          style,
-          {
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-          },
-        ]}
-        {...rest}
-      >
-        {React.Children.map(children, (child, index) => (
-          <GridItem
-            key={`child-${index}`}
-            columns={columns}
-            span={flatLayout[index]}
-            spacing={spacing}
-          >
-            {child}
-          </GridItem>
-        ))}
-      </View>
-    );
-  }
-
-  return (
-    <View
-      style={[
-        style,
-        {
-          display: 'flex',
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-        },
-      ]}
-      {...rest}
-    >
-      {React.Children.map(children, (child, index) => {
-        return React.cloneElement(child, {
-          ...child?.props,
-          columns,
-          spacing: child?.props.spacing ?? spacing,
-          key: `child-${index}`,
-        });
-      })}
-    </View>
-  );
-};
-
-export default Grid;

package/src/components/molecules/Grid/Item/Item.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { View, ViewProps } from 'react-native';
-import {
-  IGridItem,
-  useTheme,
-  getGridItemColumSpan,
-  getGridItemPadding,
-} from '@tecsinapse/react-core';
-
-export type IGridItemNative = IGridItem &
-  ViewProps & {
-    /** Only specify this property if the GridItem will be 'dynamic', adjusting itself to content. Use this with `wrapper` for better result. */
-    flexBasis?: string | 'auto';
-  };
-
-const GridItem = ({
-  children,
-  span,
-  columns = 12,
-  loadingComponent,
-  loading = false,
-  spacing: _spacing,
-  wrapper = false,
-  alignContent,
-  alignItems,
-  alignSelf,
-  flex,
-  flexDirection,
-  flexGrow,
-  flexShrink,
-  justifyContent,
-  flexBasis,
-  style,
-  ...rest
-}: IGridItemNative): JSX.Element => {
-  const { spacing } = useTheme();
-  if (!React.Children.only(children)) {
-    throw new Error('The number of children in GridItem should be one');
-  }
-  if (loadingComponent && loading) {
-    return loadingComponent;
-  }
-
-  const _style = {
-    alignContent,
-    alignItems,
-    alignSelf,
-    flex,
-    flexDirection,
-    flexGrow,
-    flexShrink,
-    justifyContent,
-    boxSizing: 'border-box',
-    flexBasis: flexBasis ?? `${getGridItemColumSpan(columns, span)}%`,
-    paddingTop: getGridItemPadding('top', _spacing, spacing),
-    paddingBottom: getGridItemPadding('bottom', _spacing, spacing),
-    paddingRight: getGridItemPadding('right', _spacing, spacing),
-    paddingLeft: getGridItemPadding('left', _spacing, spacing),
-  };
-
-  const clone = React.cloneElement(children, {
-    ...children?.props,
-    style: wrapper
-      ? children?.props.style
-      : { ..._style, ...children?.props.style },
-  });
-
-  return wrapper ? (
-    <View {...rest} style={[style, _style]}>
-      {clone}
-    </View>
-  ) : (
-    clone
-  );
-};
-
-export default GridItem;

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

@@ -1 +0,0 @@
-export { default as GridItem, IGridItemNative } from './Item';

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

@@ -1,2 +0,0 @@
-export { GridItem } from './Item';
-export { default as Grid } from './Grid';

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

@@ -1,55 +0,0 @@
-import {
-  fontColorVC,
-  IconComponent,
-  IconTextButtonProps,
-} from '@tecsinapse/react-core';
-import React from 'react';
-import { ButtonNativeProps } from '../../atoms/Button';
-import { StyledIconTextButton } from './styled';
-import TextComponent from './TextComponent';
-
-export type NativeIconTextButtonProps = IconTextButtonProps &
-  Omit<ButtonNativeProps, 'ButtonProps'>;
-
-const IconTextButton: React.FC<NativeIconTextButtonProps> = ({
-  iconProps,
-  iconPosition = 'left',
-  textProps,
-  label,
-  variant = 'filled',
-  size = 'default',
-  ...rest
-}) => {
-  return (
-    <StyledIconTextButton boxed={!label} variant={variant} {...rest}>
-      {iconPosition === 'left' ? (
-        <IconComponent
-          iconProps={iconProps}
-          size={size}
-          defaultFontColor={fontColorVC[variant]}
-        />
-      ) : (
-        <></>
-      )}
-      <TextComponent
-        label={label}
-        defaultFontColor={fontColorVC[variant]}
-        hasIcon={!!iconProps}
-        iconPosition={iconPosition}
-        textProps={textProps}
-        size={size}
-      />
-      {iconPosition === 'right' ? (
-        <IconComponent
-          iconProps={iconProps}
-          size={size}
-          defaultFontColor={fontColorVC[variant]}
-        />
-      ) : (
-        <></>
-      )}
-    </StyledIconTextButton>
-  );
-};
-
-export default IconTextButton;