@carshair/app-components

README

What is this repository for?

• This repo is the components for the SHAiR app rebuild
• 0.0.1
• Learn Markdown

How do I get set up?

For React Native project setup, see README in the shairapp repo. Follow those steps and then return here

• yarn install

• cd ios && pod install

• in index.ts comment out export * from './src/components/index' and comment in export { default } from './storybook' for development

• Can run directly on simulator

• yarn run ios OR yarn run android

• OR:

• yarn run storybook will start the component explorer on port 7007 then run

• yarn run ios OR yarn run android

How do I publish to NPM?

• NPM deployments are executed in the pipeline. This pipeline step only runs on tags starting with v.
• npm version minor -m "tag message here"

Making new components

• Remember to export the component in ./src/components/index.ts
• Once you make a component run yarn run prestorybook to view it on your simulator.
• yarn run prestorybook will copy the Storybook entry point to storyLoader.js and update the Storybook loader

Current Components

1. Button

/**
 * The required and optional props for the button component
 * @typedef {ButtonProps}
 * @property {Function} onPress - what happens when the button is pressed
 * @property {string} title - title of the button
 * @property {boolean} [disabled] - disabled state of the button
 * @property {boolean} [loading] - state for loading, shows an ActivityIndicator if true
 * @property {boolean} [primary] - Dark Grey background, White Text
 * @property {boolean} [secondary] - Dark Gret outline, grey text
 * @property {boolean} [actionButton] - SHAiR green with white text
 * @property {boolean} [textLink] - Grey text button
 * @property {object} [containerStyle] - Styling applied to the buttons container ex. containerStyle={{justifyContent: 'flex-end'}}
 * @property {object} [buttonStyle] - Styling applied to the button
 * @property {object} [textStyle] - Styling applied to the button's text
 * @property {React.ReactNode} [icon] - SVG added inside button
 */
export type ButtonProps = {
  onPress: Function
  primary?: boolean
  secondary?: boolean
  actionButton?: boolean
  textLink?: boolean
  containerStyle?: object
  buttonStyle?: object
  textStyle?: object
  title: string
  disabled?: boolean
  loading?: boolean
  icon?: React.ReactNode
}

2. Checkbox

/**
 * The required and optioinal props for the switch component
 * @typedef {CheckboxProps}
 * @property {boolean} value - True or false if checkbox is
 * @property {string} title - String describing use of checkbox
 * @property {function} onPress - Function to perform on value selected / returned
 */
 export type CheckboxProps = {
    value: Boolean,
    title: String,
    onPress: Function,
  }

3. Container

import { ReactNode } from 'react'

/**
 * The required and optional props for page GreyContainerProps
 * @typedef {Container}
 * @property {ReactNode} children - Components inside the container
 * @property {object} [containerStyle] - Additional styling applied to the container
 */
export type ContainerProps = {
  children: ReactNode
  containerStyle?: object
}

4. Grid

/**
 * The required and optional props for page Row
 * @typedef {Row}
 * @property {ReactNode} children - components inside the container
 * @property {ViewStyle['justifyContent']} [justifyContent]- justifying the content inside the column. Possible values: flex-start | flex-end | space-between | etc.
 * @property {ViewStyle['alignItems']} [alignItems] - aligning items inside the column. Possible values: flex-star | flex-end | center | etc.
 */
export type RowProps = {
  children: ReactNode
  justifyContent?: ViewStyle['justifyContent']
  alignItems?: ViewStyle['alignItems']
}

/**
 * The required and optional props for page Row
 * @typedef {Column}
 * @property {ReactNode} [children] - components inside the container
 * @property {object} [containerStyle] - Styling applied to the column container
 */
export type ColumnProps = {
  children?: ReactNode
  containerStyle?: object
}

5. Header

