@tactics/toddle-styleguide 0.1.5 → 0.1.7

package/App.tsx

@@ -53,6 +53,8 @@ import {DepartmentLogoPreview} from './src/components/atoms/department_logo/depa
 import {CalendarSelectPreview} from './src/components/atoms/calendar-select/calendar-select.preview';
 import {FooterPreview} from './src/components/atoms/footer/footer.preview';
 import {DefaulSelectPreview} from './src/components/atoms/default-select/default-select.preview';
+import {PasswordInputPreview} from './src/components/atoms/password-input/password-input.preview';
+import {MessageInputPreview} from './src/components/atoms/message-input/message-input.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -195,6 +197,14 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Default select"
         onPress={() => navigation.push('default-select')}
       />
+      <ReactBtn
+        title="Password Input Field"
+        onPress={() => navigation.push('password-input')}
+      />
+      <ReactBtn
+        title="Message input"
+        onPress={() => navigation.push('message-input')}
+      />
     </ScrollView>
   );
 };
@@ -315,10 +325,16 @@ function App() {
           <Stack.Screen name="calendar-select">
             {() => <CalendarSelectPreview />}
           </Stack.Screen>
+          <Stack.Screen name="password-input">
+            {() => <PasswordInputPreview />}
+          </Stack.Screen>
           <Stack.Screen name="footer">{() => <FooterPreview />}</Stack.Screen>
           <Stack.Screen name="default-select">
             {() => <DefaulSelectPreview />}
           </Stack.Screen>
+          <Stack.Screen name="message-input">
+            {() => <MessageInputPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { ImageSourcePropType } from 'react-native';
-import { Size } from '../../../types/size.enum';
-import { Initials } from '../../../models/initials.model';
+import {ImageSourcePropType} from 'react-native';
+import {Size} from '../../../types/size.enum';
+import {Initials} from '../../../models/initials.model';
 declare type AvatarProps = {
-    source: ImageSourcePropType | Initials;
-    size: Size;
-    isBlocked?: boolean;
+  source: ImageSourcePropType | Initials;
+  size: Size;
+  isBlocked?: boolean;
 };
 declare const Avatar: React.FC<AvatarProps>;
-export { Avatar as Avatar };
+export {Avatar as Avatar};

package/src/components/atoms/blocked-message/blocked-message.component.d.ts

@@ -1,5 +1,7 @@
 declare type BlockedMessageProps = {
-    message: string;
+  message: string;
 };
-export declare const BlockedMessage: ({ message }: BlockedMessageProps) => JSX.Element;
+export declare const BlockedMessage: ({
+  message,
+}: BlockedMessageProps) => JSX.Element;
 export {};

package/src/components/atoms/button/button.component.d.ts

@@ -1,8 +1,13 @@
 declare type ButtonProps = {
-    label: string;
-    icon?: any;
-    disabled?: boolean;
-    onPress?: () => void;
+  label: string;
+  icon?: any;
+  disabled?: boolean;
+  onPress?: () => void;
 };
-declare const Button: ({ label, icon, disabled, onPress }: ButtonProps) => JSX.Element;
-export { Button as Button };
+declare const Button: ({
+  label,
+  icon,
+  disabled,
+  onPress,
+}: ButtonProps) => JSX.Element;
+export {Button as Button};

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -1708,7 +1708,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 13 Januari 2023 "
+            accessibilityLabel=" Vrijdag 13 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1728,10 +1728,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1751,9 +1747,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2139,7 +2132,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 19 Januari 2023 "
+            accessibilityLabel="today Donderdag 19 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2159,6 +2152,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2178,6 +2175,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -2208,7 +2208,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 20 Januari 2023 "
+            accessibilityLabel="today Vrijdag 20 Januari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2228,6 +2228,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2247,6 +2251,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -5140,8 +5147,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 13 Januari 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Vrijdag 13 Januari 2023 "
             accessibilityState={
               {
                 "disabled": false,
@@ -5160,10 +5166,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5184,7 +5186,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5581,7 +5583,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 19 Januari 2023 "
+            accessibilityLabel="today Donderdag 19 Januari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5600,6 +5603,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5620,7 +5627,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }
@@ -5652,7 +5659,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 20 Januari 2023 "
+            accessibilityLabel="today Vrijdag 20 Januari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5671,6 +5679,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5691,7 +5703,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/atoms/calendar/calendar.component.d.ts

@@ -1,9 +1,14 @@
-import { DateTime } from 'luxon';
+import {DateTime} from 'luxon';
 declare type CalendarProps = {
-    onDayPress: (day: DateTime) => void;
-    selected: DateTime;
-    minDate?: string;
-    maxDate?: string;
+  onDayPress: (day: DateTime) => void;
+  selected: DateTime;
+  minDate?: string;
+  maxDate?: string;
 };
-export declare const Calendar: ({ onDayPress, selected, minDate, maxDate, }: CalendarProps) => JSX.Element;
+export declare const Calendar: ({
+  onDayPress,
+  selected,
+  minDate,
+  maxDate,
+}: CalendarProps) => JSX.Element;
 export {};

package/src/components/atoms/calendar-select/calendar-select.component.d.ts

@@ -1,7 +1,10 @@
-import { DateTime } from 'luxon';
+import {DateTime} from 'luxon';
 declare type CalendarSelectProps = {
-    onPressDate: (date: DateTime) => void;
-    startDate: DateTime;
+  onPressDate: (date: DateTime) => void;
+  startDate: DateTime;
 };
-declare const CalendarSelect: ({ onPressDate, startDate }: CalendarSelectProps) => JSX.Element;
-export { CalendarSelect as CalendarSelect };
+declare const CalendarSelect: ({
+  onPressDate,
+  startDate,
+}: CalendarSelectProps) => JSX.Element;
+export {CalendarSelect as CalendarSelect};

package/src/components/atoms/cancel-link/cancel-link.component.d.ts

@@ -1,6 +1,6 @@
 declare type CancelLinkProps = {
-    label: string;
-    onPress: () => void;
+  label: string;
+  onPress: () => void;
 };
-declare const CancelLink: ({ label, onPress }: CancelLinkProps) => JSX.Element;
-export { CancelLink as CancelLink };
+declare const CancelLink: ({label, onPress}: CancelLinkProps) => JSX.Element;
+export {CancelLink as CancelLink};

package/src/components/atoms/check-switch/check-switch.component.d.ts

@@ -1,6 +1,6 @@
 declare type CheckProps = {
-    value: boolean;
-    onToggle: () => void;
+  value: boolean;
+  onToggle: () => void;
 };
-export declare const Check: ({ value, onToggle }: CheckProps) => JSX.Element;
+export declare const Check: ({value, onToggle}: CheckProps) => JSX.Element;
 export {};

package/src/components/atoms/checkbox/checkbox.component.d.ts

@@ -1,7 +1,11 @@
 declare type CheckboxProps = {
-    value: boolean;
-    onValueChange: () => void;
-    label: string;
+  value: boolean;
+  onValueChange: () => void;
+  label: string;
 };
-declare const Checkbox: ({ value, onValueChange, label }: CheckboxProps) => JSX.Element;
-export { Checkbox as Checkbox };
+declare const Checkbox: ({
+  value,
+  onValueChange,
+  label,
+}: CheckboxProps) => JSX.Element;
+export {Checkbox as Checkbox};

package/src/components/atoms/child-list-item/child-list-item.component.d.ts

@@ -1,18 +1,30 @@
-import { ImageSourcePropType } from 'react-native';
-import { Initials } from '../../../models/initials.model';
-import { VisualState } from '../../../types/visual-state.enum';
+import {ImageSourcePropType} from 'react-native';
+import {Initials} from '../../../models/initials.model';
+import {VisualState} from '../../../types/visual-state.enum';
 declare type ChildListItemProps = {
     id: string;
     name: string;
     label: string;
     selectable: boolean;
     isSelected: boolean;
-    onPressArrow: () => void;
-    onPressText: () => void;
+    onPressArrow: (id: string) => void;
+    onPressText: (id: string) => void;
     onSelect: (id: string) => void;
     sourceAvatar: ImageSourcePropType | Initials;
     textTimeTracker: string;
     visualStateTimeTracker: VisualState;
 };
-declare const ChildListItem: ({ id, name, label, selectable, isSelected, onPressArrow, onPressText, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element;
-export { ChildListItem as ChildListItem };
+declare const ChildListItem: ({
+  id,
+  name,
+  label,
+  selectable,
+  isSelected,
+  onPressArrow,
+  onPressText,
+  onSelect,
+  sourceAvatar,
+  textTimeTracker,
+  visualStateTimeTracker,
+}: ChildListItemProps) => JSX.Element;
+export {ChildListItem as ChildListItem};

package/src/components/atoms/child-list-item/child-list-item.component.tsx

@@ -16,8 +16,8 @@ type ChildListItemProps = {
   label: string;
   selectable: boolean;
   isSelected: boolean;
-  onPressArrow: () => void;
-  onPressText: () => void;
+  onPressArrow: (id: string) => void;
+  onPressText: (id: string) => void;
   onSelect: (id: string) => void;
   sourceAvatar: ImageSourcePropType | Initials;
   textTimeTracker: string;
@@ -46,7 +46,7 @@ const ChildListItem = ({
   );
 
   const onPressSelectable = () => {
-    selectable ? onSelect(id) : onPressText();
+    selectable ? onSelect(id) : onPressText(id);
   };
 
   return (
@@ -72,7 +72,10 @@ const ChildListItem = ({
       </Pressable>
       <>
         {!selectable ? (
-          <Pressable onPress={onPressArrow} style={styles.iconContainer}>
+          <Pressable
+            onPress={(id) => onPressArrow}
+            style={styles.iconContainer}
+          >
             <ChevronRightIcon />
           </Pressable>
         ) : null}

package/src/components/atoms/contact-item/contact-item.component.d.ts

@@ -1,9 +1,15 @@
 declare type ContactItemProps = {
-    name: string;
-    firstname: string;
-    label: string;
-    onPress?: () => void;
-    isBlocked?: boolean;
+  name: string;
+  firstname: string;
+  label: string;
+  onPress?: () => void;
+  isBlocked?: boolean;
 };
-declare const ContactItem: ({ name, firstname, label, onPress, isBlocked, }: ContactItemProps) => JSX.Element;
-export { ContactItem as ContactItem };
+declare const ContactItem: ({
+  name,
+  firstname,
+  label,
+  onPress,
+  isBlocked,
+}: ContactItemProps) => JSX.Element;
+export {ContactItem as ContactItem};

package/src/components/atoms/contact-role/contact-role.component.d.ts

@@ -1,6 +1,9 @@
 declare type ContactRoleProps = {
-    name: string;
-    role?: string;
+  name: string;
+  role?: string;
 };
-export declare const ContactRole: ({ name, role }: ContactRoleProps) => JSX.Element;
+export declare const ContactRole: ({
+  name,
+  role,
+}: ContactRoleProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,10 @@
-import { DateTime } from 'luxon';
+import {DateTime} from 'luxon';
 declare type DateInputProps = {
-    onPress: () => void;
-    value: DateTime;
+  onPress: () => void;
+  value: DateTime;
 };
-export declare const DateInput: ({ onPress, value }: DateInputProps) => JSX.Element;
+export declare const DateInput: ({
+  onPress,
+  value,
+}: DateInputProps) => JSX.Element;
 export {};

package/src/components/atoms/day-select/components/day/day.component.d.ts

@@ -1,8 +1,8 @@
-import { DateTime } from 'luxon';
+import {DateTime} from 'luxon';
 declare type DayProps = {
-    date: DateTime;
-    onSelect: (date: DateTime) => void;
-    isSelected?: boolean;
+  date: DateTime;
+  onSelect: (date: DateTime) => void;
+  isSelected?: boolean;
 };
-declare const Day: ({ onSelect, date, isSelected }: DayProps) => JSX.Element;
-export { Day as Day };
+declare const Day: ({onSelect, date, isSelected}: DayProps) => JSX.Element;
+export {Day as Day};

package/src/components/atoms/day-select/day-select.component.d.ts

@@ -1,8 +1,12 @@
-import { DateTime } from 'luxon';
+import {DateTime} from 'luxon';
 declare type DaySelectProps = {
-    onSelectDate: (date: DateTime) => void;
-    startDate: DateTime;
-    selectedDate: DateTime;
+  onSelectDate: (date: DateTime) => void;
+  startDate: DateTime;
+  selectedDate: DateTime;
 };
-declare const DaySelect: ({ onSelectDate, selectedDate, startDate }: DaySelectProps) => JSX.Element;
-export { DaySelect as DaySelect };
+declare const DaySelect: ({
+  onSelectDate,
+  selectedDate,
+  startDate,
+}: DaySelectProps) => JSX.Element;
+export {DaySelect as DaySelect};

package/src/components/atoms/default-select/default-select.component.d.ts

@@ -1,6 +1,9 @@
 declare type DefaultSelectProps = {
-    label: string;
-    onPress: () => void;
+  label: string;
+  onPress: () => void;
 };
-export declare const DefaultSelect: ({ label, onPress }: DefaultSelectProps) => JSX.Element;
+export declare const DefaultSelect: ({
+  label,
+  onPress,
+}: DefaultSelectProps) => JSX.Element;
 export {};

package/src/components/atoms/department_logo/department-logo.component.d.ts

@@ -1,5 +1,7 @@
 declare type DepartmentLogoProps = {
-    department: string;
+  department: string;
 };
-declare const DepartmentLogo: ({ department }: DepartmentLogoProps) => JSX.Element;
-export { DepartmentLogo as DepartmentLogo };
+declare const DepartmentLogo: ({
+  department,
+}: DepartmentLogoProps) => JSX.Element;
+export {DepartmentLogo as DepartmentLogo};

package/src/components/atoms/filter-range/filter-range.component.d.ts

@@ -1,10 +1,17 @@
 declare type FilterRangeProps = {
-    value: number | number[];
-    onChange: (value: number | number[]) => void;
-    minValue: number;
-    maxValue: number;
-    prefix?: string;
-    suffix?: string;
+  value: number | number[];
+  onChange: (value: number | number[]) => void;
+  minValue: number;
+  maxValue: number;
+  prefix?: string;
+  suffix?: string;
 };
-export declare const FilterRange: ({ value, minValue, maxValue, onChange, prefix, suffix, }: FilterRangeProps) => JSX.Element;
+export declare const FilterRange: ({
+  value,
+  minValue,
+  maxValue,
+  onChange,
+  prefix,
+  suffix,
+}: FilterRangeProps) => JSX.Element;
 export {};

package/src/components/atoms/filter-tab/filter-tab.component.d.ts

@@ -1,9 +1,12 @@
 declare type FilterTab = {
-    tabItem: {
-        value: string;
-        label: string;
-    }[];
-    filterValue: (value: string) => void;
+  tabItem: {
+    value: string;
+    label: string;
+  }[];
+  filterValue: (value: string) => void;
 };
-export declare const FilterTab: ({ tabItem, filterValue }: FilterTab) => JSX.Element;
+export declare const FilterTab: ({
+  tabItem,
+  filterValue,
+}: FilterTab) => JSX.Element;
 export {};

package/src/components/atoms/footer/footer.component.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare type FooterProps = {
-    child: React.ReactNode;
+  child: React.ReactNode;
 };
-declare const Footer: ({ child }: FooterProps) => JSX.Element;
-export { Footer as Footer };
+declare const Footer: ({child}: FooterProps) => JSX.Element;
+export {Footer as Footer};

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

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

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

@@ -1,6 +1,9 @@
 declare type IncrementInputProps = {
-    value: number;
-    onPress: (number: number) => void;
+  value: number;
+  onPress: (number: number) => void;
 };
-export declare const IncrementInput: ({ value, onPress }: IncrementInputProps) => JSX.Element;
+export declare const IncrementInput: ({
+  value,
+  onPress,
+}: IncrementInputProps) => JSX.Element;
 export {};

package/src/components/atoms/info/info.component.d.ts

@@ -1,6 +1,6 @@
 declare type InfoProps = {
-    label: string;
-    description: string;
+  label: string;
+  description: string;
 };
-declare const Info: ({ label, description }: InfoProps) => JSX.Element;
-export { Info as Info };
+declare const Info: ({label, description}: InfoProps) => JSX.Element;
+export {Info as Info};

package/src/components/atoms/logo/logo.component.d.ts

@@ -1,6 +1,6 @@
 declare type logoProps = {
-    colorIsWhite?: boolean;
-    big?: boolean;
+  colorIsWhite?: boolean;
+  big?: boolean;
 };
-declare const Logo: ({ colorIsWhite, big }: logoProps) => JSX.Element;
-export { Logo as Logo };
+declare const Logo: ({colorIsWhite, big}: logoProps) => JSX.Element;
+export {Logo as Logo};