@tactics/toddle-styleguide 0.1.3 → 0.1.4

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

@@ -1,9 +1,14 @@
-import { DateTime } from 'luxon';
+import {DateTime} from 'luxon';
 declare type CalendarProps = {
-    onDayPress: (day: DateTime) => void;
-    selected: DateTime;
-    minDate?: string;
-    maxDate?: string;
+  onDayPress: (day: DateTime) => void;
+  selected: DateTime;
+  minDate?: string;
+  maxDate?: string;
 };
-export declare const Calendar: ({ onDayPress, selected, minDate, maxDate, }: CalendarProps) => JSX.Element;
+export declare const Calendar: ({
+  onDayPress,
+  selected,
+  minDate,
+  maxDate,
+}: CalendarProps) => JSX.Element;
 export {};

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

@@ -3,12 +3,14 @@ import render from 'react-test-renderer';
 import {Calendar} from './calendar.component';
 import {DateTime} from 'luxon';
 
+const testDate = DateTime.fromISO('2022-12-01');
+
 describe('Test for the calendar component', () => {
   it('renders a calendar where you can select a day', function () {
     const tree = render
       .create(
         <Calendar
-          selected={new DateTime('2022-12-02')}
+          selected={testDate}
           onDayPress={() => console.log('pressed day')}
         />
       )
@@ -19,7 +21,7 @@ describe('Test for the calendar component', () => {
     const tree = render
       .create(
         <Calendar
-          selected={new DateTime('2022-12-02')}
+          selected={testDate}
           onDayPress={() => console.log('pressed day')}
           minDate={'2022-01-01'}
           maxDate={'2022-12-31'}

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

@@ -0,0 +1,247 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test Calendar Select renders Calendar Select 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "color": "#FFFFFF",
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+    }
+  }
+>
+  <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]}
+  >
+    <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={27}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M16.875 21.375L9 13.5L16.875 5.625"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4279837036}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+  <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",
+        "backgroundColor": "#19216C",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "paddingBottom": 8,
+        "paddingLeft": 24,
+        "paddingRight": 24,
+        "paddingTop": 8,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "marginRight": 16,
+        }
+      }
+    >
+      <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={27}
+        width="28"
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            [
+              "fill",
+            ]
+          }
+        >
+          <RNSVGPath
+            d="M9.16667 7.875V3.375M17.8333 7.875V3.375M8.08333 12.375H18.9167M5.91667 23.625H21.0833C22.28 23.625 23.25 22.6176 23.25 21.375V7.875C23.25 6.63236 22.28 5.625 21.0833 5.625H5.91667C4.72005 5.625 3.75 6.63236 3.75 7.875V21.375C3.75 22.6176 4.72005 23.625 5.91667 23.625Z"
+            propList={
+              [
+                "stroke",
+                "strokeWidth",
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            stroke={4292929785}
+            strokeLinecap={1}
+            strokeLinejoin={1}
+            strokeWidth="2"
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View>
+      <Text
+        style={
+          {
+            "color": "#E0E8F9",
+          }
+        }
+      >
+        1 Dec 2022
+      </Text>
+    </View>
+  </View>
+  <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]}
+  >
+    <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="M9.75 5.625L17.3333 13.5L9.75 21.375"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4279837036}
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,10 @@
+import {DateTime} from 'luxon';
+declare type CalendarSelectProps = {
+  onPressDate: (date: DateTime) => void;
+  startDate: DateTime;
+};
+declare const CalendarSelect: ({
+  onPressDate,
+  startDate,
+}: CalendarSelectProps) => JSX.Element;
+export {CalendarSelect as CalendarSelect};

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {useContext, useState} from 'react';
+import {DateTime} from 'luxon';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './calendar-select.styles';
+import {Pressable, Text, View} from 'react-native';
+import {ChevronLeftIcon} from '../../../icons/outline/chevron-left/chevron-left.icon';
+import {ChevronRightIcon} from '../../../icons/outline/chevron-right/chevron-right.icon';
+import {CalendarIcon} from '../../../icons/outline/calendar/calendar.icon';
+
+type CalendarSelectProps = {
+  onPressDate: (date: DateTime) => void;
+  startDate: DateTime;
+};
+
+const CalendarSelect = ({onPressDate, startDate}: CalendarSelectProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const [visibleDate, setVisibleDate] = useState(startDate);
+
+  const onPressRight = () => {
+    setVisibleDate(visibleDate.plus({days: 1}));
+  };
+
+  const onPressLeft = () => {
+    setVisibleDate(visibleDate.minus({days: 1}));
+  };
+
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={onPressLeft}>
+        <ChevronLeftIcon />
+      </Pressable>
+
+      <Pressable
+        onPress={() => onPressDate(visibleDate)}
+        style={styles.dateContainer}
+      >
+        <View style={styles.icon}>
+          <CalendarIcon color={context.colors.main[9]} />
+        </View>
+        <View>
+          <Text style={styles.text}>
+            {visibleDate.toLocaleString(DateTime.DATE_MED)}
+          </Text>
+        </View>
+      </Pressable>
+
+      <Pressable onPress={onPressRight}>
+        <ChevronRightIcon />
+      </Pressable>
+    </View>
+  );
+};
+export {CalendarSelect as CalendarSelect};

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

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

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

