@tactics/toddle-styleguide 1.2.8 → 1.3.0

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

@@ -0,0 +1,97 @@
+import {useContext} from 'react';
+import {Animated, View, Easing} from 'react-native';
+import {ThemeCtx} from '../../../../../context/theme.context';
+import {Stylesheet} from './entry-type-indicator.styles';
+
+interface EntryTypeIndicatorProps {
+  loading?: boolean;
+  send: boolean;
+}
+
+export const EntryTypeIndicator = ({
+  loading,
+  send,
+}: EntryTypeIndicatorProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet();
+
+  console.log('ACTIVITY INDICATOR SEND: ', send);
+
+  const pulseValue = new Animated.Value(1);
+  const colorValue = new Animated.Value(1);
+
+  if (loading || !send) {
+    const pulseAnimation = Animated.sequence([
+      Animated.timing(pulseValue, {
+        toValue: 0.8,
+        duration: 800,
+        useNativeDriver: false,
+      }),
+      Animated.timing(pulseValue, {
+        toValue: 1,
+        duration: 800,
+        useNativeDriver: false,
+      }),
+    ]);
+
+    const colorAnimation = Animated.sequence([
+      Animated.timing(colorValue, {
+        toValue: 0,
+        duration: 600,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      }),
+      Animated.timing(colorValue, {
+        toValue: 1,
+        duration: 600,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      }),
+    ]);
+
+    const combinedAnimation = Animated.parallel([
+      pulseAnimation,
+      colorAnimation,
+    ]);
+
+    const loopedAnimation = Animated.loop(combinedAnimation);
+
+    loopedAnimation.start();
+  } else {
+    // Reset the scale and color values when not loading
+    pulseValue.setValue(1);
+    colorValue.setValue(1);
+  }
+
+  const interpolatedLoadingColor = colorValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [context.colors.main[5], context.colors.main[9]],
+  });
+
+  const interpolatedErrorColor = colorValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [
+      context.colors.ui.error.dark,
+      context.colors.ui.error.default,
+    ],
+  });
+
+  return (
+    <View style={styles.rootContainer}>
+      <Animated.View
+        testID="indicator"
+        style={[
+          styles.indicator,
+          {
+            transform: [{scale: pulseValue}],
+            backgroundColor: loading
+              ? interpolatedLoadingColor
+              : !send
+              ? interpolatedErrorColor
+              : interpolatedLoadingColor,
+          },
+        ]}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './entry-type-indicator/entry-type-indicator';
+export * from './journal-entry-type/journal-entry-type.component';

package/src/components/organisms/journal-entry/components/index.ts

@@ -0,0 +1,2 @@
+export * from './entry-type-indicator/entry-type-indicator';
+export * from './journal-entry-type/journal-entry-type.component';

package/src/components/organisms/journal-entry/components/journal-entry-type/__snapshots__/journal-entry-type.test.js.snap

@@ -0,0 +1,304 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JournalEntryType Snapshot renders correctly with prio=false and loading=false 1`] = `
+[
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": 32,
+        "justifyContent": "center",
+        "width": 32,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "rgba(224, 232, 249, 1)",
+          "borderRadius": 8,
+          "height": 16,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 16,
+        }
+      }
+      testID="indicator"
+    />
+  </View>,
+  <View
+    style={
+      {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "MontserratBold",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        Type - 
+      </Text>
+    </View>
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        12h 07m
+      </Text>
+    </View>
+  </View>,
+]
+`;
+
+exports[`JournalEntryType Snapshot renders correctly with prio=true and loading=false 1`] = `
+[
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#FFFFFF",
+        "borderRadius": 50,
+        "borderWidth": 4,
+        "justifyContent": "center",
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="24"
+      bbWidth="24"
+      fill="none"
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      vbHeight={23}
+      vbWidth={22}
+      width={24}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4294618180,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>,
+  <View
+    style={
+      {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "MontserratBold",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        Type - 
+      </Text>
+    </View>
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        12h 07m
+      </Text>
+    </View>
+  </View>,
+]
+`;
+
+exports[`JournalEntryType Snapshot renders correctly with prio=true and loading=true 1`] = `
+[
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": 32,
+        "justifyContent": "center",
+        "width": 32,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "rgba(224, 232, 249, 1)",
+          "borderRadius": 8,
+          "height": 16,
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+          "width": 16,
+        }
+      }
+      testID="indicator"
+    />
+  </View>,
+  <View
+    style={
+      {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "MontserratBold",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        Type - 
+      </Text>
+    </View>
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        12h 07m
+      </Text>
+    </View>
+  </View>,
+]
+`;

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

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

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

@@ -0,0 +1,60 @@
+import {useContext} from 'react';
+import {View} from 'react-native';
+import {Icon} from '../../../../../icons/index';
+import {ThemeCtx} from '../../../../../context/theme.context';
+import {Stylesheet} from './journal-entry-type.styles';
+import {EntryTypeIndicator} from '../entry-type-indicator/entry-type-indicator';
+import {SmallText} from '../../../../atoms/paragraph-components';
+import {ToddleDateTime} from '../../../../../utilities/toddle-datetime/toddle-datetime.class';
+
+interface JournalEntryTypeProps {
+  prio: boolean;
+  type: string;
+  happenedAt: ToddleDateTime;
+  loading?: boolean;
+  send: boolean;
+}
+export const JournalEntryType = ({
+  prio,
+  type,
+  happenedAt,
+  loading,
+  send,
+}: JournalEntryTypeProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <>
+      {loading ? (
+        <EntryTypeIndicator loading={loading} send={send} />
+      ) : send ? (
+        prio ? (
+          <View style={styles.iconContainer}>
+            <Icon
+              style={'regular'}
+              name={'exclamation-circle'}
+              color={context.colors.ui.warning.dark}
+            />
+          </View>
+        ) : (
+          <EntryTypeIndicator send={send} />
+        )
+      ) : (
+        <EntryTypeIndicator send={send} />
+      )}
+      <View style={styles.entryTypeTextContainer}>
+        <View>
+          <SmallText bold={true} textColor={context.colors.ui.darkgrey}>
+            {`${type} - `}
+          </SmallText>
+        </View>
+        <View>
+          <SmallText textColor={context.colors.ui.darkgrey}>
+            {happenedAt.toFormat("HH'h' mm'm'")}
+          </SmallText>
+        </View>
+      </View>
+    </>
+  );
+};

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

@@ -0,0 +1,13 @@
+export function Stylesheet(context: any): {
+  iconContainer: {
+    backgroundColor: any;
+    borderRadius: number;
+    borderWidth: number;
+    borderColor: any;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
+  entryTypeTextContainer: {
+    flexDirection: 'row';
+  };
+};

package/src/components/organisms/journal-entry/components/journal-entry-type/journal-entry-type.styles.js

@@ -0,0 +1,16 @@
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    iconContainer: {
+      backgroundColor: context.colors.ui.white,
+      borderRadius: 50,
+      borderWidth: 4,
+      borderColor: context.colors.ui.white,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    entryTypeTextContainer: {
+      flexDirection: 'row',
+    },
+  });

package/src/components/organisms/journal-entry/components/journal-entry-type/journal-entry-type.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {JournalEntryType} from './journal-entry-type.component';
+import {ToddleDateTime} from '../../../../../utilities/toddle-datetime/toddle-datetime.class';
+
+describe('JournalEntryType Snapshot', () => {
+  it('renders correctly with prio=false and loading=false', () => {
+    const tree = renderer
+      .create(
+        <JournalEntryType
+          prio={false}
+          type="Type"
+          happenedAt={ToddleDateTime.now()}
+          loading={false}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly with prio=true and loading=false', () => {
+    const tree = renderer
+      .create(
+        <JournalEntryType
+          prio={true}
+          type="Type"
+          happenedAt={ToddleDateTime.now()}
+          loading={false}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly with prio=true and loading=true', () => {
+    const tree = renderer
+      .create(
+        <JournalEntryType
+          prio={true}
+          type="Type"
+          happenedAt={ToddleDateTime.now()}
+          loading={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,38 @@
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {VisualState} from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+interface JournalEntryProps {
+  id: string;
+  prio: boolean;
+  happenedAt: ToddleDateTime;
+  type: string;
+  text: string;
+  visualState: VisualState;
+  bubbleAlignment: BubbleAlignment;
+  createdAt?: ToddleDateTime;
+  timestampLabel?: string;
+  sendOrReceived: boolean;
+  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,
+  bubbleAlignment,
+  createdAt,
+  timestampLabel,
+  sendOrReceived,
+  onFail,
+  onEdit,
+  onDelete,
+  afterAnimationComplete,
+  loadingNewEntry,
+}: JournalEntryProps) => JSX.Element;
+export {};