Soras UI

The Button component is a reusable UI element that provides a customizable button with various styling options. It supports different variants, sizes, and event handling, making it flexible for different use cases.

<Button
  title="Testing"
  onPress={/* your onpress action */}
/>

The Calendar component provides an interactive date selection interface. It allows users to pick a date, navigate between months, and customize the appearance. It is designed to be lightweight, flexible, and easily integrated into different parts of an application.

<Calendar
  width={300}
  height={200}
  dateRangeValue={/* get the date range */}
  onPressDate={/* get the date */}
  getDatesRange={/* true to get the date range, false to get date */}
/>

The Carousel component is a horizontally scrollable component that displays multiple items, one at a time or in a loop. It supports smooth animations, auto-scrolling, and gesture-based swiping. This component is useful for displaying images, product cards, testimonials, or any other content in a visually appealing manner.

<Carousel
  data={/* carousel data */}
  duration={/* duration in ms */}
  overflow="hidden"
  width={300}
  activeDotColor={/* active dot color */}
  inactiveDotColor={'grey'}
/>

The CheckBox component is a simple UI element that allows users to toggle between checked and unchecked states. It is commonly used in forms, settings, and multi-select lists. This component supports custom styling, labels, and controlled/uncontrolled states.

<CheckBox
  title="/* your checkbox name */"
  value={/* set your checkbox value here */}
  onPress={/* get the check box value here */}
  icon={( /* set customize icon here */)} 
/>

The DonutChart component is a circular chart that represents data as proportional slices of a donut. It is commonly used to visualize percentages, spending breakdowns, or progress indicators. This component supports custom colors, animations, labels, and dynamic data updates.

const data = [{ color: string, value: number, percentage: number}]
const font = useFont(require('./Roboto-Bold.ttf'), 20);

if (!font) return null;

return (
  <DonutChart
        gap={0.07}
        radius={80}
        strokeWidth={20}
        outerStrokeWidth={30}
        font={font}
        data={data}
        outerStrokColor={'black'}
        totalValueSymbol="Rp" /* symbol that will apply infront the total value */
        totalValueColor={'white'}
      />
)

a UI component that allows users to select an option from a list and calendar. When clicked or tapped, it expands to show multiple choices and collapses after a selection is made.

<DropDown
  title="Select option"
  options={[
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
  ]}
  onSelect={(set) => setSelectedDropDown(set)}
/>

<DropDown
  mode="calendar"
  onSelect={(set) => setSelectedDropDownCalendar(set)}
  title="Select date"
/>

The DynamicScrollView component is a flexible wrapper that allows content to be scrollable when it exceeds the screen height. It automatically adjusts based on the number of child components, preventing unnecessary scrolling when the content fits within the viewport. This component is ideal for dynamic layouts, long forms, or lists that might change in size.

<DynamicScrollView directionMode={{ direction: /* select the direction row/column */}}>
  /* put your components here */
</DynamicScrollView>

The ExpandedView component is a flexible container that automatically expands to fill the available space within a parent layout. It ensures that child components take up all the remaining space dynamically. This is useful when creating layouts where some elements should take up as much space as possible while keeping other components positioned correctly.

<ExpandableView
  title={'Expand this component'}
  renderItem={
  <View>
    <Typograph>{'Expanded'}</Typograph>
  </View>}
/>

A customizable modal component that can be displayed at the bottom or center of the screen. It supports custom styling, a header, and a close button.

import { GestureHandlerRootView } from 'react-native-gesture-handler';
<GestureHandlerRootView style={{ flex: 1 }}>
  // Your code
</GestureHandlerRootView>

