@tactics/toddle-styleguide 2.0.3 → 3.0.0

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

@@ -7,5 +7,5 @@ type SelectableListProps = {
     inverse?: boolean;
     selected: boolean;
 };
-declare const SelectableListItem: ({ title, subtitle, icon, onPress, inverse, selected }: SelectableListProps) => React.JSX.Element;
+declare const SelectableListItem: ({ title, subtitle, icon, onPress, inverse, selected, }: SelectableListProps) => React.JSX.Element;
 export { SelectableListItem as SelectableListItem };

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/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/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/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

@@ -19,5 +19,5 @@ type ChildListItemProps = {
     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>;
+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

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

@@ -1,54 +1,57 @@
-export function Stylesheet(isSelectedItem: any, context: any): {
-    container: {
-        width: "100%";
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-        borderTopLeftRadius: number;
-        borderBottomLeftRadius: number;
-        flexDirection: "column";
-        backgroundColor: any;
-    };
-    innerContainer: {
-        flex: number;
-        padding: number;
-        flexDirection: "row";
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-        borderTopLeftRadius: number;
-        borderBottomLeftRadius: number;
-        alignItems: "center";
-    };
-    pressableContainer: {
-        flex: number;
-        flexDirection: "row";
-        alignItems: "center";
-    };
-    pressableText: {
-        marginLeft: number;
-        flex: number;
-    };
-    iconContainer: {
-        alignItems: "flex-end";
-        justifyContent: "center";
-        paddingRight: number;
-        width: number;
-        height: number;
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-    };
-    trackerContainer: {
-        flexDirection: "row";
-        alignItems: "center";
-    };
-    timeTrackerSpacer: {
-        height: number;
-        marginBottom: number;
-    };
-    tagContainer: {
-        flexDirection: "row";
-        gap: number;
-        flexWrap: "wrap";
-        marginLeft: number;
-        marginBottom: number;
-    };
+export function Stylesheet(
+  isSelectedItem: any,
+  context: any
+): {
+  container: {
+    width: '100%';
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderBottomLeftRadius: number;
+    flexDirection: 'column';
+    backgroundColor: any;
+  };
+  innerContainer: {
+    flex: number;
+    padding: number;
+    flexDirection: 'row';
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderBottomLeftRadius: number;
+    alignItems: 'center';
+  };
+  pressableContainer: {
+    flex: number;
+    flexDirection: 'row';
+    alignItems: 'center';
+  };
+  pressableText: {
+    marginLeft: number;
+    flex: number;
+  };
+  iconContainer: {
+    alignItems: 'flex-end';
+    justifyContent: 'center';
+    paddingRight: number;
+    width: number;
+    height: number;
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+  };
+  trackerContainer: {
+    flexDirection: 'row';
+    alignItems: 'center';
+  };
+  timeTrackerSpacer: {
+    height: number;
+    marginBottom: number;
+  };
+  tagContainer: {
+    flexDirection: 'row';
+    gap: number;
+    flexWrap: 'wrap';
+    marginLeft: number;
+    marginBottom: number;
+  };
 };

package/src/components/organisms/child-list-item/child-list-item.styles.js

@@ -23,7 +23,7 @@ export const Stylesheet = (isSelectedItem, context) =>
       borderBottomRightRadius: Scale.l,
       borderTopLeftRadius: Scale.xxl,
       borderBottomLeftRadius: Scale.xxl,
-      alignItems: 'center'
+      alignItems: 'center',
     },
     pressableContainer: {
       flex: 1,
@@ -32,7 +32,7 @@ export const Stylesheet = (isSelectedItem, context) =>
     },
     pressableText: {
       marginLeft: Scale.l,
-      flex: 1
+      flex: 1,
     },
     iconContainer: {
       alignItems: 'flex-end',
@@ -49,13 +49,13 @@ export const Stylesheet = (isSelectedItem, context) =>
     },
     timeTrackerSpacer: {
       height: Scale.s,
-      marginBottom: Scale.xxs
+      marginBottom: Scale.xxs,
     },
     tagContainer: {
       flexDirection: 'row',
       gap: Scale.s,
       flexWrap: 'wrap',
       marginLeft: Scale.xxxxl,
-      marginBottom: Scale.xs
-    }
+      marginBottom: Scale.xs,
+    },
   });

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

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