@tactics/toddle-styleguide 5.0.0 → 5.0.2

package/src/components/molecules/avatar/avatar.styles.d.ts

@@ -1,102 +0,0 @@
-export function Stylesheet(
-  context: any,
-  size: any,
-  isBlocked: any,
-  isActive: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      container: (
-        | {
-            overflow: string;
-            backgroundColor: any;
-            justifyContent: string;
-            alignItems: string;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-          }
-        | {
-            width: number;
-            height: number;
-            borderRadius: number;
-            overflow?: undefined;
-            backgroundColor?: undefined;
-            justifyContent?: undefined;
-            alignItems?: undefined;
-          }
-      )[];
-      shadow: (
-        | {
-            backgroundColor: string;
-            shadowColor?: undefined;
-            shadowOpacity?: undefined;
-            shadowRadius?: undefined;
-            shadowOffset?: undefined;
-            elevation?: undefined;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-          }
-        | {
-            shadowColor: any;
-            shadowOpacity: number;
-            shadowRadius: number;
-            shadowOffset: {
-              width: number;
-              height: number;
-            };
-            backgroundColor?: undefined;
-            elevation?: undefined;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-          }
-        | {
-            elevation: number;
-            shadowColor: any;
-            backgroundColor?: undefined;
-            shadowOpacity?: undefined;
-            shadowRadius?: undefined;
-            shadowOffset?: undefined;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-          }
-        | {
-            width: number;
-            height: number;
-            borderRadius: number;
-            backgroundColor?: undefined;
-            shadowColor?: undefined;
-            shadowOpacity?: undefined;
-            shadowRadius?: undefined;
-            shadowOffset?: undefined;
-            elevation?: undefined;
-          }
-      )[];
-      image: {
-        position: string;
-        width: string;
-        height: string;
-        borderRadius: number;
-      }[];
-      text: {
-        textTransform: 'uppercase';
-      };
-      crownContainer: (
-        | {
-            position: string;
-            zIndex: number;
-            top?: undefined;
-            left?: undefined;
-          }
-        | {
-            top: number;
-            left: number;
-            position?: undefined;
-            zIndex?: undefined;
-          }
-      )[];
-    }>;
-import {StyleSheet} from 'react-native';

package/src/components/molecules/avatar/avatar.styles.js

