@tactics/toddle-styleguide 2.0.2 → 2.0.4

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

@@ -13,7 +13,7 @@ type SelectableListProps = {
   icon: React.ReactElement;
   onPress?: () => void;
   inverse?: boolean;
-  selected: boolean
+  selected: boolean;
 };
 
 const SelectableListItem = ({
@@ -22,7 +22,7 @@ const SelectableListItem = ({
   icon,
   onPress,
   inverse,
-  selected
+  selected,
 }: SelectableListProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, selected, inverse);
@@ -34,7 +34,13 @@ const SelectableListItem = ({
   );
 
   return (
-    <Pressable onPress={onPress} style={[styles.container, {backgroundColor: selected ? context.colors.main['9'] : undefined}]}>
+    <Pressable
+      onPress={onPress}
+      style={[
+        styles.container,
+        {backgroundColor: selected ? context.colors.main['9'] : undefined},
+      ]}
+    >
       <View style={styles.iconCircle}>
         <View>{inverse ? invertedIcon : icon}</View>
       </View>
@@ -42,7 +48,9 @@ const SelectableListItem = ({
         <View>
           <Heading2
             bold={true}
-            textColor={selected ? context.colors.main['0'] : context.colors.ui.white}
+            textColor={
+              selected ? context.colors.main['0'] : context.colors.ui.white
+            }
             numberOfLines={2}
             ellipsizeMode={'tail'}
           >
@@ -50,7 +58,11 @@ const SelectableListItem = ({
           </Heading2>
         </View>
         <View>
-          <Paragraph textColor={selected ? context.colors.main['1'] : context.colors.ui.lightgrey}>
+          <Paragraph
+            textColor={
+              selected ? context.colors.main['1'] : context.colors.ui.lightgrey
+            }
+          >
             {subtitle}
           </Paragraph>
         </View>

package/src/components/molecules/selectable-list-item/selectable-list-item.styles.d.ts

@@ -1,28 +1,32 @@
-export function Stylesheet(context: any, selected: any, inverse: any): {
-    container: {
-        width: "100%";
-        flexDirection: "row";
-        alignItems: "center";
-        padding: number;
-        borderBottomLeftRadius: number;
-        borderBottomRightRadius: number;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-    };
-    iconCircle: {
-        justifyContent: "center";
-        alignItems: "center";
-        backgroundColor: any;
-        width: number;
-        height: number;
-        borderRadius: number;
-        marginRight: number;
-    };
-    textContainer: {
-        flex: number;
-        flexDirection: "column";
-        justifyContent: "center";
-        paddingTop: number;
-        paddingBottom: number;
-    };
+export function Stylesheet(
+  context: any,
+  selected: any,
+  inverse: any
+): {
+  container: {
+    width: '100%';
+    flexDirection: 'row';
+    alignItems: 'center';
+    padding: number;
+    borderBottomLeftRadius: number;
+    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+  };
+  iconCircle: {
+    justifyContent: 'center';
+    alignItems: 'center';
+    backgroundColor: any;
+    width: number;
+    height: number;
+    borderRadius: number;
+    marginRight: number;
+  };
+  textContainer: {
+    flex: number;
+    flexDirection: 'column';
+    justifyContent: 'center';
+    paddingTop: number;
+    paddingBottom: number;
+  };
 };

package/src/components/molecules/send-bubble/send-text-bubble.component.d.ts

@@ -1,11 +1,17 @@
 import * as React from 'react';
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type FailedBubbleProps = {
-    id: string;
-    text: string;
-    visualState: VisualState;
-    onPressEdit?: (id: string) => void;
-    onPressDelete?: (id: string) => void;
+  id: string;
+  text: string;
+  visualState: VisualState;
+  onPressEdit?: (id: string) => void;
+  onPressDelete?: (id: string) => void;
 };
-export declare const SendTextBubble: ({ id, text, visualState, onPressEdit, onPressDelete, }: FailedBubbleProps) => React.JSX.Element;
+export declare const SendTextBubble: ({
+  id,
+  text,
+  visualState,
+  onPressEdit,
+  onPressDelete,
+}: FailedBubbleProps) => React.JSX.Element;
 export {};

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type SnackbarProps = {
-    text: string;
-    visualState: VisualState;
+  text: string;
+  visualState: VisualState;
 };
-declare const Snackbar: ({ text, visualState }: SnackbarProps) => React.JSX.Element;
-export { Snackbar as Snackbar };
+declare const Snackbar: ({
+  text,
+  visualState,
+}: SnackbarProps) => React.JSX.Element;
+export {Snackbar as Snackbar};

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

@@ -1,7 +1,10 @@
-import React, { ReactNode } from 'react';
+import React, {ReactNode} from 'react';
 type SwipeProps = {
-    children: ReactNode;
-    onIndexChange?: (index: number) => void;
+  children: ReactNode;
+  onIndexChange?: (index: number) => void;
 };
-declare const Swipe: ({ children, onIndexChange }: SwipeProps) => React.JSX.Element;
-export { Swipe as Swipe };
+declare const Swipe: ({
+  children,
+  onIndexChange,
+}: SwipeProps) => React.JSX.Element;
+export {Swipe as Swipe};

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

@@ -1,9 +1,14 @@
 import * as React from 'react';
 type TagProps = {
-    value: string;
-    label: string;
-    onPress: (value: string, isSelected: boolean) => void;
-    isSelected: boolean;
+  value: string;
+  label: string;
+  onPress: (value: string, isSelected: boolean) => void;
+  isSelected: boolean;
 };
-declare const Tag: ({ label, onPress, value, isSelected }: TagProps) => React.JSX.Element;
-export { Tag as Tag };
+declare const Tag: ({
+  label,
+  onPress,
+  value,
+  isSelected,
+}: TagProps) => React.JSX.Element;
+export {Tag as Tag};

package/src/components/molecules/time-picker/time-picker.component.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
 interface TimePickerProps {
-    initialHours: string;
-    initialMinutes: string;
-    onChangeHours: (value: string) => void;
-    onChangeMinutes: (value: string) => void;
+  initialHours: string;
+  initialMinutes: string;
+  onChangeHours: (value: string) => void;
+  onChangeMinutes: (value: string) => void;
 }
-export declare const TimePicker: ({ initialHours, initialMinutes, onChangeHours, onChangeMinutes, }: TimePickerProps) => React.JSX.Element;
+export declare const TimePicker: ({
+  initialHours,
+  initialMinutes,
+  onChangeHours,
+  onChangeMinutes,
+}: TimePickerProps) => React.JSX.Element;
 export {};

package/src/components/molecules/time-picker/time-picker.component.tsx

@@ -40,7 +40,10 @@ export const TimePicker = ({
     <View style={styles.rootContainer}>
       <View style={styles.container}>
         <WheelPickerExpo
-          items={HOURS.map((value) => ({label: value == '' ? '--' : value, value: value}))}
+          items={HOURS.map((value) => ({
+            label: value == '' ? '--' : value,
+            value: value,
+          }))}
           onChange={({item}) => onChangeHours(item.value)}
           width={Scale.m * 4.5}
           height={320}
@@ -69,7 +72,10 @@ export const TimePicker = ({
       </View>
       <View style={styles.container}>
         <WheelPickerExpo
-          items={MINUTES.map((value) => ({label: value == '' ? '--' : value, value: value}))}
+          items={MINUTES.map((value) => ({
+            label: value == '' ? '--' : value,
+            value: value,
+          }))}
           onChange={({item}) => onChangeMinutes(item.value)}
           width={Scale.m * 4.5}
           height={320}

package/src/components/molecules/time-picker/time-picker.styles.d.ts

@@ -1,27 +1,27 @@
 export function Stylesheet(context: any): {
-    rootContainer: {
-        flexDirection: "row";
-        alignItems: "center";
-        gap: number;
-    };
-    container: {
-        borderColor: any;
-        borderWidth: number;
-        borderStyle: "solid";
-        borderRadius: number;
-        overflow: "hidden";
-        justifyContent: "center";
-        alignItems: "center";
-        maxHeight: number;
-        maxWidth: number;
-    };
-    text: {
-        fontWeight: "200";
-        fontSize: number;
-    };
-    colon: {
-        fontWeight: "200";
-        lineHeight: number;
-        fontSize: number;
-    };
+  rootContainer: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    gap: number;
+  };
+  container: {
+    borderColor: any;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderRadius: number;
+    overflow: 'hidden';
+    justifyContent: 'center';
+    alignItems: 'center';
+    maxHeight: number;
+    maxWidth: number;
+  };
+  text: {
+    fontWeight: '200';
+    fontSize: number;
+  };
+  colon: {
+    fontWeight: '200';
+    lineHeight: number;
+    fontSize: number;
+  };
 };

package/src/components/molecules/time-tracker/time-tracker.component.d.ts

@@ -1,9 +1,13 @@
 import * as React from 'react';
-import { VisualState } from '../../../types/visual-state.enum';
+import {VisualState} from '../../../types/visual-state.enum';
 type TimeTrackerProps = {
-    text: string;
-    textColor?: string;
-    visualState: VisualState;
+  text: string;
+  textColor?: string;
+  visualState: VisualState;
 };
-declare const TimeTracker: ({ text, visualState, textColor }: TimeTrackerProps) => React.JSX.Element;
-export { TimeTracker as TimeTracker };
+declare const TimeTracker: ({
+  text,
+  visualState,
+  textColor,
+}: TimeTrackerProps) => React.JSX.Element;
+export {TimeTracker as TimeTracker};

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

@@ -1,7 +1,10 @@
 import React from 'react';
 type TimeLineProps = {
-    checkIn: string;
-    checkOut?: string;
+  checkIn: string;
+  checkOut?: string;
 };
-export declare const TimeLine: ({ checkIn, checkOut }: TimeLineProps) => React.JSX.Element;
+export declare const TimeLine: ({
+  checkIn,
+  checkOut,
+}: TimeLineProps) => React.JSX.Element;
 export {};

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

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

package/src/components/molecules/wave-background/wave.component.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
-import { WaveProps } from '../../atoms/static-wave/static-wave.component';
-export declare const WaveBackground: ({ customWavePath, customStyle, heightSvgContainer, positionTop, }: WaveProps) => React.JSX.Element;
+import {WaveProps} from '../../atoms/static-wave/static-wave.component';
+export declare const WaveBackground: ({
+  customWavePath,
+  customStyle,
+  heightSvgContainer,
+  positionTop,
+}: WaveProps) => React.JSX.Element;

package/src/components/molecules/wide-button/wide-button.component.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
 type ButtonProps = {
-    text: string;
-    disabled?: boolean;
-    onPress?: () => void;
-    backgroundColor?: string;
+  text: string;
+  disabled?: boolean;
+  onPress?: () => void;
+  backgroundColor?: string;
 };
-declare const WideButton: ({ text, disabled, onPress, backgroundColor, }: ButtonProps) => React.JSX.Element;
-export { WideButton as WideButton };
+declare const WideButton: ({
+  text,
+  disabled,
+  onPress,
+  backgroundColor,
+}: ButtonProps) => React.JSX.Element;
+export {WideButton as WideButton};

package/src/components/molecules/wide-button/wide-button.styles.d.ts

@@ -1,11 +1,15 @@
-export function Stylesheet(context: any, disabled: any, backgroundColor: any): {
-    container: {
-        width: "100%";
-        backgroundColor: any;
-        paddingVertical: number;
-        paddingHorizontal: number;
-        justifyContent: "center";
-        alignItems: "center";
-        borderRadius: number;
-    };
+export function Stylesheet(
+  context: any,
+  disabled: any,
+  backgroundColor: any
+): {
+  container: {
+    width: '100%';
+    backgroundColor: any;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+    borderRadius: number;
+  };
 };

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

@@ -1,23 +1,41 @@
 import * as React from 'react';
-import { ImageSourcePropType } from 'react-native';
-import { Initials } from '../../../models/initials.model';
-import { VisualState } from '../../../types/visual-state.enum';
+import {ImageSourcePropType} from 'react-native';
+import {Initials} from '../../../models/initials.model';
+import {VisualState} from '../../../types/visual-state.enum';
 type ChildListItemProps = {
-    id: string;
-    name: string;
-    department: string;
-    selectable: boolean;
-    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;
-    tags?: string[];
-    error: boolean;
-    isBirthday?: boolean;
+  id: string;
+  name: string;
+  department: string;
+  selectable: boolean;
+  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;
+  tags?: string[];
+  error: boolean;
+  isBirthday?: boolean;
 };
-declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, error, isBirthday }: ChildListItemProps) => React.JSX.Element>;
-export { ChildListItem as ChildListItem };
+declare const ChildListItem: React.MemoExoticComponent<
+  ({
+    id,
+    name,
+    department,
+    selectable,
+    isSelected,
+    onPressArrow,
+    onPressText,
+    onLongPress,
+    onSelect,
+    sourceAvatar,
+    textTimeTracker,
+    visualStateTimeTracker,
+    tags,
+    error,
+    isBirthday,
+  }: ChildListItemProps) => React.JSX.Element
+>;
+export {ChildListItem as ChildListItem};

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

@@ -48,7 +48,7 @@ const ChildListItem = React.memo(
     visualStateTimeTracker,
     tags,
     error,
-    isBirthday
+    isBirthday,
   }: ChildListItemProps) => {
     const context = useContext(ThemeCtx);
     const styles = Stylesheet(isSelected, context);
@@ -72,18 +72,25 @@ const ChildListItem = React.memo(
     const textColor = useMemo(() => {
       return isSelected
         ? context.colors.ui.white
-        : error ? context.colors.ui.error.default : context.colors.ui.black;
+        : error
+        ? context.colors.ui.error.default
+        : context.colors.ui.black;
     }, [isSelected, error]);
 
-    const renderTimeTracker = (textTimeTracker?: string, visualStateTimeTracker?: VisualState) => {
+    const renderTimeTracker = (
+      textTimeTracker?: string,
+      visualStateTimeTracker?: VisualState
+    ) => {
       if (textTimeTracker && visualStateTimeTracker) {
-        return <TimeTracker
-        text={textTimeTracker}
-        visualState={visualStateTimeTracker}
-        textColor={textColor}
-      />
+        return (
+          <TimeTracker
+            text={textTimeTracker}
+            visualState={visualStateTimeTracker}
+            textColor={textColor}
+          />
+        );
       }
-    }
+    };
 
     return (
       <View style={styles.container}>
@@ -108,22 +115,20 @@ const ChildListItem = React.memo(
                   bold={true}
                   numberOfLines={1}
                   ellipsizeMode={'tail'}
-                  textColor={
-                    textColor
-                  }
+                  textColor={textColor}
                 >
-                    {
-                        error ?  <Icon name='exclamation-circle' style='regular' color={context.colors.ui.error.default} /> : ''
-                    }
-                    { error ? ' ' + name : name}
+                  {error ? (
+                    <Icon
+                      name="exclamation-circle"
+                      style="regular"
+                      color={context.colors.ui.error.default}
+                    />
+                  ) : (
+                    ''
+                  )}
+                  {error ? ' ' + name : name}
                 </Heading2>
-                <SmallText
-                  textColor={
-                    textColor
-                  }
-                >
-                  {department}
-                </SmallText>
+                <SmallText textColor={textColor}>{department}</SmallText>
               </View>
             </View>
           </Pressable>
@@ -142,9 +147,7 @@ const ChildListItem = React.memo(
           )}
         </View>
         {tags && (
-          <View
-            style={styles.tagContainer}
-          >
+          <View style={styles.tagContainer}>
             {tags.map((tag) => {
               return (
                 <ChildListTag