@tactics/toddle-styleguide 5.4.14 → 5.4.16

package/index.tsx

@@ -111,7 +111,7 @@ import CreateResponsiveStyle from './src/theme/responsive/index';
 // ================================
 // Date / Time Utilities
 // ================================
-import { ClockInterface, SystemClock, UTCSystemClock } from './src/utilities/datetime/clock.class';
+import { ClockInterface, SystemClock } from './src/utilities/datetime/clock.class';
 import { YearAndMonth, YearAndMonthInterface, YearAndMonthLocaleAwareOutputFormat, YearAndMonthOutputFormat } from './src/utilities/datetime/yearandmonth.class';
 import { Year, YearInterface, YearOutputFormat } from './src/utilities/datetime/year.class';
 import { SystemTimezone, TimeZone, TimeZoneInterface, UTCTimezone } from './src/utilities/datetime/timezone.class';
@@ -232,7 +232,6 @@ export {
   // Date / Time Utilities
   ClockInterface,
   SystemClock,
-  UTCSystemClock,
   DateOnly,
   DateOnlyInterface,
   DateOnlyLocaleAwareOutputFormat,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.4.14",
+  "version": "5.4.16",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -21,64 +21,60 @@
   "packageManager": "yarn@3.3.1",
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
-    "@expo/metro-runtime": "~6.1.2",
-    "@expo/webpack-config": "~19.0.1",
     "@lottiefiles/dotlottie-react": "^0.14.3",
     "@miblanchard/react-native-slider": "^2.3.1",
-    "@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",
-    "@react-navigation/native-stack": "^6.9.13",
-    "@react-navigation/stack": "^6.3.17",
     "@tactics/kinderopvang-branding": "1.0.3",
-    "@testing-library/react-native": "^12.1.2",
-    "@types/luxon": "^3.3.0",
-    "@types/xdate": "^0.8.32",
     "dayjs": "^1.11.18",
     "dayjs-plugin-utc": "^0.1.2",
-    "expo": "54.0.12",
-    "expo-application": "~7.0.7",
-    "expo-background-task": "~1.0.8",
-    "expo-camera": "~17.0.8",
-    "expo-crypto": "~15.0.7",
-    "expo-dev-client": "~6.0.13",
-    "expo-device": "~8.0.9",
-    "expo-font": "~14.0.8",
-    "expo-haptics": "~15.0.7",
-    "expo-linear-gradient": "~15.0.7",
-    "expo-localization": "~17.0.7",
-    "expo-secure-store": "~15.0.7",
-    "expo-splash-screen": "~31.0.10",
-    "expo-status-bar": "~3.0.8",
     "intl": "^1.2.5",
-    "jsc-android": "^250231.0.0",
-    "lottie-ios": "4.5.0",
-    "lottie-react-native": "~7.3.1",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
     "react-i18next": "^13.0.1",
-    "react-native": "0.81.4",
     "react-native-calendar-strip": "^2.2.6",
     "react-native-calendars": "^1.1299.0",
-    "react-native-dotenv": "^3.4.9",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-keychain": "^8.1.1",
-    "react-native-pager-view": "6.9.1",
     "react-native-picker-select": "^8.0.4",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
-    "react-native-svg": "15.12.1",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-toast-message": "^2.1.6",
-    "react-native-translation": "^1.1.0",
-    "react-native-web": "^0.21.0",
     "react-native-wheel-picker-expo": "^0.5.4",
     "react-native-wheely": "^0.6.0",
-    "react-native-worklets": "0.5.1",
-    "react-redux": "^8.1.1",
-    "react-test-renderer": "^18.2.0"
+    "react-redux": "^8.1.1"
+  },
+  "peerDependencies": {
+    "@expo/metro-runtime": "*",
+    "@expo/vector-icons": "*",
+    "@react-navigation/bottom-tabs": "*",
+    "@react-navigation/drawer": "*",
+    "@react-navigation/native": "*",
+    "@react-navigation/native-stack": "*",
+    "@react-navigation/stack": "*",
+    "expo": "*",
+    "expo-application": "*",
+    "expo-asset": "*",
+    "expo-background-task": "*",
+    "expo-camera": "*",
+    "expo-constants": "*",
+    "expo-crypto": "*",
+    "expo-dev-client": "*",
+    "expo-device": "*",
+    "expo-font": "*",
+    "expo-haptics": "*",
+    "expo-keep-awake": "*",
+    "expo-linear-gradient": "*",
+    "expo-localization": "*",
+    "expo-modules-core": "*",
+    "expo-secure-store": "*",
+    "expo-splash-screen": "*",
+    "expo-status-bar": "*",
+    "expo-task-manager": "*",
+    "expo-updates-interface": "*",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-pager-view": "*",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-screens": "*",
+    "react-native-svg": "*",
+    "react-native-web": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

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/molecules/select-picker/select-picker.component.tsx

@@ -34,6 +34,9 @@ export const SelectPicker = ({
     }
   };
 
+  console.log(data);
+  console.log(defaultValue);
+
   return (
     <View style={styles.container}>
       <View style={styles.pickerContainer}>

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

@@ -1,27 +1,13 @@
 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 {
-  private readonly timezone: TimeZoneInterface;
-
-  constructor(timezone: TimeZoneInterface) {
-        this.timezone = timezone;
-  }
-
-  public now(): DateTimeInterface {
-    const nowInTimezone = dayjs();
-    return DateTime.fromIso8601(nowInTimezone.toISOString(), this.timezone);
-  }
-}
-
-export class UTCSystemClock implements ClockInterface {
   public now(): DateTimeInterface {
     const nowInTimezone = dayjs();
     return DateTime.fromTimestamp(nowInTimezone.unix());
   }
-}
+}

package/ios/.xcode.env

@@ -1,11 +0,0 @@
-# This `.xcode.env` file is versioned and is used to source the environment
-# used when running script phases inside Xcode.
-# To customize your local environment, you can create an `.xcode.env.local`
-# file that is not versioned.
-
-# NODE_BINARY variable contains the PATH to the node executable.
-#
-# Customize the NODE_BINARY variable here.
-# For example, to use nvm with brew, add the following line
-# . "$(brew --prefix nvm)/nvm.sh" --no-use
-export NODE_BINARY=$(command -v node)

package/ios/Podfile

@@ -1,60 +0,0 @@
-require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
-require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
-
-require 'json'
-podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
-
-def ccache_enabled?(podfile_properties)
-  # Environment variable takes precedence
-  return ENV['USE_CCACHE'] == '1' if ENV['USE_CCACHE']
-  
-  # Fall back to Podfile properties
-  podfile_properties['apple.ccacheEnabled'] == 'true'
-end
-
-ENV['RCT_NEW_ARCH_ENABLED'] ||= '0' if podfile_properties['newArchEnabled'] == 'false'
-ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] ||= podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
-ENV['RCT_USE_RN_DEP'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
-ENV['RCT_USE_PREBUILT_RNCORE'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
-platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
-
-prepare_react_native_project!
-
-target 'Styleguide' do
-  use_expo_modules!
-
-  if ENV['EXPO_USE_COMMUNITY_AUTOLINKING'] == '1'
-    config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
-  else
-    config_command = [
-      'npx',
-      'expo-modules-autolinking',
-      'react-native-config',
-      '--json',
-      '--platform',
-      'ios'
-    ]
-  end
-
-  config = use_native_modules!(config_command)
-
-  use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
-  use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
-
-  use_react_native!(
-    :path => config[:reactNativePath],
-    :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
-    # An absolute path to your application root.
-    :app_path => "#{Pod::Config.instance.installation_root}/..",
-    :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
-  )
-
-  post_install do |installer|
-    react_native_post_install(
-      installer,
-      config[:reactNativePath],
-      :mac_catalyst_enabled => false,
-      :ccache_enabled => ccache_enabled?(podfile_properties),
-    )
-  end
-end