@tactics/toddle-styleguide 1.3.2 → 1.4.0

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

@@ -1,37 +1,21 @@
 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[];
+    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[];
 };
-declare const ChildListItem: React.MemoExoticComponent<
-  ({
-    id,
-    name,
-    department,
-    selectable,
-    isSelected,
-    onPressArrow,
-    onPressText,
-    onLongPress,
-    onSelect,
-    sourceAvatar,
-    textTimeTracker,
-    visualStateTimeTracker,
-    tags,
-  }: ChildListItemProps) => JSX.Element
->;
-export {ChildListItem as ChildListItem};
+declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, }: ChildListItemProps) => React.JSX.Element>;
+export { ChildListItem as ChildListItem };

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

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

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

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

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

@@ -1,9 +1,7 @@
+import React from 'react';
 type ChildListTagProps = {
-  label: string;
-  isSelected: boolean;
+    label: string;
+    isSelected: boolean;
 };
-export declare const ChildListTag: ({
-  label,
-  isSelected,
-}: ChildListTagProps) => 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,13 +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) => 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/contact-item/contact-item.preview.d.ts

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

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

@@ -1,14 +1,15 @@
-export function Stylesheet(isBlocked): {
-  container: {
-    width: string;
-    flexDirection: 'row';
-    alignItems: 'center';
-  };
-  textContainer: {
-    flex: number;
-    marginLeft: number;
-  };
-  iconSquare: {
-    marginLeft: number;
-  };
+export function Stylesheet(isBlocked: any): {
+    container: {
+        width: "100%";
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    textContainer: {
+        flex: number;
+        marginLeft: number;
+        marginRight: number;
+    };
+    iconSquare: {
+        marginLeft: number;
+    };
 };

package/src/components/organisms/day-select/day-select.component.d.ts

@@ -1,12 +1,9 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import React from 'react';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type DaySelectProps = {
-  onSelectDate: (date: ToddleDateTime) => void;
-  startDate: ToddleDateTime;
-  selectedDate: ToddleDateTime;
+    onSelectDate: (date: ToddleDateTime) => void;
+    startDate: ToddleDateTime;
+    selectedDate: ToddleDateTime;
 };
-declare const DaySelect: ({
-  onSelectDate,
-  selectedDate,
-  startDate,
-}: DaySelectProps) => JSX.Element;
-export {DaySelect as DaySelect};
+declare const DaySelect: ({ onSelectDate, selectedDate, startDate }: DaySelectProps) => React.JSX.Element;
+export { DaySelect as DaySelect };

package/src/components/organisms/day-select/day-select.preview.d.ts

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

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

@@ -1,9 +1,7 @@
+/// <reference types="react" />
 interface EntryTypeIndicatorProps {
-  loading?: boolean;
-  send: boolean;
+    loading?: boolean;
+    send: boolean;
 }
-export declare const EntryTypeIndicator: ({
-  loading,
-  send,
-}: EntryTypeIndicatorProps) => JSX.Element;
+export declare const EntryTypeIndicator: ({ loading, send, }: EntryTypeIndicatorProps) => import("react").JSX.Element;
 export {};

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

@@ -2,6 +2,7 @@ import {useContext} from 'react';
 import {Animated, View, Easing} from 'react-native';
 import {ThemeCtx} from '../../../../../context/theme.context';
 import {Stylesheet} from './entry-type-indicator.styles';
+import React from 'react';
 
 interface EntryTypeIndicatorProps {
   loading?: boolean;

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

@@ -1,16 +1,11 @@
-import {ToddleDateTime} from '../../../../../utilities/toddle-datetime/toddle-datetime.class';
+/// <reference types="react" />
+import { ToddleDateTime } from '../../../../../utilities/toddle-datetime/toddle-datetime.class';
 interface JournalEntryTypeProps {
-  prio: boolean;
-  type: string;
-  happenedAt: ToddleDateTime;
-  loading?: boolean;
-  send: boolean;
+    prio: boolean;
+    type: string;
+    happenedAt: ToddleDateTime;
+    loading?: boolean;
+    send: boolean;
 }
-export declare const JournalEntryType: ({
-  prio,
-  type,
-  happenedAt,
-  loading,
-  send,
-}: JournalEntryTypeProps) => JSX.Element;
+export declare const JournalEntryType: ({ prio, type, happenedAt, loading, send, }: JournalEntryTypeProps) => import("react").JSX.Element;
 export {};

package/src/components/organisms/journal-entry/components/journal-entry-type/journal-entry-type.component.tsx

@@ -6,6 +6,7 @@ import {Stylesheet} from './journal-entry-type.styles';
 import {EntryTypeIndicator} from '../entry-type-indicator/entry-type-indicator.component';
 import {SmallText} from '../../../../atoms/paragraph-components';
 import {ToddleDateTime} from '../../../../../utilities/toddle-datetime/toddle-datetime.class';
+import React from 'react';
 
 interface JournalEntryTypeProps {
   prio: boolean;

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

@@ -1,33 +1,20 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
-import {VisualState} from '../../../types/visual-state.enum';
+import React from 'react';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import { VisualState } from '../../../types/visual-state.enum';
 interface JournalEntryProps {
-  id: string;
-  prio: boolean;
-  happenedAt: ToddleDateTime;
-  type: string;
-  text: string;
-  visualState: VisualState;
-  createdAt?: ToddleDateTime;
-  timestampLabel?: string;
-  onFail?: (id: string) => void;
-  onEdit?: (id: string) => void;
-  onDelete?: (id: string) => void;
-  afterAnimationComplete?: () => void;
-  loadingNewEntry?: boolean;
+    id: string;
+    prio: boolean;
+    happenedAt: ToddleDateTime;
+    type: string;
+    text: string;
+    visualState: VisualState;
+    createdAt?: ToddleDateTime;
+    timestampLabel?: string;
+    onFail?: (id: string) => void;
+    onEdit?: (id: string) => void;
+    onDelete?: (id: string) => void;
+    afterAnimationComplete?: () => void;
+    loadingNewEntry?: boolean;
 }
-export declare const JournalEntry: ({
-  id,
-  prio,
-  happenedAt,
-  type,
-  text,
-  visualState,
-  createdAt,
-  timestampLabel,
-  onFail,
-  onEdit,
-  onDelete,
-  afterAnimationComplete,
-  loadingNewEntry,
-}: JournalEntryProps) => JSX.Element;
+export declare const JournalEntry: ({ id, prio, happenedAt, type, text, visualState, createdAt, timestampLabel, onFail, onEdit, onDelete, afterAnimationComplete, loadingNewEntry, }: JournalEntryProps) => React.JSX.Element;
 export {};

package/src/components/organisms/journal-entry/journal-entry.preview.d.ts

@@ -1 +1,2 @@
-export declare const JournalEntryPreview: () => JSX.Element;
+/// <reference types="react" />
+export declare const JournalEntryPreview: () => import("react").JSX.Element;

package/src/components/organisms/journal-entry/journal-entry.preview.tsx

@@ -7,6 +7,7 @@ import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
 import {useRef, useState} from 'react';
 import {PressableIcon} from '../../molecules/pressable-icon/pressable-icon.component';
 import {Icon} from '../../../icons/index';
+import React from 'react';
 
 const DATA = [
   {

package/src/components/organisms/journal-entry/journal-entry.styles.d.ts

@@ -1,26 +1,23 @@
-export function Stylesheet(
-  context: any,
-  createdAt: any
-): {
-  rootContainer: {
-    borderLeftWidth: number;
-    borderLeftColor: any;
-    marginLeft: number;
-    paddingTop: number;
-    paddingLeft: number;
-  };
-  entryTypeContainer: {
-    position: 'absolute';
-    top: number;
-    left: number;
-    flexDirection: 'row';
-    alignItems: 'center';
-    gap: number;
-    marginBottom: number;
-  };
-  horizontalLineContainer: {
-    width: string;
-    marginTop: number;
-    marginBottom: number;
-  };
+export function Stylesheet(context: any, createdAt: any): {
+    rootContainer: {
+        borderLeftWidth: number;
+        borderLeftColor: any;
+        marginLeft: number;
+        paddingTop: number;
+        paddingLeft: number;
+    };
+    entryTypeContainer: {
+        position: "absolute";
+        top: number;
+        left: number;
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        marginBottom: number;
+    };
+    horizontalLineContainer: {
+        width: "100%";
+        marginTop: number;
+        marginBottom: number;
+    };
 };

package/src/components/organisms/loading-indicator/animation-style.animate.d.ts

@@ -1,13 +1,3 @@
-import {Animated} from 'react-native';
-export declare const animationStyle: (
-  animation: string | undefined,
-  node: Animated.Value,
-  delay: number,
-  size: number | undefined
-) => any;
-export declare const styles: (
-  animation: string | undefined,
-  color: string | undefined,
-  size: number | undefined,
-  dynamicSize: Animated.Value | undefined
-) => any;
+import { Animated } from 'react-native';
+export declare const animationStyle: (animation: string | undefined, node: Animated.Value, delay: number, size: number | undefined) => any;
+export declare const styles: (animation: string | undefined, color: string | undefined, size: number | undefined, dynamicSize: Animated.Value | undefined) => any;

package/src/components/organisms/loading-indicator/dot.component.d.ts

@@ -1,6 +1,6 @@
-import {Animated} from 'react-native';
+import { Animated } from 'react-native';
 type DotProps = {
-  dynamicSize: Animated.Value;
+    dynamicSize: Animated.Value;
 };
-export declare const Dot: ({dynamicSize}: DotProps) => JSX.Element;
+export declare const Dot: ({ dynamicSize }: DotProps) => JSX.Element;
 export {};

package/src/components/organisms/loading-indicator/loading-indicator.component.d.ts

@@ -1,9 +1,2 @@
-import {LoadingDotsProps} from '../../../types/loading-dots.type';
-export declare const LoadingIndicator: ({
-  animation,
-  dots,
-  color,
-  size,
-  spacing,
-  delay,
-}: LoadingDotsProps) => JSX.Element;
+import { LoadingDotsProps } from '../../../types/loading-dots.type';
+export declare const LoadingIndicator: ({ animation, dots, color, size, spacing, delay, }: LoadingDotsProps) => JSX.Element;

package/src/components/organisms/loading-indicator/loading-indicator.preview.d.ts

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

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

@@ -1,19 +1,13 @@
-import {ImageSourcePropType} from 'react-native';
-import {Initials} from '../../../models/initials.model';
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { Initials } from '../../../models/initials.model';
 type MyChildListItemProps = {
-  id: string;
-  name: string;
-  age: string;
-  sourceAvatar: ImageSourcePropType | Initials;
-  onPressChild: (id: string) => void;
-  onPressArrow: (id: string) => void;
+    id: string;
+    name: string;
+    age: string;
+    sourceAvatar: ImageSourcePropType | Initials;
+    onPressChild: (id: string) => void;
+    onPressArrow: (id: string) => void;
 };
-export declare const MyChildListItem: ({
-  id,
-  name,
-  age,
-  sourceAvatar,
-  onPressChild,
-  onPressArrow,
-}: MyChildListItemProps) => JSX.Element;
+export declare const MyChildListItem: ({ id, name, age, sourceAvatar, onPressChild, onPressArrow, }: MyChildListItemProps) => React.JSX.Element;
 export {};

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

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

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: string;
-    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,21 +1,14 @@
-import {ImageSourcePropType, ViewStyle} from 'react-native';
-import {Initials} from '../../../models/initials.model';
+/// <reference types="react" />
+import { ImageSourcePropType, ViewStyle } from 'react-native';
+import { Initials } from '../../../models/initials.model';
 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) => JSX.Element;
+export declare const PersonInfoCard: ({ source, isBlocked, isActive, name, label, style, isLoading, }: IContactInfoCard) => import("react").JSX.Element;
 export {};

package/src/components/organisms/person-info-card/person-info-card.component.tsx

@@ -4,6 +4,7 @@ import {Initials} from '../../../models/initials.model';
 import {Size} from '../../../types/size.enum';
 import {ContactRole} from '../../molecules/contact-role/contact-role.component';
 import {Stylesheet} from './person-info-card.styles';
+import React from 'react';
 
 interface IContactInfoCard {
   source: ImageSourcePropType | Initials;

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

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

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

@@ -1,15 +1,11 @@
-import {ReactNode} from 'react';
+import { ReactNode } 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) => JSX.Element;
+export declare const TabView: ({ tabItem, setTabValue, children }: TabViewProps) => import("react").JSX.Element;
 export {};

package/src/components/organisms/tab-view/tab-view.component.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view';
 import {ReactNode, useEffect, useRef, useState} from 'react';
 import {Stylesheet} from './tab-view.styles';
+import React from 'react';
 
 interface TabViewProps {
   tabItem: {