@tactics/toddle-styleguide 5.0.1 → 5.0.2

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

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { ImageSourcePropType } from 'react-native';
-import { Initials } from '../../../models/initials.model';
-import { VisualState } from '../../../types/visual-state.enum';
-type ChildListItemProps = {
-    id: string;
-    name: string;
-    department: string;
-    selectable: boolean;
-    isSelected: boolean;
-    onPressArrow: (id: string) => void;
-    onPressText: (id: string) => void;
-    onLongPress: (id: string) => void;
-    onSelect: (id: string) => void;
-    sourceAvatar: ImageSourcePropType | Initials;
-    textTimeTracker?: string;
-    visualStateTimeTracker?: VisualState;
-    tags?: string[];
-    error: boolean;
-    isBirthday?: boolean;
-};
-declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, error, isBirthday, }: ChildListItemProps) => React.JSX.Element>;
-export { ChildListItem as ChildListItem };

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

@@ -1,166 +0,0 @@
-import * as React from 'react';
-import {useCallback, useContext, useMemo, useState} from 'react';
-
-import {ThemeCtx} from '../../../context/theme.context';
-import {ImageSourcePropType, Pressable, View} from 'react-native';
-import {Initials} from '../../../models/initials.model';
-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} from '../../atoms/paragraph-components';
-import {Heading2} from '../../atoms/heading-components';
-import {TimeTracker} from '../../molecules/time-tracker/time-tracker.component';
-import {Icon} from '../../../icons/index';
-import {ChildListTag} from './components/child-list-tag.component';
-
-type ChildListItemProps = {
-  id: string;
-  name: string;
-  department: string;
-  selectable: boolean;
-  isSelected: boolean;
-  onPressArrow: (id: string) => void;
-  onPressText: (id: string) => void;
-  onLongPress: (id: string) => void;
-  onSelect: (id: string) => void;
-  sourceAvatar: ImageSourcePropType | Initials;
-  textTimeTracker?: string;
-  visualStateTimeTracker?: VisualState;
-  tags?: string[];
-  error: boolean;
-  isBirthday?: boolean;
-};
-
-const ChildListItem = React.memo(
-  ({
-    id,
-    name,
-    department,
-    selectable,
-    isSelected,
-    onPressArrow,
-    onPressText,
-    onLongPress,
-    onSelect,
-    sourceAvatar,
-    textTimeTracker,
-    visualStateTimeTracker,
-    tags,
-    error,
-    isBirthday,
-  }: ChildListItemProps) => {
-    const context = useContext(ThemeCtx);
-    const styles = Stylesheet(isSelected, context);
-
-    const [longPressExecuting, setLongPressExecuting] = useState(false);
-
-    const onPressSelectable = useCallback(() => {
-      selectable ? onSelect(id) : onPressText(id);
-    }, [id, onPressText, onSelect, selectable]);
-
-    const onPressArrowCallback = useCallback(() => {
-      onPressArrow(id);
-    }, [id, onPressArrow]);
-
-    const onLongPressCallback = useCallback(() => {
-      setLongPressExecuting(true);
-      onLongPress(id);
-      setLongPressExecuting(false);
-    }, [id, onLongPress]);
-
-    const textColor = useMemo(() => {
-      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) {
-        return (
-          <TimeTracker
-            text={textTimeTracker}
-            visualState={visualStateTimeTracker}
-            textColor={textColor}
-          />
-        );
-      }
-    };
-
-    return (
-      <View style={styles.container}>
-        <View style={styles.pressableContainer}>
-          <Pressable
-            onPress={!error ? onPressSelectable : null}
-            style={styles.innerContainer}
-            onLongPress={onLongPressCallback}
-          >
-            <Avatar
-              source={sourceAvatar}
-              size={Size.MEDIUM}
-              isLoading={longPressExecuting}
-              isBirthday={isBirthday}
-            />
-            <View style={styles.pressableText}>
-              <View style={styles.trackerContainer}>
-                {renderTimeTracker(textTimeTracker, visualStateTimeTracker)}
-              </View>
-              <View>
-                <Heading2
-                  bold={true}
-                  numberOfLines={1}
-                  ellipsizeMode={'tail'}
-                  textColor={textColor}
-                >
-                  {error ? (
-                    <Icon
-                      name="exclamation-circle"
-                      style="regular"
-                      color={context.colors.ui.error.default}
-                    />
-                  ) : (
-                    ''
-                  )}
-                  {error ? ' ' + name : name}
-                </Heading2>
-                <SmallText textColor={textColor}>{department}</SmallText>
-              </View>
-            </View>
-          </Pressable>
-          {!selectable && (
-            <Pressable
-              onPress={onPressArrowCallback}
-              style={styles.iconContainer}
-            >
-              <Icon
-                style={'regular'}
-                name={'chevron-right'}
-                size={20}
-                color={context.colors.ui.black}
-              />
-            </Pressable>
-          )}
-        </View>
-        {tags && (
-          <View style={styles.tagContainer}>
-            {tags.map((tag) => {
-              return (
-                <ChildListTag
-                  key={`${id}--${tag}`}
-                  label={tag}
-                  isSelected={isSelected}
-                />
-              );
-            })}
-          </View>
-        )}
-      </View>
-    );
-  }
-);
-export {ChildListItem as ChildListItem};

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

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

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

