@tactics/toddle-styleguide 1.2.0 → 1.2.2

package/App.tsx

@@ -408,16 +408,14 @@ function App() {
           <Stack.Screen name="language-button">
             {() => <LanguageButtonPreview />}
           </Stack.Screen>
-          <Stack.Screen name="modal" options={{headerShown: false}}>
-            {() => <ModalPreview />}
-          </Stack.Screen>
-          <Stack.Screen name="wave" options={{headerShown: false}}>
+          <Stack.Screen name="modal">{() => <ModalPreview />}</Stack.Screen>
+          <Stack.Screen name="wave">
             {() => <WaveBackgroundPreview />}
           </Stack.Screen>
-          <Stack.Screen name="loading-indicator" options={{headerShown: false}}>
+          <Stack.Screen name="loading-indicator">
             {() => <LoadingIndicatorPreview />}
           </Stack.Screen>
-          <Stack.Screen name="toddle-datetime" options={{headerShown: false}}>
+          <Stack.Screen name="toddle-datetime">
             {() => <ToddleDateTimePreview />}
           </Stack.Screen>
           <Stack.Screen name="background-gradient">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -17,33 +17,33 @@
   "packageManager": "yarn@3.3.1",
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
-    "@expo/config-plugins": "~6.0.0",
-    "@expo/webpack-config": "^18.0.1",
-    "@miblanchard/react-native-slider": "^2.1.0",
+    "@expo/config-plugins": "~6.0.2",
+    "@expo/webpack-config": "^18.1.0",
+    "@miblanchard/react-native-slider": "^2.3.1",
     "@react-native-picker/picker": "2.4.8",
-    "@react-navigation/bottom-tabs": "^6.4.0",
-    "@react-navigation/drawer": "^6.5.0",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/native-stack": "^6.9.1",
-    "@react-navigation/stack": "^6.3.3",
+    "@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": "^11.5.3",
-    "@types/luxon": "^3.2.0",
+    "@testing-library/react-native": "^12.1.2",
+    "@types/luxon": "^3.3.0",
     "@types/xdate": "^0.8.32",
-    "expo": "^48.0.0",
+    "expo": "^48.0.19",
     "expo-font": "~11.1.1",
     "expo-linear-gradient": "~12.1.2",
     "expo-status-bar": "~1.4.4",
     "intl": "^1.2.5",
-    "jsc-android": "^250230.2.1",
-    "lottie-ios": "3.4.1",
+    "jsc-android": "^250231.0.0",
+    "lottie-ios": "4.2.0",
     "lottie-react-native": "5.1.4",
     "luxon": "^3.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.6",
+    "react-native": "0.71.8",
     "react-native-calendar-strip": "^2.2.6",
-    "react-native-calendars": "^1.1293.0",
+    "react-native-calendars": "^1.1299.0",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-picker-select": "^8.0.4",
     "react-native-reanimated": "~2.14.4",
@@ -52,22 +52,22 @@
     "react-native-svg": "13.4.0",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-swiper": "^1.6.0",
-    "react-native-web": "~0.18.7",
+    "react-native-web": "~0.18.10",
     "react-test-renderer": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-typescript": "^7.18.6",
-    "@types/jest": "^29.2.1",
-    "@types/luxon": "^3.2.0",
-    "@types/node": "^18.11.7",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@types/jest": "^29.5.2",
+    "@types/luxon": "^3.3.0",
+    "@types/node": "^20.3.1",
     "@types/react": "~18.0.27",
     "@types/react-dom": "~18.0.10",
     "@types/react-test-renderer": "^18.0.0",
-    "jest": "^29.2.2",
-    "jest-expo": "^46.0.1",
-    "prettier": "2.7.1",
-    "ts-jest": "^29.0.3",
+    "jest": "^29.5.0",
+    "jest-expo": "^48.0.2",
+    "prettier": "2.8.8",
+    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"
   }

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

