@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/components/molecules/time-picker/time-picker.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface TimePickerProps {
+    initialHours: string;
+    initialMinutes: string;
+    onChangeHours: (value: string) => void;
+    onChangeMinutes: (value: string) => void;
+}
+export declare const TimePicker: ({ initialHours, initialMinutes, onChangeHours, onChangeMinutes, }: TimePickerProps) => React.JSX.Element;
+export {};

package/src/components/molecules/time-picker/time-picker.component.tsx

@@ -0,0 +1,98 @@
+import {View} from 'react-native';
+import WheelPickerExpo from 'react-native-wheel-picker-expo';
+import {Heading1} from '../../atoms/heading-components';
+import {Stylesheet} from './time-picker.styles';
+import {Scale} from '../../../theme/scale/index';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import React from 'react';
+
+interface TimePickerProps {
+  initialHours: string;
+  initialMinutes: string;
+  onChangeHours: (value: string) => void;
+  onChangeMinutes: (value: string) => void;
+}
+
+const HOURS: string[] = [
+  '',
+  ...Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0')),
+];
+const MINUTES: string[] = [
+  '',
+  ...Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0')),
+];
+
+export const TimePicker = ({
+  initialHours,
+  initialMinutes,
+  onChangeHours,
+  onChangeMinutes,
+}: TimePickerProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const initialIndexHandler = (dataArray: string[], value: string): number => {
+    return dataArray.findIndex((element) => element === value);
+  };
+
+  return (
+    <View style={styles.rootContainer}>
+      <View style={styles.container}>
+        <WheelPickerExpo
+          items={HOURS.map((value) => ({
+            label: value == '' ? '--' : value,
+            value: value,
+          }))}
+          onChange={({item}) => onChangeHours(item.value)}
+          width={Scale.m * 4.5}
+          height={320}
+          backgroundColor={context.colors.ui.xlightgrey}
+          renderItem={({label, textAlign}) => (
+            <Heading1
+              textAlign={textAlign}
+              textColor={context.colors.ui.grey}
+              bold={false}
+              addStyle={styles.text}
+            >
+              {label}
+            </Heading1>
+          )}
+          initialSelectedIndex={initialIndexHandler(HOURS, initialHours)}
+        />
+      </View>
+      <View>
+        <Heading1
+          textColor={context.colors.ui.grey}
+          addStyle={styles.colon}
+          textAlign={'center'}
+        >
+          :
+        </Heading1>
+      </View>
+      <View style={styles.container}>
+        <WheelPickerExpo
+          items={MINUTES.map((value) => ({
+            label: value == '' ? '--' : value,
+            value: value,
+          }))}
+          onChange={({item}) => onChangeMinutes(item.value)}
+          width={Scale.m * 4.5}
+          height={320}
+          backgroundColor={context.colors.ui.xlightgrey}
+          renderItem={({label, textAlign}) => (
+            <Heading1
+              textAlign={textAlign}
+              textColor={context.colors.ui.grey}
+              bold={false}
+              addStyle={styles.text}
+            >
+              {label}
+            </Heading1>
+          )}
+          initialSelectedIndex={initialIndexHandler(MINUTES, initialMinutes)}
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/molecules/time-picker/time-picker.preview.d.ts

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

package/src/components/molecules/time-picker/time-picker.preview.tsx

@@ -0,0 +1,109 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {TimePicker} from './time-picker.component';
+import {Heading3} from '../../atoms/heading-components';
+import {Button} from '../button/button.component';
+import {Avatar} from '../avatar/avatar.component';
+import {Initials} from '../../../models/initials.model';
+import {Size} from '../../../types/size.enum';
+import {Modal} from '../../templates/modal/modal.component';
+
+export const TimePickerPreview = ({}: {}) => {
+  const [popoverIsVisible, setPopoverIsVisible] = useState(false);
+
+  const [checkInHours, setCheckInHours] = useState('09');
+  const [checkInMinutes, setCheckInMinutes] = useState('06');
+
+  const [checkOutHours, setCheckOutHours] = useState('--');
+  const [checkOutMinutes, setCheckOutMinutes] = useState('--');
+
+  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={() => setPopoverIsVisible(true)}
+          label="Open popover"
+        />
+      </View>
+      <Modal
+        title={'Zeno Driesennnnnnnnnnnnnnnnn'}
+        subtitle={'Registratie aanpassen'}
+        onClose={() => setPopoverIsVisible(false)}
+        isVisible={popoverIsVisible}
+      >
+        <View>
+          <View style={{alignItems: 'center', marginBottom: 16}}>
+            <Avatar
+              source={Initials.for('Zeno', 'Driesen')}
+              size={Size.LARGE}
+            />
+          </View>
+          <View
+            style={{
+              flexDirection: 'column',
+              gap: 26,
+            }}
+          >
+            <View style={{alignItems: 'center'}}>
+              <Heading3
+                bold={true}
+                textAlign={'center'}
+                addStyle={{marginBottom: 8}}
+              >
+                Check In
+              </Heading3>
+              <TimePicker
+                initialHours={checkInHours}
+                initialMinutes={checkInMinutes}
+                onChangeHours={setCheckInHours}
+                onChangeMinutes={setCheckInMinutes}
+              />
+            </View>
+
+            <View style={{alignItems: 'center'}}>
+              <Heading3
+                bold={true}
+                textAlign={'center'}
+                addStyle={{marginBottom: 8}}
+              >
+                Check Out
+              </Heading3>
+              <TimePicker
+                initialHours={checkOutHours}
+                initialMinutes={checkOutMinutes}
+                onChangeHours={setCheckOutHours}
+                onChangeMinutes={setCheckOutMinutes}
+              />
+            </View>
+          </View>
+          <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
+            <Button
+              label={'Bewaar'}
+              onPress={() => console.log('Bewaar registratie aanpassing')}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};

package/src/components/molecules/time-picker/time-picker.styles.d.ts

@@ -0,0 +1,27 @@
+export function Stylesheet(context: any): {
+  rootContainer: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    gap: number;
+  };
+  container: {
+    borderColor: any;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderRadius: number;
+    overflow: 'hidden';
+    justifyContent: 'center';
+    alignItems: 'center';
+    maxHeight: number;
+    maxWidth: number;
+  };
+  text: {
+    fontWeight: '200';
+    fontSize: number;
+  };
+  colon: {
+    fontWeight: '200';
+    lineHeight: number;
+    fontSize: number;
+  };
+};

package/src/components/molecules/time-picker/time-picker.styles.js

@@ -0,0 +1,31 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    rootContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Scale.s,
+    },
+    container: {
+      borderColor: context.colors.ui.lightgrey,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderRadius: Scale.m * 1.25,
+      overflow: 'hidden',
+      justifyContent: 'center',
+      alignItems: 'center',
+      maxHeight: Scale.m * 4.5,
+      maxWidth: Scale.m * 4.5,
+    },
+    text: {
+      fontWeight: '200',
+      fontSize: 42,
+    },
+    colon: {
+      fontWeight: '200',
+      lineHeight: 42,
+      fontSize: 42,
+    },
+  });

