@tactics/toddle-styleguide 0.1.3 → 0.1.4

package/src/components/atoms/contact-role/contact-role.preview.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {ContactRole} from './contact-role.component';
+const {View} = require('react-native');
+
+export const ContactRolePreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <ContactRole name={'Pieter Jannsens'} role={'Vader'} />
+    </View>
+  );
+};

package/src/components/atoms/contact-role/contact-role.styles.d.ts

@@ -0,0 +1,19 @@
+export function Stylesheet(context: any): {
+  container: {
+    display: 'flex';
+    alignItems: 'center';
+  };
+  name: {
+    marginBottom: number;
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  role: {
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+};

package/src/components/atoms/contact-role/contact-role.styles.js

@@ -0,0 +1,20 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    name: {
+      ...Font.bigBold,
+      marginBottom: Scale.xxs,
+      color: context.colors.ui.black,
+    },
+    role: {
+      ...Font.small,
+      color: context.colors.ui.black,
+    },
+  });

package/src/components/atoms/contact-role/contact-role.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {ContactRole} from './contact-role.component';
+
+describe('Contact role component test', () => {
+  it('renders a contact who is the father', function () {
+    const tree = render
+      .create(<ContactRole name={'Darth Vader'} role={"I'm your Father"} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders a contact who is the sister', function () {
+    const tree = render
+      .create(<ContactRole name={'Princess Leia'} role={'Sister'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/date-input/__snapshots__/date-input.test.js.snap

@@ -43,7 +43,7 @@ exports[`Test date input component renders a date input component 1`] = `
       }
     }
   >
-    2022-12-26
+    2022-12-01
   </Text>
   <RNSVGSvgView
     align="xMidYMid"

package/src/components/atoms/date-input/date-input.component.d.ts

@@ -1,7 +1,10 @@
-import { DateTime } from 'luxon';
+import {DateTime} from 'luxon';
 declare type DateInputProps = {
-    onPress: () => void;
-    value: DateTime;
+  onPress: () => void;
+  value: DateTime;
 };
-export declare const DateInput: ({ onPress, value }: DateInputProps) => JSX.Element;
+export declare const DateInput: ({
+  onPress,
+  value,
+}: DateInputProps) => JSX.Element;
 export {};

package/src/components/atoms/date-input/date-input.test.js

@@ -3,12 +3,14 @@ import renderer from 'react-test-renderer';
 import {DateInput} from './date-input.component';
 import {DateTime} from 'luxon';
 
+const testDate = DateTime.fromISO('2022-12-01');
+
 describe('Test date input component', () => {
   it('renders a date input component', () => {
     const tree = renderer
       .create(
         <DateInput
-          value={DateTime.now()}
+          value={testDate}
           onPress={() => console.log('do something')}
         />
       )

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

@@ -1,8 +1,8 @@
-import { DateTime } from 'luxon';
+import {DateTime} from 'luxon';
 declare type DayProps = {
-    date: DateTime;
-    onSelect: (date: DateTime) => void;
-    isSelected?: boolean;
+  date: DateTime;
+  onSelect: (date: DateTime) => void;
+  isSelected?: boolean;
 };
-declare const Day: ({ onSelect, date, isSelected }: DayProps) => JSX.Element;
-export { Day as Day };
+declare const Day: ({onSelect, date, isSelected}: DayProps) => JSX.Element;
+export {Day as Day};

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

@@ -21,7 +21,7 @@ const Day = ({onSelect, date, isSelected}: DayProps) => {
 
   return (
     <View style={styles.container}>
-      <View>
+      <View style={styles.dayNameContainer}>
         <Text style={[styles.dayName, styles.dayName]}>
           {date.weekdayShort.toUpperCase().slice(0, 2)}
         </Text>

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

@@ -1,37 +1,44 @@
-export function Stylesheet(context: any, isSelected: any, isToday: any): {
-    container: {
-        alignItems: "center";
-        justifyContent: "center";
-        backgroundColor: any;
-    };
-    dayCircle: {
-        width: number;
-        height: number;
-        borderRadius: number;
-        padding: number;
-        alignItems: "center";
-        justifyContent: "center";
-        backgroundColor: any;
-        borderColor: any;
-        borderWidth: number;
-    };
-    dayNumber: {
-        fontFamily: string;
-        fontSize: number;
-        lineHeight: number;
-    };
-    monthNumber: {
-        fontFamily: string;
-        fontSize: number;
-        lineHeight: number;
-    };
-    selectedDate: {
-        color: any;
-    };
-    dayName: {
-        color: any;
-        fontFamily: string;
-        fontSize: number;
-        lineHeight: number;
-    };
+export function Stylesheet(
+  context: any,
+  isSelected: any,
+  isToday: any
+): {
+  container: {
+    alignItems: 'center';
+    justifyContent: 'center';
+    backgroundColor: any;
+  };
+  dayCircle: {
+    width: number;
+    height: number;
+    borderRadius: number;
+    padding: number;
+    alignItems: 'center';
+    justifyContent: 'center';
+    backgroundColor: any;
+    borderColor: any;
+    borderWidth: number;
+  };
+  dayNumber: {
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  monthNumber: {
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  selectedDate: {
+    color: any;
+  };
+  dayNameContainer: {
+    marginBottom: number;
+  };
+  dayName: {
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
 };

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

@@ -34,6 +34,9 @@ export const Stylesheet = (context, isSelected, isToday) =>
     selectedDate: {
       color: isSelected ? context.colors.main[9] : context.colors.ui.grey,
     },
+    dayNameContainer: {
+      marginBottom: Scale.s,
+    },
     dayName: {
       ...Font.medium,
       color: context.colors.ui.grey,

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

@@ -1,8 +1,12 @@
-import { DateTime } from 'luxon';
+import {DateTime} from 'luxon';
 declare type DaySelectProps = {
-    onSelectDate: (date: DateTime) => void;
-    startDate: DateTime;
-    selectedDate: DateTime;
+  onSelectDate: (date: DateTime) => void;
+  startDate: DateTime;
+  selectedDate: DateTime;
 };
-declare const DaySelect: ({ onSelectDate, selectedDate, startDate }: DaySelectProps) => JSX.Element;
-export { DaySelect as DaySelect };
+declare const DaySelect: ({
+  onSelectDate,
+  selectedDate,
+  startDate,
+}: DaySelectProps) => JSX.Element;
+export {DaySelect as DaySelect};

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

@@ -3,6 +3,7 @@ import {
   Directions,
   Gesture,
   GestureDetector,
+  GestureHandlerRootView,
 } from 'react-native-gesture-handler';
 import {View} from 'react-native';
 import {DateTime} from 'luxon';
@@ -71,20 +72,22 @@ const DaySelect = ({onSelectDate, selectedDate, startDate}: DaySelectProps) => {
   );
 
   return (
-    <GestureDetector gesture={composedGesture}>
-      <View style={styles.container}>
-        {weekData.map((weekday) => {
-          return (
-            <Day
-              key={weekday.toString()}
-              date={weekday}
-              onSelect={onClick}
-              isSelected={isThisDaySelected(weekday)}
-            />
-          );
-        })}
-      </View>
-    </GestureDetector>
+    <GestureHandlerRootView>
+      <GestureDetector gesture={composedGesture}>
+        <View style={styles.container}>
+          {weekData.map((weekday) => {
+            return (
+              <Day
+                key={weekday.toString()}
+                date={weekday}
+                onSelect={onClick}
+                isSelected={isThisDaySelected(weekday)}
+              />
+            );
+          })}
+        </View>
+      </GestureDetector>
+    </GestureHandlerRootView>
   );
 };
 export {DaySelect as DaySelect};

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

@@ -1,10 +1,10 @@
 export function Stylesheet(context: any): {
-    container: {
-        backgroundColor: any;
-        padding: number;
-        flexDirection: "row";
-        justifyContent: "space-evenly";
-        borderRadius: number;
-        overflow: "hidden";
-    };
+  container: {
+    backgroundColor: any;
+    padding: number;
+    flexDirection: 'row';
+    justifyContent: 'space-evenly';
+    borderRadius: number;
+    overflow: 'hidden';
+  };
 };

package/src/components/atoms/department_logo/__snapshots__/department-logo.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test department-logo component should render a department-logo component 1`] = `
+<Text
+  style={
+    {
+      "color": "#19216C",
+      "fontFamily": "Montserrat",
+      "fontSize": 13,
+      "lineHeight": 20.4,
+    }
+  }
+>
+  Test Department
+</Text>
+`;

package/src/components/atoms/department_logo/department-logo.component.d.ts

@@ -0,0 +1,7 @@
+declare type DepartmentLogoProps = {
+  department: string;
+};
+declare const DepartmentLogo: ({
+  department,
+}: DepartmentLogoProps) => JSX.Element;
+export {DepartmentLogo as DepartmentLogo};

package/src/components/atoms/department_logo/department-logo.component.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import {View, Text} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './department-logo.styles';
+
+type DepartmentLogoProps = {
+  department: string;
+};
+
+const DepartmentLogo = ({department}: DepartmentLogoProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return <Text style={styles.container}>{department}</Text>;
+};
+export {DepartmentLogo as DepartmentLogo};

package/src/components/atoms/department_logo/department-logo.preview.d.ts

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

package/src/components/atoms/department_logo/department-logo.preview.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {DepartmentLogo} from './department-logo.component';
+import {View} from 'react-native';
+
+export const DepartmentLogoPreview = ({}: {}) => {
+  return (
+    <View>
+      <DepartmentLogo department={'De Teddybeertjes'} />
+    </View>
+  );
+};

package/src/components/atoms/department_logo/department-logo.styles.d.ts

@@ -0,0 +1,8 @@
+export function Stylesheet(context: any): {
+  container: {
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+    color: any;
+  };
+};

package/src/components/atoms/department_logo/department-logo.styles.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      color: context.colors.main[0],
+      ...Font.small,
+    },
+  });

package/src/components/atoms/department_logo/department-logo.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {DepartmentLogo} from './department-logo.component';
+
+describe('test department-logo component', () => {
+  it('should render a department-logo component', function () {
+    const tree = render
+      .create(<DepartmentLogo department={'Test Department'} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/filter-range/filter-range.component.d.ts

@@ -1,10 +1,17 @@
 declare type FilterRangeProps = {
-    value: number | number[];
-    onChange: (value: number | number[]) => void;
-    minValue: number;
-    maxValue: number;
-    prefix?: string;
-    suffix?: string;
+  value: number | number[];
+  onChange: (value: number | number[]) => void;
+  minValue: number;
+  maxValue: number;
+  prefix?: string;
+  suffix?: string;
 };
-export declare const FilterRange: ({ value, minValue, maxValue, onChange, prefix, suffix, }: FilterRangeProps) => JSX.Element;
+export declare const FilterRange: ({
+  value,
+  minValue,
+  maxValue,
+  onChange,
+  prefix,
+  suffix,
+}: FilterRangeProps) => JSX.Element;
 export {};

package/src/components/atoms/filter-tab/__snapshots__/filter-tab.test.js.snap

@@ -27,6 +27,7 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
     <View
       style={
         {
+          "alignItems": "stretch",
           "display": "flex",
           "flexDirection": "column",
           "position": "relative",
@@ -138,7 +139,9 @@ exports[`Filter tab test renders a filter tab with 2 tabs 1`] = `
           {
             "alignItems": "center",
             "backgroundColor": "#647ACB",
-            "borderRadius": 16,
+            "borderRadius": 12,
+            "marginTop": 3,
+            "maxHeight": 32,
             "paddingBottom": 8,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -210,6 +213,7 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
     <View
       style={
         {
+          "alignItems": "stretch",
           "display": "flex",
           "flexDirection": "column",
           "position": "relative",
@@ -369,7 +373,9 @@ exports[`Filter tab test renders a filter tab with 3 tabs 1`] = `
           {
             "alignItems": "center",
             "backgroundColor": "#647ACB",
-            "borderRadius": 16,
+            "borderRadius": 12,
+            "marginTop": 3,
+            "maxHeight": 32,
             "paddingBottom": 8,
             "paddingLeft": 16,
             "paddingRight": 16,

package/src/components/atoms/filter-tab/filter-tab.component.d.ts

@@ -1,8 +1,12 @@
 declare type FilterTab = {
-    tabItem: {
-        value: string;
-        label: string;
-    }[];
+  tabItem: {
+    value: string;
+    label: string;
+  }[];
+  filterValue: (value: string) => void;
 };
-export declare const FilterTab: ({ tabItem }: FilterTab) => JSX.Element;
+export declare const FilterTab: ({
+  tabItem,
+  filterValue,
+}: FilterTab) => JSX.Element;
 export {};

package/src/components/atoms/filter-tab/filter-tab.component.tsx

@@ -10,9 +10,10 @@ type FilterTab = {
     value: string;
     label: string;
   }[];
+  filterValue: (value: string) => void;
 };
 
-export const FilterTab = ({tabItem}: FilterTab) => {
+export const FilterTab = ({tabItem, filterValue}: FilterTab) => {
   const [dimensions, setDimensions] = useState({width: 0, height: 0});
   const [translateValue] = useState(new Animated.Value(0));
 
@@ -55,6 +56,7 @@ export const FilterTab = ({tabItem}: FilterTab) => {
               setClickedButton(index);
               setIsActive(!isActive);
               translateTab(index, inRow);
+              filterValue(tab.value);
             }}
           >
             <Text

package/src/components/atoms/filter-tab/filter-tab.preview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {FilterTab} from './filter-tab.component';
 import {useWindowDimensions} from 'react-native';
 const {View} = require('react-native');
@@ -19,19 +19,62 @@ export const FilterTabPreview = ({}: {}) => {
     },
   ];
 
+  const data = [
+    {
+      value: 'M',
+      label: 'Jongen',
+    },
+    {
+      value: 'V',
+      label: 'Meisje',
+    },
+    {
+      value: 'MV',
+      label: 'Beide',
+    },
+    {
+      value: 'MV',
+      label: 'Beide',
+    },
+    {
+      value: 'MV',
+      label: 'Beide',
+    },
+    {
+      value: 'MV',
+      label: 'Beide',
+    },
+  ];
+
   const full = useWindowDimensions();
   const width = full.width;
 
+  const [value, setValue] = useState('M');
+
+  function setFilterValue(value: string) {
+    setValue(value);
+  }
+
   return (
     <View
       style={{
-        borderColor: 'red',
-        borderStyle: 'solid',
-        borderWidth: 1,
+        // borderColor: 'red',
+        // borderStyle: 'solid',
+        // borderWidth: 1,
         width: width - 30,
       }}
     >
-      <FilterTab tabItem={tabs} />
+      <View
+        style={{
+          marginTop: 20,
+          marginBottom: 20,
+        }}
+      >
+        <FilterTab tabItem={tabs} filterValue={setFilterValue} />
+      </View>
+      <View>
+        <FilterTab tabItem={data} filterValue={setFilterValue} />
+      </View>
     </View>
   );
 };

package/src/components/atoms/filter-tab/filter-tab.styles.js

@@ -11,7 +11,7 @@ export const Stylesheet = (Context, inRow, ElementWidth, ItemWidth) =>
       paddingLeft: Scale.xxs,
       paddingTop: Scale.xxs,
       paddingBottom: Scale.xxs,
-      borderRadius: 16,
+      borderRadius: inRow ? 50 : Scale.m,
       backgroundColor: Context.colors.ui.lightgrey,
     },
     inner: {
@@ -21,6 +21,7 @@ export const Stylesheet = (Context, inRow, ElementWidth, ItemWidth) =>
     tabs: {
       display: 'flex',
       flexDirection: inRow ? 'row' : 'column',
+      alignItems: inRow ? 'center' : 'stretch',
       width: '100%',
       position: 'relative',
     },
@@ -30,17 +31,19 @@ export const Stylesheet = (Context, inRow, ElementWidth, ItemWidth) =>
       paddingLeft: Scale.m,
       paddingTop: Scale.xs,
       paddingBottom: Scale.xs,
-      borderRadius: 16,
+      borderRadius: Scale.m,
       alignItems: 'center',
       backgroundColor: 'transparent',
     },
     slidingTab: {
       width: ItemWidth,
+      maxHeight: 32,
+      marginTop: inRow ? 0 : 3,
       paddingRight: Scale.m,
       paddingLeft: Scale.m,
       paddingTop: Scale.xs,
       paddingBottom: Scale.xs,
-      borderRadius: 16,
+      borderRadius: inRow ? 50 : Scale.s,
       zIndex: -1,
       position: 'absolute',
       backgroundColor: Context.colors.main['5'],

package/src/components/atoms/filter-tab/filter-tab.test.js

@@ -14,7 +14,9 @@ describe('Filter tab test', () => {
         label: 'NFC',
       },
     ];
-    const tree = render.create(<FilterTab tabItem={tabs1} />).toJSON();
+    const tree = render
+      .create(<FilterTab tabItem={tabs1} filterValue={() => 'NFC'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('renders a filter tab with 3 tabs', function () {
@@ -32,7 +34,9 @@ describe('Filter tab test', () => {
         label: 'Beide',
       },
     ];
-    const tree = render.create(<FilterTab tabItem={tabs2} />).toJSON();
+    const tree = render
+      .create(<FilterTab tabItem={tabs2} filterValue={() => 'M'} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
 });