@@ -1,141 +0,0 @@
-import React, {useContext, useState} from 'react';
-import {ChildListItem} from './child-list-item.component';
-import {FlatList, View} from 'react-native';
-import {VisualState} from '../../../types/visual-state.enum';
-import {PressableIcon} from '../../molecules/pressable-icon/pressable-icon.component';
-import {Icon} from '../../../icons/index';
-import {Initials} from '../../../models/initials.model';
-import { GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
-import {ThemeCtx} from '../../../context/theme.context';
-import { SwipeableContainer } from '../../molecules/swipeable/swipeable-container.component';
-
-interface IData {
-  id: string;
-  name: string;
-  department: string;
-  tags?: string[];
-}
-
-const data: IData[] = [];
-for (let i = 0; i < 6; i++) {
-  const tagsChance = Math.random(); // Generate a random number between 0 and 1
-  let tagsArray: string[] | undefined;
-
-  if (tagsChance > 0.5) {
-    tagsArray = ['Gezondheid', 'Allergie', 'Voedsel', 'Slaap'];
-  }
-
-  data.push({
-    id: 'child' + i,
-    name: 'Children with very long names because in 2023 we give our kids special name',
-    department: 'De Teddybeertjes',
-    tags: tagsArray,
-  });
-}
-
-export const ChildListItemPreview = ({}: {}) => {
-  const [selectedIDs, setSelectedIDs] = useState<string[]>([]);
-  const [isSelectable, setIsSelectable] = useState(false);
-  console.log(selectedIDs);
-
-  const context = useContext(ThemeCtx);
-
-  const selectChildren = () => {
-    if (!isSelectable) {
-      setIsSelectable(true);
-    } else {
-      setIsSelectable(false);
-      setSelectedIDs([]);
-    }
-  };
-  const addIdToSelected = (id: string) => {
-    const copySelectedIDs = [...selectedIDs];
-    const index = copySelectedIDs.indexOf(id);
-    if (index === -1) copySelectedIDs.push(id);
-    else copySelectedIDs.splice(index, 1);
-    setSelectedIDs(copySelectedIDs);
-  };
-  const isIdSelected = (id: string): boolean => {
-    return selectedIDs.includes(id);
-  };
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const renderChildList = ({item}: any) => {
-    const swipeableActions = [
-      {
-        visualState: VisualState.ERROR,
-        label: 'Afwezig',
-        icon: <Icon name='clock' style='regular' size={20} color={context.colors.ui.white} />,
-        onPress: () => {
-          console.log('Afwezig');
-        },
-      },
-      {
-        visualState: VisualState.DEFAULT,
-        label: 'Planning Wissen',
-        icon: <Icon name='clock' style='regular' size={20} color={context.colors.ui.white} />,
-        onPress: () => {
-          console.log('Planning Wissen');
-        },
-      }
-    ];
-
-    return (
-      <SwipeableContainer
-        actions={swipeableActions}
-      >
-        <ChildListItem
-          id={item.id}
-          name={item.name}
-          department={item.department}
-          selectable={isSelectable}
-          isSelected={isIdSelected(item.id)}
-          onPressArrow={(id) => console.log(id + ' pressed')}
-          onPressText={(id) => console.log('We will do something with id ' + id)}
-          onLongPress={(id) => console.log('Do something with id ' + id)}
-          onSelect={addIdToSelected}
-          // sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
-          sourceAvatar={Initials.for('Zeno', 'Driesen')}
-          tags={item.tags}
-          error={true}
-        />
-      </SwipeableContainer>
-    );
-  };
-
-  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <View
-        style={{
-          flex: 1,
-          padding: 16,
-          justifyContent: 'center',
-          backgroundColor: 'white',
-        }}
-      >
-        <View style={{alignItems: 'center', marginBottom: 28}}>
-          <PressableIcon
-            icon={
-              <Icon
-                style={'regular'}
-                name={'sm-view-grid-add'}
-                key={'unique key'}
-              />
-            }
-            onPress={selectChildren}
-          />
-        </View>
-        <FlatList
-          style={{
-            flex: 1,
-          }}
-          contentContainerStyle={{gap: 16}}
-          data={data}
-          renderItem={renderChildList}
-          keyExtractor={(item) => item.id}
-        />
-      </View>
-    </GestureHandlerRootView>
-  );
-};

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

