@tactics/toddle-styleguide 5.2.2 → 5.3.3

package/App.tsx

@@ -63,7 +63,6 @@ import {LanguageButtonPreview} from './src/components/molecules/language-button/
 import {ModalPreview} from './src/components/templates/modal/modal.preview';
 import {LoadingIndicatorPreview} from './src/components/organisms/loading-indicator/loading-indicator.preview';
 import {WaveBackgroundPreview} from './src/components/molecules/wave-background/wave.preview';
-import {ToddleDateTimePreview} from './src/utilities/toddle-datetime/toddle-datetime.preview';
 import {BackgroundGradientPreview} from './src/components/atoms/background-gradient/background-gradient.preview';
 import {PersonInfoCardPreview} from './src/components/organisms/person-info-card/person-info-card.preview';
 import {TimePickerPreview} from './src/components/molecules/time-picker/time-picker.preview';
@@ -81,6 +80,8 @@ import { SelectableListItemPreview } from './src/components/molecules/selectable
 import {
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
+import {ContactAddress} from './src/components/molecules/contact-address/contact-address.component';
+import {ContactAddressPreview} from './src/components/molecules/contact-address/contact-address.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -128,6 +129,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Contact Item"
         onPress={() => navigation.push('contact-item')}
       />
+      <ReactBtn
+        title="Contact Address"
+        onPress={() => navigation.push('contact-address')}
+      />
       <ReactBtn
         title="Contact Role"
         onPress={() => navigation.push('contact-role')}
@@ -144,10 +149,6 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Date Input"
         onPress={() => navigation.push('date-input')}
       />
-      <ReactBtn
-        title="Day Select"
-        onPress={() => navigation.push('day-select')}
-      />
       <ReactBtn
         title="Default Select"
         onPress={() => navigation.push('default-select')}
@@ -239,10 +240,6 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
       />
       <ReactBtn title="Pill" onPress={() => navigation.push('pill')} />
       <ReactBtn title="Popover" onPress={() => navigation.push('popover')} />
-      <ReactBtn
-        title="Popover Action"
-        onPress={() => navigation.push('popover-action')}
-      />
       <ReactBtn
         title="Pressable Icon"
         onPress={() => navigation.push('pressable-icon')}
@@ -281,7 +278,6 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         onPress={() => navigation.push('split-container')}
       />
       <ReactBtn title="Swiper" onPress={() => navigation.push('swiper')} />
-      <ReactBtn title="Tab View" onPress={() => navigation.push('tab-view')} />
       <ReactBtn title="Tag" onPress={() => navigation.push('tag')} />
       <ReactBtn
         title="Text Bubble"
@@ -308,10 +304,6 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         onPress={() => navigation.push('timetable-editor')}
       />
       <ReactBtn title="Timeline" onPress={() => navigation.push('timeline')} />
-      <ReactBtn
-        title="Toddle DateTime"
-        onPress={() => navigation.push('toddle-datetime')}
-      />
       <ReactBtn
         title="Wave Background"
         onPress={() => navigation.push('wave')}
@@ -620,11 +612,6 @@ function App() {
   }}>
             {() => <TimeLinePreview />}
           </Stack.Screen>
-          <Stack.Screen name="toddle-datetime" options={{
-    freezeOnBlur: false,
-  }}>
-            {() => <ToddleDateTimePreview />}
-          </Stack.Screen>
           <Stack.Screen name="wave" options={{
     freezeOnBlur: false,
   }}>
@@ -645,6 +632,11 @@ function App() {
   }}>
             {() => <SelectableListItemPreview />}
           </Stack.Screen>
+          <Stack.Screen name="contact-address" options={{
+            freezeOnBlur: false,
+          }}>
+            {() => <ContactAddressPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/app.json

@@ -11,7 +11,6 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "newArchEnabled": false,
     "updates": {
       "fallbackToCacheTimeout": 0
     },
@@ -19,20 +18,25 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.tactics.toddle"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
-      }
+      },
+      "package": "com.tactics.toddle"
     },
     "web": {
       "bundler": "metro",
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
-      "expo-font"
+      "expo-font",
+      "expo-background-task",
+      "expo-localization",
+      "expo-secure-store"
     ]
   }
 }

package/index.tsx