package/src/components/molecules/time-picker/time-picker.test.js

@@ -0,0 +1,18 @@
+import renderer from 'react-test-renderer';
+import {TimePicker} from './time-picker.component';
+
+describe('Time picker test', () => {
+  it('Should render a time picker where we can choose the hours and minutes separately, and our initial set time is 08:00', () => {
+    const tree = renderer
+      .create(
+        <TimePicker
+          initialHours={'08'}
+          initialMinutes={'00'}
+          onChangeHours={() => console.log('set the hours')}
+          onChangeMinutes={() => console.log('set the minutes')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/molecules/time-tracker/__snapshots__/time-tracker.test.js.snap

@@ -0,0 +1,266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test time-tracker given the visualState is DEFAULT return a blue colored ball 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "#19216C",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  />
+  <View>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 11,
+              "lineHeight": 17.9,
+            },
+          ],
+          {
+            "color": "#1F2933",
+            "textAlign": undefined,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      3u45
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test time-tracker given the visualState is ERROR return a red colored ball 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        false,
+        false,
+        false,
+        {
+          "backgroundColor": "#F16868",
+        },
+      ]
+    }
+  />
+  <View>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 11,
+              "lineHeight": 17.9,
+            },
+          ],
+          {
+            "color": "#1F2933",
+            "textAlign": undefined,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      3u45
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test time-tracker given the visualState is SUCCESS return a green colored ball 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        false,
+        {
+          "backgroundColor": "#83D56C",
+        },
+        false,
+        false,
+      ]
+    }
+  />
+  <View>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 11,
+              "lineHeight": 17.9,
+            },
+          ],
+          {
+            "color": "#1F2933",
+            "textAlign": undefined,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      3u45
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test time-tracker given the visualState is WARNING return an orange colored ball 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": "#FCBF6F",
+        },
+        false,
+      ]
+    }
+  />
+  <View>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 11,
+              "lineHeight": 17.9,
+            },
+          ],
+          {
+            "color": "#1F2933",
+            "textAlign": undefined,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      3u45
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test time-tracker text has color when a color is given as property 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 6,
+          "height": 12,
+          "marginRight": 4,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "#19216C",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  />
+  <View>
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 11,
+              "lineHeight": 17.9,
+            },
+          ],
+          {
+            "color": "#1F2933",
+            "textAlign": undefined,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      3u45
+    </Text>
+  </View>
+</View>
+`;

package/src/components/molecules/time-tracker/time-tracker.component.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { VisualState } from '../../../types/visual-state.enum';
+type TimeTrackerProps = {
+    text: string;
+    textColor?: string;
+    visualState: VisualState;
+};
+declare const TimeTracker: ({ text, visualState, textColor }: TimeTrackerProps) => React.JSX.Element;
+export { TimeTracker as TimeTracker };

package/src/components/molecules/time-tracker/time-tracker.component.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {Stylesheet} from './time-tracker.styles';
+import {View} from 'react-native';
+import {VisualState} from '../../../types/visual-state.enum';
+import {ThemeCtx} from '../../../context/theme.context';
+import {TinyText} from '../../atoms/paragraph-components';
+
+type TimeTrackerProps = {
+  text: string;
+  textColor?: string;
+  visualState: VisualState;
+};
+
+const TimeTracker = ({text, visualState, textColor}: TimeTrackerProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, visualState);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.bal} />
+      <View>
+        <TinyText textColor={textColor}>{text}</TinyText>
+      </View>
+    </View>
+  );
+};
+
+export {TimeTracker as TimeTracker};

package/src/components/molecules/time-tracker/time-tracker.preview.d.ts

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

package/src/components/molecules/time-tracker/time-tracker.preview.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {VisualState} from '../../../types/visual-state.enum';
+import {View} from 'react-native';
+import {TimeTracker} from './time-tracker.component';
+
+export const TimeTrackerPreview = ({}: {}) => {
+  return (
+    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <TimeTracker text={'niet gepland'} visualState={VisualState.DEFAULT} />
+      <TimeTracker text={'3u45m'} visualState={VisualState.SUCCESS} />
+      <TimeTracker text={'9u45m'} visualState={VisualState.WARNING} />
+      <TimeTracker text={'17u05m'} visualState={VisualState.ERROR} />
+    </View>
+  );
+};

package/src/components/molecules/time-tracker/time-tracker.styles.d.ts

@@ -0,0 +1,33 @@
+export function Stylesheet(
+  context: any,
+  visualState: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: {
+        flexDirection: 'row';
+        alignItems: 'center';
+      };
+      bal: (
+        | {
+            width: number;
+            height: number;
+            borderRadius: number;
+            marginRight: number;
+            backgroundColor?: undefined;
+          }
+        | {
+            backgroundColor: any;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+            marginRight?: undefined;
+          }
+      )[];
+      text: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+      };
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/molecules/time-tracker/time-tracker.styles.js

@@ -0,0 +1,32 @@
+import {StyleSheet} from 'react-native';
+
+import {VisualState} from '../../../types/visual-state.enum';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, visualState) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    bal: [
+      {
+        width: Scale.s,
+        height: Scale.s,
+        borderRadius: Scale.s / 2,
+        marginRight: Scale.xxs,
+      },
+      visualState === VisualState.DEFAULT && {
+        backgroundColor: context.colors.main['0'],
+      },
+      visualState === VisualState.SUCCESS && {
+        backgroundColor: context.colors.ui.success.default,
+      },
+      visualState === VisualState.WARNING && {
+        backgroundColor: context.colors.ui.warning.default,
+      },
+      visualState === VisualState.ERROR && {
+        backgroundColor: context.colors.ui.error.default,
+      },
+    ],
+  });