@@ -1065,7 +1065,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 3 April 2023 "
+            accessibilityLabel=" Maandag 3 April 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1097,10 +1097,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,
@@ -1120,9 +1116,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -1153,7 +1146,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 4 April 2023 "
+            accessibilityLabel="today Dinsdag 4 April 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1185,6 +1178,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,
@@ -1204,6 +1201,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4436,8 +4436,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 3 April 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Maandag 3 April 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -4468,10 +4467,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,
@@ -4492,7 +4487,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -4524,7 +4519,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Dinsdag 4 April 2023 "
+            accessibilityLabel="today Dinsdag 4 April 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4555,6 +4551,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,
@@ -4575,7 +4575,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.preview.tsx

@@ -30,9 +30,6 @@ export const FooterPreview = ({}: {}) => {
             height: 42,
             justifyContent: 'center',
             alignItems: 'center',
-            borderStyle: 'solid',
-            borderWidth: 1,
-            borderColor: 'blue',
           }}
           onPress={() => console.log('pressed icon')}
         >

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

@@ -6,8 +6,9 @@ export const Stylesheet = (context) =>
   StyleSheet.create({
     container: {
       flexDirection: 'row',
-      alignItems: 'center',
+      alignItems: Platform.OS === 'android' ? 'center' : 'flex-start',
       justifyContent: 'center',
+      paddingTop: Platform.OS === 'android' ? 0 : Scale.m,
       backgroundColor: context.colors.ui.xlightgrey,
       borderTopColor: context.colors.ui.lightgrey,
       borderStyle: 'solid',

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

@@ -6,6 +6,7 @@ type AvatarProps = {
     size: Size;
     isBlocked?: boolean;
     isActive?: boolean;
+    isLoading?: boolean;
 };
-declare const Avatar: ({ source, size, isBlocked, isActive }: AvatarProps) => JSX.Element;
+declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, }: AvatarProps) => JSX.Element;
 export { Avatar as Avatar };

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

@@ -1,7 +1,13 @@
 import * as React from 'react';
 import {useContext} from 'react';
 
-import {Image, ImageSourcePropType, ImageStyle, View} from 'react-native';
+import {
+  ActivityIndicator,
+  Image,
+  ImageSourcePropType,
+  ImageStyle,
+  View,
+} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './avatar.styles';
 import {Size} from '../../../types/size.enum';
@@ -14,9 +20,16 @@ type AvatarProps = {
   size: Size;
   isBlocked?: boolean;
   isActive?: boolean;
+  isLoading?: boolean;
 };
 
-const Avatar = ({source, size, isBlocked, isActive = true}: AvatarProps) => {
+const Avatar = ({
+  source,
+  size,
+  isBlocked,
+  isActive = true,
+  isLoading,
+}: AvatarProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, size, isBlocked, isActive);
 
@@ -56,7 +69,17 @@ const Avatar = ({source, size, isBlocked, isActive = true}: AvatarProps) => {
   };
 
   return source instanceof Initials ? (
-    <View style={styles.container}>{renderText(size)}</View>
+    <View style={styles.container}>
+      {isLoading ? (
+        <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+      ) : (
+        renderText(size)
+      )}
+    </View>
+  ) : isLoading ? (
+    <View style={styles.container}>
+      <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
+    </View>
   ) : (
     <View style={styles.container}>
       {!isBlocked ? <MainGradient isActive={isActive} /> : null}

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

@@ -13,7 +13,6 @@ exports[`Filter range test renders a filter range slider 1`] = `
     animationType="timing"
     onLayout={[Function]}
     onValueChange={[Function]}
-    step={1}
     style={
       [
         {
@@ -52,6 +51,7 @@ exports[`Filter range test renders a filter range slider 1`] = `
             "borderRadius": 50,
             "height": 8,
           },
+          undefined,
         ]
       }
     />

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

@@ -6,7 +6,7 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './pill.styles';
 import {VisualState} from '../../../types/visual-state.enum';
 import {TinyText} from '../../atoms/paragraph-components';
