@tactics/toddle-styleguide 1.6.1 → 1.7.1

package/App.tsx

@@ -78,6 +78,7 @@ import { CountPreview } from './src/components/atoms/count/count.preview';
 import { AmountPreview } from './src/components/molecules/amount/amount.preview';
 import { BareTimePickerPreview } from './src/components/molecules/bare-time-picker/bare-time-picker.preview';
 import { TimetableEditorPreview } from './src/components/organisms/timetable-editor/timetable-editor.preview';
+import { InlineErrorPreview } from './src/components/molecules/inline-error/inline-error.preview';
 
 import {
   SafeAreaProvider,
@@ -199,6 +200,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Info Component"
         onPress={() => navigation.push('info')}
       />
+      <ReactBtn
+        title="Inline Error"
+        onPress={() => navigation.push('inline-error')}
+      />
       <ReactBtn
         title="Journal Entry"
         onPress={() => navigation.push('journal-entry')}
@@ -511,6 +516,9 @@ function App() {
           <Stack.Screen name="wide-button">
             {() => <WideButtonPreview />}
           </Stack.Screen>
+          <Stack.Screen name="inline-error">
+            {() => <InlineErrorPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -63,6 +63,7 @@ import { ContextLabel } from './src/components/molecules/context-label/context-l
 import { Count } from './src/components/atoms/count/count.component';
 import { Amount } from './src/components/molecules/amount/amount.component';
 import { TimetableEditor } from './src/components/organisms/timetable-editor/timetable-editor.component';
+import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -74,4 +75,4 @@ import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
 import CreateResponsiveStyle from './src/theme/responsive/index';
-export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DaySelect, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PopOverAction, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Swipe, TabView, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimeSlotRecord, TimeSlotSequence };
+export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DaySelect, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PopOverAction, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Swipe, TabView, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimeSlotRecord, TimeSlotSequence, InlineError };

package/index.tsx

@@ -81,6 +81,7 @@ import { ContextLabel } from './src/components/molecules/context-label/context-l
 import { Count } from './src/components/atoms/count/count.component';
 import { Amount } from './src/components/molecules/amount/amount.component';
 import { TimetableEditor } from './src/components/organisms/timetable-editor/timetable-editor.component';
+import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -185,5 +186,6 @@ export {
   Amount,
   TimetableEditor,
   TimeSlotRecord,
-  TimeSlotSequence
+  TimeSlotSequence,
+  InlineError
 };

package/package.json

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

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type InlineErrorProps = {
+    label: string;
+};
+declare const InlineError: ({ label }: InlineErrorProps) => React.JSX.Element;
+export { InlineError as InlineError };

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+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';
+
+type InlineErrorProps = {
+  label: string;
+};
+
+const InlineError = ({label}: InlineErrorProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  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}>
+        {label}
+      </SmallText>
+    </View>
+  );
+};
+export {InlineError as InlineError};

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { InlineError } from './inline-error.component';
+const {View} = require('react-native');
+
+export const InlineErrorPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'white',
+      }}
+    >
+      <InlineError
+        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

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

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

@@ -0,0 +1,22 @@
+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.ui.error.xlight,
+      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/organisms/child-list-item/child-list-item.component.d.ts

@@ -16,6 +16,7 @@ type ChildListItemProps = {
     textTimeTracker?: string;
     visualStateTimeTracker?: VisualState;
     tags?: string[];
+    error: boolean;
 };
-declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, }: ChildListItemProps) => React.JSX.Element>;
+declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, error }: ChildListItemProps) => React.JSX.Element>;
 export { ChildListItem as ChildListItem };

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

@@ -8,7 +8,7 @@ import {Size} from '../../../types/size.enum';
 import {VisualState} from '../../../types/visual-state.enum';
 import {Avatar} from '../../molecules/avatar/avatar.component';
 import {Stylesheet} from './child-list-item.styles';
-import {SmallText, TinyText} from '../../atoms/paragraph-components';
+import {SmallText} from '../../atoms/paragraph-components';
 import {Heading2} from '../../atoms/heading-components';
 import {TimeTracker} from '../../molecules/time-tracker/time-tracker.component';
 import {Icon} from '../../../icons/index';
@@ -28,6 +28,7 @@ type ChildListItemProps = {
   textTimeTracker?: string;
   visualStateTimeTracker?: VisualState;
   tags?: string[];
+  error: boolean;
 };
 
 const ChildListItem = React.memo(
@@ -45,6 +46,7 @@ const ChildListItem = React.memo(
     textTimeTracker,
     visualStateTimeTracker,
     tags,
+    error
   }: ChildListItemProps) => {
     const context = useContext(ThemeCtx);
     const styles = Stylesheet(isSelected, context);
@@ -66,8 +68,10 @@ const ChildListItem = React.memo(
     }, [id, onLongPress]);
 
     const textColor = useMemo(() => {
-      return isSelected ? context.colors.ui.white : context.colors.ui.black;
-    }, [isSelected]);
+      return isSelected
+        ? context.colors.ui.white
+        : error ? context.colors.ui.error.default : context.colors.ui.black;
+    }, [isSelected, error]);
 
     const renderTimeTracker = (textTimeTracker?: string, visualStateTimeTracker?: VisualState) => {
       if (textTimeTracker && visualStateTimeTracker) {
@@ -83,7 +87,7 @@ const ChildListItem = React.memo(
       <View style={styles.container}>
         <View style={styles.pressableContainer}>
           <Pressable
-            onPress={onPressSelectable}
+            onPress={!error ? onPressSelectable : null}
             style={styles.innerContainer}
             onLongPress={onLongPressCallback}
           >
@@ -102,14 +106,14 @@ const ChildListItem = React.memo(
                   numberOfLines={1}
                   ellipsizeMode={'tail'}
                   textColor={
-                    isSelected ? context.colors.ui.white : context.colors.ui.black
+                    textColor
                   }
                 >
                   {name}
                 </Heading2>
                 <SmallText
                   textColor={
-                    isSelected ? context.colors.ui.white : context.colors.ui.black
+                    textColor
                   }
                 >
                   {department}

package/src/components/organisms/child-list-item/child-list-item.preview.tsx

@@ -71,6 +71,7 @@ export const ChildListItemPreview = ({}: {}) => {
         // sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
         sourceAvatar={Initials.for('Zeno', 'Driesen')}
         tags={item.tags}
+        error={true}
       />
     );
   };

package/src/components/organisms/child-list-item/child-list-item.styles.d.ts

@@ -32,6 +32,7 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         justifyContent: "center";
         paddingRight: number;
         width: number;
+        height: number;
         borderTopRightRadius: number;
         borderBottomRightRadius: number;
     };
@@ -48,5 +49,6 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         gap: number;
         flexWrap: "wrap";
         marginLeft: number;
+        marginBottom: number;
     };
 };

package/src/components/organisms/child-list-item/child-list-item.styles.js

@@ -39,6 +39,7 @@ export const Stylesheet = (isSelectedItem, context) =>
       justifyContent: 'center',
       paddingRight: Scale.xs,
       width: Scale.m * 3,
+      height: Scale.m * 3,
       borderTopRightRadius: Scale.l,
       borderBottomRightRadius: Scale.l,
     },