@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

@@ -1,474 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loading indicator test should render a default loading indicator 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "alignItems": "center",
-      "display": "flex",
-      "flexDirection": "row",
-      "justifyContent": "center",
-    }
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 10,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 10,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 0,
-          "position": "absolute",
-          "width": 0,
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 10,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 10,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 0,
-          "position": "absolute",
-          "width": 0,
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 10,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 10,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 0,
-          "position": "absolute",
-          "width": 0,
-        }
-      }
-    />
-  </View>
-</View>
-`;
-
-exports[`loading indicator test should render a flashing loading indicator with a dot size of 12px 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "alignItems": "center",
-      "display": "flex",
-      "flexDirection": "row",
-      "justifyContent": "center",
-    }
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 12,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 12,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 12,
-          "opacity": 12,
-          "position": "absolute",
-          "width": 12,
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 12,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 12,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 12,
-          "opacity": 12,
-          "position": "absolute",
-          "width": 12,
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 12,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 12,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 12,
-          "opacity": 12,
-          "position": "absolute",
-          "width": 12,
-        }
-      }
-    />
-  </View>
-</View>
-`;
-
-exports[`loading indicator test should render a ping loading indicator with a size of 14px and a spacing of 4px 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "alignItems": "center",
-      "display": "flex",
-      "flexDirection": "row",
-      "justifyContent": "center",
-    }
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 14,
-        "justifyContent": "center",
-        "margin": 4,
-        "width": 14,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 14,
-          "opacity": 1,
-          "position": "absolute",
-          "transform": [
-            {
-              "scale": 0,
-            },
-          ],
-          "width": 14,
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 14,
-        "justifyContent": "center",
-        "margin": 4,
-        "width": 14,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 14,
-          "opacity": 1,
-          "position": "absolute",
-          "transform": [
-            {
-              "scale": 0,
-            },
-          ],
-          "width": 14,
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 14,
-        "justifyContent": "center",
-        "margin": 4,
-        "width": 14,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 14,
-          "opacity": 1,
-          "position": "absolute",
-          "transform": [
-            {
-              "scale": 0,
-            },
-          ],
-          "width": 14,
-        }
-      }
-    />
-  </View>
-</View>
-`;
-
-exports[`loading indicator test should render a typing loading indicator with a red color and a delay of 200 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "alignItems": "center",
-      "display": "flex",
-      "flexDirection": "row",
-      "justifyContent": "center",
-    }
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 10,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 10,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "red",
-          "borderRadius": 9999,
-          "height": 10,
-          "position": "absolute",
-          "top": 0,
-          "width": 10,
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 10,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 10,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "red",
-          "borderRadius": 9999,
-          "height": 10,
-          "position": "absolute",
-          "top": 0,
-          "width": 10,
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 10,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 10,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "red",
-          "borderRadius": 9999,
-          "height": 10,
-          "position": "absolute",
-          "top": 0,
-          "width": 10,
-        }
-      }
-    />
-  </View>
-</View>
-`;
-
-exports[`loading indicator test should render an elastic loading indicator with 2 dots 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "alignItems": "center",
-      "display": "flex",
-      "flexDirection": "row",
-      "justifyContent": "center",
-    }
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 10,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 10,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 10,
-          "position": "absolute",
-          "transform": [
-            {
-              "scaleY": 1,
-            },
-          ],
-          "width": 10,
-        }
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 10,
-        "justifyContent": "center",
-        "margin": 2,
-        "width": 10,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderRadius": 9999,
-          "height": 10,
-          "position": "absolute",
-          "transform": [
-            {
-              "scaleY": 1,
-            },
-          ],
-          "width": 10,
-        }
-      }
-    />
-  </View>
-</View>
-`;

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

@@ -1,3 +0,0 @@
-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/animation-style.animate.ts

@@ -1,164 +0,0 @@
-import {Animated} from 'react-native';
-
-export const animationStyle = (
-  animation: string | undefined,
-  node: Animated.Value,
-  delay: number,
-  size: number | undefined
-): any => {
-  const pulse = Animated.sequence([
-    Animated.timing(node, {
-      toValue: Number(size),
-      delay,
-      duration: 400,
-      useNativeDriver: false,
-    }),
-    Animated.timing(node, {
-      toValue: 0,
-      duration: 400,
-      useNativeDriver: false,
-    }),
-  ]);
-
-  const elastic = Animated.sequence([
-    Animated.timing(node, {
-      toValue: 1.5,
-      delay,
-      duration: 400,
-      useNativeDriver: false,
-    }),
-    Animated.timing(node, {
-      toValue: 1,
-      duration: 400,
-      useNativeDriver: false,
-    }),
-  ]);
-
-  const flashing = Animated.sequence([
-    Animated.timing(node, {
-      toValue: 1,
-      delay,
-      duration: 400,
-      useNativeDriver: false,
-    }),
-    Animated.timing(node, {
-      toValue: 0,
-      duration: 400,
-      useNativeDriver: false,
-    }),
-    Animated.timing(node, {
-      toValue: 1,
-      duration: 400,
-      useNativeDriver: false,
-    }),
-  ]);
-
-  const typing = Animated.sequence([
-    Animated.timing(node, {
-      toValue: -Number(size),
-      delay,
-      duration: 400,
-      useNativeDriver: false,
-    }),
-    Animated.timing(node, {
-      toValue: 0,
-      duration: 400,
-      useNativeDriver: false,
-    }),
-  ]);
-
-  const ping = Animated.sequence([
-    Animated.timing(node, {
-      toValue: 0,
-      delay,
-      duration: 1200,
-      useNativeDriver: false,
-    }),
-  ]);
-
-  switch (animation) {
-    case 'pulse':
-      return pulse;
-    case 'elastic':
-      return elastic;
-    case 'flashing':
-      return flashing;
-    case 'typing':
-      return typing;
-    case 'ping':
-      return ping;
-    default:
-      return pulse;
-  }
-};
-
-export const styles = (
-  animation: string | undefined,
-  color: string | undefined,
-  size: number | undefined,
-  dynamicSize: Animated.Value | undefined
-): any => {
-  const pulse = {
-    position: 'absolute',
-    backgroundColor: color,
-    height: dynamicSize,
-    width: dynamicSize,
-    borderRadius: 9999,
-  };
-
-  const elastic = {
-    position: 'absolute',
-    backgroundColor: color,
-    height: size,
-    width: size,
-    transform: [{scaleY: dynamicSize}],
-    borderRadius: 9999,
-  };
-  const flashing = {
-    position: 'absolute',
-    backgroundColor: color,
-    height: size,
-    width: size,
-    opacity: dynamicSize,
-    borderRadius: 9999,
-  };
-  const typing = {
-    position: 'absolute',
-    top: dynamicSize,
-    backgroundColor: color,
-    height: size,
-    width: size,
-    borderRadius: 9999,
-  };
-  const ping = {
-    position: 'absolute',
-    opacity: dynamicSize,
-    transform: [
-      {
-        scale: dynamicSize?.interpolate({
-          inputRange: [0, 1],
-          outputRange: [1, 0],
-        }),
-      },
-    ],
-    backgroundColor: color,
-    height: size,
-    width: size,
-    borderRadius: 9999,
-  };
-
-  switch (animation) {
-    case 'pulse':
-      return pulse;
-    case 'elastic':
-      return elastic;
-    case 'flashing':
-      return flashing;
-    case 'typing':
-      return typing;
-    case 'ping':
-      return ping;
-    default:
-      return pulse;
-  }
-};

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

@@ -1 +0,0 @@
-export declare const LoadingDotsContainer: () => JSX.Element;

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

@@ -1,65 +0,0 @@
-import React, {useState} from 'react';
-import {Animated} from 'react-native';
-import {useLoadingContext} from '../../../context/loading-dots.context';
-import {Dot} from './dot.component';
-import {animationStyle} from './animation-style.animate';
-
-export const LoadingDotsContainer = (): JSX.Element => {
-  const {animation, dots, size, delay} = useLoadingContext();
-
-  const animatedValues = (animation: string | undefined) => {
-    switch (animation) {
-      case 'pulse':
-        return Number(0);
-      case 'elastic':
-        return Number(1);
-      case 'flashing':
-        return Number(size);
-      case 'typing':
-        return Number(0);
-      case 'ping':
-        return Number(1);
-      default:
-        return Number(0);
-    }
-  };
-
-  const list = Array.from(
-    Array(dots),
-    () => new Animated.Value(animatedValues(animation))
-  );
-
-  const [visible, setVisible] = useState(false);
-
-  const run = (nodes: Animated.Value[]) => {
-    Animated.parallel(
-      nodes.map((node, index) =>
-        animationStyle(
-          animation,
-          node,
-          delay ? index * delay : index * 260,
-          size
-        )
-      )
-    ).start(() => {
-      setVisible(!visible);
-    });
-  };
-
-  run(list);
-
-  return (
-    <Animated.View
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      {list.map((size, index) => (
-        <Dot key={index} dynamicSize={size} />
-      ))}
-    </Animated.View>
-  );
-};

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

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