@tactics/toddle-styleguide 5.0.1 → 5.0.2

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

@@ -1,148 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {
-  ImageSourcePropType,
-  Pressable,
-  View,
-  Image,
-  ImageStyle,
-} from 'react-native';
-import {useContext} from 'react';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './amount.styles';
-import {Paragraph} from '../../atoms/paragraph-components';
-import {IncrementInput} from '../../atoms/increment-input/increment-input.component';
-import {Icon} from '../../../icons';
-import {Count} from '../../atoms/count/count.component';
-import {PressableIcon} from '../pressable-icon/pressable-icon.component';
-
-interface AmountProps {
-  initialAmount: number;
-  image?: ImageSourcePropType;
-  label: string;
-  description?: string;
-  onSave: (num: number) => void;
-  readonly: boolean;
-}
-
-export const Amount = ({
-  initialAmount,
-  image,
-  label,
-  description,
-  onSave,
-  readonly,
-}: AmountProps) => {
-  const [editMode, setEditMode] = useState(false);
-  const [countdown, setCountdown] = useState(0);
-  const [amount, setAmount] = useState(initialAmount);
-  const [intId, setIntId] = useState<NodeJS.Timer | null>(null);
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-
-  const startEditMode = () => {
-    setCountdown(3);
-    setEditMode(true);
-  };
-
-  const resetEditModeCountDown = () => {
-    setCountdown(3);
-  };
-
-  const updateAmount = (num: number) => {
-    setAmount(num);
-    // on update we rest the timer
-    resetEditModeCountDown();
-  };
-
-  const saveChargedProduct = () => {
-    onSave(amount);
-    setEditMode(false);
-    if (intId) clearInterval(intId);
-  };
-
-  useEffect(() => {
-    if (editMode) {
-      const interval = setInterval(() => {
-        if (countdown > 0) {
-          setCountdown(countdown - 1);
-        } else if (countdown === 0) {
-          // Handle save when time is up.
-          saveChargedProduct();
-        }
-      }, 1000);
-      setIntId(interval);
-
-      return () => clearInterval(interval);
-    }
-  }, [countdown, editMode]);
-
-  const renderImage = () => {
-    if (image) {
-      return (
-        <>
-          <Image source={image} style={styles.image as ImageStyle} />
-        </>
-      );
-    }
-
-    return (
-      <>
-        <Icon
-          key={label}
-          name="photograph"
-          style="regular"
-          color={context.colors.ui.grey}
-        />
-      </>
-    );
-  };
-
-  const renderInput = () => {
-    return (
-      <View style={styles.incrementContainer}>
-        {editMode ? (
-          <>
-            <View>
-              <IncrementInput value={amount} onPress={updateAmount} />
-            </View>
-            <PressableIcon
-              onPress={saveChargedProduct}
-              icon={<Icon key={label} name="check-circle" style="regular" />}
-            />
-          </>
-        ) : (
-          <Pressable onPress={startEditMode}>
-            <Count count={amount} />
-          </Pressable>
-        )}
-      </View>
-    );
-  };
-
-  const renderCount = () => {
-    return <Count disabled={true} count={amount} />;
-  };
-
-  return (
-    <View style={styles.rootContainer}>
-      <View style={styles.imageContainer}>{renderImage()}</View>
-      <View style={styles.container}>
-        <Paragraph bold={true} numberOfLines={1} ellipsizeMode="tail">
-          {label}
-        </Paragraph>
-        {description ? (
-          <Paragraph
-            textColor={context.colors.ui.darkgrey}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {description}
-          </Paragraph>
-        ) : (
-          <></>
-        )}
-        {readonly ? renderCount() : renderInput()}
-      </View>
-    </View>
-  );
-};

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

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

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

@@ -1,77 +0,0 @@
-import React from 'react';
-import {ScrollView} from 'react-native';
-import {Amount} from './amount.component';
-import {Scale} from '../../../theme/scale';
-const {View} = require('react-native');
-
-export const AmountPreview = ({}: {}) => {
-  return (
-    <ScrollView>
-      <View
-        style={{
-          flex: 1,
-          backgroundColor: 'white',
-          padding: Scale.m,
-          overflow: 'hidden',
-        }}
-      >
-        <Amount
-          readonly={false}
-          initialAmount={9}
-          label="Maaltijd"
-          onSave={(num) => console.log(num)}
-        />
-        <Amount
-          readonly={false}
-          initialAmount={2}
-          image={require('./../../../../assets/components/avatar/baby.png')}
-          label="Maaltijd"
-          onSave={(num) => console.log(num)}
-        />
-        <Amount
-          readonly={false}
-          initialAmount={5}
-          label="Maaltijd veggy"
-          description="Hmm, lekker hoor"
-          onSave={(num) => console.log(num)}
-        />
-        <Amount
-          readonly={false}
-          initialAmount={1}
-          image={require('./../../../../assets/components/avatar/baby.png')}
-          label="Maaltijd met een lekkere lange titel"
-          description="Hmm, lekker hoor. Met een sappige beschrijving"
-          onSave={(num) => console.log(num)}
-        />
-        <Amount
-          readonly={true}
-          initialAmount={9}
-          label="Maaltijd"
-          onSave={(num) => console.log(num)}
-        />
-        <Amount
-          readonly={true}
-          initialAmount={2}
-          image={require('./../../../../assets/components/avatar/baby.png')}
-          label="Maaltijd"
-          onSave={(num) => console.log(num)}
-        />
-        <Amount
-          readonly={true}
-          initialAmount={5}
-          label="Maaltijd veggy"
-          description="Hmm, lekker hoor"
-          onSave={(num) => console.log(num)}
-        />
-        <Amount
-          readonly={true}
-          initialAmount={1}
-          image={require('./../../../../assets/components/avatar/baby.png')}
-          label="Maaltijd met een lekkere lange titel"
-          description="Hmm, lekker hoor. Met een sappige beschrijving"
-          onSave={(num) => console.log(num)}
-        />
-      </View>
-    </ScrollView>
-  );
-};

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

