@tactics/toddle-styleguide 5.0.2 → 5.0.5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+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;
+  };
+};