@fattureincloud-mobile/fic-mobile-ds 1.0.0 → 1.2.0

package/src/components/buttons/FicButton/FicButtonIcon.tsx

@@ -0,0 +1,161 @@
+// @ts-ignore TS6133
+import * as React from 'react';
+import { FunctionComponent, useCallback, useMemo, useState } from 'react';
+import {
+  GestureResponderEvent,
+  Platform,
+  Pressable as PressableIOS,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { TouchableHighlight } from 'react-native-gesture-handler';
+import { useTheme } from '../../../hooks/useTheme';
+import { Icon } from '../../../providers/IconProvider';
+import {
+  FicButtonThemeProps,
+  FicIconProps,
+  onPressType,
+} from './FicButton.types';
+import { DEFAULT_ICON, DEFAULT_ICON_SIZE, HIT_SLOP } from './constants';
+
+const FicButtonIcon: FunctionComponent<FicIconProps> = ({
+  iconName,
+  iconSize: _iconSize,
+  disabled,
+  error,
+  onPress,
+  onPressIn,
+  onPressOut,
+  containerStyle,
+  customPressedIconAreaSize,
+  colorContrastForLightTheme,
+  solid,
+  light,
+  duotone,
+  regular,
+}) => {
+  const Pressable = Platform.OS === 'ios' ? PressableIOS : TouchableHighlight;
+
+  const INCREMENT_PRESSED_AREA_SIZE = 16;
+  const iconSize = _iconSize ?? DEFAULT_ICON_SIZE;
+
+  const { ficButton: theme } = useTheme() || {};
+
+  const buttonTheme = (theme?.['icon'] as FicButtonThemeProps) || {};
+  const themeProps = disabled
+    ? buttonTheme.disabled
+    : error
+    ? buttonTheme.error
+    : buttonTheme.default;
+
+  const [isPressed, setIsPressed] = useState(false);
+
+  const pressedAreaSize = useMemo(
+    () =>
+      customPressedIconAreaSize
+        ? customPressedIconAreaSize
+        : iconSize + INCREMENT_PRESSED_AREA_SIZE,
+    [iconSize, customPressedIconAreaSize]
+  );
+
+  const pressableAreaStyle: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      position: 'absolute',
+      top: ((pressedAreaSize - iconSize) / 2) * -1,
+      left: ((pressedAreaSize - iconSize) / 2) * -1,
+      width: pressedAreaSize ?? iconSize,
+      height: pressedAreaSize ?? iconSize,
+      borderRadius: pressedAreaSize / 6,
+      ...themeProps?.pressedStyle?.container,
+    }),
+    [iconSize, pressedAreaSize, themeProps]
+  );
+
+  const iconStyle: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      textAlign: 'center',
+      lineHeight: iconSize,
+      width: iconSize,
+      height: iconSize,
+      fontSize: iconSize
+        ? iconSize === 16
+          ? iconSize - 2
+          : iconSize - 4
+        : DEFAULT_ICON_SIZE,
+    }),
+    [iconSize]
+  );
+
+  const iconColor = useMemo(() => {
+    return colorContrastForLightTheme && !error
+      ? themeProps?.icon.colorContrastForLightTheme
+        ? themeProps?.icon.colorContrastForLightTheme
+        : themeProps?.icon.color
+      : themeProps?.icon.color;
+  }, [colorContrastForLightTheme, error, themeProps]);
+
+  const handleOnPressIn: onPressType = (
+    e: GestureResponderEvent | undefined
+  ) => {
+    if (onPressIn) onPressIn(e);
+    setIsPressed(true);
+  };
+
+  const handleOnPressOut: onPressType = (
+    e: GestureResponderEvent | undefined
+  ) => {
+    if (onPressOut) onPressOut(e);
+    setIsPressed(false);
+  };
+
+  const handleOnPress: onPressType = (e: GestureResponderEvent | undefined) => {
+    if (onPress) onPress(e);
+  };
+
+  const FicIcon = useCallback(
+    () => (
+      <Icon
+        name={iconName ?? DEFAULT_ICON}
+        solid={solid}
+        light={light}
+        duotone={duotone}
+        regular={regular}
+        size={iconSize}
+        color={iconColor}
+        style={iconStyle}
+      />
+    ),
+    [
+      iconName,
+      iconSize,
+      colorContrastForLightTheme,
+      error,
+      iconStyle,
+      themeProps,
+      solid,
+      light,
+      regular,
+      duotone,
+    ]
+  );
+
+  return (
+    <View style={{ width: _iconSize, height: _iconSize }}>
+      {isPressed ? <View style={[pressableAreaStyle]} /> : null}
+      <Pressable
+        style={[themeProps?.container, containerStyle]}
+        onPress={handleOnPress}
+        onPressIn={handleOnPressIn}
+        onPressOut={handleOnPressOut}
+        hitSlop={HIT_SLOP}
+        disabled={disabled}
+        underlayColor={'transparent'}
+      >
+        {FicIcon()}
+      </Pressable>
+    </View>
+  );
+};
+
+export default FicButtonIcon;

