0.2.0 • Published 1 year ago

@universal-health-chain/healthcards v0.2.0

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

Reusable Components

This repository contains a collection of reusable components for React Native.

Installation

Using npm:

npm i healthcards-react-components

Table of Contents

Buttons

BackButtonCustom

BackButtonCustom

Properties:

  • navigation: Navigation prop from @react-navigation/native. Required for the back functionality.
  • iconName: (Optional) Name of the icon. Default is arrow-back.
  • style: (Optional) Additional styles for the button. Accepts a style object.

BorderedButton

BorderedButton

Properties:

  • title: Button title.
  • onPress: (Optional) Function to be executed on button press.
  • buttonStyle: (Optional) Style for the button. Accepts a StyleProp<ViewStyle>.
  • titleStyle: (Optional) Style for the button's title. Accepts a StyleProp<TextStyle>.

HealthcardButton

HealthcardButton

Properties:

  • allowFontScaling: (Optional) Allows font scaling. Default is false.
  • containerStyle: (Optional) Style for the container. Accepts a StyleProp<ViewStyle>.
  • textStyle: (Optional) Style for the text. Accepts a StyleProp<TextStyle>.
  • disabled: (Optional) Disables the button. Default is false.
  • children: (Optional) Button content. Default is empty.
  • onPress: Function to be executed on button press.
  • onPointerEnter: (Optional) Function to be executed on pointer enter.
  • onPointerLeave: (Optional) Function to be executed on pointer leave.

IconButton

IconButton

It's advisable to use either iconName or imgSource.

Properties:

  • onPress: Function to be executed on button press.
  • iconName: (Optional) Name of the icon (from MaterialCommunityIcons).
  • imgSource: (Optional) Location of the image.
  • imgStyle: (Optional) Styles for image.
  • iconSize: (Optional) Icon size number.
  • color: (Optional) Color of the button. Default value is #4183B0.
  • type: (Optional) Button type. Either primary or secondary. Default is primary.
  • containerStyle: (Optional) Styles for the container. It receives StyleProp<ViewStyle>.
  • disabled: (Optional) Makes field disabled. Accepts a boolean.

ItemButton

ItemButtonUI

It's advisable to use with ItemButtonListUI component if more than 1 button is needed.

Properties:

  • item: Objeto Item que contiene información genérica con un título(text), subtítulo (subtext), el objeto que representa, y un ícono o imagen.
  • onPress: Función a ejecutar cuando se presiona la tarjeta.
  • color: (Optional) Color de la tarjeta. El predeterminado es #4183B0.
  • mainTextStyle: (Optional) Estilo del texto principal. Acepta un StyleProp<TextStyle>.
  • subTextStyle: (Optional) Estilo del texto secundario. Acepta un StyleProp<TextStyle>.
  • buttonContainerStyle: (Optional) Estilo del contenedor del botón. Acepta un StyleProp<ViewStyle>.
  • imageStyle: (Optional) Style prop for customizing the image style in case there is one.
  • interfaceSize: (Optional) Tamaño de la interfaz, puede ser 'S', 'M', o 'L'. El predeterminado es 'S'.
  • type: (Optional) Tipo de tarjeta. Puede ser 'primary' o 'secondary'. El predeterminado es 'primary'.

LinkButton

LinkButton

Properties:

  • text: Button text.
  • onPress: (Optional) Function to be executed on button press.
  • buttonStyle: (Optional) Style for the button. Accepts a StyleProp<ViewStyle>.
  • textStyle: (Optional) Style for the text. Accepts a StyleProp<TextStyle>.

PlainIconButton

PlainIconButton

Properties:

  • onPress: (Optional) Function to be executed on button press.
  • title: Button title.
  • iconName: (Optional) Icon name.
  • iconSize: (Optional) Icon size. Default is 36.
  • iconColor: (Optional) Icon color. Default is #FFF.
  • buttonStyle: (Optional) Style for the button. Accepts a ViewStyle.
  • textStyle: (Optional) Style for the text. Accepts a TextStyle.

Cards

Esta sección contiene componentes de tarjetas que encapsulan información y acciones relacionadas en una sola unidad visual.

DropdownCard

DropdownCard

It's advisable to use with DropdownCardList component if more than 1 card is needed.

