@tactics/toddle-styleguide 2.0.2 → 2.0.4

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

@@ -1,33 +1,33 @@
 export function Stylesheet(context: any): {
-    container: {
-        width: "100%";
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-        borderTopLeftRadius: number;
-        borderBottomLeftRadius: number;
-        flexDirection: "row";
-        backgroundColor: any;
-    };
-    innerContainer: {
-        flex: number;
-        padding: number;
-        flexDirection: "row";
-        alignItems: "center";
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-        borderTopLeftRadius: number;
-        borderBottomLeftRadius: number;
-    };
-    childTextContainer: {
-        flex: number;
-        marginLeft: number;
-    };
-    iconContainer: {
-        alignItems: "flex-end";
-        justifyContent: "center";
-        paddingRight: number;
-        width: number;
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-    };
+  container: {
+    width: '100%';
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderBottomLeftRadius: number;
+    flexDirection: 'row';
+    backgroundColor: any;
+  };
+  innerContainer: {
+    flex: number;
+    padding: number;
+    flexDirection: 'row';
+    alignItems: 'center';
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderBottomLeftRadius: number;
+  };
+  childTextContainer: {
+    flex: number;
+    marginLeft: number;
+  };
+  iconContainer: {
+    alignItems: 'flex-end';
+    justifyContent: 'center';
+    paddingRight: number;
+    width: number;
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+  };
 };

package/src/components/organisms/person-info-card/person-info-card.component.d.ts

@@ -1,14 +1,22 @@
-import { ImageSourcePropType, ViewStyle } from 'react-native';
-import { Initials } from '../../../models/initials.model';
+import {ImageSourcePropType, ViewStyle} from 'react-native';
+import {Initials} from '../../../models/initials.model';
 import React from 'react';
 interface IContactInfoCard {
-    source: ImageSourcePropType | Initials;
-    name: string;
-    label?: string;
-    isBlocked?: boolean;
-    isActive?: boolean;
-    style?: ViewStyle;
-    isLoading?: boolean;
+  source: ImageSourcePropType | Initials;
+  name: string;
+  label?: string;
+  isBlocked?: boolean;
+  isActive?: boolean;
+  style?: ViewStyle;
+  isLoading?: boolean;
 }
-export declare const PersonInfoCard: ({ source, isBlocked, isActive, name, label, style, isLoading, }: IContactInfoCard) => React.JSX.Element;
+export declare const PersonInfoCard: ({
+  source,
+  isBlocked,
+  isActive,
+  name,
+  label,
+  style,
+  isLoading,
+}: IContactInfoCard) => React.JSX.Element;
 export {};

package/src/components/organisms/tab-view/tab-view.component.d.ts

@@ -1,12 +1,16 @@
-import { ReactNode } from 'react';
+import {ReactNode} from 'react';
 import React from 'react';
 interface TabViewProps {
-    tabItem: {
-        value: string;
-        label: string;
-    }[];
-    children: ReactNode;
-    setTabValue: (value: string) => void;
+  tabItem: {
+    value: string;
+    label: string;
+  }[];
+  children: ReactNode;
+  setTabValue: (value: string) => void;
 }
-export declare const TabView: ({ tabItem, setTabValue, children }: TabViewProps) => React.JSX.Element;
+export declare const TabView: ({
+  tabItem,
+  setTabValue,
+  children,
+}: TabViewProps) => React.JSX.Element;
 export {};

package/src/components/organisms/tab-view/tab-view.styles.d.ts

@@ -1,10 +1,10 @@
 export function Stylesheet(): {
-    rootContainer: {
-        width: "100%";
-        height: "100%";
-        gap: number;
-    };
-    swipeContainer: {
-        flex: number;
-    };
+  rootContainer: {
+    width: '100%';
+    height: '100%';
+    gap: number;
+  };
+  swipeContainer: {
+    flex: number;
+  };
 };

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

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

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

@@ -1,16 +1,16 @@
 export function Stylesheet(): {
-    rootContainer: {
-        width: "100%";
-        gap: number;
-    };
-    textBubbleRootContainer: {
-        minWidth: "50%";
-    };
-    failedBubbleRootContainer: {
-        minWidth: "50%";
-    };
-    timestampContainer: {
-        marginBottom: number;
-        alignSelf: "flex-end";
-    };
+  rootContainer: {
+    width: '100%';
+    gap: number;
+  };
+  textBubbleRootContainer: {
+    minWidth: '50%';
+  };
+  failedBubbleRootContainer: {
+    minWidth: '50%';
+  };
+  timestampContainer: {
+    marginBottom: number;
+    alignSelf: 'flex-end';
+  };
 };

