@tactics/toddle-styleguide 2.0.4 → 3.0.1

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

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

package/src/components/molecules/pressable-icon/pressable-icon.component.d.ts

@@ -1,14 +1,9 @@
 import * as React from 'react';
 type PressableIconProps = {
-  icon: React.ReactElement;
-  inverted?: boolean;
-  disabled?: boolean;
-  onPress?: () => void;
+    icon: React.ReactElement;
+    inverted?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
 };
-export declare const PressableIcon: ({
-  icon,
-  inverted,
-  disabled,
-  onPress,
-}: PressableIconProps) => React.JSX.Element;
+export declare const PressableIcon: ({ icon, inverted, disabled, onPress, }: PressableIconProps) => React.JSX.Element;
 export {};

package/src/components/molecules/quick-filter/quick-filter.component.d.ts

@@ -1,19 +1,12 @@
 import * as React from 'react';
-import {State} from '../../../types/state.enum';
+import { State } from '../../../types/state.enum';
 type QuickFilterProps = {
-  id: string;
-  isLoading: boolean;
-  amount: number;
-  isSelected?: boolean;
-  onSelect: (id: string) => void;
-  visualState: State;
+    id: string;
+    isLoading: boolean;
+    amount: number;
+    isSelected?: boolean;
+    onSelect: (id: string) => void;
+    visualState: State;
 };
-declare const QuickFilter: ({
-  id,
-  isLoading,
-  amount,
-  isSelected,
-  onSelect,
-  visualState,
-}: QuickFilterProps) => React.JSX.Element;
-export {QuickFilter as QuickFilter};
+declare const QuickFilter: ({ id, isLoading, amount, isSelected, onSelect, visualState, }: QuickFilterProps) => React.JSX.Element;
+export { QuickFilter as QuickFilter };

package/src/components/molecules/search-input/search.component.d.ts

@@ -1,15 +1,10 @@
 import * as React from 'react';
-import {TextInputProps} from 'react-native';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+import { TextInputProps } from 'react-native';
+import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
 interface SearchProps extends TextInputProps {
-  keyboardType?: KeyBoardTypes;
-  onPressClear: () => void;
-  showClearIcon: boolean;
+    keyboardType?: KeyBoardTypes;
+    onPressClear: () => void;
+    showClearIcon: boolean;
 }
-declare const Search: ({
-  keyboardType,
-  onPressClear,
-  showClearIcon,
-  ...props
-}: SearchProps) => React.JSX.Element;
-export {Search as Search};
+declare const Search: ({ keyboardType, onPressClear, showClearIcon, ...props }: SearchProps) => React.JSX.Element;
+export { Search as Search };

package/src/components/molecules/search-input/search.preview.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const SearchPreview: ({}: {}) => React.JSX.Element;
+export declare const SearchPreview: ({}?: {}) => React.JSX.Element;

package/src/components/molecules/select-link/select-link.component.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 type SelectLinkProps = {
-  label: string;
-  onPress: () => void;
+    label: string;
+    onPress: () => void;
 };
-declare const SelectLink: ({
-  label,
-  onPress,
-}: SelectLinkProps) => React.JSX.Element;
-export {SelectLink as SelectLink};
+declare const SelectLink: ({ label, onPress }: SelectLinkProps) => React.JSX.Element;
+export { SelectLink as SelectLink };

package/src/components/molecules/select-list-item/select-list-item.component.d.ts

@@ -1,19 +1,12 @@
 import * as React from 'react';
-import {ImageSourcePropType} from 'react-native';
+import { ImageSourcePropType } from 'react-native';
 type SelectListProps = {
-  title: string;
-  subtitle?: string;
-  icon: React.ReactElement;
-  onPress?: () => void;
-  inverse?: boolean;
-  image?: ImageSourcePropType;
+    title: string;
+    subtitle?: string;
+    icon: React.ReactElement;
+    onPress?: () => void;
+    inverse?: boolean;
+    image?: ImageSourcePropType;
 };
-declare const SelectListItem: ({
-  title,
-  subtitle,
-  icon,
-  onPress,
-  inverse,
-  image,
-}: SelectListProps) => React.JSX.Element;
-export {SelectListItem as SelectListItem};
+declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, image, }: SelectListProps) => React.JSX.Element;
+export { SelectListItem as SelectListItem };

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

