@tactics/toddle-styleguide 5.0.4 → 5.0.5

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {Pressable, PressableProps, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './button.styles';
+import {Heading4} from '../../atoms/heading-components';
+import {IconNameType, IconStyleType} from '../../../types/icontype.type';
+import {Icon} from '../../../icons/index';
+
+type ButtonType = 'regular' | 'error' | 'success' | 'light';
+
+interface ButtonProps extends PressableProps {
+  label: string;
+  icon?: boolean;
+  iconStyle?: IconStyleType;
+  iconName?: IconNameType;
+  iconSize?: number;
+  disabled?: boolean;
+  type?: ButtonType;
+}
+
+const Button = ({
+  label,
+  icon = false,
+  iconStyle = 'regular',
+  iconName = 'calendar',
+  iconSize,
+  disabled,
+  type = 'regular',
+  ...props
+}: ButtonProps) => {
+  const context = useContext(ThemeCtx);
+
+  let buttonColor;
+  let textColor = context.colors.ui.white;
+  if (type === 'error') {
+    buttonColor = context.colors.ui.error.dark;
+  } else if (type === 'success') {
+    buttonColor = context.colors.ui.success.dark;
+  } else if (type === 'light') {
+    buttonColor = context.colors.ui.white;
+    textColor = context.colors.ui.darkgrey;
+  } else {
+    buttonColor = context.colors.main['0'];
+    textColor = context.colors.main['9'];
+  }
+
+  const styles = Stylesheet(context, disabled, buttonColor);
+
+  return (
+    <Pressable disabled={disabled} {...props}>
+      <View style={styles.container}>
+        {icon ? (
+          <View style={styles.iconGap}>
+            <Icon
+              style={iconStyle}
+              name={iconName}
+              color={disabled ? context.colors.ui.darkgrey : textColor}
+              size={iconSize}
+            />
+          </View>
+        ) : null}
+        <View>
+          <Heading4
+            textAlign={'center'}
+            textColor={disabled ? context.colors.ui.darkgrey : textColor}
+          >
+            {label}
+          </Heading4>
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+
+export {Button as Button};

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

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

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import {Button} from './button.component';
+const {View} = require('react-native');
+
+export const ButtonPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Button label="Default button" onPress={() => console.log('clicked')} />
+      <Button
+        label="Error button"
+        type={'error'}
+        onPress={() => console.log('clicked')}
+      />
+      <Button
+        label="Success button"
+        type={'success'}
+        onPress={() => console.log('clicked')}
+      />
+      <Button
+        label="Light button"
+        type={'light'}
+        onPress={() => console.log('clicked')}
+      />
+      <Button
+        label="Icon button"
+        icon={true}
+        iconName={'eye'}
+        onPress={() => console.log('clicked')}
+      />
+      <Button
+        label="Disabled"
+        disabled={true}
+        onPress={() => console.log('clicked')}
+      />
+      <Button
+        label="Success disabled"
+        type={'success'}
+        disabled={true}
+        onPress={() => console.log('clicked')}
+      />
+      <Button
+        label="Disabled Icon button"
+        disabled={true}
+        icon={true}
+        iconStyle={'solid'}
+        iconName={'document-text'}
+        onPress={() => console.log('clicked disabled')}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,18 @@
+export function Stylesheet(
+  context: any,
+  disabled: any,
+  buttonColor: any
+): {
+  container: {
+    backgroundColor: any;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    flexDirection: 'row';
+    justifyContent: 'center';
+    alignItems: 'center';
+    borderRadius: number;
+  };
+  iconGap: {
+    marginRight: number;
+  };
+};

package/src/components/molecules/button/button.styles.js

@@ -0,0 +1,18 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, disabled, buttonColor) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: disabled ? context.colors.ui.lightgrey : buttonColor,
+      paddingVertical: Scale.s,
+      paddingHorizontal: Scale.l,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 50,
+    },
+    iconGap: {
+      marginRight: Scale.s,
+    },
+  });