@@ -1,36 +0,0 @@
-export function Stylesheet(context: any): {
-  rootContainer: {
-    flexDirection: 'row';
-    borderBottomColor: any;
-    borderBottomWidth: number;
-    gap: number;
-  };
-  imageContainer: {
-    backgroundColor: any;
-    width: number;
-    alignItems: 'center';
-    justifyContent: 'center';
-    position: 'relative';
-  };
-  image: {
-    position: 'absolute';
-    width: '100%';
-    height: '100%';
-    objectFit: 'cover';
-  };
-  container: {
-    paddingBottom: number;
-    paddingTop: number;
-    paddingRight: number;
-    alignItems: 'flex-start';
-    gap: number;
-    flex: number;
-  };
-  incrementContainer: {
-    height: number;
-    flexDirection: 'row';
-    gap: number;
-    justifyContent: 'flex-start';
-    alignItems: 'center';
-  };
-};

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

@@ -1,40 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale';
-
-export const Stylesheet = (context) =>
-  StyleSheet.create({
-    rootContainer: {
-      flexDirection: 'row',
-      borderBottomColor: context.colors.ui.lightgrey,
-      borderBottomWidth: 1,
-      gap: Scale.s,
-    },
-    imageContainer: {
-      backgroundColor: context.colors.ui.xlightgrey,
-      width: 120,
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'relative',
-    },
-    image: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover',
-    },
-    container: {
-      paddingBottom: Scale.s,
-      paddingTop: Scale.s,
-      paddingRight: Scale.s,
-      alignItems: 'flex-start',
-      gap: Scale.xxs,
-      flex: 1,
-    },
-    incrementContainer: {
-      height: 50,
-      flexDirection: 'row',
-      gap: Scale.l,
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-    },
-  });

package/src/components/molecules/avatar/__snapshots__/avatar.test.js.snap

