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

package/src/components/notifications/Banner/Banner.tsx

@@ -0,0 +1,105 @@
+import React, { FunctionComponent } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTheme } from '../../../hooks/useTheme';
+import { Icon } from '../../../providers/IconProvider';
+import { MARGIN, PADDING } from '../../../styles/space';
+import { FicButtonGroup } from '../../buttons/FicButtonGroup';
+import { Headline } from '../../typographies/Headline';
+import { Subhead } from '../../typographies/Subhead';
+import { BannerProps, BannerStatusThemeProp, BannerType } from './Banner.types';
+
+const iconNameByType: Record<BannerType, string> = {
+  info: 'info-circle',
+  success: 'check-circle',
+  warning: 'exclamation-triangle',
+  danger: 'exclamation-circle',
+};
+
+const Banner: FunctionComponent<BannerProps> = ({
+  title,
+  message,
+  iconName,
+  type = 'info',
+  highContrast = false,
+  primaryAction,
+  secondaryAction,
+  style,
+  ...props
+}) => {
+  const { banner: theme } = useTheme();
+
+  const themeProps = (
+    highContrast && theme?.[type]?.highContrast
+      ? theme?.[type]?.highContrast
+      : theme?.[type]
+  ) as BannerStatusThemeProp;
+  const { backgroundColor, borderColor, headlineColor, messageColor } =
+    themeProps || {};
+
+  const containerStyle = [
+    styles.bannerContainer,
+    {
+      backgroundColor: backgroundColor || 'transparent',
+      borderColor: borderColor || 'transparent',
+    },
+    style,
+  ];
+
+  return (
+    <View style={containerStyle} {...props}>
+      <View style={styles.bannerHeader}>
+        <Icon
+          name={iconName || iconNameByType?.[type] || 'question'}
+          solid
+          size={20}
+          internalPadding={2}
+          color={headlineColor}
+        />
+        {title ? (
+          <Headline
+            text={title}
+            color={headlineColor}
+            style={styles.bannerTitle}
+          />
+        ) : null}
+      </View>
+      {message ? (
+        <Subhead
+          text={message}
+          color={messageColor}
+          style={styles.bannerMessage}
+        />
+      ) : null}
+      {primaryAction || secondaryAction ? (
+        <FicButtonGroup
+          primaryAction={primaryAction}
+          secondaryAction={secondaryAction}
+          horizontal
+          style={{ marginTop: 16 }}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bannerContainer: {
+    padding: PADDING.LG,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  bannerHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  bannerTitle: {
+    marginLeft: MARGIN.SM,
+    flexShrink: 1,
+  },
+  bannerMessage: {
+    marginTop: MARGIN.SM,
+    flexShrink: 1,
+  },
+});
+
+export default Banner;

package/src/components/notifications/Banner/Banner.types.ts

@@ -0,0 +1,69 @@
+import { ViewProps } from 'react-native';
+import { Colors } from '../../../styles/colors';
+import { FicButtonProps } from '../../buttons/FicButton';
+
+type BannerType = 'info' | 'success' | 'warning' | 'danger';
+
+type BannerProps = {
+  /**
+   * The banner title.
+   */
+  title: string;
+
+  /**
+   * The banner message.
+   */
+  message?: string;
+
+  /**
+   * The banner icon name.
+   */
+  iconName?: string;
+
+  /**
+   * The banner type.
+   * @default 'info'
+   */
+  type?: BannerType;
+
+  /**
+   * Whether to apply high contrast theme.
+   * @default false
+   */
+  highContrast?: boolean;
+
+  /**
+   * The primary action for the banner.
+   */
+  primaryAction?: FicButtonProps;
+
+  /**
+   * The secondary action for the banner.
+   */
+  secondaryAction?: FicButtonProps;
+} & ViewProps;
+
+type BannerContainerProps = {
+  backgroundColor?: Colors;
+  borderColor?: Colors;
+} & ViewProps;
+
+/* THEME */
+
+type BannerStatusThemeProp = {
+  backgroundColor: Colors;
+  borderColor: Colors;
+  headlineColor: Colors;
+  messageColor: Colors;
+  highContrast?: BannerStatusThemeProp;
+};
+
+type BannerThemeProp = Record<BannerType, BannerStatusThemeProp>;
+
+export type {
+  BannerContainerProps,
+  BannerProps,
+  BannerStatusThemeProp,
+  BannerThemeProp,
+  BannerType,
+};

package/src/components/notifications/Banner/index.ts

@@ -0,0 +1,3 @@
+import Banner from './Banner';
+
+export { Banner };

package/src/components/notifications/Banner/themes/dark.ts

@@ -0,0 +1,43 @@
+import { Colors } from '../../../../styles/colors';
+import { BannerThemeProp } from '../Banner.types';
+
+const bannerDarkTheme: BannerThemeProp = {
+  info: {
+    backgroundColor: Colors.AZURE_K_D2,
+    borderColor: Colors.AZURE_K_D1,
+    headlineColor: Colors.AZURE_K_L1,
+    messageColor: Colors.AZURE_K_L2
+  },
+  success: {
+    backgroundColor: Colors.GREEN_K_D2,
+    borderColor: Colors.GREEN_K_D1,
+    headlineColor: Colors.GREEN_K_L1,
+    messageColor: Colors.GREEN_K_L2
+  },
+  warning: {
+    backgroundColor: Colors.YELLOW_K_D2,
+    borderColor: Colors.YELLOW_K_D1,
+    headlineColor: Colors.ELEVATION_1,
+    messageColor: Colors.ELEVATION_2,
+    highContrast: {
+      backgroundColor: Colors.YELLOW_K_L3,
+      borderColor: Colors.YELLOW_K_L2,
+      headlineColor: Colors.ELEVATION_1,
+      messageColor: Colors.ELEVATION_2
+    }
+  },
+  danger: {
+    backgroundColor: Colors.RED_K_D2,
+    borderColor: Colors.RED_K_D1,
+    headlineColor: Colors.RED_K_L1,
+    messageColor: Colors.RED_K_L2,
+    highContrast: {
+      backgroundColor: Colors.RED_K_L3,
+      borderColor: Colors.RED_K_L2,
+      headlineColor: Colors.ELEVATION_1,
+      messageColor: Colors.ELEVATION_2
+    }
+  }
+};
+
+export default bannerDarkTheme;

package/src/components/notifications/Banner/themes/index.ts

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

package/src/components/notifications/Banner/themes/light.ts

@@ -0,0 +1,43 @@
+import { Colors } from '../../../../styles/colors';
+import { BannerThemeProp } from '../Banner.types';
+
+const bannerLightTheme: BannerThemeProp = {
+  info: {
+    backgroundColor: Colors.AZURE_L1,
+    borderColor: Colors.AZURE_L2,
+    headlineColor: Colors.AZURE_D2,
+    messageColor: Colors.AZURE_D1
+  },
+  success: {
+    backgroundColor: Colors.GREEN_L1,
+    borderColor: Colors.GREEN_L2,
+    headlineColor: Colors.GREEN_D2,
+    messageColor: Colors.GREEN_D1
+  },
+  warning: {
+    backgroundColor: Colors.YELLOW_L1,
+    borderColor: Colors.YELLOW_L2,
+    headlineColor: Colors.BLACK_80,
+    messageColor: Colors.BLACK_80,
+    highContrast: {
+      backgroundColor: Colors.YELLOW_D1,
+      borderColor: Colors.YELLOW_D2,
+      headlineColor: Colors.BLACK_80,
+      messageColor: Colors.BLACK_80
+    }
+  },
+  danger: {
+    backgroundColor: Colors.RED_L1,
+    borderColor: Colors.RED_L2,
+    headlineColor: Colors.RED_D2,
+    messageColor: Colors.RED_D1,
+    highContrast: {
+      backgroundColor: Colors.RED_D1,
+      borderColor: Colors.RED_D2,
+      headlineColor: Colors.RED_L1,
+      messageColor: Colors.RED_L1
+    }
+  }
+};
+
+export default bannerLightTheme;

package/src/components/typographies/Body/Body.tsx

@@ -0,0 +1,38 @@
+// @ts-ignore TS6133
+import React, { FunctionComponent } from 'react';
+import { StyleProp, Text, TextProps, TextStyle } from 'react-native';
+import { human } from 'react-native-typography';
+import { useTheme } from '../../../hooks/useTheme';
+import { FontWeight, retrieveFontWeight } from '../font';
+
+export interface IBodyProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const Body: FunctionComponent<IBodyProps> = ({
+  text,
+  weight,
+  color,
+  style,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.bodyObject,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.bodyColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default Body;

package/src/components/typographies/Body/index.ts

@@ -0,0 +1,3 @@
+import Body from './Body';
+
+export { Body };

package/src/components/typographies/ButtonTitle/ButtonTitle.tsx

@@ -0,0 +1,51 @@
+// @ts-ignore TS6133
+import React, { FunctionComponent } from 'react';
+import { Platform, StyleProp, Text, TextProps, TextStyle } from 'react-native';
+import {
+  human,
+  material,
+  robotoWeights,
+  sanFranciscoWeights,
+} from 'react-native-typography';
+import { useTheme } from '../../../hooks/useTheme';
+
+export interface IButtonTitleProps extends TextProps {
+  text?: string;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const ButtonTitle: FunctionComponent<IButtonTitleProps> = ({
+  text,
+  color,
+  style,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...Platform.select({
+      ios: {
+        ...human.calloutObject,
+        ...sanFranciscoWeights.semibold,
+      },
+      android: {
+        ...material.buttonObject,
+        ...robotoWeights.medium,
+      },
+    }),
+    color: color || typographiesTheme.buttonTitleColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]} numberOfLines={1}>
+      {Platform.select({
+        android: text?.toUpperCase() || children?.toString().toUpperCase(),
+        ios: text || children,
+      })}
+    </Text>
+  );
+};
+
+export default ButtonTitle;

package/src/components/typographies/ButtonTitle/index.ts

@@ -0,0 +1,3 @@
+import ButtonTitle from './ButtonTitle';
+
+export { ButtonTitle }

package/src/components/typographies/Callout/Callout.tsx

@@ -0,0 +1,38 @@
+// @ts-ignore TS6133
+import React, { FunctionComponent } from 'react';
+import { StyleProp, Text, TextProps, TextStyle } from 'react-native';
+import { human } from 'react-native-typography';
+import { useTheme } from '../../../hooks/useTheme';
+import { FontWeight, retrieveFontWeight } from '../font';
+
+export interface ICalloutProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const Callout: FunctionComponent<ICalloutProps> = ({
+  text,
+  weight,
+  color,
+  style,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.calloutObject,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.calloutColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default Callout;

package/src/components/typographies/Callout/index.ts

@@ -0,0 +1,3 @@
+import Callout from './Callout';
+
+export { Callout };

package/src/components/typographies/CaptionOne/CaptionOne.tsx

@@ -0,0 +1,38 @@
+// @ts-ignore TS6133
+import React, { FunctionComponent } from 'react';
+import { StyleProp, Text, TextProps, TextStyle } from 'react-native';
+import { human } from 'react-native-typography';
+import { useTheme } from '../../../hooks/useTheme';
+import { FontWeight, retrieveFontWeight } from '../font';
+
+export interface ICaptionOneProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const CaptionOne: FunctionComponent<ICaptionOneProps> = ({
+  text,
+  weight,
+  color,
+  style,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.caption1Object,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.captionOneColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default CaptionOne;

package/src/components/typographies/CaptionOne/index.ts

@@ -0,0 +1,4 @@
+import CaptionOne from './CaptionOne';
+
+export { CaptionOne };
+

package/src/components/typographies/CaptionTwo/CaptionTwo.tsx

@@ -0,0 +1,38 @@
+// @ts-ignore TS6133
+import React, { FunctionComponent } from 'react';
+import { StyleProp, Text, TextProps, TextStyle } from 'react-native';
+import { human } from 'react-native-typography';
+import { useTheme } from '../../../hooks/useTheme';
+import { FontWeight, retrieveFontWeight } from '../font';
+
+export interface ICaptionTwoProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const CaptionTwo: FunctionComponent<ICaptionTwoProps> = ({
+  text,
+  color,
+  style,
+  weight,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.caption2Object,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.captionTwoColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default CaptionTwo;

package/src/components/typographies/CaptionTwo/index.ts

@@ -0,0 +1,4 @@
+import CaptionTwo from './CaptionTwo';
+
+export { CaptionTwo };
+

package/src/components/typographies/Footnote/Footnote.tsx

@@ -0,0 +1,38 @@
+// @ts-ignore TS6133
+import React, { FunctionComponent } from 'react';
+import { StyleProp, Text, TextProps, TextStyle } from 'react-native';
+import { human } from 'react-native-typography';
+import { useTheme } from '../../../hooks/useTheme';
+import { FontWeight, retrieveFontWeight } from '../font';
+
+export interface IFootnoteProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const Footnote: FunctionComponent<IFootnoteProps> = ({
+  text,
+  color,
+  style,
+  weight,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.footnoteObject,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.footnoteColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default Footnote;

package/src/components/typographies/Footnote/index.ts

@@ -0,0 +1,4 @@
+import Footnote from './Footnote';
+
+export { Footnote };
+

package/src/components/typographies/Headline/Headline.tsx

@@ -0,0 +1,38 @@
+// @ts-ignore TS6133
+import React, { FunctionComponent } from 'react';
+import { StyleProp, Text, TextProps, TextStyle } from 'react-native';
+import { human } from 'react-native-typography';
+import { useTheme } from '../../../hooks/useTheme';
+import { FontWeight, retrieveFontWeight } from '../font';
+
+export interface IHeadlineProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const Headline: FunctionComponent<IHeadlineProps> = ({
+  text,
+  color,
+  style,
+  weight,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.headlineObject,
+    ...retrieveFontWeight(weight || FontWeight.SEMIBOLD),
+    color: color || typographiesTheme.headlineColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default Headline;

package/src/components/typographies/Headline/index.ts

@@ -0,0 +1,4 @@
+import Headline from './Headline';
+
+export { Headline };
+

package/src/components/typographies/LargeTitle/LargeTitle.tsx

@@ -0,0 +1,38 @@
+// @ts-ignore TS6133
+import React, { FunctionComponent } from 'react';
+import { StyleProp, Text, TextProps, TextStyle } from 'react-native';
+import { human } from 'react-native-typography';
+import { useTheme } from '../../../hooks/useTheme';
+import { FontWeight, retrieveFontWeight } from '../font';
+
+export interface ILargeTitleProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const LargeTitle: FunctionComponent<ILargeTitleProps> = ({
+  text,
+  color,
+  style,
+  weight,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.largeTitleObject,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.largeTitleColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default LargeTitle;

package/src/components/typographies/LargeTitle/index.ts

@@ -0,0 +1,3 @@
+import LargeTitle from './LargeTitle';
+
+export { LargeTitle };

package/src/components/typographies/README.md

@@ -0,0 +1,22 @@
+# Typographies
+> The typographies are based on the [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/) by Apple 🍎
+
+- [LargeTitle](src/components/typographies/LargeTitle)
+- [TitleOne](src/components/typographies/TitleOne)
+- [TitleTwo](src/components/typographies/TitleTwo)
+- [TitleThree](src/components/typographies/TitleThree)
+- [Headline](src/components/typographies/Headline)
+- [Body](src/components/typographies/Body)
+- [Callout](src/components/typographies/Callout)
+- [Subhead](src/components/typographies/Subhead)
+- [Footnote](src/components/typographies/Footnote)
+- [CaptionOne](src/components/typographies/CaptionOne)
+- [CaptionTwo](src/components/typographies/CaptionTwo)
+
+## Preview
+
+![Preview](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggaq8esnlpj309e0el3zm.jpg)
+
+## Usage
+
+Please refer to the stories for the usage: [storybook/stories/typographies](../../../storybook/stories/typographies)