@tactics/toddle-styleguide 5.0.0 → 5.0.2

package/src/components/organisms/timetable-editor/components/timetable-edit-wrapper.tsx

@@ -1,70 +0,0 @@
-import {useState} from 'react';
-import {TimeSlotRecord} from '../../../../models/time-slot-record';
-import {TimetableEdit} from '../../timetable-edit/timetable-edit.component';
-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 const TimetableEditWrapper = ({
-  index,
-  record,
-  onUpdate,
-  editState,
-  onPressTag,
-}: TimetableEditWrapperProps) => {
-  const [initialInhours, initialInMinutes] = record.start
-    ? record.start.split(':')
-    : ':'.split(':');
-  const [initialOuthours, initialOutMinutes] = record.end
-    ? record.end.split(':')
-    : ':'.split(':');
-  const [inHours, setInHours] = useState<string>(initialInhours);
-  const [inMinutes, setInMinutes] = useState<string>(initialInMinutes);
-  const [outHours, setOutHours] = useState<string>(initialOuthours);
-  const [outMinutes, setOutMinutes] = useState<string>(initialOutMinutes);
-
-  return (
-    <TimetableEdit
-      index={index}
-      initialEditState={editState}
-      initialInHours={inHours}
-      initialInMinutes={inMinutes}
-      initialOutHours={outHours}
-      initialOutMinutes={outMinutes}
-      onChangeInHours={(hour) => {
-        setInHours(hour);
-        const updatedInHour = `${hour}:${inMinutes}`;
-        record.start = updatedInHour === ':' ? '' : updatedInHour;
-        onUpdate(record);
-      }}
-      onChangeInMinutes={(minutes) => {
-        setInMinutes(minutes);
-        const updatedInMinutes = `${inHours}:${minutes}`;
-        record.start = updatedInMinutes === ':' ? '' : updatedInMinutes;
-        onUpdate(record);
-      }}
-      onChangeOutHours={(hour) => {
-        setOutHours(hour);
-        const updatedOutHour = `${hour}:${outMinutes}`;
-        record.end = updatedOutHour === ':' ? undefined : updatedOutHour;
-        onUpdate(record);
-      }}
-      onChangeOutMinutes={(minutes) => {
-        setOutMinutes(minutes);
-        const updatedOutMinutes = `${outHours}:${minutes}`;
-        record.end = updatedOutMinutes === ':' ? undefined : updatedOutMinutes;
-        onUpdate(record);
-      }}
-      onPressTag={(val, index) => {
-        onPressTag(val, index);
-      }}
-    />
-  );
-};

package/src/components/organisms/timetable-editor/timetable-editor-staff.component.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { TimeSlotSequence } from '../../../models/time-slot-sequence';
-interface TimetableEditorStaffProps {
-    sequence: TimeSlotSequence;
-    onChange: (seq: TimeSlotSequence) => void;
-}
-export declare const TimetableEditorStaff: ({ sequence, onChange, }: TimetableEditorStaffProps) => React.JSX.Element;
-export {};

package/src/components/organisms/timetable-editor/timetable-editor-staff.component.tsx

