@tactics/toddle-styleguide 0.0.7 → 0.1.0

package/src/components/atoms/select-picker/__snapshots__/select-picker.test.js.snap

@@ -0,0 +1,353 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select Picker test renders a picker with placeholder text 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#FFFFFF",
+      "borderColor": "#E5E8EB",
+      "borderRadius": 8,
+      "borderStyle": "solid",
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "height": 48,
+      "justifyContent": "center",
+      "paddingBottom": 8,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 8,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "width": "100%",
+        "zIndex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignSelf": "stretch",
+          },
+          {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+        testID="ios_touchable_wrapper"
+      >
+        <View
+          pointerEvents="box-only"
+          style={
+            {
+              "height": "100%",
+              "justifyContent": "flex-start",
+            }
+          }
+        >
+          <TextInput
+            editable={false}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "color": "#9AA5B1",
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "justifyContent": "center",
+                  "lineHeight": 22.4,
+                },
+                {
+                  "color": "#c7c7cd",
+                },
+              ]
+            }
+            testID="text_input"
+            value="Choose..."
+          />
+        </View>
+      </View>
+      <Modal
+        hardwareAccelerated={false}
+        onOrientationChange={[Function]}
+        supportedOrientations={
+          [
+            "portrait",
+            "landscape",
+          ]
+        }
+        testID="ios_modal"
+        transparent={true}
+        visible={false}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 16,
+        "width": "10%",
+      }
+    }
+  >
+    <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={26}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M8.66663 10.125L13 5.625L17.3333 10.125M17.3333 16.875L13 21.375L8.66663 16.875"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4280232243}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Select Picker test renders a picker without placeholder text 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#FFFFFF",
+      "borderColor": "#E5E8EB",
+      "borderRadius": 8,
+      "borderStyle": "solid",
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "height": 48,
+      "justifyContent": "center",
+      "paddingBottom": 8,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 8,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "width": "100%",
+        "zIndex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignSelf": "stretch",
+          },
+          {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+        testID="ios_touchable_wrapper"
+      >
+        <View
+          pointerEvents="box-only"
+          style={
+            {
+              "height": "100%",
+              "justifyContent": "flex-start",
+            }
+          }
+        >
+          <TextInput
+            editable={false}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "color": "#9AA5B1",
+                  "fontFamily": "SourceSansPro",
+                  "fontSize": 16,
+                  "justifyContent": "center",
+                  "lineHeight": 22.4,
+                },
+                {},
+              ]
+            }
+            testID="text_input"
+            value="an option"
+          />
+        </View>
+      </View>
+      <Modal
+        hardwareAccelerated={false}
+        onOrientationChange={[Function]}
+        supportedOrientations={
+          [
+            "portrait",
+            "landscape",
+          ]
+        }
+        testID="ios_modal"
+        transparent={true}
+        visible={false}
+      />
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 16,
+        "width": "10%",
+      }
+    }
+  >
+    <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={26}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M8.66663 10.125L13 5.625L17.3333 10.125M17.3333 16.875L13 21.375L8.66663 16.875"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4280232243}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

package/src/components/atoms/select-picker/select-picker.component.d.ts

@@ -0,0 +1,11 @@
+declare type PickerProps = {
+    placeholder?: string;
+    data: {
+        value: number | string;
+        label: string;
+    }[];
+    onChange: (item: string) => void;
+    defaultValue: string;
+};
+export declare const SelectPicker: ({ placeholder, data, onChange, defaultValue, }: PickerProps) => JSX.Element;
+export {};

package/src/components/atoms/select-picker/select-picker.component.tsx

