@tactics/toddle-styleguide 1.1.0 → 1.1.2

package/App.tsx

@@ -64,6 +64,7 @@ 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';
 
 const Stack = createNativeStackNavigator();
 
@@ -245,6 +246,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Wave background"
         onPress={() => navigation.push('wave')}
       />
+      <ReactBtn
+        title="Toddle DateTime"
+        onPress={() => navigation.push('toddle-datetime')}
+      />
     </ScrollView>
   );
 };
@@ -402,6 +407,9 @@ function App() {
           <Stack.Screen name="loading-indicator" options={{headerShown: false}}>
             {() => <LoadingIndicatorPreview />}
           </Stack.Screen>
+          <Stack.Screen name="toddle-datetime" options={{headerShown: false}}>
+            {() => <ToddleDateTimePreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/babel.config.js

@@ -2,5 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };

package/jest.config.js

@@ -19,7 +19,8 @@ module.exports = async () => {
         '|native-base' +
         '|@miblanchard/react-native-slider' +
         '|react-native-svg' +
-        '|@tactics/kinderopvang-branding)',
+        '|@tactics/kinderopvang-branding)' +
+        '|react-native-reanimated',
     ],
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -29,9 +29,10 @@
     "@react-navigation/native-stack": "^6.9.1",
     "@react-navigation/stack": "^6.3.3",
     "@tactics/kinderopvang-branding": "1.0.3",
-    "@types/luxon": "^3.1.0",
+    "@testing-library/react-native": "^11.5.3",
+    "@types/luxon": "^3.2.0",
     "@types/xdate": "^0.8.32",
-    "expo": "^48.0.0",
+    "expo": "^48.0.8",
     "expo-font": "~11.1.1",
     "expo-linear-gradient": "~12.1.2",
     "expo-status-bar": "~1.4.4",
@@ -39,7 +40,7 @@
     "jsc-android": "^250230.2.1",
     "lottie-ios": "3.4.1",
     "lottie-react-native": "5.1.4",
-    "luxon": "^3.2.0",
+    "luxon": "^3.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.71.3",
@@ -47,6 +48,7 @@
     "react-native-calendars": "^1.1293.0",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-picker-select": "^8.0.4",
+    "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
@@ -59,7 +61,7 @@
     "@babel/core": "^7.20.0",
     "@babel/preset-typescript": "^7.18.6",
     "@types/jest": "^29.2.1",
-    "@types/luxon": "^3.1.0",
+    "@types/luxon": "^3.2.0",
     "@types/node": "^18.11.7",
     "@types/react": "~18.0.27",
     "@types/react-dom": "~18.0.10",

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -1383,7 +1383,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 10 Maart 2023 "
+            accessibilityLabel=" Vrijdag 10 Maart 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1415,10 +1415,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1438,9 +1434,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -1967,7 +1960,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 17 Maart 2023 "
+            accessibilityLabel="today Vrijdag 17 Maart 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1999,6 +1992,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2018,6 +2015,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4766,8 +4766,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 10 Maart 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Vrijdag 10 Maart 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -4798,10 +4797,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4822,7 +4817,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5362,7 +5357,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 17 Maart 2023 "
+            accessibilityLabel="today Vrijdag 17 Maart 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5393,6 +5389,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5413,7 +5413,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/atoms/footer/footer.component.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
+import { ViewStyle } from 'react-native';
+import { AnimateStyle } from 'react-native-reanimated';
 type FooterProps = {
-    child: React.ReactNode;
+    children: React.ReactNode;
+    animatedStyle?: AnimateStyle<ViewStyle>;
 };
-declare const Footer: ({ child }: FooterProps) => JSX.Element;
+declare const Footer: ({ children, animatedStyle }: FooterProps) => JSX.Element;
 export { Footer as Footer };

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

@@ -1,19 +1,28 @@
 import React from 'react';
 import {useContext} from 'react';
-import {View} from 'react-native';
+import {ViewStyle} from 'react-native';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './footer.styles';
+import Animated, {AnimateStyle} from 'react-native-reanimated';
 
 type FooterProps = {
-  child: React.ReactNode;
+  children: React.ReactNode;
+  animatedStyle?: AnimateStyle<ViewStyle>;
 };
 
-const Footer = ({child}: FooterProps) => {
+const Footer = ({children, animatedStyle}: FooterProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
 
-  return <View style={styles.container}>{child}</View>;
+  return (
+    <Animated.View
+      style={[styles.container, animatedStyle]}
+      testID="footer-container"
+    >
+      {children}
+    </Animated.View>
+  );
 };
 
 export {Footer as Footer};

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

@@ -6,23 +6,21 @@ import {Button} from '../../molecules/button/button.component';
 
 export const FooterPreview = ({}: {}) => {
   return (
-    <Footer
-      child={
-        <SplitContainer
-          element1={
-            <SelectLink
-              label={'Selecteer alle'}
-              onPress={() => console.log('selecteer alle')}
-            />
-          }
-          element2={
-            <Button
-              label="Kies actie"
-              onPress={() => console.log('element 2 pressed')}
-            />
-          }
-        />
-      }
-    />
+    <Footer>
+      <SplitContainer
+        element1={
+          <SelectLink
+            label={'Selecteer alle'}
+            onPress={() => console.log('selecteer alle')}
+          />
+        }
+        element2={
+          <Button
+            label="Kies actie"
+            onPress={() => console.log('element 2 pressed')}
+          />
+        }
+      />
+    </Footer>
   );
 };

package/src/components/atoms/heading-components/all-caps-heading/__snapshots__/all-caps-heading.test.js.snap

@@ -11,8 +11,8 @@ exports[`Test for the all caps heading component should render an all caps headi
         },
         {
           "fontFamily": "MontserratBold",
-          "fontSize": 14,
-          "lineHeight": 22.4,
+          "fontSize": 13,
+          "lineHeight": 20.4,
         },
       ],
       {
@@ -39,8 +39,8 @@ exports[`Test for the all caps heading component should render an all caps headi
         },
         {
           "fontFamily": "MontserratBold",
-          "fontSize": 14,
-          "lineHeight": 22.4,
+          "fontSize": 13,
+          "lineHeight": 20.4,
         },
       ],
       {
@@ -67,8 +67,8 @@ exports[`Test for the all caps heading component should render an all caps headi
         },
         {
           "fontFamily": "Montserrat",
-          "fontSize": 14,
-          "lineHeight": 22.4,
+          "fontSize": 13,
+          "lineHeight": 20.4,
         },
       ],
       {
@@ -95,8 +95,8 @@ exports[`Test for the all caps heading component should render an all caps headi
         },
         {
           "fontFamily": "Montserrat",
-          "fontSize": 14,
-          "lineHeight": 22.4,
+          "fontSize": 13,
+          "lineHeight": 20.4,
         },
       ],
       {

package/src/components/atoms/heading-components/heading.styles.js

@@ -54,10 +54,10 @@ export const Stylesheet = (Context, bold, textColor, textAlign) =>
       },
       !bold
         ? {
-            ...Font.regular,
+            ...Font.small,
           }
         : {
-            ...Font.regularBold,
+            ...Font.smallBold,
           },
     ],
   });

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext, useState} 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';
@@ -25,6 +25,10 @@ const CalendarSelect = ({
 
   const [visibleDate, setVisibleDate] = useState(startDate);
 
+  useEffect(() => {
+    setVisibleDate(startDate);
+  }, [startDate]);
+
   const onPressRight = () => {
     setVisibleDate(visibleDate.plus({days: 1}));
   };

package/src/components/molecules/filter-tab/__snapshots__/filter-tab.test.js.snap

@@ -96,8 +96,6 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
               {
                 "maxHeight": 32,
                 "overflow": "hidden",
-                "textOverflow": "ellipsis",
-                "whiteSpace": "nowrap",
                 "width": "100%",
               },
             ]
@@ -167,8 +165,6 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
               {
                 "maxHeight": 32,
                 "overflow": "hidden",
-                "textOverflow": "ellipsis",
-                "whiteSpace": "nowrap",
                 "width": "100%",
               },
             ]
