@tactics/toddle-styleguide 2.0.3 → 3.0.0

package/src/components/atoms/quick-message/quick-message.styles.d.ts

@@ -1,14 +1,17 @@
-export function Stylesheet(context: any, selectedMessage: any): {
-    container: {
-        width: "100%";
-        backgroundColor: any;
-        paddingTop: number;
-        paddingBottom: number;
-        paddingRight: number;
-        paddingLeft: number;
-        borderBottomLeftRadius: number;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-    };
+export function Stylesheet(
+  context: any,
+  selectedMessage: any
+): {
+  container: {
+    width: '100%';
+    backgroundColor: any;
+    paddingTop: number;
+    paddingBottom: number;
+    paddingRight: number;
+    paddingLeft: number;
+    borderBottomLeftRadius: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+  };
 };

package/src/components/atoms/split-container/split-container.styles.d.ts

@@ -1,14 +1,14 @@
 export function Stylesheet(context: any): {
-    element: {
-        width: "100%";
-        paddingRight: number;
-        paddingLeft: number;
-    };
-    inner: {
-        flexDirection: "row";
-        justifyContent: "center";
-    };
-    twoElements: {
-        justifyContent: "space-between";
-    };
+  element: {
+    width: '100%';
+    paddingRight: number;
+    paddingLeft: number;
+  };
+  inner: {
+    flexDirection: 'row';
+    justifyContent: 'center';
+  };
+  twoElements: {
+    justifyContent: 'space-between';
+  };
 };

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { ImageSourcePropType } from "react-native";
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
 interface AmountProps {
     initialAmount: number;
     image?: ImageSourcePropType;
@@ -8,5 +8,5 @@ interface AmountProps {
     onSave: (num: number) => void;
     readonly: boolean;
 }
-export declare const Amount: ({ initialAmount, image, label, description, onSave, readonly }: AmountProps) => React.JSX.Element;
+export declare const Amount: ({ initialAmount, image, label, description, onSave, readonly, }: AmountProps) => React.JSX.Element;
 export {};

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

@@ -1,123 +1,148 @@
-import React, { useEffect, useState } from "react";
-import { ImageSourcePropType, Pressable, View, Image, ImageStyle } from "react-native";
+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";
+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
+  initialAmount: number;
+  image?: ImageSourcePropType;
+  label: string;
+  description?: string;
+  onSave: (num: number) => void;
+  readonly: boolean;
 }
 
 export const Amount = ({
-    initialAmount,
-    image,
-    label,
-    description,
-    onSave,
-    readonly
+  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 [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 startEditMode = () => {
+    setCountdown(3);
+    setEditMode(true);
+  };
 
-    const resetEditModeCountDown = () => {
-        setCountdown(3);
-    };
+  const resetEditModeCountDown = () => {
+    setCountdown(3);
+  };
 
-    const updateAmount = (num: number) => {
-        setAmount(num);
-        // on update we rest the timer
-        resetEditModeCountDown();
-    };
+  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 saveChargedProduct = () => {
+    onSave(amount);
+    setEditMode(false);
+    if (intId) clearInterval(intId);
+  };
 
-    const renderImage = () => {
-        if (image) {
-            return <>
-                <Image source={image} style={styles.image as ImageStyle} />
-            </>
+  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 <>
-        <Icon key={label} name="photograph" style="regular" color={context.colors.ui.grey} />
-        </>
+      return () => clearInterval(interval);
     }
+  }, [countdown, editMode]);
 
-    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 renderImage = () => {
+    if (image) {
+      return (
+        <>
+          <Image source={image} style={styles.image as ImageStyle} />
+        </>
+      );
     }
 
-    const renderCount = () => {
-        return <Count disabled={true} count={amount} />
-    }
+    return (
+      <>
+        <Icon
+          key={label}
+          name="photograph"
+          style="regular"
+          color={context.colors.ui.grey}
+        />
+      </>
+    );
+  };
 
+  const renderInput = () => {
     return (
-        <View style={styles.rootContainer}>
-            <View style={styles.imageContainer}>
-                {renderImage()}
+      <View style={styles.incrementContainer}>
+        {editMode ? (
+          <>
+            <View>
+              <IncrementInput value={amount} onPress={updateAmount} />
             </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>
+            <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.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {ScrollView} from 'react-native';
-import { Amount } from './amount.component';
-import { Scale } from '../../../theme/scale';
+import {Amount} from './amount.component';
+import {Scale} from '../../../theme/scale';
 const {View} = require('react-native');
 
 export const AmountPreview = ({}: {}) => {
@@ -12,17 +12,65 @@ export const AmountPreview = ({}: {}) => {
           flex: 1,
           backgroundColor: 'white',
           padding: Scale.m,
-          overflow: 'hidden'
+          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)} />
+        <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 +1,36 @@
 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";
-    };
+  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,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import { Scale } from '../../../theme/scale';
+import {Scale} from '../../../theme/scale';
 
 export const Stylesheet = (context) =>
   StyleSheet.create({
@@ -12,15 +12,15 @@ export const Stylesheet = (context) =>
     imageContainer: {
       backgroundColor: context.colors.ui.xlightgrey,
       width: 120,
-      alignItems: "center",
-      justifyContent: "center",
-      position: "relative"
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
     },
-    image : {
+    image: {
       position: 'absolute',
       width: '100%',
       height: '100%',
-      objectFit: 'cover'
+      objectFit: 'cover',
     },
     container: {
       paddingBottom: Scale.s,
@@ -28,7 +28,7 @@ export const Stylesheet = (context) =>
       paddingRight: Scale.s,
       alignItems: 'flex-start',
       gap: Scale.xxs,
-      flex: 1
+      flex: 1,
     },
     incrementContainer: {
       height: 50,

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

@@ -11,5 +11,5 @@ type AvatarProps = {
     hasShadow?: boolean;
     isBirthday?: boolean;
 };
-declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, hasShadow, isBirthday }: AvatarProps) => React.JSX.Element;
+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

@@ -14,7 +14,7 @@ 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';
+import {CrownIcon} from '../../../icons/crown.icon';
 
 type AvatarProps = {
   source: ImageSourcePropType | Initials;
@@ -33,18 +33,20 @@ const Avatar = ({
   isActive = true,
   isLoading,
   hasShadow,
-  isBirthday
+  isBirthday,
 }: AvatarProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, size, isBlocked, isActive);
 
   const renderCrown = () => {
     if (isBirthday) {
-      return <View style={styles.crownContainer}>
-        <CrownIcon />
-      </View>
+      return (
+        <View style={styles.crownContainer}>
+          <CrownIcon />
+        </View>
+      );
     }
-  }
+  };
 
   const renderText = (size: Size) => {
     if (size === Size.SMALL) {