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

package/src/components/calendars/calendars.style.ts

@@ -1,8 +1,8 @@
-import { StyleSheet, type ViewStyle } from 'react-native';
-
-import { Palettes, Radius, Spacing, Shadow } from '../../themes';
+import { ViewStyle } from 'react-native';
 import { CalendarProps } from 'react-native-calendars';
 
+import { AppThemeColor, makeStyles } from '../../config';
+
 interface ComputedStyleProps {
   modalContainer?: ViewStyle;
   container?: ViewStyle;
@@ -14,9 +14,13 @@ interface ComputedStyleProps {
 
   calendarContainer?: ViewStyle;
   calendarBottomContainer?: ViewStyle;
+  calendarStyle?: ViewStyle;
+
+  flex?: ViewStyle;
 }
 
-export const getStyle = () => {
+export const useStyles = makeStyles((themes) => {
+  const { colors, Spacing, Radius, Shadow } = themes;
   const computedStyle: ComputedStyleProps = {};
 
   computedStyle.modalContainer = {
@@ -26,7 +30,7 @@ export const getStyle = () => {
 
   computedStyle.container = {
     width: 350,
-    backgroundColor: Palettes.white[50],
+    backgroundColor: colors['fill-inverse'],
     paddingVertical: Spacing[24],
     borderRadius: Radius[16],
     overflow: 'hidden',
@@ -34,7 +38,7 @@ export const getStyle = () => {
   };
 
   computedStyle.headerContainer = {
-    backgroundColor: Palettes.grey[50],
+    backgroundColor: colors['fill-inverse'],
     height: 40,
     flexGrow: 1,
     borderRadius: Radius[8],
@@ -62,6 +66,7 @@ export const getStyle = () => {
   };
 
   computedStyle.calendarContainer = {
+    backgroundColor: colors['fill-inverse'],
     height: 440,
     justifyContent: 'space-between',
   };
@@ -70,51 +75,74 @@ export const getStyle = () => {
     flexDirection: 'row',
     marginTop: Spacing[12],
     paddingHorizontal: Spacing[16],
-  }
-  
-  return StyleSheet.create(computedStyle);
-};
+    gap: Spacing[16],
+  };
 
-export const calendarTheme: CalendarProps['theme'] & {
-  'stylesheet.day.basic'?: any;
-  'stylesheet.calendar.header'?: any;
-  'stylesheet.calendar.main'?: any;
-} = {
-  'textDayFontFamily': 'Montserrat-Regular',
-  'textDayHeaderFontFamily': 'Montserrat-Regular',
-  'selectedDayBackgroundColor': Palettes.yellow[600],
-  'selectedDayTextColor': Palettes.black[900],
-  'todayTextColor': Palettes.black[900],
-  'stylesheet.day.basic': {
-    today: {
-      borderWidth: 2,
-      borderColor: Palettes.yellow[600],
-      borderRadius: 99,
-    },
-    base: {
-      width: 40,
-      height: 40,
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: 99,
-    },
-    selected: {
-      borderRadius: 99,
-      backgroundColor: Palettes.yellow[600],
+  computedStyle.calendarStyle = {
+    marginHorizontal: Spacing[12],
+    backgroundColor: colors['fill-inverse'],
+  };
+
+  computedStyle.flex = {
+    flex: 1,
+  };
+
+  return computedStyle;
+});
+
+export const getCalendarTheme = (
+  colors: AppThemeColor['colors'],
+  colorScheme: AppThemeColor['colorScheme']
+) => {
+  const calendarTheme: CalendarProps['theme'] & {
+    'stylesheet.day.basic'?: any;
+    'stylesheet.calendar.header'?: any;
+    'stylesheet.calendar.main'?: any;
+  } = {
+    'calendarBackground': colors['fill-inverse'],
+    'textDayFontFamily': 'Montserrat-Regular',
+    'textDayHeaderFontFamily': 'Montserrat-Regular',
+    'textDayStyle': {
+      color: colors['text-primary'],
     },
-  },
-  'stylesheet.calendar.header': {
-    week: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      borderBottomWidth: 1,
-      borderBottomColor: Palettes.grey[200],
-      paddingBottom: 12,
+    'selectedDayBackgroundColor': colors['fill-warning'],
+    'selectedDayTextColor':
+      colorScheme === 'light' ? colors['text-primary'] : colors['text-inverse'],
+    'todayTextColor': colors['text-primary'],
+    'textDisabledColor': colors['text-disable-secondary'],
+    'stylesheet.day.basic': {
+      today: {
+        borderWidth: 2,
+        borderColor: colors['border-warning'],
+        borderRadius: 99,
+      },
+      base: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 99,
+      },
+      selected: {
+        borderRadius: 99,
+        backgroundColor: colors['fill-warning'],
+      },
     },
-    dayHeader: {
-      fontFamily: 'Montserrat-Regular',
-      fontSize: 14,
-      color: Palettes.black[900],
+    'stylesheet.calendar.header': {
+      week: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        borderBottomWidth: 1,
+        borderBottomColor: colors['border-default'],
+        paddingBottom: 12,
+      },
+      dayHeader: {
+        fontFamily: 'Montserrat-Regular',
+        fontSize: 14,
+        color: colors['text-primary'],
+      },
     },
-  },
+  };
+
+  return calendarTheme;
 };

package/src/components/index.ts

@@ -39,6 +39,7 @@ export { RoundedTab } from './rounded-tab/rounded-tab.component';
 export { Countdown } from './countdown/countdown.component';
 export { Loader } from './Loader/loader.component';
 export { Notification } from './Notification/notification.component';
+export { Pagination } from './Pagination/pagination.component';
 export {
   Mask,
   MaskArray,
@@ -52,6 +53,8 @@ export {
 } from 'react-native-mask-input';
 export { SelectionCard } from './selection-card/SelectionCard.component';
 export { Ribbon } from './Ribbon/Ribbon.component';
+export { StickyBar } from './StickyBar/StickyBar.component';
+export { View } from './View/View.component';
 
 export type { ActionListProps } from './ActionList/ActionList.type';
 export type {
@@ -80,3 +83,15 @@ export type { TabsProps } from './Tabs/Tabs.type';
 export type { SearchInputProps } from './search-input/search-input.type';
 export type { SelectionCardProps } from './selection-card/SelectionCard.type';
 export type { RibbonProps } from './Ribbon/Ribbon.type';
+export type { StickyBarProps } from './StickyBar/StickyBar.type';
+export type { ViewProps } from './View/View.type';
+export type {
+  RadioInputProps,
+  RadioItemProps,
+  RadioItemPropsComponent,
+} from './RadioInput/RadioInput.type';
+export type {
+  CheckboxInputProps,
+  CheckboxItemProps,
+  CheckboxItemPropsComponent,
+} from './CheckBoxInput/CheckBoxInput.type';

package/src/components/typography/typography.component.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { Text } from 'react-native';
-import { getStyle } from './typography.style';
-import type { TypographyProps } from './typography.type';
+
+import { useStyles } from './typography.style';
+import { TypographyProps } from './typography.type';
+import { useAppTheme } from '../../config';
 
 const Typography = (props: TypographyProps) => {
   const {
@@ -9,14 +11,25 @@ const Typography = (props: TypographyProps) => {
     children = null,
     textStyles,
     style,
+    color = 'text-primary',
     ...rest
   } = props;
 
-  const computedStyle = getStyle(props);
+  const styles = useStyles({
+    variant,
+    ...rest,
+  });
+
+  const { colors } = useAppTheme();
 
   return (
     <Text
-      style={[computedStyle[variant] || computedStyle.body1, textStyles, style]}
+      style={[
+        styles.base,
+        { color: colors[color] ?? colors['text-primary'] },
+        textStyles,
+        style,
+      ]}
       {...rest}
     >
       {children}