@@ -0,0 +1,17 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {CalendarSelect} from './calendar-select.component';
+import {DateTime} from 'luxon';
+
+export const CalendarSelectPreview = ({}: {}) => {
+  return (
+    <View>
+      <CalendarSelect
+        onPressDate={(date) =>
+          console.log('show calendar', ',', 'date is:', date.toLocaleString())
+        }
+        startDate={DateTime.now()}
+      />
+    </View>
+  );
+};

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

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

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

@@ -0,0 +1,30 @@
+import {StyleSheet} from 'react-native';
+import {Size} from '../../../types/size.enum';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      color: context.colors.ui.white,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    dateContainer: {
+      flexDirection: 'row',
+      backgroundColor: context.colors.main[0],
+      borderRadius: Scale.xl,
+      paddingTop: Scale.xs,
+      paddingBottom: Scale.xs,
+      paddingLeft: Scale.l,
+      paddingRight: Scale.l,
+      alignItems: 'center',
+    },
+    text: {
+      color: context.colors.main[9],
+    },
+    icon: {
+      marginRight: Scale.m,
+    },
+  });

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {CalendarSelect} from './calendar-select.component';
+import {DateTime} from 'luxon';
+
+const testDate = DateTime.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/atoms/cancel-link/cancel-link.component.d.ts

@@ -1,6 +1,6 @@
 declare type CancelLinkProps = {
-    label: string;
-    onPress: () => void;
+  label: string;
+  onPress: () => void;
 };
-declare const CancelLink: ({ label, onPress }: CancelLinkProps) => JSX.Element;
-export { CancelLink as CancelLink };
+declare const CancelLink: ({label, onPress}: CancelLinkProps) => JSX.Element;
+export {CancelLink as CancelLink};

package/src/components/atoms/check-switch/check-switch.component.d.ts

@@ -1,6 +1,6 @@
 declare type CheckProps = {
-    value: boolean;
-    onToggle: () => void;
+  value: boolean;
+  onToggle: () => void;
 };
