@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/components/atoms/heading-components/headings.preview.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {Heading1} from './heading1/heading1.component';
+import {Heading2} from './heading2/heading2.component';
+import {Heading3} from './heading3/heading3.component';
+import {Heading4} from './heading4/heading4.component';
+import {AllCapsHeading} from './all-caps-heading/all-caps-heading.component';
+
+const {View} = require('react-native');
+
+export const HeadingsPreview = ({}: {}) => {
+  return (
+    <View
+      style={{flex: 1, alignItems: 'center', justifyContent: 'space-around'}}
+    >
+      {/*
+       //// HEADING 1 ////
+       */}
+      <Heading1>Heading 1</Heading1>
+      <Heading1 textColor={'#4f14b3'} textAlign={'center'}>
+        H1 color
+      </Heading1>
+      <Heading1 bold={true} textAlign={'center'}>
+        H1 Bold
+      </Heading1>
+      <Heading1 bold={true} textColor={'#4f14b3'} textAlign={'center'}>
+        H1 Bold color
+      </Heading1>
+
+      {/*
+       //// HEADING 2 ////
+       */}
+      <Heading2>Heading 2</Heading2>
+      <Heading2 textColor={'#4f14b3'} textAlign={'center'}>
+        H2 color
+      </Heading2>
+      <Heading2 bold={true} textAlign={'center'}>
+        H2 Bold
+      </Heading2>
+      <Heading2 bold={true} textColor={'#4f14b3'} textAlign={'center'}>
+        H2 Bold color
+      </Heading2>
+
+      {/*
+       //// HEADING 3 ////
+       */}
+      <Heading3>Heading 3</Heading3>
+      <Heading3 textColor={'#4f14b3'} textAlign={'center'}>
+        H3 color
+      </Heading3>
+      <Heading3 bold={true} textAlign={'center'}>
+        H3 bold
+      </Heading3>
+      <Heading3 bold={true} textColor={'#4f14b3'} textAlign={'center'}>
+        H3 bold color
+      </Heading3>
+
+      {/*
+       //// HEADING 4 ////
+       */}
+      <Heading4>Heading 4</Heading4>
+      <Heading4 textColor={'#4f14b3'} textAlign={'center'}>
+        H4 color
+      </Heading4>
+      <Heading4 bold={true} textAlign={'center'}>
+        H4 bold
+      </Heading4>
+      <Heading4 bold={true} textColor={'#4f14b3'} textAlign={'center'}>
+        H4 bold color
+      </Heading4>
+
+      {/*
+       //// ALL CAPS HEADING ////
+       */}
+      <AllCapsHeading>All caps heading</AllCapsHeading>
+      <AllCapsHeading textColor={'#4f14b3'} textAlign={'center'}>
+        ach color
+      </AllCapsHeading>
+      <AllCapsHeading bold={true} textAlign={'center'}>
+        ach bold
+      </AllCapsHeading>
+      <AllCapsHeading bold={true} textColor={'#4f14b3'} textAlign={'center'}>
+        ach bold color
+      </AllCapsHeading>
+    </View>
+  );
+};

package/src/components/atoms/heading-components/index.d.ts

@@ -0,0 +1,6 @@
+import { Heading1 } from './heading1/heading1.component';
+import { Heading2 } from './heading2/heading2.component';
+import { Heading3 } from './heading3/heading3.component';
+import { Heading4 } from './heading4/heading4.component';
+import { AllCapsHeading } from './all-caps-heading/all-caps-heading.component';
+export { AllCapsHeading, Heading1, Heading2, Heading3, Heading4 };

package/src/components/atoms/heading-components/index.tsx

@@ -0,0 +1,7 @@
+import {Heading1} from './heading1/heading1.component';
+import {Heading2} from './heading2/heading2.component';
+import {Heading3} from './heading3/heading3.component';
+import {Heading4} from './heading4/heading4.component';
+import {AllCapsHeading} from './all-caps-heading/all-caps-heading.component';
+
+export {AllCapsHeading, Heading1, Heading2, Heading3, Heading4};

