@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/components/organisms/loading-indicator/dot.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Animated, View} from 'react-native';
+import {useLoadingContext} from '../../../context/loading-dots.context';
+import {styles} from './animation-style.animate';
+
+type DotProps = {
+  dynamicSize: Animated.Value;
+};
+
+export const Dot = ({dynamicSize}: DotProps): JSX.Element => {
+  const {animation, color, size, spacing} = useLoadingContext();
+  return (
+    <View
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: size,
+        width: size,
+        margin: spacing,
+      }}
+    >
+      <Animated.View style={styles(animation, color, size, dynamicSize)} />
+    </View>
+  );
+};

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

@@ -0,0 +1,2 @@
+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.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {LoadingDotsProps} from '../../../types/loading-dots.type';
+import {LoadingDotsContainer} from './container.component';
+import {LoadingDotContextProvider} from '../../../context/loading-dots.context';
+
+export const LoadingIndicator = ({
+  animation = 'pulse',
+  dots = 3,
+  color = 'black',
+  size = 10,
+  spacing = 2,
+  delay = 260,
+}: LoadingDotsProps): JSX.Element => {
+  return (
+    <LoadingDotContextProvider
+      values={{animation, dots, color, size, spacing, delay}}
+    >
+      <LoadingDotsContainer />
+    </LoadingDotContextProvider>
+  );
+};

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

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

package/src/components/organisms/loading-indicator/loading-indicator.preview.tsx

