@tactics/toddle-styleguide 2.0.3 → 3.0.0

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

@@ -1,84 +1,102 @@
-export function Stylesheet(context: any, size: any, isBlocked: any, isActive: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
-    container: ({
-        overflow: string;
-        backgroundColor: any;
-        justifyContent: string;
-        alignItems: string;
-        width?: undefined;
-        height?: undefined;
-        borderRadius?: undefined;
-    } | {
-        width: number;
-        height: number;
-        borderRadius: number;
-        overflow?: undefined;
-        backgroundColor?: undefined;
-        justifyContent?: undefined;
-        alignItems?: undefined;
-    })[];
-    shadow: ({
-        backgroundColor: string;
-        shadowColor?: undefined;
-        shadowOpacity?: undefined;
-        shadowRadius?: undefined;
-        shadowOffset?: undefined;
-        elevation?: undefined;
-        width?: undefined;
-        height?: undefined;
-        borderRadius?: undefined;
-    } | {
-        shadowColor: any;
-        shadowOpacity: number;
-        shadowRadius: number;
-        shadowOffset: {
+export function Stylesheet(
+  context: any,
+  size: any,
+  isBlocked: any,
+  isActive: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: (
+        | {
+            overflow: string;
+            backgroundColor: any;
+            justifyContent: string;
+            alignItems: string;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
             width: number;
             height: number;
-        };
-        backgroundColor?: undefined;
-        elevation?: undefined;
-        width?: undefined;
-        height?: undefined;
-        borderRadius?: undefined;
-    } | {
-        elevation: number;
-        shadowColor: any;
-        backgroundColor?: undefined;
-        shadowOpacity?: undefined;
-        shadowRadius?: undefined;
-        shadowOffset?: undefined;
-        width?: undefined;
-        height?: undefined;
-        borderRadius?: undefined;
-    } | {
-        width: number;
-        height: number;
-        borderRadius: number;
-        backgroundColor?: undefined;
-        shadowColor?: undefined;
-        shadowOpacity?: undefined;
-        shadowRadius?: undefined;
-        shadowOffset?: undefined;
-        elevation?: undefined;
-    })[];
-    image: {
+            borderRadius: number;
+            overflow?: undefined;
+            backgroundColor?: undefined;
+            justifyContent?: undefined;
+            alignItems?: undefined;
+          }
+      )[];
+      shadow: (
+        | {
+            backgroundColor: string;
+            shadowColor?: undefined;
+            shadowOpacity?: undefined;
+            shadowRadius?: undefined;
+            shadowOffset?: undefined;
+            elevation?: undefined;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
+            shadowColor: any;
+            shadowOpacity: number;
+            shadowRadius: number;
+            shadowOffset: {
+              width: number;
+              height: number;
+            };
+            backgroundColor?: undefined;
+            elevation?: undefined;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
+            elevation: number;
+            shadowColor: any;
+            backgroundColor?: undefined;
+            shadowOpacity?: undefined;
+            shadowRadius?: undefined;
+            shadowOffset?: undefined;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+          }
+        | {
+            width: number;
+            height: number;
+            borderRadius: number;
+            backgroundColor?: undefined;
+            shadowColor?: undefined;
+            shadowOpacity?: undefined;
+            shadowRadius?: undefined;
+            shadowOffset?: undefined;
+            elevation?: undefined;
+          }
+      )[];
+      image: {
         position: string;
         width: string;
         height: string;
         borderRadius: number;
-    }[];
-    text: {
-        textTransform: "uppercase";
-    };
-    crownContainer: ({
-        position: string;
-        zIndex: number;
-        top?: undefined;
-        left?: undefined;
-    } | {
-        top: number;
-        left: number;
-        position?: undefined;
-        zIndex?: undefined;
-    })[];
-}>;
-import { StyleSheet } from 'react-native';
+      }[];
+      text: {
+        textTransform: 'uppercase';
+      };
+      crownContainer: (
+        | {
+            position: string;
+            zIndex: number;
+            top?: undefined;
+            left?: undefined;
+          }
+        | {
+            top: number;
+            left: number;
+            position?: undefined;
+            zIndex?: undefined;
+          }
+      )[];
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/molecules/avatar/avatar.styles.js

@@ -69,20 +69,22 @@ export const Stylesheet = (context, size, isBlocked, isActive) =>
     text: {
       textTransform: 'uppercase',
     },
-    crownContainer:[ {
-      position: 'absolute',
-      zIndex: 999
-    },
-    size === Size.SMALL && {
-      top: -10,
-      left: -5,
-    },
-    size === Size.MEDIUM && {
-      top: -6,
-      left: 0,
-    },
-    size === Size.LARGE && {
-      top: -2,
-      left: 10,
-    }]
+    crownContainer: [
+      {
+        position: 'absolute',
+        zIndex: 999,
+      },
+      size === Size.SMALL && {
+        top: -10,
+        left: -5,
+      },
+      size === Size.MEDIUM && {
+        top: -6,
+        left: 0,
+      },
+      size === Size.LARGE && {
+        top: -2,
+        left: 10,
+      },
+    ],
   });

