@tecsinapse/react-native-kit 1.22.1-beta.8 → 1.22.2

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { BorderRadiusType } from '@tecsinapse/react-core';
+import { LayoutChangeEvent, View, ViewProps } from 'react-native';
+import { Wrapper } from './styled';
+import { Wave } from './Wave';
+import { Pulse } from './Pulse';
+import { ChildrenLayout } from './types';
+
+export interface SkeletonProps extends ViewProps {
+  width?: number;
+  height?: number;
+  radius?: BorderRadiusType;
+  active?: boolean;
+  animation?: 'wave' | 'pulse';
+}
+
+const Skeleton: React.FC<SkeletonProps> = ({
+  children,
+  width,
+  height,
+  radius,
+  active = true,
+  animation = 'wave',
+  ...rest
+}) => {
+  const [childrenLayout, setChildrenLayout] = useState<ChildrenLayout>({
+    width: 0,
+    height: 0,
+    y: 0,
+    x: 0,
+  });
+
+  if (!width && !height && !children) {
+    throw new Error(
+      '[Skeleton] You should provide children or specify width and height'
+    );
+  }
+
+  const getChildrenLayout = (event: LayoutChangeEvent) => {
+    setChildrenLayout(event.nativeEvent.layout);
+  };
+
+  return (
+    <Wrapper width={width} height={height} radius={radius} {...rest}>
+      {active && animation === 'wave' ? (
+        <Wave
+          active={active}
+          width={width}
+          height={height}
+          childrenLayout={childrenLayout}
+        />
+      ) : (
+        <></>
+      )}
+
+      {active && animation === 'pulse' ? (
+        <Pulse
+          active={active}
+          width={width}
+          height={height}
+          childrenLayout={childrenLayout}
+        />
+      ) : (
+        <></>
+      )}
+      <View
+        onLayout={event => getChildrenLayout(event)}
+        style={{ opacity: active ? 0 : 1 }}
+        pointerEvents={active ? 'none' : 'auto'}
+      >
+        {children}
+      </View>
+    </Wrapper>
+  );
+};
+
+export default Skeleton;

package/src/components/atoms/Skeleton/Wave.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { waveAnimation } from './animation';
+import { IAnimationComponent } from './types';
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+
+export const Wave = ({
+  active = true,
+  width,
+  height,
+  childrenLayout,
+}: IAnimationComponent) => {
+  const range = width ?? childrenLayout.width;
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-range, range],
+  });
+
+  useEffect(() => {
+    waveAnimation(active, animatedValue);
+  }, [active]);
+
+  return (
+    <AnimatedLinearGradient
+      colors={[
+        'transparent',
+        'rgba(0,0,0,0.05)',
+        'rgba(0,0,0,0.1)',
+        'transparent',
+      ]}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 0 }}
+      style={{
+        width: width ?? childrenLayout.width,
+        height: height ?? childrenLayout.height,
+        position: 'absolute',
+        top: childrenLayout.y ?? 0,
+        left: childrenLayout.x ?? 0,
+        zIndex: 2,
+        overflow: 'hidden',
+        transform: [
+          {
+            translateX: translateX,
+          },
+        ],
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,49 @@
+import { Animated, Easing } from 'react-native';
+
+export const waveAnimation = (
+  active: boolean,
+  animatedValue: Animated.Value
+): void => {
+  if (active) {
+    Animated.loop(
+      Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: 1600,
+        easing: Easing.inOut(Easing.linear),
+        useNativeDriver: true,
+      })
+    ).start();
+    return;
+  }
+  Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true,
+  }).start();
+};
+
+export const pulseAnimation = (
+  active: boolean,
+  animatedValue: Animated.Value
+): void => {
+  if (active) {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+    return;
+  }
+  Animated.timing(animatedValue, {
+    toValue: 0,
+    useNativeDriver: true,
+  }).start();
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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