@@ -220,8 +216,6 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
                 {
                   "maxHeight": 32,
                   "overflow": "hidden",
-                  "textOverflow": "ellipsis",
-                  "whiteSpace": "nowrap",
                   "width": "100%",
                 },
                 {
@@ -335,8 +329,6 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
               {
                 "maxHeight": 32,
                 "overflow": "hidden",
-                "textOverflow": "ellipsis",
-                "whiteSpace": "nowrap",
                 "width": "100%",
               },
             ]
@@ -406,8 +398,6 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
               {
                 "maxHeight": 32,
                 "overflow": "hidden",
-                "textOverflow": "ellipsis",
-                "whiteSpace": "nowrap",
                 "width": "100%",
               },
             ]
@@ -477,8 +467,6 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
               {
                 "maxHeight": 32,
                 "overflow": "hidden",
-                "textOverflow": "ellipsis",
-                "whiteSpace": "nowrap",
                 "width": "100%",
               },
             ]
@@ -530,8 +518,6 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
                 {
                   "maxHeight": 32,
                   "overflow": "hidden",
-                  "textOverflow": "ellipsis",
-                  "whiteSpace": "nowrap",
                   "width": "100%",
                 },
                 {

package/src/components/molecules/filter-tab/filter-tab.styles.js

@@ -54,7 +54,5 @@ export const Stylesheet = (Context, inRow, ElementWidth, ItemWidth) =>
       width: '100%',
       maxHeight: 32,
       overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
     },
   });