@@ -1,72 +0,0 @@
-import React, {useContext, useEffect, useState} from 'react';
-import {View} from 'react-native';
-import {TimeSlotRecord} from '../../../models/time-slot-record';
-import {TimeSlotSequence} from '../../../models/time-slot-sequence';
-import {TimetableEditWrapper} from './components/timetable-edit-wrapper';
-import {TimetableEditState} from '../../../types/timetable-edit.enum';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './timetable-editor.styles';
-
-interface TimetableEditorStaffProps {
-  sequence: TimeSlotSequence;
-  onChange: (seq: TimeSlotSequence) => void;
-}
-
-export const TimetableEditorStaff = ({
-  sequence,
-  onChange,
-}: TimetableEditorStaffProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [activeEditState, setActiveEditState] = useState(
-    TimetableEditState.NONE
-  );
-  const [first, setFrist] = useState<TimeSlotRecord>(sequence.first);
-  const [second, setSecond] = useState<TimeSlotRecord>(sequence.second);
-
-  useEffect(() => {
-    const newSeq = TimeSlotSequence.fromEmpty();
-    newSeq.first.start = first.start;
-    newSeq.first.end = first.end;
-    newSeq.second.start = second.start;
-    newSeq.second.end = second.end;
-    newSeq.third.start = TimeSlotRecord.fromEmpty().start;
-    newSeq.third.end = TimeSlotRecord.fromEmpty().end;
-
-    onChange(newSeq);
-  }, [first, second]);
-
-  return (
-    <View style={styles.rootContainer}>
-      <TimetableEditWrapper
-        index={1}
-        record={first}
-        onUpdate={(seq) => {
-          setFrist(TimeSlotRecord.fromRecord(seq));
-        }}
-        editState={
-          activeIndex === 1 ? activeEditState : TimetableEditState.NONE
-        }
-        onPressTag={(val, index) => {
-          setActiveIndex(index);
-          setActiveEditState(val);
-        }}
-      />
-      <TimetableEditWrapper
-        index={2}
-        record={second}
-        onUpdate={(seq) => {
-          setSecond(TimeSlotRecord.fromRecord(seq));
-        }}
-        editState={
-          activeIndex === 2 ? activeEditState : TimetableEditState.NONE
-        }
-        onPressTag={(val, index) => {
-          setActiveIndex(index);
-          setActiveEditState(val);
-        }}
-      />
-    </View>
-  );
-};

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import { TimeSlotSequence } from '../../../models/time-slot-sequence';
-interface TimetableEditorProps {
-    sequence: TimeSlotSequence;
-    onChange: (seq: TimeSlotSequence) => void;
-}
-export declare const TimetableEditor: ({ sequence, onChange }: TimetableEditorProps) => React.JSX.Element;
-export {};

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

@@ -1,84 +0,0 @@
-import React, {useContext, useEffect, useState} from 'react';
-import {View} from 'react-native';
-import {TimeSlotRecord} from '../../../models/time-slot-record';
-import {TimeSlotSequence} from '../../../models/time-slot-sequence';
-import {TimetableEditWrapper} from './components/timetable-edit-wrapper';
-import {TimetableEditState} from '../../../types/timetable-edit.enum';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './timetable-editor.styles';
-
-interface TimetableEditorProps {
-  sequence: TimeSlotSequence;
-  onChange: (seq: TimeSlotSequence) => void;
-}
-
-export const TimetableEditor = ({sequence, onChange}: TimetableEditorProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [activeEditState, setActiveEditState] = useState(
-    TimetableEditState.NONE
-  );
-  const [first, setFrist] = useState<TimeSlotRecord>(sequence.first);
-  const [second, setSecond] = useState<TimeSlotRecord>(sequence.second);
-  const [third, setThird] = useState<TimeSlotRecord>(sequence.third);
-
-  useEffect(() => {
-    const newSeq = TimeSlotSequence.fromEmpty();
-    newSeq.first.start = first.start;
-    newSeq.first.end = first.end;
-    newSeq.second.start = second.start;
-    newSeq.second.end = second.end;
-    newSeq.third.start = third.start;
-    newSeq.third.end = third.end;
-
-    onChange(newSeq);
-  }, [first, second, third]);
-
-  return (
-    <View style={styles.rootContainer}>
-      <TimetableEditWrapper
-        index={1}
-        record={first}
-        onUpdate={(seq) => {
-          setFrist(TimeSlotRecord.fromRecord(seq));
-        }}
-        editState={
-          activeIndex === 1 ? activeEditState : TimetableEditState.NONE
-        }
-        onPressTag={(val, index) => {
-          setActiveIndex(index);
-          setActiveEditState(val);
-        }}
-      />
-      <TimetableEditWrapper
-        index={2}
-        record={second}
-        onUpdate={(seq) => {
-          setSecond(TimeSlotRecord.fromRecord(seq));
-        }}
-        editState={
-          activeIndex === 2 ? activeEditState : TimetableEditState.NONE
-        }
-        onPressTag={(val, index) => {
-          setActiveIndex(index);
-          setActiveEditState(val);
-        }}
-      />
-      <TimetableEditWrapper
-        index={3}
-        record={third}
-        onUpdate={(seq) => {
-          setThird(TimeSlotRecord.fromRecord(seq));
-        }}
-        editState={
-          activeIndex === 3 ? activeEditState : TimetableEditState.NONE
-        }
-        onPressTag={(val, index) => {
-          setActiveIndex(index);
-          setActiveEditState(val);
-        }}
-      />
-    </View>
-  );
-};

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

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

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