package/src/components/buttons/FicButton/FicButtonPrimary.tsx

@@ -0,0 +1,167 @@
+import * as React from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import {
+  GestureResponderEvent,
+  Platform,
+  Pressable,
+  StyleProp,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { TouchableHighlight } from 'react-native-gesture-handler';
+import { useTheme } from '../../../hooks/useTheme';
+import { Icon } from '../../../providers/IconProvider';
+import { BORDER_RADIUS, PADDING } from '../../../styles/space';
+import { Body } from '../../typographies/Body';
+import {
+  BUTTON_INTERNAL_PADDING_HORIZONTAL,
+  DEFAULT_ICON,
+  DEFAULT_ICON_SIZE,
+  DEFAULT_TITLE,
+  ICON_HORIZONTAL_MARGIN,
+} from './constants';
+import {
+  FicButtonTextProps,
+  FicButtonThemeProps,
+  onPressType,
+} from './FicButton.types';
+
+const FicButtonPrimary: React.FC<FicButtonTextProps> = ({
+  title,
+  iconName,
+  iconSize,
+  onPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  error,
+  iconPosition,
+  fullWidth,
+  small,
+  solid,
+  regular,
+  light,
+  duotone,
+  containerStyle,
+}) => {
+  const { ficButton: theme } = useTheme() || {};
+
+  const buttonTheme = (theme?.['primary'] as FicButtonThemeProps) || {};
+  const themeProps = disabled
+    ? buttonTheme.disabled
+    : error
+    ? buttonTheme.error
+    : buttonTheme.default;
+  const containerStyleObj = containerStyle ?? {};
+
+  const [isPressed, setIsPressed] = useState(false);
+
+  const styleBasedOnPress: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      ...(isPressed && !disabled
+        ? themeProps?.pressedStyle?.container
+        : themeProps?.container),
+    }),
+    [disabled, themeProps, isPressed]
+  );
+
+  const ficPrimaryViewStyle: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      paddingHorizontal: BUTTON_INTERNAL_PADDING_HORIZONTAL,
+      paddingVertical: small ? PADDING.SM : PADDING.LG,
+      width: fullWidth ? '100%' : 'auto',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }),
+    [fullWidth, small]
+  );
+
+  const bodyStyle: StyleProp<TextStyle> = useMemo(
+    () => ({
+      marginLeft: iconPosition === 'left' ? ICON_HORIZONTAL_MARGIN : 0,
+      marginRight: iconPosition === 'right' ? ICON_HORIZONTAL_MARGIN : 0,
+      ...(isPressed && !disabled
+        ? themeProps?.pressedStyle?.text
+        : themeProps?.text),
+    }),
+    [iconPosition, themeProps, disabled, isPressed]
+  );
+
+  const handleOnPressIn: onPressType = (
+    e: GestureResponderEvent | undefined
+  ) => {
+    if (onPressIn) onPressIn(e);
+    setIsPressed(true);
+  };
+
+  const handleOnPressOut: onPressType = (
+    e: GestureResponderEvent | undefined
+  ) => {
+    if (onPressOut) onPressOut(e);
+    setIsPressed(false);
+  };
+
+  const handleOnPress: onPressType = (e: GestureResponderEvent | undefined) => {
+    if (onPress) {
+      onPress(e);
+    }
+  };
+
+  const FicPrimary = useCallback(() => {
+    return (
+      <View style={ficPrimaryViewStyle}>
+        {iconPosition === 'left' ? (
+          <Icon
+            name={iconName || DEFAULT_ICON}
+            size={iconSize ?? DEFAULT_ICON_SIZE}
+            color={themeProps?.icon.color}
+            solid={solid}
+            regular={regular}
+            light={light}
+            duotone={duotone}
+          />
+        ) : null}
+        <Body text={title ?? DEFAULT_TITLE} style={bodyStyle} />
+        {iconPosition === 'right' ? (
+          <Icon
+            name={iconName || DEFAULT_ICON}
+            size={iconSize ?? DEFAULT_ICON_SIZE}
+            color={themeProps?.icon.color}
+            solid={solid}
+            regular={regular}
+            light={light}
+            duotone={duotone}
+          />
+        ) : null}
+      </View>
+    );
+  }, [iconPosition, iconName, iconSize, bodyStyle, title, ficPrimaryViewStyle, themeProps, solid, regular, light, duotone]);
+
+  return Platform.OS === 'android' ? (
+    <TouchableHighlight
+      disabled={disabled}
+      containerStyle={[containerStyleObj]}
+      style={[{ borderRadius: BORDER_RADIUS.SM }, styleBasedOnPress]}
+      onPress={handleOnPress}
+      onPressIn={handleOnPressIn}
+      onPressOut={handleOnPressOut}
+      underlayColor={themeProps?.pressedStyle?.container.backgroundColor}
+    >
+      {FicPrimary()}
+    </TouchableHighlight>
+  ) : (
+    <Pressable
+      disabled={disabled}
+      style={[styleBasedOnPress, containerStyleObj]}
+      onPress={handleOnPress}
+      onPressIn={handleOnPressIn}
+      onPressOut={handleOnPressOut}
+    >
+      {FicPrimary()}
+    </Pressable>
+  );
+};
+
+export default FicButtonPrimary;