Properties:

  • title: Title of the card. Required.
  • subtitle: Subtitle of the card. Required.
  • dropdownData: Object DropdownCardDataProps that contains information when dropdown is open.
  • type: (Optional) Button type. Either primary or secondary. Default is primary.
  • color: (Optional) Color for certain UI elements like the card background color. Defaults to '#4183B0'.
  • buttonText: (Optional) Text for dropdown button. There wont be a button if the text isn't specified.
  • object: (Optional) Any kind of object for data handling with onPressButton.
  • onPressButton: (Optional) Function to be called when dropdown text button is pressed. Has as parameter the object prop.
  • onPressShare: (Optional) Function to be called when dropdown share button is pressed. Has as parameter the object prop.
  • onPressEdit: (Optional) Function to be called when dropdown edit button is pressed. Has as parameter the object prop.
  • onPressDelete: (Optional) Function to be called when dropdown delete button is pressed. Has as parameter the object prop.
  • interfaceSize: (Optional) Size of the interface, affecting the font size. Accepts 'S' | 'M' | 'L'. Defaults to 'S'.
  • titleStyle: (Optional) Style prop for customizing the title text style.
  • subtitleStyle: (Optional) Style prop for customizing the subtitle text style.

HealthSectionCardUI

HealthSectionCardUI

Properties:

  • title: Título de la sección de salud.
  • type: (Deprecated) Tipo de tarjeta, puede ser 'primary' o 'secondary'. Este campo es opcional y está marcado como obsoleto.
  • color: (Optional) Color de la tarjeta. El predeterminado es #4183B0.
  • disabled: (Optional) Opcion de botón deshabilitado.
  • interfaceSize: (Optional) Tamaño de la interfaz, puede ser 'S', 'M', o 'L'.
  • iconName: (Deprecated) Nombre del ícono. Este campo es opcional y está marcado como obsoleto.
  • icon: (Optional) Componente de ícono a mostrar. Acepta un componente React, como un ícono de react-native-elements.
  • titleStyle: (Optional) Estilo del título. Acepta un StyleProp<TextStyle>.
  • cardContainerStyle: (Optional) Estilo del contenedor de la tarjeta. Acepta un StyleProp<ViewStyle>.
  • iconStyle: (Optional) Estilo del ícono. Acepta un StyleProp<ViewStyle>. Este campo es opcional y está marcado como obsoleto.
  • onPress: Función a ejecutar cuando se presiona la tarjeta.

Text

BigCenteredText

BigCenteredText

Properties:

  • text: The text to be displayed. Required.
  • style: (Optional) Custom style for the text. Accepts a StyleProp<TextStyle>.
  • Other props inherited from TextProps.

HealthcareText

HealthcareText

Properties:

  • allowFontScaling: (Optional) Whether the font should scale to respect Text Size accessibility settings. Defaults to false.
  • testID: (Optional) ID for testing purposes.
  • Other props inherited from TextProps.

LabelViewUI

LabelViewUI

Properties:

  • text: The text to be displayed. Required.
  • interfaceSize: (Optional) Size of the interface, affecting the font size. Accepts 'S' | 'M' | 'L'. Defaults to 'S'.

Pill

Pill

Properties:

  • text: The text to be displayed within the pill. Required.
  • color: (Optional) Background color of the pill. Defaults to #7BC1DF.
  • textColor: (Optional) Color of the text within the pill. Defaults to #020202.
  • testID: (Optional) ID for testing purposes.
  • interfaceSize: (Optional) Size of the interface, affecting the font size. Accepts 'S' | 'M' | 'L'. Defaults to 'S'.

MediumCenteredText

MediumCenteredText

Properties:

  • text: The text content to be displayed. Required.
  • style: (Optional) Additional styles for the text. Accepts a style object.
  • Other props inherited from TextProps.

Images

BigHeadingImage

BigHeadingImage

Properties:

  • source: The image source. Required.
  • style: (Optional) Additional styles for the image. Accepts a style object.

CenteredBigImage

CenteredBigImage

Properties:

  • source: The image source. Required. Accepts an object of type ImageSourcePropType.
  • style: (Optional) Additional styles for the image. Accepts a style object.

HeaderSideImage

HeaderSideImage

Properties:

  • source: The image source. Required. Accepts an object of type ImageSourcePropType.
  • style: (Optional) Additional styles for the image. Accepts a style object of type ImageStyle.