/**
 * The required props for page Layout
 * @typedef {HeaderProps}
 * @property {ReactNode} [PrimaryLeftButton] - to render a custom Icon or Button instead of back button (suggested icon width : 25)
 * @property {ReactNode} [PrimaryRightNode] - to render a custom Icon or Button instead of notification button (suggested icon width : 25)
 * @property {ReactNode} [SecondaryRightNode] - to render a custom Icon or Button instead message button (suggested icon width : 25)
 * @property {Function} [PrimaryLeftButtonOnPress] - on press function for PrimaryLeftButton
 * @property {Function} [PrimaryRightButtonOnPress] - on press function for PrimaryRightButton
 * @property {Function} [SecondaryRightButton] - on press function for SecondaryRightButton
 * @property {String} [headerBackgroundColor] - to render the header with a custom color other than offwhite (the default color)
 * @property {Function} [onPressLogo] - what happens when the middle component of header is pressed
 * @property {ImageSourcePropType} [logo] - middle component of the header
 * @property {boolean} [backButton] - show back arrow on left
 * @property {Function} [onPressBack] - what happens with back arrow is pressed
 * @property {boolean} [transparent] - when true, the header bar will be transparent
 * @property {number} [messageBadge] - number of unread messages
 * @property {number} [notificationBadge] - number of unread notifications
 * @property {Function} [onPressMessage] - what happens when the message icon is pressed
 * @property {Function} [onPressNotification] - what happens when the notification icon is pressed
 * @property {boolean} [showMessages] - render messages icon or an empty element
 * @property {boolean} [showNotifications] - render notifications icon or an empty icon
 * @property {String} [iconColor] - color of icons rendered in the header
 */
export type HeaderProps = {
  PrimaryLeftButton?: ReactNode
  PrimaryRightButton?: ReactNode
  SecondaryRightButton?: ReactNode
  PrimaryLeftButtonOnPress?:Function
  PrimaryRightButtonOnPress?:Function
  SecondaryRightButtonOnPress?:Function
  headerBackgroundColor?: String
  backButton?: boolean
  onPressBack?: Function
  onPressLogo?: Function
  logo?: ImageSourcePropType
  transparent?: boolean
  messageBadge?: number
  notificationBadge?: number
  onPressMessage?: Function
  onPressNotification?: Function
  showMessages?: boolean
  showNotifications?: boolean
  iconColor?: String
}

6. Layout

/**
 * The required props for page Layout
 * @typedef {LayoutProps}
 * @property {ReactNode} children - components inside the layout
 * @property {object} containerStyle - Styling applied to the layout container
 */
export type LayoutProps = {
  children: ReactNode
  containerStyle?: object
}

7. Picker

/**
 * The required and optioinal props for the switch component
 * @typedef {PickerProps}
 * @property {array} values - List of values to scroll through. Could be any type
 * @property {any} [defaultValue] - Default value selected in values. Should be a value within values array
 * @property {boolean} [disabled] - True == disable component, False == enable component
 * @property {function} onPress - Function to perform on value selected / returned from values
 * @property {string} [label] - Picker Input label
 * @property {object} [containerStyle] - styling applied to the pickers container
 * @property {object} [labelContainerStyle] - styling applied to the label's text container
 * @property {object} [labelStyle] - styling applied to the label text
 * @property {object} [buttonContainerIOS] - styling applied to the input box
 * @property {object} [buttonIOS] - styling applied to the input text
 * @property {object} [pickerStyleIOS] - styling applied to the picker wrapper
 * @property {object} [pickerItemStyleIOS] - styling applied to the picker item
 * @property {object} [pickerWrapperStyleAndroid] - styling applied to the picker input box
 * @property {object} [pickerStyleAndroid] - styling applied to the inner input container
 * @property {object} [pickerItemStyleAndroid] - styling applied to the android text for picker
 * @property {boolean} [pickerOpenState] - determines the initial state of picker wether it should be open or not
 */
export type PickerProps = {
  values: Array<any>
  defaultValue?: any
  disabled?: boolean
  onPress: Function
  label?: string
  containerStyle?: object
  labelContainerStyle?: object
  labelStyle?: object
  buttonContainerIOS?: object
  buttonIOS?: object
  pickerStyleIOS?: object
  pickerItemStyleIOS?: object
  pickerWrapperStyleAndroid?: object
  pickerStyleAndroid?: object
  pickerItemStyleAndroid?: object
  pickerOpenState?: boolean
}

8. Progress Bar

import { ReactNode } from 'react'

/**
 * The required and optional props for page GreyContainerProps
 * @typedef {Container}
 * @property {ReactNode} [children] - components inside the container
 * @property {object} [containerStyle] - Styling applied to the container
 * @property {number} [fromValue] - The progress bars starting value for the animation
 * @property {number} [toValue] - The progress bars end value for animation
 * @property {string} [label] - Label for the progress bar
 * @property {object} [labelContainerStyle] - Styling applied to the labels container
 * @property {object} [labelStyle] - Styling applied ot the labels text
 */
