@tecsinapse/react-core 1.17.4 → 1.20.0

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

@@ -7,21 +7,26 @@ import { CalendarProps, DateRange, SelectionType } from '../Calendar';
 import { HintInputContainer } from '../HintInputContainer';
 import { CalendarIcon, getStyledTextComponent } from './styled';
 
-export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {
+export interface DatePickerProps<T extends SelectionType>
+  extends InputContainerProps,
+    Omit<CalendarProps<T>, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
   ) => JSX.Element;
   TextComponent?: React.FC<TextProps>;
-  CalendarComponent: React.FC<CalendarProps<T>>
+  CalendarComponent: React.FC<CalendarProps<T>>;
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
   format?: string;
   closeOnPick?: boolean;
-  renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element|null
-  requestShowCalendar: () => void
-  requestCloseCalendar: () => void
+  renderCalendar: (
+    calendar: React.ReactElement,
+    blur?: () => void
+  ) => JSX.Element | null;
+  requestShowCalendar: () => void;
+  requestCloseCalendar: () => void;
 }
 
 function DatePicker<T extends SelectionType>({
@@ -51,7 +56,6 @@ function DatePicker<T extends SelectionType>({
   requestCloseCalendar,
   ...rest
 }: DatePickerProps<T>): JSX.Element {
-  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
@@ -59,7 +63,7 @@ function DatePicker<T extends SelectionType>({
   );
 
   const handleShowCalendar = React.useCallback(() => {
-    requestShowCalendar()
+    requestShowCalendar();
     handleFocus();
   }, [handleFocus, requestShowCalendar]);
 
@@ -99,7 +103,7 @@ function DatePicker<T extends SelectionType>({
       onChange={onChange}
       locale={locale}
     />
-  )
+  );
 
   return (
     <>

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

@@ -1 +1,2 @@
-export { default as DatePicker, DatePickerProps } from './DatePicker';
+export { default as DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

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

@@ -7,7 +7,9 @@ import { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';
 import { HintInputContainer } from '../HintInputContainer';
 import { getStyledDateTimeSelector } from './styled';
 
-export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {
+export interface DateTimePickerProps
+  extends InputContainerProps,
+    Omit<DateTimeSelectorProps, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
@@ -17,9 +19,12 @@ export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeS
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
-  renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element|null
-  requestShowSelector: () => void
-  requestCloseSelector: () => void
+  renderSelector: (
+    selector: React.ReactElement,
+    blur?: () => void
+  ) => JSX.Element | null;
+  requestShowSelector: () => void;
+  requestCloseSelector: () => void;
 }
 
 const DateTimePicker: React.FC<DateTimePickerProps> = ({
@@ -59,7 +64,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   requestCloseSelector,
   ...rest
 }) => {
-  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
@@ -67,18 +71,22 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   );
 
   const handleShowSelector = () => {
-    requestShowSelector()
+    requestShowSelector();
     handleFocus();
   };
 
   const handleChoosing = (value: Date) => {
-    onChange?.(value)
-    requestCloseSelector()
+    onChange?.(value);
+    requestCloseSelector();
   };
 
   const StyledText = getStyledTextComponent(TextComponent);
-  const displayValue = (value ? formatDate(value, format, { locale: locale }) : placeholder) || ' ';
-  const StyledDateTimeSelector = getStyledDateTimeSelector(DateTimeSelectorComponent)
+  const displayValue =
+    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||
+    ' ';
+  const StyledDateTimeSelector = getStyledDateTimeSelector(
+    DateTimeSelectorComponent
+  );
 
   const dateTimeSelector = (
     <StyledDateTimeSelector
@@ -102,7 +110,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
       minuteLabel={minuteLabel}
       onChange={handleChoosing}
     />
-  )
+  );
 
   return (
     <>

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

@@ -1,4 +1,2 @@
-export {
-  default as DateTimePicker,
-  DateTimePickerProps,
-} from './DateTimePicker';
+export { default as DateTimePicker } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker';

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

@@ -99,7 +99,6 @@ const DateTimeSelector: React.FC<DateTimeSelectorProps> = ({
   value,
   onChange,
   mode = 'date',
-  format,
   locale,
   upperDateThreshold: _upperDateThreshold,
   lowerDateThreshold: _lowerDateThreshold,

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

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

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

@@ -0,0 +1,29 @@
+import {
+  extractNumbersFromString,
+  GridSpacing,
+  PaddingPosition,
+  Spacing,
+} from '@tecsinapse/react-core';
+
+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,2 +1,66 @@
-export { GridItem, IGridItem } from './Item';
-export { default as Grid, IGrid } from './Grid';
+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,6 +1,11 @@
 import * as React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
-import { Hint, InputVariantType, PressableInputContainer, PressableInputContainerProps } from '../../atoms/Input';
+import {
+  Hint,
+  InputVariantType,
+  PressableInputContainer,
+  PressableInputContainerProps,
+} from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
 
 export interface HintInputContainerProps extends PressableInputContainerProps {

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

@@ -0,0 +1,31 @@
+import {
+  ButtonSizeType,
+  FontColor,
+  Icon,
+  IconProps,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+
+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.tsx

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

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

@@ -0,0 +1,5 @@
+export { default as IconComponent } from './IconComponent';
+export type {
+  IconPositionOptions,
+  IconTextButtonProps,
+} from './IconTextButton';

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

@@ -0,0 +1,20 @@
+import styled, { css } from '@emotion/native';
+import { IconPositionOptions, StyleProps, Text } from '@tecsinapse/react-core';
+
+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/LabeledSwitch/LabeledSwitch.tsx

@@ -0,0 +1,9 @@
+import { SwitchProps } from '../../atoms/Switch';
+
+export type LabelPositionOptions = 'left' | 'right';
+
+export interface LabeledSwitchProps extends SwitchProps {
+  label: string;
+  labelPosition?: LabelPositionOptions;
+  pressableLabel?: boolean;
+}

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

@@ -0,0 +1 @@
+export type { LabeledSwitchProps, LabelPositionOptions } from './LabeledSwitch';

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -84,7 +84,7 @@ export const Snackbar: React.FC<SnackbarProps> = ({
       anchor={anchor}
       anchorDistance={anchorDistance}
       visible={open}
-      style={[{ opacity: (fadeAnim as unknown) as number }, style]}
+      style={[{ opacity: fadeAnim as unknown as number }, style]}
       timeout={timeout}
     >
       <StyledContainerFlexRow>

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

@@ -1 +1,2 @@
-export { default as Snackbar, SnackbarProps } from './Snackbar';
+export { default as Snackbar } from './Snackbar';
+export type { SnackbarProps } from './Snackbar';

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

@@ -32,7 +32,9 @@ const anchorTop = ({
   return (
     anchor === 'top' &&
     css`
-      top: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
+      top: ${anchorDistance
+        ? `${RFValue(anchorDistance)}px`
+        : theme.spacing.deca};
     `
   );
 };
@@ -45,7 +47,9 @@ const anchorBottom = ({
   return (
     anchor === 'bottom' &&
     css`
-      bottom: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
+      bottom: ${anchorDistance
+        ? `${RFValue(anchorDistance)}px`
+        : theme.spacing.deca};
     `
   );
 };

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,7 +1,11 @@
 import React, { FC } from 'react';
 import { View } from 'react-native';
-import { FontStackType, FontWeightType } from '../../../types/defaults';
-import { Hint, InputContainerProps, InputElementProps } from '../../atoms/Input';
+import { FontStackType, FontWeightType } from '@tecsinapse/react-core';
+import {
+  Hint,
+  InputContainerProps,
+  InputElementProps,
+} from '../../atoms/Input';
 import { Text, TextProps } from '../../atoms/Text';
 import { StyledInputContainer } from './styled';
 

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

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

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { StyleProps } from '../../../types/defaults';
+import { StyleProps } from '@tecsinapse/react-core';
 import { extractNumbersFromString, RFValue, RFValueStr } from '../../../utils';
 import { InputContainer, InputElement } from '../../atoms/Input';
 import { TextAreaProps } from './TextArea';
@@ -12,7 +12,10 @@ export const TextAreaInputBase = styled(InputElement)<
   Partial<TextAreaProps> & Partial<StyleProps>
 >`
   max-height: ${({ theme, numberOfLines }) =>
-    `${RFValue(extractNumbersFromString(theme.typography.h5.lineHeight) * (numberOfLines || 1))}px`};
+    `${RFValue(
+      extractNumbersFromString(theme.typography.h5.lineHeight) *
+        (numberOfLines || 1)
+    )}px`};
   width: 100%;
   padding: 0;
   margin: ${RFValueStr('3px')} 0;

package/src/index.ts

@@ -1,88 +1,116 @@
-export { Avatar, AvatarProps } from './components/atoms/Avatar';
-export { Badge, BadgeProps } from './components/atoms/Badge';
-export { BoxContent, BoxContentProps } from './components/atoms/BoxContent';
-export {
-  Button,
+export { Avatar } from './components/atoms/Avatar';
+export type { AvatarProps } from './components/atoms/Avatar';
+export { Badge } from './components/atoms/Badge';
+export type { BadgeProps } from './components/atoms/Badge';
+export { BoxContent } from './components/atoms/BoxContent';
+export type { BoxContentProps } from './components/atoms/BoxContent';
+export { Button, Error, Loading, Success } from './components/atoms/Button';
+export type {
   ButtonProps,
   ButtonSizeType,
   ButtonStateProps,
   ButtonStateType,
-  Error,
-  Loading,
-  Success,
 } from './components/atoms/Button';
-export { Card, CardProps } from './components/atoms/Card';
-export { Footer, FooterProps } from './components/atoms/Card/Footer';
-export { Header, HeaderProps } from './components/atoms/Card/Header';
-export { Checkbox, CheckboxProps } from './components/atoms/Checkbox';
-export { Divider, DividerProps } from './components/atoms/Divider';
-export {
-  GroupButton,
-  GroupButtonOption,
+export { Card } from './components/atoms/Card';
+export type { CardProps } from './components/atoms/Card';
+export { Footer } from './components/atoms/Card/Footer';
+export type { FooterProps } from './components/atoms/Card/Footer';
+export { Header } from './components/atoms/Card/Header';
+export type { HeaderProps } from './components/atoms/Card/Header';
+export { Checkbox } from './components/atoms/Checkbox';
+export type { CheckboxProps } from './components/atoms/Checkbox';
+export { Divider } from './components/atoms/Divider';
+export type { DividerProps } from './components/atoms/Divider';
+export { GroupButton, GroupButtonOption } from './components/atoms/GroupButton';
+export type {
   GroupButtonOptionProps,
   GroupButtonProps,
   GroupButtonValue,
 } from './components/atoms/GroupButton';
-export { Icon, IconProps } from './components/atoms/Icon';
+export { Icon } from './components/atoms/Icon';
+export type { IconProps } from './components/atoms/Icon';
 export {
+  disabledInputStyles,
   Hint,
   InputContainer,
-  InputContainerProps,
   InputElement,
-  InputElementProps,
   InputMaskElement,
-  InputMaskElementProps,
-  InputVariantType,
   PressableInputContainer,
-  PressableInputContainerProps,
   StyledBorderKeeper,
   useInputFocus,
   useNumberMask,
   useStringMask,
-  disabledInputStyles,
 } from './components/atoms/Input';
-export { Paper, PaperProps } from './components/atoms/Paper';
-export {
-  PressableSurface,
-  PressableSurfaceProps,
-} from './components/atoms/PressableSurface';
-export { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';
-export { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';
-export { Switch, SwitchProps } from './components/atoms/Switch';
-export { Tag, TagProps } from './components/atoms/Tag';
-export { Text, TextProps } from './components/atoms/Text';
-export {
-  Calendar,
+export type {
+  InputContainerProps,
+  InputElementProps,
+  InputMaskElementProps,
+  InputVariantType,
+  PressableInputContainerProps,
+} from './components/atoms/Input';
+export { Paper } from './components/atoms/Paper';
+export type { PaperProps } from './components/atoms/Paper';
+export { PressableSurface } from './components/atoms/PressableSurface';
+export type { PressableSurfaceProps } from './components/atoms/PressableSurface';
+export { ProgressBar } from './components/atoms/ProgressBar';
+export type { ProgressBarProps } from './components/atoms/ProgressBar';
+export { RadioButton } from './components/atoms/RadioButton';
+export type { RadioButtonProps } from './components/atoms/RadioButton';
+export { Switch } from './components/atoms/Switch';
+export type { SwitchProps } from './components/atoms/Switch';
+export { Tag } from './components/atoms/Tag';
+export type { TagProps } from './components/atoms/Tag';
+export { Text } from './components/atoms/Text';
+export type { TextProps } from './components/atoms/Text';
+export { Calendar } from './components/molecules/Calendar';
+export type {
   CalendarProps,
   DateRange,
   SelectionType,
   Value,
 } from './components/molecules/Calendar';
-export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
-export {
-  DateTimePicker,
-  DateTimePickerProps,
-} from './components/molecules/DateTimePicker';
-export {
-  DateTimeSelector,
+export { DatePicker } from './components/molecules/DatePicker';
+export type { DatePickerProps } from './components/molecules/DatePicker';
+export { DateTimePicker } from './components/molecules/DateTimePicker';
+export type { DateTimePickerProps } from './components/molecules/DateTimePicker';
+export { DateTimeSelector } from './components/molecules/DateTimeSelector';
+export type {
   DateTimeSelectorMode,
   DateTimeSelectorProps,
 } from './components/molecules/DateTimeSelector';
-export { InputPasswordIcon } from './components/molecules/InputPassword';
-export { Snackbar, SnackbarProps } from './components/molecules/Snackbar';
-export {
-  HintInputContainer,
-  HintInputContainerProps,
-} from './components/molecules/HintInputContainer';
 export {
-  TextArea,
-  TextAreaProps,
-  TextAreaInputBase,
-} from './components/molecules/TextArea';
-export { GridItem, Grid, IGridItem, IGrid } from './components/molecules/Grid';
+  getGridItemPadding,
+  getGridItemColumSpan,
+} from './components/molecules/Grid';
+export type {
+  GridSpacing,
+  IGridItem,
+  IGrid,
+  FlexAlignBase,
+  FlexAlignType,
+  FlexPositioning,
+  FlexSpacing,
+  PaddingPosition,
+} from './components/molecules/Grid';
+export { HintInputContainer } from './components/molecules/HintInputContainer';
+export type { HintInputContainerProps } from './components/molecules/HintInputContainer';
+export { IconComponent } from './components/molecules/IconTextButton';
+export type {
+  IconPositionOptions,
+  IconTextButtonProps,
+} from './components/molecules/IconTextButton';
+export { InputPasswordIcon } from './components/molecules/InputPassword';
+export type {
+  LabeledSwitchProps,
+  LabelPositionOptions,
+} from './components/molecules/LabeledSwitch';
+export { Snackbar } from './components/molecules/Snackbar';
+export type { SnackbarProps } from './components/molecules/Snackbar';
+export { TextArea, TextAreaInputBase } from './components/molecules/TextArea';
+export type { TextAreaProps } from './components/molecules/TextArea';
+export * from './hooks';
 export * from './styles/definitions';
 export * from './styles/light';
 export { default as ThemeProvider } from './styles/ThemeProvider';
 export * from './types/defaults';
 export * from './utils';
-export * from './hooks';

package/src/styles/definitions.ts

@@ -1,6 +1,7 @@
 import {
   BorderRadius,
   BorderWidth,
+  Breakpoints,
   FontColor,
   FontStack,
   FontWeight,
@@ -8,7 +9,7 @@ import {
   Miscellaneous,
   Spacing,
   TypographyVariation,
-  ZIndex
+  ZIndex,
 } from '../types/defaults';
 import { RFValueStr } from '../utils';
 
@@ -179,3 +180,9 @@ export type IconType =
   | 'antdesign'
   | 'font-awesome-5'
   | string;
+
+export const breakpoints: Breakpoints = {
+  sm: 480,
+  md: 768,
+  lg: 1366,
+};

package/src/styles/light.ts

@@ -2,6 +2,7 @@ import { ThemeProp } from '../types/defaults';
 import {
   borderRadius,
   borderWidth,
+  breakpoints,
   fontColor,
   fontFiles,
   fontStack,
@@ -51,4 +52,5 @@ export const lightTheme: ThemeProp = {
     files: fontFiles,
   },
   zIndex,
+  breakpoints,
 };