@@ -0,0 +1,100 @@
+import React, {useContext} from 'react';
+import {View, Text} from 'react-native';
+import {LoadingIndicator} from './loading-indicator.component';
+import {ThemeCtx} from '../../../context/theme.context';
+
+export const LoadingIndicatorPreview = ({}: {}) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        padding: 16,
+        backgroundColor: context.colors.ui.white,
+      }}
+    >
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>
+          Default/Pulse
+        </Text>
+        <LoadingIndicator color={context.colors.main['5']} dots={2} />
+        <LoadingIndicator color={context.colors.main['6']} dots={3} />
+        <LoadingIndicator color={context.colors.main['3']} dots={4} />
+      </View>
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>Elastic</Text>
+        <LoadingIndicator
+          animation={'elastic'}
+          color={context.colors.main['5']}
+          dots={2}
+        />
+        <LoadingIndicator
+          animation={'elastic'}
+          color={context.colors.main['6']}
+          dots={3}
+        />
+        <LoadingIndicator
+          animation={'elastic'}
+          color={context.colors.main['3']}
+          dots={4}
+        />
+      </View>
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>Flashing</Text>
+        <LoadingIndicator
+          animation={'flashing'}
+          color={context.colors.main['5']}
+          dots={2}
+        />
+        <LoadingIndicator
+          animation={'flashing'}
+          color={context.colors.main['6']}
+          dots={3}
+        />
+        <LoadingIndicator
+          animation={'flashing'}
+          color={context.colors.main['3']}
+          dots={4}
+        />
+      </View>
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>Typing</Text>
+        <LoadingIndicator
+          color={context.colors.main['5']}
+          animation={'typing'}
+          dots={2}
+        />
+        <LoadingIndicator
+          color={context.colors.main['6']}
+          animation={'typing'}
+          dots={3}
+        />
+        <LoadingIndicator
+          color={context.colors.main['3']}
+          animation={'typing'}
+          dots={4}
+        />
+      </View>
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>Ping</Text>
+        <LoadingIndicator
+          color={context.colors.main['5']}
+          animation={'ping'}
+          dots={2}
+        />
+        <LoadingIndicator
+          color={context.colors.main['6']}
+          animation={'ping'}
+          dots={3}
+        />
+        <LoadingIndicator
+          color={context.colors.main['3']}
+          animation={'ping'}
+          dots={4}
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/organisms/loading-indicator/loading-indicator.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {LoadingIndicator} from './loading-indicator.component';
+jest.useFakeTimers();
+
+describe('loading indicator test', function () {
+  it('should render a default loading indicator', function () {
+    const tree = renderer.create(<LoadingIndicator />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render an elastic loading indicator with 2 dots', function () {
+    const tree = renderer
+      .create(<LoadingIndicator animation={'elastic'} dots={2} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a flashing loading indicator with a dot size of 12px', function () {
+    const tree = renderer
+      .create(<LoadingIndicator animation={'flashing'} size={12} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a typing loading indicator with a red color and a delay of 200', function () {
+    const tree = renderer
+      .create(
+        <LoadingIndicator animation={'typing'} color={'red'} delay={200} />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a ping loading indicator with a size of 14px and a spacing of 4px', function () {
+    const tree = renderer
+      .create(<LoadingIndicator animation={'ping'} size={14} spacing={4} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/organisms/my-child-list-item/__snapshots__/my-child-list-item.test.js.snap

@@ -0,0 +1,293 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`My child list item component test Should render your child 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "borderBottomLeftRadius": 48,
+      "borderBottomRightRadius": 24,
+      "borderTopLeftRadius": 48,
+      "borderTopRightRadius": 24,
+      "flexDirection": "row",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "borderBottomLeftRadius": 48,
+        "borderBottomRightRadius": 24,
+        "borderTopLeftRadius": 48,
+        "borderTopRightRadius": 24,
+        "flex": 1,
+        "flexDirection": "row",
+        "padding": 8,
+      }
+    }
+  >
+    <View
+      style={null}
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "backgroundColor": "#647ACB",
+              "justifyContent": "center",
+              "overflow": "hidden",
+            },
+            false,
+            {
+              "borderRadius": 36,
+              "height": 72,
+              "width": 72,
+            },
+            false,
+          ]
+        }
+      >
+        <ViewManagerAdapter_ExpoLinearGradient
+          colors={
+            [
+              4281681564,
+              4284775115,
+              4292481661,
+            ]
+          }
+          endPoint={
+            [
+              0.9,
+              0.9,
+            ]
+          }
+          locations={
+            [
+              0,
+              0.55,
+              1,
+            ]
+          }
+          startPoint={
+            [
+              0.1,
+              0.1,
+            ]
+          }
+          style={
+            [
+              {
+                "height": "100%",
+                "width": "100%",
+              },
+            ]
+          }
+        />
+        <Image
+          source={1}
+          style={
+            [
+              {
+                "borderRadius": 50,
+                "height": "90%",
+                "position": "absolute",
+                "width": "90%",
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "flex": 1,
+          "marginLeft": 24,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 11,
+                "lineHeight": 17.9,
+              },
+            ],
+            {
+              "color": "#1F2933",
+              "textAlign": "left",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        leeftijd
+      </Text>
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        style={
+          [
+            [
+              {
+                "fontFamily": "SourceSansProBold",
+                "fontSize": 24,
+                "lineHeight": 30.2,
+              },
+            ],
+            {
+              "color": "#1F2933",
+              "textAlign": "left",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        Luca Jannsens
+      </Text>
+    </View>
+  </View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "flex-end",
+        "borderBottomRightRadius": 24,
+        "borderTopRightRadius": 24,
+        "justifyContent": "center",
+        "paddingRight": 8,
+        "width": 48,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="20"
+      bbWidth="20"
+      fill="none"
+      focusable={false}
+      height={20}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 20,
+            "width": 20,
+          },
+        ]
+      }
+      vbHeight={19}
+      vbWidth={11}
+      width={20}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M1.75 1.625L9.33333 9.5L1.75 17.375"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4280232243,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,13 @@
+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;
+};
+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.component.tsx

@@ -0,0 +1,61 @@
+import React, {useCallback, useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {ImageSourcePropType, Pressable, View} from 'react-native';
+import {Initials} from '../../../models/initials.model';
+import {Size} from '../../../types/size.enum';
+import {Avatar} from '../../molecules/avatar/avatar.component';
+import {Stylesheet} from './my-child-list-item.styles';
+import {Icon} from '../../../icons/index';
+import {TinyText} from '../../atoms/paragraph-components';
+import {Heading2} from '../../atoms/heading-components';
+
+type MyChildListItemProps = {
+  id: string;
+  name: string;
+  age: string;
+  sourceAvatar: ImageSourcePropType | Initials;
+  onPressChild: (id: string) => void;
+  onPressArrow: (id: string) => void;
+};
+export const MyChildListItem = ({
+  id,
+  name,
+  age,
+  sourceAvatar,
+  onPressChild,
+  onPressArrow,
+}: MyChildListItemProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const onPressArrowCallback = useCallback(() => {
+    onPressArrow(id);
+  }, [id, onPressArrow]);
+
+  return (
+    <View style={styles.container}>
+      <Pressable style={styles.innerContainer} onPress={() => onPressChild(id)}>
+        <Avatar source={sourceAvatar} size={Size.MEDIUM} />
+        <View style={styles.childTextContainer}>
+          <TinyText textAlign={'left'}>{age}</TinyText>
+          <Heading2
+            bold={true}
+            textAlign={'left'}
+            numberOfLines={1}
+            ellipsizeMode={'tail'}
+          >
+            {name}
+          </Heading2>
+        </View>
+      </Pressable>
+      <Pressable onPress={onPressArrowCallback} style={styles.iconContainer}>
+        <Icon
+          style={'regular'}
+          name={'chevron-right'}
+          size={20}
+          color={context.colors.ui.black}
+        />
+      </Pressable>
+    </View>
+  );
+};

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

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

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import {MyChildListItem} from './my-child-list-item.component';
+import {FlatList, View} from 'react-native';
+
+interface IData {
+  id: string;
+  name: string;
+  age: number;
+}
+
+const data: IData[] = [];
+for (let i = 0; i < 6; i++) {
+  data.push({
+    id: 'child' + i,
+    name: 'Children with very long names because in 2023 we give our kids special name',
+    age: Math.floor(Math.random() * (6 - 2 + 1) + 2),
+  });
+}
+
+export const MyChildListItemPreview = ({}: {}) => {
+  const renderMyChildList = ({item}: any) => {
+    return (
+      <MyChildListItem
+        id={item.id}
+        name={item.name}
+        age={item.age}
+        sourceAvatar={require('../../../../assets/components/avatar/baby.png')}
+        onPressChild={(id) => console.log('Pressed ', id)}
+        onPressArrow={(id) => console.log('Pressed arrow ', id)}
+      />
+    );
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        padding: 16,
+        justifyContent: 'center',
+        backgroundColor: 'white',
+      }}
+    >
+      <FlatList
+        style={{flex: 1}}
+        data={data}
+        renderItem={renderMyChildList}
+        keyExtractor={(item) => item.id}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +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;
+  };
+};

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

@@ -0,0 +1,37 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xxl,
+      borderBottomLeftRadius: Scale.xxl,
+      flexDirection: 'row',
+      backgroundColor: context.colors.ui.white,
+    },
+    innerContainer: {
+      flex: 1,
+      padding: Scale.xs,
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xxl,
+      borderBottomLeftRadius: Scale.xxl,
+    },
+    childTextContainer: {
+      flex: 1,
+      marginLeft: Scale.l,
+    },
+    iconContainer: {
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      paddingRight: Scale.xs,
+      width: Scale.m * 3,
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+    },
+  });