export type ProgressBarProps = {
  children?: ReactNode
  containerStyle?: object
  fromValue?: number
  toValue?: number
  label?: string
  labelContainerStyle?: object
  labelStyle?: object
}

9. Radio Buttons

/**
 * The required and optioinal props for the switch component
 * @typedef {RadioButtonsProps}
 * @property {array} values - List of values to create radiobutton for. Can be any type
 * @property {any} [defaultValue] - Default selected value. Should be value within values
 * @property {function} onPress - Function to perform on value selected / returned
 */
export type RadioButtonsProps = {
  values: Array<any>
  defaultValue?: any
  onPress: Function
}

10. Range Slider

/**
 * The requred and optional props for the Range Slider component
 * Based off of component @ptomasroos/react-native-multi-slider
 * @typedef {RangeSliderProps}
 * @property {number} defaultMinimumValue - default value for the range min
 * @property {number} defaultMaximumValue - default value for the range max
 * @property {number} minimumValue - range minimum value
 * @property {number} maximumValue - range maximum value
 * @property {number} [increment] - the step value for the slider
 * @property {boolean} [disabled] - disabled state of range slider
 * @property {Function} onChange - what happens when values of range slider change
 * @property {String} customLabel - option label above the the range slider
 * @property {object} customLabelStyle - optional style for range slider label
 */
export type RangeSliderProps = {
  defaultMinimumValue: number
  defaultMaximumValue: number
  minimumValue: number
  maximumValue: number
  increment?: number
  disabled?: boolean
  onChange: Function,
  customLabel?: String,
  customLabelStyle?: object
}

11. Slider

/**
 * The required and optional props for the slider component
 * Based on @react-native-community/slider
 *
 * @typedef {SliderProps}
 * @property {number} defaultValue - the sliders default value when the component loads
 * @property {number} minimumValue - sliders minimum value
 * @property {number} maximumValue - sliders maximum value
 * @property {number} [increment] - sliders step value
 * @property {boolean} [disabled] - sliders disabled state
 * @property {Function} onChange - what happens when the slider values are changed
 * @property {Function} onSlidingStart - what happens when user starts to interact with the slider
 * @property {Function} onSlidingComplete - what happens when user leaves the slider thumb
 * @property {String} customTitle - slider custom title to show above the slider track
 * @property {object} customTitleStyle - slider custom title style
 */
export type SliderProps = {
  defaultValue: number
  minimumValue: number
  maximumValue: number
  increment?: number
  disabled?: boolean
  onChange: Function,
  onSlidingStart?: Function,
  onSlidingComplete?: Function,
  customTitle?: String,
  customTitleStyle?: object
}

12. Switch

/**
 * The required and optional props for the switch component
 * @typedef {SwitchProps}
 * @property {boolean} [value] - the true or false state of the switch, default false
 * @property {boolean} [disabled] - disabled state for switch
 * @property {Function} onPress - what happens when the switch is toggled
 * @property {String} [activeLabel] - what to show next to the switch when active
 * @property {String} [inActiveLabel] - what to show next to the switch when inactive
 * @property {String} [size] - determines the size of the switch
 */
export type SwitchProps = {
  value?: boolean
  disabled?: boolean
  onPress: Function,
  activeLabel?: String,
  inActiveLabel?: String,
  size?: 'big'|'normal'
}

13. Text

/**
 * The required props for page Text component
 * @typedef {TextProps}
 * @property {ReactNode} children - rendered text and or other components inside Text
 * @property {boolean} mainHeadline - font: Montserrat , size: 30
 * @property {boolean} subHeadLine - font: RobotoLight , size: 20
 * @property {boolean} buttonText - font: RobotoLight , size: 14
 * @property {boolean} searchText - font: RobotoLight , size: 14
 * @property {boolean} bodyHeader - font: Montserrat , size: 14
 * @property {boolean} boldBody - font: RobotoMedium , size: 12
 * @property {boolean} body - font: RobotoLight , size: 12
 * @property {String} fontWeight - font weight : bold / normal
 * @property {object} [style] - additional styling applied to the text
 * @property {object} [props] - Other props that can be applied to React Native Text components. Refer to https://reactnative.dev/docs/text
 */
