@tactics/toddle-styleguide 5.0.4 → 5.0.5

package/src/components/atoms/calendar/calendar.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+type CalendarProps = {
+    onDayPress: (day: ToddleDateTime) => void;
+    selected: ToddleDateTime;
+    minDate?: string;
+    maxDate?: string;
+};
+export declare const Calendar: ({ onDayPress, selected, minDate, maxDate, }: CalendarProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,101 @@
+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';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+
+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: ToddleDateTime) => void;
+  selected: ToddleDateTime;
+  minDate?: string;
+  maxDate?: string;
+};
+
+export const Calendar = ({
+  onDayPress,
+  selected,
+  minDate,
+  maxDate,
+}: CalendarProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+  const initDate = ToddleDateTime.now().toISODate() || undefined;
+
+  const today = selected.toISODate();
+
+  const marked = useMemo(() => {
+    if (today === null) {
+      return {};
+    }
+    return {
+      [today]: {
+        selected: true,
+      },
+    };
+  }, [today]);
+
+  return (
+    <RNCalendar
+      initialDate={today ? today : initDate}
+      minDate={minDate}
+      maxDate={maxDate}
+      onDayPress={(day) => {
+        onDayPress(ToddleDateTime.fromISO(day.dateString));
+      }}
+      markedDates={marked}
+      theme={styles.custom}
+      firstDay={1}
+      enableSwipeMonths={true}
+      renderArrow={(direction) => {
+        if (direction === 'left')
+          return <Icon style={'regular'} name={'chevron-left'} />;
+        if (direction === 'right')
+          return <Icon style={'regular'} name={'chevron-right'} />;
+      }}
+    />
+  );
+};