@@ -1,17 +1,12 @@
 import React from 'react';
 type PickerProps = {
-  placeholder?: string;
-  data: {
-    value: number | string;
-    label: string;
-  }[];
-  onChange: (item: string) => void;
-  defaultValue: string;
+    placeholder?: string;
+    data: {
+        value: number | string;
+        label: string;
+    }[];
+    onChange: (item: string) => void;
+    defaultValue: string;
 };
-export declare const SelectPicker: ({
-  placeholder,
-  data,
-  onChange,
-  defaultValue,
-}: PickerProps) => React.JSX.Element;
+export declare const SelectPicker: ({ placeholder, data, onChange, defaultValue, }: PickerProps) => React.JSX.Element;
 export {};

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

@@ -1,18 +1,11 @@
 import * as React from 'react';
 type SelectableListProps = {
-  title: string;
-  subtitle?: string;
-  icon: React.ReactElement;
-  onPress?: () => void;
-  inverse?: boolean;
-  selected: boolean;
+    title: string;
+    subtitle?: string;
+    icon: React.ReactElement;
+    onPress?: () => void;
+    inverse?: boolean;
+    selected: boolean;
 };
-declare const SelectableListItem: ({
-  title,
-  subtitle,
-  icon,
-  onPress,
-  inverse,
-  selected,
-}: SelectableListProps) => React.JSX.Element;
-export {SelectableListItem as SelectableListItem};
+declare const SelectableListItem: ({ title, subtitle, icon, onPress, inverse, selected, }: SelectableListProps) => React.JSX.Element;
+export { SelectableListItem as SelectableListItem };

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

@@ -1,17 +1,11 @@
 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,11 +1,8 @@
 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,10 +1,7 @@
-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/swipe/swipe.component.native.tsx

@@ -0,0 +1,78 @@
+import React, {Children, ReactNode, useContext, useRef, useState} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './swipe.styles';
+import {Icon} from '../../../icons/index';
+import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view';
+import {Pressable, View} from 'react-native';
+
+type SwipeProps = {
+  children: ReactNode;
+  onIndexChange?: (index: number) => void;
+};
+
+const Swipe = ({children, onIndexChange}: SwipeProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet();
+  const viewPagerRef = useRef<PagerView>(null);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const count = Children.count(children);
+
+  if (count > 5) {
+    console.warn(' for more then 5 child-components, use another way to show');
+  }
+
+  const handlePageSelected = (event: PagerViewOnPageSelectedEvent) => {
+    const currentIndex = event.nativeEvent.position;
+    setCurrentPage(currentIndex);
+
+    if (onIndexChange) {
+      onIndexChange(currentIndex);
+    }
+  };
+
+  return (
+    <View style={styles.rootContainer}>
+      {currentPage !== 0 && (
+        <Pressable
+          style={styles.leftArrowContainer}
+          onPress={() =>
+            viewPagerRef.current?.setPage(
+              currentPage != 1 ? currentPage - 1 : 0
+            )
+          }
+        >
+          <Icon
+            style={'regular'}
+            name={'chevron-left'}
+            color={context.colors.main['0']}
+          />
+        </Pressable>
+      )}
+
+      {currentPage !== count - 1 && (
+        <Pressable
+          style={styles.rightArrowContainer}
+          onPress={() => viewPagerRef.current?.setPage(currentPage + 1)}
+        >
+          <Icon
+            style={'regular'}
+            name={'chevron-right'}
+            color={context.colors.main['0']}
+          />
+        </Pressable>
+      )}
+
+      <PagerView
+        ref={viewPagerRef}
+        style={styles.swipeContainer}
+        initialPage={0}
+        collapsable={false}
+        onPageSelected={handlePageSelected}
+      >
+        {children}
+      </PagerView>
+    </View>
+  );
+};
+export {Swipe as Swipe};

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

@@ -1,8 +1,8 @@
 import React, {Children, ReactNode, useContext, useRef, useState} from 'react';
+import { Platform } from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './swipe.styles';
 import {Icon} from '../../../icons/index';
