@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

@@ -1,77 +0,0 @@
-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

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

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

@@ -1,57 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,343 +0,0 @@
-// 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

@@ -1,10 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

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