npm - @estuary-solutions/rn-core-ui - Versions diffs - 0.0.4 → 0.1.0 - Mend

@estuary-solutions/rn-core-ui 0.0.4 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1761) hide show

package/dist/README.md DELETED Viewed

@@ -1,743 +0,0 @@
-# Estuary RN Core UI
-[![NPM Version][npm-image]][npm-url]
-[![Build Status][build-image]][build-url]
-[![License][license-image]][license-url]
-`estuary-rn-core-ui` provides a collection of core, reusable, and easily customizable User Interface (UI) Components built for React Native applications. Our goal is to help you build beautiful and consistent user interfaces quickly.
-**Note:** If you are new to this project just follow this command:
-```sh
-# If you are currently in root package folder
-# Run yarn install for the first time
-yarn install
-# Run yarn build for apply you local changes -> build -> copy to example/RNCoreUISample/node_modules
-yarn build
-# From now if you are in example/RNCoreUISample. Just run yarn install
-# All your changes in package will be packed and copy to example/RNCoreUISample/node_modules
-yarn install
-```
-## Table of Contents
-- [Installation](#installation)
-- [Custom components](#custom-components)
-  - [Text](#text)
-  - [GalleryBottomSheet](#gallerybottomsheet)
-- [Custom hooks](#custom-hooks)
-  - [useGalleryAssets](#usegalleryassetsdefaultassettype-assettype)
-- [ScrollPercentage (Future)](#scrollpercentage)
-- [Color pallete](#colors)
-- [Font size template](#fontsize)
-- [Scaling Function](#scaling-function)
-  - [scale(size: number)](#scalesize-number)
-  - [scaleH(size: number)](#scalehsize-number)
-  - [moderateScale(size: number, factor?: number)](#moderatescalesize-number-factor-number)
-  - [moderateHeightScale(size: number, factor?: number)](#moderateheightscalesize-number-factor-number)
-  - [scaleFont(size: number)](#scalefontsize-number)
-  - [IPHONE_12_WIDTH](#iphone_12_width)
-  - [IPHONE_12_HEIGHT](#iphone_12_heigth)
-- [Resolution Function](#resolution-function)
-  - [getPaddingTop()](#getpaddingtop)
-  - [getPaddingBottom()](#getpaddingbottom)
-  - [isTablet](#istablet)
-  - [StylePlatform](#styleplatform)
-  - [statusBarHeight](#statusbarheight)
-- [Converter and format](#converter-and-format)
-  - [convertString(value: any)](#convertstring)
-  - [convertNumber(value: any)](#convertnumber)
-  - [convertSeconds(seconds: number)](#convertseconds)
-  - [formatHours(seconds: number)](#formathour)
-  - [fixedDistance(distance?: number, toFixed?: number)](#fixeddistance)
-  - [formatMoney(num: number, maximumFractionDigits: number, lang: string)](#formatmoney)
-- [Debounce](#debounce)
-- [Others](#others)
-  - [cleanTagHTML(str: string)](#cleantaghtml)
-  - [limitedString(str: string, maxLength: number)](#limitedstring)
-## Installation
-Please install required packages:
-- @react-native-camera-roll/camera-roll: ">=7.10.0" => For access devices media support [GalleryBottomSheet](#gallerybottomsheet) & [useGalleryAssets](#usegalleryassetsdefaultassettype-assettype). `Note`: This package should be upper then 7.10.0. Due to error in v7.7.0 and lowwer version this package won't work correct in [GalleryBottomSheet](#gallerybottomsheet) & [useGalleryAssets](#usegalleryassetsdefaultassettype-assettype)
-- react-native-device-info: ">=8.1.3", => Use for knowing device is table or not
-- react-native-gesture-handler: ">=2.9.0", => Support handling gesture for [GalleryBottomSheet](#gallerybottomsheet)
-- react-native-reanimated: ">=2.8.0", => For handling package animation
-- react-native-svg: ">=12.1.1", => For custom svg
-- react-native-vector-icons: ">=8.1.0", => Please config correct [installation guidline](https://www.npmjs.com/package/react-native-vector-icons#installation) for not handling icon error
-## Custom components
-### Text
-Text component for displaying text with custom styles and loading state. This component also have its own view and can easily be customized.
-#### Props
-| Prop            | Type                   | Default     | Description                                                             |
-| --------------- | ---------------------- | ----------- | ----------------------------------------------------------------------- |
-| **`style`**     | `StyleProp<TextStyle>` | _None_      | Style of the Text component, just like [Text Style Props](https://reactnative.dev/docs/text-style-props)                 |
-| **`color`**     | `ColorValue`           | `"black"`   | Color of the text                                                       |
-| **`bold`**      | `boolean`              | `false`     | Choose to bold the text                                                 |
-| **`children`**  | `React.ReactNode`      | _None_      | Provide the text string or another Text component                       |
-| **`load`**      | `boolean`              | `false`     | Waiting before show Text                                                |
-| **`styleView`** | `StyleProp<ViewStyle>` | _None_      | For custom a View outside Text component                                |
-### GalleryBottomSheet
-A bottom sheet component for displaying a gallery of images and videos. It allows users to select multiple assets and provides a filter for albums.
-<p align="center">
-  <img src="https://s4.gifyu.com/images/bLfMU.gif" width="200" style="display: inline-block; margin-right: 10px;" />
-  <img src="https://s4.gifyu.com/images/bLfzY.gif" width="200" style="display: inline-block; margin-right: 10px;" />
-  <img src="https://s4.gifyu.com/images/bLfMT.gif" width="200" style="display: inline-block;" />
-</p>
-#### Permissions
-##### Android
-Add this permission to your AndroidManifest.xml:
-```xml
-<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
-<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
-<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
-<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
-```
-##### iOS
-Add this perission to your Info.plist:
-```xml
-<key>NSPhotoLibraryUsageDescription</key>
-<string>App request permission for access your gallery</string>
-<key>NSPhotoLibraryAddUsageDescription</key>
-<string>App request permission for create assets in your gallery</string>
-```
-#### Props
-| Prop                     | Type                                                                | Default                                                   | Description                                                                                                                                                                                                                              |
-|--------------------------|---------------------------------------------------------------------|------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **`isOpen`**     | `boolean` | `false`      | Define to open gallery or not. |
-| **`openHeight`**         | `number`                                                            | `ScreenHeight / 2`                                         | Define the position to open gallery. **Note:** y coordinate of the top of the bottom sheet from the top of the screen                                                                             |
-| **`closeHeight`**        | `number`                                                            | `ScreenHeight`                                             | Define the position when closed gallery. **Note:** y coordinate of the top of the bottom sheet from the top of the screen                                                                         |
-| **`maxHeight`**          | `number`                                                            | `0`                                                        | Define the maximum y coordinate that gallery should snapped at after finger release. **Note:** y coordinate of the top of the bottom sheet from the top of the screen                             |
-| **`headerBarColor`**     | `ColorValue`                                                        | `"#FFFFFF"`                                                | Define the background color of the header bar. **Note:** Full control over the look at each position. Whether it's beautiful or ugly is up to you.                                                 |
-| **`barIconColor`**       | `ColorValue`                                                        | `"#000000"`                                                | Define the header bar icon color. **Note:** Full control over the look at each position. Whether it's beautiful or ugly is up to you.                                                             |
-| **`headerTitleStyle`**   | `Pick<TextStyle, "color" \| "fontFamily" \| "fontWeight">`         | `{ color: '#000000' }`                                     | Define styling for the header title. Only supports: `color`, `fontFamily`, `fontWeight`.                                                                                                          |
-| **`headerTitle`**        | `string`                                                            | `'Tất cả ảnh'`                                             | Define the header title. Will be overridden by folder name when one is selected. Will be truncated if too long.                                                                                   |
-| **`headerTitleIconColor`** | `ColorValue`                                                     | `"#000000"`                                                | Define the header title icon color.                                                                                                                                                                |
-| **`backgroundColor`**    | `ColorValue`                                                        | `"#FFFFFF"`                                                | Define the background color of the gallery bottom sheet.                                                                                                                                           |
-| **`emptyGalleryMsg`**    | `string`                                                            | `'Không có hình ảnh để hiển thị'`                          | Message shown when there are no media items available. Please provide meaningful content.                                                                                                         |
-| **`emptyGalleryMsgStyle`** | `Pick<TextStyle, "color" \| "fontFamily" \| "fontWeight">`      | `{ color: '#000000' }`                                     | Define styling for the empty message. Only supports: `color`, `fontFamily`, `fontWeight`. [See example](#headertitlestyle)                                                                                                        |
-| **`videoIconStyle`**     | `{ circleStyle?: CircleStyleProps; polygonStyle?: CircleStyleProps }` | [See example](#videoiconstyle)                                        | Define styling for the video icon shown for video items. Full control over circle and polygon styles.                                                                                             |
-| **`albumItemStyle`**     | `AlbumFilterStyleProps`                                             | `{ titleColor: '#000000', countColor: '#A0A0A0' }`         | Define style for album filter items. Full control over title and count colors. [See example](#albumitemstyle)                                                                                                                     |
-| **`assetType`**          | `'All'` \| `'Photos'` \| `'Videos'`                                 | `'All'`                                                    | Asset types to display. Can be dynamically changed with setState.                                                                                                                                |
-| **`maxSelectable`**      | `number`                                                            | `5`                                                        | Max number of items selectable. Min: `0`, Max: `10`. Large values may cause performance issues.                                                                                                       |
-| **`onSelectedAssetsChange`** | `(assets: PhotoIdentifier[]) => void`                         | `undefined`                                                | Define function for handling selected assets data. This function will be called when the user select an asset.                                                                                                                     |
-##### headerTitleStyle
-Only support: `color`, `fontFamily`, `fontWeight`.
-```jsx
-  import { GalleryBottomSheet, Text } from '@estuary-solutions/rn-core-ui';
-  <GalleryBottomSheet
-    isOpen={isOpen}
-    ...
-    headerTitleStyle={{
-      color: '#000000',
-      fontFamily: 'Arial',
-      fontWeight: 400,      // Correct ✅
-      fontSize: 20          // Wrong => Unsupport ❌
-    }}
-    ...
-  />
-```
-##### videoIconStyle
-Only support: `fill`, `stroke`, `strokeWidth`.
-For the `strokeWidth`, we accept value start from `scale(5)` to `scale(8)`
-```jsx
-  import { GalleryBottomSheet, Text } from '@estuary-solutions/rn-core-ui';
-  <GalleryBottomSheet
-    isOpen={isOpen}
-    ...
-    videoIconStyle={{
-      circleStyle: {
-        fill: 'rgba(0, 0, 0, 0.5)',
-        stroke: 'black',
-        strokeWidth: 7
-      },
-      polygonStyle: {
-        fill: 'rgba(0, 0, 0, 0.5)',
-        stroke: 'black',
-        strokeWidth: 7
-      },
-    }}
-    ...
-  />
-```
-##### albumItemStyle
-Only support: `titleColor`, `countColor`.
-```jsx
-  import { GalleryBottomSheet, Text } from '@estuary-solutions/rn-core-ui';
-  <GalleryBottomSheet
-    isOpen={isOpen}
-    ...
-    albumItemStyle={{
-      titleColor: '#000000',
-      countColor: '#A0A0A0'
-    }}
-    ...
-  />
-```
-## Custom hooks
-### useGalleryAssets(defaultAssetType?: AssetType)
-You can use this hook for accessing device's assets or requesting related permission.
-#### Permissions
-##### Android
-Add this permission to your AndroidManifest.xml:
-```xml
-<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
-<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
-<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
-<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
-```
-##### iOS
-Add this perission to your Info.plist:
-```xml
-<key>NSPhotoLibraryUsageDescription</key>
-<string>App request permission for access your gallery</string>
-<key>NSPhotoLibraryAddUsageDescription</key>
-<string>App request permission for create assets in your gallery</string>
-```
-#### Props
-| Prop                     | Type                                                                | Default                                                   | Description                                                                                                                                                                                                                              |
-|--------------------------|---------------------------------------------------------------------|------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **`defaultAssetType`**     | `AssetType` | `'All'`      | Initiallize the default asset type. |
-| **`albums`**     | `Album[]` | `[]`      | Provide list of albums on current device. |
-| **`assets`**         | `Record<string, PhotoIdentifier[]>` | `{}` | Provide list of assets on current device grouped by album. |
-| **`fullAssets`**         | `PhotoIdentifier[]` | `[]` | Provide list of assets on current device. |
-| **`loading`**         | `boolean` | `false` | Provide loading assets state. |
-| **`error`**         | `string` | `null` | Provide string error if loading cause any error. |
-| **`totalAssets`**         | `number` | `0` | Provide the total assets that has been accessed. |
-| **`fullAssetsPagination`**         | `Pagination` | `undefined` | Provide the object related for pagination on `fullAssets`. |
-| **`loadFullAssets`**         | `Promise function` | `` | Provide function for fecth assets which not grouped by album. Return `true` if has next page. [See example](#usage) |
-| **`loadAssets`**         | `Promise function` | `` | Provide function for fecth assets which grouped by album. Return `true` if has next page. [See example](#usage) |
-| **`pagination`**         | `Pagination` | `undefined` | Provide the object related for pagination on `assets`. |
-| **`requestPermission`**         | `Promise function` | `` | Provide function for request permission. Return `true` if user provided permission. [See example](#usage) |
-| **`checkPermission`**         | `Promise function` | `` | Provide function returning if user has provided permission. [See example](#usage) |
-| **`hasPermission`**         | `boolean` | `false` | Provide a state that keep track user permisison. |
-| **`changeAssetType`**         | `function` | `` | Provide function changing with asset type that you want to fecth. Please notice that, you should provide video permision if want to access videos. Default type `'All'`. [See example](#usage) |
-#### Usage
-```jsx
-  import { View, Text } from 'react-native'
-  import React from 'react'
-  import { useGalleryAssets } from '@estuary-solutions/rn-core-ui';
-  const MyComponent = () => {
-    const [selectedAlbum, setSelectedAlbum] = React.useState<Album | null>(null);
-    const {
-        albums,
-        fullAssets,
-        fullAssetsPagination,
-        loadFullAssets,
-        totalAssets,
-        assets,
-        loadAssets,
-        pagination,
-        requestPermission,
-        hasPermission,
-        changeAssetType,
-    } = useGalleryAssets('All');
-    const getSelectedInfo = (item: any) => {
-      // Do your own selection logic
-    }
-    const toggleAsset = (item: any) => {
-      // Do your own selection logic
-    }
-    return (
-      <View>
-        {(albums.length === 0 || fullAssets.length === 0 || totalAssets == 0) ? (
-          <View>
-            <Text style={[
-              styles.noImage,
-              safeEmptyGalleryMsgStyle
-            ]}>No assets</Text>
-          </View>
-        ) : (
-        <FlatList
-          data={selectedAlbum == null ? fullAssets : assets[selectedAlbum.id]}
-          keyExtractor={(item) => item.node.image.uri}
-          renderItem={({ item }) => {
-            const info = getSelectedInfo(item);
-            return (
-              <TouchableOpacity
-                style={styles.image}
-                onPress={() => toggleAsset(item)}
-                activeOpacity={0.7}
-              >
-                <Image
-                  source={{ uri: item.node.image.uri }}
-                  style={styles.image}
-                />
-                  {
-                    item.node.type === "video/mp4" &&
-                    <PlayCircle size={videoIconSize} />
-                  }
-                  {info.isSelected && (
-                    <SelectItem value={info.index + 1} />
-                  )}
-              </TouchableOpacity>
-            )
-          }}
-          ...
-          onEndReached={() => {
-            //Load more assets
-            if (selectedAlbum == null) {
-              loadFullAssets(15, fullAssetsPagination?.endCursor, assetTypeState);
-            } else {
-              loadAssets(selectedAlbum, 15, pagination[selectedAlbum.id].endCursor, assetTypeState);
-            }
-          }}
-        />
-        )}
-      </View>
-    )
-  }
-  export default MyComponent
-```
-## Colors
-We provide a variety of palete `colors` and some shadows!
-### Usage
-```jsx
-  import  { colors } from '@estuary-solutions/rn-core-ui/themes';
-  import { StyleSheet } from 'react-native';
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: colors.black,
-    },
-  });
-```
-## Fontsize
-We provide variety of fontSize that aldready scaled by our [scaleFont](#scalefontsize-number) API
-### Usage
-```jsx
-  import  { fontSize } from '@kietpt2003/react-native-core-ui/themes';
-  import { StyleSheet } from 'react-native';
-  const styles = StyleSheet.create({
-    text: {
-      fontSize: fontSize._16,
-    },
-  });
-```
-## Scaling Function
-```jsx
-  import { scale, verticalScale, moderateScale } from '@estuary-solutions/rn-core-ui/utils';
-  import  { colors, fontSize } from '@estuary-solutions/rn-core-ui/themes'
-  const Component = props =>
-    <View style={{
-      width: scale(30),
-      height: verticalScale(50),
-      padding: moderateScale(5)
-    }}>
-      <Text style={{
-        fontSize: fontSize._16,
-        color: colors.black
-      }}>Component</Text>
-    </View>;
-```
-### scale(size: number)
-Will return a linear scaled result of the provided size, based on your device's screen width.
-#### Usage
-```jsx
-  import  { scale } from '@estuary-solutions/rn-core-ui/utils';
-  import { StyleSheet } from 'react-native';
-  const styles = StyleSheet.create({
-    container: {
-      padding: scale(5),
-    },
-  });
-```
-### scaleH(size: number)
-Will return a linear scaled result of the provided size, based on your device's screen height.
-#### Usage
-```jsx
-  import  { scaleH } from '@estuary-solutions/rn-core-ui/utils';
-  import { StyleSheet } from 'react-native';
-  const styles = StyleSheet.create({
-    container: {
-      position: 'absolute',
-      top: scaleH(5),
-    },
-  });
-```
-### moderateScale(size: number, factor?: number)
-Sometimes you don't want to scale everything in a linear manner, that's where moderateScale comes in.
-The cool thing about it is that you can control the resize factor (default is 0.5).
-If normal scale will increase your size by +2X, moderateScale will only increase it by +X, for example:
-➡️ &nbsp;&nbsp;scale(10) = 20
-➡️ &nbsp;&nbsp;moderateScale(10) = 15
-➡️ &nbsp;&nbsp;moderateScale(10, 0.1) = 11
-#### Usage
-```jsx
-  import  { moderateScale } from '@estuary-solutions/rn-core-ui/utils';
-  import { StyleSheet } from 'react-native';
-  const styles = StyleSheet.create({
-    container: {
-      padding: moderateScale(5),
-    },
-  });
-```
-### moderateHeightScale(size: number, factor?: number)
-Same as [moderateScale](#moderatescalesize-number-factor-number), but using scaleH instead of scale.
-#### Usage
-```jsx
-  import  { moderateHeightScale } from '@estuary-solutions/rn-core-ui/utils';
-  import { StyleSheet } from 'react-native';
-  const styles = StyleSheet.create({
-    container: {
-      padding: moderateHeightScale(5),
-    },
-  });
-```
-### scaleFont(size: number)
-Will return a linear scaled result of the provided size, based on PixelRatio & scaleAvg.
-You can use [fontSize](#fontsize) from /theme instead of using scalefont().
-#### Usage
-```jsx
-  import  { scaleFont } from '@estuary-solutions/rn-core-ui/utils';
-  import { StyleSheet } from 'react-native';
-  const styles = StyleSheet.create({
-    text: {
-      fontSize: scaleFont(16), // fontSize._16
-    },
-  });
-```
-### IPHONE_12_WIDTH
-Just a constants that specify iPhone 12 width.
-```js
-  import { IPHONE_12_WIDTH } from '@estuary-solutions/rn-core-ui/utils';
-  console.log(IPHONE_12_WIDTH); // 375
-```
-### IPHONE_12_HEIGTH
-Just a constants that specify iPhone 12 height.
-```js
-  import { IPHONE_12_HEIGTH } from '@estuary-solutions/rn-core-ui/utils';
-  console.log(IPHONE_12_HEIGTH); // 812
-```
-## Resolution Function
-### getPaddingTop
-Get the top padding based on the device type
-- 26 OPPO
-- 28 NOKIA
-#### Usage
-```jsx
-  import { getPaddingTop } from '@estuary-solutions/rn-core-ui/utils';
-  const paddingTop = getPaddingTop();
-  console.log("paddingTop:", paddingTop);
-```
-### getPaddingBottom
-Get the bottom padding based on the device type
-#### Usage
-```jsx
-  import { getPaddingBottom } from '@estuary-solutions/rn-core-ui/utils';
-  const paddingBottom = getPaddingBottom();
-  console.log("paddingBottom:", paddingBottom);
-```
-### isTablet
-Check if the device is a tablet
-#### Usage
-```jsx
-  import { isTablet } from '@estuary-solutions/rn-core-ui/utils';
-  console.log("isTablet", isTablet); // true/false
-```
-### StylePlatform
-Use this function to get the styles based on the device type
-@param {Object} styles - StyleProp
-@param {ViewStyle} styles.tablet - Styles for tablet
-@param {ViewStyle} styles.phone - Styles for phone
-#### Props
-| Prop                     | Type                                                                | Default                                                   | Description                                                                                                                                                                                                                              |
-|--------------------------|---------------------------------------------------------------------|------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **`styles`**     | `StyleProp<any>` | `undefined`      | Initiallize the styles for table and phone. Its contains 2 fields: `tablet` & `phone`. [See example](#usage-11) |
-#### Usage
-```jsx
-  <View style={StylePlatform({
-    tablet: styles.containerTablet,
-    phone: styles.containerPhone
-  })}>
-    <Text style={StylePlatform({
-      tablet: styles.textTablet,
-      phone: styles.textPhone
-    })}>
-      Hello, Platform!
-    </Text>
-  </View>
-```
-### statusBarHeight
-statusBarHeight of the device
-#### Usage
-```jsx
-  import { statusBarHeight } from '@estuary-solutions/rn-core-ui/utils';
-  console.log("statusBarHeight", statusBarHeight);
-```
-## Converter and format
-### convertString
-This function converts input into a string.
-* If the input is null or undefined, it returns an empty string.
-* If the input is an object, it returns a stringified version of the object.
-* Otherwise, it returns the string representation of the input.
-#### Usage
-```js
-  import { convertString } from '@estuary-solutions/rn-core-ui/utils';
-  const str = convertString(2003); // "2003"
-```
-### convertNumber
-This function converts input into a number.
-* If the input is null or undefined, it returns 0.
-* If the input is not a number, it returns 0.
-* Otherwise, it returns the parsed float value of the input.
-#### Usage
-```js
-  import { convertNumber } from '@estuary-solutions/rn-core-ui/utils';
-  const num = convertNumber("2003"); // 2003
-```
-### convertSeconds
-This function convert seconds to a string in the format "mm:ss".
-* If the input is less than 0, it returns "00:00".
-* If the input is greater than 3599, it returns "00:00".
-#### Usage
-```js
-  import { convertSeconds } from '@estuary-solutions/rn-core-ui/utils';
-  const time = convertSeconds(123); // "02:03"
-```
-### formatHour
-Function to format seconds into a string in the format "hh:mm:ss".
-* If the input is less than 0, it returns "00:00:00".
-* If the input is greater than 86399, it returns "00:00:00".
-#### Usage
-```js
-  import { formatHour } from '@estuary-solutions/rn-core-ui/utils';
-  const time = formatHour(3661); // "01:01:01"
-```
-### fixedDistance
-Function to format a distance value.
-- If the input is an integer, it returns the integer value.
-- If the input is a float, it returns the value formatted to a custom toFixed value decimal places.
-- If the input is null or undefined, it returns 0.
-*Note:* The toFixed value should be between 1 and 5, otherwise it defaults to 2.
-#### Usage
-```js
-  import { fixedDistance } from '@estuary-solutions/rn-core-ui/utils';
-  const distance = fixedDistance(123.456); // "123.46"
-  const distance2 = fixedDistance(123.4567, 3); // "123.457"
-```
-### formatMoney
-Function to format money values.
-#### Props
-| Prop                     | Type                                                                | Default                                                   | Description                                                                                                                                                                                                                              |
-|--------------------------|---------------------------------------------------------------------|------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **`num`**     | `number` | `0`      | Define the value need to be format. |
-| **`maximumFractionDigits`**     | `number` | `0`      | Define the maximum fraction digits. [See example](#usage-18) |
-| **`lang`**     | `string` | `en-US`      | Define the language. This should be a BCP 47 language tag (e.g., 'en-US', 'vi-VN'). [View detail](#lang-prop) |
-#### lang prop
-This is a string that contains a language code and an optional country code, separated by a hyphen.
-*Structure:* `"[languageCode]-[countryCode]"`
-*Example:* `'en-IN'` => en: Language English, IN: Country India
-*Reference:*
-- [List of ISO 639 language codes](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes)
-- [List of ISO 3166-1 country codes](https://vi.wikipedia.org/wiki/ISO_3166-1)
-#### Usage
-```js
-  import { formatMoney } from '@estuary-solutions/rn-core-ui/utils';
-  const money = formatMoney(1234567.89); // "1,234,568"
-  const money2 = formatMoney(1234567.89, 2); // "1,234,567.89"
-  const money3 = formatMoney(1234567.89, 2, 'vi-VN'); // "1.234.567,89"
-```
-## Debounce
-- Creates a debounced function that delays invoking the provided function until after a specified delay in milliseconds has elapsed since the last time the debounced function was invoked.
-- The debounced function comes with `cancel` and `flush` methods to cancel the debounced invocation and to immediately invoke the function, respectively.
-### Usage
-```jsx
-  import { debounce } from '@estuary-solutions/rn-core-ui/utils';
-  const onChangeText = debounce(() => {
-    console.log('Function executed!');
-  }, 1000);
-  //Flush case
-  const debouncedLog = debounce(logMessage, 2000);
-  debouncedLog("Waiting 2s...");
-  setTimeout(() => {
-    debouncedLog.flush(); // Immediately execute the function
-  }, 1000);
-  //Cancel case
-  debouncedLog("Canceled");
-  setTimeout(() => {
-    debouncedLog.cancel(); // Don't execute the function
-  }, 1000);
-```
-## Others
-### cleanTagHTML
-Provide a function to clean HTML tags and &nbsp; from a string.
-#### Usage
-```js
-  import { cleanHTML } from '@estuary-solutions/rn-core-ui/utils';
-  const raw = `
-    <div>Hello&nbsp;&nbsp;&nbsp;World</div>
-    <p>This is&nbsp;a <strong>test</strong></p>
-  `;
-  console.log(cleanHTML(raw));
-  // Output:
-  // Hello
-  // World
-  // This is a test
-```
-### limitedString
-Function to limit the number of words in a string.
-- `str` - The string to limit. *Default:* str = ''
-- `maxLength` - The maximum number of words allowed. *Default:* maxLength = 5
-#### Usage
-```js
-  import { limitedString } from '@estuary-solutions/rn-core-ui/utils';
-  const inputString  = "Lorem Ipsum is simply dummy text of the printing and typesetting industry";
-  console.log(limitedString(inputString)); // "Lorem Ipsum is simply dummy..."
-```