package/src/components/molecules/bare-time-picker/bare-time-picker.component.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 interface BareTimePickerProps {
     initialHours: string;
     initialMinutes: string;

package/src/components/molecules/bare-time-picker/bare-time-picker.component.native.tsx

@@ -0,0 +1,78 @@
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './bare-time-picker.styles';
+import {View} from 'react-native';
+import React from 'react';
+import WheelPicker from 'react-native-wheely';
+import {Scale} from '../../../theme/scale';
+
+interface BareTimePickerProps {
+  initialHours: string;
+  initialMinutes: string;
+  onChangeHours: (value: string) => void;
+  onChangeMinutes: (value: string) => void;
+}
+
+const HOURS: string[] = [
+  '',
+  ...Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0')),
+];
+const MINUTES: string[] = [
+  '',
+  ...Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0')),
+];
+
+export const BareTimePicker = ({
+  initialHours,
+  initialMinutes,
+  onChangeHours,
+  onChangeMinutes,
+}: BareTimePickerProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const initialIndexHandler = (dataArray: string[], value: string): number => {
+    return dataArray.findIndex((element) => element === value);
+  };
+
+  return (
+    <View style={styles.rootContainer}>
+      <WheelPicker
+        options={HOURS.map((value) => (value == '' ? '--' : value))}
+        onChange={(index) => onChangeHours(HOURS[index])}
+        selectedIndex={initialIndexHandler(HOURS, initialHours)}
+        visibleRest={1}
+        selectedIndicatorStyle={{
+          borderRadius: 0,
+          backgroundColor: context.colors.main[9],
+        }}
+        containerStyle={{
+          backgroundColor: context.colors.ui.xlightgrey,
+          width: '50%',
+          borderTopLeftRadius: Scale.xxs,
+          borderBottomLeftRadius: Scale.xxs,
+        }}
+        itemTextStyle={{fontSize: Scale.l}}
+        scaleFunction={(x) => x / 1.5}
+      />
+      <WheelPicker
+        options={MINUTES.map((value) => (value == '' ? '--' : value))}
+        onChange={(index) => onChangeMinutes(MINUTES[index])}
+        selectedIndex={initialIndexHandler(MINUTES, initialMinutes)}
+        visibleRest={1}
+        selectedIndicatorStyle={{
+          borderRadius: 0,
+          backgroundColor: context.colors.main[9],
+        }}
+        containerStyle={{
+          backgroundColor: context.colors.ui.xlightgrey,
+          width: '50%',
+          borderTopRightRadius: Scale.xxs,
+          borderBottomRightRadius: Scale.xxs,
+        }}
+        itemTextStyle={{fontSize: Scale.l}}
+        scaleFunction={(x) => x / 1.5}
+      />
+    </View>
+  );
+};

package/src/components/molecules/bare-time-picker/bare-time-picker.component.tsx

@@ -1,80 +1,52 @@
-import { useContext } from "react";
-import { ThemeCtx } from "../../../context/theme.context";
-import { Stylesheet } from "./bare-time-picker.styles";
-import { View } from "react-native";
-import React from "react";
-import WheelPicker from 'react-native-wheely';
-import { Scale } from "../../../theme/scale";
-
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './bare-time-picker.styles';
+import {View} from 'react-native';
+import React from 'react';
+import { SelectPicker } from '../select-picker/select-picker.component';
+import { Paragraph } from '../../atoms/paragraph-components';
+import { Scale } from '../../../theme/scale';
 
 interface BareTimePickerProps {
-    initialHours: string;
-    initialMinutes: string;
-    onChangeHours: (value: string) => void;
-    onChangeMinutes: (value: string) => void;
+  initialHours: string;
+  initialMinutes: string;
+  onChangeHours: (value: string) => void;
+  onChangeMinutes: (value: string) => void;
 }
 
 const HOURS: string[] = [
-    '',
-    ...Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0')),
+  '',
+  ...Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0')),
 ];
 const MINUTES: string[] = [
-    '',
-    ...Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0')),
+  '',
+  ...Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0')),
 ];
 
-
 export const BareTimePicker = ({
-    initialHours,
-    initialMinutes,
-    onChangeHours,
-    onChangeMinutes,
+  initialHours,
+  initialMinutes,
+  onChangeHours,
+  onChangeMinutes,
 }: BareTimePickerProps) => {
-    const context = useContext(ThemeCtx);
-    const styles = Stylesheet(context);
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
 
-    const initialIndexHandler = (dataArray: string[], value: string): number => {
-        return dataArray.findIndex((element) => element === value);
-    };
+  const hourItems = HOURS.map((el) => {
+    return {value: el, label: el}
+  });
 
-    return (
-        <View style={styles.rootContainer}>
-            <WheelPicker
-                options={HOURS.map((value) => (value == '' ? '--' : value))}
-                onChange={(index) => onChangeHours(HOURS[index])}
-                selectedIndex={initialIndexHandler(HOURS, initialHours)}
-                visibleRest={1}
-                selectedIndicatorStyle={{
-                    borderRadius: 0,
-                    backgroundColor: context.colors.main[9],
-                }}
-                containerStyle={{
-                    backgroundColor: context.colors.ui.xlightgrey,
-                    width: '50%',
-                    borderTopLeftRadius:Scale.xxs,
-                    borderBottomLeftRadius:Scale.xxs,
-                }}
-                itemTextStyle={{fontSize: Scale.l}}
-                scaleFunction={(x) => x/1.5}
-            />
-            <WheelPicker
-                options={MINUTES.map((value) => (value == '' ? '--' : value))}
-                onChange={(index) => onChangeMinutes(MINUTES[index])}
-                selectedIndex={initialIndexHandler(MINUTES, initialMinutes)}
-                visibleRest={1}
-                selectedIndicatorStyle={{
-                    borderRadius: 0,
-                    backgroundColor: context.colors.main[9]
-                }}
-                containerStyle={{
-                    backgroundColor: context.colors.ui.xlightgrey,
-                    width: '50%',
-                    borderTopRightRadius:Scale.xxs,
-                    borderBottomRightRadius:Scale.xxs,
-                }}
-                itemTextStyle={{fontSize: Scale.l}}
-                scaleFunction={(x) => x/1.5}
-            />
-        </View>
-    )
-}
+  const minuteItems = MINUTES.map((el) => {
+    return {value: el, label: el}
+  });
+
+  return (
+    <View style={styles.webRootContainer}>
+      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
+        <SelectPicker data={hourItems} onChange={onChangeHours} defaultValue={initialHours} />
+        <Paragraph addStyle={{paddingHorizontal: Scale.s}}>:</Paragraph>
+        <SelectPicker data={minuteItems} onChange={onChangeMinutes} defaultValue={initialMinutes} />
+      </View>
+    </View>
+  );
+};

