@tactics/toddle-styleguide 0.0.1 → 0.0.3

package/src/components/atoms/calendar/calendar.component.tsx

@@ -0,0 +1,94 @@
+import React, {useContext, useMemo} from 'react';
+import {Calendar as RNCalendar, LocaleConfig} from 'react-native-calendars/src';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './calendar.styles';
+import {Icon} from '../../../icons';
+
+LocaleConfig.locales['nl'] = {
+  monthNames: [
+    'Januari',
+    'Februari',
+    'Maart',
+    'April',
+    'Mei',
+    'Juni',
+    'Juli',
+    'Augustus',
+    'September',
+    'Oktober',
+    'November',
+    'December',
+  ],
+  monthNamesShort: [
+    'Jan',
+    'Feb',
+    'Mrt',
+    'Apr',
+    'Mei',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sept',
+    'Okt',
+    'Nov',
+    'Dec',
+  ],
+  dayNames: [
+    'Zondag',
+    'Maandag',
+    'Dinsdag',
+    'Woensdag',
+    'Donderdag',
+    'Vrijdag',
+    'Zaterdag',
+  ],
+  dayNamesShort: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
+};
+
+LocaleConfig.defaultLocale = 'nl';
+
+type CalendarProps = {
+  onDayPress: (day: string) => void;
+  selected: string;
+  minDate?: string;
+  maxDate?: string;
+};
+
+export const Calendar = ({
+  onDayPress,
+  selected,
+  minDate,
+  maxDate,
+}: CalendarProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+  const initDate = new Date().toISOString().slice(0, 10);
+  const marked = useMemo(
+    () => ({
+      [selected]: {
+        selected: true,
+      },
+    }),
+    [selected]
+  );
+
+  return (
+    <RNCalendar
+      initialDate={initDate}
+      context={{date: ''}}
+      minDate={minDate}
+      maxDate={maxDate}
+      onDayPress={(day) => {
+        onDayPress(day.dateString);
+      }}
+      markedDates={marked}
+      theme={styles.custom}
+      firstDay={1}
+      enableSwipeMonths={true}
+      renderArrow={(direction) => {
+        if (direction === 'left') return <Icon.Outline.ChevronLeft />;
+        if (direction === 'right') return <Icon.Outline.ChevronRight />;
+      }}
+    />
+  );
+};

package/src/components/atoms/calendar/calendar.preview.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {Calendar} from './calendar.component';
+import {useWindowDimensions} from 'react-native';
+const {View} = require('react-native');
+
+export const CalendarPreview = ({}: {}) => {
+  const full = useWindowDimensions();
+  const width = full.width;
+
+  const [selectedDay, setSelectedDay] = React.useState(
+    new Date().toISOString().slice(0, 10)
+  );
+
+  const calendarStartDate = '2022-09-01';
+  const calendarEndDate = '2023-07-31';
+
+  console.log(selectedDay);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View
+        style={{
+          // borderColor: 'red',
+          // borderStyle: 'solid',
+          // borderWidth: 1,
+          width: width - 30,
+        }}
+      >
+        <Calendar
+          selected={selectedDay}
+          onDayPress={setSelectedDay}
+          minDate={calendarStartDate}
+          maxDate={calendarEndDate}
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/calendar/calendar.styles.js

@@ -0,0 +1,88 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+import {Font} from '../../../theme/font';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    custom: {
+      backgroundColor: context.colors.ui.white,
+
+      'stylesheet.calendar.header': {
+        headerContainer: {
+          height: 32,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: context.colors.main['0'],
+          borderRadius: Scale.xl,
+          paddingTop: Scale.xxs,
+          paddingRight: Scale.m,
+          paddingBottom: Scale.xxs,
+          paddingLeft: Scale.m,
+        },
+        monthText: {
+          fontSize: Font.medium.fontSize,
+          fontFamily: Font.medium.fontFamily,
+          lineHeight: Font.medium.lineHeight,
+          color: context.colors.ui.white,
+          margin: 0,
+        },
+        week: {
+          marginTop: Scale.xl,
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+        },
+        dayHeader: {
+          marginBottom: Scale.l,
+          width: 32,
+          textAlign: 'center',
+          fontSize: Font.mediumBold.fontSize,
+          fontFamily: Font.mediumBold.fontFamily,
+          lineHeight: Font.mediumBold.lineHeight,
+          color: context.colors.ui.black,
+        },
+        disabledDayHeader: {
+          color: context.colors.ui.grey,
+        },
+      },
+
+      'stylesheet.day.basic': {
+        container: {
+          alignSelf: 'stretch',
+          alignItems: 'center',
+        },
+        base: {
+          width: 42,
+          height: 42,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        text: {
+          marginTop: 4,
+          fontSize: Font.medium.fontSize,
+          fontFamily: Font.medium.fontFamily,
+          lineHeight: Font.medium.lineHeight,
+          color: context.colors.ui.black,
+        },
+        selected: {
+          backgroundColor: context.colors.main['6'],
+          borderRadius: 21,
+        },
+        today: {
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: context.colors.main['6'],
+          borderRadius: 21,
+        },
+        todayText: {
+          color: context.colors.main['6'],
+        },
+        selectedText: {
+          color: context.colors.ui.white,
+        },
+        disabledText: {
+          color: context.colors.ui.grey,
+        },
+      },
+    },
+  });