@@ -1,57 +0,0 @@
-export function Stylesheet(
-  isSelectedItem: any,
-  context: any
-): {
-  container: {
-    width: '100%';
-    borderTopRightRadius: number;
-    borderBottomRightRadius: number;
-    borderTopLeftRadius: number;
-    borderBottomLeftRadius: number;
-    flexDirection: 'column';
-    backgroundColor: any;
-  };
-  innerContainer: {
-    flex: number;
-    padding: number;
-    flexDirection: 'row';
-    borderTopRightRadius: number;
-    borderBottomRightRadius: number;
-    borderTopLeftRadius: number;
-    borderBottomLeftRadius: number;
-    alignItems: 'center';
-  };
-  pressableContainer: {
-    flex: number;
-    flexDirection: 'row';
-    alignItems: 'center';
-  };
-  pressableText: {
-    marginLeft: number;
-    flex: number;
-  };
-  iconContainer: {
-    alignItems: 'flex-end';
-    justifyContent: 'center';
-    paddingRight: number;
-    width: number;
-    height: number;
-    borderTopRightRadius: number;
-    borderBottomRightRadius: number;
-  };
-  trackerContainer: {
-    flexDirection: 'row';
-    alignItems: 'center';
-  };
-  timeTrackerSpacer: {
-    height: number;
-    marginBottom: number;
-  };
-  tagContainer: {
-    flexDirection: 'row';
-    gap: number;
-    flexWrap: 'wrap';
-    marginLeft: number;
-    marginBottom: number;
-  };
-};

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

@@ -1,61 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale';
-
-export const Stylesheet = (isSelectedItem, context) =>
-  StyleSheet.create({
-    container: {
-      width: '100%',
-      borderTopRightRadius: Scale.l,
-      borderBottomRightRadius: Scale.l,
-      borderTopLeftRadius: Scale.xl,
-      borderBottomLeftRadius: Scale.xl,
-      flexDirection: 'column',
-      backgroundColor: isSelectedItem
-        ? context.colors.main[6]
-        : context.colors.ui.white,
-    },
-    innerContainer: {
-      flex: 1,
-      padding: Scale.xs,
-      flexDirection: 'row',
-      borderTopRightRadius: Scale.l,
-      borderBottomRightRadius: Scale.l,
-      borderTopLeftRadius: Scale.xxl,
-      borderBottomLeftRadius: Scale.xxl,
-      alignItems: 'center',
-    },
-    pressableContainer: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    pressableText: {
-      marginLeft: Scale.l,
-      flex: 1,
-    },
-    iconContainer: {
-      alignItems: 'flex-end',
-      justifyContent: 'center',
-      paddingRight: Scale.xs,
-      width: Scale.m * 4,
-      height: '100%',
-      borderTopRightRadius: Scale.l,
-      borderBottomRightRadius: Scale.l,
-    },
-    trackerContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    timeTrackerSpacer: {
-      height: Scale.s,
-      marginBottom: Scale.xxs,
-    },
-    tagContainer: {
-      flexDirection: 'row',
-      gap: Scale.s,
-      flexWrap: 'wrap',
-      marginLeft: Scale.xxxxl,
-      marginBottom: Scale.xs,
-    },
-  });

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