package/src/components/organisms/timetable-edit/timetable-edit.component.d.ts

@@ -1,17 +1,29 @@
 import React from 'react';
-import { TimetableEditState } from '../../../types/timetable-edit.enum';
+import {TimetableEditState} from '../../../types/timetable-edit.enum';
 interface TimetableEditProps {
-    index: number;
-    initialInHours: string;
-    initialInMinutes: string;
-    initialOutHours: string;
-    initialOutMinutes: string;
-    onChangeInHours: (value: string) => void;
-    onChangeInMinutes: (value: string) => void;
-    onChangeOutHours: (value: string) => void;
-    onChangeOutMinutes: (value: string) => void;
-    onPressTag: (val: TimetableEditState, index: number) => void;
-    initialEditState: string;
+  index: number;
+  initialInHours: string;
+  initialInMinutes: string;
+  initialOutHours: string;
+  initialOutMinutes: string;
+  onChangeInHours: (value: string) => void;
+  onChangeInMinutes: (value: string) => void;
+  onChangeOutHours: (value: string) => void;
+  onChangeOutMinutes: (value: string) => void;
+  onPressTag: (val: TimetableEditState, index: number) => void;
+  initialEditState: string;
 }
-export declare const TimetableEdit: ({ index, initialInHours, initialInMinutes, initialOutHours, initialOutMinutes, onChangeInHours, onChangeInMinutes, onChangeOutHours, onChangeOutMinutes, initialEditState, onPressTag }: TimetableEditProps) => React.JSX.Element;
+export declare const TimetableEdit: ({
+  index,
+  initialInHours,
+  initialInMinutes,
+  initialOutHours,
+  initialOutMinutes,
+  onChangeInHours,
+  onChangeInMinutes,
+  onChangeOutHours,
+  onChangeOutMinutes,
+  initialEditState,
+  onPressTag,
+}: TimetableEditProps) => React.JSX.Element;
 export {};

package/src/components/organisms/timetable-edit/timetable-edit.component.tsx

