@fattureincloud-mobile/fic-mobile-ds 1.2.3 → 1.3.0

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

@@ -1,198 +0,0 @@
-import * as React from 'react';
-import { useCallback, useMemo } from 'react';
-import {
-  GestureResponderEvent,
-  Platform,
-  Pressable as PressableIOS,
-  StyleProp,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-import { TouchableHighlight } from 'react-native-gesture-handler';
-import Animated, {
-  runOnUI,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-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 pressedOpacity = useSharedValue(0);
-
-  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, disabled]
-  );
-
-  const pressableAreaStyle = useAnimatedStyle<ViewStyle>(() => ({
-    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',
-    opacity: pressedOpacity.value,
-    ...themeProps?.pressedStyle?.container,
-  }));
-
-  const animate = (value: number) => {
-    'worklet';
-    pressedOpacity.value = withTiming(value, { duration: 0 });
-  };
-
-  const handleOnPressIn: onPressType = useCallback(
-    (e: GestureResponderEvent | undefined) => {
-      runOnUI(animate)(1);
-      if (onPressIn) onPressIn(e);
-    },
-    [pressedOpacity, onPressIn]
-  );
-
-  const handleOnPressOut: onPressType = useCallback(
-    (e: GestureResponderEvent | undefined) => {
-      runOnUI(animate)(0);
-      if (onPressOut) onPressOut(e);
-    },
-    [pressedOpacity, onPressOut]
-  );
-
-  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 (
-    <View
-      style={[
-        {
-          width: fullWidth ? '100%' : 'auto',
-          alignSelf: fullWidth ? 'stretch' : 'flex-start',
-        },
-        _containerStyle,
-      ]}
-    >
-      <Animated.View style={pressableAreaStyle} />
-      <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

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

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

package/src/components/buttons/FicButton/themes/dark.ts

@@ -1,273 +0,0 @@
-import { FlexAlignType } from 'react-native';
-import { Colors } from '../../../../styles/colors';
-import { BORDER_RADIUS } from '../../../../styles/space';
-import { FicButtonTheme, GenericViewStyle } from '../FicButton.types';
-import { FONT_SIZE } from '../constants';
-
-const defaultContainerProps: GenericViewStyle = {
-  flexDirection: 'row',
-  alignSelf: 'flex-start',
-  justifyContent: 'center',
-  alignContent: 'center',
-  alignItems: 'center',
-  borderRadius: BORDER_RADIUS.SM,
-};
-
-const { alignContent, ...defaultIconContainerProps } = defaultContainerProps;
-
-const iconContainerProps = {
-  ...defaultIconContainerProps,
-  borderRadius: 1000,
-  alignSelf: 'center' as FlexAlignType,
-};
-
-const ficButtonDarkTheme: FicButtonTheme = {
-  primary: {
-    default: {
-      container: {
-        ...defaultContainerProps,
-        backgroundColor: Colors.AZURE_K,
-      },
-      text: {
-        color: Colors.ELEVATION_1,
-      },
-      icon: {
-        color: Colors.ELEVATION_1,
-      },
-      pressedStyle: {
-        container: {
-          ...defaultContainerProps,
-          backgroundColor: Colors.AZURE_K_D1,
-        },
-        text: {
-          color: Colors.ELEVATION_1,
-        },
-        icon: {
-          color: Colors.ELEVATION_1,
-        },
-      },
-    },
-    disabled: {
-      container: {
-        ...defaultContainerProps,
-        backgroundColor: Colors.ELEVATION_4,
-      },
-      text: {
-        color: Colors.ELEVATION_2,
-      },
-      icon: {
-        color: Colors.ELEVATION_2,
-      },
-    },
-    error: {
-      container: {
-        ...defaultContainerProps,
-        backgroundColor: Colors.RED,
-      },
-      text: {
-        color: Colors.WHITE,
-      },
-      icon: {
-        color: Colors.WHITE,
-      },
-      pressedStyle: {
-        container: {
-          ...defaultContainerProps,
-          backgroundColor: Colors.RED_D1,
-        },
-        text: {
-          color: Colors.WHITE,
-        },
-        icon: {
-          color: Colors.WHITE,
-        },
-      },
-    },
-  },
-  secondary: {
-    default: {
-      container: {
-        ...defaultContainerProps,
-        backgroundColor: Colors.ELEVATION_1,
-        borderWidth: 1,
-        borderColor: Colors.AZURE_K,
-      },
-      text: {
-        color: Colors.AZURE_K,
-      },
-      icon: {
-        color: Colors.AZURE_K,
-      },
-      pressedStyle: {
-        container: {
-          ...defaultContainerProps,
-          backgroundColor: Colors.ELEVATION_2,
-          borderWidth: 1,
-          borderColor: Colors.AZURE_K,
-        },
-        text: {
-          color: Colors.AZURE_K,
-        },
-        icon: {
-          color: Colors.AZURE_K,
-        },
-      },
-    },
-    disabled: {
-      container: {
-        ...defaultContainerProps,
-        backgroundColor: Colors.ELEVATION_1,
-        borderWidth: 1,
-        borderColor: Colors.ELEVATION_4,
-      },
-      text: {
-        color: Colors.ELEVATION_4,
-      },
-      icon: {
-        color: Colors.ELEVATION_4,
-      },
-    },
-    error: {
-      container: {
-        ...defaultContainerProps,
-        backgroundColor: Colors.ELEVATION_1,
-        borderWidth: 1,
-        borderColor: Colors.RED_K_D1,
-      },
-      text: {
-        color: Colors.RED_K_D1,
-      },
-      icon: {
-        color: Colors.RED_K_D1,
-      },
-      pressedStyle: {
-        container: {
-          ...defaultContainerProps,
-          backgroundColor: Colors.ELEVATION_2,
-          borderWidth: 1,
-          borderColor: Colors.RED_K_D1,
-        },
-        text: {
-          color: Colors.RED_K_D1,
-        },
-        icon: {
-          color: Colors.RED_K_D1,
-        },
-      },
-    },
-  },
-  tertiary: {
-    default: {
-      container: { ...defaultContainerProps, alignSelf: 'center' },
-      text: {
-        textDecorationLine: 'underline',
-        fontSize: FONT_SIZE,
-        color: Colors.AZURE_K,
-      },
-      icon: {
-        color: Colors.AZURE_K,
-      },
-      pressedStyle: {
-        container: {
-          ...defaultContainerProps,
-          alignSelf: 'center',
-          backgroundColor: Colors.ELEVATION_4,
-        },
-        text: {
-          textDecorationLine: 'underline',
-          fontSize: FONT_SIZE,
-          color: Colors.AZURE_K,
-        },
-        icon: {
-          color: Colors.AZURE_K,
-        },
-      },
-    },
-    disabled: {
-      container: { ...defaultContainerProps, alignSelf: 'center' },
-      text: {
-        textDecorationLine: 'underline',
-        fontSize: FONT_SIZE,
-        color: Colors.ELEVATION_4,
-      },
-      icon: {
-        color: Colors.ELEVATION_4,
-      },
-    },
-    error: {
-      container: { ...defaultContainerProps, alignSelf: 'center' },
-      text: {
-        textDecorationLine: 'underline',
-        fontSize: FONT_SIZE,
-        color: Colors.RED_K_D1,
-      },
-      icon: {
-        color: Colors.RED_K_D1,
-      },
-      pressedStyle: {
-        container: {
-          ...defaultContainerProps,
-          alignSelf: 'center',
-          backgroundColor: Colors.ELEVATION_4,
-        },
-        text: {
-          textDecorationLine: 'underline',
-          fontSize: FONT_SIZE,
-          color: Colors.RED_K_D1,
-        },
-        icon: {
-          color: Colors.RED_K_D1,
-        },
-      },
-    },
-  },
-  icon: {
-    default: {
-      container: { ...iconContainerProps, alignSelf: 'flex-start' },
-      text: {},
-      icon: {
-        color: Colors.WHITE_80,
-      },
-      pressedStyle: {
-        container: {
-          backgroundColor: Colors.ELEVATION_4,
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-        text: {},
-        icon: {
-          color: Colors.WHITE_80,
-        },
-      },
-    },
-    disabled: {
-      container: { ...iconContainerProps },
-      text: {},
-      icon: {
-        color: Colors.ELEVATION_4,
-      },
-    },
-    error: {
-      container: { ...iconContainerProps },
-      text: {},
-      icon: {
-        color: Colors.RED_K_D1,
-      },
-      pressedStyle: {
-        container: {
-          position: 'absolute',
-          justifyContent: 'center',
-          alignItems: 'center',
-          borderRadius: 1000,
-          backgroundColor: Colors.ELEVATION_4,
-        },
-        text: {},
-        icon: {
-          color: Colors.RED_K_D1,
-        },
-      },
-    },
-  },
-};
-
-export default ficButtonDarkTheme;

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

@@ -1,4 +0,0 @@
-import ficButtonDarkTheme from './dark';
-import ficButtonLightTheme from './light';
-
-export { ficButtonDarkTheme, ficButtonLightTheme };