Inputs

CheckboxUI

CheckboxUI

Properties:

  • name: Unique name for the checkbox field. Required. Accepts a string.
  • label: Label text to be next to the checkbox. Optional. Accepts a string.
  • color: (Optional) Color of the checkbox. Accepts a ColorValue.
  • control: Control object from react-hook-form. Required.
  • rules: (Optional) Validation rules from react-hook-form. Accepts an object.
  • interfaceSize: (Optional) Size of the interface. Accepts 'S', 'M', or 'L'.
  • labelStyle: (Optional) Additional styles for the text next to the checkbox. Accepts a StyleProp.
  • checkboxElement: (Optional) Element next to the checkbox in case you need something personalized like a URL. Advisable to use either the label or the checkboxElement. Accepts a ReactElement.
  • disabled: (Optional) Makes field disabled. Accepts a boolean.

DateTimePickerUI

DateTimePickerUI

Properties:

  • name: Unique name for the input field. Required. Accepts a string.
  • control: Control object from react-hook-form. Required.
  • _value: (Optional) Default value for the input field. Accepts a string.
  • label: (Optional) Label text for the input field. Accepts a string.
  • color: (Optional) Color of the icon container. Accepts a ColorValue.
  • placeholder: (Optional) Text for placeholder. Accepts a string. Default is 'dd/mm/aaaa'.
  • placeholderTextColor: (Optional) Color for text placeholder. Accepts a ColorValue.
  • iconColor: (Optional) Color of the icon. Accepts a ColorValue.
  • rules: (Optional) Validation rules from react-hook-form. Accepts an object.
  • interfaceSize: (Optional) Size of the interface. Accepts 'S', 'M', or 'L'.
  • labelStyle: (Optional) Additional styles for the label text. Accepts a StyleProp.
  • inputStyle: (Optional) Additional styles for the input text. Accepts a StyleProp.
  • disabled: (Optional) Makes field disabled. Accepts a boolean.

DropdownUI

DropdownUI

Properties:

  • name: Unique name for the input field. Required. Accepts a string.
  • control: Control object from react-hook-form. Required.
  • _value: (Optional) Default value for the input field. Accepts a string.
  • label: (Optional) Label text for the input field. Accepts a string.
  • color: (Optional) Color of the icon container. Accepts a ColorValue.
  • iconColor: (Optional) Color of the icon. Accepts a ColorValue.
  • data: Data for the dropdown menu. Required. Accepts an array of DropdownData objects.
  • rules: (Optional) Validation rules from react-hook-form. Accepts an object.
  • placeholder: (Optional) Placeholder text for the input field. Accepts a string.
  • interfaceSize: (Optional) Size of the interface. Accepts 'S', 'M', or 'L'.
  • labelStyle: (Optional) Additional styles for the label text. Accepts a StyleProp.
  • inputStyle: (Optional) Additional styles for the input text. Accepts a StyleProp.
  • disabled: (Optional) Makes field disabled. Accepts a boolean.

EditValueViewUI

EditValueViewUI

Properties:

  • text: Initial text for the input field. Required. Accepts a string.

NumPad

NumPad

Properties:

  • onComplete: Callback function when the PIN is completed. Required. Accepts a function.
  • color: (Optional) Color for the buttons. Accepts a ColorValue.
  • PIN: Current PIN value. Required. Accepts a string.
  • setPIN: Function to update the PIN value. Required. Accepts a function.
  • buttonTextStyle: (Optional) Additional styles for the button text. Accepts a StyleProp.
  • digitsTextStyle: (Optional) Additional styles for the digits text. Accepts a StyleProp.

TextInputUI

TextInputUI

Properties:

  • name: Unique name for the input field. Required. Accepts a string.
  • control: Control object from react-hook-form. Required.
  • _value: (Optional) Default value for the input field. Accepts a string.
  • label: (Optional) Label text for the input field. Accepts a string.
  • placeholder: (Optional) Placeholder text for the input field. Accepts a string.
  • placeholderTextColor: (Optional) Color for text placeholder. Accepts a ColorValue.
  • secureTextEntry: (Optional) Flag to secure text entry. Accepts a boolean.
  • rules: (Optional) Validation rules from react-hook-form. Accepts an object.
  • keyboardType: (Optional) Keyboard type for the input field. Accepts a KeyboardTypeOptions.
  • interfaceSize: (Optional) Size of the interface. Accepts 'S', 'M', or 'L'.
  • labelStyle: (Optional) Additional styles for the label text. Accepts a StyleProp.
  • inputStyle: (Optional) Additional styles for the input text. Accepts a StyleProp.
  • disabled: (Optional) Makes field disabled. Accepts a boolean.