@@ -1,53 +0,0 @@
-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 {TimetableEditor} from './timetable-editor.component';
-import {TimeSlotSequence} from '../../../models/time-slot-sequence';
-
-export const TimetableEditorPreview = ({}: {}) => {
-  const [popoverIsVisible, setPopoverIsVisible] = useState(false);
-  const [seq, setSeq] = useState(TimeSlotSequence.fromEmpty());
-
-  return (
-    <View
-      style={{
-        width: '100%',
-        height: '100%',
-        zIndex: 10000,
-      }}
-    >
-      <View
-        style={{
-          marginTop: 150,
-        }}
-      >
-        <Button
-          onPress={() => {
-            setPopoverIsVisible(true);
-          }}
-          label="Open popover"
-        />
-      </View>
-      <Modal
-        title={'Bewerken'}
-        subtitle={'17 Jan 2021'}
-        onClose={() => setPopoverIsVisible(false)}
-        isVisible={popoverIsVisible}
-      >
-        <View>
-          <TimetableEditor sequence={seq} onChange={(seq) => setSeq(seq)} />
-
-          <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
-            <Button
-              label={'Bewaar'}
-              onPress={() => {
-                console.log(seq);
-              }}
-            />
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-};

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

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

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

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

package/src/components/templates/modal/components/fade-panel.component.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-type FadePanelProps = {
-    title: string;
-    subtitle?: string;
-    isVisible: boolean;
-    onClose: () => void;
-    maxHeight: number;
-    children: React.ReactNode;
-};
-export declare const FadePanel: ({ title, subtitle, isVisible, onClose, maxHeight, children, }: FadePanelProps) => React.JSX.Element;
-export {};

package/src/components/templates/modal/components/fade-panel.component.tsx

@@ -1,53 +0,0 @@
-import React, {useContext, useEffect, useRef} from 'react';
-import {Animated} from 'react-native';
-import {ThemeCtx} from '../../../../context/theme.context';
-import {Stylesheet} from './fade-panel.styles';
-import {Heading} from '../../popover/components/modal/heading/heading.component';
-import {Close} from '../../popover/components/modal/close/close.component';
-
-type FadePanelProps = {
-  title: string;
-  subtitle?: string;
-  isVisible: boolean;
-  onClose: () => void;
-  maxHeight: number;
-  children: React.ReactNode;
-};
-
-export const FadePanel = ({
-  title,
-  subtitle,
-  isVisible,
-  onClose,
-  maxHeight,
-  children,
-}: FadePanelProps) => {
-  const fadeAnimation = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (isVisible) {
-      Animated.timing(fadeAnimation, {
-        toValue: 1,
-        duration: 400,
-        useNativeDriver: true,
-      }).start();
-    } else if (!isVisible) {
-      Animated.timing(fadeAnimation, {
-        toValue: 0,
-        duration: 100,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [isVisible]);
-
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context, fadeAnimation, maxHeight);
-
-  return (
-    <Animated.View style={styles.rootContainer}>
-      <Close onPress={onClose} />
-      <Heading title={title} subtitle={subtitle} />
-      {children}
-    </Animated.View>
-  );
-};

package/src/components/templates/modal/components/fade-panel.styles.d.ts

@@ -1,18 +0,0 @@
-export function Stylesheet(
-  Context: any,
-  fadeAnimation: any,
-  maxHeight: any
-): {
-  rootContainer: {
-    maxWidth: number;
-    width: '100%';
-    maxHeight: any;
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-    borderRadius: number;
-    backgroundColor: any;
-    opacity: any;
-  };
-};

package/src/components/templates/modal/components/fade-panel.styles.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../../theme/scale/index';
-
-export const Stylesheet = (Context, fadeAnimation, maxHeight) =>
-  StyleSheet.create({
-    rootContainer: {
-      maxWidth: 560,
-      width: '100%',
-      maxHeight: maxHeight,
-      paddingLeft: Scale.m,
-      paddingTop: Scale.l,
-      paddingRight: Scale.m,
-      paddingBottom: Scale.m,
-      borderRadius: Scale.m,
-      backgroundColor: Context.colors.ui.white,
-      opacity: fadeAnimation,
-    },
-  });

package/src/components/templates/modal/modal-preview.styles.d.ts

@@ -1,13 +0,0 @@
-export function Stylesheet(): {
-  regionsContainer: {
-    width: string;
-    paddingLeft: number;
-    paddingRight: number;
-  };
-  regionTitleMargin: {
-    marginBottom: number;
-  };
-  citiesMargin: {
-    marginBottom: number;
-  };
-};

package/src/components/templates/modal/modal-preview.styles.js

@@ -1,17 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale/index';
-
-export const Stylesheet = () =>
-  StyleSheet.create({
-    regionsContainer: {
-      width: '100%',
-      paddingLeft: Scale.xxs,
-      paddingRight: Scale.xxs,
-    },
-    regionTitleMargin: {
-      marginBottom: Scale.m,
-    },
-    citiesMargin: {
-      marginBottom: Scale.l,
-    },
-  });

package/src/components/templates/modal/modal.component.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-type ModalProps = {
-    title: string;
-    subtitle?: string;
-    isVisible: boolean;
-    onClose: () => void;
-    children?: React.ReactNode;
-};
-export declare const Modal: ({ title, subtitle, isVisible, onClose, children, }: ModalProps) => React.JSX.Element;
-export {};

package/src/components/templates/modal/modal.component.tsx

@@ -1,53 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {Stylesheet} from './modal.styles';
-import {Dimensions, View} from 'react-native';
-import {Backdrop} from '../../atoms/backdrop/backdrop.component';
-import {FadePanel} from './components/fade-panel.component';
-
-type ModalProps = {
-  title: string;
-  subtitle?: string;
-  isVisible: boolean;
-  onClose: () => void;
-  children?: React.ReactNode;
-};
-
-const window = Dimensions.get('window');
-
-export const Modal = ({
-  title,
-  subtitle,
-  isVisible,
-  onClose,
-  children,
-}: ModalProps) => {
-  const [windowHeight, setWindowHeight] = useState(window.height);
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', ({window}) => {
-      setWindowHeight(window.height);
-    });
-    return () => subscription?.remove();
-  });
-
-  const maxHeight = Math.round(windowHeight / 100) * 90;
-
-  const styles = Stylesheet();
-
-  return (
-    <View style={styles.element} pointerEvents={isVisible ? 'auto' : 'none'}>
-      <Backdrop isVisible={isVisible} />
-      <View style={styles.fadePanelContainer}>
-        <FadePanel
-          maxHeight={maxHeight}
-          isVisible={isVisible}
-          onClose={onClose}
-          title={title}
-          subtitle={subtitle}
-        >
-          {children}
-        </FadePanel>
-      </View>
-    </View>
-  );
-};