package/src/components/atoms/image-bubble/__snapshots__/image-bubble.test.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test image-bubble given the bubbleAlignment is SENT return a text-bubble with right-bottom tip 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 24,
+          "justifyContent": "center",
+          "maxWidth": "80%",
+          "overflow": "hidden",
+        },
+        false,
+        {
+          "borderBottomLeftRadius": 32,
+          "borderBottomRightRadius": 8,
+          "marginLeft": 48,
+          "marginRight": 16,
+        },
+      ]
+    }
+  >
+    <Image
+      style={
+        {
+          "resizeMode": "cover",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`test image-bubble given the visualState is RECEIVE return a text-bubble with left-bottom tip 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 24,
+          "justifyContent": "center",
+          "maxWidth": "80%",
+          "overflow": "hidden",
+        },
+        {
+          "borderBottomLeftRadius": 8,
+          "borderBottomRightRadius": 32,
+          "marginLeft": 16,
+          "marginRight": 48,
+        },
+        false,
+      ]
+    }
+  >
+    <Image
+      style={
+        {
+          "resizeMode": "cover",
+        }
+      }
+    />
+  </View>
+</View>
+`;

package/src/components/atoms/image-bubble/image-bubble.component.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
+type ImageBubbleProps = {
+    source: ImageSourcePropType;
+    bubbleAlignment: BubbleAlignment;
+};
+declare const ImageBubble: ({ source, bubbleAlignment }: ImageBubbleProps) => React.JSX.Element;
+export { ImageBubble as ImageBubble };

package/src/components/atoms/image-bubble/image-bubble.component.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {View, Image, ImageSourcePropType, ImageStyle} from 'react-native';
+import {Stylesheet} from './image-bubble.styles';
+import {ThemeCtx} from '../../../context/theme.context';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+
+type ImageBubbleProps = {
+  source: ImageSourcePropType;
+  bubbleAlignment: BubbleAlignment;
+};
+
+const ImageBubble = ({source, bubbleAlignment}: ImageBubbleProps) => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet(Context, bubbleAlignment);
+
+  return (
+    <View>
+      <View style={styles.container}>
+        <Image style={styles.image as ImageStyle} source={source} />
+      </View>
+    </View>
+  );
+};
+
+export {ImageBubble as ImageBubble};

package/src/components/atoms/image-bubble/image-bubble.preview.d.ts

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

package/src/components/atoms/image-bubble/image-bubble.preview.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {ImageBubble} from './image-bubble.component';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+const {View} = require('react-native');
+
+export const ImageBubblePreview = ({}: {}) => {
+  return (
+    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <ImageBubble
+        source={require('./../../../../assets/components/avatar/baby.png')}
+        bubbleAlignment={BubbleAlignment.SENT}
+      />
+      <ImageBubble
+        source={require('./../../../../assets/components/avatar/baby.png')}
+        bubbleAlignment={BubbleAlignment.RECEIVE}
+      />
+    </View>
+  );
+};

package/src/components/atoms/image-bubble/image-bubble.styles.d.ts

@@ -0,0 +1,35 @@
+export function Stylesheet(
+  context: any,
+  bubbleAlignment: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: (
+        | {
+            maxWidth: string;
+            borderRadius: number;
+            overflow: string;
+            justifyContent: string;
+            alignItems: string;
+            borderBottomLeftRadius?: undefined;
+            borderBottomRightRadius?: undefined;
+            marginRight?: undefined;
+            marginLeft?: undefined;
+          }
+        | {
+            borderBottomLeftRadius: number;
+            borderBottomRightRadius: number;
+            marginRight: number;
+            marginLeft: number;
+            maxWidth?: undefined;
+            borderRadius?: undefined;
+            overflow?: undefined;
+            justifyContent?: undefined;
+            alignItems?: undefined;
+          }
+      )[];
+      image: {
+        resizeMode: 'cover';
+      };
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/atoms/image-bubble/image-bubble.styles.js

@@ -0,0 +1,31 @@
+import {StyleSheet} from 'react-native';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, bubbleAlignment) =>
+  StyleSheet.create({
+    container: [
+      {
+        maxWidth: '80%',
+        borderRadius: Scale.l,
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      bubbleAlignment === BubbleAlignment.RECEIVE && {
+        borderBottomLeftRadius: Scale.xs,
+        borderBottomRightRadius: Scale.xl,
+        marginRight: Scale.xxl,
+        marginLeft: Scale.m,
+      },
+      bubbleAlignment === BubbleAlignment.SENT && {
+        borderBottomRightRadius: Scale.xs,
+        borderBottomLeftRadius: Scale.xl,
+        marginLeft: Scale.xxl,
+        marginRight: Scale.m,
+      },
+    ],
+    image: {
+      resizeMode: 'cover',
+    },
+  });

package/src/components/atoms/image-bubble/image-bubble.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {ImageBubble} from './image-bubble.component';
+
+describe('test image-bubble', () => {
+  it('given the bubbleAlignment is SENT return a text-bubble with right-bottom tip', () => {
+    const tree = renderer
+      .create(<ImageBubble bubbleAlignment="SENT" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is RECEIVE return a text-bubble with left-bottom tip', () => {
+    const tree = renderer
+      .create(<ImageBubble bubbleAlignment="RECEIVE" />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,269 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Increment input test renders an increment input component 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "width": "100%",
+    }
+  }
+>
+  <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": 50,
+        "height": 32,
+        "justifyContent": "center",
+        "width": 32,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="18"
+      bbWidth="18"
+      fill="none"
+      focusable={false}
+      height={18}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 18,
+            "width": 18,
+          },
+        ]
+      }
+      vbHeight={3}
+      vbWidth={16}
+      width={18}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M14.5 1.5H1.5"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4294967295,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#E5E8EB",
+        "borderRadius": 8,
+        "borderStyle": "solid",
+        "borderWidth": 1,
+        "display": "flex",
+        "height": 48,
+        "justifyContent": "center",
+        "marginLeft": 8,
+        "marginRight": 8,
+        "width": 48,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 14,
+              "lineHeight": 22.4,
+            },
+          ],
+          {
+            "color": "#1F2933",
+            "textAlign": "center",
+            "width": "100%",
+          },
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "justifyContent": "center",
+            "textAlignVertical": "center",
+          },
+        ]
+      }
+    >
+      0
+    </Text>
+  </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": 50,
+        "height": 32,
+        "justifyContent": "center",
+        "width": 32,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="18"
+      bbWidth="18"
+      fill="none"
+      focusable={false}
+      height={18}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 18,
+            "width": 18,
+          },
+        ]
+      }
+      vbHeight={17}
+      vbWidth={17}
+      width={18}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M8.5 1.75V8.5M8.5 8.5V15.25M8.5 8.5H15.25M8.5 8.5L1.75 8.5"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4294967295,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type IncrementInputProps = {
+    value: number;
+    maxValue?: number;
+    onPress: (number: number) => void;
+};
+export declare const IncrementInput: ({ value, onPress, maxValue, }: IncrementInputProps) => React.JSX.Element;
+export {};