package/src/components/buttons/FicButton/FicButtonSecondary.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import {
+  GestureResponderEvent,
+  Platform,
+  Pressable,
+  StyleProp,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { TouchableHighlight } from 'react-native-gesture-handler';
+import { useTheme } from '../../../hooks/useTheme';
+import { Icon } from '../../../providers/IconProvider';
+import { BORDER_RADIUS, PADDING } from '../../../styles/space';
+import { Body } from '../../typographies/Body';
+import {
+  BUTTON_INTERNAL_PADDING_HORIZONTAL,
+  DEFAULT_ICON,
+  DEFAULT_ICON_SIZE,
+  DEFAULT_TITLE,
+  ICON_HORIZONTAL_MARGIN,
+} from './constants';
+import {
+  FicButtonTextProps,
+  FicButtonThemeProps,
+  onPressType,
+} from './FicButton.types';
+
+const FicButtonSecondary: React.FC<FicButtonTextProps> = ({
+  title,
+  iconName,
+  iconSize,
+  onPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  error,
+  iconPosition,
+  fullWidth,
+  small,
+  solid,
+  regular,
+  light,
+  duotone,
+  containerStyle,
+}) => {
+  const { ficButton: theme } = useTheme() || {};
+
+  const buttonTheme = (theme?.['secondary'] as FicButtonThemeProps) || {};
+  const themeProps = disabled
+    ? buttonTheme.disabled
+    : error
+    ? buttonTheme.error
+    : buttonTheme.default;
+  const containerStyleObj = containerStyle ?? {};
+
+  const [isPressed, setIsPressed] = useState(false);
+
+  const styleBasedOnPress: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      ...(isPressed && !disabled
+        ? themeProps?.pressedStyle?.container
+        : themeProps?.container),
+    }),
+    [themeProps, disabled, isPressed]
+  );
+
+  const ficSecondaryViewStyle: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      paddingHorizontal: BUTTON_INTERNAL_PADDING_HORIZONTAL,
+      width: fullWidth ? '100%' : 'auto',
+      // removing 1 borderWidth to match primary button height
+      paddingVertical:
+        (small ? PADDING.SM : PADDING.LG) -
+        (themeProps?.container?.borderWidth || 0),
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }),
+    [fullWidth, themeProps]
+  );
+
+  const bodyStyle: StyleProp<TextStyle> = useMemo(
+    () => ({
+      marginLeft: iconPosition === 'left' ? ICON_HORIZONTAL_MARGIN : 0,
+      marginRight: iconPosition === 'right' ? ICON_HORIZONTAL_MARGIN : 0,
+      ...(isPressed && !disabled
+        ? themeProps?.pressedStyle?.text
+        : themeProps?.text),
+    }),
+    [themeProps, iconPosition, disabled, isPressed]
+  );
+
+  const handleOnPressIn: onPressType = (
+    e: GestureResponderEvent | undefined
+  ) => {
+    if (onPressIn) onPressIn(e);
+    setIsPressed(true);
+  };
+
+  const handleOnPressOut: onPressType = (
+    e: GestureResponderEvent | undefined
+  ) => {
+    if (onPressOut) onPressOut(e);
+    setIsPressed(false);
+  };
+
+  const handleOnPress: onPressType = (e: GestureResponderEvent | undefined) => {
+    if (onPress) onPress(e);
+  };
+
+  const FicSecondary = useCallback(() => {
+    return (
+      <View style={ficSecondaryViewStyle}>
+        {iconPosition === 'left' ? (
+          <Icon
+            name={iconName || DEFAULT_ICON}
+            size={iconSize ?? DEFAULT_ICON_SIZE}
+            color={themeProps?.icon.color}
+            solid={solid}
+            regular={regular}
+            light={light}
+            duotone={duotone}
+          />
+        ) : null}
+        <Body text={title ?? DEFAULT_TITLE} style={bodyStyle} />
+        {iconPosition === 'right' ? (
+          <Icon
+            name={iconName || DEFAULT_ICON}
+            size={iconSize ?? DEFAULT_ICON_SIZE}
+            color={themeProps?.icon.color}
+            solid={solid}
+            regular={regular}
+            light={light}
+            duotone={duotone}
+          />
+        ) : null}
+      </View>
+    );
+  }, [iconPosition, iconName, iconSize, bodyStyle, title]);
+
+  return Platform.OS === 'android' ? (
+    <TouchableHighlight
+      disabled={disabled}
+      containerStyle={containerStyleObj}
+      style={[{ borderRadius: BORDER_RADIUS.SM }, styleBasedOnPress]}
+      onPress={handleOnPress}
+      onPressIn={handleOnPressIn}
+      onPressOut={handleOnPressOut}
+      underlayColor={themeProps?.pressedStyle?.container.backgroundColor}
+    >
+      {FicSecondary()}
+    </TouchableHighlight>
+  ) : (
+    <Pressable
+      style={[styleBasedOnPress, containerStyleObj]}
+      onPress={handleOnPress}
+      onPressIn={handleOnPressIn}
+      onPressOut={handleOnPressOut}
+      disabled={disabled}
+    >
+      {FicSecondary()}
+    </Pressable>
+  );
+};
+
+export default FicButtonSecondary;

