@tecsinapse/react-native-kit 1.18.5 → 1.20.0

package/src/components/atoms/Modal/ui/types.ts

@@ -1,13 +1,14 @@
-
 /**
  * Defines a modal interface and allows you implement your own modal component.
  */
+import React from 'react';
+
 export interface IBaseModal {
-    visible?: boolean
-    BoxComponent?: React.FC<any>
-    frozen?: boolean
-    isLastShown?: boolean
-    showCloseBar?: boolean
-    close?: () => void
-    onClose?: () => void
+  visible?: boolean;
+  BoxComponent?: React.FC<any>;
+  frozen?: boolean;
+  isLastShown?: boolean;
+  showCloseBar?: boolean;
+  close?: () => void;
+  onClose?: () => void;
 }

package/src/components/atoms/Modal/useLazyModalManager.ts

@@ -1,43 +1,44 @@
-import { ReactElement, useCallback, useEffect, useState } from "react"
-import { v4 as uuidv4 } from 'uuid'
-import { modalLifecycle } from "./ModalGroupManager"
-import { IBaseModal } from "./ui/types"
+import { ReactElement, useCallback, useEffect, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { modalLifecycle } from './ModalGroupManager';
+import { IBaseModal } from './ui/types';
 
 /**
  * Use this hook to tell the modal lifecycle handler that you want to add
- * a new modal component. 
- * 
- * @param id 
- * @param modal 
+ * a new modal component.
+ *
  * @returns
+ * @param modalId
  */
 export const useLazyModalManager = (modalId?: string) => {
+  const [id] = useState(modalId ?? uuidv4());
 
-    const [id] = useState(modalId ?? uuidv4())
+  const requestUpdate = useCallback(() => modalLifecycle.update(), []);
 
-    const requestUpdate = useCallback(() => modalLifecycle.update(), [])
+  const sync = useCallback(
+    (modal: ReactElement<IBaseModal>) => {
+      modalLifecycle.sync(id, () => modal);
+      return null;
+    },
+    [id]
+  );
 
-    const sync = useCallback((modal: ReactElement<IBaseModal>) => {
-        modalLifecycle.sync(id, () => modal)
-        return null
-    }, [id])
+  const show = useCallback(() => {
+    modalLifecycle.show(id);
+  }, [id]);
 
-    const show = useCallback(() => {
-        modalLifecycle.show(id)
-    }, [id])
+  const close = useCallback(() => {
+    modalLifecycle.close(id);
+  }, [id]);
 
-    const close = useCallback(() => {
-        modalLifecycle.close(id)
-    }, [id])
-    
-    useEffect(() => {
-        return () => modalLifecycle.destroy(id)
-    }, [])
+  useEffect(() => {
+    return () => modalLifecycle.destroy(id);
+  }, []);
 
-    return {
-        requestUpdate,
-        sync,
-        show,
-        close
-    }
-}
+  return {
+    requestUpdate,
+    sync,
+    show,
+    close,
+  };
+};

package/src/components/atoms/Modal/useModalManager.ts

@@ -1,35 +1,37 @@
-import { ReactElement, useCallback, useEffect, useState } from "react"
-import { v4 as uuidv4 } from 'uuid'
-import { modalLifecycle } from "./ModalGroupManager"
-import { IBaseModal } from "./ui/types"
+import { ReactElement, useCallback, useEffect, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { modalLifecycle } from './ModalGroupManager';
+import { IBaseModal } from './ui/types';
 
 /**
  * Use this hook to tell the modal lifecycle handler that you want to add
- * a new modal component. 
- * 
- * @param id 
- * @param modal 
+ * a new modal component.
+ *
+ * @param id
+ * @param modal
  * @returns
  */
-export const useModalManager = (modal: () => ReactElement<IBaseModal>, modalId?: string) => {
+export const useModalManager = (
+  modal: () => ReactElement<IBaseModal>,
+  modalId?: string
+) => {
+  const [id] = useState(modalId ?? uuidv4());
+  modalLifecycle.sync(id, modal);
 
-    const [id] = useState(modalId ?? uuidv4())
-    modalLifecycle.sync(id, modal)
+  const show = useCallback(() => {
+    modalLifecycle.show(id);
+  }, [id]);
 
-    const show = useCallback(() => {
-        modalLifecycle.show(id)
-    }, [id])
+  const close = useCallback(() => {
+    modalLifecycle.close(id);
+  }, [id]);
 
-    const close = useCallback(() => {
-        modalLifecycle.close(id)
-    }, [id])
-    
-    useEffect(() => {
-        return () => modalLifecycle.destroy(id)
-    }, [])
+  useEffect(() => {
+    return () => modalLifecycle.destroy(id);
+  }, []);
 
-    return {
-        show,
-        close
-    }
-}
+  return {
+    show,
+    close,
+  };
+};

package/src/components/atoms/Modal/useModalRemoteControl.ts

@@ -1,26 +1,24 @@
-import { useCallback } from "react"
-import { modalLifecycle } from "./ModalGroupManager"
+import { useCallback } from 'react';
+import { modalLifecycle } from './ModalGroupManager';
 
 /**
  * Use it to control a specific modal wherever it's.
  * Just provide an id of a specific instance.
- * 
- * @param modalId 
- * @returns 
+ *
+ * @param modalId
+ * @returns
  */
 export const useModalRemoteControl = (modalId: string) => {
+  const show = useCallback(() => {
+    modalLifecycle.show(modalId);
+  }, [modalId]);
 
-    const show = useCallback(() => {
-        modalLifecycle.show(modalId)
-    }, [modalId])
+  const close = useCallback(() => {
+    modalLifecycle.close(modalId);
+  }, [modalId]);
 
-    const close = useCallback(() => {
-        modalLifecycle.close(modalId)
-    }, [modalId])
-
-    return {
-        show,
-        close
-    }
-
-}
+  return {
+    show,
+    close,
+  };
+};

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

