@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

@@ -1,27 +0,0 @@
-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

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

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,100 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,293 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

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

@@ -1,51 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

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