@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-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>
-  );
-};