@@ -1,4 +1,8 @@
-import { Calendar as CalendarCore, CalendarProps, SelectionType } from '@tecsinapse/react-core';
+import {
+  Calendar as CalendarCore,
+  CalendarProps,
+  SelectionType,
+} from '@tecsinapse/react-core';
 import React from 'react';
 import { getLocale } from '../../../utils/date';
 import { Text } from '../../atoms/Text';

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

@@ -1,5 +1,8 @@
 import {
-  DatePicker as DatePickerCore, DatePickerProps, SelectionType, Value
+  DatePicker as DatePickerCore,
+  DatePickerProps,
+  SelectionType,
+  Value,
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
 import { getLocale } from '../../../utils/date';
@@ -8,17 +11,26 @@ 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 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 => {
+export const DatePicker = <T extends SelectionType>({
+  locale,
+  onChange,
+  ...rest
+}: NativeDatePickerProps<T>): JSX.Element => {
+  const modal = useLazyModalManager();
 
-  const modal = useLazyModalManager()
-  
   const handleChange = (value?: Value<T>) => {
-    onChange?.(value)
-    modal.requestUpdate()
-  }
-  
+    onChange?.(value);
+    modal.requestUpdate();
+  };
+
   return (
     <DatePickerCore
       {...rest}
@@ -28,14 +40,11 @@ export const DatePicker = <T extends SelectionType>({ locale, onChange, ...rest
       onChange={handleChange}
       requestShowCalendar={() => modal.show()}
       requestCloseCalendar={() => modal.close()}
-      renderCalendar={(calendar, blur) => modal.sync(
-        <NativeModal onClose={blur}>
-          {calendar}
-        </NativeModal>
-      )}
+      renderCalendar={(calendar, blur) =>
+        modal.sync(<NativeModal onClose={blur}>{calendar}</NativeModal>)
+      }
     />
   );
-
 };
 
 const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
@@ -43,5 +52,5 @@ const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
     <ModalView BoxComponent={CalendarBoxContent} {...others}>
       {children}
     </ModalView>
-  )
-}
+  );
+};

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

@@ -1,6 +1,6 @@
-import styled from "@emotion/native";
-import { BoxContent, StyleProps } from "@tecsinapse/react-core";
+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};
-`
+  background-color: ${({ theme }) => theme.color.secondary.xlight};
+`;

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