@@ -3,10 +3,10 @@ import {Heading3} from '../../atoms/heading-components';
 import {useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
 import React from 'react';
-import { Stylesheet } from './timetable-edit.styles';
-import { Tag } from '../../molecules/tag/tag.component';
-import { TimetableEditState } from '../../../types/timetable-edit.enum';
-import { BareTimePicker } from '../../molecules/bare-time-picker/bare-time-picker.component';
+import {Stylesheet} from './timetable-edit.styles';
+import {Tag} from '../../molecules/tag/tag.component';
+import {TimetableEditState} from '../../../types/timetable-edit.enum';
+import {BareTimePicker} from '../../molecules/bare-time-picker/bare-time-picker.component';
 
 interface TimetableEditProps {
   index: number;
@@ -18,8 +18,8 @@ interface TimetableEditProps {
   onChangeInMinutes: (value: string) => void;
   onChangeOutHours: (value: string) => void;
   onChangeOutMinutes: (value: string) => void;
-  onPressTag: (val: TimetableEditState, index: number) => void
-  initialEditState: string
+  onPressTag: (val: TimetableEditState, index: number) => void;
+  initialEditState: string;
 }
 
 export const TimetableEdit = ({
@@ -33,63 +33,65 @@ export const TimetableEdit = ({
   onChangeOutHours,
   onChangeOutMinutes,
   initialEditState,
-  onPressTag
+  onPressTag,
 }: TimetableEditProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
 
   return (
     <View style={styles.rootContainer}>
-        <View style={styles.rowContainer}>
-            <View style={styles.tagContainer}>
-                <Heading3
-                    addStyle={{width: 'auto'}}
-                    bold={true}
-                >Van</Heading3>
-                <Tag
-                    value={TimetableEditState.IN}
-                    label={`${initialInHours == '' ? '--' : initialInHours}:${initialInMinutes == '' ? '--' : initialInMinutes}`}
-                    isSelected={initialEditState == TimetableEditState.IN}
-                    onPress={() => {
-                        onPressTag(TimetableEditState.IN, index)
-                    }}
-                />
-            </View>
-            <View style={styles.tagContainer}>
-                <Heading3
-                    addStyle={{width: 'auto'}}
-                    bold={true}
-                >Tot</Heading3>
-                <Tag
-                    value={TimetableEditState.OUT}
-                    label={`${initialOutHours == '' ? '--' : initialOutHours}:${initialOutMinutes == '' ? '--' : initialOutMinutes}`}
-                    isSelected={initialEditState == TimetableEditState.OUT}
-                    onPress={() => {
-                        onPressTag(TimetableEditState.OUT, index)
-                    }}
-                />
-            </View>
+      <View style={styles.rowContainer}>
+        <View style={styles.tagContainer}>
+          <Heading3 addStyle={{width: 'auto'}} bold={true}>
+            Van
+          </Heading3>
+          <Tag
+            value={TimetableEditState.IN}
+            label={`${initialInHours == '' ? '--' : initialInHours}:${
+              initialInMinutes == '' ? '--' : initialInMinutes
+            }`}
+            isSelected={initialEditState == TimetableEditState.IN}
+            onPress={() => {
+              onPressTag(TimetableEditState.IN, index);
+            }}
+          />
         </View>
-        {initialEditState === TimetableEditState.IN &&
-            <View style={styles.pickerContainer}>
-                <BareTimePicker
-                    initialHours={initialInHours}
-                    initialMinutes={initialInMinutes}
-                    onChangeHours={onChangeInHours}
-                    onChangeMinutes={onChangeInMinutes}
-                />
-            </View>
-        }
-        {initialEditState === TimetableEditState.OUT &&
-            <View style={styles.pickerContainer}>
-                <BareTimePicker
-                    initialHours={initialOutHours}
-                    initialMinutes={initialOutMinutes}
-                    onChangeHours={onChangeOutHours}
-                    onChangeMinutes={onChangeOutMinutes}
-                />
-            </View>
-        }
+        <View style={styles.tagContainer}>
+          <Heading3 addStyle={{width: 'auto'}} bold={true}>
+            Tot
+          </Heading3>
+          <Tag
+            value={TimetableEditState.OUT}
+            label={`${initialOutHours == '' ? '--' : initialOutHours}:${
+              initialOutMinutes == '' ? '--' : initialOutMinutes
+            }`}
+            isSelected={initialEditState == TimetableEditState.OUT}
+            onPress={() => {
+              onPressTag(TimetableEditState.OUT, index);
+            }}
+          />
+        </View>
+      </View>
+      {initialEditState === TimetableEditState.IN && (
+        <View style={styles.pickerContainer}>
+          <BareTimePicker
+            initialHours={initialInHours}
+            initialMinutes={initialInMinutes}
+            onChangeHours={onChangeInHours}
+            onChangeMinutes={onChangeInMinutes}
+          />
+        </View>
+      )}
+      {initialEditState === TimetableEditState.OUT && (
+        <View style={styles.pickerContainer}>
+          <BareTimePicker
+            initialHours={initialOutHours}
+            initialMinutes={initialOutMinutes}
+            onChangeHours={onChangeOutHours}
+            onChangeMinutes={onChangeOutMinutes}
+          />
+        </View>
+      )}
     </View>
   );
 };

package/src/components/organisms/timetable-edit/timetable-edit.preview.tsx

@@ -1,9 +1,9 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {Modal} from '../../templates/modal/modal.component';
-import { Button } from '../../molecules/button/button.component';
-import { TimetableEdit } from './timetable-edit.component';
-import { TimetableEditState } from '../../../types/timetable-edit.enum';
+import {Button} from '../../molecules/button/button.component';
+import {TimetableEdit} from './timetable-edit.component';
+import {TimetableEditState} from '../../../types/timetable-edit.enum';
 
 export const TimetableEditPreview = ({}: {}) => {
   const [popoverIsVisible, setPopoverIsVisible] = useState(false);
@@ -40,7 +40,7 @@ export const TimetableEditPreview = ({}: {}) => {
         <Button
           onPress={() => {
             setEditState(TimetableEditState.NONE);
-            setPopoverIsVisible(true)
+            setPopoverIsVisible(true);
           }}
           label="Open popover"
         />
@@ -52,26 +52,28 @@ export const TimetableEditPreview = ({}: {}) => {
         isVisible={popoverIsVisible}
       >
         <View>
-            <TimetableEdit
-                index={1}
-                initialInHours={checkInHours}
-                initialInMinutes={checkInMinutes}
-                initialOutHours={checkOutHours}
-                initialOutMinutes={checkOutMinutes}
-                onChangeInHours={setCheckInHours}
-                onChangeInMinutes={setCheckInMinutes}
-                onChangeOutHours={setCheckOutHours}
-                onChangeOutMinutes={setCheckOutMinutes}
-                initialEditState={editState}
-                onPressTag={(val, index) => {setEditState(val)}}
-             />
+          <TimetableEdit
+            index={1}
+            initialInHours={checkInHours}
+            initialInMinutes={checkInMinutes}
+            initialOutHours={checkOutHours}
+            initialOutMinutes={checkOutMinutes}
+            onChangeInHours={setCheckInHours}
+            onChangeInMinutes={setCheckInMinutes}
+            onChangeOutHours={setCheckOutHours}
+            onChangeOutMinutes={setCheckOutMinutes}
+            initialEditState={editState}
+            onPressTag={(val, index) => {
+              setEditState(val);
+            }}
+          />
 
           <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
             <Button
               label={'Bewaar'}
               onPress={() => {
                 setEditState(TimetableEditState.NONE);
-                console.log('Bewaar registratie aanpassing')
+                console.log('Bewaar registratie aanpassing');
               }}
             />
           </View>

package/src/components/organisms/timetable-edit/timetable-edit.styles.d.ts

@@ -1,21 +1,21 @@
 export function Stylesheet(context: any): {
-    rootContainer: {
-        flexDirection: "column";
-        gap: number;
-        justifyContent: "center";
-        alignItems: "center";
-    };
-    rowContainer: {
-        flexDirection: "row";
-        alignItems: "center";
-        gap: number;
-    };
-    tagContainer: {
-        flexDirection: "row";
-        alignItems: "center";
-        gap: number;
-    };
-    pickerContainer: {
-        justifyContent: "center";
-    };
+  rootContainer: {
+    flexDirection: 'column';
+    gap: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
+  rowContainer: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    gap: number;
+  };
+  tagContainer: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    gap: number;
+  };
+  pickerContainer: {
+    justifyContent: 'center';
+  };
 };

package/src/components/organisms/timetable-edit/timetable-edit.styles.js

@@ -2,24 +2,24 @@ import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale/index';
 
 export const Stylesheet = (context) =>
-    StyleSheet.create({
-        rootContainer: {
-            flexDirection: 'column',
-            gap: 16,
-            justifyContent: 'center',
-            alignItems: 'center'
-        },
-        rowContainer : {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 32
-        },
-        tagContainer: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 16
-        },
-        pickerContainer: {
-            justifyContent: 'center'
-        }
-    });
+  StyleSheet.create({
+    rootContainer: {
+      flexDirection: 'column',
+      gap: 16,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    rowContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 32,
+    },
+    tagContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 16,
+    },
+    pickerContainer: {
+      justifyContent: 'center',
+    },
+  });

package/src/components/organisms/timetable-editor/components/timetable-edit-wrapper.d.ts

@@ -1,12 +1,18 @@
-import { TimeSlotRecord } from "../../../../models/time-slot-record";
-import React from "react";
-import { TimetableEditState } from "../../../../types/timetable-edit.enum";
+import {TimeSlotRecord} from '../../../../models/time-slot-record';
+import React from 'react';
+import {TimetableEditState} from '../../../../types/timetable-edit.enum';
 interface TimetableEditWrapperProps {
-    index: number;
-    record: TimeSlotRecord;
-    onUpdate: (rec: TimeSlotRecord) => void;
-    onPressTag: (val: TimetableEditState, index: number) => void;
-    editState: TimetableEditState;
+  index: number;
+  record: TimeSlotRecord;
+  onUpdate: (rec: TimeSlotRecord) => void;
+  onPressTag: (val: TimetableEditState, index: number) => void;
+  editState: TimetableEditState;
 }
-export declare const TimetableEditWrapper: ({ index, record, onUpdate, editState, onPressTag }: TimetableEditWrapperProps) => React.JSX.Element;
+export declare const TimetableEditWrapper: ({
+  index,
+  record,
+  onUpdate,
+  editState,
+  onPressTag,
+}: TimetableEditWrapperProps) => React.JSX.Element;
 export {};