@adiraku/react-native-ui 1.2.8-canary-0 → 1.2.8-canary-2

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

@@ -0,0 +1,148 @@
+import { StyleSheet, type ViewStyle } from 'react-native';
+
+import { Palettes, Radius, Spacing, Shadow } from '../../themes';
+import { CalendarProps } from 'react-native-calendars';
+
+interface ComputedStyleProps {
+  modalContainer?: ViewStyle;
+  container?: ViewStyle;
+
+  headerContainer?: ViewStyle;
+  headerArrowWrapper?: ViewStyle;
+  headerCenterWrapper?: ViewStyle;
+  headerCenterItem?: ViewStyle;
+
+  calendarContainer?: ViewStyle;
+  calendarBottomContainer?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.modalContainer = {
+    height: '100%',
+    width: '100%',
+  };
+
+  computedStyle.container = {
+    width: 350,
+    backgroundColor: Palettes.white[50],
+    paddingVertical: Spacing[24],
+    borderRadius: Radius[16],
+    overflow: 'hidden',
+    ...Shadow['shadow-elevation-1'],
+  };
+
+  computedStyle.headerContainer = {
+    backgroundColor: Palettes.grey[50],
+    height: 40,
+    flexGrow: 1,
+    borderRadius: Radius[8],
+    marginBottom: Spacing[16],
+    overflow: 'hidden',
+    flexDirection: 'row',
+    marginHorizontal: Spacing[16],
+  };
+
+  computedStyle.headerArrowWrapper = {
+    height: 40,
+    width: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.headerCenterWrapper = {
+    flex: 1,
+    flexDirection: 'row',
+  };
+
+  computedStyle.headerCenterItem = {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.calendarContainer = {
+    height: 350,
+    justifyContent: 'space-between',
+  };
+
+  computedStyle.calendarBottomContainer = {
+    flexDirection: 'row',
+    marginTop: Spacing[12],
+    paddingHorizontal: Spacing[16],
+  }
+  
+  return StyleSheet.create(computedStyle);
+};
+
+export const calendarTheme: CalendarProps['theme'] & {
+  'stylesheet.day.basic': any;
+  'stylesheet.calendar.header': any;
+  'stylesheet.calendar.main': any;
+} = {
+  'textDayStyle': {
+    height: 40,
+    width: 40,
+    borderRadius: 99,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    textAlign: 'center',
+    verticalAlign: 'middle',
+    overflow: 'hidden',
+  },
+  'stylesheet.day.basic': {
+    base: {
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      marginTop: 4,
+    },
+    alignedText: {},
+    selected: {},
+    today: {},
+    todayText: {
+      borderColor: Palettes.yellow[600],
+    },
+    selectedText: {
+      borderColor: Palettes.yellow[600],
+      backgroundColor: Palettes.yellow[600],
+    },
+    disabledText: {
+      color: Palettes.grey[200],
+    },
+    inactiveText: {
+      color: Palettes.grey[200],
+    },
+  },
+  'stylesheet.calendar.header': {
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      backgroundColor: 'red',
+      height: 0,
+    },
+    headerContainer: {
+      flexGrow: 1,
+      justifyContent: 'center',
+    },
+    week: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      borderBottomWidth: 1,
+      borderBottomColor: Palettes.grey[200],
+      paddingBottom: 12,
+    },
+    dayHeader: {
+      fontFamily: 'Montserrat-Regular',
+      fontSize: 14,
+      color: Palettes.black[900],
+    },
+  },
+  'stylesheet.calendar.main': {
+    week: {
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+    },
+  },
+};

package/src/components/calendars/calendars.type.tsx

@@ -0,0 +1,57 @@
+import { CalendarProps as RNCalendarProps } from 'react-native-calendars';
+import { ModalProps } from 'react-native-modal';
+
+export const MonthID = {
+  monthNames: [
+    'Januari',
+    'Februari',
+    'Maret',
+    'April',
+    'Mei',
+    'Juni',
+    'Juli',
+    'Agustus',
+    'September',
+    'Oktober',
+    'November',
+    'Desember',
+  ],
+  monthNamesShort: [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'Mei',
+    'Jun',
+    'Jul',
+    'Agu',
+    'Sep',
+    'Okt',
+    'Nov',
+    'Des',
+  ],
+  dayNames: ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'],
+  dayNamesShort: ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'],
+  today: 'Hari ini',
+};
+
+export type CalendarPropsAleph = Pick<ModalProps, 'onDismiss' | 'isVisible'> &
+  Omit<RNCalendarProps, 'initialDate'> & {
+    /**
+     * Initially visible month. Default now
+     */
+    initialDate?: Date;
+
+    /**
+     * Selected date
+     */
+    selectedDate?: Date;
+
+    /**
+     *
+     * Callback when the submit button pressed
+     */
+    onDateSave: (date: Date) => void;
+  };
+
+export type ModeSelect = 'calendar' | 'month' | 'year';