@@ -0,0 +1,70 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './select-picker.styles';
+import {Icon} from '../../../icons';
+
+import RNPickerSelect from 'react-native-picker-select';
+import {Font} from '../../../theme/font';
+
+type PickerProps = {
+  placeholder?: string;
+  data: {
+    value: number | string;
+    label: string;
+  }[];
+  onChange: (item: string) => void;
+  defaultValue: string;
+};
+
+export const SelectPicker = ({
+  placeholder,
+  data,
+  onChange,
+  defaultValue,
+}: PickerProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const placeholderText = (placeholder: string | undefined) => {
+    if (placeholder) {
+      return {label: placeholder, value: null, color: context.colors.ui.grey};
+    } else {
+      return {};
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.pickerContainer}>
+        <RNPickerSelect
+          placeholder={placeholderText(placeholder)}
+          onValueChange={onChange}
+          items={data}
+          value={defaultValue}
+          useNativeAndroidPickerStyle={false}
+          style={{
+            inputIOS: {
+              ...Font.medium,
+              color: context.colors.ui.grey,
+              justifyContent: 'center',
+              alignItems: 'center',
+            },
+            inputIOSContainer: {
+              height: '100%',
+              justifyContent: 'flex-start',
+            },
+            viewContainer: {flex: 1, justifyContent: 'center'},
+            inputAndroid: {
+              ...Font.medium,
+              color: context.colors.ui.grey,
+            },
+          }}
+        />
+      </View>
+      <View style={styles.iconContainer}>
+        <Icon.Outline.Selector color={context.colors.ui.black} />
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/select-picker/select-picker.preview.d.ts

@@ -0,0 +1 @@
+export declare const SelectPickerPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/select-picker/select-picker.preview.tsx

@@ -0,0 +1,63 @@
+import React, {useState} from 'react';
+import {SelectPicker} from './select-picker.component';
+import {Text, useWindowDimensions} from 'react-native';
+const {View} = require('react-native');
+
+export const SelectPickerPreview = ({}: {}) => {
+  const full = useWindowDimensions();
+  const width = full.width;
+
+  const languages = [
+    {value: 'Dutch', label: 'Nederlands'},
+    {value: 'French', label: 'Français'},
+    {value: 'German', label: 'Deutsch'},
+  ];
+
+  const colas = [
+    {value: 'Coca-Cola', label: 'Coca-Cola'},
+    {value: 'Pepsi', label: 'Pepsi'},
+  ];
+
+  const [selectedLanguage, setSelectedLanguage] = useState('');
+  const [selectedCola, setSelectedCola] = useState('Coca-Cola');
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View
+        style={{
+          width: width - 100,
+        }}
+      >
+        <Text>
+          {selectedLanguage
+            ? `My native language is ${selectedLanguage}!`
+            : 'Please select your native language!'}
+        </Text>
+        <SelectPicker
+          key={1}
+          data={languages}
+          defaultValue={selectedLanguage}
+          onChange={setSelectedLanguage}
+        />
+        <Text>
+          {selectedCola
+            ? `${selectedCola} wins the Cola battle for me!`
+            : 'Please select your favorite!'}
+        </Text>
+        <SelectPicker
+          key={2}
+          placeholder={'Choose your cola!'}
+          data={colas}
+          defaultValue={selectedCola}
+          onChange={setSelectedCola}
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/select-picker/select-picker.styles.d.ts

@@ -0,0 +1,33 @@
+export function Stylesheet(Context: any): {
+  container: {
+    flexDirection: 'row';
+    justifyContent: 'center';
+    alignItems: 'center';
+    width: string;
+    height: number;
+    backgroundColor: any;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderColor: any;
+    borderRadius: number;
+  };
+  pickerContainer: {
+    width: string;
+    height: string;
+    justifyContent: 'center';
+    alignItems: 'center';
+    zIndex: number;
+  };
+  iconContainer: {
+    width: string;
+    height: string;
+    right: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+    position: 'absolute';
+  };
+};

package/src/components/atoms/select-picker/select-picker.styles.js

@@ -0,0 +1,38 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: Scale.xxl,
+      backgroundColor: Context.colors.ui.white,
+      paddingTop: Scale.xs,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.xs,
+      paddingLeft: Scale.m,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: Context.colors.ui.lightgrey,
+      borderRadius: 8,
+    },
+    pickerContainer: {
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 1,
+    },
+    iconContainer: {
+      width: '10%',
+      height: '100%',
+      right: 16,
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+    },
+  });

package/src/components/atoms/select-picker/select-picker.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {SelectPicker} from './select-picker.component';
+
+describe('Select Picker test', () => {
+  it('renders a picker with placeholder text', function () {
+    const tree = render
+      .create(
+        <SelectPicker
+          data={[{value: 1, label: 'an option'}]}
+          defaultValue={'an option'}
+          onChange={() => console.log('changed')}
+          placeholder={'Choose...'}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders a picker without placeholder text', function () {
+    const tree = render
+      .create(
+        <SelectPicker
+          data={[{value: 1, label: 'an option'}]}
+          defaultValue={'an option'}
+          onChange={() => console.log('changed')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/theme/scale/index.d.ts

@@ -1,12 +1,12 @@
 export declare const Scale: {
-  xxxs: number;
-  xxs: number;
-  xs: number;
-  s: number;
-  m: number;
-  l: number;
-  xl: number;
-  xxl: number;
-  xxxl: number;
-  xxxxl: number;
+    xxxs: number;
+    xxs: number;
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+    xxxxl: number;
 };

package/src/util/date.d.ts

@@ -0,0 +1,3 @@
+import { DateTime } from 'luxon';
+export declare function dateTimeToStringHandler(date: DateTime): string;
+export declare function stringToDateTimeHandler(day: string): DateTime;

package/src/util/date.tsx

@@ -0,0 +1,9 @@
+import {DateTime} from 'luxon';
+
+export function dateTimeToStringHandler(date: DateTime) {
+  return date.toISO().slice(0, 10);
+}
+
+export function stringToDateTimeHandler(day: string) {
+  return DateTime.fromISO(day);
+}