@tactics/toddle-styleguide 5.4.13 → 5.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.4.13",
+  "version": "5.4.15",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

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

@@ -4,7 +4,7 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './calendar.styles';
 import {Icon} from '../../../icons';
 import {DateTime, DateTimeInterface} from '../../../utilities/datetime/datetime.class';
-import {SystemClock} from '../../../utilities/datetime/clock.class';
+import {ClockInterface, SystemClock} from '../../../utilities/datetime/clock.class';
 import {UTCTimezone} from '../../../utilities/datetime/timezone.class';
 
 LocaleConfig.locales['nl'] = {
@@ -55,6 +55,7 @@ type CalendarProps = {
   selected: DateTimeInterface;
   minDate?: string;
   maxDate?: string;
+  clock: ClockInterface;
 };
 
 export const Calendar = ({
@@ -62,10 +63,10 @@ export const Calendar = ({
   selected,
   minDate,
   maxDate,
+  clock,
 }: CalendarProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
-  const clock = new SystemClock();
   const initDate = clock.now().toDateOnlyIso8601() || undefined;
 
   const today = selected.toDateOnlyIso8601();

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

@@ -2,6 +2,7 @@ import React from 'react';
 import {Calendar} from './calendar.component';
 import {useWindowDimensions} from 'react-native';
 import {SystemClock} from '../../../utilities/datetime/clock.class';
+import {SystemTimezone} from '../../../utilities/datetime/timezone.class';
 
 const {View} = require('react-native');
 
@@ -29,6 +30,7 @@ export const CalendarPreview = ({}: {}) => {
         }}
       >
         <Calendar
+          clock={Clock}
           selected={selectedDay}
           onDayPress={setSelectedDay}
           minDate={calendarStartDate}

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

@@ -7,7 +7,7 @@ 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 {ClockInterface, SystemClock} from '../../../utilities/datetime/clock.class';
 import {DateOnlyLocaleAwareOutputFormat} from '../../../utilities/datetime/dateonly.class';
 import {Locale} from '../../../utilities/datetime/locale';
 
@@ -17,6 +17,7 @@ type CalendarSelectProps = {
   onUpdateDate: (date: DateTimeInterface) => void;
   labelForToday?: string | undefined;
   locale: Locale;
+  clock: ClockInterface;
 };
 
 const CalendarSelect = ({
@@ -24,7 +25,8 @@ const CalendarSelect = ({
   startDate,
   onUpdateDate,
   labelForToday,
-  locale
+  locale,
+  clock
 }: CalendarSelectProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
@@ -32,7 +34,6 @@ const CalendarSelect = ({
   const [visibleDate, setVisibleDate] = useState(startDate);
   const debouncedVisibleDate = useDebounce<DateTimeInterface>(visibleDate, 500);
 
-  const clock = new SystemClock();
   const today = clock.now();
   const isToday =  today.isSameDay(visibleDate);
 

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

@@ -3,13 +3,13 @@ import {View} from 'react-native';
 import {CalendarSelect} from './calendar-select.component';
 import {Locale} from '../../../utilities/datetime/locale';
 import {SystemClock} from '../../../utilities/datetime/clock.class';
-import {TimeZone} from '../../../utilities/datetime/timezone.class';
+import {SystemTimezone, TimeZone} from '../../../utilities/datetime/timezone.class';
 
 export const CalendarSelectPreview = () => {
 
   const clock = new SystemClock();
 
-  const startDate = clock.now().inTimezone(TimeZone.from('America/Los_Angeles'));
+  const startDate = clock.now().inTimezone(SystemTimezone);
 
   const [date, setDate] = useState(
     startDate
@@ -25,6 +25,7 @@ export const CalendarSelectPreview = () => {
         }}
         locale={Locale.nl}
         labelForToday={'Today'}
+        clock={clock}
       />
     </View>
   );

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

@@ -8,6 +8,7 @@ import {Popover} from '../../templates/popover/popover.component';
 import {Calendar} from '../../atoms/calendar/calendar.component';
 import {View} from 'react-native';
 import {SystemClock} from '../../../utilities/datetime/clock.class';
+import {SystemTimezone} from '../../../utilities/datetime/timezone.class';
 
 export const DateInputPreview = () => {
 
@@ -49,6 +50,7 @@ export const DateInputPreview = () => {
       >
         <View>
           <Calendar
+            clock={clock}
             selected={selectedDate}
             onDayPress={(day) => {
               setSelectedDate(day);

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

@@ -5,7 +5,7 @@ import {Stylesheet} from './day.styles';
 import {Heading4} from '../../atoms/heading-components';
 import {TinyText} from '../../atoms/paragraph-components';
 import {DateTimeInterface} from '../../../utilities/datetime/datetime.class';
-import {SystemClock} from '../../../utilities/datetime/clock.class';
+import {ClockInterface, SystemClock} from '../../../utilities/datetime/clock.class';
 import {DayOfWeekLocaleAwareOutputFormat} from '../../../utilities/datetime/dayoftheweek.class';
 import {Locale} from '../../../utilities/datetime/locale';
 import {DayOutputFormat} from '../../../utilities/datetime/day.class';
@@ -15,13 +15,13 @@ type DayProps = {
   date: DateTimeInterface;
   onSelect: (date: DateTimeInterface) => void;
   isSelected?: boolean;
-  locale: Locale
+  locale: Locale;
+  clock: ClockInterface;
 };
 
-const Day = ({onSelect, date, isSelected, locale}: DayProps) => {
+const Day = ({onSelect, date, isSelected, locale, clock}: DayProps) => {
   const context = useContext(ThemeCtx);
 
-  const clock = new SystemClock();
   const today = clock.now();
   const isToday =  today.isSameDay(date);
 

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

@@ -4,7 +4,7 @@ import {TextBubble} from './text-bubble.component';
 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 {SystemTimezone, UTCTimezone} from '../../../utilities/datetime/timezone.class';
 import {Locale} from '../../../utilities/datetime/locale';
 
 const {View} = require('react-native');

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

@@ -10,4 +10,4 @@ export class SystemClock implements ClockInterface {
     const nowInTimezone = dayjs();
     return DateTime.fromTimestamp(nowInTimezone.unix());
   }
-}
+}