@tactics/toddle-styleguide 2.0.3 → 3.0.0

package/src/components/molecules/inline-error/inline-error.component.tsx

@@ -5,7 +5,7 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {View} from 'react-native';
 import {Stylesheet} from './inline-error.styles';
 import {SmallText} from '../../atoms/paragraph-components';
-import { Icon } from '../../../icons';
+import {Icon} from '../../../icons';
 
 type InlineErrorProps = {
   label: string;
@@ -17,8 +17,15 @@ const InlineError = ({label}: InlineErrorProps) => {
 
   return (
     <View style={styles.container}>
-      <Icon name='exclamation-circle' style='regular' color={context.colors.ui.error.dark} />
-      <SmallText addStyle={styles.label} textColor={context.colors.ui.error.dark}>
+      <Icon
+        name="exclamation-circle"
+        style="regular"
+        color={context.colors.ui.error.dark}
+      />
+      <SmallText
+        addStyle={styles.label}
+        textColor={context.colors.ui.error.dark}
+      >
         {label}
       </SmallText>
     </View>

package/src/components/molecules/inline-error/inline-error.preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineError } from './inline-error.component';
+import {InlineError} from './inline-error.component';
 const {View} = require('react-native');
 
 export const InlineErrorPreview = ({}: {}) => {
@@ -13,7 +13,9 @@ export const InlineErrorPreview = ({}: {}) => {
       }}
     >
       <InlineError
-        label={'Deze dag is reeds gefactureerd. U kan deze enkel nog aanpassen in de beheerssoftware.'}
+        label={
+          'Deze dag is reeds gefactureerd. U kan deze enkel nog aanpassen in de beheerssoftware.'
+        }
       />
     </View>
   );

package/src/components/molecules/inline-error/inline-error.styles.d.ts

@@ -1,18 +1,18 @@
 export function Stylesheet(context: any): {
-    container: {
-        flexDirection: "row";
-        gap: number;
-        width: "100%";
-        backgroundColor: any;
-        borderRadius: number;
-        alignItems: "center";
-        justifyContent: "flex-start";
-        paddingLeft: number;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-    };
-    label: {
-        flex: number;
-    };
+  container: {
+    flexDirection: 'row';
+    gap: number;
+    width: '100%';
+    backgroundColor: any;
+    borderRadius: number;
+    alignItems: 'center';
+    justifyContent: 'flex-start';
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+  };
+  label: {
+    flex: number;
+  };
 };

package/src/components/molecules/inline-error/inline-error.styles.js

@@ -17,6 +17,6 @@ export const Stylesheet = (context) =>
       paddingBottom: Scale.m,
     },
     label: {
-      flex: 1
-    }
+      flex: 1,
+    },
   });

package/src/components/molecules/inline-notice/inline-notice.component.tsx

@@ -5,23 +5,27 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {View} from 'react-native';
 import {Stylesheet} from './inline-notice.styles';
 import {SmallText} from '../../atoms/paragraph-components';
-import { Icon } from '../../../icons';
+import {Icon} from '../../../icons';
 
 type InlineNoticeProps = {
-    label: string;
+  label: string;
 };
 
 const InlineNotice = ({label}: InlineNoticeProps) => {
-    const context = useContext(ThemeCtx);
-    const styles = Stylesheet(context);
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
 
-    return (
-        <View style={styles.container}>
-            <Icon name='exclamation-circle' style='regular' color={context.colors.main[0]} />
-            <SmallText addStyle={styles.label} textColor={context.colors.main[0]}>
-                {label}
-            </SmallText>
-        </View>
-    );
+  return (
+    <View style={styles.container}>
+      <Icon
+        name="exclamation-circle"
+        style="regular"
+        color={context.colors.main[0]}
+      />
+      <SmallText addStyle={styles.label} textColor={context.colors.main[0]}>
+        {label}
+      </SmallText>
+    </View>
+  );
 };
 export {InlineNotice as InlineNotice};

package/src/components/molecules/inline-notice/inline-notice.preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineNotice } from './inline-notice.component';
+import {InlineNotice} from './inline-notice.component';
 const {View} = require('react-native');
 
 export const InlineNoticePreview = ({}: {}) => {
@@ -13,7 +13,9 @@ export const InlineNoticePreview = ({}: {}) => {
       }}
     >
       <InlineNotice
