@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/components/organisms/text-bubble/text-bubble.component.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { VisualState } from '../../../types/visual-state.enum';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+type TextBubbleProps = {
+    id: string;
+    text: string;
+    visualState: VisualState;
+    timestamp?: ToddleDateTime;
+    timestampLabel?: string;
+    onFail?: (id: string) => void;
+    onEdit?: (id: string) => void;
+    onDelete?: (id: string) => void;
+};
+declare const TextBubble: ({ id, text, visualState, timestamp, timestampLabel, onFail, onEdit, onDelete, }: TextBubbleProps) => React.JSX.Element;
+export { TextBubble as TextBubble };

package/src/components/organisms/text-bubble/text-bubble.component.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+import {View} from 'react-native';
+import {Stylesheet} from './text-bubble.styles';
+import {VisualState} from '../../../types/visual-state.enum';
+import {Timestamp} from '../../molecules/timestamp/timestamp.component';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {FailedTextBubble} from '../../molecules/failed-to-send/failed-bubble.component';
+import {SendTextBubble} from '../../molecules/send-bubble/send-text-bubble.component';
+
+type TextBubbleProps = {
+  id: string;
+  text: string;
+  visualState: VisualState;
+  timestamp?: ToddleDateTime;
+  timestampLabel?: string;
+  onFail?: (id: string) => void;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
+};
+
+const TextBubble = ({
+  id,
+  text,
+  visualState,
+  timestamp,
+  timestampLabel,
+  onFail,
+  onEdit,
+  onDelete,
+}: TextBubbleProps) => {
+  const styles = Stylesheet();
+
+  const [internalVisualState, setInternalVisualState] = useState(visualState);
+
+  useEffect(() => {
+    setInternalVisualState(visualState);
+  }, [visualState]);
+
+  return (
+    <View style={styles.rootContainer}>
+      {onFail ? (
+        <View style={styles.failedBubbleRootContainer}>
+          <FailedTextBubble
+            id={id}
+            text={text}
+            onPressRefresh={onFail}
+            onPressDelete={onDelete}
+          />
+        </View>
+      ) : (
+        <View style={styles.textBubbleRootContainer}>
+          <SendTextBubble
+            id={id}
+            text={text}
+            visualState={internalVisualState}
+            onPressEdit={onEdit}
+            onPressDelete={onDelete}
+          />
+        </View>
+      )}
+      {timestamp ? (
+        <View style={styles.timestampContainer}>
+          <Timestamp sent={timestamp} label={timestampLabel} />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+export {TextBubble as TextBubble};

package/src/components/organisms/text-bubble/text-bubble.preview.d.ts

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

package/src/components/organisms/text-bubble/text-bubble.preview.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {VisualState} from '../../../types/visual-state.enum';
+import {TextBubble} from './text-bubble.component';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {ScrollView} from 'react-native';
+
+const {View} = require('react-native');
+
+export const TextBubblePreview = ({}: {}) => {
+  const dateTimeString = '2023-11-28T09:12:00';
+  const alternativeDateTime = ToddleDateTime.fromISO(dateTimeString);
+
+  const send = false;
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        padding: 16,
+        alignItems: 'center',
+      }}
+    >
+      <ScrollView
+        style={{width: '100%', maxWidth: 560}}
+        contentContainerStyle={{gap: 16}}
+      >
+        <TextBubble
+          id={'1'}
+          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit velit in nibh varius, quis accumsan tellus maximus."
+          visualState={VisualState.DEFAULT}
+          timestamp={alternativeDateTime}
+          timestampLabel={'ingevuld op'}
+          onFail={send ? undefined : () => console.log('failed try to resend')}
+          onEdit={() => alert('Edit the message')}
+          onDelete={() => alert('Delete the message')}
+        />
+        <TextBubble
+          id={'2'}
+          text="Test."
+          visualState={VisualState.WARNING}
+          timestampLabel={'ingevuld op'}
+          timestamp={ToddleDateTime.now()}
+          onEdit={() => alert('Edit the message')}
+          onDelete={() => alert('Delete the message')}
+        />
+        <TextBubble
+          id={'3'}
+          text={`"I don't like sand... it's rough, and course, and irritating, and it gets everywhere."`}
+          visualState={VisualState.DEFAULT}
+          timestampLabel={'ingevuld op'}
+          timestamp={ToddleDateTime.now()}
+          onEdit={() => alert('Edit the message')}
+          onDelete={() => alert('Delete the message')}
+        />
+        <TextBubble
+          id={'4'}
+          text="Error!"
+          visualState={VisualState.WARNING}
+          timestampLabel={'ingevuld op'}
+          timestamp={ToddleDateTime.now()}
+          onFail={send ? undefined : () => alert('Try to resend')}
+          onEdit={() => alert('Edit the message')}
+          onDelete={() => alert('Delete the message')}
+        />
+        <TextBubble
+          id={'5'}
+          text="Niet verzonden! Probeer het opnieuw aub! Swipe en refresh!"
+          visualState={VisualState.WARNING}
+          timestampLabel={'ingevuld op'}
+          timestamp={ToddleDateTime.now()}
+          onFail={send ? undefined : () => alert('Try to resend')}
+          onEdit={() => alert('Edit the message')}
+          onDelete={() => alert('Delete the message')}
+        />
+        <TextBubble
+          id={'6'}
+          text="We hebben uw betaling van vorige maand nog niet ontvangen!"
+          visualState={VisualState.WARNING}
+          timestampLabel={'ingevuld op'}
+          timestamp={ToddleDateTime.now()}
+        />
+      </ScrollView>
+    </View>
+  );
+};

package/src/components/organisms/text-bubble/text-bubble.styles.d.ts

@@ -0,0 +1,16 @@
+export function Stylesheet(): {
+  rootContainer: {
+    width: '100%';
+    gap: number;
+  };
+  textBubbleRootContainer: {
+    minWidth: '50%';
+  };
+  failedBubbleRootContainer: {
+    minWidth: '50%';
+  };
+  timestampContainer: {
+    marginBottom: number;
+    alignSelf: 'flex-end';
+  };
+};

package/src/components/organisms/text-bubble/text-bubble.styles.js

@@ -0,0 +1,20 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    rootContainer: {
+      width: '100%',
+      gap: Scale.xxs,
+    },
+    textBubbleRootContainer: {
+      minWidth: '50%',
+    },
+    failedBubbleRootContainer: {
+      minWidth: '50%',
+    },
+    timestampContainer: {
+      marginBottom: Scale.xxxs,
+      alignSelf: 'flex-end',
+    },
+  });