export type TextProps = {
  children: ReactNode
  mainHeadline?:boolean
  subHeadLine?:boolean
  buttonText?:boolean
  searchText?:boolean
  bodyHeader?:boolean
  boldBody?:boolean
  body?:boolean
  fontWeight?: "bold"|"normal"
  style?: object
  props?: object
}

14. Text Input

/**
 * The required and optional props for page TextInput
 * @typedef {TextInputProps}
 * @property {Function} onChangeText - what happens when text is changed
 * @property {string} [placeholder] - placeholder text
 * @property {string} [value] - text value
 * @property {boolean} [multiline] - If true | the text input can be multiple lines. The default value is false
 * @property {number} [numberOfLines] - Sets the number of lines for a TextInput. Use it with multiline set to true to be able to fill the lines.
 * @property {string} [label] - label for the TextInput, renders above the TextInput
 * @property {boolean} [editable] - If false, text is not editable.
 * @property {any} [textContentType] - Give the keyboard and the system information about the expected semantic meaning for the content that users enter. enum('none', 'URL', 'addressCity', 'addressCityAndState', 'addressState', 'countryName', 'creditCardNumber', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'nickname', 'organizationName', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'username', 'password')
 * @property {any} [autoCompleteType] - Specifies autocomplete hints for the system, so it can provide autofill. enum('off', 'username', 'password', 'email', 'name', 'tel', 'street-address', 'postal-code', 'cc-number', 'cc-csc', 'cc-exp', 'cc-exp-month', 'cc-exp-year')
 * @property {KeyboardType} [keyboardType] - Determines which keyboard to open, e.g.numeric. enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password')
 * @property {boolean} [secureTextEntry] - If true, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is false. Does not work with multiline={true}
 * @property {string} [fontFamily] - font of the text inside the input and label (default : robotoLight )
 * @property {boolean} [error] - styling to indicate there is an error on the text input
 * @property {object} labelContainerStyle - Styling applied to the text inputs label container
 * @property {object} labelStyle - styling applied to the label text
 * @property {object} inputContainerStyle - Styling applied to the text inputs container
 * @property {object} inputStyle - Styling applied to the text input
 * @property {String} operationButton - name of an icon rendered within the input and on its right side to handle a specific functionality like hiding or showing password or voice search (just pass in the icon element)
 * @property {Function} operationOnPress - a function to be called when operation button is pressed
 * @property {Function} inputAccessoryViewID - a string that would uniquely identify a <inputAccessoryViewID> to attach to a specific input.
 * @property {props} - Other props that can be applied to React Native Text components. Refer to https://reactnative.dev/docs/textinput
 */
export type TextInputProps = {
  onChangeText: Function
  placeholder?: string
  value?: string
  multiline?: boolean
  numberOfLines?: number
  label?: string
  editable?: boolean
  textContentType?: "none" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "name" | "namePrefix" | "nameSuffix" | "nickname" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "username" | "password"
  autoCompleteType?: "off" | "username" | "password" | "email" | "name" | "tel" | "street-address" | "postal-code" | "cc-number" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year"
  keyboardType?: KeyboardType
  secureTextEntry?: boolean
  error?: boolean
  labelContainerStyle?: object
  labelStyle?: object
  inputContainerStyle?: object
  inputStyle?: object,
  operationButton?: String
  operationOnPress?: Function,
  inputAccessoryViewID?: string;
  props?: object
}

15. Calendar