package/src/utilities/toddle-datetime/interfaces/toddle-datetime.interface.d.ts

@@ -1,7 +1,10 @@
 export interface LocaleOptions {
+    /**
+     *  @default system's locale
+     */
     locale?: string | undefined;
 }
-export interface DateTimeOptions {
+export interface DateTimeOptions extends LocaleOptions {
     /**
      * Use this zone if no offset is specified in the input string itself. Will also convert the time to this zone.
      * @default local

package/src/utilities/toddle-datetime/interfaces/toddle-datetime.interface.tsx

@@ -1,8 +1,11 @@
 export interface LocaleOptions {
+  /**
+   *  @default system's locale
+   */
   locale?: string | undefined;
 }
 
-export interface DateTimeOptions {
+export interface DateTimeOptions extends LocaleOptions {
   /**
    * Use this zone if no offset is specified in the input string itself. Will also convert the time to this zone.
    * @default local

package/src/utilities/toddle-datetime/toddle-datetime.class.d.ts

@@ -1,10 +1,25 @@
 import { LocaleOptions, DateTimeOptions } from './interfaces/toddle-datetime.interface';
 import { DurationLike } from './types/duration-like.type';
-import { DateTimeFormatOptions, DateTimeUnit } from './types/toddle-datetime.type';
+import { DateTimeFormatOptions, DateTimeJSOptions, DateTimeUnit } from './types/toddle-datetime.type';
 export declare class ToddleDateTime {
     private dateTime;
     private constructor();
+    /**
+     * Create a ToddleDateTime for the current instant, in the system's time zone.
+     *
+     * Use Settings to override these default values if needed.
+     * @example
+     * ToddleDateTime.now().toISO() //~> now in the ISO format
+     */
     static now(): ToddleDateTime;
+    static local(opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, hour: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, hour: number, minute: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, hour: number, minute: number, second: number, opts?: DateTimeJSOptions): ToddleDateTime;
+    static local(year: number, month: number, day: number, hour: number, minute: number, second: number, milliseconds: number, opts?: DateTimeJSOptions): ToddleDateTime;
     static fromISO(date: string, options?: DateTimeOptions): ToddleDateTime;
     static get DATE_MED(): DateTimeFormatOptions;
     get day(): number;
@@ -12,8 +27,11 @@ export declare class ToddleDateTime {
     plus(duration: DurationLike): ToddleDateTime;
     minus(duration: DurationLike): ToddleDateTime;
     startOf(unit: DateTimeUnit): ToddleDateTime;
+    endOf(unit: DateTimeUnit): ToddleDateTime;
     toFormat(format: string, options?: LocaleOptions): string;
+    toISO(): string;
     toISODate(): string;
     toString(): string;
     toLocaleString(formatOptions?: DateTimeFormatOptions, options?: LocaleOptions): string;
+    timestamp(): number;
 }

package/src/utilities/toddle-datetime/toddle-datetime.class.tsx

@@ -8,6 +8,7 @@ import {
 import {DurationLike} from './types/duration-like.type';
 import {
   DateTimeFormatOptions,
+  DateTimeJSOptions,
   DateTimeUnit,
 } from './types/toddle-datetime.type';
 
@@ -19,11 +20,69 @@ export class ToddleDateTime {
   }
 
   // STATIC MEMBERS
-
+  /**
+   * Create a ToddleDateTime for the current instant, in the system's time zone.
+   *
+   * Use Settings to override these default values if needed.
+   * @example
+   * ToddleDateTime.now().toISO() //~> now in the ISO format
+   */
   static now(): ToddleDateTime {
     return new ToddleDateTime(LuxonDateTime.local());
   }
 
+  static local(opts?: DateTimeJSOptions): ToddleDateTime;
+  static local(year: number, opts?: DateTimeJSOptions): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    hour: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    hour: number,
+    minute: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    hour: number,
+    minute: number,
+    second: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(
+    year: number,
+    month: number,
+    day: number,
+    hour: number,
+    minute: number,
+    second: number,
+    milliseconds: number,
+    opts?: DateTimeJSOptions
+  ): ToddleDateTime;
+  static local(...args: any[]): ToddleDateTime {
+    const dateTime = LuxonDateTime.local(...args);
+    return new ToddleDateTime(dateTime);
+  }
+
   static fromISO(date: string, options?: DateTimeOptions): ToddleDateTime {
     return new ToddleDateTime(LuxonDateTime.fromISO(date, options));
   }
@@ -59,12 +118,21 @@ export class ToddleDateTime {
     return this;
   }
 
+  endOf(unit: DateTimeUnit): ToddleDateTime {
+    this.dateTime = this.dateTime.endOf(unit);
+    return this;
+  }
+
   // OUTPUT
 
   toFormat(format: string, options?: LocaleOptions): string {
     return this.dateTime.toFormat(format, options);
   }
 
+  toISO(): string {
+    return this.dateTime.toISO();
+  }
+
   toISODate(): string {
     return this.dateTime.toISODate();
   }
@@ -79,4 +147,8 @@ export class ToddleDateTime {
   ): string {
     return this.dateTime.toLocaleString(formatOptions, options);
   }
+
+  timestamp(): number {
+    return this.dateTime.toUnixInteger();
+  }
 }

package/src/utilities/toddle-datetime/toddle-datetime.preview.d.ts

@@ -0,0 +1 @@
+export declare const ToddleDateTimePreview: ({}: {}) => JSX.Element;

package/src/utilities/toddle-datetime/toddle-datetime.preview.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {ToddleDateTime} from './toddle-datetime.class';
+import {View, ScrollView} from 'react-native';
+import {Paragraph} from '../../components/atoms/paragraph-components';
+import {Heading2, Heading4} from '../../components/atoms/heading-components';
+
+export const ToddleDateTimePreview = ({}: {}) => {
+  const now = ToddleDateTime.now();
+  const fromISO = ToddleDateTime.fromISO('2016-05-25T09:08:34.123');
+  const fromISO2 = ToddleDateTime.fromISO('2022-03-14');
+  return (
+    <View
+      style={{
+        marginTop: 50,
+        alignContent: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Heading2 bold={true} textAlign={'center'} addStyle={{marginBottom: 50}}>
+        ToddleDateTime
+      </Heading2>
+      <ScrollView contentContainerStyle={{padding: 16}}>
+        <Heading4 bold={true}>.now()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>{now.toString()}</Paragraph>
+
+        <Heading4 bold={true}>
+          .fromISO(date: string, options?: DateTimeOptions)
+        </Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          From ISO
+          {'\n'}
+          {fromISO.toString()}
+          {'\n'}
+          {'\n'}
+          Date time in a zone with the fromISO method
+          {'\n'}
+          Europe/Brussels
+          {'\n'}
+          {ToddleDateTime.fromISO(fromISO.toString(), {
+            zone: 'Europe/Brussels',
+          }).toString()}
+          {'\n'}
+          {'\n'}
+          America/Los_Angeles
+          {'\n'}
+          {ToddleDateTime.fromISO(fromISO.toString(), {
+            zone: 'America/Los_Angeles',
+          }).toString()}
+        </Paragraph>
+
+        <Heading4 bold={true}>.local()</Heading4>
+        <Paragraph bold={true}>Create a local DateTime{'\n'}</Paragraph>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          local now
+          {'\n'}
+          {ToddleDateTime.local().toISO()}
+          {'\n'}
+          {'\n'}
+          local now in US east coast time
+          {'\n'}
+          {ToddleDateTime.local({zone: 'America/New_York'}).toISO()}
+          {'\n'}
+          {'\n'}
+          year
+          {'\n'}
+          {ToddleDateTime.local(1989).toISO()}
+          {'\n'}
+          {'\n'}
+          year and month
+          {'\n'}
+          {ToddleDateTime.local(1989, 8).toISO()}
+          {'\n'}
+          {'\n'}
+          year, month and day with a French locale
+          {'\n'}
+          {ToddleDateTime.local(1989, 8, 9, {locale: 'fr'}).toISO()}
+          {'\n'}
+          {'\n'}
+          year, month, day and hour
+          {'\n'}
+          {ToddleDateTime.local(1989, 8, 9, 23).toISO()}
+          {'\n'}
+          {'\n'}
+          year, month, day and hour in UTC
+          {'\n'}
+          {ToddleDateTime.local(1989, 8, 9, 23, {zone: 'utc'}).toISO()}
+          {'\n'}
+          {'\n'}
+          year, month, day, hour and minutes
+          {'\n'}
+          {ToddleDateTime.local(1989, 8, 9, 23, 45).toISO()}
+          {'\n'}
+          {'\n'}
+          year, month, day, hour, minutes and seconds
+          {'\n'}
+          {ToddleDateTime.local(1989, 8, 9, 23, 45, 10).toISO()}
+          {'\n'}
+          {'\n'}
+          year, month, day, hour, minutes, seconds and milliseconds
+          {'\n'}
+          {ToddleDateTime.local(1989, 8, 9, 23, 45, 10, 782).toISO()}
+          {'\n'}
+          {'\n'}
+        </Paragraph>
+
+        <Heading4 bold={true}>.timestamp()</Heading4>
+        <Paragraph>
+          Returns the epoch milliseconds of this ToddleDateTime.
+        </Paragraph>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          {fromISO.timestamp()}
+        </Paragraph>
+      </ScrollView>
+    </View>
+  );
+};

package/src/utilities/toddle-datetime/toddle-datetime.test.js

@@ -71,6 +71,11 @@ describe('ToddleDateTime TRANSFORM methods', () => {
     dateTime.startOf('month');
     expect(dateTime.day).toEqual(1);
   });
+
+  it('endOf() changes the date time to the end of a unit', () => {
+    dateTime.endOf('year');
+    expect(dateTime.day).toEqual(31);
+  });
 });
 
 describe('ToddleDateTime OUTPUT methods', () => {
@@ -85,6 +90,11 @@ describe('ToddleDateTime OUTPUT methods', () => {
     expect(formattedDate).toMatch(dateTime.toFormat('yyyy-MM-dd'));
   });
 
+  it('toISO() formats the date time in ISO format', () => {
+    const formattedDate = dateTime.toISO();
+    expect(formattedDate).toMatch(dateTime.toISO());
+  });
+
   it('toISODate() formats the date time in ISO date format', () => {
     const formattedDate = dateTime.toISODate();
     expect(formattedDate).toMatch(dateTime.toISODate());
@@ -99,4 +109,9 @@ describe('ToddleDateTime OUTPUT methods', () => {
     const localeString = dateTime.toLocaleString();
     expect(localeString).toMatch(dateTime.toLocaleString());
   });
+
+  it('timestamp formats the time to a number', () => {
+    const timestamp = dateTime.timestamp();
+    expect(timestamp).toEqual(dateTime.timestamp());
+  });
 });

package/src/utilities/toddle-datetime/types/toddle-datetime.type.d.ts

@@ -1,2 +1,4 @@
+import { DateTimeOptions } from '../interfaces/toddle-datetime.interface';
 export type DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 export type DateTimeUnit = 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+export type DateTimeJSOptions = Omit<DateTimeOptions, 'setZone'>;

package/src/utilities/toddle-datetime/types/toddle-datetime.type.tsx

@@ -1,3 +1,5 @@
+import {DateTimeOptions} from '../interfaces/toddle-datetime.interface';
+
 export type DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 
 export type DateTimeUnit =
@@ -10,3 +12,5 @@ export type DateTimeUnit =
   | 'minute'
   | 'second'
   | 'millisecond';
+
+export type DateTimeJSOptions = Omit<DateTimeOptions, 'setZone'>;

package/src/components/atoms/footer/__snapshots__/footer.test.js.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test footer renders footer correctly 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "backgroundColor": "#F5F7FA",
-      "borderTopColor": "#E5E8EB",
-      "borderTopStyle": "solid",
-      "borderTopWidth": 1,
-      "bottom": 0,
-      "flexDirection": "row",
-      "height": 64,
-      "justifyContent": "center",
-      "position": "absolute",
-      "width": "100%",
-    }
-  }
->
-  <RNSVGSvgView
-    align="xMidYMid"
-    bbHeight="24"
-    bbWidth="24"
-    fill="none"
-    focusable={false}
-    height={24}
-    meetOrSlice={0}
-    minX={0}
-    minY={0}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "borderWidth": 0,
-        },
-        {
-          "flex": 0,
-          "height": 24,
-          "width": 24,
-        },
-      ]
-    }
-    vbHeight={21}
-    vbWidth={20}
-    width={24}
-  >
-    <RNSVGGroup
-      fill={null}
-      propList={
-        [
-          "fill",
-        ]
-      }
-    >
-      <RNSVGPath
-        d="M11 1.5C11 0.947715 10.5523 0.5 9.99998 0.5C9.44769 0.5 8.99998 0.947715 8.99998 1.5H11ZM8.99998 2.625C8.99998 3.17728 9.44769 3.625 9.99998 3.625C10.5523 3.625 11 3.17728 11 2.625H8.99998ZM16.5 14C15.9477 14 15.5 14.4477 15.5 15C15.5 15.5523 15.9477 16 16.5 16V14ZM18.6666 16C19.2189 16 19.6666 15.5523 19.6666 15C19.6666 14.4477 19.2189 14 18.6666 14V16ZM9.99998 15V14C9.44769 14 8.99998 14.4477 8.99998 15H9.99998ZM12.1666 16C12.7189 16 13.1666 15.5523 13.1666 15C13.1666 14.4477 12.7189 14 12.1666 14V16ZM8.99998 19.5C8.99998 20.0523 9.44769 20.5 9.99998 20.5C10.5523 20.5 11 20.0523 11 19.5H8.99998ZM11 7.125C11 6.57272 10.5523 6.125 9.99998 6.125C9.44769 6.125 8.99998 6.57272 8.99998 7.125H11ZM9.99998 10.5H8.99998C8.99998 11.0523 9.44769 11.5 9.99998 11.5V10.5ZM14.3333 18.5C13.781 18.5 13.3333 18.9477 13.3333 19.5C13.3333 20.0523 13.781 20.5 14.3333 20.5V18.5ZM18.6666 20.5C19.2189 20.5 19.6666 20.0523 19.6666 19.5C19.6666 18.9477 19.2189 18.5 18.6666 18.5V20.5ZM1.33331 9.5C0.781028 9.5 0.333313 9.94771 0.333313 10.5C0.333313 11.0523 0.781028 11.5 1.33331 11.5V9.5ZM5.66665 11.5C6.21893 11.5 6.66665 11.0523 6.66665 10.5C6.66665 9.94771 6.21893 9.5 5.66665 9.5V11.5ZM10.0108 11.5C10.5631 11.5 11.0108 11.0523 11.0108 10.5C11.0108 9.94771 10.5631 9.5 10.0108 9.5V11.5ZM14.3441 11.5C14.8964 11.5 15.3441 11.0523 15.3441 10.5C15.3441 9.94771 14.8964 9.5 14.3441 9.5V11.5ZM18.6666 9.5C18.1144 9.5 17.6666 9.94771 17.6666 10.5C17.6666 11.0523 18.1144 11.5 18.6666 11.5V9.5ZM18.6775 11.5C19.2298 11.5 19.6775 11.0523 19.6775 10.5C19.6775 9.94771 19.2298 9.5 18.6775 9.5V11.5ZM2.41665 2.5H4.58331V0.5H2.41665V2.5ZM4.66665 2.625V4.875H6.66665V2.625H4.66665ZM4.58331 5H2.41665V7H4.58331V5ZM2.33331 4.875V2.625H0.333313V4.875H2.33331ZM2.41665 5C2.40602 5 2.39043 4.9971 2.37093 4.97685C2.3508 4.95595 2.33331 4.92194 2.33331 4.875H0.333313C0.333313 6.0127 1.23082 7 2.41665 7V5ZM4.66665 4.875C4.66665 4.92194 4.64916 4.95595 4.62902 4.97685C4.60953 4.9971 4.59394 5 4.58331 5V7C5.76914 7 6.66665 6.0127 6.66665 4.875H4.66665ZM4.58331 2.5C4.59394 2.5 4.60953 2.5029 4.62902 2.52315C4.64916 2.54405 4.66665 2.57806 4.66665 2.625H6.66665C6.66665 1.4873 5.76914 0.5 4.58331 0.5V2.5ZM2.41665 0.5C1.23082 0.5 0.333313 1.4873 0.333313 2.625H2.33331C2.33331 2.57806 2.3508 2.54405 2.37093 2.52315C2.39043 2.5029 2.40602 2.5 2.41665 2.5V0.5ZM15.4166 2.5H17.5833V0.5H15.4166V2.5ZM17.6666 2.625V4.875H19.6666V2.625H17.6666ZM17.5833 5H15.4166V7H17.5833V5ZM15.3333 4.875V2.625H13.3333V4.875H15.3333ZM15.4166 5C15.406 5 15.3904 4.9971 15.3709 4.97685C15.3508 4.95595 15.3333 4.92194 15.3333 4.875H13.3333C13.3333 6.0127 14.2308 7 15.4166 7V5ZM17.6666 4.875C17.6666 4.92194 17.6492 4.95595 17.629 4.97685C17.6095 4.9971 17.5939 5 17.5833 5V7C18.7691 7 19.6666 6.0127 19.6666 4.875H17.6666ZM17.5833 2.5C17.5939 2.5 17.6095 2.5029 17.629 2.52315C17.6492 2.54405 17.6666 2.57806 17.6666 2.625H19.6666C19.6666 1.4873 18.7691 0.5 17.5833 0.5V2.5ZM15.4166 0.5C14.2308 0.5 13.3333 1.4873 13.3333 2.625H15.3333C15.3333 2.57806 15.3508 2.54405 15.3709 2.52315C15.3904 2.5029 15.406 2.5 15.4166 2.5V0.5ZM2.41665 16H4.58331V14H2.41665V16ZM4.66665 16.125V18.375H6.66665V16.125H4.66665ZM4.58331 18.5H2.41665V20.5H4.58331V18.5ZM2.33331 18.375V16.125H0.333313V18.375H2.33331ZM2.41665 18.5C2.40602 18.5 2.39043 18.4971 2.37093 18.4769C2.3508 18.4559 2.33331 18.4219 2.33331 18.375H0.333313C0.333313 19.5127 1.23082 20.5 2.41665 20.5V18.5ZM4.66665 18.375C4.66665 18.4219 4.64916 18.4559 4.62902 18.4769C4.60953 18.4971 4.59394 18.5 4.58331 18.5V20.5C5.76914 20.5 6.66665 19.5127 6.66665 18.375H4.66665ZM4.58331 16C4.59394 16 4.60953 16.0029 4.62902 16.0231C4.64916 16.0441 4.66665 16.0781 4.66665 16.125H6.66665C6.66665 14.9873 5.76914 14 4.58331 14V16ZM2.41665 14C1.23082 14 0.333313 14.9873 0.333313 16.125H2.33331C2.33331 16.0781 2.3508 16.0441 2.37093 16.0231C2.39043 16.0029 2.40602 16 2.41665 16V14ZM8.99998 1.5V2.625H11V1.5H8.99998ZM16.5 16H18.6666V14H16.5V16ZM9.99998 16H12.1666V14H9.99998V16ZM8.99998 15V19.5H11V15H8.99998ZM8.99998 7.125V10.5H11V7.125H8.99998ZM14.3333 20.5H18.6666V18.5H14.3333V20.5ZM1.33331 11.5H5.66665V9.5H1.33331V11.5ZM9.99998 11.5H10.0108V9.5H9.99998V11.5ZM18.6666 11.5H18.6775V9.5H18.6666V11.5ZM9.99998 11.5H14.3441V9.5H9.99998V11.5Z"
-        fill={
-          {
-            "payload": 4283522924,
-            "type": 0,
-          }
-        }
-        propList={
-          [
-            "fill",
-          ]
-        }
-      />
-    </RNSVGGroup>
-  </RNSVGSvgView>
-</View>
-`;

package/src/components/atoms/footer/footer.test.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {Footer} from './footer.component';
-import {QrcodeIcon} from '../../../icons/outline/qrcode/qrcode.icon';
-
-describe('test footer', () => {
-  it('renders footer correctly', () => {
-    const tree = renderer
-      .create(<Footer child={<QrcodeIcon color={'#515F6C'} />} />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});