-        label={'Deze dag is reeds gefactureerd. U kan deze enkel nog aanpassen in de beheerssoftware.'}
+        label={
+          'Deze dag is reeds gefactureerd. U kan deze enkel nog aanpassen in de beheerssoftware.'
+        }
       />
     </View>
   );

package/src/components/molecules/inline-notice/inline-notice.styles.d.ts

@@ -1,18 +1,18 @@
 export function Stylesheet(context: any): {
-    container: {
-        flexDirection: "row";
-        gap: number;
-        width: "100%";
-        backgroundColor: any;
-        borderRadius: number;
-        alignItems: "center";
-        justifyContent: "flex-start";
-        paddingLeft: number;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-    };
-    label: {
-        flex: number;
-    };
+  container: {
+    flexDirection: 'row';
+    gap: number;
+    width: '100%';
+    backgroundColor: any;
+    borderRadius: number;
+    alignItems: 'center';
+    justifyContent: 'flex-start';
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+  };
+  label: {
+    flex: number;
+  };
 };

package/src/components/molecules/inline-notice/inline-notice.styles.js

@@ -2,21 +2,21 @@ import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale';
 
 export const Stylesheet = (context) =>
-    StyleSheet.create({
-        container: {
-            flexDirection: 'row',
-            gap: Scale.m,
-            width: '100%',
-            backgroundColor: context.colors.main[9],
-            borderRadius: Scale.s,
-            alignItems: 'center',
-            justifyContent: 'flex-start',
-            paddingLeft: Scale.m,
-            paddingTop: Scale.m,
-            paddingRight: Scale.m,
-            paddingBottom: Scale.m,
-        },
-        label: {
-            flex: 1
-        }
-    });
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      gap: Scale.m,
+      width: '100%',
+      backgroundColor: context.colors.main[9],
+      borderRadius: Scale.s,
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      paddingLeft: Scale.m,
+      paddingTop: Scale.m,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.m,
+    },
+    label: {
+      flex: 1,
+    },
+  });

package/src/components/molecules/message-input/message-input.styles.d.ts