@@ -1,75 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {ChildListItem} from './child-list-item.component';
-import {VisualState} from '../../../types/visual-state.enum';
-
-describe('test child list item component', () => {
-  it('make text that is too long end in ... and has tags', () => {
-    const tree = render
-      .create(
-        <ChildListItem
-          id={'1'}
-          name={'Jean-Paul Janssens-Peeters'}
-          department={'De Teddybeertjes'}
-          selectable={true}
-          isSelected={false}
-          onPressArrow={() => console.log('pressedArrow')}
-          onPressText={() => console.log('pressedText')}
-          onSelect={() => console.log('selected')}
-          onLongPress={() => console.log('long press')}
-          sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
-          textTimeTracker={'time tracker'}
-          visualStateTimeTracker={VisualState.SUCCESS}
-          tags={['tag1', 'tag2']}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('background is blue and text is white when isSelected is true', () => {
-    const tree = render
-      .create(
-        <ChildListItem
-          id={'1'}
-          name={'Jean-Paul Janssens-Peeters'}
-          department={'De Teddybeertjes'}
-          selectable={true}
-          isSelected={true}
-          onPressArrow={() => console.log('pressedArrow')}
-          onPressText={() => console.log('pressedText')}
-          onSelect={() => console.log('selected')}
-          onLongPress={() => console.log('long press')}
-          sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
-          textTimeTracker={'time tracker'}
-          visualStateTimeTracker={VisualState.SUCCESS}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('arrow appears when selectable is false', () => {
-    const tree = render
-      .create(
-        <ChildListItem
-          id={'1'}
-          name={'Jean-Paul Janssens-Peeters'}
-          department={'De Teddybeertjes'}
-          selectable={false}
-          isSelected={false}
-          onPressArrow={() => console.log('pressedArrow')}
-          onPressText={() => console.log('pressedText')}
-          onSelect={() => console.log('selected')}
-          onLongPress={() => console.log('long press')}
-          sourceAvatar={require('./../../../../assets/components/avatar/baby.png')}
-          textTimeTracker={'time tracker'}
-          visualStateTimeTracker={VisualState.SUCCESS}
-          tags={['tag1', 'tag2']}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

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

@@ -1,7 +0,0 @@
-import React from 'react';
-type ChildListTagProps = {
-    label: string;
-    isSelected: boolean;
-};
-export declare const ChildListTag: ({ label, isSelected }: ChildListTagProps) => React.JSX.Element;
-export {};

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

@@ -1,28 +0,0 @@
-import React, {useContext} from 'react';
-import {View} from 'react-native';
-import {TinyText} from '../../../atoms/paragraph-components';
-import {ThemeCtx} from '../../../../context/theme.context';
-import {Stylesheet} from './child-list-tag.styles';
-
-type ChildListTagProps = {
-  label: string;
-  isSelected: boolean;
-};
-
-export const ChildListTag = ({label, isSelected}: ChildListTagProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context, isSelected);
-
-  return (
-    <View style={styles.rootContainer}>
-      <TinyText
-        textAlign={'center'}
-        textColor={
-          !isSelected ? context.colors.ui.darkgrey : context.colors.ui.white
-        }
-      >
-        {label}
-      </TinyText>
-    </View>
-  );
-};

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

@@ -1,13 +0,0 @@
-export function Stylesheet(
-  context: any,
-  isSelected: any
-): {
-  rootContainer: {
-    backgroundColor: any;
-    borderRadius: number;
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-  };
-};

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

@@ -1,16 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../../theme/scale/index';
-
-export const Stylesheet = (context, isSelected) =>
-  StyleSheet.create({
-    rootContainer: {
-      backgroundColor: !isSelected
-        ? context.colors.ui.lightgrey
-        : context.colors.main[5],
-      borderRadius: 50,
-      paddingLeft: Scale.s,
-      paddingTop: Scale.xxs,
-      paddingRight: Scale.s,
-      paddingBottom: Scale.xxs,
-    },
-  });