@@ -1,90 +0,0 @@
-import {StyleSheet, Platform} from 'react-native';
-import {Size} from '../../../types/size.enum';
-
-export const Stylesheet = (context, size, isBlocked, isActive) =>
-  StyleSheet.create({
-    container: [
-      {
-        overflow: 'hidden',
-        backgroundColor: isBlocked
-          ? context.colors.ui.error.default
-          : isActive
-          ? context.colors.main['5']
-          : context.colors.ui.lightgrey,
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-      size === Size.SMALL && {
-        width: 40,
-        height: 40,
-        borderRadius: 40 / 2,
-      },
-      size === Size.MEDIUM && {
-        width: 72,
-        height: 72,
-        borderRadius: 72 / 2,
-      },
-      size === Size.LARGE && {
-        width: 120,
-        height: 120,
-        borderRadius: 120 / 2,
-      },
-    ],
-    shadow: [
-      {backgroundColor: 'white'},
-      Platform.OS === 'ios' && {
-        shadowColor: context.colors.ui.black,
-        shadowOpacity: 0.25,
-        shadowRadius: 4,
-        shadowOffset: {width: 0, height: 4},
-      },
-      Platform.OS === 'android' && {
-        elevation: 6,
-        shadowColor: context.colors.ui.black,
-      },
-      size === Size.SMALL && {
-        width: 40,
-        height: 40,
-        borderRadius: 40 / 2,
-      },
-      size === Size.MEDIUM && {
-        width: 72,
-        height: 72,
-        borderRadius: 72 / 2,
-      },
-      size === Size.LARGE && {
-        width: 120,
-        height: 120,
-        borderRadius: 120 / 2,
-      },
-    ],
-    image: [
-      {
-        position: 'absolute',
-        width: '90%',
-        height: '90%',
-        borderRadius: 50,
-      },
-    ],
-    text: {
-      textTransform: 'uppercase',
-    },
-    crownContainer: [
-      {
-        position: 'absolute',
-        zIndex: 999,
-      },
-      size === Size.SMALL && {
-        top: -10,
-        left: -5,
-      },
-      size === Size.MEDIUM && {
-        top: -6,
-        left: 0,
-      },
-      size === Size.LARGE && {
-        top: -2,
-        left: 10,
-      },
-    ],
-  });

package/src/components/molecules/avatar/avatar.test.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {Avatar} from './avatar.component';
-import {Initials} from '../../../models/initials.model';
-import {Size} from '../../../types/size.enum';
-
-describe('test avatar', () => {
-  it('renders correctly when provided image source is empty', () => {
-    const tree = renderer
-      .create(<Avatar source={Initials.for('John', 'Doe')} size={Size.SMALL} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the isBlocked is true, and provide image source is empty return a red colored avatar ', () => {
-    const tree = renderer
-      .create(<Avatar source={Initials.for('John', 'Doe')} size={Size.SMALL} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

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

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

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

@@ -1,78 +0,0 @@
-import {useContext} from 'react';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './bare-time-picker.styles';
-import {View} from 'react-native';
-import React from 'react';
-import WheelPicker from 'react-native-wheely';
-import {Scale} from '../../../theme/scale';
-
-interface BareTimePickerProps {
-  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 BareTimePicker = ({
-  initialHours,
-  initialMinutes,
-  onChangeHours,
-  onChangeMinutes,
-}: BareTimePickerProps) => {
-  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}>
-      <WheelPicker
-        options={HOURS.map((value) => (value == '' ? '--' : value))}
-        onChange={(index) => onChangeHours(HOURS[index])}
-        selectedIndex={initialIndexHandler(HOURS, initialHours)}
-        visibleRest={1}
-        selectedIndicatorStyle={{
-          borderRadius: 0,
-          backgroundColor: context.colors.main[9],
-        }}
-        containerStyle={{
-          backgroundColor: context.colors.ui.xlightgrey,
-          width: '50%',
-          borderTopLeftRadius: Scale.xxs,
-          borderBottomLeftRadius: Scale.xxs,
-        }}
-        itemTextStyle={{fontSize: Scale.l}}
-        scaleFunction={(x) => x / 1.5}
-      />
-      <WheelPicker
-        options={MINUTES.map((value) => (value == '' ? '--' : value))}
-        onChange={(index) => onChangeMinutes(MINUTES[index])}
-        selectedIndex={initialIndexHandler(MINUTES, initialMinutes)}
-        visibleRest={1}
-        selectedIndicatorStyle={{
-          borderRadius: 0,
-          backgroundColor: context.colors.main[9],
-        }}
-        containerStyle={{
-          backgroundColor: context.colors.ui.xlightgrey,
-          width: '50%',
-          borderTopRightRadius: Scale.xxs,
-          borderBottomRightRadius: Scale.xxs,
-        }}
-        itemTextStyle={{fontSize: Scale.l}}
-        scaleFunction={(x) => x / 1.5}
-      />
-    </View>
-  );
-};

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

@@ -1,52 +0,0 @@
-import {useContext} from 'react';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './bare-time-picker.styles';
-import {View} from 'react-native';
-import React from 'react';
-import { SelectPicker } from '../select-picker/select-picker.component';
-import { Paragraph } from '../../atoms/paragraph-components';
-import { Scale } from '../../../theme/scale';
-
-interface BareTimePickerProps {
-  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 BareTimePicker = ({
-  initialHours,
-  initialMinutes,
-  onChangeHours,
-  onChangeMinutes,
-}: BareTimePickerProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-
-  const hourItems = HOURS.map((el) => {
-    return {value: el, label: el}
-  });
-
-  const minuteItems = MINUTES.map((el) => {
-    return {value: el, label: el}
-  });
-
-  return (
-    <View style={styles.webRootContainer}>
-      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
-        <SelectPicker data={hourItems} onChange={onChangeHours} defaultValue={initialHours} />
-        <Paragraph addStyle={{paddingHorizontal: Scale.s}}>:</Paragraph>
-        <SelectPicker data={minuteItems} onChange={onChangeMinutes} defaultValue={initialMinutes} />
-      </View>
-    </View>
-  );
-};

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

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

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

@@ -1,86 +0,0 @@
-import React, {useState} from 'react';
-import {View} from 'react-native';
-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';
-import {BareTimePicker} from './bare-time-picker.component';
-
-export const BareTimePickerPreview = ({}: {}) => {
-  const [popoverIsVisible, setPopoverIsVisible] = useState(false);
-
-  const [checkInHours, setCheckInHours] = useState('09');
-  const [checkInMinutes, setCheckInMinutes] = useState('06');
-
-  console.log(`
-    Check In:
-        Hours: ${checkInHours}
-        Minutes: ${checkInMinutes}
-  `);
-
-  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>
-              <BareTimePicker
-                initialHours={checkInHours}
-                initialMinutes={checkInMinutes}
-                onChangeHours={setCheckInHours}
-                onChangeMinutes={setCheckInMinutes}
-              />
-            </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/bare-time-picker/bare-time-picker.styles.d.ts

@@ -1,14 +0,0 @@
-export function Stylesheet(context: any): {
-    rootContainer: {
-        flexDirection: "row";
-        alignItems: "center";
-        width: "100%";
-        maxWidth: number;
-    };
-    webRootContainer: {
-        flexDirection: "row";
-        alignItems: "center";
-        justifyContent: "center";
-        width: "100%";
-    };
-};

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

@@ -1,18 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale/index';
-
-export const Stylesheet = (context) =>
-  StyleSheet.create({
-    rootContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      width: '100%',
-      maxWidth: 200,
-    },
-    webRootContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '100%',
-    },
-  });

package/src/components/molecules/blocked-message/__snapshots__/blocked-message.test.js.snap

@@ -1,107 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Blocked message visual test renders a cancel link with label "cancel" that is pressable 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "backgroundColor": "#FBD9D9",
-      "borderRadius": 8,
-      "display": "flex",
-      "flexDirection": "row",
-      "paddingBottom": 24,
-      "paddingLeft": 24,
-      "paddingRight": 24,
-      "paddingTop": 24,
-    }
-  }
->
-  <RNSVGSvgView
-    align="xMidYMid"
-    bbHeight="26"
-    bbWidth="26"
-    fill="none"
-    focusable={false}
-    height={26}
-    meetOrSlice={0}
-    minX={0}
-    minY={0}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "borderWidth": 0,
-        },
-        {
-          "flex": 0,
-          "height": 26,
-          "width": 26,
-        },
-      ]
-    }
-    vbHeight={23}
-    vbWidth={22}
-    width={26}
-  >
-    <RNSVGGroup
-      fill={null}
-      propList={
-        [
-          "fill",
-        ]
-      }
-    >
-      <RNSVGPath
-        d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-        fill={
-          {
-            "payload": 4278190080,
-            "type": 0,
-          }
-        }
-        propList={
-          [
-            "stroke",
-            "strokeWidth",
-            "strokeLinecap",
-            "strokeLinejoin",
-          ]
-        }
-        stroke={
-          {
-            "payload": 4291976798,
-            "type": 0,
-          }
-        }
-        strokeLinecap={1}
-        strokeLinejoin={1}
-        strokeWidth="2"
-      />
-    </RNSVGGroup>
-  </RNSVGSvgView>
-  <Text
-    style={
-      [
-        [
-          {
-            "fontFamily": "Montserrat",
-            "fontSize": 14,
-            "lineHeight": 22.4,
-          },
-        ],
-        {
-          "color": "#D25E5E",
-          "textAlign": "center",
-          "width": "100%",
-        },
-        {
-          "flex": 1,
-          "marginLeft": 16,
-        },
-      ]
-    }
-  >
-    You shall not pass!!!!
-  </Text>
-</View>
-`;

package/src/components/molecules/blocked-message/blocked-message.component.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-type BlockedMessageProps = {
-    message: string;
-};
-export declare const BlockedMessage: ({ message }: BlockedMessageProps) => React.JSX.Element;
-export {};

package/src/components/molecules/blocked-message/blocked-message.component.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import {useContext} from 'react';
-
-import {View} from 'react-native';
-import {Icon} from '../../../icons/index';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './blocked-message.styles';
-import {Paragraph} from '../../atoms/paragraph-components';
-
-type BlockedMessageProps = {
-  message: string;
-};
-
-export const BlockedMessage = ({message}: BlockedMessageProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-
-  return (
-    <View style={styles.container}>
-      <Icon
-        style={'regular'}
-        name={'exclamation-circle'}
-        color={context.colors.ui.error.dark}
-        size={26}
-      />
-      <Paragraph
-        textColor={context.colors.ui.error.dark}
-        textAlign={'center'}
-        addStyle={styles.message}
-      >
-        {message}
-      </Paragraph>
-    </View>
-  );
-};

package/src/components/molecules/blocked-message/blocked-message.preview.d.ts

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

package/src/components/molecules/blocked-message/blocked-message.preview.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import {BlockedMessage} from './blocked-message.component';
-const {View} = require('react-native');
-
-export const BlockedMessagePreview = ({}: {}) => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <View style={{width: '90%'}}>
-        <BlockedMessage
-          message={
-            'Ex-partner, wegens echtscheiding geen contact meer toegestaan!'
-          }
-        />
-      </View>
-    </View>
-  );
-};

package/src/components/molecules/blocked-message/blocked-message.styles.d.ts

@@ -1,22 +0,0 @@
-export function Stylesheet(context: any): {
-  container: {
-    display: 'flex';
-    flexDirection: 'row';
-    alignItems: 'center';
-    backgroundColor: any;
-    borderRadius: number;
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-  };
-  message: {
-    textAlign: 'center';
-    color: any;
-    marginLeft: number;
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-    flex: number;
-  };
-};