package/src/components/templates/modal/modal.preview.d.ts

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

package/src/components/templates/modal/modal.preview.tsx

@@ -1,48 +0,0 @@
-import React, {useState} from 'react';
-import {Button} from '../../molecules/button/button.component';
-import {Paragraph} from '../../atoms/paragraph-components';
-import {Stylesheet} from './modal-preview.styles';
-import {Heading3} from '../../atoms/heading-components';
-import {Heading4} from '../../atoms/heading-components';
-
-const {Modal} = require('./modal.component');
-const {View} = require('react-native');
-
-export const ModalPreview = ({}: {}) => {
-  const [modalIsVisible, setModalIsVisible] = useState(false);
-
-  const styles = Stylesheet();
-
-  return (
-    <View
-      style={{
-        width: '100%',
-        height: '100%',
-        zIndex: 10000,
-      }}
-    >
-      <View style={{marginTop: 150}}>
-        <Button label="Open modal" onPress={() => setModalIsVisible(true)} />
-      </View>
-      <Modal
-        title={'Mijn login'}
-        subtitle={'Hoe vind ik mijn login gegevens?'}
-        isVisible={modalIsVisible}
-        onClose={() => setModalIsVisible(false)}
-      >
-        <View
-          style={{
-            paddingBottom: 36,
-          }}
-        >
-          <Paragraph textAlign={'center'}>
-            Deze gegevens zijn dezelfde gegevens waarmee u de oorsponkelijke
-            aanvraag heeft gedaan in het ouderplatform. Indien u deze niet meer
-            weet kan u steeds naar de website gaan en uw wachtwoord resetten of
-            oontact opnemen met het verblijf om dit voor u te doen..{' '}
-          </Paragraph>
-        </View>
-      </Modal>
-    </View>
-  );
-};

