@tactics/toddle-styleguide 2.0.2 → 2.0.4

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

@@ -1,63 +1,70 @@
-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";
+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
+  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);
+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)}}
-        />
-    );
-}
+  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

@@ -0,0 +1,11 @@
+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,53 +1,72 @@
-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";
+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;
+interface TimetableEditorStaffProps {
+  sequence: TimeSlotSequence;
+  onChange: (seq: TimeSlotSequence) => void;
 }
 
-export const TimetableEditorStaff = ({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);
+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;
+  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])
+    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>
-    );
-}
+  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 +1,11 @@
-import React from "react";
-import { TimeSlotSequence } from "../../../models/time-slot-sequence";
+import React from 'react';
+import {TimeSlotSequence} from '../../../models/time-slot-sequence';
 interface TimetableEditorProps {
-    sequence: TimeSlotSequence;
-    onChange: (seq: TimeSlotSequence) => void;
+  sequence: TimeSlotSequence;
+  onChange: (seq: TimeSlotSequence) => void;
 }
-export declare const TimetableEditor: ({ sequence, onChange }: TimetableEditorProps) => React.JSX.Element;
+export declare const TimetableEditor: ({
+  sequence,
+  onChange,
+}: TimetableEditorProps) => React.JSX.Element;
 export {};

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

@@ -1,61 +1,84 @@
-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";
+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;
+  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);
+  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;
+  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])
+    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>
-    );
-}
+  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.tsx

@@ -1,13 +1,13 @@
 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';
+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())
+  const [seq, setSeq] = useState(TimeSlotSequence.fromEmpty());
 
   return (
     <View
@@ -24,7 +24,7 @@ export const TimetableEditorPreview = ({}: {}) => {
       >
         <Button
           onPress={() => {
-            setPopoverIsVisible(true)
+            setPopoverIsVisible(true);
           }}
           label="Open popover"
         />
@@ -36,13 +36,13 @@ export const TimetableEditorPreview = ({}: {}) => {
         isVisible={popoverIsVisible}
       >
         <View>
-            <TimetableEditor sequence={seq} onChange={(seq) => setSeq(seq)} />
+          <TimetableEditor sequence={seq} onChange={(seq) => setSeq(seq)} />
 
           <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
             <Button
               label={'Bewaar'}
               onPress={() => {
-                console.log(seq)
+                console.log(seq);
               }}
             />
           </View>

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

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

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

@@ -2,11 +2,11 @@ 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'
-        }
-    });
+  StyleSheet.create({
+    rootContainer: {
+      flexDirection: 'column',
+      gap: 16,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });

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

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

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

@@ -1,14 +1,18 @@
-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;
-    };
+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/modal.component.d.ts

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

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

@@ -1,23 +1,23 @@
 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;
-    };
+  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/popover/components/foreground/foreground.component.d.ts

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