@tactics/toddle-styleguide 0.0.1

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

@@ -0,0 +1,46 @@
+import React, {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.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.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/checkbox/__snapshots__/checkbox.test.js.snap

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox component test renders a checkbox with a "notenallergie" label that is checked 1`] = `
+<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",
+      "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>
+  <Text
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "Montserrat",
+        "fontSize": 13,
+        "lineHeight": 20.4,
+      }
+    }
+  >
+    notenallergie
+  </Text>
+</View>
+`;
+
+exports[`Checkbox component test renders a checkbox with a "suiker" label that is not checked 1`] = `
+<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",
+      "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,
+      }
+    }
+  />
+  <Text
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "Montserrat",
+        "fontSize": 13,
+        "lineHeight": 20.4,
+      }
+    }
+  >
+    suiker
+  </Text>
+</View>
+`;

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

@@ -0,0 +1,26 @@
+import React, {useContext} from 'react';
+import {Pressable, Text, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './checkbox.styles';
+
+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>
+      <Text style={styles.label}>{label}</Text>
+    </Pressable>
+  );
+};
+
+export {Checkbox as Checkbox};

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

@@ -0,0 +1,46 @@
+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/atoms/checkbox/checkbox.styles.js

@@ -0,0 +1,35 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    element: {
+      paddingTop: Scale.xs,
+      paddingBottom: Scale.xs,
+      paddingLeft: Scale.xs,
+      paddingRight: Scale.xs,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    input: {
+      width: 16, //Scale.m,
+      height: 16, //Scale.m,
+      backgroundColor: context.colors.ui.lightgrey,
+      borderRadius: 4,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: Scale.xs,
+    },
+    check: {
+      width: 12, //Scale.s,
+      height: 12, //Scale.s,
+      backgroundColor: context.colors.main['5'],
+      borderRadius: 4,
+    },
+    label: {
+      ...Font.small,
+      color: context.colors.ui.black,
+    },
+  });

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {Checkbox} from './checkbox.component';
+
+describe('Checkbox component test', () => {
+  it('renders a checkbox with a "suiker" label that is not checked', function () {
+    const tree = render
+      .create(
+        <Checkbox
+          label={'suiker'}
+          value={false}
+          onValueChange={() => console.log('suiker checkbox')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders a checkbox with a "notenallergie" label that is checked', function () {
+    const tree = render
+      .create(
+        <Checkbox
+          label={'notenallergie'}
+          value={true}
+          onValueChange={() => console.log('notenallergie checked checkbox')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});