package/src/components/atoms/calendar/calendar.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {Calendar} from './calendar.component';
+
+describe('Test for the calendar component', () => {
+  it('renders a calendar where you can select a day', function () {
+    const tree = render
+      .create(
+        <Calendar
+          selected={'2022-12-02'}
+          onDayPress={() => console.log('pressed day')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders a calendar where you can select a day, and give a starting-, end-date for the calendar', function () {
+    const tree = render
+      .create(
+        <Calendar
+          selected={'2022-12-02'}
+          onDayPress={() => console.log('pressed day')}
+          minDate={'2022-01-01'}
+          maxDate={'2022-12-31'}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/cancel-link/cancel-link.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './cancel-link.styles';

package/src/components/atoms/check-switch/check-switch.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext, useRef} from 'react';
+import * as React from 'react';
+import { useContext, useRef } from 'react';
+
 import {View, Animated, Pressable, Easing} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './check-switch.styles';

package/src/components/atoms/checkbox/checkbox.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './checkbox.styles';

package/src/components/atoms/child-list-item/child-list-item.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {ThemeCtx} from '../../../context/theme.context';
 import {ImageSourcePropType, Pressable, View, Text} from 'react-native';
 import {Initials} from '../../../models/initials.model';

package/src/components/atoms/child-list-item/child-list-item.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import render from 'react-test-renderer';
 import {ChildListItem} from './child-list-item.component';
 import {Avatar} from '../avatar/avatar.component';
-import {SelectListItem} from '../select-list-item/select-list.component-item';
+import {SelectListItem} from '../select-list-item/select-list-item.component';
 import renderer from 'react-test-renderer';
 import {VisualState} from '../../../types/visual-state.enum';
 

package/src/components/atoms/contact-item/contact-item.component.tsx

@@ -1,4 +1,5 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import {Stylesheet} from './contact-item.styles';
 import {Avatar} from '../avatar/avatar.component';
 import {Initials} from '../../../models/initials.model';

package/src/components/atoms/filter-tab/filter-tab.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext, useState} from 'react';
+import * as React from 'react';
+import { useContext, useState } from 'react';
+
 import {Animated, Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './filter-tab.styles';

package/src/components/atoms/form-actions/form-action.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {ThemeCtx} from '../../../context/theme.context';
 import {View} from 'react-native';
 import {Stylesheet} from './form-action.styles';

package/src/components/atoms/image-bubble/image-bubble.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {View, Image, ImageSourcePropType, ImageStyle} from 'react-native';
 import {Stylesheet} from './image-bubble.styles';
 import {ThemeCtx} from '../../../context/theme.context';

package/src/components/atoms/increment-input/__snapshots__/increment-input.test.js.snap

@@ -0,0 +1,210 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Increment input test renders an increment input component 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#19216C",
+        "borderRadius": 50,
+        "height": 32,
+        "justifyContent": "center",
+        "width": 32,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="28"
+      bbWidth="28"
+      fill="none"
+      focusable={false}
+      height="28"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 28,
+            "width": 28,
+          },
+        ]
+      }
+      vbHeight={26}
+      vbWidth={26}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M19.4006 13H6.60059"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4294967295}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#E5E8EB",
+        "borderRadius": 8,
+        "borderStyle": "solid",
+        "borderWidth": 1,
+        "display": "flex",
+        "height": 48,
+        "justifyContent": "center",
+        "marginLeft": 8,
+        "marginRight": 8,
+        "paddingBottom": 8,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 8,
+        "width": 48,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "alignItems": "center",
+          "color": "#1F2933",
+          "display": "flex",
+          "fontFamily": "Montserrat",
+          "fontSize": 14,
+          "justifyContent": "center",
+          "lineHeight": 22.4,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        }
+      }
+    >
+      0
+    </Text>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#19216C",
+        "borderRadius": 50,
+        "height": 32,
+        "justifyContent": "center",
+        "width": 32,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="28"
+      bbWidth="28"
+      fill="none"
+      focusable={false}
+      height="28"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 28,
+            "width": 28,
+          },
+        ]
+      }
+      vbHeight={27}
+      vbWidth={27}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M13.5 6.75V13.5M13.5 13.5V20.25M13.5 13.5H20.25M13.5 13.5L6.75 13.5"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4294967295}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