-import {TextColorHandler} from '../../../utilities/text-color-handler/text-color-handler';
+import {TextColorHandler} from '../../../utilities/color-handler/color-handler';
 
 type PillProps = {
   visualState: VisualState;

package/src/components/molecules/quick-filter/quick-filter.component.tsx

@@ -6,7 +6,7 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {VisualState} from '../../../types/visual-state.enum';
 import {Stylesheet} from './quick-filter.styles';
 import {Paragraph} from '../../atoms/paragraph-components';
-import {TextColorHandler} from '../../../utilities/text-color-handler/text-color-handler';
+import {TextColorHandler} from '../../../utilities/color-handler/color-handler';
 
 type QuickFilterProps = {
   id: string;
@@ -31,7 +31,9 @@ const QuickFilter = ({
   return (
     <Pressable onPress={() => onSelect(id)} style={styles.container}>
       {isLoading ? (
-        <ActivityIndicator color={TextColorHandler(visualState, isLoading)} />
+        <ActivityIndicator
+          color={TextColorHandler(visualState, isSelected, isLoading)}
+        />
       ) : (
         <Paragraph
           bold={true}

package/src/components/molecules/quick-filter/quick-filter.preview.tsx

@@ -29,7 +29,7 @@ export const QuickFilterPreview = ({}: {}) => {
       />
       <QuickFilter
         id={'3'}
-        isLoading={false}
+        isLoading={true}
         amount={3}
         onSelect={() => setErrorFilterIsSelected((current) => !current)}
         visualState={VisualState.ERROR}

package/src/components/organisms/child-list-item/child-list-item.component.d.ts

@@ -10,10 +10,11 @@ type ChildListItemProps = {
     isSelected: boolean;
     onPressArrow: (id: string) => void;
     onPressText: (id: string) => void;
+    onLongPress: (id: string) => void;
     onSelect: (id: string) => void;
     sourceAvatar: ImageSourcePropType | Initials;
     textTimeTracker: string;
     visualStateTimeTracker: VisualState;
 };
-declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element>;
+declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element>;
 export { ChildListItem as ChildListItem };

package/src/components/organisms/child-list-item/child-list-item.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useCallback, useContext, useMemo} from 'react';
+import {useCallback, useContext, useMemo, useState} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {ImageSourcePropType, Pressable, View} from 'react-native';
@@ -21,6 +21,7 @@ type ChildListItemProps = {
   isSelected: boolean;
   onPressArrow: (id: string) => void;
   onPressText: (id: string) => void;
+  onLongPress: (id: string) => void;
   onSelect: (id: string) => void;
   sourceAvatar: ImageSourcePropType | Initials;
   textTimeTracker: string;
@@ -36,6 +37,7 @@ const ChildListItem = React.memo(
     isSelected,
     onPressArrow,
     onPressText,
+    onLongPress,
     onSelect,
     sourceAvatar,
     textTimeTracker,
@@ -44,6 +46,8 @@ const ChildListItem = React.memo(
     const context = useContext(ThemeCtx);
     const styles = Stylesheet(isSelected, context);
 
+    const [longPressExecuting, setLongPressExecuting] = useState(false);
+
     const onPressSelectable = useCallback(() => {
       selectable ? onSelect(id) : onPressText(id);
     }, [id, onPressText, onSelect, selectable]);
@@ -52,14 +56,28 @@ const ChildListItem = React.memo(
       onPressArrow(id);
     }, [id, onPressArrow]);
 
+    const onLongPressCallback = useCallback(() => {
+      setLongPressExecuting(true);
+      onLongPress(id);
+      setLongPressExecuting(false);
+    }, [id, onLongPress]);
+
     const textColor = useMemo(() => {
       return isSelected ? context.colors.ui.white : context.colors.ui.black;
     }, [isSelected]);
 
     return (
       <View style={styles.container}>
-        <Pressable onPress={onPressSelectable} style={styles.innerContainer}>
-          <Avatar source={sourceAvatar} size={Size.MEDIUM} />
+        <Pressable
+          onPress={onPressSelectable}
+          style={styles.innerContainer}
+          onLongPress={onLongPressCallback}
+        >
+          <Avatar
+            source={sourceAvatar}
+            size={Size.MEDIUM}
+            isLoading={longPressExecuting}
+          />
           <View style={styles.pressableText}>
             <View style={styles.trackerContainer}>
               <TimeTracker

package/src/components/organisms/child-list-item/child-list-item.preview.tsx

@@ -4,6 +4,7 @@ import {FlatList, View} from 'react-native';
 import {VisualState} from '../../../types/visual-state.enum';
 import {PressableIcon} from '../../molecules/pressable-icon/pressable-icon.component';
 import {Icon} from '../../../icons/index';
+import {Initials} from '../../../models/initials.model';
 
 interface IData {
   id: string;
@@ -44,6 +45,8 @@ export const ChildListItemPreview = ({}: {}) => {
     return selectedIDs.includes(id);
   };
 
+  const [isLoading, setIsLoading] = useState(false);
+
   const renderChildList = ({item}: any) => {
     return (
       <ChildListItem
@@ -54,8 +57,10 @@ export const ChildListItemPreview = ({}: {}) => {
         isSelected={isIdSelected(item.id)}
         onPressArrow={(id) => console.log(id + ' pressed')}
         onPressText={(id) => console.log('We will do something with id ' + id)}
+        onLongPress={(id) => console.log('Do something with id ' + id)}
         onSelect={addIdToSelected}
-        sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
+        // sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
+        sourceAvatar={Initials.for('Zeno', 'Driesen')}
         textTimeTracker={'3u45m'}
         visualStateTimeTracker={VisualState.SUCCESS}
       />

package/src/utilities/{text-color-handler/text-color-handler.d.ts → color-handler/color-handler.d.ts}

@@ -1,2 +1,2 @@
 import { VisualState } from '../../types/visual-state.enum';
-export declare const TextColorHandler: (visualState: VisualState, selected?: boolean) => string;
+export declare const TextColorHandler: (visualState: VisualState, selected?: boolean, loading?: boolean) => string;

package/src/utilities/color-handler/color-handler.ts

@@ -0,0 +1,36 @@
+import {VisualState} from '../../types/visual-state.enum';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../context/theme.context';
+
+export const TextColorHandler = (
+  visualState: VisualState,
+  selected?: boolean,
+  loading?: boolean
+) => {
+  const context = useContext(ThemeCtx);
+
+  const selectedTextColor = context.colors.ui.white;
+  const defaultTextColor = context.colors.main['0'];
+  const warningTextColor = context.colors.ui.warning.dark;
+  const errorTextColor = context.colors.ui.error.dark;
+  const successTextColor = context.colors.ui.success.dark;
+
+  if (visualState === VisualState.DEFAULT) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    else return selected ? selectedTextColor : defaultTextColor;
+  } else if (visualState === VisualState.WARNING) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : warningTextColor;
+  } else if (visualState === VisualState.ERROR) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : errorTextColor;
+  } else if (visualState === VisualState.SUCCESS) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : successTextColor;
+  } else if (visualState != VisualState.INACTIVE)
+    return context.colors.ui.white;
+};

package/src/utilities/text-color-handler/text-color-handler.tsx

@@ -1,26 +0,0 @@
-import {VisualState} from '../../types/visual-state.enum';
-import {useContext} from 'react';
-import {ThemeCtx} from '../../context/theme.context';
-
-export const TextColorHandler = (
-  visualState: VisualState,
-  selected?: boolean
-) => {
-  const context = useContext(ThemeCtx);
-
-  const selectedTextColor = context.colors.ui.white;
-  const defaultTextColor = context.colors.main['0'];
-  const warningTextColor = context.colors.ui.warning.dark;
-  const errorTextColor = context.colors.ui.error.dark;
-  const successTextColor = context.colors.ui.success.dark;
-
-  if (visualState === VisualState.DEFAULT)
-    return selected ? selectedTextColor : defaultTextColor;
-  else if (visualState === VisualState.WARNING)
-    return selected ? selectedTextColor : warningTextColor;
-  else if (visualState === VisualState.ERROR)
-    return selected ? selectedTextColor : errorTextColor;
-  else if (visualState === VisualState.SUCCESS)
-    return selected ? selectedTextColor : successTextColor;
-  else if (visualState != VisualState.INACTIVE) return context.colors.ui.white;
-};