-import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view';
 import {Pressable, View} from 'react-native';
 
 type SwipeProps = {
@@ -11,68 +11,10 @@ type SwipeProps = {
 };
 
 const Swipe = ({children, onIndexChange}: SwipeProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet();
-  const viewPagerRef = useRef<PagerView>(null);
-  const [currentPage, setCurrentPage] = useState(0);
 
-  const count = Children.count(children);
-
-  if (count > 5) {
-    console.warn(' for more then 5 child-components, use another way to show');
-  }
-
-  const handlePageSelected = (event: PagerViewOnPageSelectedEvent) => {
-    const currentIndex = event.nativeEvent.position;
-    setCurrentPage(currentIndex);
-
-    if (onIndexChange) {
-      onIndexChange(currentIndex);
-    }
-  };
-
-  return (
-    <View style={styles.rootContainer}>
-      {currentPage !== 0 && (
-        <Pressable
-          style={styles.leftArrowContainer}
-          onPress={() =>
-            viewPagerRef.current?.setPage(
-              currentPage != 1 ? currentPage - 1 : 0
-            )
-          }
-        >
-          <Icon
-            style={'regular'}
-            name={'chevron-left'}
-            color={context.colors.main['0']}
-          />
-        </Pressable>
-      )}
-
-      {currentPage !== count - 1 && (
-        <Pressable
-          style={styles.rightArrowContainer}
-          onPress={() => viewPagerRef.current?.setPage(currentPage + 1)}
-        >
-          <Icon
-            style={'regular'}
-            name={'chevron-right'}
-            color={context.colors.main['0']}
-          />
-        </Pressable>
-      )}
-
-      <PagerView
-        ref={viewPagerRef}
-        style={styles.swipeContainer}
-        initialPage={0}
-        collapsable={false}
-        onPageSelected={handlePageSelected}
-      >
-        {children}
-      </PagerView>
-    </View>
-  );
+    const renderChildren = Children.map(children, (child, index) => {
+      return child
+    });
+    return <>{renderChildren ? renderChildren[0] : null}</>;
 };
 export {Swipe as Swipe};

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

@@ -1,14 +1,9 @@
 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,14 +1,9 @@
 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-tracker/time-tracker.component.d.ts

@@ -1,13 +1,9 @@
 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,10 +1,7 @@
 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,11 +1,8 @@
 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,8 +1,3 @@
 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,14 +1,9 @@
 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/organisms/child-list-item/child-list-item.component.d.ts

@@ -1,41 +1,23 @@
 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/components/child-list-tag.component.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
 type ChildListTagProps = {
-  label: string;
-  isSelected: boolean;
+    label: string;
+    isSelected: boolean;
 };
-export declare const ChildListTag: ({
-  label,
-  isSelected,
-}: ChildListTagProps) => React.JSX.Element;
+export declare const ChildListTag: ({ label, isSelected }: ChildListTagProps) => React.JSX.Element;
 export {};

package/src/components/organisms/contact-item/contact-item.component.d.ts

@@ -1,14 +1,9 @@
 import * as React from 'react';
 type ContactItemProps = {
-  name: string;
-  label: string;
-  onPress?: () => void;
-  isBlocked?: boolean;
+    name: string;
+    label: string;
+    onPress?: () => void;
+    isBlocked?: boolean;
 };
-declare const ContactItem: ({
-  name,
-  label,
-  onPress,
-  isBlocked,
-}: ContactItemProps) => React.JSX.Element;
-export {ContactItem as ContactItem};
+declare const ContactItem: ({ name, label, onPress, isBlocked }: ContactItemProps) => React.JSX.Element;
+export { ContactItem as ContactItem };

package/src/components/organisms/journal-entry/components/entry-type-indicator/entry-type-indicator.component.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
 interface EntryTypeIndicatorProps {
-  loading?: boolean;
-  send: boolean;
+    loading?: boolean;
+    send: boolean;
 }
-export declare const EntryTypeIndicator: ({
-  loading,
-  send,
-}: EntryTypeIndicatorProps) => React.JSX.Element;
+export declare const EntryTypeIndicator: ({ loading, send, }: EntryTypeIndicatorProps) => React.JSX.Element;
 export {};