package/src/components/organisms/text-bubble/text-bubble.test.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {TextBubble} from './text-bubble.component';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+
+describe('test text-bubble', () => {
+  const testDate = ToddleDateTime.fromISO('2016-05-25T09:08:34.123', {
+    locale: 'en-GB',
+  });
+
+  it('given the visualState is ERROR return a red colored text-bubble AND white text', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          id={'umhf34'}
+          visualState="ERROR"
+          bubbleAlignment="SENT"
+          text="TEST color"
+          timestamp={testDate}
+          onFail={() => alert('resend the message')}
+          onDelete={() => alert('delete the message')}
+          onEdit={() => alert('edit the message')}
+          sendOrReceived={true}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is WARNING return an orange colored text-bubble AND white text', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          id={'2383'}
+          visualState="WARNING"
+          bubbleAlignment="SENT"
+          text="TEST color"
+          timestamp={testDate}
+          onFail={() => alert('resend the message')}
+          onDelete={() => alert('delete the message')}
+          onEdit={() => alert('edit the message')}
+          sendOrReceived={true}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is DEFAULT return a light-blue colored text-bubble AND dark green text', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          id={'986'}
+          visualState="DEFAULT"
+          bubbleAlignment="SENT"
+          text="TEST color"
+          timestamp={testDate}
+          onFail={() => alert('resend the message')}
+          onDelete={() => alert('delete the message')}
+          onEdit={() => alert('edit the message')}
+          sendOrReceived={true}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the bubbleAlignment is SENT return a text-bubble with right-bottom tip', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          id={'30'}
+          visualState="DEFAULT"
+          bubbleAlignment="SENT"
+          text="TEST Bubble"
+          timestamp={testDate}
+          onFail={() => alert('resend the message')}
+          onDelete={() => alert('delete the message')}
+          onEdit={() => alert('edit the message')}
+          sendOrReceived={true}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is RECEIVE return a text-bubble with left-bottom tip', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          id={'12'}
+          visualState="DEFAULT"
+          bubbleAlignment="RECEIVE"
+          text="TEST Bubble"
+          timestamp={testDate}
+          onFail={() => alert('resend the message')}
+          onDelete={() => alert('delete the message')}
+          onEdit={() => alert('edit the message')}
+          sendOrReceived={true}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is RECEIVE return a textBubble with left-bottom tip', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          id={'2'}
+          visualState="DEFAULT"
+          bubbleAlignment="RECEIVE"
+          text="TEST Bubble"
+          timestamp={testDate}
+          onFail={() => alert('resend the message')}
+          onDelete={() => alert('delete the message')}
+          onEdit={() => alert('edit the message')}
+          sendOrReceived={true}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('return a text bubble, that will be send, but does not get send due to an error. It will show the failed text bubble', () => {
+    const tree = renderer
+      .create(
+        <TextBubble
+          id={'5'}
+          visualState="DEFAULT"
+          bubbleAlignment="SENT"
+          text="TEST Bubble"
+          timestamp={testDate}
+          onFail={() => alert('resend the message')}
+          onDelete={() => alert('delete the message')}
+          onEdit={() => alert('edit the message')}
+          sendOrReceived={false}
+        />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/organisms/timetable-edit/timetable-edit.component.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TimetableEditState } from '../../../types/timetable-edit.enum';
+interface TimetableEditProps {
+    index: number;
+    initialInHours: string;
+    initialInMinutes: string;
+    initialOutHours: string;
+    initialOutMinutes: string;
+    onChangeInHours: (value: string) => void;
+    onChangeInMinutes: (value: string) => void;
+    onChangeOutHours: (value: string) => void;
+    onChangeOutMinutes: (value: string) => void;
+    onPressTag: (val: TimetableEditState, index: number) => void;
+    initialEditState: string;
+}
+export declare const TimetableEdit: ({ index, initialInHours, initialInMinutes, initialOutHours, initialOutMinutes, onChangeInHours, onChangeInMinutes, onChangeOutHours, onChangeOutMinutes, initialEditState, onPressTag, }: TimetableEditProps) => React.JSX.Element;
+export {};

package/src/components/organisms/timetable-edit/timetable-edit.component.tsx

@@ -0,0 +1,97 @@
+import {View} from 'react-native';
+import {Heading3} from '../../atoms/heading-components';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import React from 'react';
+import {Stylesheet} from './timetable-edit.styles';
+import {Tag} from '../../molecules/tag/tag.component';
+import {TimetableEditState} from '../../../types/timetable-edit.enum';
+import {BareTimePicker} from '../../molecules/bare-time-picker/bare-time-picker.component';
+
+interface TimetableEditProps {
+  index: number;
+  initialInHours: string;
+  initialInMinutes: string;
+  initialOutHours: string;
+  initialOutMinutes: string;
+  onChangeInHours: (value: string) => void;
+  onChangeInMinutes: (value: string) => void;
+  onChangeOutHours: (value: string) => void;
+  onChangeOutMinutes: (value: string) => void;
+  onPressTag: (val: TimetableEditState, index: number) => void;
+  initialEditState: string;
+}
+
+export const TimetableEdit = ({
+  index,
+  initialInHours,
+  initialInMinutes,
+  initialOutHours,
+  initialOutMinutes,
+  onChangeInHours,
+  onChangeInMinutes,
+  onChangeOutHours,
+  onChangeOutMinutes,
+  initialEditState,
+  onPressTag,
+}: TimetableEditProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.rootContainer}>
+      <View style={styles.rowContainer}>
+        <View style={styles.tagContainer}>
+          <Heading3 addStyle={{width: 'auto'}} bold={true}>
+            Van
+          </Heading3>
+          <Tag
+            value={TimetableEditState.IN}
+            label={`${initialInHours == '' ? '--' : initialInHours}:${
+              initialInMinutes == '' ? '--' : initialInMinutes
+            }`}
+            isSelected={initialEditState == TimetableEditState.IN}
+            onPress={() => {
+              onPressTag(TimetableEditState.IN, index);
+            }}
+          />
+        </View>
+        <View style={styles.tagContainer}>
+          <Heading3 addStyle={{width: 'auto'}} bold={true}>
+            Tot
+          </Heading3>
+          <Tag
+            value={TimetableEditState.OUT}
+            label={`${initialOutHours == '' ? '--' : initialOutHours}:${
+              initialOutMinutes == '' ? '--' : initialOutMinutes
+            }`}
+            isSelected={initialEditState == TimetableEditState.OUT}
+            onPress={() => {
+              onPressTag(TimetableEditState.OUT, index);
+            }}
+          />
+        </View>
+      </View>
+      {initialEditState === TimetableEditState.IN && (
+        <View style={styles.pickerContainer}>
+          <BareTimePicker
+            initialHours={initialInHours}
+            initialMinutes={initialInMinutes}
+            onChangeHours={onChangeInHours}
+            onChangeMinutes={onChangeInMinutes}
+          />
+        </View>
+      )}
+      {initialEditState === TimetableEditState.OUT && (
+        <View style={styles.pickerContainer}>
+          <BareTimePicker
+            initialHours={initialOutHours}
+            initialMinutes={initialOutMinutes}
+            onChangeHours={onChangeOutHours}
+            onChangeMinutes={onChangeOutMinutes}
+          />
+        </View>
+      )}
+    </View>
+  );
+};

package/src/components/organisms/timetable-edit/timetable-edit.preview.d.ts

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

package/src/components/organisms/timetable-edit/timetable-edit.preview.tsx

@@ -0,0 +1,84 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {Modal} from '../../templates/modal/modal.component';
+import {Button} from '../../molecules/button/button.component';
+import {TimetableEdit} from './timetable-edit.component';
+import {TimetableEditState} from '../../../types/timetable-edit.enum';
+
+export const TimetableEditPreview = ({}: {}) => {
+  const [popoverIsVisible, setPopoverIsVisible] = useState(false);
+  const [checkInHours, setCheckInHours] = useState('09');
+  const [checkInMinutes, setCheckInMinutes] = useState('06');
+
+  const [checkOutHours, setCheckOutHours] = useState('');
+  const [checkOutMinutes, setCheckOutMinutes] = useState('');
+  const [editState, setEditState] = useState(TimetableEditState.NONE);
+
+  console.log(`
+    Check In:
+        Hours: ${checkInHours}
+        Minutes: ${checkInMinutes}
+
+    Check Out:
+        Hours: ${checkOutHours}
+        Minutes: ${checkOutMinutes}
+  `);
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        zIndex: 10000,
+      }}
+    >
+      <View
+        style={{
+          marginTop: 150,
+        }}
+      >
+        <Button
+          onPress={() => {
+            setEditState(TimetableEditState.NONE);
+            setPopoverIsVisible(true);
+          }}
+          label="Open popover"
+        />
+      </View>
+      <Modal
+        title={'Bewerken'}
+        subtitle={'17 Jan 2021'}
+        onClose={() => setPopoverIsVisible(false)}
+        isVisible={popoverIsVisible}
+      >
+        <View>
+          <TimetableEdit
+            index={1}
+            initialInHours={checkInHours}
+            initialInMinutes={checkInMinutes}
+            initialOutHours={checkOutHours}
+            initialOutMinutes={checkOutMinutes}
+            onChangeInHours={setCheckInHours}
+            onChangeInMinutes={setCheckInMinutes}
+            onChangeOutHours={setCheckOutHours}
+            onChangeOutMinutes={setCheckOutMinutes}
+            initialEditState={editState}
+            onPressTag={(val, index) => {
+              setEditState(val);
+            }}
+          />
+
+          <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
+            <Button
+              label={'Bewaar'}
+              onPress={() => {
+                setEditState(TimetableEditState.NONE);
+                console.log('Bewaar registratie aanpassing');
+              }}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};

package/src/components/organisms/timetable-edit/timetable-edit.styles.d.ts

@@ -0,0 +1,21 @@
+export function Stylesheet(context: any): {
+  rootContainer: {
+    flexDirection: 'column';
+    gap: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
+  rowContainer: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    gap: number;
+  };
+  tagContainer: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    gap: number;
+  };
+  pickerContainer: {
+    justifyContent: 'center';
+  };
+};

package/src/components/organisms/timetable-edit/timetable-edit.styles.js

@@ -0,0 +1,25 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    rootContainer: {
+      flexDirection: 'column',
+      gap: 16,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    rowContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 32,
+    },
+    tagContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 16,
+    },
+    pickerContainer: {
+      justifyContent: 'center',
+    },
+  });

package/src/components/organisms/timetable-editor/components/timetable-edit-wrapper.d.ts

@@ -0,0 +1,12 @@
+import { TimeSlotRecord } from '../../../../models/time-slot-record';
+import React from 'react';
+import { TimetableEditState } from '../../../../types/timetable-edit.enum';
+interface TimetableEditWrapperProps {
+    index: number;
+    record: TimeSlotRecord;
+    onUpdate: (rec: TimeSlotRecord) => void;
+    onPressTag: (val: TimetableEditState, index: number) => void;
+    editState: TimetableEditState;
+}
+export declare const TimetableEditWrapper: ({ index, record, onUpdate, editState, onPressTag, }: TimetableEditWrapperProps) => React.JSX.Element;
+export {};