@tactics/toddle-styleguide 5.0.2 → 5.0.5

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

@@ -0,0 +1,96 @@
+import {useContext} from 'react';
+import {Animated, View, Easing} from 'react-native';
+import {ThemeCtx} from '../../../../../context/theme.context';
+import {Stylesheet} from './entry-type-indicator.styles';
+import React from 'react';
+
+interface EntryTypeIndicatorProps {
+  loading?: boolean;
+  send: boolean;
+}
+
+export const EntryTypeIndicator = ({
+  loading,
+  send,
+}: EntryTypeIndicatorProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet();
+
+  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: 800,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      }),
+      Animated.timing(colorValue, {
+        toValue: 1,
+        duration: 800,
+        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.light,
+      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/entry-type-indicator/entry-type-indicator.styles.d.ts

@@ -0,0 +1,13 @@
+export function Stylesheet(): {
+  rootContainer: {
+    width: number;
+    height: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
+  indicator: {
+    width: number;
+    height: number;
+    borderRadius: number;
+  };
+};

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

@@ -0,0 +1,17 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../../../theme/scale/index';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    rootContainer: {
+      width: Scale.l + 8,
+      height: Scale.l + 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    indicator: {
+      width: Scale.m,
+      height: Scale.m,
+      borderRadius: Scale.m / 2,
+    },
+  });

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

@@ -0,0 +1,2 @@
+export * from './entry-type-indicator/entry-type-indicator.component';
+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.component';
+export * from './journal-entry-type/journal-entry-type.component';

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

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

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

@@ -0,0 +1,63 @@
+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.component';
+import {SmallText} from '../../../../atoms/paragraph-components';
+import {ToddleDateTime} from '../../../../../utilities/toddle-datetime/toddle-datetime.class';
+import React from 'react';
+
+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>
+          {happenedAt ? (
+            <SmallText textColor={context.colors.ui.darkgrey}>
+              {` - ` + happenedAt.toFormat('H:mm')}
+            </SmallText>
+          ) : null}
+        </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/journal-entry.component.d.ts

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

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

@@ -0,0 +1,134 @@
+import React, {useContext, useRef} from 'react';
+import {
+  Animated,
+  Platform,
+  UIManager,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './journal-entry.styles';
+import {JournalEntryType} from './components';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {TextBubble} from '../text-bubble/text-bubble.component';
+import {VisualState} from '../../../types/visual-state.enum';
+import {Line} from '../../atoms/line/line.component';
+import {LoadingIndicator} from '../loading-indicator/loading-indicator.component';
+
+interface JournalEntryProps {
+  id: string;
+  prio: boolean;
+  happenedAt?: ToddleDateTime;
+  type: string;
+  text: string;
+  visualState: VisualState;
+  createdAt?: ToddleDateTime;
+  timestampLabel?: string;
+  onFail?: (id: string) => void;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
+  afterAnimationComplete?: () => void;
+  loadingNewEntry?: boolean;
+}
+
+export const JournalEntry = ({
+  id,
+  prio,
+  happenedAt,
+  type,
+  text,
+  visualState,
+  createdAt,
+  timestampLabel,
+  onFail,
+  onEdit,
+  onDelete,
+  afterAnimationComplete,
+  loadingNewEntry,
+}: JournalEntryProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, createdAt);
+
+  const {width} = useWindowDimensions();
+  const animatedValue = useRef(
+    new Animated.Value(loadingNewEntry ? 0 : 0.5)
+  ).current;
+
+  if (Platform.OS === 'android') {
+    if (UIManager.setLayoutAnimationEnabledExperimental) {
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+  }
+
+  if (loadingNewEntry) {
+    Animated.timing(animatedValue, {
+      toValue: 0.5,
+      duration: 400,
+      useNativeDriver: true,
+    }).start(() => {
+      if (afterAnimationComplete) {
+        afterAnimationComplete();
+      }
+    });
+  }
+
+  const deleteJournalEntryHandler = (id: string) => {
+    Animated.timing(animatedValue, {
+      toValue: -1,
+      duration: 400,
+      useNativeDriver: true,
+    }).start(() => {
+      if (onDelete) onDelete(id);
+    });
+  };
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [-width, 0, width],
+  });
+  const opacity = animatedValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0, 1, 0],
+  });
+  return (
+    <Animated.View
+      style={[
+        styles.rootContainer,
+        {
+          transform: [{translateX: translateX}],
+          opacity: opacity,
+        },
+      ]}
+    >
+      <View style={styles.entryTypeContainer}>
+        <JournalEntryType
+          prio={prio}
+          type={type}
+          happenedAt={happenedAt}
+          loading={loadingNewEntry}
+          send={!onFail}
+        />
+      </View>
+      {loadingNewEntry ? (
+        <View style={{height: 80, justifyContent: 'center'}}>
+          <LoadingIndicator color={context.colors.main[5]} />
+        </View>
+      ) : (
+        <TextBubble
+          id={id}
+          text={text}
+          visualState={visualState}
+          timestamp={createdAt}
+          timestampLabel={timestampLabel}
+          onDelete={deleteJournalEntryHandler}
+          onEdit={onEdit}
+          onFail={onFail}
+        />
+      )}
+
+      <View style={styles.horizontalLineContainer}>
+        <Line />
+      </View>
+    </Animated.View>
+  );
+};

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

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