package/src/components/buttons/FicButton/FicButtonTertiary.tsx

@@ -0,0 +1,188 @@
+import * as React from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import {
+  GestureResponderEvent,
+  Platform,
+  Pressable as PressableIOS,
+  StyleProp,
+  TextStyle,
+  View,
+  ViewStyle
+} from 'react-native';
+import { TouchableHighlight } from 'react-native-gesture-handler';
+import { useTheme } from '../../../hooks/useTheme';
+import { Icon } from '../../../providers/IconProvider';
+import { PADDING } from '../../../styles/space';
+import { Body } from '../../typographies/Body';
+import { DEFAULT_ICON, DEFAULT_ICON_SIZE, DEFAULT_TITLE, HIT_SLOP, ICON_HORIZONTAL_MARGIN } from './constants';
+import { FicButtonTextProps, FicButtonThemeProps, onPressType } from './FicButton.types';
+
+const FicButtonTertiary: React.FC<FicButtonTextProps> = ({
+  title,
+  iconName,
+  iconSize,
+  onPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  error,
+  iconPosition,
+  colorContrastForLightTheme,
+  fullWidth,
+  small,
+  solid,
+  regular,
+  light,
+  duotone,
+  containerStyle
+}) => {
+  const { ficButton: theme } = useTheme() || {};
+
+  const Pressable = Platform.OS === 'ios' ? PressableIOS : TouchableHighlight;
+
+  const buttonTheme = (theme?.['tertiary'] as FicButtonThemeProps) || {};
+  const themeProps = disabled ? buttonTheme.disabled : error ? buttonTheme.error : buttonTheme.default;
+  const _containerStyle = containerStyle ?? {};
+
+  const [isPressed, setIsPressed] = useState(false);
+
+  const iconColor = useMemo(() => {
+    return colorContrastForLightTheme && !error
+      ? themeProps?.icon.colorContrastForLightTheme
+        ? themeProps?.icon.colorContrastForLightTheme
+        : themeProps?.icon.color
+      : themeProps?.icon.color;
+  }, [themeProps, colorContrastForLightTheme, error]);
+
+  const bodyColor = useMemo(() => {
+    return colorContrastForLightTheme && !error
+      ? themeProps?.text.colorContrastForLightTheme
+        ? themeProps?.text.colorContrastForLightTheme
+        : themeProps?.text.color
+      : themeProps?.text.color;
+  }, [themeProps, colorContrastForLightTheme, error]);
+
+  const bodyStyle: StyleProp<TextStyle> = useMemo(
+    () => ({
+      marginLeft: iconPosition === 'left' ? ICON_HORIZONTAL_MARGIN : 0,
+      marginRight: iconPosition === 'right' ? ICON_HORIZONTAL_MARGIN : 0,
+      textDecorationLine: themeProps?.text.textDecorationLine ?? 'underline'
+    }),
+    [themeProps, iconPosition, isPressed, disabled]
+  );
+
+  const tertiaryPressedAreaStyle: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      top: small ? -PADDING.SM : -PADDING.LG,
+      bottom: small ? -PADDING.SM : -PADDING.LG,
+      left: fullWidth ? 0 : PADDING.LG * -1,
+      right: fullWidth ? 0 : PADDING.LG * -1,
+      position: 'absolute',
+      ...themeProps?.pressedStyle?.container
+    }),
+    [small, themeProps, fullWidth]
+  );
+
+  const dynamicContainerStyle: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      paddingTop: small ? PADDING.SM : PADDING.LG,
+      paddingBottom: small ? PADDING.SM : PADDING.LG,
+      width: '100%',
+      ...(isPressed ? themeProps?.pressedStyle?.container : themeProps?.container)
+    }),
+    [disabled, themeProps, isPressed]
+  );
+
+  const dynamicContainerStyleContainer: StyleProp<ViewStyle> = useMemo(
+    () => ({
+      width: '100%',
+      ...(isPressed ? themeProps?.pressedStyle?.container : themeProps?.container)
+    }),
+    [disabled, themeProps, isPressed]
+  );
+
+  const handleOnPressIn: onPressType = (e: GestureResponderEvent | undefined) => {
+    if (onPressIn) onPressIn(e);
+    setIsPressed(true);
+  };
+
+  const handleOnPressOut: onPressType = (e: GestureResponderEvent | undefined) => {
+    if (onPressOut) onPressOut(e);
+    setIsPressed(false);
+  };
+
+  const handleOnPress: onPressType = (e: GestureResponderEvent | undefined) => {
+    if (onPress) onPress(e);
+  };
+
+  const FicTertiary = useCallback(() => {
+    return (
+      <>
+        {iconPosition === 'left' ? (
+          <Icon
+            name={iconName || DEFAULT_ICON}
+            size={iconSize ?? DEFAULT_ICON_SIZE}
+            color={iconColor}
+            solid={solid}
+            regular={regular}
+            light={light}
+            duotone={duotone}
+          />
+        ) : null}
+        <Body text={title ?? DEFAULT_TITLE} style={bodyStyle} color={bodyColor} />
+        {iconPosition === 'right' ? (
+          <Icon
+            name={iconName || DEFAULT_ICON}
+            size={iconSize ?? DEFAULT_ICON_SIZE}
+            color={iconColor}
+            solid={solid}
+            regular={regular}
+            light={light}
+            duotone={duotone}
+          />
+        ) : null}
+      </>
+    );
+  }, [iconPosition, iconName, iconSize, buttonTheme, disabled, error, bodyStyle, title]);
+
+  return fullWidth ? (
+    <Pressable
+      style={[dynamicContainerStyle, Platform.OS === 'ios' ? _containerStyle : {}]}
+      containerStyle={[dynamicContainerStyleContainer, _containerStyle]}
+      onPress={handleOnPress}
+      onPressIn={handleOnPressIn}
+      onPressOut={handleOnPressOut}
+      disabled={disabled}
+      hitSlop={HIT_SLOP}
+      underlayColor={'transparent'}
+    >
+      {FicTertiary()}
+    </Pressable>
+  ) : (
+    <View
+      style={[
+        {
+          position: 'relative',
+          alignSelf: 'flex-start',
+          width: fullWidth ? '100%' : 'auto'
+        },
+        _containerStyle
+      ]}
+    >
+      {isPressed ? <View style={[tertiaryPressedAreaStyle]} /> : null}
+      <Pressable
+        style={themeProps?.container}
+        onPress={handleOnPress}
+        onPressIn={handleOnPressIn}
+        onPressOut={handleOnPressOut}
+        disabled={disabled}
+        hitSlop={HIT_SLOP}
+        underlayColor={'transparent'}
+      >
+        {FicTertiary()}
+      </Pressable>
+    </View>
+  );
+};
+
+export default FicButtonTertiary;

package/src/components/buttons/FicButton/constants.ts

@@ -0,0 +1,23 @@
+import { Insets } from 'react-native';
+import { Colors } from '../../../styles/colors';
+import { PADDING } from '../../../styles/space';
+
+export const FONT_SIZE = 17;
+
+export const ICON_HORIZONTAL_MARGIN = 8;
+export const ICON_SIZE_BIG = 24;
+
+export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_PRESSED_BG_COLOR = Colors.GREY_2;
+
+export const DEFAULT_TITLE = 'Button';
+export const DEFAULT_ICON = 'heart';
+
+export const BUTTON_INTERNAL_PADDING_HORIZONTAL = PADDING.LG;
+
+export const HIT_SLOP: Insets = {
+  top: 16,
+  left: 16,
+  right: 16,
+  bottom: 16,
+};

package/src/components/buttons/FicButton/index.ts

@@ -0,0 +1,5 @@
+import FicButton from './FicButton';
+import { FicButtonProps } from './FicButton.types';
+
+export { FicButton };
+export type { FicButtonProps };