package/src/components/molecules/bare-time-picker/bare-time-picker.preview.tsx

@@ -6,7 +6,7 @@ import {Avatar} from '../avatar/avatar.component';
 import {Initials} from '../../../models/initials.model';
 import {Size} from '../../../types/size.enum';
 import {Modal} from '../../templates/modal/modal.component';
-import { BareTimePicker } from './bare-time-picker.component';
+import {BareTimePicker} from './bare-time-picker.component';
 
 export const BareTimePickerPreview = ({}: {}) => {
   const [popoverIsVisible, setPopoverIsVisible] = useState(false);

package/src/components/molecules/bare-time-picker/bare-time-picker.styles.d.ts

@@ -5,4 +5,10 @@ export function Stylesheet(context: any): {
         width: "100%";
         maxWidth: number;
     };
+    webRootContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        width: "100%";
+    };
 };

package/src/components/molecules/bare-time-picker/bare-time-picker.styles.js

@@ -2,11 +2,17 @@ import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale/index';
 
 export const Stylesheet = (context) =>
-    StyleSheet.create({
-        rootContainer: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            width: '100%',
-            maxWidth: 200
-        },
-    });
+  StyleSheet.create({
+    rootContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '100%',
+      maxWidth: 200,
+    },
+    webRootContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+    },
+  });

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

@@ -4,6 +4,7 @@ type CalendarSelectProps = {
     onPressDate: (date: ToddleDateTime) => void;
     startDate: ToddleDateTime;
     onUpdateDate: (date: ToddleDateTime) => void;
+    labelForToday?: string | undefined;
 };
-declare const CalendarSelect: ({ onPressDate, startDate, onUpdateDate, }: CalendarSelectProps) => React.JSX.Element;
+declare const CalendarSelect: ({ onPressDate, startDate, onUpdateDate, labelForToday, }: CalendarSelectProps) => React.JSX.Element;
 export { CalendarSelect as CalendarSelect };

package/src/components/molecules/calendar-select/calendar-select.component.tsx

@@ -6,90 +6,93 @@ import {Stylesheet} from './calendar-select.styles';
 import {Pressable, View} from 'react-native';
 import {Paragraph} from '../../atoms/paragraph-components';
 import {Icon} from '../../../icons/index';