@@ -86,6 +86,7 @@ import { InlineNotice } from './src/components/molecules/inline-notice/inline-no
 import { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
 import { SwipeableContainer } from './src/components/molecules/swipeable/swipeable-container.component';
 import { SwipeableAction } from './src/components/molecules/swipeable/swipeable-action.component';
+import { ContactAddress } from './src/components/molecules/contact-address/contact-address.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -98,9 +99,6 @@ import {Initials} from './src/models/initials.model';
 import { TimeSlotRecord } from './src/models/time-slot-record';
 import { TimeSlotSequence } from './src/models/time-slot-sequence';
 
-// Exports of classes
-import {ToddleDateTime} from './src/utilities/toddle-datetime/toddle-datetime.class';
-
 // Exports of context
 import {ThemeCtx} from './src/context/theme.context';
 
@@ -122,6 +120,7 @@ export {
   Check,
   Checkbox,
   ChildListItem,
+  ContactAddress,
   ContactItem,
   ContactRole,
   DateInput,
@@ -176,7 +175,6 @@ export {
   KeyBoardTypes,
   Size,
   ThemeCtx,
-  ToddleDateTime,
   VisualState,
   CreateResponsiveStyle,
   Scale,

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.2.2",
+  "version": "5.3.3",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
   "scripts": {
-    "expo": "./node_modules/.bin/tsc && ./node_modules/.bin/expo",
     "start": "./node_modules/.bin/tsc && ./node_modules/.bin/expo start",
     "test": "./node_modules/.bin/jest",
     "format": "./node_modules/.bin/prettier --write src/.",
-    "types": "./node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --esModuleInterop --jsx react-native --skipLibCheck --target es5"
+    "types": "./node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --esModuleInterop --jsx react-native --skipLibCheck --target es5",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
   },
   "engineStrict": true,
   "engines": {
@@ -19,12 +20,11 @@
   "packageManager": "yarn@3.3.1",
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
-    "@expo/config-plugins": "~9.0.0",
-    "@expo/metro-runtime": "~4.0.0",
+    "@expo/metro-runtime": "~5.0.4",
     "@expo/webpack-config": "~19.0.1",
     "@lottiefiles/dotlottie-react": "^0.14.3",
     "@miblanchard/react-native-slider": "^2.3.1",
-    "@react-native-picker/picker": "2.9.0",
+    "@react-native-picker/picker": "2.11.1",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.7",
@@ -34,32 +34,48 @@
     "@testing-library/react-native": "^12.1.2",
     "@types/luxon": "^3.3.0",
     "@types/xdate": "^0.8.32",
-    "expo": "~52.0.20",
-    "expo-font": "~13.0.2",
-    "expo-haptics": "~14.0.0",
-    "expo-linear-gradient": "~14.0.1",
-    "expo-status-bar": "~2.0.0",
+    "dayjs": "^1.11.18",
+    "dayjs-plugin-utc": "^0.1.2",
+    "expo": "^53.0.0",
+    "expo-application": "~6.1.5",
+    "expo-background-task": "~0.2.8",
+    "expo-camera": "~16.1.11",
+    "expo-crypto": "~14.1.5",
+    "expo-dev-client": "~5.2.4",
+    "expo-device": "~7.1.4",
+    "expo-font": "~13.3.2",
+    "expo-haptics": "~14.1.4",
+    "expo-linear-gradient": "~14.1.5",
+    "expo-localization": "~16.1.6",
+    "expo-secure-store": "~14.2.4",
+    "expo-splash-screen": "~0.30.10",
+    "expo-status-bar": "~2.2.3",
     "intl": "^1.2.5",
     "jsc-android": "^250231.0.0",
-    "lottie-ios": "4.2.0",
-    "lottie-react-native": "^7.1.0",
-    "luxon": "^3.3.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.5",
+    "lottie-ios": "4.5.0",
+    "lottie-react-native": "7.2.2",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-i18next": "^13.0.1",
+    "react-native": "0.79.5",
     "react-native-calendar-strip": "^2.2.6",
     "react-native-calendars": "^1.1299.0",
-    "react-native-gesture-handler": "~2.20.2",
-    "react-native-pager-view": "6.5.1",
+    "react-native-dotenv": "^3.4.9",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-keychain": "^8.1.1",
+    "react-native-pager-view": "6.7.1",
     "react-native-picker-select": "^8.0.4",
-    "react-native-reanimated": "~3.16.1",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-svg": "15.8.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1",
+    "react-native-svg": "15.11.2",
     "react-native-swipe-gestures": "^1.0.5",
-    "react-native-web": "~0.19.13",
+    "react-native-toast-message": "^2.1.6",
+    "react-native-translation": "^1.1.0",
+    "react-native-web": "^0.20.0",
     "react-native-wheel-picker-expo": "^0.5.4",
     "react-native-wheely": "^0.6.0",
+    "react-redux": "^8.1.1",
     "react-test-renderer": "^18.2.0"
   },
   "devDependencies": {
@@ -68,14 +84,26 @@
     "@types/jest": "^29.5.2",
     "@types/luxon": "^3.3.0",
     "@types/node": "^20.3.1",
-    "@types/react": "~18.3.12",
+    "@types/react": "~19.0.10",
     "@types/react-dom": "~18.3.1",
     "@types/react-test-renderer": "^18.0.0",
     "jest": "~29.7.0",
-    "jest-expo": "~52.0.2",
+    "jest-expo": "~53.0.10",
     "prettier": "2.8.8",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "~5.3.3"
+    "typescript": "~5.8.3"
+  },
+  "expo": {
+    "doctor": {
+      "reactNativeDirectoryCheck": {
+        "exclude": [
+          "@callstack/react-theme-provider",
+          "react-native-calendar-strip",
+          "react-native-wheely"
+        ],
+        "listUnknownPackages": false
+      }
+    }
   }
 }

package/src/components/atoms/calendar/calendar.component.tsx

@@ -3,7 +3,9 @@ import {Calendar as RNCalendar, LocaleConfig} from 'react-native-calendars/src';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './calendar.styles';
 import {Icon} from '../../../icons';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {DateTime, DateTimeInterface} from '../../../utilities/datetime/datetime.class';
+import {SystemClock} from '../../../utilities/datetime/clock.class';
+import {UTCTimezone} from '../../../utilities/datetime/timezone.class';
 
 LocaleConfig.locales['nl'] = {
   monthNames: [
@@ -49,8 +51,8 @@ LocaleConfig.locales['nl'] = {
 LocaleConfig.defaultLocale = 'nl';
 
 type CalendarProps = {
-  onDayPress: (day: ToddleDateTime) => void;
-  selected: ToddleDateTime;
+  onDayPress: (day: DateTimeInterface) => void;
+  selected: DateTimeInterface;
   minDate?: string;
   maxDate?: string;
 };
@@ -63,9 +65,10 @@ export const Calendar = ({
 }: CalendarProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
-  const initDate = ToddleDateTime.now().toISODate() || undefined;
+  const clock = new SystemClock();
+  const initDate = clock.now().toDateOnlyIso8601() || undefined;
 
-  const today = selected.toISODate();
+  const today = selected.toDateOnlyIso8601();
 
   const marked = useMemo(() => {
     if (today === null) {
@@ -84,7 +87,8 @@ export const Calendar = ({
       minDate={minDate}
       maxDate={maxDate}
       onDayPress={(day) => {
-        onDayPress(ToddleDateTime.fromISO(day.dateString));
+        const sTimestamp = Math.floor(day.timestamp / 1000);
+        onDayPress(DateTime.fromTimestamp(sTimestamp));
       }}
       markedDates={marked}
       theme={styles.custom}

package/src/components/atoms/calendar/calendar.preview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Calendar} from './calendar.component';
 import {useWindowDimensions} from 'react-native';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {SystemClock} from '../../../utilities/datetime/clock.class';
 
 const {View} = require('react-native');
 
@@ -9,10 +9,11 @@ export const CalendarPreview = ({}: {}) => {
   const full = useWindowDimensions();
   const width = full.width;
 
-  const [selectedDay, setSelectedDay] = React.useState(ToddleDateTime.now());
+  const Clock = new SystemClock();
+  const [selectedDay, setSelectedDay] = React.useState(Clock.now());
 
   const calendarStartDate = '2022-09-01';
-  const calendarEndDate = '2023-07-31';
+  const calendarEndDate = '2026-07-31';
 
   return (
     <View

package/src/components/molecules/amount/amount.component.tsx

@@ -35,7 +35,8 @@ export const Amount = ({
   const [editMode, setEditMode] = useState(false);
   const [countdown, setCountdown] = useState(0);
   const [amount, setAmount] = useState(initialAmount);
-  const [intId, setIntId] = useState<NodeJS.Timer | null>(null);
+  const [intId, setIntId] = useState<number | null>(null);
+
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
 
@@ -64,13 +65,13 @@ export const Amount = ({
     if (editMode) {
       const interval = setInterval(() => {
         if (countdown > 0) {
-          setCountdown(countdown - 1);
+          setCountdown((prev) => prev - 1);
         } else if (countdown === 0) {
-          // Handle save when time is up.
           saveChargedProduct();
         }
       }, 1000);
-      setIntId(interval);
+
+      setIntId(interval as unknown as number); // Cast here
 
       return () => clearInterval(interval);
     }

package/src/components/molecules/calendar-select/calendar-select.component.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
 type CalendarSelectProps = {
-    onPressDate: (date: ToddleDateTime) => void;
-    startDate: ToddleDateTime;
-    onUpdateDate: (date: ToddleDateTime) => void;
+    onPressDate: (date: DateTimeInterface) => void;
+    startDate: DateTimeInterface;
+    onUpdateDate: (date: DateTimeInterface) => void;
     labelForToday?: string | undefined;
 };
 declare const CalendarSelect: ({ onPressDate, startDate, onUpdateDate, labelForToday, }: CalendarSelectProps) => React.JSX.Element;

package/src/components/molecules/calendar-select/calendar-select.component.tsx

@@ -1,18 +1,22 @@
 import * as React from 'react';
 import {useContext, useEffect, useState} from 'react';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './calendar-select.styles';
 import {Pressable, View} from 'react-native';
 import {Paragraph} from '../../atoms/paragraph-components';
 import {Icon} from '../../../icons/index';
 import {useDebounce} from '../../../hooks/use-debounce';
+import {DateTimeInterface, DateTimeOutputFormat} from '../../../utilities/datetime/datetime.class';
+import {SystemClock} from '../../../utilities/datetime/clock.class';
+import {DateOnlyLocaleAwareOutputFormat} from '../../../utilities/datetime/dateonly.class';
+import {Locale} from '../../../utilities/datetime/locale';
 
 type CalendarSelectProps = {
-  onPressDate: (date: ToddleDateTime) => void;
-  startDate: ToddleDateTime;
-  onUpdateDate: (date: ToddleDateTime) => void;
+  onPressDate: (date: DateTimeInterface) => void;
+  startDate: DateTimeInterface;
+  onUpdateDate: (date: DateTimeInterface) => void;
   labelForToday?: string | undefined;
+  locale: Locale;
 };
 
 const CalendarSelect = ({
@@ -20,16 +24,17 @@ const CalendarSelect = ({
   startDate,
   onUpdateDate,
   labelForToday,
+  locale
 }: CalendarSelectProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
 
   const [visibleDate, setVisibleDate] = useState(startDate);
-  const debouncedVisibleDate = useDebounce<ToddleDateTime>(visibleDate, 500);
+  const debouncedVisibleDate = useDebounce<DateTimeInterface>(visibleDate, 500);
 
-  const today = ToddleDateTime.now();
-  const format = 'yyyy-LL-dd';
-  const isToday = today.toFormat(format) == visibleDate.toFormat(format);
+  const clock = new SystemClock();
+  const today = clock.now();
+  const isToday =  today.isSameDay(visibleDate);
 
   useEffect(() => {
     setVisibleDate(startDate);
@@ -46,7 +51,7 @@ const CalendarSelect = ({
     <View style={styles.container}>
       <Pressable
         onPress={() => {
-          setVisibleDate(visibleDate.minus({days: 1}));
+          setVisibleDate(visibleDate.subtract({days: 1}));
         }}
         style={styles.arrowContainer}
       >
@@ -71,18 +76,14 @@ const CalendarSelect = ({
         <Paragraph textColor={context.colors.main['9']} textAlign={'center'}>
           {isToday && labelForToday
             ? labelForToday
-            : visibleDate.toLocaleString({
-                weekday: 'short',
-                day: 'numeric',
-                month: 'short',
-                year: 'numeric',
-              })}
+            : visibleDate.formatLocale(DateOnlyLocaleAwareOutputFormat.DATEONLY_FULL, locale)
+          }
         </Paragraph>
       </Pressable>
 
       <Pressable
         onPress={() => {
-          setVisibleDate(visibleDate.plus({days: 1}));
+          setVisibleDate(visibleDate.add({days: 1}));
         }}
         style={styles.arrowContainer}
       >

package/src/components/molecules/calendar-select/calendar-select.preview.tsx

@@ -1,19 +1,30 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {CalendarSelect} from './calendar-select.component';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {Locale} from '../../../utilities/datetime/locale';
+import {SystemClock} from '../../../utilities/datetime/clock.class';
+import {TimeZone} from '../../../utilities/datetime/timezone.class';
+
+export const CalendarSelectPreview = () => {
+
+  const clock = new SystemClock();
+
+  const startDate = clock.now().inTimezone(TimeZone.from('America/Los_Angeles'));
 
-export const CalendarSelectPreview = ({}: {}) => {
   const [date, setDate] = useState(
-    ToddleDateTime.local({zone: 'America/Los_Angeles'})
+    startDate
   );
-  console.log(date);
+
   return (
     <View style={{alignItems: 'center'}}>
       <CalendarSelect
         onPressDate={() => console.log('open modal')}
         startDate={date}
-        onUpdateDate={setDate}
+        onUpdateDate={(date) => {
+            setDate(date);
+        }}
+        locale={Locale.nl}
+        labelForToday={'Today'}
       />
     </View>
   );

package/src/components/molecules/contact-address/contact-address.component.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+type ContactRoleProps = {
+    name: string;
+    role?: string;
+    tags?: string[];
+};
+export declare const ContactRole: ({ name, role, tags }: ContactRoleProps) => React.JSX.Element;
+export {};

package/src/components/molecules/contact-address/contact-address.component.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {View} from 'react-native';
+import {Stylesheet} from './contact-address.styles';
+import {SmallText} from '../../atoms/paragraph-components';
+
+type ContactAddressProps = {
+  line1: string;
+  line2?: string;
+};
+
+export const ContactAddress = ({line1, line2}: ContactAddressProps) => {
+  const styles = Stylesheet();
+
+  return (
+    <View style={styles.container}>
+      <SmallText textAlign={'center'}>{line1}</SmallText>
+      {line2 && <SmallText textAlign={'center'}>{line2}</SmallText>}
+    </View>
+  );
+};

package/src/components/molecules/contact-address/contact-address.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ContactRolePreview: ({}: {}) => React.JSX.Element;

package/src/components/molecules/contact-address/contact-address.preview.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {ContactAddress} from './contact-address.component';
+const {View} = require('react-native');
+
+export const ContactAddressPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <ContactAddress line1={'Starrenhof 14'} line2={'2950 Kapellen'} />
+    </View>
+  );
+};

package/src/components/molecules/contact-address/contact-address.styles.d.ts

@@ -0,0 +1,7 @@
+
+export function Stylesheet(): {
+    container: {
+        display: "flex";
+        alignItems: "center";
+    };
+};

package/src/components/molecules/contact-address/contact-address.styles.js

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    container: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  });

package/src/components/molecules/date-input/date-input.component.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
 type DateInputProps = {
     onPress: () => void;
-    value: ToddleDateTime;
+    value: DateTimeInterface;
 };
 export declare const DateInput: ({ onPress, value }: DateInputProps) => React.JSX.Element;
 export {};

package/src/components/molecules/date-input/date-input.component.tsx

@@ -3,12 +3,12 @@ import {Pressable, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './date-input.styles';
 import {Icon} from '../../../icons';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 import {Heading4} from '../../atoms/heading-components';
+import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
 
 type DateInputProps = {
   onPress: () => void;
-  value: ToddleDateTime;
+  value: DateTimeInterface;
 };
 
 export const DateInput = ({onPress, value}: DateInputProps) => {
@@ -19,7 +19,7 @@ export const DateInput = ({onPress, value}: DateInputProps) => {
     <Pressable onPress={onPress} style={styles.dateInputContainer}>
       <View>
         <Heading4 textColor={context.colors.ui.grey}>
-          {value.toISODate()}
+          {value.toDateOnlyIso8601()}
         </Heading4>
       </View>
       <Icon

package/src/components/molecules/date-input/date-input.preview.tsx

@@ -1,18 +1,18 @@
 import React, {useState} from 'react';
 import {Text} from 'react-native';
 import {DateInput} from './date-input.component';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 import {Info} from '../info/info.component';
 import {TextInput} from '../../atoms/text-input/text-input.component';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 import {Popover} from '../../templates/popover/popover.component';
 import {Calendar} from '../../atoms/calendar/calendar.component';
-import {Modal} from '../../templates/modal/modal.component';
+import {View} from 'react-native';
+import {SystemClock} from '../../../utilities/datetime/clock.class';
 
-const {View} = require('react-native');
+export const DateInputPreview = () => {
 
-export const DateInputPreview = ({}: {}) => {
-  const [selectedDate, setSelectedDate] = useState(ToddleDateTime.now());
+  const clock = new SystemClock();
+  const [selectedDate, setSelectedDate] = useState(clock.now());
   const [popoverIsVisible, setPopoverIsVisible] = useState(false);
 
   return (