Layouts

MainContainer

MainContainer

Properties:

  • children: The content to be rendered inside the container. Required. Accepts any valid React Node.
  • source: (Optional) The background image source for the container. Accepts an object of type ImageSourcePropType.

PinValueContainer

PinValueContainer

Properties:

  • text: The text to be displayed inside the pill. Required.
  • color: (Optional) Color for the pill. Defaults to '#7BC1DF'.
  • interfaceSize: (Optional) Size variation for the pill, accepts 'S', 'M', or 'L'. Defaults to 'S'.

Lists

DropdownCardList

DropdownCardList

Properties:

  • dropdowns: Array of objects containing information for each dropdown card. Each object corresponds to a DropdownCardProps instance. Required.
  • onPressButton: (Optional) Function to be called when a dropdown text button is pressed. Receives object of any type.
  • onPressShare: (Optional) Function to be called when a dropdown share button is pressed. Receives object of any type.
  • onPressEdit: (Optional) Function to be called when a dropdown edit button is pressed. Receives object of any type.
  • onPressDelete: (Optional) Function to be called when a dropdown delete button is pressed. Receives object of any type.
  • buttonText: (Optional) Text for dropdown button.
  • color: (Optional) Color for certain UI elements like the card background color. Defaults to '#4183B0'.
  • interfaceSize: (Optional) Size variation for the interface, accepts 'S', 'M', or 'L'.
  • type: (Optional) The type of styling applied to the UI, accepts 'default', 'reverse', 'primary' or 'secondary'. Defaults to 'default'.

HealthSectionsSummaryUI

HealthSectionsSummaryUI

Properties:

  • gridData: Array of objects containing information for each health section. Each object corresponds to a HealthSectionCardUIProps instance. Required.
  • interfaceSize: Size variation for the interface, accepts 'S', 'M', or 'L'. Required.
  • titleStyle: (Optional) Style prop for customizing the title text style.
  • cardContainerStyle: (Optional) Style prop for customizing the card container style.
  • contentContainerStyle: (Optional) Style prop for customizing the content container style.
  • iconStyle: (Optional) Style prop for customizing the icon style.
  • color: (Optional) Color for certain UI elements like the card background color. Defaults to '#4183B0'.

ItemButtonListUI

ItemButtonListUI

Properties:

  • items: Array of Item objects containing a text (Required) and subtext, icon or image (recommended just one), and iconAlign (to position the icon/image either on the right or left of button). Also an object property to handle item details once pressed.
  • onSelectButton: Function with item as param to be called when an item is selected. Required.
  • color: (Optional) Color for certain UI elements like the card background color. Defaults to '#4183B0'.
  • mainTextStyle: (Optional) Style prop for customizing the main text style.
  • subTextStyle: (Optional) Style prop for customizing the subtext style.
  • buttonContainerStyle: (Optional) Style prop for customizing the button container style.
  • imageStyle: (Optional) Style prop for customizing the image style in case there is one.
  • interfaceSize: (Optional) Size variation for the interface, accepts 'S', 'M', or 'L'. Defaults to 'S'.
  • type: (Optional) The type of styling applied to the UI, accepts 'primary' or 'secondary'. Defaults to 'primary'.

Headers

HeaderCustom

HeaderCustom

Properties:

  • leftComponent: (Optional) Component to be rendered on the left side of the header. Accepts a valid React Node.
  • rightComponent: (Optional) Component to be rendered on the right side of the header. Accepts a valid React Node.
  • title: The title text to be displayed in the center of the header. Required. Accepts a string.
  • style: (Optional) Additional styles for the title text. Accepts an object.
  • containerStyle: (Optional) Additional styles for the header container. Accepts a StyleProp<ViewStyle>.
  • centerTextStyle: (Optional) Additional styles for the center component text. Accepts a StyleProp<TextStyle>.

Views

FormViewUI

FormViewUI