@@ -1,33 +1,33 @@
 export function Stylesheet(context: any): {
-    rootContainer: {
-        width: "100%";
-        flexDirection: "row";
-        alignItems: "flex-end";
-        backgroundColor: any;
-        borderStyle: "solid";
-        borderWidth: number;
-        borderColor: any;
-        borderRadius: number;
-        paddingRight: number;
-    };
-    textInput: {
-        lineHeight: number;
-        color: any;
-        paddingLeft: number;
-        paddingRight: number;
-        paddingTop: number;
-        paddingBottom: number;
-        justifyContent: "center";
-        fontFamily: string;
-        fontSize: number;
-        maxHeight: number;
-        height: "100%";
-        flex: number;
-    };
-    iconContainer: {
-        minWidth: number;
-        minHeight: number;
-        justifyContent: "center";
-        alignItems: "center";
-    };
+  rootContainer: {
+    width: '100%';
+    flexDirection: 'row';
+    alignItems: 'flex-end';
+    backgroundColor: any;
+    borderStyle: 'solid';
+    borderWidth: number;
+    borderColor: any;
+    borderRadius: number;
+    paddingRight: number;
+  };
+  textInput: {
+    lineHeight: number;
+    color: any;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+    justifyContent: 'center';
+    fontFamily: string;
+    fontSize: number;
+    maxHeight: number;
+    height: '100%';
+    flex: number;
+  };
+  iconContainer: {
+    minWidth: number;
+    minHeight: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
 };

package/src/components/molecules/password-input/password-input.component.tsx

@@ -29,7 +29,7 @@ export const PasswordInput = ({keyboardType, ...props}: PasswordInputProps) => {
         placeholderTextColor={Context.colors.ui.grey}
         secureTextEntry={secure}
         keyboardType={keyboardType ? keyboardType : KeyBoardTypes.DEFAULT}
-        autoCapitalize='none'
+        autoCapitalize="none"
         {...props}
       />
       <Pressable

package/src/components/molecules/password-input/password-input.styles.d.ts

@@ -1,29 +1,29 @@
 export function Stylesheet(Context: any): {
-    container: {
-        width: "100%";
-        height: number;
-        flexDirection: "row";
-        backgroundColor: any;
-        borderRadius: number;
-        alignItems: "center";
-    };
-    textInput: {
-        lineHeight: number;
-        color: any;
-        fontFamily: string;
-        fontSize: number;
-        flex: number;
-        height: "100%";
-        paddingLeft: number;
-        justifyContent: "center";
-    };
-    iconContainer: {
-        height: "100%";
-        alignItems: "center";
-        justifyContent: "center";
-        paddingLeft: number;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-    };
+  container: {
+    width: '100%';
+    height: number;
+    flexDirection: 'row';
+    backgroundColor: any;
+    borderRadius: number;
+    alignItems: 'center';
+  };
+  textInput: {
+    lineHeight: number;
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    flex: number;
+    height: '100%';
+    paddingLeft: number;
+    justifyContent: 'center';
+  };
+  iconContainer: {
+    height: '100%';
+    alignItems: 'center';
+    justifyContent: 'center';
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+  };
 };

package/src/components/molecules/quick-filter/quick-filter.component.tsx

@@ -6,7 +6,7 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './quick-filter.styles';
 import {Paragraph} from '../../atoms/paragraph-components';
 import {StateTextColorHandler} from '../../../utilities/color-handler/color-handler';
-import { State } from '../../../types/state.enum';
+import {State} from '../../../types/state.enum';
 
 type QuickFilterProps = {
   id: string;

package/src/components/molecules/quick-filter/quick-filter.preview.tsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {QuickFilter} from './quick-filter.component';
 import {View} from 'react-native';
-import { State } from '../../../types/state.enum';
+import {State} from '../../../types/state.enum';
 
 export const QuickFilterPreview = ({}: {}) => {
   const [defaultFilterIsSelected, setDefaultFilterIsSelected] = useState(false);

package/src/components/molecules/quick-filter/quick-filter.styles.js

@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale';
-import { State } from '../../../types/state.enum';
+import {State} from '../../../types/state.enum';
 
 export const Stylesheet = (context, visualState, isSelected) =>
   StyleSheet.create({

package/src/components/molecules/search-input/search.styles.d.ts

@@ -1,33 +1,33 @@
 export function Stylesheet(context: any): {
-    container: {
-        width: "100%";
-        height: number;
-        flexDirection: "row";
-        borderStyle: "solid";
-        borderWidth: number;
-        borderColor: any;
-        borderRadius: number;
-        backgroundColor: any;
-        overflow: "hidden";
-        alignItems: "center";
-        paddingRight: number;
-    };
-    inputContainer: {
-        lineHeight: number;
-        color: any;
-        paddingLeft: number;
-        paddingTop: number;
-        paddingBottom: number;
-        fontFamily: string;
-        fontSize: number;
-        flex: number;
-        justifyContent: "center";
-        height: "100%";
-    };
-    iconContainer: {
-        minWidth: number;
-        minHeight: number;
-        justifyContent: "center";
-        alignItems: "center";
-    };
+  container: {
+    width: '100%';
+    height: number;
+    flexDirection: 'row';
+    borderStyle: 'solid';
+    borderWidth: number;
+    borderColor: any;
+    borderRadius: number;
+    backgroundColor: any;
+    overflow: 'hidden';
+    alignItems: 'center';
+    paddingRight: number;
+  };
+  inputContainer: {
+    lineHeight: number;
+    color: any;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    fontFamily: string;
+    fontSize: number;
+    flex: number;
+    justifyContent: 'center';
+    height: '100%';
+  };
+  iconContainer: {
+    minWidth: number;
+    minHeight: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
 };

package/src/components/molecules/select-list-item/select-list-item.component.d.ts

@@ -8,5 +8,5 @@ type SelectListProps = {
     inverse?: boolean;
     image?: ImageSourcePropType;
 };
-declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, image }: SelectListProps) => React.JSX.Element;
+declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, image, }: SelectListProps) => React.JSX.Element;
 export { SelectListItem as SelectListItem };

package/src/components/molecules/select-list-item/select-list-item.component.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
-import {ImageSourcePropType, ImageStyle, Image, Pressable, View} from 'react-native';
+import {
+  ImageSourcePropType,
+  ImageStyle,
+  Image,
+  Pressable,
+  View,
+} from 'react-native';
 import {Stylesheet} from './select-list-item.styles';
 import {Icon} from '../../../icons/index';
 import {Heading2} from '../../atoms/heading-components';
@@ -14,7 +20,7 @@ type SelectListProps = {
   icon: React.ReactElement;
   onPress?: () => void;
   inverse?: boolean;
-  image?: ImageSourcePropType
+  image?: ImageSourcePropType;
 };
 
 const SelectListItem = ({
@@ -23,7 +29,7 @@ const SelectListItem = ({
   icon,
   onPress,
   inverse,
-  image
+  image,
 }: SelectListProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, inverse);
@@ -36,17 +42,15 @@ const SelectListItem = ({
 
   const renderIconOrImage = () => {
     if (image) {
-      return <Image source={image} style={styles.image as ImageStyle} />
+      return <Image source={image} style={styles.image as ImageStyle} />;
     } else {
-      return <View>{inverse ? invertedIcon : icon}</View>
+      return <View>{inverse ? invertedIcon : icon}</View>;
     }
-  }
+  };
 
   return (
     <Pressable onPress={onPress} style={styles.container}>
-      <View style={styles.iconCircle}>
-        {renderIconOrImage()}
-      </View>
+      <View style={styles.iconCircle}>{renderIconOrImage()}</View>
       <View style={styles.textContainer}>
         <View>
           <Heading2

package/src/components/molecules/select-list-item/select-list-item.styles.d.ts

@@ -1,36 +1,41 @@
-export function Stylesheet(context: any, inverse: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
-    container: {
-        width: "100%";
-        flexDirection: "row";
-        alignItems: "center";
-    };
-    iconCircle: {
-        justifyContent: "center";
-        alignItems: "center";
+export function Stylesheet(
+  context: any,
+  inverse: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: {
+        width: '100%';
+        flexDirection: 'row';
+        alignItems: 'center';
+      };
+      iconCircle: {
+        justifyContent: 'center';
+        alignItems: 'center';
         backgroundColor: any;
         width: number;
         height: number;
         borderRadius: number;
         marginRight: number;
-    };
-    image: {
+      };
+      image: {
         position: string;
         width: string;
         height: string;
         borderRadius: number;
-    }[];
-    textContainer: {
+      }[];
+      textContainer: {
         flex: number;
-        flexDirection: "column";
-        justifyContent: "center";
+        flexDirection: 'column';
+        justifyContent: 'center';
         paddingTop: number;
         paddingBottom: number;
-    };
-    iconSquare: {
-        justifyContent: "center";
-        alignItems: "center";
+      };
+      iconSquare: {
+        justifyContent: 'center';
+        alignItems: 'center';
         marginLeft: number;
         marginRight: number;
-    };
-}>;
-import { StyleSheet } from 'react-native';
+      };
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/molecules/select-picker/select-picker.styles.d.ts

@@ -1,32 +1,32 @@
 export function Stylesheet(Context: any): {
-    container: {
-        flexDirection: "row";
-        justifyContent: "center";
-        alignItems: "center";
-        width: "100%";
-        height: number;
-        backgroundColor: any;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-        paddingLeft: number;
-        borderWidth: number;
-        borderStyle: "solid";
-        borderColor: any;
-        borderRadius: number;
-    };
-    pickerContainer: {
-        width: "100%";
-        height: "100%";
-        justifyContent: "center";
-        zIndex: number;
-    };
-    iconContainer: {
-        width: "10%";
-        height: "100%";
-        right: number;
-        justifyContent: "center";
-        alignItems: "center";
-        position: "absolute";
-    };
+  container: {
+    flexDirection: 'row';
+    justifyContent: 'center';
+    alignItems: 'center';
+    width: '100%';
+    height: number;
+    backgroundColor: any;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderColor: any;
+    borderRadius: number;
+  };
+  pickerContainer: {
+    width: '100%';
+    height: '100%';
+    justifyContent: 'center';
+    zIndex: number;
+  };
+  iconContainer: {
+    width: '10%';
+    height: '100%';
+    right: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+    position: 'absolute';
+  };
 };

package/src/components/molecules/selectable-list-item/selectable-list-item-preview.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import {SelectableListItem} from './selectable-list-item.component';
 import {Icon} from '../../../icons/index';