package/src/components/atoms/calendar/calendar.preview.d.ts

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

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import {Calendar} from './calendar.component';
+import {useWindowDimensions} from 'react-native';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+
+const {View} = require('react-native');
+
+export const CalendarPreview = ({}: {}) => {
+  const full = useWindowDimensions();
+  const width = full.width;
+
+  const [selectedDay, setSelectedDay] = React.useState(ToddleDateTime.now());
+
+  const calendarStartDate = '2022-09-01';
+  const calendarEndDate = '2023-07-31';
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View
+        style={{
+          width: width - 30,
+        }}
+      >
+        <Calendar
+          selected={selectedDay}
+          onDayPress={setSelectedDay}
+          minDate={calendarStartDate}
+          maxDate={calendarEndDate}
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/calendar/calendar.styles.d.ts

@@ -0,0 +1,81 @@
+export function Stylesheet(context: any): {
+  custom: {
+    backgroundColor: any;
+    'stylesheet.calendar.header': {
+      headerContainer: {
+        height: number;
+        flexDirection: string;
+        justifyContent: string;
+        alignItems: string;
+        backgroundColor: any;
+        borderRadius: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+      };
+      monthText: {
+        fontSize: number;
+        fontFamily: string;
+        lineHeight: number;
+        color: any;
+        margin: number;
+      };
+      week: {
+        marginTop: number;
+        flexDirection: string;
+        justifyContent: string;
+      };
+      dayHeader: {
+        marginBottom: number;
+        width: number;
+        textAlign: string;
+        fontSize: number;
+        fontFamily: string;
+        lineHeight: number;
+        color: any;
+      };
+      disabledDayHeader: {
+        color: any;
+      };
+    };
+    'stylesheet.day.basic': {
+      container: {
+        alignSelf: string;
+        alignItems: string;
+      };
+      base: {
+        width: number;
+        height: number;
+        alignItems: string;
+        justifyContent: string;
+      };
+      text: {
+        marginTop: number;
+        fontSize: number;
+        fontFamily: string;
+        lineHeight: number;
+        color: any;
+      };
+      selected: {
+        backgroundColor: any;
+        borderRadius: number;
+      };
+      today: {
+        borderWidth: number;
+        borderStyle: string;
+        borderColor: any;
+        borderRadius: number;
+      };
+      todayText: {
+        color: any;
+      };
+      selectedText: {
+        color: any;
+      };
+      disabledText: {
+        color: any;
+      };
+    };
+  };
+};

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,35 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {Calendar} from './calendar.component';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+
+const testDate = ToddleDateTime.fromISO('2022-05-25T09:08:34.123', {
+  locale: 'en-GB',
+});
+
+describe('Test for the calendar component', () => {
+  it('renders a calendar where you can select a day', function () {
+    const tree = render
+      .create(
+        <Calendar
+          selected={testDate}
+          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={testDate}
+          onDayPress={() => console.log('pressed day')}
+          minDate={'2022-01-01'}
+          maxDate={'2022-12-31'}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/check-switch/__snapshots__/check-switch.test.js.snap

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test check switch should render a check switch component 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#647ACB",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "paddingLeft": 4,
+          "paddingRight": 4,
+          "width": 65,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": 50,
+            "elevation": 4,
+            "height": 30,
+            "shadowColor": "#1F2933",
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.8,
+            "shadowRadius": 2,
+            "transform": [
+              {
+                "translateX": 0,
+              },
+            ],
+            "width": 30,
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;

package/src/components/atoms/check-switch/check-switch.component.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type CheckProps = {
+    value: boolean;
+    onToggle: () => void;
+};
+export declare const Check: ({ value, onToggle }: CheckProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+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';
+
+type CheckProps = {
+  value: boolean;
+  onToggle: () => void;
+};
+
+export const Check = ({value, onToggle}: CheckProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, value);
+
+  const positionButton = useRef(new Animated.Value(0)).current;
+
+  const toggle = positionButton.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 27],
+  });
+
+  Animated.timing(positionButton, {
+    toValue: value ? 1 : 0,
+    duration: 200,
+    easing: Easing.linear,
+    useNativeDriver: true,
+  }).start();
+
+  const animatedStyle = {
+    transform: [
+      {
+        translateX: toggle,
+      },
+    ],
+  };
+
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={onToggle}>
+        <View style={styles.toggleContainer}>
+          <Animated.View style={[styles.thumbStyle, animatedStyle]} />
+        </View>
+      </Pressable>
+    </View>
+  );
+};

package/src/components/atoms/check-switch/check-switch.preview.d.ts

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

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

@@ -0,0 +1,31 @@
+import React, {useState} from 'react';
+import {Text} from 'react-native';
+import {Check} from './check-switch.component';
+const {View} = require('react-native');
+
+export const CheckPreview = ({}: {}) => {
+  const [enabledMusic, setMusic] = useState(false);
+  const toggleMusic = () => setMusic((previousState) => !previousState);
+
+  const [enabled, setEnabled] = useState(false);
+  const toggleSwitch = () => setEnabled((previousState) => !previousState);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View>
+        <Text>Music {enabledMusic ? 'On' : 'Off'}</Text>
+        <Check value={enabledMusic} onToggle={toggleMusic} />
+      </View>
+      <View>
+        <Text>Switch {enabled ? 'On' : 'Off'}</Text>
+        <Check value={enabled} onToggle={toggleSwitch} />
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/check-switch/check-switch.styles.d.ts

@@ -0,0 +1,33 @@
+export function Stylesheet(
+  context: any,
+  value: any
+): {
+  container: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    justifyContent: 'center';
+  };
+  toggleContainer: {
+    width: number;
+    height: number;
+    paddingLeft: number;
+    paddingRight: number;
+    borderRadius: number;
+    backgroundColor: any;
+    justifyContent: 'center';
+  };
+  thumbStyle: {
+    width: number;
+    height: number;
+    backgroundColor: any;
+    borderRadius: number;
+    shadowColor: any;
+    shadowOpacity: number;
+    shadowOffset: {
+      width: number;
+      height: number;
+    };
+    shadowRadius: number;
+    elevation: number;
+  };
+};

package/src/components/atoms/check-switch/check-switch.styles.js

@@ -0,0 +1,36 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, value) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    toggleContainer: {
+      width: 65,
+      height: 36,
+      paddingLeft: Scale.xxs,
+      paddingRight: Scale.xxs,
+      borderRadius: 18,
+      backgroundColor: value
+        ? context.colors.main['5']
+        : context.colors.ui.lightgrey,
+      justifyContent: 'center',
+    },
+    thumbStyle: {
+      width: 30,
+      height: 30,
+      backgroundColor: context.colors.ui.white,
+      borderRadius: 50,
+      shadowColor: context.colors.ui.black,
+      shadowOpacity: 0.8,
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowRadius: 2,
+      elevation: 4,
+    },
+  });

package/src/components/atoms/check-switch/check-switch.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Check} from './check-switch.component';
+
+describe('test check switch', () => {
+  it('should render a check switch component', () => {
+    const tree = renderer
+      .create(<Check value={true} onToggle={() => console.log('test')} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/count/count.component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface CountProps {
+    count: number;
+    disabled?: boolean;
+}
+export declare const Count: ({ count, disabled }: CountProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './count.styles';
+import {Paragraph} from '../paragraph-components';
+
+interface CountProps {
+  count: number;
+  disabled?: boolean;
+}
+
+export const Count = ({count, disabled}: CountProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, disabled);
+  return (
+    <View style={styles.container}>
+      <Paragraph addStyle={styles.text}>{count}</Paragraph>
+    </View>
+  );
+};

package/src/components/atoms/count/count.preview.d.ts

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

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

@@ -0,0 +1,16 @@
+import {View} from 'react-native';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import React from 'react';
+import {Count} from './count.component';
+
+export const CountPreview = () => {
+  const context = useContext(ThemeCtx);
+  return (
+    <View style={{alignItems: 'center', gap: 8}}>
+      <Count count={2} />
+      <Count count={99} />
+      <Count count={999999} />
+    </View>
+  );
+};