Properties:

  • formArray: Array of form data. Required. Accepts an array of FormData.
  • submitText: (Optional) Text for the submit button. Defaults to 'Submit'.
  • submitTextColor: (Optional) Color of the submit text. Defaults to #fff.
  • submitButtonColor: (Optional) Color of the submit button. Defaults to #4183B0.
  • onSubmit: Function to be called on form submission. Required.
  • interfaceSize: (Optional) Size of the interface. Accepts 'S' | 'M' | 'L'. Defaults to 'S'.
  • labelStyle: (Optional) Custom style for the labels. Accepts a StyleProp<TextStyle>.
  • inputStyle: (Optional) Custom style for the inputs. Accepts a StyleProp<TextStyle>.
  • buttonStyle: (Optional) Custom style for the button. Accepts a StyleProp<ViewStyle>.
  • buttonTextStyle: (Optional) Custom style for the button text. Accepts a StyleProp<TextStyle>.
  • containerStyle: (Optional) Custom style for the container of the form and the button. Accepts a StyleProp<ViewStyle>.
  • formStyle: (Optional) Custom style for the container of the form. Accepts a StyleProp<ViewStyle>.
  • submitOnPointerEnter: (Optional) Function to be called when pointer enters the submit button.
  • submitOnPointerLeave: (Optional) Function to be called when pointer leaves the submit button.
  • placeholderTextColor: (Optional) Color for placeholder text. Accepts a ColorValue.
  • children: The content to be rendered inside the form container. Accepts any valid React Node.
0.2.0

1 year ago

0.1.45

1 year ago

0.1.44

1 year ago

0.1.43

1 year ago

0.1.42

1 year ago

0.1.41

1 year ago

0.1.40

1 year ago

0.1.39

1 year ago

0.1.38

1 year ago

0.1.37

1 year ago

0.1.36

1 year ago

0.1.35

1 year ago

0.1.34

1 year ago

0.1.33

1 year ago

0.1.32

2 years ago

0.1.31

2 years ago

0.1.30

2 years ago

0.1.29

2 years ago

0.1.28

2 years ago

0.1.27

2 years ago

0.1.26

2 years ago

0.1.25

2 years ago

0.1.24

2 years ago

0.1.23

2 years ago

0.1.22

2 years ago

0.1.21

2 years ago

0.1.20

2 years ago

0.1.19

2 years ago

0.1.18

2 years ago

0.1.17

2 years ago

0.1.16

2 years ago

0.1.15

2 years ago

0.1.14

2 years ago

0.1.13

2 years ago

0.1.12

2 years ago

0.1.11

2 years ago

0.1.10

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.0

2 years ago

0.0.81

2 years ago

0.0.80

2 years ago

0.0.79

2 years ago

0.0.78

2 years ago

0.0.77

2 years ago

0.0.76

2 years ago

0.0.75

2 years ago

0.0.74

2 years ago

0.0.73

2 years ago

0.0.72

2 years ago

0.0.71

2 years ago

0.0.70

2 years ago

0.0.69

2 years ago

0.0.68

2 years ago

0.0.67

2 years ago

0.0.66

2 years ago

0.0.65

2 years ago

0.0.64

2 years ago

0.0.63

2 years ago

0.0.62

2 years ago

0.0.61

2 years ago

0.0.60

2 years ago

0.0.59

2 years ago

0.0.58

2 years ago

0.0.57

2 years ago

0.0.56

2 years ago

0.0.55

2 years ago

0.0.54

2 years ago

0.0.53

2 years ago

0.0.52

2 years ago

0.0.51

2 years ago

0.0.50

2 years ago

0.0.49

2 years ago

0.0.48

2 years ago

0.0.47

2 years ago

0.0.46

2 years ago

0.0.45

2 years ago

0.0.44

2 years ago

0.0.43

2 years ago

0.0.42

2 years ago

0.0.41

2 years ago

0.0.40

2 years ago

0.0.39

2 years ago

0.0.38

2 years ago

0.0.37

2 years ago

0.0.36

2 years ago

0.0.35

2 years ago

0.0.34

2 years ago

0.0.32

2 years ago

0.0.30

2 years ago

0.0.29

2 years ago

0.0.28

2 years ago

0.0.27

2 years ago

0.0.26

2 years ago

0.0.25

2 years ago

0.0.24

2 years ago

0.0.23

2 years ago

0.0.22

2 years ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.16

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago