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

package/src/components/typographies/Subhead/Subhead.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 ISubheadProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const Subhead: FunctionComponent<ISubheadProps> = ({
+  text,
+  color,
+  style,
+  weight,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.subheadObject,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.subheadColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default Subhead;

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

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

package/src/components/typographies/TitleOne/TitleOne.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 ITitleOneProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const TitleOne: FunctionComponent<ITitleOneProps> = ({
+  text,
+  color,
+  style,
+  weight,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.title1Object,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.titleOneColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default TitleOne;

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

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

package/src/components/typographies/TitleThree/TitleThree.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 ITitleThreeProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const TitleThree: FunctionComponent<ITitleThreeProps> = ({
+  text,
+  color,
+  style,
+  weight,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.title3Object,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.titleTwoColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default TitleThree;

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

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

package/src/components/typographies/TitleTwo/TitleTwo.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 ITitleTwoProps extends TextProps {
+  text?: string;
+  weight?: FontWeight;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+const TitleTwo: FunctionComponent<ITitleTwoProps> = ({
+  text,
+  color,
+  style,
+  weight,
+  children,
+  ...rest
+}) => {
+  const { typographies: typographiesTheme } = useTheme();
+
+  const composedStyle: StyleProp<TextStyle> = {
+    ...human.title2Object,
+    ...retrieveFontWeight(weight || FontWeight.REGULAR),
+    color: color || typographiesTheme.titleThreeColor,
+  };
+
+  return (
+    <Text {...rest} style={[composedStyle, style]}>
+      {text || children}
+    </Text>
+  );
+};
+
+export default TitleTwo;

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

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

package/src/components/typographies/font.ts

@@ -0,0 +1,25 @@
+import { systemWeights } from 'react-native-typography';
+
+export enum FontWeight {
+    THIN = 'thin',
+    LIGHT = 'light',
+    REGULAR = 'regular',
+    SEMIBOLD = 'semibold',
+    BOLD = 'bold'
+}
+
+export function retrieveFontWeight(weight: FontWeight) {
+    switch (weight) {
+        case FontWeight.THIN:
+            return systemWeights.thin;
+        case FontWeight.LIGHT:
+            return systemWeights.light;
+        default:
+        case FontWeight.REGULAR:
+            return systemWeights.regular;
+        case FontWeight.SEMIBOLD:
+            return systemWeights.semibold;
+        case FontWeight.BOLD:
+            return systemWeights.bold;
+    }
+};

package/src/hooks/useTheme.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ThemeContext } from '../providers/ThemeProvider/ThemeProvider';
+import { Theme } from '../styles/theme';
+
+// export const DSThemeContext = createContext<{
+//   setTheme: (theme: ThemeProps) => void;
+// }>({
+//   setTheme: ({}) => {},
+// });
+
+export const useTheme = () => {
+  const context = React.useContext<Theme>(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

package/src/index.tsx

@@ -0,0 +1,47 @@
+export { DatePicker } from './components/base/DatePicker';
+export { FicButton } from './components/buttons/FicButton';
+export { FicButtonGroup } from './components/buttons/FicButtonGroup';
+export { Banner } from './components/notifications/Banner';
+export { Tag } from './components/Tag';
+export { Touchable } from './components/Touchable';
+export { Body } from './components/typographies/Body';
+export { ButtonTitle } from './components/typographies/ButtonTitle';
+export { Callout } from './components/typographies/Callout';
+export { CaptionOne } from './components/typographies/CaptionOne';
+export { CaptionTwo } from './components/typographies/CaptionTwo';
+export { Footnote } from './components/typographies/Footnote';
+export { Headline } from './components/typographies/Headline';
+export { LargeTitle } from './components/typographies/LargeTitle';
+export { Subhead } from './components/typographies/Subhead';
+export { TitleOne } from './components/typographies/TitleOne';
+export { TitleThree } from './components/typographies/TitleThree';
+export { TitleTwo } from './components/typographies/TitleTwo';
+export { DesignSystemProvider } from './providers/DesignSystemProvider';
+export { Icon, IconProvider } from './providers/IconProvider';
+
+export type { IDatePickerProps } from './components/base/DatePicker';
+
+export { FontWeight, retrieveFontWeight } from './components/typographies/font';
+export { Colors } from './styles/colors';
+export {
+  defaultTheme,
+  ficDarkTheme,
+  ficTheme,
+  type Theme,
+  type ThemeProps,
+} from './styles/theme';
+
+export { default as setLocale } from './utils/locale';
+
+export type {
+  FicButtonProps,
+  FicButtonTextProps,
+  FicButtonThemeProps,
+} from './components/buttons/FicButton/FicButton.types';
+
+export type { IBodyProps } from './components/typographies/Body/Body';
+export type { IconProps } from './providers/IconProvider';
+
+export type { CalendarTheme } from './styles/calendarTheme';
+
+export { useTheme } from './hooks/useTheme';

package/src/providers/DesignSystemProvider/DesignSystemProvider.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { defaultTheme, Theme } from '../../styles/theme';
+import setLocale, {
+  desiredLocale,
+  getDeviceLanguageAndRegion,
+} from '../../utils/locale';
+import { IconProps, IconProvider } from '../IconProvider';
+import ThemeProvider from '../ThemeProvider/ThemeProvider';
+
+if (!desiredLocale) {
+  const deviceLanguage = getDeviceLanguageAndRegion();
+  setLocale(deviceLanguage);
+}
+
+type DesignSystemProviderProps = {
+  IconComponent: React.FC<IconProps>;
+  //LinearGradientComponent?: React.FC<>;
+  theme?: Theme;
+};
+
+const DesignSystemProvider: React.FC<
+  React.PropsWithChildren<DesignSystemProviderProps>
+> = ({ children, IconComponent, theme }) => {
+  return (
+    <ThemeProvider theme={theme || defaultTheme}>
+      <IconProvider IconComponent={IconComponent}>{children}</IconProvider>
+    </ThemeProvider>
+  );
+};
+
+export default DesignSystemProvider;

package/src/providers/DesignSystemProvider/index.ts

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

package/src/providers/IconProvider/IconProvider.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, FC, useContext } from 'react';
+import { StyleProp, Text, ViewProps, ViewStyle } from 'react-native';
+
+const NoIconProviderProvided: React.FC<IconProps> = () => (
+  <Text>no icon provider provided</Text>
+);
+
+export type IconProps = {
+  size?: number;
+  name: string;
+  color?: string;
+  solid?: boolean;
+  light?: boolean;
+  regular?: boolean;
+  thin?: boolean;
+  duotone?: boolean;
+  internalPadding?: number;
+  style?: StyleProp<ViewStyle>;
+} & ViewProps;
+
+const IconContext = createContext<React.FC<IconProps>>(NoIconProviderProvided);
+
+export const Icon: React.FC<IconProps> = (props) => {
+  const IconComponent = useContext(IconContext);
+  const { internalPadding, style } = props;
+
+  return (
+    <IconComponent
+      {...props}
+      style={[internalPadding ? { padding: internalPadding } : {}, style]}
+    />
+  );
+};
+
+const IconProvider: FC<{
+  IconComponent: React.FC<IconProps>;
+  children: React.ReactNode;
+}> = ({ children, IconComponent }) => {
+  return (
+    <IconContext.Provider value={IconComponent || NoIconProviderProvided}>
+      {children}
+    </IconContext.Provider>
+  );
+};
+
+export default IconProvider;

package/src/providers/IconProvider/index.ts

@@ -0,0 +1,4 @@
+import IconProvider, { Icon, IconProps } from './IconProvider';
+
+export { Icon, IconProvider };
+export type { IconProps };

package/src/providers/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,17 @@
+import React, { createContext, FC } from 'react';
+import { ficTheme, Theme } from '../../styles/theme';
+
+export const ThemeContext = createContext<Theme>(ficTheme);
+
+const ThemeProvider: FC<{
+  theme: Theme;
+  children: React.ReactNode;
+}> = ({ children, theme }) => {
+  return (
+    <ThemeContext.Provider value={theme || ficTheme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export default ThemeProvider;

package/src/styles/calendarTheme.ts

@@ -0,0 +1,24 @@
+import { TextStyle } from 'react-native';
+
+/**
+ * Calendar theme props coming from the react native calendar them props
+ */
+export interface CalendarTheme {
+  todayTextColor?: string;
+  calendarBackground?: string;
+  indicatorColor?: string;
+  textSectionTitleColor?: string;
+  dayTextColor?: string;
+  selectedDayTextColor?: string;
+  monthTextColor?: string;
+  selectedDayBackgroundColor?: string;
+  arrowColor?: string;
+  textDisabledColor?: string;
+  backgroundColor?: string;
+  dotColor?: string;
+  selectedDotColor?: string;
+  textMonthFontWeight?: TextStyle['fontWeight'];
+  textDayFontSize?: number;
+  textMonthFontSize?: number;
+  todayBackgroundColor?: string;
+}

package/src/styles/colors.ts

@@ -0,0 +1,119 @@
+export enum Colors {
+  // LIGHT
+
+  AZURE_L1 = '#E8F7FE',
+  AZURE_L2 = '#7DD1F7',
+  AZURE_L3 = '#55C3F5',
+  AZURE = '#0095D5',
+  AZURE_D1 = '#0A709D',
+  AZURE_D2 = '#074E6F',
+
+  BLUE_L1 = '#EEF5FF',
+  BLUE_L2 = '#A4C9FF',
+  BLUE_L3 = '#68A5FF',
+  BLUE = '#0059DF',
+  BLUE_D1 = '#0045AC',
+  BLUE_D2 = '#00327D',
+
+  GREEN_L1 = '#E5F9F2',
+  GREEN_L2 = '#6ADBB5',
+  GREEN_L3 = '#2EB98B',
+  GREEN = '#269B74',
+  GREEN_D1 = '#1D7759',
+  GREEN_D2 = '#14523E',
+
+  YELLOW_L1 = '#FFFAE6',
+  YELLOW_L2 = '#FFF0B3',
+  YELLOW_L3 = '#FFE380',
+  YELLOW = '#FFC400',
+  YELLOW_D1 = '#F1A202',
+  YELLOW_D2 = '#D77500',
+
+  RED_L1 = '#FFF1EE',
+  RED_L2 = '#FFB5A2',
+  RED_L3 = '#FF8B6D',
+  RED = '#E32E00',
+  RED_D1 = '#B52400',
+  RED_D2 = '#8E1D00',
+
+  PURPLE_L1 = '#F6F2FE',
+  PURPLE_L2 = '#D0BDFB',
+  PURPLE_L3 = '#B89CFA',
+  PURPLE = '#8656F6',
+  PURPLE_D1 = '#6020F3',
+  PURPLE_D2 = '#3809A5',
+
+  BLACK = '#000000',
+  BLACK_80 = 'rgba(0, 0, 0, 0.80)',
+  BLACK_64 = 'rgba(0, 0, 0, 0.64)',
+  BLACK_40 = 'rgba(0, 0, 0, 0.40)',
+  BLACK_24 = 'rgba(0, 0, 0, 0.24)',
+  BLACK_08 = 'rgba(0, 0, 0, 0.08)',
+
+  WHITE = 'rgba(255,255,255,1)',
+  WHITE_80 = 'rgba(255,255,255,0.80)',
+  WHITE_64 = 'rgba(255,255,255,0.64)',
+  WHITE_40 = 'rgba(255,255,255,0.40)',
+  WHITE_24 = 'rgba(255,255,255,0.24)',
+  WHITE_16 = 'rgba(255,255,255,0.16)',
+  WHITE_8 = 'rgba(255,255,255,0.08)',
+
+  GREY_1 = '#F7F8F8',
+  GREY_2 = '#E1E4E6',
+  GREY_3 = '#B0B9BD',
+  GREY_4 = '#708088',
+  GREY_5 = '#424B4F',
+  GREY_6 = '#121212',
+
+  // DARK
+
+  AZURE_K_L1 = '#E1F5FA',
+  AZURE_K_L2 = '#B4E4F3',
+  AZURE_K_L3 = '#5AC0E4',
+  AZURE_K = '#29A6DC',
+  AZURE_K_D1 = '#1A86BB',
+  AZURE_K_D2 = '#0E5686',
+
+  BLUE_K_L1 = '#E1F1FF',
+  BLUE_K_L2 = '#BDE1FF',
+  BLUE_K_L3 = '#64BBFF',
+  BLUE_K = '#219DFF',
+  BLUE_K_D1 = '#257CEB',
+  BLUE_K_D2 = '#244AB9',
+
+  GREEN_K_L1 = '#E7F7E7',
+  GREEN_K_L2 = '#C6EAC4',
+  GREEN_K_L3 = '#79CF76',
+  GREEN_K = '#57C456',
+  GREEN_K_D1 = '#29AA2B',
+  GREEN_K_D2 = '#008610',
+
+  YELLOW_K_L1 = '#FFFAE6',
+  YELLOW_K_L2 = '#FFF0B3',
+  YELLOW_K_L3 = '#FFE380',
+  YELLOW_K = '#FFC400',
+  YELLOW_K_D1 = '#F1A202',
+  YELLOW_K_D2 = '#D77500',
+
+  RED_K_L1 = '#FFEBEE',
+  RED_K_L2 = '#FFCDD2',
+  RED_K_L3 = '#EE7071',
+  RED_K = '#FF3B30',
+  RED_K_D1 = '#DE232A',
+  RED_K_D2 = '#B52400',
+
+  PURPLE_K_L1 = '#F6F2FE',
+  PURPLE_K_L2 = '#D0BDFB',
+  PURPLE_K_L3 = '#B89CFA',
+  PURPLE_K = '#8656F6',
+  PURPLE_K_D1 = '#6020F3',
+  PURPLE_K_D2 = '#3809A5',
+
+  ELEVATION_1 = '#11213A',
+  ELEVATION_2 = '#22314B',
+  ELEVATION_3 = '#34425C',
+  ELEVATION_4 = '#45536D',
+  ELEVATION_5 = '#55607F',
+
+  BACKDROP = '#001029'
+}

package/src/styles/globalStyles.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from './colors';
+
+const INPUT_HEIGHT = 60;
+
+export const globalStyles = StyleSheet.create({
+  input: {
+    minHeight: INPUT_HEIGHT,
+    flex: 1,
+    borderWidth: 1,
+    borderColor: Colors.GREY_3,
+    borderRadius: 4,
+    backgroundColor: Colors.WHITE,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderRadius: 6,
+    borderColor: 'transparent',
+  },
+  pickerContainer: {
+    backgroundColor: Colors.WHITE,
+  },
+  iPhoneXBottomView: {
+    height: 34,
+    backgroundColor: Colors.GREY_2,
+  },
+  errorMessage: {
+    color: Colors.RED,
+    fontSize: 12,
+    marginTop: 8,
+    marginStart: 4,
+  },
+});

package/src/styles/space.ts

@@ -0,0 +1,27 @@
+const DIMENSIONS = {
+  SM: 4,
+  MD: 8,
+  LG: 12,
+  XL: 16
+};
+
+export enum MARGIN {
+  SM = DIMENSIONS.SM,
+  MD = DIMENSIONS.MD,
+  LG = DIMENSIONS.LG,
+  XL = DIMENSIONS.XL
+}
+
+export enum PADDING {
+  SM = DIMENSIONS.SM,
+  MD = DIMENSIONS.MD,
+  LG = DIMENSIONS.LG,
+  XL = DIMENSIONS.XL
+}
+
+export enum BORDER_RADIUS {
+  SM = DIMENSIONS.SM,
+  MD = DIMENSIONS.MD,
+  LG = DIMENSIONS.LG,
+  XL = DIMENSIONS.XL
+}