-import { useDebounce } from '../../../hooks/use-debounce';
+import {useDebounce} from '../../../hooks/use-debounce';
 
 type CalendarSelectProps = {
-    onPressDate: (date: ToddleDateTime) => void;
-    startDate: ToddleDateTime;
-    onUpdateDate: (date: ToddleDateTime) => void;
-    labelForToday?: string | undefined
+  onPressDate: (date: ToddleDateTime) => void;
+  startDate: ToddleDateTime;
+  onUpdateDate: (date: ToddleDateTime) => void;
+  labelForToday?: string | undefined;
 };
 
 const CalendarSelect = ({
-                            onPressDate,
-                            startDate,
-                            onUpdateDate,
-                            labelForToday
-                        }: CalendarSelectProps) => {
-    const context = useContext(ThemeCtx);
-    const styles = Stylesheet(context);
+  onPressDate,
+  startDate,
+  onUpdateDate,
+  labelForToday,
+}: CalendarSelectProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
 
-    const [visibleDate, setVisibleDate] = useState(startDate);
-    const debouncedVisibleDate = useDebounce<ToddleDateTime>(visibleDate, 500);
+  const [visibleDate, setVisibleDate] = useState(startDate);
+  const debouncedVisibleDate = useDebounce<ToddleDateTime>(visibleDate, 500);
 
-    const today = ToddleDateTime.now();
-    const format = 'yyyy-LL-dd';
-    const isToday = today.toFormat(format) == visibleDate.toFormat(format);
+  const today = ToddleDateTime.now();
+  const format = 'yyyy-LL-dd';
+  const isToday = today.toFormat(format) == visibleDate.toFormat(format);
 
-    useEffect(() => {
-        setVisibleDate(startDate);
-    }, [startDate]);
+  useEffect(() => {
+    setVisibleDate(startDate);
+  }, [startDate]);
 
-    useEffect(() => {
-        // If they are the same dont trigger event again.
-        if (visibleDate !== startDate) {
-            onUpdateDate(debouncedVisibleDate);
-        }
-    }, [debouncedVisibleDate])
+  useEffect(() => {
+    // If they are the same dont trigger event again.
+    if (visibleDate !== startDate) {
+      onUpdateDate(debouncedVisibleDate);
+    }
+  }, [debouncedVisibleDate]);
 
-    return (
-        <View style={styles.container}>
-            <Pressable
-                onPress={() => {
-                    setVisibleDate(visibleDate.minus({days: 1}));
-                }}
-                style={styles.arrowContainer}
-            >
-                <Icon
-                    style={'regular'}
-                    name={'chevron-left'}
-                    color={context.colors.main['9']}
-                />
-            </Pressable>
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={() => {
+          setVisibleDate(visibleDate.minus({days: 1}));
+        }}
+        style={styles.arrowContainer}
+      >
+        <Icon
+          style={'regular'}
+          name={'chevron-left'}
+          color={context.colors.main['9']}
+        />
+      </Pressable>
 
-            <Pressable
-                onPress={() => onPressDate(visibleDate)}
-                style={styles.dateContainer}
-            >
-                <View style={styles.icon}>
-                    <Icon
-                        style={'regular'}
-                        name={'calendar'}
-                        color={context.colors.main['9']}
-                    />
-                </View>
-                <Paragraph textColor={context.colors.main['9']} textAlign={'center'} >
-                    {
-                        isToday && labelForToday ?
-                            labelForToday :
-                            visibleDate.toLocaleString({weekday: 'short', day: 'numeric', month: 'short', year: 'numeric'})
-                    }
-                </Paragraph>
-            </Pressable>
-
-            <Pressable
-                onPress={() => {
-                    setVisibleDate(visibleDate.plus({days: 1}));
-                }}
-                style={styles.arrowContainer}
-            >
-                <Icon
-                    style={'regular'}
-                    name={'chevron-right'}
-                    color={context.colors.main['9']}
-                />
-            </Pressable>
+      <Pressable
+        onPress={() => onPressDate(visibleDate)}
+        style={styles.dateContainer}
+      >
+        <View style={styles.icon}>
+          <Icon
+            style={'regular'}
+            name={'calendar'}
+            color={context.colors.main['9']}
+          />
         </View>
-    );
+        <Paragraph textColor={context.colors.main['9']} textAlign={'center'}>
+          {isToday && labelForToday
+            ? labelForToday
+            : visibleDate.toLocaleString({
+                weekday: 'short',
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric',
+              })}
+        </Paragraph>
+      </Pressable>
+
+      <Pressable
+        onPress={() => {
+          setVisibleDate(visibleDate.plus({days: 1}));
+        }}
+        style={styles.arrowContainer}
+      >
+        <Icon
+          style={'regular'}
+          name={'chevron-right'}
+          color={context.colors.main['9']}
+        />
+      </Pressable>
+    </View>
+  );
 };
 export {CalendarSelect as CalendarSelect};