@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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