@tactics/toddle-styleguide 1.2.7 → 1.2.9

package/src/components/templates/modal/components/fade-panel.component.tsx

@@ -36,7 +36,7 @@ export const FadePanel = ({
     } else if (!isVisible) {
       Animated.timing(fadeAnimation, {
         toValue: 0,
-        duration: 600,
+        duration: 100,
         useNativeDriver: true,
       }).start();
     }

package/src/components/templates/popover/components/modal/modal.component.d.ts

@@ -6,6 +6,7 @@ type PopoverModalProps = {
     isVisible: boolean;
     children: React.ReactNode;
     windowHeight: number;
+    disableSrollContent?: boolean;
 };
-declare const Modal: ({ isVisible, title, subtitle, onClose, children, windowHeight, }: PopoverModalProps) => JSX.Element;
+declare const Modal: ({ isVisible, title, subtitle, onClose, children, windowHeight, disableSrollContent, }: PopoverModalProps) => JSX.Element;
 export { Modal as Modal };

package/src/components/templates/popover/components/modal/modal.component.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
-import {Animated} from 'react-native';
+import {Animated, View} from 'react-native';
 import {Stylesheet} from './modal.styles';
 import {Close} from './close/close.component';
 import {Heading} from './heading/heading.component';
@@ -14,6 +14,7 @@ type PopoverModalProps = {
   isVisible: boolean;
   children: React.ReactNode;
   windowHeight: number;
+  disableSrollContent?: boolean;
 };
 
 const Modal = ({
@@ -23,6 +24,7 @@ const Modal = ({
   onClose,
   children,
   windowHeight,
+  disableSrollContent,
 }: PopoverModalProps) => {
   // Keep element and window size in local state.
   const [elementSize, setElementSize] = useState({width: 0, height: 0});
@@ -78,7 +80,11 @@ const Modal = ({
       <Close onPress={onClose} />
       <Animated.View style={styles.inner}>
         {title ? <Heading title={title} subtitle={subtitle} /> : null}
-        <ScrollContent>{children}</ScrollContent>
+        {disableSrollContent ? (
+          <View>{children}</View>
+        ) : (
+          <ScrollContent>{children}</ScrollContent>
+        )}
       </Animated.View>
     </Animated.View>
   );

package/src/components/templates/popover/popover.component.d.ts

@@ -5,6 +5,7 @@ type PopoverProps = {
     subtitle?: string;
     isVisible: boolean;
     children?: React.ReactNode;
+    disableScrollContent?: boolean;
 };
-declare const Popover: ({ isVisible, title, subtitle, onClose, children, }: PopoverProps) => JSX.Element;
+declare const Popover: ({ isVisible, title, subtitle, onClose, children, disableScrollContent, }: PopoverProps) => JSX.Element;
 export { Popover as Popover };

package/src/components/templates/popover/popover.component.tsx

@@ -11,6 +11,7 @@ type PopoverProps = {
   subtitle?: string;
   isVisible: boolean;
   children?: React.ReactNode;
+  disableScrollContent?: boolean;
 };
 
 const Popover = ({
@@ -19,6 +20,7 @@ const Popover = ({
   subtitle,
   onClose,
   children,
+  disableScrollContent,
 }: PopoverProps) => {
   const [windowHeight, setWindowHeight] = useState(
     Dimensions.get('window').height
@@ -55,6 +57,7 @@ const Popover = ({
           onClose={onClose}
           title={title}
           subtitle={subtitle}
+          disableSrollContent={disableScrollContent}
         >
           {children}
         </Modal>

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

@@ -1,3 +1,4 @@
+import { ConversionAccuracy } from '../types/toddle-datetime.type';
 export interface LocaleOptions {
     /**
      *  @default system's locale
@@ -16,3 +17,6 @@ export interface DateTimeOptions extends LocaleOptions {
      */
     setZone?: boolean | undefined;
 }
+export interface DiffOptions {
+    conversionAccuracy?: ConversionAccuracy | undefined;
+}

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

@@ -1,3 +1,5 @@
+import {ConversionAccuracy} from '../types/toddle-datetime.type';
+
 export interface LocaleOptions {
   /**
    *  @default system's locale
@@ -17,3 +19,7 @@ export interface DateTimeOptions extends LocaleOptions {
    */
   setZone?: boolean | undefined;
 }
+
+export interface DiffOptions {
+  conversionAccuracy?: ConversionAccuracy | undefined;
+}

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

@@ -1,6 +1,13 @@
-import { LocaleOptions, DateTimeOptions } from './interfaces/toddle-datetime.interface';
-import { DurationLike } from './types/duration-like.type';
+import { Duration as LuxonDuration } from 'luxon';
+import { LocaleOptions, DateTimeOptions, DiffOptions } from './interfaces/toddle-datetime.interface';
+import { DurationLike, DurationUnits } from './types/duration.type';
 import { DateTimeFormatOptions, DateTimeJSOptions, DateTimeUnit } from './types/toddle-datetime.type';
+import { DurationObjectUnits } from './interfaces/duration.interface';
+export declare class Duration {
+    private duration;
+    constructor(duration: LuxonDuration);
+    toObject(): DurationObjectUnits;
+}
 export declare class ToddleDateTime {
     private dateTime;
     private constructor();
@@ -39,4 +46,5 @@ export declare class ToddleDateTime {
     toString(): string;
     toLocaleString(formatOptions?: DateTimeFormatOptions, options?: LocaleOptions): string;
     timestamp(): number;
+    diff(otherDateTime: ToddleDateTime, unit?: DurationUnits, options?: DiffOptions): Duration;
 }

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

@@ -1,16 +1,30 @@
-import {DateTime as LuxonDateTime} from 'luxon';
+import {DateTime as LuxonDateTime, Duration as LuxonDuration} from 'luxon';
 
 import {
   LocaleOptions,
   DateTimeOptions,
+  DiffOptions,
 } from './interfaces/toddle-datetime.interface';
 
-import {DurationLike} from './types/duration-like.type';
+import {DurationLike, DurationUnits} from './types/duration.type';
 import {
   DateTimeFormatOptions,
   DateTimeJSOptions,
   DateTimeUnit,
 } from './types/toddle-datetime.type';
+import {DurationObjectUnits} from './interfaces/duration.interface';
+
+export class Duration {
+  private duration: LuxonDuration;
+
+  constructor(duration: LuxonDuration) {
+    this.duration = duration;
+  }
+
+  toObject(): DurationObjectUnits {
+    return this.duration.toObject();
+  }
+}
 
 export class ToddleDateTime {
   private dateTime: LuxonDateTime;
@@ -174,4 +188,19 @@ export class ToddleDateTime {
   timestamp(): number {
     return this.dateTime.toUnixInteger();
   }
+
+  // COMPARE
+
+  diff(
+    otherDateTime: ToddleDateTime,
+    unit?: DurationUnits,
+    options?: DiffOptions
+  ): Duration {
+    const luxonDuration = this.dateTime.diff(
+      otherDateTime.dateTime,
+      unit,
+      options
+    );
+    return new Duration(luxonDuration);
+  }
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {ToddleDateTime} from './toddle-datetime.class';
-import {View, ScrollView} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {Paragraph} from '../../components/atoms/paragraph-components';
 import {Heading2, Heading4} from '../../components/atoms/heading-components';
 
@@ -12,97 +12,36 @@ export const ToddleDateTimePreview = ({}: {}) => {
   return (
     <View
       style={{
-        marginTop: 50,
+        marginTop: 24,
         alignContent: 'center',
         justifyContent: 'center',
-        paddingBottom: 50,
+        paddingBottom: 100,
       }}
     >
       <Heading2 bold={true} textAlign={'center'} addStyle={{marginBottom: 50}}>
         ToddleDateTime
       </Heading2>
+      <Heading4 addStyle={{paddingHorizontal: 16, marginBottom: 24}}>
+        ToddleDateTime is a wrapper around Luxon, and provides less
+        functionality. This can and or will expand through time. You can find
+        the implemented methods below:
+      </Heading4>
       <ScrollView contentContainerStyle={{padding: 16}}>
         <Heading4 bold={true}>.now()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>{now.toString()}</Paragraph>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Create a DateTime for the current instant, in the system's time zone.
+        </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()}
+          Create a ToddleDateTime from an ISO 8601 string
         </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 addStyle={{marginBottom: 12}}>
+          Create a local ToddleDateTime
         </Paragraph>
 
         <Heading4 bold={true}>.timestamp()</Heading4>
@@ -114,15 +53,106 @@ export const ToddleDateTimePreview = ({}: {}) => {
         </Paragraph>
 
         <Heading4 bold={true}>.fromSeconds(seconds, options?)</Heading4>
-        <Paragraph>Returns a ToddleDateTime from a timestamp.</Paragraph>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          {ToddleDateTime.fromSeconds(timestamp).toLocaleString({
-            day: 'numeric',
-            month: 'short',
-            hourCycle: 'h24',
-            hour: 'numeric',
-            minute: '2-digit',
-          })}
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Create a ToddleDateTime from a number of seconds since the epoch
+          (meaning since 1 January 1970 00:00:00 UTC). Uses the default zone.
+        </Paragraph>
+
+        <Heading4 bold={true}>.DATE_MED()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          ToddleDateTime.toLocaleString format like 'Oct 14, 1983'
+        </Paragraph>
+
+        <Heading4 bold={true}>.hour()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the hour of the day (0-23)
+        </Paragraph>
+
+        <Heading4 bold={true}>.minute()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the minute of the hour (0-59).
+        </Paragraph>
+
+        <Heading4 bold={true}>.second()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the second of the minute (0-59).
+        </Paragraph>
+
+        <Heading4 bold={true}>.millisecond()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the millisecond of the second (0-999).
+        </Paragraph>
+
+        <Heading4 bold={true}>.day()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the day of the month (1-30ish).
+        </Paragraph>
+
+        <Heading4 bold={true}>.weekdayShort()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Get the human readable short weekday, such as 'Mon'. Defaults to the
+          system's locale if no locale has been specified
+        </Paragraph>
+
+        <Heading4 bold={true}>.plus(duration)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          {`Adding hours, minutes, seconds, or milliseconds increases the timestamp by the right number of milliseconds. Adding days, months, or years shifts the calendar, accounting for DSTs and leap years along the way. Thus, dt.plus({ hours: 24 }) may result in a different time than dt.plus({ days: 1 }) if there's a DST shift in between.`}
+        </Paragraph>
+
+        <Heading4 bold={true}>.minus(duration)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          See ToddleDateTime plus()
+        </Paragraph>
+
+        <Heading4 bold={true}>.startOf(unit)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          "Set" this ToddleDateTime to the beginning of the given unit.
+        </Paragraph>
+
+        <Heading4 bold={true}>.endOf(unit)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          "Set" this ToddleDateTime to the end (meaning the last millisecond) of
+          a unit of time
+        </Paragraph>
+
+        <Heading4 bold={true}>.toFormat(format, options?)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns a string representation of this ToddleDateTime formatted
+          according to the specified format string.
+        </Paragraph>
+
+        <Heading4 bold={true}>.toISO()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns an ISO 8601-compliant string representation of this
+          ToddleDateTime
+        </Paragraph>
+
+        <Heading4 bold={true}>.toISODate()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns an ISO 8601-compliant string representation of this
+          ToddleDateTime's date component
+        </Paragraph>
+
+        <Heading4 bold={true}>.toString()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns a string representation of this DateTime appropriate for
+          debugging
+        </Paragraph>
+
+        <Heading4 bold={true}>
+          .toLocaleString(formatOptions?, options?)
+        </Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns a localized string representing this date.
+        </Paragraph>
+
+        <Heading4 bold={true}>.timestamp()</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Returns the epoch seconds (as a whole number) of this ToddleDateTime.{' '}
+        </Paragraph>
+        <Heading4 bold={true}>.diff(otherDateTime, unit?, options?)</Heading4>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          Return the difference between two ToddleDateTimes as a Duration.
         </Paragraph>
       </ScrollView>
     </View>

package/src/utilities/toddle-datetime/types/{duration-like.type.d.ts → duration.type.d.ts}

@@ -1,2 +1,4 @@
 import { DurationLikeObject } from '../interfaces/duration.interface';
+export type DurationUnit = keyof DurationLikeObject;
+export type DurationUnits = DurationUnit | DurationUnit[];
 export type DurationLike = DurationLikeObject | number;

package/src/utilities/toddle-datetime/types/{duration-like.type.tsx → duration.type.tsx}

@@ -1,3 +1,6 @@
 import {DurationLikeObject} from '../interfaces/duration.interface';
 
+export type DurationUnit = keyof DurationLikeObject;
+export type DurationUnits = DurationUnit | DurationUnit[];
+
 export type DurationLike = DurationLikeObject | number;

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

@@ -2,3 +2,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'>;
+export type ConversionAccuracy = 'casual' | 'longterm';

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

@@ -1,4 +1,9 @@
-import {DateTimeOptions} from '../interfaces/toddle-datetime.interface';
+import {
+  DateTimeOptions,
+  LocaleOptions,
+} from '../interfaces/toddle-datetime.interface';
+import {CanBeInvalid} from 'luxon/src/_util';
+import {_ToObjectOutput} from 'luxon';
 
 export type DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 
@@ -14,3 +19,5 @@ export type DateTimeUnit =
   | 'millisecond';
 
 export type DateTimeJSOptions = Omit<DateTimeOptions, 'setZone'>;
+
+export type ConversionAccuracy = 'casual' | 'longterm';