package/src/components/organisms/journal-entry/journal-entry.preview.tsx

@@ -0,0 +1,214 @@
+import {FlatList, LayoutAnimation, ListRenderItem, View} from 'react-native';
+
+import {JournalEntry} from './journal-entry.component';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {VisualState} from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {useRef, useState} from 'react';
+import {PressableIcon} from '../../molecules/pressable-icon/pressable-icon.component';
+import {Icon} from '../../../icons/index';
+import React from 'react';
+
+const DATA = [
+  {
+    picture: '',
+    prio: true,
+    uuid: '35dc156d-6e59-4628-abf8-cddd9b836875',
+    happened_at: 1691394300,
+    type: 'GENERAL',
+    message: 'We kijken uit naar een leuke dag met Mattis',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: 'f776461d-1b74-48be-9b52-5a225b411323',
+    happened_at: 1691395200,
+    type: 'GENERAL',
+    message:
+      'Mattis kijkt er ook naar uit! Hij staat al heel het weekend te springen om terug naar de creche te gaan.',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'PARENT',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: 'f451f76e-8573-4130-8c72-28d6a90f164d',
+    happened_at: 1691397000,
+    type: 'GENERAL',
+    message: 'Test bericht met het uur voor Mattis',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: false,
+  },
+  {
+    picture: '',
+    prio: true,
+    uuid: 'ee25c811-ff66-439b-8f09-50224e1252e3',
+    happened_at: 1691402400,
+    type: 'ACTIVITY',
+    message: 'Vandaag gaan we knutselen met heel de groep!',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: false,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: '4b858f01-25ae-4a7d-9671-627379494fff',
+    happened_at: 1691402400,
+    type: 'ACTIVITY',
+    message: 'Klaar voor onze schilders schorten aan te doen!',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: '3edb8d39-9d12-43dd-929e-98b834f2f325',
+    happened_at: 1691409600,
+    type: 'NUTRITION',
+    message:
+      'Onze prachtige kunstwerken zijn aan het drogen, tijd voor een lekkere maaltijd',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: false,
+    uuid: '6cab5367-d10a-41ec-bb8b-5151df8385f0',
+    happened_at: 1691413200,
+    type: 'NUTRITION',
+    message:
+      'Mattis heeft flink zijn buikje vol gegeten. Straks een goed dutje!',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+  {
+    picture: '',
+    prio: true,
+    uuid: '23afaef6-fa4a-43f6-adab-1772b226fb54',
+    happened_at: 1691416800,
+    type: 'SLEEP',
+    message: 'Tijd voor een welverdiend dutje',
+    subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+    sender: 'STAFF_MEMBER',
+    send: true,
+  },
+];
+
+interface JournalEntry {
+  picture: string;
+  prio: boolean;
+  uuid: string;
+  happened_at: number;
+  type: string;
+  message: string;
+  subscription_day: string;
+  sender: string;
+  loadingNewEntry?: boolean;
+  send: boolean;
+}
+
+export const JournalEntryPreview = () => {
+  const [entries, setEntries] = useState(DATA);
+  const flatListRef = useRef<FlatList | null>(null);
+
+  const addJournalEntry = (newEntry: JournalEntry) => {
+    setEntries((prevEntries) => [
+      ...prevEntries,
+      {...newEntry, loadingNewEntry: true},
+    ]);
+
+    setTimeout(() => {
+      setEntries((prevEntries) =>
+        prevEntries.map((entry) =>
+          entry.uuid === newEntry.uuid
+            ? {...entry, loadingNewEntry: false}
+            : entry
+        )
+      );
+    }, 3000); // Simulating a delay to demonstrate loading state
+  };
+
+  const deleteJournalEntry = (entryId: string) => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    const newData = entries.filter((journal) => journal.uuid !== entryId);
+    setEntries(newData);
+  };
+
+  const renderJournalEntryList: ListRenderItem<JournalEntry> = ({item}) => {
+    return (
+      <JournalEntry
+        key={item.uuid}
+        id={item.uuid}
+        prio={item.prio}
+        type={item.type}
+        happenedAt={ToddleDateTime.fromSeconds(item.happened_at, {zone: 'utc'})}
+        text={item.message}
+        visualState={item.prio ? VisualState.WARNING : VisualState.DEFAULT}
+        createdAt={ToddleDateTime.fromSeconds(item.happened_at, {zone: 'utc'})}
+        timestampLabel={'ingevuld op'}
+        onDelete={
+          item.sender === 'STAFF_MEMBER' ? deleteJournalEntry : undefined
+        }
+        onEdit={
+          item.sender === 'STAFF_MEMBER'
+            ? () => console.log('edit entry')
+            : undefined
+        }
+        onFail={item.send ? undefined : () => console.log('resend')}
+        afterAnimationComplete={() => console.log('animation done')}
+        loadingNewEntry={item.loadingNewEntry}
+      />
+    );
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: 'white',
+        justifyContent: 'flex-start',
+        alignItems: 'stretch',
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16,
+        paddingBottom: 40,
+      }}
+    >
+      <View style={{alignItems: 'center', marginBottom: 16}}>
+        <PressableIcon
+          icon={<Icon key={'1'} style={'regular'} name={'plus-sm'} />}
+          onPress={() =>
+            addJournalEntry({
+              picture: '',
+              prio: false,
+              uuid: `${Math.random()}-23afaef6-fa4a-43f6-adab-1772b226fb54`,
+              happened_at: 1691416800,
+              type: 'SLEEP',
+              message: 'Tijd voor een welverdiend dutje',
+              subscription_day: 'c45cbc3d-7698-4f2d-b892-b634bf016497',
+              sender: 'STAFF_MEMBER',
+              send: true,
+            })
+          }
+        />
+      </View>
+      <FlatList
+        style={{flex: 1}}
+        contentContainerStyle={{paddingTop: 16}}
+        ref={flatListRef}
+        data={entries}
+        renderItem={renderJournalEntryList}
+        keyExtractor={(item) => item.uuid}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,26 @@
+export function Stylesheet(
+  context: any,
+  createdAt: any
+): {
+  rootContainer: {
+    borderLeftWidth: number;
+    borderLeftColor: any;
+    marginLeft: number;
+    paddingTop: number;
+    paddingLeft: number;
+  };
+  entryTypeContainer: {
+    position: 'absolute';
+    top: number;
+    left: number;
+    flexDirection: 'row';
+    alignItems: 'center';
+    gap: number;
+    marginBottom: number;
+  };
+  horizontalLineContainer: {
+    width: '100%';
+    marginTop: number;
+    marginBottom: number;
+  };
+};

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

@@ -0,0 +1,27 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context, createdAt) =>
+  StyleSheet.create({
+    rootContainer: {
+      borderLeftWidth: 1,
+      borderLeftColor: context.colors.ui.xlightgrey,
+      marginLeft: Scale.s,
+      paddingTop: Scale.m * 1.75,
+      paddingLeft: Scale.l,
+    },
+    entryTypeContainer: {
+      position: 'absolute',
+      top: -10,
+      left: -Scale.m,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Scale.s,
+      marginBottom: Scale.m,
+    },
+    horizontalLineContainer: {
+      width: '100%',
+      marginTop: createdAt ? Scale.xxxs : Scale.m,
+      marginBottom: Scale.l - 2,
+    },
+  });