@tactics/toddle-styleguide 5.0.0 → 5.0.2

package/src/components/molecules/calendar-select/calendar-select.preview.tsx

@@ -1,20 +0,0 @@
-import React, {useState} from 'react';
-import {View} from 'react-native';
-import {CalendarSelect} from './calendar-select.component';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
-
-export const CalendarSelectPreview = ({}: {}) => {
-  const [date, setDate] = useState(
-    ToddleDateTime.local({zone: 'America/Los_Angeles'})
-  );
-  console.log(date);
-  return (
-    <View style={{alignItems: 'center'}}>
-      <CalendarSelect
-        onPressDate={() => console.log('open modal')}
-        startDate={date}
-        onUpdateDate={setDate}
-      />
-    </View>
-  );
-};

package/src/components/molecules/calendar-select/calendar-select.styles.d.ts

@@ -1,33 +0,0 @@
-export function Stylesheet(context: any): {
-  container: {
-    width: 'auto';
-    color: any;
-    flexDirection: 'row';
-    alignItems: 'center';
-    justifyContent: 'center';
-    backgroundColor: any;
-    borderRadius: number;
-    gap: number;
-  };
-  dateContainer: {
-    flexDirection: 'row';
-    backgroundColor: any;
-    borderRadius: number;
-    paddingTop: number;
-    paddingBottom: number;
-    paddingLeft: number;
-    paddingRight: number;
-    justifyContent: 'space-between';
-    alignItems: 'center';
-    width: number;
-  };
-  arrowContainer: {
-    width: number;
-    height: number;
-    alignItems: 'center';
-    justifyContent: 'center';
-  };
-  icon: {
-    marginRight: number;
-  };
-};

package/src/components/molecules/calendar-select/calendar-select.styles.js

