Feat/calendar (#2403)

* Initial creation of new calendar component

* Push typings

* render initial components for example screen

* Add DateUtils with stubs

* Add tests for DateUtils

* Add stub implementation to getDaysOfWeekNumber

* Day - render day from date

* Basic implementation of getWeekNumbersOfMonth

* Install date-fns

* Basic implementation of Month

* Add Week

* Fix Month component

* Change to millis

* Add key to week

* Fix hardcoded month value we pass to Month component

* Add test for invalid month

* Render header in calendar item

* Header - render header

* fix CalendarItem render

* Create getDaysOfWeekNumber and dependencies

* radability

* Add context provider and change firstDayOfWeek to enum

* Add date and setDate to context

* Add getDateObject worklet

* Fix calendar context types and add initialDate prop

* Basic Agenda

* Header - add months by presing arrow buttons

* Add TODOs

* Move FirstDayOfWeek from enum to enum+union and fix tests

* MILLIS to MS

* Add mock data (script still needs work) and link (types need work)

* Fix script and types

* addMonth - use Date's setMonth function

* Moving 'firstDayOfWeek' to be enum

* WeekDaysNames - adding new component to Header

* add ts notes

* update comment for ts version ^4.3.2

* Set WeekDaysNames format in Header

* use FirstDayOfWeek enum

* use 'DayNamesFormat' enum

* remove console

* Day - adding onPress
Adding style.ts file
Calendar - pass date to calendatItem

* add todo

* Minor fixes and remove todos

* Change context's date to selectedDate

* remove style file

* valueOf to getTime

* export Event

* Day - adding selection

* Wrap CalendarItem with FlashList

* Agenda - add headers + scroll on date change

* Agenda - set date on scroll

* Fix mock and script

* UI touchups

* sort imports and add test for 'getMonthForIndex' and adding tests to 'isSameDay'

* Header - small ui changes

* Context - adding 'showWeeksNumbers'

* fix indentation

* margin

* Add TODOs

* Add flex to day

* Day - mark today

* Fix FirstDayOfWeek enum and add update sources

* Adding UpdateSource to setDate calls

* Implement setDate to store lastUpdateSource

* dateutils - adding 'isSameMonth'

* Add estimatedItemSize prop to FlashLists

* Update mock data

* Fix TS errors

* Context - add updateSource

* fix screen errors

* fix updateSource on Context

* fix type

* Calendar - add scrollToIndex on selectedDate change

* Agenda - verify update source and use isSameDay

* Calendar - fix scrollToIndex

* Agenda initial index

* isSameMonth - support MonthProps type for params

* remove synchronous calls to isNumber from a worklet

* Calendar - add setDate on calendar scroll (by user) to the first of the month

* Fix getWeekNumbersOfMonth and add missing tests

* Fix typing issues

* fix scrolledByUser.value

* Calendar -  fix  scrolledByUser

* merge fix

* shush ts wrannings

* Add todos

* DateUtils - add 'getNormalizedDate' function

* Change week numbering from ISO to default

Change week numbering to use "default" (Jan 1st) and not ISO (Jan 4th)

* DateUtils - adding 'isToday' and 'isPastDate'

* adding assets

* Agenda - fixed height for items and initialScrollIndex

* TodayButton

* Update calendars mock data

* Adding 'staticHeader' prop to calendar and passing it on context

* Fix lint

* HeaderHeight to context

* Utils - use JS Date only inside utils (not as a parameter nor return type) and fix tests to use our inner utils

* Fix tests and remove getNormalizedDate

* fix lint

* Calendar - setDate when 'initialDate' prop changes

* Header - fix arrows

* fix margins

---------

Co-authored-by: Inbal Tish <[email protected]>
Co-authored-by: M-i-k-e-l <[email protected]>

Author: 3 people

demo/src/screens/MenuStructure.js

@@ -174,6 +174,7 @@ export const navigationData = {
   Incubator: {
     title: 'Incubator (Experimental)',
     screens: [
+      {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
       {title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},

demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockData.ts

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import {View, Incubator} from 'react-native-ui-lib';
+import {data} from './MockData';
+
+export default class CalendarScreen extends Component {
+  // constructor(props) {
+  //   super(props);
+    
+  //   setTimeout(() => {
+  //     this.setState({date: 1676026748000});
+  //   }, 2000);
+  // }
+
+  state = {
+    date: undefined
+  };
+  
+  render() {
+    return (
+      <View flex>
+        <Incubator.Calendar data={data} staticHeader initialDate={this.state.date}>
+          <Incubator.Calendar.Agenda/>
+        </Incubator.Calendar>
+      </View>
+    );
+  }
+}

demo/src/screens/incubatorScreens/IncubatorCalendarScreen/index.tsx

@@ -1,6 +1,7 @@
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
+  registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
   registrar('unicorn.components.IncubatorChipsInputScreen', () => require('./IncubatorChipsInputScreen').default);
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));

demo/src/screens/incubatorScreens/index.js

@@ -32,6 +32,7 @@
     "pre-push": "npm run build:dev && npm run test",
     "docs:deploy": "./scripts/deployDocs.sh",
     "docs:build": "node scripts/buildDocs.js",
+    "calendar:createMocks": "node scripts/createCalendarMockData.js",
     "snippets:build": "node scripts/generateSnippets.js",
     "demo": "./scripts/demo.sh",
     "release": "node ./scripts/release.js"
@@ -40,6 +41,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",
     "color": "^3.1.0",
     "commons-validator-js": "^1.0.237",
+    "date-fns": "^2.29.3",
     "deprecated-react-native-prop-types": "^2.3.0",
     "hoist-non-react-statics": "^3.0.0",
     "lodash": "^4.17.21",

package.json

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const HOUR_IN_MS = 60 * 60 * 1000;
+const ID_LENGTH = 10;
+
+function generateId() {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  for (let i = 0; i < ID_LENGTH; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
+const data = [];
+
+for (let year = 2021; year <= 2023; ++year) {
+  for (let month = 0; month <= 11; ++month) {
+    for (let day = 1; day <= 31; day += Math.random() > 0.5 ? 2 : 1) {
+      for (let hour = 9; hour <= 19; hour += Math.random() > 0.5 ? 4 : 3) {
+        const startDate = new Date(year, month, day, hour, 0);
+        if (startDate.getDay() >= 2 && startDate.getDay() <= 5) {
+          const start = startDate.getTime();
+          const end = start + HOUR_IN_MS * (Math.random() > 0.5 ? 0.5 : 1);
+          const id = generateId();
+          data.push({id, start, end});
+        }
+      }
+    }
+  }
+}
+
+console.log(`${data.length} events were created`);
+
+fs.writeFileSync('demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockData.ts',
+  `// Note: to generate new data run calendar:createMocks and update createCalendarMockData script \n` +
+  `export const data = ${JSON.stringify(data)};`);

scripts/createCalendarMockData.js

@@ -0,0 +1,158 @@
+import React, {useContext, useCallback, useRef} from 'react';
+import {runOnJS, useAnimatedReaction, useSharedValue} from 'react-native-reanimated';
+import {FlashList, ViewToken} from '@shopify/flash-list';
+import {BorderRadiuses} from 'style';
+import View from '../../components/view';
+import Text from '../../components/text';
+import {isSameDay, isSameMonth} from './helpers/DateUtils';
+import {InternalEvent, Event, DateSectionHeader, UpdateSource} from './types';
+import CalendarContext from './CalendarContext';
+
+// TODO: Fix initial scrolling
+function Agenda() {
+  const {data, selectedDate, setDate, updateSource} = useContext(CalendarContext);
+  const flashList = useRef<FlashList<InternalEvent>>(null);
+  const closestSectionHeader = useSharedValue<DateSectionHeader | null>(null);
+  const scrolledByUser = useSharedValue<boolean>(false);
+
+  const keyExtractor = useCallback((item: InternalEvent) => {
+    return item.type === 'Event' ? item.id : item.header;
+  }, []);
+
+  const renderEvent = useCallback((item: Event) => {
+    return (
+      <View
+        marginV-1
+        marginH-10
+        paddingH-10
+        height={50}
+        style={{borderWidth: 1, borderRadius: BorderRadiuses.br20, justifyContent: 'center'}}
+      >
+        <Text style={{}}>
+          Item for{' '}
+          {new Date(item.start).toLocaleString('en-GB', {
+            month: 'short',
+            day: 'numeric',
+            hour12: false,
+            hour: '2-digit',
+            minute: '2-digit'
+          })}
+          -{new Date(item.end).toLocaleString('en-GB', {hour12: false, hour: '2-digit', minute: '2-digit'})}
+        </Text>
+      </View>
+    );
+  }, []);
+
+  const renderHeader = useCallback((item: DateSectionHeader) => {
+    return (
+      <View
+        marginB-1
+        paddingB-4
+        marginH-10
+        paddingH-10
+        height={50}
+        bottom
+      >
+        <Text>{item.header}</Text>
+      </View>
+    );
+  }, []);
+
+  const renderItem = useCallback(({item}: {item: InternalEvent; index: number}) => {
+    switch (item.type) {
+      case 'Event':
+        return renderEvent(item);
+      case 'Header':
+        return renderHeader(item);
+    }
+  },
+  [renderEvent, renderHeader]);
+
+  const getItemType = useCallback(item => item.type, []);
+
+  const findClosestDateAfter = useCallback((selected: number) => {
+    'worklet';
+    for (let index = 0; index < data.length; ++index) {
+      const item = data[index];
+      if (item.type === 'Header') {
+        if (item.date >= selected) {
+          return {dateSectionHeader: item, index};
+        }
+      }
+    }
+
+    return null;
+  },
+  [data]);
+
+  const scrollToIndex = useCallback((index: number, animated: boolean) => {
+    flashList.current?.scrollToIndex({index, animated});
+  }, []);
+
+  useAnimatedReaction(() => {
+    return selectedDate.value;
+  },
+  (selected, previous) => {
+    if (updateSource?.value !== UpdateSource.AGENDA_SCROLL) {
+      if (
+        selected !== previous &&
+          (closestSectionHeader.value?.date === undefined || !isSameDay(selected, closestSectionHeader.value?.date))
+      ) {
+        const result = findClosestDateAfter(selected);
+        if (result !== null) {
+          const {dateSectionHeader, index} = result;
+          closestSectionHeader.value = dateSectionHeader;
+          scrolledByUser.value = false;
+          // TODO: Can the animation be improved (not in JS)?
+          if (previous) {
+            const _isSameMonth = isSameMonth(selected, previous);
+            runOnJS(scrollToIndex)(index, _isSameMonth);
+          }
+        }
+      }
+    }
+  },
+  [findClosestDateAfter]);
+
+  // TODO: look at https://docs.swmansion.com/react-native-reanimated/docs/api/hooks/useAnimatedScrollHandler
+  const onViewableItemsChanged = useCallback(({viewableItems}: {viewableItems: ViewToken[]}) => {
+    if (scrolledByUser.value) {
+      const result = viewableItems.find(item => item.item.type === 'Header');
+      if (result) {
+        const {item}: {item: DateSectionHeader} = result;
+        if (closestSectionHeader.value?.date !== item.date) {
+          closestSectionHeader.value = item;
+          setDate(item.date, UpdateSource.AGENDA_SCROLL);
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onMomentumScrollBegin = useCallback(() => {
+    scrolledByUser.value = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onScrollBeginDrag = useCallback(() => {
+    scrolledByUser.value = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <FlashList
+      ref={flashList}
+      estimatedItemSize={52}
+      data={data}
+      keyExtractor={keyExtractor}
+      renderItem={renderItem}
+      getItemType={getItemType}
+      onViewableItemsChanged={onViewableItemsChanged}
+      onMomentumScrollBegin={onMomentumScrollBegin}
+      onScrollBeginDrag={onScrollBeginDrag}
+      initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0}
+    />
+  );
+}
+
+export default Agenda;

src/incubator/Calendar/Agenda.tsx

@@ -0,0 +1,9 @@
+import {createContext} from 'react';
+import {CalendarContextProps, FirstDayOfWeek} from './types';
+
+// @ts-ignore
+const CalendarContext = createContext<CalendarContextProps>({
+  firstDayOfWeek: FirstDayOfWeek.MONDAY
+});
+
+export default CalendarContext;

src/incubator/Calendar/CalendarContext.ts

@@ -0,0 +1,44 @@
+import React, {useContext, useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+import {Constants} from '../../commons/new';
+import View from '../../components/view';
+import {CalendarItemProps} from './types';
+import CalendarContext from './CalendarContext';
+import Month from './Month';
+import Header from './Header';
+
+const CALENDAR_HEIGHT = 250;
+
+function CalendarItem(props: CalendarItemProps) {
+  const {year, month} = props;
+  const {staticHeader, headerHeight} = useContext(CalendarContext);
+  
+  const calendarStyle = useMemo(() => {
+    // TODO: dynamic height: calc calendar height with month's number of weeks
+    return [
+      styles.container,
+      {
+        height: CALENDAR_HEIGHT - (staticHeader ? headerHeight.value : 0)
+      }
+    ];
+  }, [staticHeader]);
+
+  if (month !== undefined) {
+    return (
+      <View style={calendarStyle}>
+        {!staticHeader && <Header month={month} year={year}/>}
+        <Month month={month} year={year}/>
+      </View>
+    );
+  }
+  return null;
+}
+
+export default CalendarItem;
+
+const styles = StyleSheet.create({
+  container: {
+    width: Constants.screenWidth,
+    borderBottomWidth: 1
+  }
+});

src/incubator/Calendar/CalendarItem.tsx

@@ -0,0 +1,83 @@
+import isNull from 'lodash/isNull';
+import React, {useContext, useCallback} from 'react';
+import {StyleSheet} from 'react-native';
+import Reanimated, {useSharedValue, useAnimatedStyle, useAnimatedReaction} from 'react-native-reanimated';
+import {Colors} from 'style';
+import View from '../../components/view';
+import TouchableOpacity from '../../components/touchableOpacity';
+import Text from '../../components/text';
+import {getDayOfDate, isSameDay, isToday} from './helpers/DateUtils';
+import {DayProps, UpdateSource} from './types';
+import CalendarContext from './CalendarContext';
+
+
+const AnimatedText = Reanimated.createAnimatedComponent(Text);
+
+const Day = (props: DayProps) => {
+  const {date, onPress} = props;
+  const {selectedDate, setDate} = useContext(CalendarContext);
+
+  const shouldMarkSelected = !isNull(date) ? isSameDay(selectedDate.value, date) : false;
+  const isSelected = useSharedValue(shouldMarkSelected);
+
+  const backgroundColor = isToday(date) ? Colors.$backgroundSuccessHeavy : Colors.transparent;
+  const textColor = isToday(date) ? Colors.$textDefaultLight : Colors.$backgroundPrimaryHeavy;
+  
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      backgroundColor: isSelected.value ? Colors.$backgroundPrimaryHeavy : backgroundColor,
+      color: isSelected.value ? Colors.$textDefaultLight : textColor
+    };
+  });
+
+  const animatedTextStyles = useAnimatedStyle(() => {
+    return {
+      color: isSelected.value ? Colors.$textDefaultLight : textColor
+    };
+  });
+
+  useAnimatedReaction(() => {
+    return selectedDate.value;
+  }, (selected) => {
+    isSelected.value = isSameDay(selected, date!);
+  }, []);
+
+  const _onPress = useCallback(() => {
+    if (date !== null) {
+      isSelected.value = true;
+      setDate(date, UpdateSource.DAY_SELECT);
+      onPress?.(date);
+    }
+  }, [date, setDate, onPress]);
+  
+  const renderDay = () => {
+    const day = !isNull(date) ? getDayOfDate(date) : '';
+    return (
+      <View center>
+        <View reanimated style={[styles.selection, animatedStyles]}/>
+        <AnimatedText style={animatedTextStyles}>{day}</AnimatedText>
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity flex center style={styles.dayContainer} onPress={_onPress} activeOpacity={1}>
+      {renderDay()}
+    </TouchableOpacity>
+  );
+};
+
+export default Day;
+
+const styles = StyleSheet.create({
+  dayContainer: {
+    width: 32,
+    height: 32
+  },
+  selection: {
+    position: 'absolute',
+    width: 24,
+    height: 24,
+    borderRadius: 12
+  }
+});