@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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