@adiraku/react-native-ui 1.2.9-canary-7 → 2.0.0-canary-2

package/src/components/CheckBoxInput/CheckBoxInput.style.tsx

@@ -1,8 +1,7 @@
-import type { TextStyle } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { Platform, StyleSheet } from 'react-native';
-import type { CheckboxInputProps } from './CheckBoxInput.type';
-import { Palettes, Radius, Spacing } from '../../themes';
+import { Platform, ViewStyle, TextStyle } from 'react-native';
+
+import { CheckboxInputProps } from './CheckBoxInput.type';
+import { makeStyles } from '../../config';
 
 interface ComputedStyleProps {
   fieldWrapper?: ViewStyle;
@@ -15,17 +14,20 @@ interface ComputedStyleProps {
   counter?: TextStyle;
   inputIconWrapper?: ViewStyle;
   checkboxItemWrapper?: ViewStyle;
+  sheetListContentContainer?: ViewStyle;
+  sheetBottomContaienr?: ViewStyle;
 }
 
-export const getStyle = (props: CheckboxInputProps) => {
+export const useStyles = makeStyles((themes, props: CheckboxInputProps) => {
+  const { colors, Spacing, Radius } = themes;
   const { editable = true, disabled = false, isError, errorMessage } = props;
 
   const stateColor =
     isError || errorMessage
-      ? { text: Palettes.red[500], border: Palettes.red[500] }
+      ? { text: colors['text-danger'], border: colors['border-danger'] }
       : {
-          text: Palettes.black[900],
-          border: Palettes.grey[200],
+          text: colors['text-primary'],
+          border: colors['border-default'],
         };
 
   const computedStyle: ComputedStyleProps = {};
@@ -48,7 +50,9 @@ export const getStyle = (props: CheckboxInputProps) => {
   computedStyle.label = {
     color: stateColor.text,
     backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.white[50],
+      !editable || disabled
+        ? colors['fill-disable-secondary']
+        : colors['surface-primary'],
     paddingHorizontal: Spacing[4],
     borderRadius: Radius[4],
     marginLeft: Spacing[8],
@@ -62,7 +66,9 @@ export const getStyle = (props: CheckboxInputProps) => {
     borderWidth: Radius.border,
     borderColor: stateColor.border,
     backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.white[50],
+      !editable || disabled
+        ? colors['fill-disable-secondary']
+        : colors['surface-primary'],
     borderRadius: Radius[8],
     padding: Spacing[8],
     width: '100%',
@@ -70,7 +76,7 @@ export const getStyle = (props: CheckboxInputProps) => {
 
   computedStyle.textField = {
     flex: 1,
-    color: Palettes.black[900],
+    color: colors['text-primary'],
     padding: 0,
     margin: 0,
     overflow: 'visible',
@@ -87,7 +93,7 @@ export const getStyle = (props: CheckboxInputProps) => {
 
   computedStyle.counter = {
     marginLeft: Spacing[4],
-    color: Palettes.grey[500],
+    color: colors['text-disable'],
   };
 
   computedStyle.inputIconWrapper = {
@@ -102,5 +108,13 @@ export const getStyle = (props: CheckboxInputProps) => {
     justifyContent: 'space-between',
   };
 
-  return StyleSheet.create(computedStyle);
-};
+  computedStyle.sheetListContentContainer = {
+    paddingHorizontal: Spacing[16],
+  };
+
+  computedStyle.sheetBottomContaienr = {
+    padding: Spacing[16],
+  };
+
+  return computedStyle;
+});

package/src/components/Checkbox/Checkbox.component.tsx

@@ -1,32 +1,32 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
-import { getStyle } from './Checkbox.style';
-
+import { useStyles } from './Checkbox.style';
 import type { CheckboxProps } from './Checkbox.type';
+
 import { IconTick } from '../../icons';
-import { Palettes } from '../../themes';
+import { useAppTheme } from '../../config';
 
 const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {
   const { selected, disabled, ...rest } = props;
+  const { colors, colorScheme } = useAppTheme();
 
-  const computedStyle = getStyle();
+  const computedStyle = useStyles(props);
 
   return (
     <>
-      <View
-        style={[
-          computedStyle.outer,
-          selected && computedStyle.outerSelected,
-          disabled && computedStyle.outerDisabled,
-        ]}
-        {...rest}
-      >
+      <View style={[computedStyle.outer]} {...rest}>
         {selected && (
           <IconTick
             height={14}
             width={14}
-            fill={disabled ? Palettes.white[50] : Palettes.black[900]}
+            fill={
+              disabled
+                ? colors['icon-disable']
+                : colorScheme === 'light'
+                ? colors['icon-primary']
+                : colors['icon-inverse']
+            }
           />
         )}
       </View>

package/src/components/Checkbox/Checkbox.style.tsx

@@ -1,7 +1,7 @@
-import { StyleSheet } from 'react-native';
-import { Palettes, Radius } from '../../themes';
+import { ViewStyle } from 'react-native';
 
-import type { ViewStyle } from 'react-native';
+import { CheckboxProps } from './Checkbox.type';
+import { makeStyles } from '../../config';
 
 interface ComputedStyleProps {
   outer?: ViewStyle;
@@ -12,7 +12,9 @@ interface ComputedStyleProps {
   innerDisabled?: ViewStyle;
 }
 
-export const getStyle = () => {
+export const useStyles = makeStyles((themes, props: CheckboxProps) => {
+  const { colors, Radius } = themes;
+  const { selected, disabled } = props;
   const computedStyle: ComputedStyleProps = {};
 
   computedStyle.outer = {
@@ -20,20 +22,17 @@ export const getStyle = () => {
     width: 18,
     borderRadius: Radius[4],
     borderWidth: 2,
-    borderColor: Palettes.black[900],
+    borderColor: disabled
+      ? colors['icon-disable-secondary']
+      : colors['border-primary'],
+    backgroundColor: !selected
+      ? 'transparent'
+      : disabled
+      ? colors['icon-disable-secondary']
+      : colors['fill-warning'],
     justifyContent: 'center',
     alignItems: 'center',
   };
 
-  computedStyle.outerSelected = {
-    backgroundColor: Palettes.yellow[600],
-    borderColor: Palettes.yellow[600],
-  };
-
-  computedStyle.outerDisabled = {
-    borderColor: Palettes.grey[100],
-    backgroundColor: Palettes.grey[100],
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+  return computedStyle;
+});

package/src/components/Pagination/pagination.component.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import type { PaginationProps } from './pagination.type';
+
+const Pagination = ({ totalPages = 1, currentPage = 1 }: PaginationProps) => {
+  return (
+    <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
+      {Array.from({ length: totalPages }).map((_, index) => {
+        const page = index + 0;
+        const isActive = page === currentPage;
+
+        return (
+          <View
+            key={page}
+            style={{
+              width: isActive ? 30 : 8,
+              height: 8,
+              borderRadius: 4,
+              backgroundColor: isActive ? '#000' : '#ddd',
+              marginHorizontal: 4,
+            }}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export { Pagination };

package/src/components/Pagination/pagination.style.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  paginationContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#ddd',
+    marginHorizontal: 4,
+  },
+  activeDot: {
+    width: 20,
+    backgroundColor: '#000',
+  },
+});

package/src/components/Pagination/pagination.type.ts

@@ -0,0 +1,16 @@
+export interface PaginationProps {
+    /**
+     * Total number of pages
+     * 
+     * @default 1
+     */
+    totalPages?: number;
+  
+    /**
+     * Current active page
+     * 
+     * @default 1
+     */
+    currentPage?: number;
+  }
+  

package/src/components/RadioButton/RadioButton.component.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
-import { getStyle } from './RadioButton.style';
-
-import type { RadioButtonProps } from './RadioButton.type';
+import { useStyles } from './RadioButton.style';
+import { RadioButtonProps } from './RadioButton.type';
 
 const RadioButton: React.FunctionComponent<RadioButtonProps> = (props) => {
   const { selected, disabled, ...rest } = props;
 
-  const computedStyle = getStyle();
+  const computedStyle = useStyles();
 
   return (
     <>

package/src/components/RadioButton/RadioButton.style.tsx

@@ -1,7 +1,6 @@
-import { StyleSheet } from 'react-native';
-import { Palettes, Radius } from '../../themes';
+import { StyleSheet, ViewStyle } from 'react-native';
 
-import type { ViewStyle } from 'react-native';
+import { makeStyles } from '../../config';
 
 interface ComputedStyleProps {
   outer?: ViewStyle;
@@ -11,7 +10,8 @@ interface ComputedStyleProps {
   innerDisabled?: ViewStyle;
 }
 
-export const getStyle = () => {
+export const useStyles = makeStyles((themes) => {
+  const { colors, Radius } = themes;
   const computedStyle: ComputedStyleProps = {};
 
   computedStyle.outer = {
@@ -20,26 +20,26 @@ export const getStyle = () => {
     padding: 2,
     borderRadius: Radius.full,
     borderWidth: 2,
-    borderColor: Palettes.black[900],
+    borderColor: colors['border-primary'],
   };
 
   computedStyle.inner = {
     flex: 1,
     borderRadius: Radius.full,
-    backgroundColor: Palettes.white[50],
+    backgroundColor: colors['fill-inverse'],
   };
 
   computedStyle.innerSelected = {
-    backgroundColor: Palettes.yellow[600],
+    backgroundColor: colors['fill-warning'],
   };
 
   computedStyle.outerDisabled = {
-    borderColor: Palettes.grey[100],
+    borderColor: colors['border-disable'],
   };
 
   computedStyle.innerDisabled = {
-    backgroundColor: Palettes.grey[100],
+    backgroundColor: colors['border-default'],
   };
 
   return StyleSheet.create(computedStyle);
-};
+});

package/src/components/RadioInput/RadioInput.component.tsx

@@ -2,28 +2,29 @@ import * as React from 'react';
 import {
   Animated,
   FlatList,
+  LayoutChangeEvent,
   TouchableHighlight,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
 
-import { getStyle } from './RadioInput.style';
-import { Palettes } from '../../themes';
+import { useAppTheme } from '../../config';
 import { IconChevronDown } from '../../icons';
 import { Button } from '../button/button.component';
-import { Typography } from '../typography/typography.component';
 import { BottomSheet } from '../BottomSheet/BottomSheet.component';
-import { RadioButton } from '../RadioButton/RadioButton.component';
 import { Divider } from '../Divider/Divider.component';
+import { RadioButton } from '../RadioButton/RadioButton.component';
+import { Typography } from '../typography/typography.component';
 
-import type { LayoutChangeEvent } from 'react-native';
 import type {
   RadioInputProps,
   RadioItemProps,
   RadioItemPropsComponent,
 } from './RadioInput.type';
+import { useStyles } from './RadioInput.style';
 
 const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
+  const { colors } = useAppTheme();
   const {
     value,
     label,
@@ -34,7 +35,7 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
     disabled,
     editable = true,
     inputIcon = (
-      <IconChevronDown width={14} height={14} fill={Palettes.black[900]} />
+      <IconChevronDown width={14} height={14} fill={colors['icon-primary']} />
     ),
     data,
     onSaveInput = () => {},
@@ -50,10 +51,9 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
   } = props;
 
   const [labelWidth, setLabelWidth] = React.useState(0);
-  // const [inputVisibility, setInputVisibility] = React.useState(false);
   const [selectedValue, setSelectedValue] = React.useState(value);
 
-  const computedStyle = getStyle(props);
+  const computedStyle = useStyles(props);
 
   type BottomSheetHandler = React.ElementRef<typeof BottomSheet>;
   const ref = React.useRef<BottomSheetHandler>(null);
@@ -156,7 +156,7 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
                 computedStyle.inputWrapper,
                 !!selectedObject() &&
                   !isError &&
-                  !errorMessage && { borderColor: Palettes.black[900] },
+                  !errorMessage && { borderColor: colors['border-primary'] },
               ]}
             >
               <Typography
@@ -208,12 +208,10 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
               />
             );
           }}
-          // eslint-disable-next-line react-native/no-inline-styles
-          contentContainerStyle={{ padding: 16 }}
+          contentContainerStyle={computedStyle.sheetListContentContainer}
           ItemSeparatorComponent={() => customItemSeparator}
         />
-        {/* eslint-disable-next-line react-native/no-inline-styles */}
-        <View style={{ padding: 16, backgroundColor: 'transparent' }}>
+        <View style={computedStyle.sheetBottomContaienr}>
           <Button
             variant="primary"
             label={saveInputLabel}
@@ -233,14 +231,15 @@ function RadioItem({
   testID,
   ...rest
 }: RadioItemPropsComponent) {
+  const { colors } = useAppTheme();
   const { item } = data;
   const { label, value, disabled } = item;
-  const computedStyle = getStyle({} as RadioInputProps);
+  const computedStyle = useStyles({} as RadioInputProps);
 
   return (
     <TouchableHighlight
       onPress={() => onItemPress(item)}
-      underlayColor={Palettes.whiteDark[100]}
+      underlayColor={colors['fill-disable-secondary']}
       disabled={disabled}
       testID={testID + 'item_radio_touchable_' + data.index}
       accessibilityLabel={testID + 'item_radio_touchable_' + data.index}

package/src/components/RadioInput/RadioInput.style.tsx

@@ -1,8 +1,7 @@
-import type { TextStyle } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { Platform, StyleSheet } from 'react-native';
-import type { RadioInputProps } from './RadioInput.type';
-import { Palettes, Radius, Spacing } from '../../themes';
+import { Platform, TextStyle, ViewStyle } from 'react-native';
+
+import { RadioInputProps } from './RadioInput.type';
+import { makeStyles } from '../../config';
 
 interface ComputedStyleProps {
   fieldWrapper?: ViewStyle;
@@ -15,17 +14,20 @@ interface ComputedStyleProps {
   counter?: TextStyle;
   inputIconWrapper?: ViewStyle;
   radioItemWrapper?: ViewStyle;
+  sheetListContentContainer?: ViewStyle;
+  sheetBottomContaienr?: ViewStyle;
 }
 
-export const getStyle = (props: RadioInputProps) => {
+export const useStyles = makeStyles((themes, props: RadioInputProps) => {
+  const { colors, Radius, Spacing } = themes;
   const { editable = true, disabled = false, isError, errorMessage } = props;
 
   const stateColor =
     isError || errorMessage
-      ? { text: Palettes.red[500], border: Palettes.red[500] }
+      ? { text: colors['text-danger'], border: colors['border-danger'] }
       : {
-          text: Palettes.black[900],
-          border: Palettes.grey[200],
+          text: colors['text-primary'],
+          border: colors['border-disable'],
         };
 
   const computedStyle: ComputedStyleProps = {};
@@ -48,7 +50,9 @@ export const getStyle = (props: RadioInputProps) => {
   computedStyle.label = {
     color: stateColor.text,
     backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.white[50],
+      !editable || disabled
+        ? colors['fill-disable-secondary']
+        : colors['fill-inverse'],
     paddingHorizontal: Spacing[4],
     borderRadius: Radius[4],
     marginLeft: Spacing[8],
@@ -62,7 +66,9 @@ export const getStyle = (props: RadioInputProps) => {
     borderWidth: Radius.border,
     borderColor: stateColor.border,
     backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.white[50],
+      !editable || disabled
+        ? colors['fill-disable-secondary']
+        : colors['fill-inverse'],
     borderRadius: Radius[8],
     padding: Spacing[8],
     width: '100%',
@@ -70,7 +76,7 @@ export const getStyle = (props: RadioInputProps) => {
 
   computedStyle.textField = {
     flex: 1,
-    color: Palettes.black[900],
+    color: colors['text-primary'],
     padding: 0,
     margin: 0,
     overflow: 'visible',
@@ -87,7 +93,7 @@ export const getStyle = (props: RadioInputProps) => {
 
   computedStyle.counter = {
     marginLeft: Spacing[4],
-    color: Palettes.grey[500],
+    color: colors['text-disable'],
   };
 
   computedStyle.inputIconWrapper = {
@@ -102,5 +108,13 @@ export const getStyle = (props: RadioInputProps) => {
     justifyContent: 'space-between',
   };
 
-  return StyleSheet.create(computedStyle);
-};
+  computedStyle.sheetListContentContainer = {
+    paddingHorizontal: Spacing[16],
+  };
+
+  computedStyle.sheetBottomContaienr = {
+    padding: Spacing[16],
+  };
+
+  return computedStyle;
+});

package/src/components/StickyBar/StickyBar.component.tsx

@@ -0,0 +1,74 @@
+import React, { FC } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { Typography } from '../typography/typography.component';
+import { StickyBarProps } from './StickyBar.type';
+import { Palettes, Spacing } from 'src/themes';
+
+import { IconClose } from 'src/icons';
+import { getStyle } from './StickyBar.style';
+
+const StickyBar: FC<StickyBarProps> = ({
+  show,
+  text,
+  onClose,
+  iconComponent,
+  buttonComponent,
+  testID,
+}) => {
+  const computedStyle = getStyle({
+    show,
+    text,
+    iconComponent,
+    buttonComponent,
+    onClose,
+  });
+
+  return (
+    <View style={[computedStyle.container]}>
+      <LinearGradient
+        colors={[Palettes.yellow[600], '#FFFFFF']}
+        start={{ x: 0.5, y: 0 }}
+        end={{ x: 1, y: 0.1 }}
+        useAngle={true}
+        angle={45}
+        style={[computedStyle.linearGradient]}
+      >
+        <View style={[computedStyle.rowContainer]}>
+          {/* Small Image */}
+          <View
+            style={[computedStyle.contentWrapper, computedStyle.imageWrapper]}
+          >
+            {iconComponent}
+          </View>
+
+          {/* Copy */}
+          <View
+            style={[computedStyle.contentWrapper, computedStyle.textWrapper]}
+          >
+            <Typography
+              variant="overline-small"
+              testID={testID}
+              accessibilityLabel={testID}
+            >
+              {text}
+            </Typography>
+          </View>
+
+          {/* CTA Button */}
+          <View style={[computedStyle.contentWrapper]}>{buttonComponent}</View>
+
+          {/* Close Button */}
+          <View style={[computedStyle.closeButtonWrapper]}>
+            <TouchableOpacity onPress={onClose}>
+              <IconClose height={Spacing[12]} width={Spacing[12]} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </LinearGradient>
+    </View>
+  );
+};
+
+export { StickyBar };

package/src/components/StickyBar/StickyBar.style.tsx

@@ -0,0 +1,79 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { StickyBarProps } from './StickyBar.type';
+import { Palettes, Spacing } from 'src/themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  rowContainer?: ViewStyle;
+  linearGradient?: ViewStyle;
+  contentWrapper?: ViewStyle;
+  imageWrapper?: ViewStyle;
+  textWrapper?: ViewStyle;
+  buttonWrapper?: ViewStyle;
+  closeButtonWrapper?: ViewStyle;
+}
+
+export const getStyle = (props: StickyBarProps) => {
+  const {
+    show,
+    onClose,
+    iconComponent: IconComponent,
+    buttonComponent,
+  } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flex: 1,
+    minWidth: 400,
+    display: show ? 'flex' : 'none',
+  };
+
+  computedStyle.rowContainer = {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.linearGradient = {
+    paddingVertical: Spacing[8],
+    paddingHorizontal: Spacing[16],
+    borderTopRightRadius: Spacing[16],
+    borderTopLeftRadius: Spacing[16],
+    position: 'absolute',
+    zIndex: 2,
+  };
+
+  computedStyle.contentWrapper = {
+    marginRight: Spacing[8],
+  };
+
+  computedStyle.imageWrapper = {
+    display: IconComponent ? 'flex' : 'none',
+    alignSelf: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+    borderRadius: Spacing[32],
+    padding: 6,
+  };
+
+  computedStyle.textWrapper = {
+    flex: 1,
+    flexWrap: 'wrap',
+  };
+
+  computedStyle.buttonWrapper = {
+    display: buttonComponent ? 'flex' : 'none',
+  };
+
+  computedStyle.closeButtonWrapper = {
+    display: onClose ? 'flex' : 'none',
+    borderWidth: 2,
+    borderRadius: 12,
+    borderColor: Palettes.black[900],
+    borderStyle: 'solid',
+    padding: 2,
+  };
+
+  return StyleSheet.create(computedStyle);
+};