package/src/components/molecules/button/button.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {Button} from './button.component';
+
+describe('test button component', () => {
+  it('should render a button component', function () {
+    const tree = render.create(<Button label="Test button" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a success button component', function () {
+    const tree = render
+      .create(<Button type={'success'} label="Success button" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render an error button component', function () {
+    const tree = render
+      .create(<Button type={'error'} label="Error button" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a light button component', function () {
+    const tree = render
+      .create(<Button type={'light'} label="Light button" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a button component that is disabled', () => {
+    const tree = render
+      .create(<Button label="Button without icon" disabled={true} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a button component with a clock icon, since regular is the default the icon will be outlined', () => {
+    const tree = render
+      .create(
+        <Button label="Button with icon" icon={true} iconName={'clock'} />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a button component with a solid icon named eye-off but is also disabled', () => {
+    const tree = render
+      .create(
+        <Button
+          label="Button with icon"
+          icon={true}
+          iconStyle={'solid'}
+          iconName={'eye-off'}
+          disabled={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,343 @@
+// 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
+    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]}
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="24"
+      bbWidth="24"
+      fill="none"
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      vbHeight={19}
+      vbWidth={10}
+      width={24}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M8.875 17.375L1 9.5L8.875 1.625"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4279837036,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+  <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": "#19216C",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "paddingBottom": 12,
+        "paddingLeft": 24,
+        "paddingRight": 24,
+        "paddingTop": 12,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "marginRight": 16,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight="24"
+        bbWidth="24"
+        fill="none"
+        focusable={false}
+        height={24}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
+        }
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            [
+              "fill",
+            ]
+          }
+        >
+          <RNSVGPath
+            d="M7.33333 6.16667V1.5M16.6667 6.16667V1.5M6.16667 10.8333H17.8333M3.83333 22.5H20.1667C21.4553 22.5 22.5 21.4553 22.5 20.1667V6.16667C22.5 4.878 21.4553 3.83333 20.1667 3.83333H3.83333C2.54467 3.83333 1.5 4.878 1.5 6.16667V20.1667C1.5 21.4553 2.54467 22.5 3.83333 22.5Z"
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+            propList={
+              [
+                "stroke",
+                "strokeWidth",
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            stroke={
+              {
+                "payload": 4292929785,
+                "type": 0,
+              }
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+            strokeWidth="2"
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 14,
+                "lineHeight": 22.4,
+              },
+            ],
+            {
+              "color": "#E0E8F9",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        1 Dec 2022
+      </Text>
+    </View>
+  </View>
+  <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]}
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="24"
+      bbWidth="24"
+      fill="none"
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      vbHeight={19}
+      vbWidth={11}
+      width={24}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M1.75 1.625L9.33333 9.5L1.75 17.375"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4279837036,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+type CalendarSelectProps = {
+    onPressDate: (date: ToddleDateTime) => void;
+    startDate: ToddleDateTime;
+    onUpdateDate: (date: ToddleDateTime) => void;
+    labelForToday?: string | undefined;
+};
+declare const CalendarSelect: ({ onPressDate, startDate, onUpdateDate, labelForToday, }: CalendarSelectProps) => React.JSX.Element;
+export { CalendarSelect as CalendarSelect };

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import {useContext, useEffect, useState} from 'react';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './calendar-select.styles';
+import {Pressable, View} from 'react-native';
+import {Paragraph} from '../../atoms/paragraph-components';
+import {Icon} from '../../../icons/index';
+import {useDebounce} from '../../../hooks/use-debounce';
+
+type CalendarSelectProps = {
+  onPressDate: (date: ToddleDateTime) => void;
+  startDate: ToddleDateTime;
+  onUpdateDate: (date: ToddleDateTime) => void;
+  labelForToday?: string | undefined;
+};
+
+const CalendarSelect = ({
+  onPressDate,
+  startDate,
+  onUpdateDate,
+  labelForToday,
+}: CalendarSelectProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const [visibleDate, setVisibleDate] = useState(startDate);
+  const debouncedVisibleDate = useDebounce<ToddleDateTime>(visibleDate, 500);
+
+  const today = ToddleDateTime.now();
+  const format = 'yyyy-LL-dd';
+  const isToday = today.toFormat(format) == visibleDate.toFormat(format);
+
+  useEffect(() => {
+    setVisibleDate(startDate);
+  }, [startDate]);
+
+  useEffect(() => {
+    // If they are the same dont trigger event again.
+    if (visibleDate !== startDate) {
+      onUpdateDate(debouncedVisibleDate);
+    }
+  }, [debouncedVisibleDate]);
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={() => {
+          setVisibleDate(visibleDate.minus({days: 1}));
+        }}
+        style={styles.arrowContainer}
+      >
+        <Icon
+          style={'regular'}
+          name={'chevron-left'}
+          color={context.colors.main['9']}
+        />
+      </Pressable>
+
+      <Pressable
+        onPress={() => onPressDate(visibleDate)}
+        style={styles.dateContainer}
+      >
+        <View style={styles.icon}>
+          <Icon
+            style={'regular'}
+            name={'calendar'}
+            color={context.colors.main['9']}
+          />
+        </View>
+        <Paragraph textColor={context.colors.main['9']} textAlign={'center'}>
+          {isToday && labelForToday
+            ? labelForToday
+            : visibleDate.toLocaleString({
+                weekday: 'short',
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric',
+              })}
+        </Paragraph>
+      </Pressable>
+
+      <Pressable
+        onPress={() => {
+          setVisibleDate(visibleDate.plus({days: 1}));
+        }}
+        style={styles.arrowContainer}
+      >
+        <Icon
+          style={'regular'}
+          name={'chevron-right'}
+          color={context.colors.main['9']}
+        />
+      </Pressable>
+    </View>
+  );
+};
+export {CalendarSelect as CalendarSelect};

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

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