Sefar by Yassir

Welcome to Sefar by Yassir!

Migrate from Sefar 0.2.5 to 0.2.6 #

Below is presented the list of the breaking changes which may effect the consumers of the library

Code Input changes: #

Please note that the valid types of codeType property have been changed for PIN code and OTP code. Please see below examples:

PIN CODE Before # 
CodeInput(
  modifier = Modifier, // optional
  codeType = CodeType.PIN_CODE,
  label = "PIN Code", // optional
  isError = false, // optional
  isEnabled = true, // optional
  clearCode = false, // optional
  autoFocus = true, // optional
  codeLength = CodeInputDefaults.LENGTH, // optional
  spaceBetweenCodeCells = YassirTheme.spacing.spacing2, // optional
  hint = AnnotatedString(hintText), // optional
  onHintClick = {}, // optional
  resetErrorState = {}, // optional
  onCodeFilled = { code ->
    /* handle entered PIN code */
  },
  colors = YassirTheme.colors // optional
)
PIN CODE After # 
CodeInput(
  modifier = Modifier, // optional
  codeType = CodeType.PinCode,
  label = "PIN Code", // optional
  isError = false, // optional
  isEnabled = true, // optional
  clearCode = false, // optional
  autoFocus = true, // optional
  codeLength = CodeInputDefaults.LENGTH, // optional
  spaceBetweenCodeCells = YassirTheme.spacing.spacing2, // optional
  hint = AnnotatedString(hintText), // optional
  onHintClick = {}, // optional
  resetErrorState = {}, // optional
  onCodeFilled = { code ->
    /* handle entered PIN code */
  },
  colors = YassirTheme.colors // optional
)
OTP CODE Before # 
CodeInput(
  modifier = Modifier
    .align(Alignment.CenterHorizontally)
    .padding(top = YassirTheme.spacing.spacing4), // optional
  codeType = CodeType.OTP_CODE,
  isError = false, // optional
  isEnabled = true, // optional
  clearCode = false, // optional
  autoFocus = true, // optional
  codeLength = 6, // optional
  spaceBetweenCodeCells = YassirTheme.spacing.spacing1_5, // optional
  hint = AnnotatedString(hintText), // optional
  onHintClick = {}, // optional
  resetErrorState = { isError = false }, // optional
  onCodeFilled = { code ->
    /* handle entered OTP code */
  },
  colors = YassirTheme.colors, // optional
  label = "OTP Code" // optional
)
OTP CODE Before # 
CodeInput(
  modifier = Modifier
    .align(Alignment.CenterHorizontally)
    .padding(top = YassirTheme.spacing.spacing4), // optional
  codeType = CodeType.OtpCode(
    initialCode = "456757" //optional
  ),
  isError = false, // optional
  isEnabled = true, // optional
  clearCode = false, // optional
  autoFocus = true, // optional
  codeLength = 6, // optional
  spaceBetweenCodeCells = YassirTheme.spacing.spacing1_5, // optional
  hint = AnnotatedString(hintText), // optional
  onHintClick = {}, // optional
  resetErrorState = { isError = false }, // optional
  onCodeFilled = { code ->
    /* handle entered OTP code */
  },
  colors = YassirTheme.colors, // optional
  label = "OTP Code" // optional
)

Migrate from Sefar 0.2.3 to 0.2.5 #

Below is presented the list of the breaking changes which may effect the consumers of the library

Time Picker changes: #

File has been moved and properties of the component have been combined under ´TimePickerProperties´ object, so re-add the import and check the following example:

Before # 
TimePicker(
    timeFormat = if (is24HFormat) TimeFormat.HOUR_24 else TimeFormat.AM_PM,
    minutesIncrement = minutesIncrement,
    onDismissRequest = { onShowDialogChange(false) },
    onApply = { uno ->
        onApply(uno)
        onShowDialogChange(false)
    },
    onSnappedTime = { uno, _ -> uno.get(Calendar.HOUR_OF_DAY) },
    onCancel = { onShowDialogChange(false) }
)
After # 
TimePicker(
    modifier = Modifier.withTestPrefix("time_picker_screen"),
    timePickerProperties = TimePickerProperties(
        timeFormat = if (is24HFormat) TimeFormat.HOUR_24 else TimeFormat.AM_PM,
        minutesIncrement = minutesIncrement,
        onSnappedTime = { uno, _ -> uno.get(Calendar.HOUR_OF_DAY) },
    ),
    onDismissRequest = { onShowDialogChange(false) },
    onApply = { uno ->
        onApply(uno)
        onShowDialogChange(false)
    },
    onCancel = { onShowDialogChange(false) }
)

Bottom Navigation Bar changes #

Properties have been changed:

Before # 
BottomNavigationBar(
  list = bottomNavigationBarList,
  initialSelectedItemIndex = 1, // optional
  colors = YassirColorScheme.colors // optional
)
After # 
BottomNavigationBar(
  list = bottomNavigationBarList,
  selectedItemIndex = 1, // optional
  onItemSelected = { }
)

Migrate from Sefar 0.2.2.2 to 0.2.3 #

Below is presented the list of the breaking changes which may effect the consumers of the library

Phone Input changes: #

  1. Added arguments to customize Country Backdrop in Phone Input, like “countryBackdropTitle”, “searchBackdropPlaceholder” “backdropHintText”
  2. Changed the logic of passing the initial selected country - now it is needed to pass a String with Region Code
  3. Changed logic of setting a list of countries for the Phone Input. Now it is divided into 3 different lists, more about it usages and the definition of the types can be found in the Sefar Phone Input documentation

Before: # 

PhoneInput(
  modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
  hint = "Phone Number can't be empty!", // optional
  hasError = true, // optional
  hasLabel = true, // optional
  enabled = true, // optional
  phoneNumber = "", // optional
  isCountrySelectionEnabled = true, // optional
  countriesList = SupportedCountries.entries, // optional
  onPhoneNumberChange = { phoneNumber, isValid -> }, // optional
  initialSelectedCountry = SupportedCountry.ALgeria, // optional
  onHintClick = { /* action */ } // optional,
  onImeAction = { /* action */ } // optional,
)

After # 

PhoneInput(
  modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
  hint = "Phone Number can't be empty!", // optional
  hasError = true, // optional
  hasLabel = true, // optional
  enabled = true, // optional
  phoneNumber = "", // optional
  isCountrySelectionEnabled = true, // optional
  countriesList = SupportedCountries.entries, // optional
  onPhoneNumberChange = { phoneNumber, isValid -> }, // optional
  initialSelectedCountryRegionCode: String = SupportedCountry.Algeria.regionCode // optional
  countriesBackDropList: CountryCodeListType = CountryCodeListType.SupportedCounties // optional
  countryBackdropTitle: String = "", // optional
  backdropHintText: Int? = R.string.country_backdrop_hint, // optional
  searchBackdropPlaceholder: String? = null,
  onHintClick = { /* action */ } // optional,
  onImeAction = { /* action */ } // optional,
)

Map Pin changes: #

  1. YassirMapPin name is changed to MapPin

Before:

fun YassirMapPin(
    mapPinType: MapPinType,
    mapPinDirection: MapPinDirection = MapPinDirection.Up,
    mapPinComponentColor: MapPinComponentColor = MapPinComponentColor.Primary
)

After:

fun MapPin(
    modifier: Modifier = Modifier,
    mapPinType: MapPinType,
    mapPinDirection: MapPinDirection = MapPinDirection.Up,
    mapPinComponentColor: MapPinComponentColor = MapPinComponentColor.Primary
)

Action changes: #

  1. Action name changed to Button Action used in Backdrop and Modal

Before:

fun Modal(
    modifier: Modifier = Modifier,
    modalType: ModalType,
    colors: YassirColorScheme = YassirTheme.colors,
    primaryAction: Action? = null,
    secondaryAction: Action? = null,
    tertiaryAction: Action? = null,
    onDismiss: () -> Unit,
)

After:

fun Modal(
    modifier: Modifier = Modifier,
    modalType: ModalType,
    colors: YassirColorScheme = YassirTheme.colors,
    primaryAction: ButtonAction? = null,
    secondaryAction: ButtonAction? = null,
    tertiaryAction: ButtonAction? = null,
    onDismiss: () -> Unit,
)

Backdrop #

Before:

fun Backdrop(
    modifier: Modifier = Modifier,
    backDropType: BackdropType,
    backdropHeaderItem: BackdropHeaderItem? = null,
primaryAction: ButtonAction? = null,
    secondaryAction: ButtonAction? = null,
    tertiaryAction: ButtonAction? = null,
    isVisible: Boolean = false,
    screenState: ScreenState = ScreenState.Contained(),
    windowInsets: WindowInsets = BottomSheetDefaults.windowInsets,
    sheetState: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
    onDismissRequest: () -> Unit
)

After:

fun Backdrop(
    modifier: Modifier = Modifier,
    backDropType: BackdropType,
    backdropHeaderItem: BackdropHeaderItem? = null,
    primaryAction: ButtonAction? = null,
    secondaryAction: ButtonAction? = null,
    tertiaryAction: ButtonAction? = null,
    isVisible: Boolean = false,
    screenState: ScreenState = ScreenState.Contained(),
    windowInsets: WindowInsets = BottomSheetDefaults.windowInsets,
    sheetState: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
    onDismissRequest: () -> Unit
)