/**
 * The required and optioinal props for the calendar component
 * @typedef {CalendarProps}
 * @property {any} [blockedDates] - list of ISO string formatted dates that are blocked / fully reserved
 * @property {any} [blockedRanges] - list of ISO string formatted JSON objects with startDate / endDate
 * @property {any} [partialDates] - list of ISO string formatted JSON objects with startDate / endDate
 * @property {any} [partialRanges] - list of ISO string formatted JSON objects with startDate / endDate and week days
 * @property {any} [blockedDays] - list of strings for week days that are blocked
 */
 export type CalendarProps = {
    blockedDates?: any
    blockedRanges?: any
    partialDates?: any
    partialRanges?: any
    blockedDays?: any
  }
    ```

16. Phone Number Input

/**
 * The required and optional props for page PhoneNumberInput
 * @typedef {PhoneNumberInputProps}
 * @property {string} [value] - text value
 * @property {string} [placeholder] - placeholder text
 * @property {object} inputContainerStyle - Styling applied to the phone number inputs container
 * @property {boolean} [showError] - If true, Error Message is shown.
 * @property {string} [errMessage] - Error Message text
 * @property {Function} isValid - We can trigger if phone number is valid or not
 * @property {Function} onChangePhone - what happens when text is changed
 */

export type PhoneNumberInputProps = {
  value?: string
  placeholder?: string
  inputContainerStyle?: object
  showError?: boolean
  errMessage?: string
  isValid?: Function
  onChangePhone: Function
}

17. Password Strength Indicator

/**
 * The required and optional props for page PasswordStrength
 * @typedef {PasswordStrengthProps}
 * @property {string} [value] - password value
 * @property {Function} isValidPassword - We can check if phone number is valid or not
 * @property {String} position - position of password strength component beneath the password input
 */

export type PasswordStrengthProps = {
  password: string
  isValidPassword?: Function,
  position?: "right" | "center" | "left"
}

18. Address Autocomplete

/**
 * The required and optional props for page AddressInput
 * @typedef {AddressInputProps}
 * @property {Function} onInputAddress - what happens when we input address
 * @property {Function} onSelectAddress - what happens when we select an address from address list.
 * @property {Function} onCanInputAddress - We can control if we have to call api for geting address list.
 * @property {object[]} addressLists - Address Lists
 * @property {string} addressLoadingStatus - The status when we call api.(ex: loading)
 * @property {string} [placeholder] - placeholder text
 */

export type AddressInputProps = {
  onInputAddress?: Function
  onSelectAddress?: Function
  onCanInputAddress?: Function
  addressLists?: any[]
  addressLoadingStatus?: string
  placeholder?: string
}

19. Avatar

/**
 * The required and optional props for Avatar component
 * @property {String} [shape] - determines the shape of avatar : "round" | "square"
 * @property {number} [width] - width of avatar
 * @property {number} [height] - height of avatar
 * @property {ImageSourcePropType} [source] - source image of the avatar
 * @property {boolean} [inAppState] - whether the corresponding user is in the app or not
 * @property {boolean} [touchable] - whether a specific functionality is required when pressing the avatar
 * @property {Function} [onPress] - the function to be called when the avatar is pressed
 * @property {object} [props] - Other props that can be applied to React Native TouchableOpacity components. Refer to https://reactnative.dev/docs/touchableopacity
 * @property {object} [containerStyle] - additional styling for avatar component
 */

export type AvatarTypes = {
    shape?: "round" | "square"
    width?: number
    height?: number
    source: ImageSourcePropType
    inAppState?: boolean
    touchable?: boolean
    onPress?: Function
    props?: object
    containerStyle?: object
}

20. ImageSliderIndicator

/**
 * list of required and optional props for Image slider indicator
 * @property {number} [lengthValue] - number of images within the slider
 * @property {number} [activeIndex] - index of the active image
 * @property {string} [customBackgroundColor] - custom background color for this component
 * @property {string} [customActiveDotColor] - custom color for the active dot
 * @property {string} [customInActiveDots] - custom color for the inactive dots
 * @property {object} [props] - Other props that can be applied to React Native View components. Refer to https://reactnative.dev/docs/view
 */

export type ImageSliderIndicatorTypes = {
    lengthValue: number
    activeIndex: number
    customBackgroundColor?: string
    customActiveDotColor?: string
    customInActiveDotColor?: string
    props?: object
}

21. Icon

/**
 * Required and optional props for Icon Component
 * @property {string} [name] - name of the icon ...
 * @property {number} [size] - size of the icon (30 by default)
 * @property {string} [color] - color of icon (shairGrey by default)
 * @property {Function} [onPress] - to call a specific function when the icon is pressed
 * @property {object} [props] - Other props that can be applied to React Native TouchableOpacity components. Refer to https://reactnative.dev/docs/touchableopacity
 * @property {object} [svgProps] - Other props that can be applied to SVG elements. Refer to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
 */

export type IconNameType =
  | 'apple-bg'
  | 'apple'
  | 'book'
  | 'bookmark'
  | 'calender'
  | 'camera'
  | 'cancel'
  | 'checkmark-no-circle'
  | 'clock'
  | 'close-no-circle'
  | 'close'
  | 'comment-lines'
  | 'controls'
  | 'conversation'
  | 'create-new'
  | 'credit-card'
  | 'crosshair'
  | 'down-arrow-no-circle'
  | 'down-arrow'
  | 'email'
  | 'facial-scan'
  | 'forward'
  | 'google-bg'
  | 'google'
  | 'heart-solid'
  | 'heart'
  | 'home'
  | 'host-1'
  | 'host-2'
  | 'host-3'
  | 'info'
  | 'insurance-covered'
  | 'left-arrow-no-circle'
  | 'left-arrow'
  | 'link'
  | 'location-lock'
  | 'location-marker'
  | 'location'
  | 'map'
  | 'medal'
  | 'message-send'
  | 'microphone'
  | 'miles'
  | 'minus'
  | 'notification-filled'
  | 'notification-straight'
  | 'notification'
  | 'package'
  | 'padlock'
  | 'payment'
  | 'pencil'
  | 'phone'
  | 'photo'
  | 'plus'
  | 'profile'
  | 'quality'
  | 'question'
  | 'reply'
  | 'right-arrow-no-circle'
  | 'right-arrow'
  | 'save-send'
  | 'scan'
  | 'search'
  | 'selfie-scan'
  | 'selfie-scan-2'
  | 'selfie-scan-3'
  | 'selfie-scan-id'
  | 'settings'
  | 'share'
  | 'speedometer'
  | 'star'
  | 'tag'
  | 'thumbs-up'
  | 'thumbs-down'
  | 'tick'
  | 'trash'
  | 'typing-comment'
  | 'up-arrow-no-circle'
  | 'up-arrow'
  | 'user'
  | 'users'
  | 'vetted'
  | 'video-camera'
  | 'warning'
  | 'mileage-allowance
  | 'car'
  | 'coupe'
  | 'exotic'
  | 'suv'
  | 'truck'
  | 'our'
  | 'submit'

export type IconTypes = {
  name: IconNameType
  size?: number
  color?: string
  onPress?: Function
  props?: object
  svgProps?: object
}

23. Bottom Button

/**
 * The required and optional props for the bottom button component
 * @typedef {BottomButtonProps}
 * @property {string} title - title of the button
 * @property {boolean} [disabled] - disabled state of the button
 * @property {boolean} [loading] - state for loading, shows an ActivityIndicator if true
 * @property {React.ReactNode} [icon] - icon in the bottom button
 */

export type BottomButtonTypes = {
  title: string | React.ReactNode
  onPress: () => void
  disabled: boolean
  icon?: React.ReactNode
  loading: boolean
}

24. Dialog

/**
 * The required and optional props for the dialog component
 * @typedef {DialogProps}
 * @property {boolean} visible - toggle value that controls visibility of the button
 * @property {string} title - main heading of the dialog
 * @property {string} subtitle - body copy of the dialog
 * @property {string} type - type of the button (ie 'primary' or 'secondary')
 * @property {DialogButton[]} buttons - list of buttons that can have a text, type, and it's own onPress callback
 * @property {object} style - style of the dialog
 * @property {icon} ReactNode - an icon for the dialog
 * @property {function} onHide - callback for the dialog button on hiding
 * @property {function} onClose - callback for the dialog button on closing
 */

export type DialogTypes = {
  visible: boolean
  title?: string
  subtitle: string
  style?: Object
  onHide?: Function
  onClose?: Function
  buttons?: DialogButtonTypes[]
  icon?: React.ReactNode
}

/**
 * The required and optional props for the dialog button component
 * @typedef {DialogButtonProps}
 * @property {string} text - text of the button
 * @property {string} type - type of the button (ie 'primary' or 'secondary')
 * @property {function} onPress - callback function for a dialog button
 * @property {object} containerStyle - style of the button
 * @property {number} key - key of the button
 */
export type DialogButtonTypes = {
  text: string
  type: string
  onPress: () => void
  containerStyle?: Object
  key?: string | number
  disabled?: boolean
  loading?: boolean
}

25. Modal

/**
 * The required and optional props for the bottom button component
 * @typedef {ModalProps}
 * @property {string} title - title of the button
 * @property {string} animation - animation of the button (ie "none" | "fade" | "slide" | undefined' )
 * @property {boolean} [visible] - displaying and hiding of the modal
 * @property {boolean} [transparent] - transparent or solid modal
 * @property {function} [onClose] - callback function for the modal
 * @property {object} [style] - custom styling
 */
export type ModalTypes = {
  visible?: boolean
  style?: Object
  onClose: () => void
  children?: React.ReactNode
  animation?: any
  transparent: boolean
  buttons?: DialogButtonTypes[]
  closeIcon?: boolean
}

26. SwipeButton

/**
 * The required props for the swipe button
 * @typedef {SwipeButtonProps}
 * @property {function} onToggle -  callback function for the Swipe Button
 * @property {string} text - text for the swipe button
 * @property {ReactNode} icon - icon for the button
 */
export type SwipeButtonProps = {
  onToggle: (value: boolean) => void;
  text: string;
  icon: ReactNode;
};

27. New Calendar

/**
 * The required and optional props for new calendar component
 * @property {'search'|'booking'} [calendarType] - declares the type of calendar - shows booked and blocked dates when the type is "booking"
 * @property {number} [monthsQty] - number of months to be rendered in the calendar (default: 5)
 * @property {object} [resetBTNStyle] - a custom style object to be applied to the reset button of the calendar
 * @property {object} [resetBTNProps] - any other custom property desired to be applied to Button Component of the the reset btn
 * @property {bookedDateRanges} [bookedDateRanges] - custom ranges which are shown booked and unusable on the calendar - see below for details of the type
 * @property {boolean} [showClock] - a flag which indicates showing clocking and picking time within the component - enabled by default
 * @property {Function} [onRangeChange] - a function to be called when a selected date range changes by user (it can have one parameter)
 * @property {boolean} [showSelectedRange] - a flag which indicates showing staring and ending dates of the range selected by users - enabled by default
 * @property {string} [startDateTitle] - optional string to show instead of year for starting date of the selected range
 * @property {string} [endDateTitle] - optional string to show instead of year for ending date of the selected range
 *
 * @description: type bookedDateRangesType = {
        startDate: Date
        endDate: Date
    }[]
 */
export type NewCalendarProps = {
    calendarType: 'search' | 'booking'
    monthsQty: number
    resetBTNStyle?: object
    resetBTNProps?: object
    bookedDateRanges?: bookedDateRangesType
    onRangeChange?: Function
    showSelectedRange?: boolean
    showClock?: boolean
    startDateTitle?: string
    endDateTitle?: string
}

28. V3Calendar

/**
 * The required and optional props for v3 calendar component
 * @property {'search'|'booking'| 'instant-booking'} [calendarType]
 * - declares the type of calendar
 * - shows booked and blocked dates when the type is "booking"
 * @property {number} [monthQty]
 * - number of months to be rendered in the calendar (default: 6)
 * @property {object} [resetBTNStyle]
 * - a custom style object to be applied to the reset button of the calendar
 * @property {object} [resetBTNProps]
 * - any other custom property desired to be applied
 * to Button Component of the the reset btn
 * @property {bookedDateRanges} [bookedDateRanges]
 * - custom ranges which are shown booked and unusable on the calendar
 * - see below for details of the type
 * @property {(p: any) => void} [onChange]
 * - a function to be called when a selected date range changes by user
 * (it has one parameter)
 * @property {() => void} [onActionButton]
 * - the function to be called when the bottom button of the calendar is hit
 * @property {string} [actionBtnText]
 * - custom label for bottom button of the calendar
* @property {Date} [defaultStartDate] - a start date selected
 * by default for the calendar
 * @property {Date} [defaultEndDate] - a default date selected
 * by default for the calendar
 * @description: type bookedDateRangesType = {
    timing: { startDateTime: string; endDateTime: string };
    }[]
 */
export type V3CalendarProps = {
  monthQty?: number;
  calendarType: 'search' | 'booking' | 'instant-booking';
  bookedDateRanges?: bookedDateRangesType;
  onChange: (p: [Date | null, Date | null]) => void;
  resetBTNStyle?: object;
  resetBTNProps?: object;
  onActionButton: () => void;
  actionBtnText?: string;
  minDate?: Date;
  maxDate?: Date;
};