package/src/components/calendars/month-picker-modal.component.tsx

@@ -0,0 +1,137 @@
+import React, { useMemo } from 'react';
+import { TouchableHighlight, View } from 'react-native';
+
+import { Palettes, Radius, Spacing } from '../../themes';
+
+import { OnMonthChange } from './calendars.component';
+import { Typography } from '../typography/typography.component';
+import { CalendarPropsAleph, MonthID } from './calendars.type';
+
+type MonthPickerModalProps = {
+  onMonthChange: OnMonthChange;
+} & Pick<CalendarPropsAleph, 'initialDate'>;
+
+export function MonthPickerModal({
+  initialDate,
+  onMonthChange,
+}: MonthPickerModalProps) {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: Spacing[24],
+      }}
+    >
+      <View
+        style={{
+          width: '100%',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+        }}
+      >
+        {MonthID.monthNames.map((month, index) => (
+          <TouchableHighlight
+            key={month}
+            onPressIn={() =>
+              onMonthChange({
+                num: index - (initialDate?.getMonth() || 0),
+              })
+            }
+            underlayColor={Palettes.black[900] + '33'}
+            style={{
+              width: '32%',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderWidth: 1,
+              paddingVertical: Spacing[12],
+              borderColor: Palettes.grey[200],
+              borderRadius: Radius[8],
+              marginBottom: Spacing[8],
+              backgroundColor:
+                initialDate?.getMonth() === index
+                  ? Palettes.yellow[600]
+                  : 'transparent',
+            }}
+          >
+            <Typography variant="button-small">{month}</Typography>
+          </TouchableHighlight>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+type YearPickerProps = {
+  onYearChange: OnMonthChange;
+  yearPairSelectIndex: number;
+  yearIntervalPair: [number, number][];
+} & Pick<CalendarPropsAleph, 'initialDate'>;
+export function YearPicker({
+  initialDate,
+  onYearChange,
+  yearPairSelectIndex,
+  yearIntervalPair,
+}: YearPickerProps) {
+  const yearArray = useMemo(() => {
+    const years: number[] = [];
+    const yearPair = yearIntervalPair[yearPairSelectIndex];
+
+    if (!yearPair) return [];
+
+    for (let year = yearPair[1]; year <= yearPair[0]; year++) {
+      years.push(year);
+    }
+    return years;
+  }, [yearPairSelectIndex, yearIntervalPair]);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: Spacing[24],
+      }}
+    >
+      <View
+        style={{
+          width: '100%',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+        }}
+      >
+        {yearArray.map((year) => (
+          <TouchableHighlight
+            key={year}
+            onPressIn={() =>
+              onYearChange({
+                num: (year - (initialDate?.getFullYear() || 0)) * 12,
+              })
+            }
+            underlayColor={Palettes.black[900] + '33'}
+            style={{
+              width: '32%',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderWidth: 1,
+              paddingVertical: Spacing[12],
+              borderColor: Palettes.grey[200],
+              borderRadius: Radius[8],
+              marginBottom: Spacing[8],
+              backgroundColor:
+                initialDate?.getFullYear() === year
+                  ? Palettes.yellow[600]
+                  : 'transparent',
+            }}
+          >
+            <Typography variant="button-small">{year}</Typography>
+          </TouchableHighlight>
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export { ActionList } from './ActionList/ActionList.component';
 export { Button } from './button/button.component';
+export { Calendars } from './calendars/calendars.component';
 export { Label } from './label/label.component';
 export { BaseComponent } from './base/base.component';
 export { Typography } from './typography/typography.component';

package/src/components/information-box/information-box.type.ts

@@ -5,16 +5,24 @@ export interface InformationBoxProps {
    * The text content of the component
    */
   text: string | ReactNode;
-
-  title?: string;
-
-  subtitle?: string;
-
+  /**
+   * Boolean for showing information icon
+   */
   showIcon?: boolean;
 
+  /**
+   * Props for custom information icon 
+   */
   informationIcon?: ReactNode;
 
+  /**
+   * Props for adding additional component below text, use for action
+   */
   actionComponent?: ReactNode;
 
+  /**
+   * State for the component, as a indicator for message severity
+   * @default default
+   */
   severity?: 'critical' | 'default';
 }

package/src/components/typography/typography.style.tsx

@@ -31,6 +31,42 @@ interface ComputedStyleProps {
   'caption2'?: TextStyle;
   'overline'?: TextStyle;
   'overline-small'?: TextStyle;
+
+  // Heading
+  'text-heading-h1-semibold'?: TextStyle;
+  'text-heading-h1-regular'?: TextStyle;
+  'text-heading-h2-semibold'?: TextStyle;
+  'text-heading-h2-regular'?: TextStyle;
+  'text-heading-h3-bold'?: TextStyle;
+  'text-heading-h3-regular'?: TextStyle;
+  'text-heading-h4-semibold'?: TextStyle;
+  'text-heading-h4-regular'?: TextStyle;
+  'text-heading-h5-bold'?: TextStyle;
+  'text-heading-h5-semibold'?: TextStyle;
+  'text-heading-h5-regular'?: TextStyle;
+  'text-heading-h6-bold'?: TextStyle;
+  'text-heading-h6-semibold'?: TextStyle;
+  'text-heading-h6-regular'?: TextStyle;
+  // Subheading
+  'text-sub-heading-semibold'?: TextStyle;
+  // Subtitle
+  'text-subtitle-primary-semibold'?: TextStyle;
+  'text-subtitle-secondary-bold'?: TextStyle;
+  'text-subtitle-secondary-semibold'?: TextStyle;
+  // Button
+  'text-button-default-semibold'?: TextStyle;
+  'text-button-small-semibold'?: TextStyle;
+  // Caption
+  'text-caption-semibold'?: TextStyle;
+  'text-caption-regular'?: TextStyle;
+  // Overline
+  'text-overline-semibold'?: TextStyle;
+  'text-overline-regular'?: TextStyle;
+  'text-overline-strike'?: TextStyle;
+  // Body
+  'text-body-primary-regular'?: TextStyle;
+  'text-body-secondary-regular'?: TextStyle;
+  'text-body-tertiary-regular'?: TextStyle;
 }
 
 export const getStyle = (props: TypographyProps) => {
@@ -233,5 +269,212 @@ export const getStyle = (props: TypographyProps) => {
     lineHeight: 15,
   };
 
+  // -===== New Token update =====-
+  const textSemiboldV2: TextStyle = {
+    fontFamily:
+      fontStyle === 'italic'
+        ? 'Montserrat-SemiBoldItalic'
+        : 'Montserrat-SemiBold',
+    fontSize: 600,
+  };
+
+  const textBoldV2: TextStyle = {
+    fontFamily:
+      fontStyle === 'italic' ? 'Montserrat-BoldItalic' : 'Montserrat-Bold',
+    fontSize: 700,
+  };
+
+  // Heading
+  computedStyle['text-heading-h1-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 96,
+    lineHeight: 96,
+  };
+
+  computedStyle['text-heading-h1-regular'] = {
+    ...baseTextStyle,
+    fontSize: 96,
+    lineHeight: 96,
+  };
+
+  computedStyle['text-heading-h2-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 60,
+    lineHeight: 60,
+  };
+
+  computedStyle['text-heading-h2-regular'] = {
+    ...baseTextStyle,
+    fontSize: 60,
+    lineHeight: 60,
+  };
+
+  computedStyle['text-heading-h3-bold'] = {
+    ...baseTextStyle,
+    ...textBoldV2,
+    fontSize: 48,
+    lineHeight: 48,
+  };
+
+  computedStyle['text-heading-h3-regular'] = {
+    ...baseTextStyle,
+    fontSize: 48,
+    lineHeight: 48,
+  };
+
+  computedStyle['text-heading-h4-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 34,
+    lineHeight: 34,
+  };
+
+  computedStyle['text-heading-h4-regular'] = {
+    ...baseTextStyle,
+    fontSize: 34,
+    lineHeight: 34,
+  };
+
+  computedStyle['text-heading-h5-bold'] = {
+    ...baseTextStyle,
+    ...textBoldV2,
+    fontSize: 24,
+    lineHeight: 24,
+  };
+
+  computedStyle['text-heading-h5-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 24,
+    lineHeight: 24,
+  };
+
+  computedStyle['text-heading-h5-regular'] = {
+    ...baseTextStyle,
+    fontSize: 24,
+    lineHeight: 24,
+  };
+
+  computedStyle['text-heading-h6-bold'] = {
+    ...baseTextStyle,
+    ...textBoldV2,
+    fontSize: 20,
+    lineHeight: 20,
+  };
+
+  computedStyle['text-heading-h6-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 20,
+    lineHeight: 20,
+  };
+
+  computedStyle['text-heading-h6-regular'] = {
+    ...baseTextStyle,
+    fontSize: 20,
+    lineHeight: 20,
+  };
+
+  // Sub Heading
+  computedStyle['text-sub-heading-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 14,
+    lineHeight: 14,
+  };
+
+  // Subtitle
+  computedStyle['text-subtitle-primary-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 16,
+    lineHeight: 16,
+  };
+
+  computedStyle['text-subtitle-secondary-bold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 14,
+    lineHeight: 14,
+  };
+
+  computedStyle['text-subtitle-secondary-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 14,
+    lineHeight: 14,
+  };
+
+  // Button
+  computedStyle['text-button-default-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 14,
+    lineHeight: 14,
+  };
+
+  computedStyle['text-button-small-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 12,
+    lineHeight: 12,
+  };
+
+  // Caption
+  computedStyle['text-caption-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 12,
+    lineHeight: 12,
+  };
+
+  computedStyle['text-caption-regular'] = {
+    ...baseTextStyle,
+    fontSize: 12,
+    lineHeight: 12,
+  };
+
+  // Overline
+  computedStyle['text-overline-semibold'] = {
+    ...baseTextStyle,
+    ...textSemiboldV2,
+    fontSize: 10,
+    lineHeight: 10,
+  };
+
+  computedStyle['text-overline-regular'] = {
+    ...baseTextStyle,
+    fontSize: 12,
+    lineHeight: 12,
+  };
+
+  computedStyle['text-overline-strike'] = {
+    ...baseTextStyle,
+    textDecorationLine: 'line-through',
+    fontSize: 12,
+    lineHeight: 12,
+  };
+
+  // Body
+  computedStyle['text-body-primary-regular'] = {
+    ...baseTextStyle,
+    fontSize: 16,
+    lineHeight: 16,
+  };
+
+  computedStyle['text-body-secondary-regular'] = {
+    ...baseTextStyle,
+    fontSize: 14,
+    lineHeight: 14,
+  };
+
+  computedStyle['text-body-tertiary-regular'] = {
+    ...baseTextStyle,
+    fontSize: 12,
+    lineHeight: 12,
+  };
+
   return StyleSheet.create(computedStyle);
 };

package/src/components/typography/typography.type.ts

@@ -4,9 +4,37 @@ export interface TypographyProps extends TextProps {
   // children: string | null;
   /**
    * The variant of the component
-   * @default "body1"
+   * @default body1
    */
   variant?:
+    | 'text-heading-h1-semibold'
+    | 'text-heading-h1-regular'
+    | 'text-heading-h2-semibold'
+    | 'text-heading-h2-regular'
+    | 'text-heading-h3-bold'
+    | 'text-heading-h3-regular'
+    | 'text-heading-h4-semibold'
+    | 'text-heading-h4-regular'
+    | 'text-heading-h5-bold'
+    | 'text-heading-h5-semibold'
+    | 'text-heading-h5-regular'
+    | 'text-heading-h6-bold'
+    | 'text-heading-h6-semibold'
+    | 'text-heading-h6-regular'
+    | 'text-sub-heading-semibold'
+    | 'text-subtitle-primary-semibold'
+    | 'text-subtitle-secondary-bold'
+    | 'text-subtitle-secondary-semibold'
+    | 'text-button-default-semibold'
+    | 'text-button-small-semibold'
+    | 'text-caption-semibold'
+    | 'text-caption-regular'
+    | 'text-overline-semibold'
+    | 'text-overline-regular'
+    | 'text-overline-strike'
+    | 'text-body-primary-regular'
+    | 'text-body-secondary-regular'
+    | 'text-body-tertiary-regular'
     | 'heading1-semibold'
     | 'heading1-regular'
     | 'heading2-semibold'
@@ -39,13 +67,13 @@ export interface TypographyProps extends TextProps {
    * The style of the font
    * - `italic`: Display text in italic
    * - `normal`: Display text in normal
-   * @default "normal"
+   * @default normal
    */
   fontStyle?: 'italic' | 'normal';
 
   /**
    * The color of the Text
-   * @default Palettes.Black.900 | "#112639"
+   * @default Palettes.Black.900 | #112639
    */
   fontColor?: ColorValue;