@@ -1,6 +1,6 @@
 import {
   DateTimePicker as DateTimePickerCore,
-  DateTimePickerProps
+  DateTimePickerProps,
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
 import { getLocale } from '../../../utils/date';
@@ -8,11 +8,19 @@ 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 type NativeDateTimePickerProps = Omit<
+  DateTimePickerProps,
+  | 'DateTimeSelectorComponent'
+  | 'renderSelector'
+  | 'requestCloseSelector'
+  | 'requestShowSelector'
+>;
 
-export const DateTimePicker: FC<NativeDateTimePickerProps> = ({ locale, ...rest }) => {
-
-  const modal = useLazyModalManager()
+export const DateTimePicker: FC<NativeDateTimePickerProps> = ({
+  locale,
+  ...rest
+}) => {
+  const modal = useLazyModalManager();
 
   return (
     <DateTimePickerCore
@@ -22,19 +30,13 @@ export const DateTimePicker: FC<NativeDateTimePickerProps> = ({ locale, ...rest
       locale={locale ?? getLocale()}
       requestShowSelector={() => modal.show()}
       requestCloseSelector={() => modal.close()}
-      renderSelector={(selector, blur) => modal.sync(
-        <NativeModal onClose={blur}>
-          {selector}
-        </NativeModal>
-      )}
+      renderSelector={(selector, blur) =>
+        modal.sync(<NativeModal onClose={blur}>{selector}</NativeModal>)
+      }
     />
   );
 };
 
 const NativeModal: FC<IBaseModal> = ({ children, ...others }) => {
-  return (
-    <ModalView {...others}>
-      {children}
-    </ModalView>
-  )
-}
+  return <ModalView {...others}>{children}</ModalView>;
+};

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

@@ -6,7 +6,10 @@ import React, { FC } from 'react';
 import { Text } from '../../atoms/Text';
 import { getLocale } from '../../../utils/date';
 
-export const DateTimeSelector: FC<DateTimeSelectorProps> = ({locale, ...rest}) => {
+export const DateTimeSelector: FC<DateTimeSelectorProps> = ({
+  locale,
+  ...rest
+}) => {
   return (
     <DateTimeSelectorCore
       {...rest}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+import {
+  ButtonSizeType,
+  FontColor,
+  IconPositionOptions,
+  TextProps,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { StyledText } from './styled';
+
+interface TextComponentProps {
+  textProps?: TextProps;
+  size?: ButtonSizeType;
+  defaultFontColor: keyof FontColor;
+  label?: string;
+  iconPosition?: IconPositionOptions;
+  hasIcon?: boolean;
+}
+
+const TextComponent: FC<TextComponentProps> = ({
+  textProps,
+  size = 'default',
+  defaultFontColor,
+  label,
+  iconPosition = 'left',
+  hasIcon = false,
+}) => {
+  return label ? (
+    <StyledText
+      typography={textProps?.typography ?? size === 'small' ? 'sub' : 'base'}
+      fontWeight={textProps?.fontWeight ?? 'bold'}
+      fontColor={textProps?.fontColor ?? defaultFontColor}
+      iconPosition={iconPosition}
+      hasIcon={hasIcon}
+      {...textProps}
+    >
+      {label}
+    </StyledText>
+  ) : (
+    <></>
+  );
+};
+
+export default React.memo(TextComponent);

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

@@ -0,0 +1,4 @@
+export {
+  default as IconTextButton,
+  NativeIconTextButtonProps,
+} from './IconTextButton';

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

@@ -0,0 +1,35 @@
+import styled, { css } from '@emotion/native';
+import { IconPositionOptions, StyleProps } from '@tecsinapse/react-core';
+import { Button } from '../../atoms/Button';
+import { Text } from '../../atoms/Text';
+
+const boxedStyle = ({ theme }: Partial<StyleProps>) => `
+    padding: ${theme?.spacing.centi};
+    aspect-ratio: 1;
+  `;
+
+export const StyledIconTextButton = styled(Button)<
+  Partial<StyleProps> & {
+    boxed: boolean;
+  }
+>`
+  ${({ boxed, theme }) => boxed && boxedStyle({ theme })};
+`;
+
+export const StyledText = styled(Text)<
+  Partial<StyleProps> & {
+    iconPosition: IconPositionOptions;
+    hasIcon?: boolean;
+  }
+>`
+  ${({ theme, iconPosition, hasIcon = false }) => {
+    if (hasIcon && iconPosition === 'left')
+      return css`
+        margin-left: ${theme?.spacing.mili};
+      `;
+    else if (hasIcon && iconPosition === 'right')
+      return css`
+        margin-right: ${theme?.spacing.mili};
+      `;
+  }}
+`;

package/src/components/molecules/InputPassword/InputPassword.tsx

@@ -1,10 +1,11 @@
 import { InputPasswordIcon } from '@tecsinapse/react-core';
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { Input, InputNativeProps } from '../../atoms/Input';
+import { TextInput } from 'react-native';
 
 export type InputPasswordNativeProps = InputNativeProps;
 
-const InputPassword: FC<InputPasswordNativeProps> = React.forwardRef(
+const InputPassword = React.forwardRef<TextInput, InputPasswordNativeProps>(
   ({ rightComponent, ...rest }, ref) => {
     const [revealed, setRevealed] = useState(false);
     return (