package/src/components/atoms/increment-input/increment-input.component.tsx

@@ -0,0 +1,41 @@
+import React, {useContext} from 'react';
+import {Pressable, View, Text} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './increment-input.styles';
+import {Icon} from '../../../icons';
+
+type IncrementInputProps = {
+  value: number;
+  onPress: (number: number) => void;
+};
+
+export const IncrementInput = ({value, onPress}: IncrementInputProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  function increment() {
+    return onPress((value += 1));
+  }
+
+  function decrement() {
+    if (value > 0) {
+      return onPress((value -= 1));
+    } else {
+      return onPress((value = 0));
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={decrement} style={styles.buttonContainer}>
+        <Icon.Outline.MinusSm color={context.colors.ui.white} />
+      </Pressable>
+      <View style={styles.numberContainer}>
+        <Text style={styles.number}>{value}</Text>
+      </View>
+      <Pressable onPress={increment} style={styles.buttonContainer}>
+        <Icon.Outline.PlusSm color={context.colors.ui.white} />
+      </Pressable>
+    </View>
+  );
+};

package/src/components/atoms/increment-input/increment-input.preview.tsx

@@ -0,0 +1,28 @@
+import React, {useState} from 'react';
+import {IncrementInput} from './increment-input.component';
+import {useWindowDimensions} from 'react-native';
+const {View} = require('react-native');
+
+export const IncrementInputPreview = ({}: {}) => {
+  const full = useWindowDimensions();
+  const width = full.width;
+
+  const [value, setValue] = useState(0);
+
+  return (
+    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <View
+        style={{
+          borderColor: 'red',
+          borderStyle: 'solid',
+          borderWidth: 1,
+          width: width - 30,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <IncrementInput value={value} onPress={setValue} />
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/increment-input/increment-input.styles.js

@@ -0,0 +1,49 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    buttonContainer: {
+      width: 32,
+      height: 32,
+      backgroundColor: Context.colors.main['0'],
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 50,
+    },
+    numberContainer: {
+      width: Scale.xxl,
+      height: Scale.xxl,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingTop: Scale.xs,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.xs,
+      paddingLeft: Scale.m,
+      marginRight: Scale.xs,
+      marginLeft: Scale.xs,
+      backgroundColor: Context.colors.ui.white,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: Context.colors.ui.lightgrey,
+      borderRadius: 8,
+    },
+    number: {
+      ...Font.regular,
+      textAlign: 'center',
+      textAlignVertical: 'center',
+      justifyContent: 'center',
+      alignItems: 'center',
+      display: 'flex',
+      color: Context.colors.ui.black,
+    },
+  });

package/src/components/atoms/increment-input/increment-input.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {IncrementInput} from './increment-input.component';
+
+describe('Increment input test', () => {
+  it('renders an increment input component', function () {
+    const tree = render
+      .create(
+        <IncrementInput value={0} onPress={() => console.log('change value')} />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});