@@ -1,97 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test avatar given the isBlocked is true, and provide image source is empty return a red colored avatar  1`] = `
-<View
-  style={null}
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "backgroundColor": "#647ACB",
-          "justifyContent": "center",
-          "overflow": "hidden",
-        },
-        {
-          "borderRadius": 20,
-          "height": 40,
-          "width": 40,
-        },
-        false,
-        false,
-      ]
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "SourceSansProBold",
-              "fontSize": 18,
-              "lineHeight": 22.6,
-            },
-          ],
-          {
-            "color": "#FFFFFF",
-            "textAlign": "center",
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      JD
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test avatar renders correctly when provided image source is empty 1`] = `
-<View
-  style={null}
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "backgroundColor": "#647ACB",
-          "justifyContent": "center",
-          "overflow": "hidden",
-        },
-        {
-          "borderRadius": 20,
-          "height": 40,
-          "width": 40,
-        },
-        false,
-        false,
-      ]
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "SourceSansProBold",
-              "fontSize": 18,
-              "lineHeight": 22.6,
-            },
-          ],
-          {
-            "color": "#FFFFFF",
-            "textAlign": "center",
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      JD
-    </Text>
-  </View>
-</View>
-`;

package/src/components/molecules/avatar/avatar.component.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { ImageSourcePropType } from 'react-native';
-import { Size } from '../../../types/size.enum';
-import { Initials } from '../../../models/initials.model';
-type AvatarProps = {
-    source: ImageSourcePropType | Initials;
-    size: Size;
-    isBlocked?: boolean;
-    isActive?: boolean;
-    isLoading?: boolean;
-    hasShadow?: boolean;
-    isBirthday?: boolean;
-};
-declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, hasShadow, isBirthday, }: AvatarProps) => React.JSX.Element;
-export { Avatar as Avatar };

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

@@ -1,118 +0,0 @@
-import * as React from 'react';
-import {useContext} from 'react';
-
-import {
-  ActivityIndicator,
-  Image,
-  ImageSourcePropType,
-  ImageStyle,
-  View,
-} from 'react-native';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './avatar.styles';
-import {Size} from '../../../types/size.enum';
-import {Initials} from '../../../models/initials.model';
-import {MainGradient} from '../../../gradients/main/main.gradient';
-import {Heading1, Heading2, Heading3} from '../../atoms/heading-components';
-import {CrownIcon} from '../../../icons/crown.icon';
-
-type AvatarProps = {
-  source: ImageSourcePropType | Initials;
-  size: Size;
-  isBlocked?: boolean;
-  isActive?: boolean;
-  isLoading?: boolean;
-  hasShadow?: boolean;
-  isBirthday?: boolean;
-};
-
-const Avatar = ({
-  source,
-  size,
-  isBlocked,
-  isActive = true,
-  isLoading,
-  hasShadow,
-  isBirthday,
-}: AvatarProps) => {
-  const Context = useContext(ThemeCtx);
-  const styles = Stylesheet(Context, size, isBlocked, isActive);
-
-  const renderCrown = () => {
-    if (isBirthday) {
-      return (
-        <View style={styles.crownContainer}>
-          <CrownIcon />
-        </View>
-      );
-    }
-  };
-
-  const renderText = (size: Size) => {
-    if (size === Size.SMALL) {
-      return (
-        <Heading3
-          bold={true}
-          textAlign={'center'}
-          textColor={Context.colors.ui.white}
-        >
-          {source.toString()}
-        </Heading3>
-      );
-    } else if (size === Size.MEDIUM) {
-      return (
-        <Heading2
-          bold={true}
-          textAlign={'center'}
-          textColor={Context.colors.ui.white}
-        >
-          {source.toString()}
-        </Heading2>
-      );
-    } else if (size === Size.LARGE) {
-      return (
-        <Heading1
-          bold={true}
-          textAlign={'center'}
-          textColor={Context.colors.ui.white}
-          addStyle={styles.text}
-        >
-          {source.toString()}
-        </Heading1>
-      );
-    }
-  };
-
-  return source instanceof Initials ? (
-    <View style={hasShadow ? styles.shadow : null}>
-      {renderCrown()}
-      <View style={styles.container}>
-        {isLoading ? (
-          <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
-        ) : (
-          renderText(size)
-        )}
-      </View>
-    </View>
-  ) : isLoading ? (
-    <View style={hasShadow ? styles.shadow : null}>
-      {renderCrown()}
-      <View style={styles.container}>
-        {!isBlocked ? <MainGradient isActive={isActive} /> : null}
-        <View style={{zIndex: 100, position: 'absolute'}}>
-          <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
-        </View>
-      </View>
-    </View>
-  ) : (
-    <View style={hasShadow ? styles.shadow : null}>
-      {renderCrown()}
-      <View style={styles.container}>
-        {!isBlocked ? <MainGradient isActive={isActive} /> : null}
-        <Image source={source} style={styles.image as ImageStyle} />
-      </View>
-    </View>
-  );
-};
-
-export {Avatar as Avatar};

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

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

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

@@ -1,82 +0,0 @@
-import React from 'react';
-import {ScrollView} from 'react-native';
-
-const {Avatar} = require('./avatar.component');
-const {Size} = require('../../../types/size.enum');
-const {Initials} = require('../../../models/initials.model');
-const {View} = require('react-native');
-
-export const AvatarPreview = ({}: {}) => {
-  return (
-    <ScrollView>
-      <View
-        style={{
-          flex: 1,
-          alignItems: 'center',
-          backgroundColor: 'white',
-          gap: 16,
-        }}
-      >
-        <Avatar
-          size={Size.LARGE}
-          source={require('./../../../../assets/components/avatar/baby.png')}
-          hasShadow={true}
-          isLoading={true}
-        />
-        <Avatar
-          size={Size.MEDIUM}
-          source={require('./../../../../assets/components/avatar/baby.png')}
-          hasShadow={true}
-        />
-        <Avatar
-          size={Size.SMALL}
-          source={require('./../../../../assets/components/avatar/baby.png')}
-        />
-        <Avatar
-          size={Size.SMALL}
-          source={Initials.for('John', 'Doe')}
-          hasShadow={true}
-          isBirthday={true}
-        />
-        <Avatar
-          size={Size.MEDIUM}
-          source={Initials.for('John', 'Doe')}
-          hasShadow={true}
-          isBirthday={true}
-        />
-        <Avatar
-          size={Size.LARGE}
-          source={Initials.for('John', 'Doe')}
-          hasShadow={true}
-          isBirthday={true}
-        />
-        <Avatar
-          size={Size.MEDIUM}
-          source={Initials.for('John', 'Doe')}
-          isBlocked={true}
-          hasShadow={true}
-        />
-        <Avatar size={Size.SMALL} source={Initials.for('John', 'Doe')} />
-        <Avatar
-          size={Size.LARGE}
-          source={require('./../../../../assets/components/avatar/baby.png')}
-          isActive={false}
-          hasShadow={true}
-        />
-        <Avatar
-          size={Size.MEDIUM}
-          source={Initials.for('John', 'Doe')}
-          isActive={false}
-          hasShadow={true}
-        />
-        <Avatar
-          size={Size.SMALL}
-          source={Initials.for('John', 'Doe')}
-          isBlocked={true}
-          isActive={false}
-          hasShadow={true}
-        />
-      </View>
-    </ScrollView>
-  );
-};