-export declare const Check: ({ value, onToggle }: CheckProps) => JSX.Element;
+export declare const Check: ({value, onToggle}: CheckProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,11 @@
 declare type CheckboxProps = {
-    value: boolean;
-    onValueChange: () => void;
-    label: string;
+  value: boolean;
+  onValueChange: () => void;
+  label: string;
 };
-declare const Checkbox: ({ value, onValueChange, label }: CheckboxProps) => JSX.Element;
-export { Checkbox as Checkbox };
+declare const Checkbox: ({
+  value,
+  onValueChange,
+  label,
+}: CheckboxProps) => JSX.Element;
+export {Checkbox as Checkbox};

package/src/components/atoms/child-list-item/child-list-item.component.d.ts

@@ -1,18 +1,30 @@
-import { ImageSourcePropType } from 'react-native';
-import { Initials } from '../../../models/initials.model';
-import { VisualState } from '../../../types/visual-state.enum';
+import {ImageSourcePropType} from 'react-native';
+import {Initials} from '../../../models/initials.model';
+import {VisualState} from '../../../types/visual-state.enum';
 declare type ChildListItemProps = {
-    id: string;
-    name: string;
-    label: string;
-    selectable: boolean;
-    isSelected: boolean;
-    onPressArrow: () => void;
-    onPressText: () => void;
-    onSelect: (id: string) => void;
-    sourceAvatar: ImageSourcePropType | Initials;
-    textTimeTracker: string;
-    visualStateTimeTracker: VisualState;
+  id: string;
+  name: string;
+  label: string;
+  selectable: boolean;
+  isSelected: boolean;
+  onPressArrow: () => void;
+  onPressText: () => void;
+  onSelect: (id: string) => void;
+  sourceAvatar: ImageSourcePropType | Initials;
+  textTimeTracker: string;
+  visualStateTimeTracker: VisualState;
 };
-declare const ChildListItem: ({ id, name, label, selectable, isSelected, onPressArrow, onPressText, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element;
-export { ChildListItem as ChildListItem };
+declare const ChildListItem: ({
+  id,
+  name,
+  label,
+  selectable,
+  isSelected,
+  onPressArrow,
+  onPressText,
+  onSelect,
+  sourceAvatar,
+  textTimeTracker,
+  visualStateTimeTracker,
+}: ChildListItemProps) => JSX.Element;
+export {ChildListItem as ChildListItem};

package/src/components/atoms/contact-item/contact-item.component.d.ts

@@ -1,9 +1,15 @@
 declare type ContactItemProps = {
-    name: string;
-    firstname: string;
-    label: string;
-    onPress?: () => void;
-    isBlocked?: boolean;
+  name: string;
+  firstname: string;
+  label: string;
+  onPress?: () => void;
+  isBlocked?: boolean;
 };
-declare const ContactItem: ({ name, firstname, label, onPress, isBlocked, }: ContactItemProps) => JSX.Element;
-export { ContactItem as ContactItem };
+declare const ContactItem: ({
+  name,
+  firstname,
+  label,
+  onPress,
+  isBlocked,
+}: ContactItemProps) => JSX.Element;
+export {ContactItem as ContactItem};

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

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Contact role component test renders a contact who is the father 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "SourceSansProBold",
+        "fontSize": 24,
+        "lineHeight": 30.2,
+        "marginBottom": 4,
+      }
+    }
+  >
+    Darth Vader
+  </Text>
+  <Text
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "Montserrat",
+        "fontSize": 13,
+        "lineHeight": 20.4,
+      }
+    }
+  >
+    I'm your Father
+  </Text>
+</View>
+`;
+
+exports[`Contact role component test renders a contact who is the sister 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "SourceSansProBold",
+        "fontSize": 24,
+        "lineHeight": 30.2,
+        "marginBottom": 4,
+      }
+    }
+  >
+    Princess Leia
+  </Text>
+  <Text
+    style={
+      {
+        "color": "#1F2933",
+        "fontFamily": "Montserrat",
+        "fontSize": 13,
+        "lineHeight": 20.4,
+      }
+    }
+  >
+    Sister
+  </Text>
+</View>
+`;

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

@@ -0,0 +1,9 @@
+declare type ContactRoleProps = {
+  name: string;
+  role?: string;
+};
+export declare const ContactRole: ({
+  name,
+  role,
+}: ContactRoleProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Text, View} from 'react-native';
+import {Stylesheet} from './contact-role.styles';
+
+type ContactRoleProps = {
+  name: string;
+  role?: string;
+};
+
+export const ContactRole = ({name, role}: ContactRoleProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.name}>{name}</Text>
+      <Text style={styles.role}>{role}</Text>
+    </View>
+  );
+};

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

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