@@ -1,37 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale/index';
-
-export const Stylesheet = (context) =>
-  StyleSheet.create({
-    container: {
-      width: 'auto',
-      color: context.colors.ui.white,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: context.colors.main[0],
-      borderRadius: Scale.xl,
-      gap: Scale.s,
-    },
-    dateContainer: {
-      flexDirection: 'row',
-      backgroundColor: context.colors.main[0],
-      borderRadius: Scale.xl,
-      paddingTop: Scale.s,
-      paddingBottom: Scale.s,
-      paddingLeft: Scale.m,
-      paddingRight: Scale.m,
-      justifyContent: 'space-around',
-      alignItems: 'center',
-      width: 185,
-    },
-    arrowContainer: {
-      width: Scale.xxl,
-      height: Scale.xxl,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    icon: {
-      marginRight: Scale.m,
-    },
-  });

package/src/components/molecules/calendar-select/calendar-select.test.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {CalendarSelect} from './calendar-select.component';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
-
-const testDate = ToddleDateTime.fromISO('2022-12-01', {locale: 'en-GB'});
-
-describe('test Calendar Select', () => {
-  it('renders Calendar Select', function () {
-    const tree = render
-      .create(
-        <CalendarSelect
-          onPressDate={(date) => console.log(date)}
-          startDate={testDate}
-        />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/molecules/cancel-link/__snapshots__/cancel-link.test.js.snap

@@ -1,139 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Cancel link component test renders a cancel link with label "annuleer" that is pressable 1`] = `
-<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]}
-  style={
-    {
-      "alignItems": "center",
-      "backgroundColor": "transparent",
-      "borderRadius": 50,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "paddingHorizontal": 24,
-      "paddingVertical": 12,
-    }
-  }
->
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "SourceSansPro",
-              "fontSize": 16,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#F16868",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      Annuleer
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`Cancel link component test renders a cancel link with label "cancel" that is pressable 1`] = `
-<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]}
-  style={
-    {
-      "alignItems": "center",
-      "backgroundColor": "transparent",
-      "borderRadius": 50,
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "paddingHorizontal": 24,
-      "paddingVertical": 12,
-    }
-  }
->
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "SourceSansPro",
-              "fontSize": 16,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#F16868",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      Cancel
-    </Text>
-  </View>
-</View>
-`;

package/src/components/molecules/cancel-link/cancel-link.component.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-type CancelLinkProps = {
-    label: string;
-    onPress: () => void;
-};
-declare const CancelLink: ({ label, onPress }: CancelLinkProps) => React.JSX.Element;
-export { CancelLink as CancelLink };

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import {useContext} from 'react';
-
-import {Pressable, View} from 'react-native';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './cancel-link.styles';
-import {Heading4} from '../../atoms/heading-components';
-
-type CancelLinkProps = {
-  label: string;
-  onPress: () => void;
-};
-
-const CancelLink = ({label, onPress}: CancelLinkProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet();
-
-  return (
-    <Pressable onPress={onPress} style={styles.container}>
-      <View>
-        <Heading4 textColor={context.colors.ui.error.default}>{label}</Heading4>
-      </View>
-    </Pressable>
-  );
-};
-
-export {CancelLink as CancelLink};

package/src/components/molecules/cancel-link/cancel-link.preview.d.ts

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

package/src/components/molecules/cancel-link/cancel-link.preview.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {CancelLink} from './cancel-link.component';
-const {View} = require('react-native');
-
-export const CancelLinkPreview = ({}: {}) => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <CancelLink
-        label={'Annuleer'}
-        onPress={() => console.log('cancel clicked')}
-      />
-    </View>
-  );
-};

package/src/components/molecules/cancel-link/cancel-link.styles.d.ts

@@ -1,11 +0,0 @@
-export function Stylesheet(): {
-  container: {
-    backgroundColor: string;
-    paddingVertical: number;
-    paddingHorizontal: number;
-    flexDirection: 'row';
-    justifyContent: 'center';
-    alignItems: 'center';
-    borderRadius: number;
-  };
-};

package/src/components/molecules/cancel-link/cancel-link.styles.js

@@ -1,15 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale';
-
-export const Stylesheet = () =>
-  StyleSheet.create({
-    container: {
-      backgroundColor: 'transparent',
-      paddingVertical: Scale.s,
-      paddingHorizontal: Scale.l,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: 50,
-    },
-  });

package/src/components/molecules/cancel-link/cancel-link.test.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {CancelLink} from './cancel-link.component';
-
-describe('Cancel link component test', () => {
-  it('renders a cancel link with label "cancel" that is pressable', function () {
-    const tree = render
-      .create(
-        <CancelLink
-          label="Cancel"
-          onPress={() => console.log('You cancelled something')}
-        />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders a cancel link with label "annuleer" that is pressable', function () {
-    const tree = render
-      .create(
-        <CancelLink
-          label="Annuleer"
-          onPress={() => console.log('You cancelled something')}
-        />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/molecules/checkbox/__snapshots__/checkbox.test.js.snap

@@ -1,176 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Checkbox component test renders a checkbox with a "notenallergie" label that is checked 1`] = `
-<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]}
-  style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "paddingBottom": 8,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingTop": 8,
-    }
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#E5E8EB",
-        "borderRadius": 4,
-        "height": 16,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 16,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "backgroundColor": "#647ACB",
-          "borderRadius": 4,
-          "height": 12,
-          "width": 12,
-        }
-      }
-    />
-  </View>
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      notenallergie
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`Checkbox component test renders a checkbox with a "suiker" label that is not checked 1`] = `
-<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]}
-  style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "paddingBottom": 8,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingTop": 8,
-    }
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#E5E8EB",
-        "borderRadius": 4,
-        "height": 16,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 16,
-      }
-    }
-  />
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      suiker
-    </Text>
-  </View>
-</View>
-`;

package/src/components/molecules/checkbox/checkbox.component.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-type CheckboxProps = {
-    value: boolean;
-    onValueChange: () => void;
-    label: string;
-};
-declare const Checkbox: ({ value, onValueChange, label }: CheckboxProps) => React.JSX.Element;
-export { Checkbox as Checkbox };

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

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import {useContext} from 'react';
-
-import {Pressable, View} from 'react-native';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './checkbox.styles';
-import {SmallText} from '../../atoms/paragraph-components';
-
-type CheckboxProps = {
-  value: boolean;
-  onValueChange: () => void;
-  label: string;
-};
-
-const Checkbox = ({value, onValueChange, label}: CheckboxProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-
-  return (
-    <Pressable style={styles.element} onPress={onValueChange}>
-      <View style={styles.input}>
-        {value ? <View style={styles.check} /> : null}
-      </View>
-      <View>
-        <SmallText>{label}</SmallText>
-      </View>
-    </Pressable>
-  );
-};
-
-export {Checkbox as Checkbox};

package/src/components/molecules/checkbox/checkbox.preview.d.ts

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

package/src/components/molecules/checkbox/checkbox.preview.tsx

@@ -1,46 +0,0 @@
-import React, {useState} from 'react';
-import {Checkbox} from './checkbox.component';
-const {View} = require('react-native');
-
-export const CheckboxPreview = ({}: {}) => {
-  const [notenallergie, setNotenallergie] = useState(false);
-  const [melkproducten, setMelkproducten] = useState(false);
-  const [eieren, setEieren] = useState(false);
-  const [vlees, setVlees] = useState(false);
-  const [suiker, setSuiker] = useState(false);
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Checkbox
-        value={notenallergie}
-        onValueChange={() => setNotenallergie((prev) => !prev)}
-        label={'notenallergie'}
-      />
-      <Checkbox
-        value={melkproducten}
-        onValueChange={() => setMelkproducten((prev) => !prev)}
-        label={'melkproducten'}
-      />
-      <Checkbox
-        value={eieren}
-        onValueChange={() => setEieren((prev) => !prev)}
-        label={'eieren'}
-      />
-      <Checkbox
-        value={vlees}
-        onValueChange={() => setVlees((prev) => !prev)}
-        label={'vlees'}
-      />
-      <Checkbox
-        value={suiker}
-        onValueChange={() => setSuiker((prev) => !prev)}
-        label={'suiker'}
-      />
-    </View>
-  );
-};

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

@@ -1,32 +0,0 @@
-export function Stylesheet(context: any): {
-  element: {
-    paddingTop: number;
-    paddingBottom: number;
-    paddingLeft: number;
-    paddingRight: number;
-    flexDirection: 'row';
-    justifyContent: 'center';
-    alignItems: 'center';
-  };
-  input: {
-    width: number;
-    height: number;
-    backgroundColor: any;
-    borderRadius: number;
-    justifyContent: 'center';
-    alignItems: 'center';
-    marginRight: number;
-  };
-  check: {
-    width: number;
-    height: number;
-    backgroundColor: any;
-    borderRadius: number;
-  };
-  label: {
-    color: any;
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-  };
-};