<Modal
  type="center"
  isPopUp={// value of modal visibility}
  onPressClose={// set close modal visibility}
  title="Test"
>
  // Your code
</Modal>

<Modal
  type="bottom"
  isPopUp={// value of modal visibility}
  onPressClose={// set close modal visibility}
  title="Test"
>
  // Your code
</Modal>

The RadioButton component is a UI element that allows users to select a single option from a group. It is commonly used in forms, surveys, and filter selections. This component supports custom styling, labels, and controlled selection states.

<RadioButton
  data={/* put your array of data here */}
  onPress={/* get your radio button response */}
  selectedId={/* select unique id for the radio button */}
  directionMode={{ direction: /* select the direction row/column } */}
  icon={(/* set customize icon here) */}
/>

The Rating component allows users to provide feedback using a star-based rating system. It supports customizable star icons, different rating scales, and both interactive and read-only modes. This component is commonly used in reviews, feedback forms, and user experience evaluations.

Input mode:
<Rating onChange={/* set data */} />
Display mode:
<Rating value={/* value */} disable={true} />

The SkeletonLoaders component provides placeholder loading content, often used to represent content that is still loading, like text, images, or cards. It simulates the structure of the content, giving users a smooth visual experience while waiting for data to be fully loaded. Skeleton loaders are particularly useful in dynamic content loading scenarios to improve perceived performance and UX.

<SkeletonLoader width={300} />
<CircleSkeletonLoader width={100} />
<CardSkeletonLoader width={100} />

The Snackbar component provides brief feedback to users at the bottom of the screen, typically used to show messages, notifications, or alerts. It appears for a short duration and automatically disappears after a set period, providing non-intrusive notifications. It is ideal for success, error, or informational messages in your app.

const { trigger, setSnackBarType, setSnackBarTitle } = useTrigger();
  return (
     <Button
        title={/* button title */}
        onPress={() => {
          setSnackBarType(/* set snackbar type) */;
          setSnackBarTitle(/* set snackbar type) */;
          trigger(); /* trigger the snackbar */
        }}
      />
  )

  Put this in your App(): 
  <TriggerProvider>
    /* your code */
    <SnackBar delay={5000} animatedHeight={80} />
  </TriggerProvider
    

The Switch component is a toggle button that allows users to switch between two states (e.g., "ON" and "OFF"). It is commonly used for settings, enabling or disabling options, or controlling features in an app. The component is interactive, and you can style it to suit your app's design. It also supports custom labels, sizes, and colors.

<Switch
  value={/* boolean value of switch */}
  onPress={/* get value at here */}
/>

The TextInputField component provides a user-friendly input field where users can enter text. It can be used for forms, search bars, login screens, or any other feature that requires text input. This component is highly customizable, supporting placeholders, labels, secure input, and validation feedback. It also offers a flexible style to fit different UI designs.

<TextInputField
  title="/* your text input title */"
  onTextChange={/* get value at here */}
  placeHolder="/* your text input place holder */"
  value={/* input value here */}
/>

The TextInputSingleBox component is a unique input field designed to capture one character per box, making it ideal for scenarios like entering a PIN code, OTP (One-Time Password), or other multi-character inputs. Each character is entered in a separate box, and the user can navigate between the boxes easily. This component provides an enhanced user experience by keeping the input clear and segmented, making it easy for users to input multiple characters.

<TextInputSingleBox
  onChange={(set) => setCode(set)}
  type="string"
  length={5}
  customTextinputStyles={{ fontSize: Metrics[16] }}
/>

The ThemeSwitch component is a tool designed to manage and track theme changes in your application. It allows users to toggle between light and dark themes (or other custom themes) and records the changes, including the active theme colors. This component is useful for implementing theme management in your app, providing a seamless user experience by allowing users to choose their preferred theme while preserving the theme state across app sessions.

Put this in your App(): 
import {useTheme} from 'soras-ui'; /* import the package */
return(
  <ThemeProvider>
    /* your code */
  </ThemeProvider>
)

conts yourApp = () => {
  const { theme, toggleTheme, toggleSystemTheme } = useTheme();
  return (
    <Switch
      value={/* value of the switch */}
      onPress={/* get value here  */}
      disabled={/* set if the switch disable */}
    />
  )
}

A component that manages vibration settings, allowing users to enable/disable vibration and adjust its duration.

Put this in your App(): 
import { VibrationProvider } from '../../src/theme/vibrationManagement';
return (
  <VibrationProvider>
  // Your code
  </VibrationProvider>
)

conts yourApp = () => {
  const { toggleVibration, setVibrationDuration, isVibrationEnabled, vibrationDuration, } = useVibration();

  return (
    <View>
      <RadioButton
        directionMode={{ direction: 'row' }}
        data={[
          { id: '1', title: '50ms', value: '50' },
          { id: '2', title: '100ms', value: '100' },
        ]}
        onPress={(set) => setVibrationDuration(Number(set.value))}
      />
      <Switch value={isVibrationEnabled} onPress={() => toggleVibration()} />
    </View>
  )
}