package/src/components/templates/modal/modal.styles.d.ts

@@ -1,23 +0,0 @@
-export function Stylesheet(): {
-  element: {
-    width: '100%';
-    height: '100%';
-    position: 'absolute';
-    left: number;
-    top: number;
-    zIndex: number;
-    alignItems: 'center';
-    justifyContent: 'center';
-  };
-  fadePanelContainer: {
-    flex: number;
-    justifyContent: 'center';
-    alignItems: 'center';
-    width: '100%';
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-    zIndex: number;
-  };
-};

package/src/components/templates/modal/modal.styles.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale/index';
-
-export const Stylesheet = () =>
-  StyleSheet.create({
-    element: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      zIndex: 1000,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    fadePanelContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '100%',
-      paddingLeft: Scale.m,
-      paddingTop: Scale.m * 4.5,
-      paddingRight: Scale.m,
-      paddingBottom: Scale.m * 4.5,
-      zIndex: 1004,
-    },
-  });

package/src/components/templates/popover/components/foreground/foreground.component.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { Modal } from '../modal/modal.component';
-type PopoverForegroundProps = {
-    children: React.ReactElement<typeof Modal>;
-};
-declare const Foreground: ({ children }: PopoverForegroundProps) => React.JSX.Element;
-export { Foreground as Foreground };

package/src/components/templates/popover/components/foreground/foreground.component.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import {View} from 'react-native';
-import {Stylesheet} from './foreground.styles';
-import {Modal} from '../modal/modal.component';
-
-type PopoverForegroundProps = {
-  children: React.ReactElement<typeof Modal>;
-};
-
-const Foreground = ({children}: PopoverForegroundProps) => {
-  const styles = Stylesheet();
-
-  return <View style={styles.element}>{children}</View>;
-};
-export {Foreground as Foreground};

package/src/components/templates/popover/components/foreground/foreground.styles.d.ts

@@ -1,12 +0,0 @@
-export function Stylesheet(): {
-  element: {
-    width: '100%';
-    maxWidth: number;
-    height: '100%';
-    paddingRight: number;
-    paddingLeft: number;
-    zIndex: number;
-    position: 'absolute';
-    top: number;
-  };
-};