@tactics/toddle-styleguide 5.3.1 → 5.3.3

package/src/components/molecules/selectable-list-item/selectable-list-item.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext} from 'react';
+import {isValidElement, ReactElement, useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Pressable, View} from 'react-native';
@@ -26,12 +26,17 @@ const SelectableListItem = ({
 }: SelectableListProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, selected, inverse);
-  const invertedIcon = React.Children.map(icon, (child) =>
-    React.cloneElement(child, {
-      ...icon.props,
-      color: context.colors.main[6],
-    })
-  );
+
+  const invertedIcon = React.Children.map(icon, (child) => {
+    if (isValidElement(child)) {
+      return React.cloneElement(child as ReactElement<any>, {
+        // @ts-ignore
+        ...child.props,
+        color: context.colors.main[6],
+      });
+    }
+    return null; // Skip invalid elements
+  });
 
   return (
     <Pressable

package/src/components/molecules/timestamp/timestamp.component.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
 type TimestampProps = {
-    sent: ToddleDateTime;
+    sent: DateTimeInterface;
     label?: string;
 };
 export declare const Timestamp: ({ sent, label }: TimestampProps) => React.JSX.Element;

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

@@ -1,21 +1,28 @@
 import * as React from 'react';
 import {useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 import {Stylesheet} from './timestamp.styles';
 import {SmallText} from '../../atoms/paragraph-components';
+import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
+import {Locale} from '../../../utilities/datetime/locale';
+import {MonthLocalAwareOutputFormat} from '../../../utilities/datetime/month.class';
+import {TimeOutputFormat} from '../../../utilities/datetime/time.class';
 
 type TimestampProps = {
-  sent: ToddleDateTime;
+  sent: DateTimeInterface;
   label?: string;
+  locale: Locale;
 };
 
-export const Timestamp = ({sent, label}: TimestampProps) => {
+export const Timestamp = ({sent, label, locale}: TimestampProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet();
 
-  const timestampToStringHandler = (timestamp: ToddleDateTime) => {
-    return timestamp.toFormat('d LLL, H:mm');
+  const timestampToStringHandler = (timestamp: DateTimeInterface) => {
+    const day = timestamp.day.asInt();
+    const month = timestamp.month.formatLocale(MonthLocalAwareOutputFormat.MONTH_SHORT, locale);
+    const time = timestamp.toTime().format(TimeOutputFormat.TIME_SHORT);
+    return day + ' ' + month + ', ' + time;
   };
 
   return (

package/src/components/organisms/journal-entry/components/journal-entry-type/journal-entry-type.component.d.ts

@@ -1,9 +1,9 @@
-import { ToddleDateTime } from '../../../../../utilities/toddle-datetime/toddle-datetime.class';
 import React from 'react';
+import {DateTimeInterface} from '../../../../../utilities/datetime/datetime.class';
 interface JournalEntryTypeProps {
     prio: boolean;
     type: string;
-    happenedAt?: ToddleDateTime;
+    happenedAt?: DateTimeInterface;
     loading?: boolean;
     send: boolean;
 }

package/src/components/organisms/journal-entry/components/journal-entry-type/journal-entry-type.component.tsx

@@ -1,17 +1,17 @@
-import {useContext} from 'react';
+import React, {useContext} from 'react';
 import {View} from 'react-native';
 import {Icon} from '../../../../../icons/index';
 import {ThemeCtx} from '../../../../../context/theme.context';
 import {Stylesheet} from './journal-entry-type.styles';
 import {EntryTypeIndicator} from '../entry-type-indicator/entry-type-indicator.component';
 import {SmallText} from '../../../../atoms/paragraph-components';
-import {ToddleDateTime} from '../../../../../utilities/toddle-datetime/toddle-datetime.class';
-import React from 'react';
+import {DateTimeInterface} from '../../../../../utilities/datetime/datetime.class';
+import {TimeOutputFormat} from '../../../../../utilities/datetime/time.class';
 
 interface JournalEntryTypeProps {
   prio: boolean;
   type: string;
-  happenedAt?: ToddleDateTime;
+  happenedAt?: DateTimeInterface;
   loading?: boolean;
   send: boolean;
 }
@@ -53,7 +53,7 @@ export const JournalEntryType = ({
         <View>
           {happenedAt ? (
             <SmallText textColor={context.colors.ui.darkgrey}>
-              {` - ` + happenedAt.toFormat('H:mm')}
+              {` - ` + happenedAt.toTime().format(TimeOutputFormat.TIME_SHORT)}
             </SmallText>
           ) : null}
         </View>

package/src/components/organisms/journal-entry/journal-entry.component.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 import { VisualState } from '../../../types/visual-state.enum';
+import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
 interface JournalEntryProps {
     id: string;
     prio: boolean;
-    happenedAt?: ToddleDateTime;
+    happenedAt?: DateTimeInterface;
     type: string;
     text: string;
     visualState: VisualState;
-    createdAt?: ToddleDateTime;
+    createdAt?: DateTimeInterface;
     timestampLabel?: string;
     onFail?: (id: string) => void;
     onEdit?: (id: string) => void;

package/src/components/organisms/journal-entry/journal-entry.component.tsx

@@ -9,26 +9,28 @@ import {
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './journal-entry.styles';
 import {JournalEntryType} from './components';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 import {TextBubble} from '../text-bubble/text-bubble.component';
 import {VisualState} from '../../../types/visual-state.enum';
 import {Line} from '../../atoms/line/line.component';
 import {LoadingIndicator} from '../loading-indicator/loading-indicator.component';
+import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
+import {Locale} from '../../../utilities/datetime/locale';
 
 interface JournalEntryProps {
   id: string;
   prio: boolean;
-  happenedAt?: ToddleDateTime;
+  happenedAt?: DateTimeInterface;
   type: string;
   text: string;
   visualState: VisualState;
-  createdAt?: ToddleDateTime;
+  createdAt?: DateTimeInterface;
   timestampLabel?: string;
   onFail?: (id: string) => void;
   onEdit?: (id: string) => void;
   onDelete?: (id: string) => void;
   afterAnimationComplete?: () => void;
   loadingNewEntry?: boolean;
+  locale: Locale;
 }
 
 export const JournalEntry = ({
@@ -45,6 +47,7 @@ export const JournalEntry = ({
   onDelete,
   afterAnimationComplete,
   loadingNewEntry,
+  locale
 }: JournalEntryProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, createdAt);
@@ -123,6 +126,7 @@ export const JournalEntry = ({
           onDelete={deleteJournalEntryHandler}
           onEdit={onEdit}
           onFail={onFail}
+          locale={locale}
         />
       )}
 

package/src/components/organisms/journal-entry/journal-entry.preview.tsx

@@ -1,13 +1,14 @@
 import {FlatList, LayoutAnimation, ListRenderItem, View} from 'react-native';
 
 import {JournalEntry} from './journal-entry.component';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 import {VisualState} from '../../../types/visual-state.enum';
 import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
 import {useRef, useState} from 'react';
 import {PressableIcon} from '../../molecules/pressable-icon/pressable-icon.component';
 import {Icon} from '../../../icons/index';
 import React from 'react';
+import {DateTime, DateTimeInterface} from '../../../utilities/datetime/datetime.class';
+import {Locale} from '../../../utilities/datetime/locale';
 
 const DATA = [
   {
@@ -120,6 +121,8 @@ export const JournalEntryPreview = () => {
   const [entries, setEntries] = useState(DATA);
   const flatListRef = useRef<FlatList | null>(null);
 
+  const locale = Locale.nl;
+
   const addJournalEntry = (newEntry: JournalEntry) => {
     setEntries((prevEntries) => [
       ...prevEntries,
@@ -150,10 +153,10 @@ export const JournalEntryPreview = () => {
         id={item.uuid}
         prio={item.prio}
         type={item.type}
-        happenedAt={ToddleDateTime.fromSeconds(item.happened_at, {zone: 'utc'})}
+        happenedAt={DateTime.fromTimestamp(item.happened_at)}
         text={item.message}
         visualState={item.prio ? VisualState.WARNING : VisualState.DEFAULT}
-        createdAt={ToddleDateTime.fromSeconds(item.happened_at, {zone: 'utc'})}
+        createdAt={DateTime.fromTimestamp(item.happened_at)}
         timestampLabel={'ingevuld op'}
         onDelete={
           item.sender === 'STAFF_MEMBER' ? deleteJournalEntry : undefined
@@ -166,6 +169,7 @@ export const JournalEntryPreview = () => {
         onFail={item.send ? undefined : () => console.log('resend')}
         afterAnimationComplete={() => console.log('animation done')}
         loadingNewEntry={item.loadingNewEntry}
+        locale={locale}
       />
     );
   };

package/src/components/organisms/text-bubble/text-bubble.component.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { VisualState } from '../../../types/visual-state.enum';
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
 type TextBubbleProps = {
     id: string;
     text: string;
     visualState: VisualState;
-    timestamp?: ToddleDateTime;
+    timestamp?: DateTimeInterface;
     timestampLabel?: string;
     onFail?: (id: string) => void;
     onEdit?: (id: string) => void;

package/src/components/organisms/text-bubble/text-bubble.component.tsx

@@ -4,19 +4,21 @@ import {View} from 'react-native';
 import {Stylesheet} from './text-bubble.styles';
 import {VisualState} from '../../../types/visual-state.enum';
 import {Timestamp} from '../../molecules/timestamp/timestamp.component';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 import {FailedTextBubble} from '../../molecules/failed-to-send/failed-bubble.component';
 import {SendTextBubble} from '../../molecules/send-bubble/send-text-bubble.component';
+import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
+import {Locale} from '../../../utilities/datetime/locale';
 
 type TextBubbleProps = {
   id: string;
   text: string;
   visualState: VisualState;
-  timestamp?: ToddleDateTime;
+  timestamp?: DateTimeInterface;
   timestampLabel?: string;
   onFail?: (id: string) => void;
   onEdit?: (id: string) => void;
   onDelete?: (id: string) => void;
+  locale: Locale;
 };
 
 const TextBubble = ({
@@ -28,6 +30,7 @@ const TextBubble = ({
   onFail,
   onEdit,
   onDelete,
+  locale
 }: TextBubbleProps) => {
   const styles = Stylesheet();
 
@@ -61,7 +64,7 @@ const TextBubble = ({
       )}
       {timestamp ? (
         <View style={styles.timestampContainer}>
-          <Timestamp sent={timestamp} label={timestampLabel} />
+          <Timestamp sent={timestamp} label={timestampLabel} locale={locale} />
         </View>
       ) : null}
     </View>

package/src/components/organisms/text-bubble/text-bubble.preview.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import {VisualState} from '../../../types/visual-state.enum';
 import {TextBubble} from './text-bubble.component';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 import {ScrollView} from 'react-native';
+import {DateTime, DateTimeInterface} from '../../../utilities/datetime/datetime.class';
+import {SystemClock} from '../../../utilities/datetime/clock.class';
+import {UTCTimezone} from '../../../utilities/datetime/timezone.class';
+import {Locale} from '../../../utilities/datetime/locale';
 
 const {View} = require('react-native');
 
 export const TextBubblePreview = ({}: {}) => {
   const dateTimeString = '2023-11-28T09:12:00';
-  const alternativeDateTime = ToddleDateTime.fromISO(dateTimeString);
+  const alternativeDateTime = DateTime.fromIso8601(dateTimeString, UTCTimezone);
+  const clock = new SystemClock();
 
   const send = false;
 
+  const locale = Locale.nl;
+
   return (
     <View
       style={{
@@ -33,51 +39,57 @@ export const TextBubblePreview = ({}: {}) => {
           onFail={send ? undefined : () => console.log('failed try to resend')}
           onEdit={() => alert('Edit the message')}
           onDelete={() => alert('Delete the message')}
+          locale={locale}
         />
         <TextBubble
           id={'2'}
           text="Test."
           visualState={VisualState.WARNING}
           timestampLabel={'ingevuld op'}
-          timestamp={ToddleDateTime.now()}
+          timestamp={clock.now()}
           onEdit={() => alert('Edit the message')}
           onDelete={() => alert('Delete the message')}
+          locale={locale}
         />
         <TextBubble
           id={'3'}
           text={`"I don't like sand... it's rough, and course, and irritating, and it gets everywhere."`}
           visualState={VisualState.DEFAULT}
           timestampLabel={'ingevuld op'}
-          timestamp={ToddleDateTime.now()}
+          timestamp={clock.now()}
           onEdit={() => alert('Edit the message')}
           onDelete={() => alert('Delete the message')}
+          locale={locale}
         />
         <TextBubble
           id={'4'}
           text="Error!"
           visualState={VisualState.WARNING}
           timestampLabel={'ingevuld op'}
-          timestamp={ToddleDateTime.now()}
+          timestamp={clock.now()}
           onFail={send ? undefined : () => alert('Try to resend')}
           onEdit={() => alert('Edit the message')}
           onDelete={() => alert('Delete the message')}
+          locale={locale}
         />
         <TextBubble
           id={'5'}
           text="Niet verzonden! Probeer het opnieuw aub! Swipe en refresh!"
           visualState={VisualState.WARNING}
           timestampLabel={'ingevuld op'}
-          timestamp={ToddleDateTime.now()}
+          timestamp={clock.now()}
           onFail={send ? undefined : () => alert('Try to resend')}
           onEdit={() => alert('Edit the message')}
           onDelete={() => alert('Delete the message')}
+          locale={locale}
         />
         <TextBubble
           id={'6'}
           text="We hebben uw betaling van vorige maand nog niet ontvangen!"
           visualState={VisualState.WARNING}
           timestampLabel={'ingevuld op'}
-          timestamp={ToddleDateTime.now()}
+          timestamp={clock.now()}
+          locale={locale}
         />
       </ScrollView>
     </View>

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

@@ -1,5 +1,5 @@
-import React, {Children, useContext, useEffect, useMemo, useState} from 'react';
-import {Animated, Dimensions, Platform, StatusBar, View} from 'react-native';
+import React, {Children, isValidElement, useContext, useEffect, useMemo, useState} from 'react';
+import {Animated, Dimensions, LayoutChangeEvent, Platform, StatusBar, View, ViewProps} from 'react-native';
 import {Backdrop} from '../../atoms/backdrop/backdrop.component';
 import {Stylesheet} from './popover-action.styles';
 import {Swipe} from '../../molecules/swipe/swipe.component';
@@ -32,12 +32,13 @@ export const PopOverAction = ({
   };
 
   const renderChildren = Children.map(children, (child, index) => {
-    return child
-      ? React.cloneElement(child as React.ReactElement, {
-          onLayout: (event: any) =>
-            handleChildLayout(index, event.nativeEvent.layout),
-        })
-      : null;
+    if (isValidElement<ViewProps>(child)) {
+      return React.cloneElement(child, {
+        onLayout: (event: LayoutChangeEvent) =>
+          handleChildLayout(index, event.nativeEvent.layout),
+      });
+    }
+    return null;
   });
 
   const handleChildIndexChange = (index: number) => {

package/src/icons/solid/cloud-download/cloud-download.icon.tsx

@@ -12,7 +12,7 @@ export const CloudDownloadIcon = ({color, size = Scale.l}: IconSVGProps) => {
     <Svg width={size} height={size} viewBox="0 0 18 20" fill="none">
       <Path
         fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
-        fill-rule="evenodd"
+        fillRule="evenodd"
         clipRule="evenodd"
         d="M0.199951 9.45001C0.199951 11.5763 1.92365 13.3 4.04995 13.3H7.89995V16.1444L6.47777 14.7222C6.04819 14.2926 5.35171 14.2926 4.92213 14.7222C4.49256 15.1518 4.49256 15.8482 4.92213 16.2778L8.22213 19.5778C8.65171 20.0074 9.34819 20.0074 9.77777 19.5778L13.0778 16.2778C13.5073 15.8482 13.5073 15.1518 13.0778 14.7222C12.6482 14.2926 11.9517 14.2926 11.5221 14.7222L10.1 16.1444V13.3H12.8499C15.5838 13.3 17.7999 11.0838 17.7999 8.35001C17.7999 5.6162 15.5838 3.40001 12.8499 3.40001C12.6203 3.40001 12.3942 3.41565 12.1729 3.44593C11.7006 1.52492 9.96668 0.100006 7.89995 0.100006C5.4699 0.100006 3.49995 2.06995 3.49995 4.50001C3.49995 4.88746 3.55003 5.26321 3.64407 5.62115C1.70856 5.82394 0.199951 7.46079 0.199951 9.45001ZM10.1 13.3H7.89995V7.80001C7.89995 7.19249 8.39244 6.70001 8.99995 6.70001C9.60746 6.70001 10.1 7.19249 10.1 7.80001V13.3Z"
       />

package/src/icons/solid/refresh/refresh-solid.icon.tsx

@@ -13,8 +13,8 @@ export const RefreshIcon = ({color, size = Scale.l}: IconSVGProps) => {
     <Svg width={size} height={size} viewBox="0 0 16 18" fill="none">
       <Path
         fill={color ? HexColor.of(color).toString() : context.colors.main['0']}
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
       />
     </Svg>

package/src/utilities/datetime/clock.class.tsx

@@ -0,0 +1,14 @@
+import {DateTime, DateTimeInterface} from './datetime.class';
+import dayjs from './dayjs-config';
+import {TimeZoneInterface} from './timezone.class';
+
+export interface ClockInterface {
+  now(): DateTimeInterface;
+}
+
+export class SystemClock implements ClockInterface {
+  public now(): DateTimeInterface {
+    const nowInTimezone = dayjs();
+    return DateTime.fromTimestamp(nowInTimezone.unix());
+  }
+}