package/src/components/atoms/increment-input/increment-input.component.tsx

@@ -0,0 +1,63 @@
+import React, {useContext} from 'react';
+import {Pressable, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './increment-input.styles';
+import {Icon} from '../../../icons';
+import {Paragraph} from '../paragraph-components';
+
+type IncrementInputProps = {
+  value: number;
+  maxValue?: number;
+  onPress: (number: number) => void;
+};
+
+export const IncrementInput = ({
+  value,
+  onPress,
+  maxValue = 99,
+}: IncrementInputProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  function increment() {
+    if (value === maxValue) {
+      return alert('You have reached the maximum input value!');
+    } else {
+      return onPress((value += 1));
+    }
+  }
+
+  function decrement() {
+    if (value > 0) {
+      return onPress((value -= 1));
+    } else {
+      return onPress((value = 0));
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={decrement} style={styles.buttonContainer}>
+        <Icon
+          style={'regular'}
+          name={'minus-sm'}
+          size={18}
+          color={context.colors.ui.white}
+        />
+      </Pressable>
+      <View style={styles.numberContainer}>
+        <Paragraph textAlign={'center'} addStyle={styles.number}>
+          {value}
+        </Paragraph>
+      </View>
+      <Pressable onPress={increment} style={styles.buttonContainer}>
+        <Icon
+          style={'regular'}
+          name={'plus-sm'}
+          size={18}
+          color={context.colors.ui.white}
+        />
+      </Pressable>
+    </View>
+  );
+};

package/src/components/atoms/increment-input/increment-input.preview.d.ts

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

package/src/components/atoms/increment-input/increment-input.preview.tsx

@@ -0,0 +1,26 @@
+import React, {useState} from 'react';
+import {IncrementInput} from './increment-input.component';
+import {useWindowDimensions} from 'react-native';
+const {View} = require('react-native');
+
+export const IncrementInputPreview = ({}: {}) => {
+  const full = useWindowDimensions();
+  const width = full.width;
+
+  const [value, setValue] = useState(0);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        width: width,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View>
+        <IncrementInput value={value} onPress={setValue} />
+      </View>
+    </View>
+  );
+};