@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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