@tactics/toddle-styleguide 2.0.2 → 2.0.4

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 { TimetableEditorStaff } from './src/components/organisms/timetable-editor/timetable-editor-staff.component';
 import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
 import { InlineNotice } from './src/components/molecules/inline-notice/inline-notice.component';
 import { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
@@ -77,4 +78,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, InlineError, InlineNotice, SelectableListItem };
+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, TimetableEditorStaff, TimeSlotRecord, TimeSlotSequence, InlineError, InlineNotice, SelectableListItem };

package/package.json

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

package/src/components/atoms/animated-wave/animated-wave.styles.d.ts

@@ -1,21 +1,21 @@
 export function Stylesheet(Context: any): {
-    container: {
-        flex: number;
-        alignItems: "center";
-        justifyContent: "flex-start";
-    };
-    animationContainer: {
-        width: "100%";
-        alignItems: "center";
-        position: "absolute";
-        top: "-1%";
-        zIndex: number;
-    };
-    overlay: {
-        width: "100%";
-        height: "30%";
-        position: "absolute";
-        top: "38%";
-        backgroundColor: any;
-    };
+  container: {
+    flex: number;
+    alignItems: 'center';
+    justifyContent: 'flex-start';
+  };
+  animationContainer: {
+    width: '100%';
+    alignItems: 'center';
+    position: 'absolute';
+    top: '-1%';
+    zIndex: number;
+  };
+  overlay: {
+    width: '100%';
+    height: '30%';
+    position: 'absolute';
+    top: '38%';
+    backgroundColor: any;
+  };
 };

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

@@ -1,7 +1,10 @@
 import * as React from 'react';
 type PopoverBackdropProps = {
-    isVisible: boolean;
-    touchBackDrop?: (value: boolean) => void;
+  isVisible: boolean;
+  touchBackDrop?: (value: boolean) => void;
 };
-declare const Backdrop: ({ isVisible, touchBackDrop }: PopoverBackdropProps) => React.JSX.Element;
-export { Backdrop as Backdrop };
+declare const Backdrop: ({
+  isVisible,
+  touchBackDrop,
+}: PopoverBackdropProps) => React.JSX.Element;
+export {Backdrop as Backdrop};

package/src/components/atoms/backdrop/backdrop.styles.d.ts

@@ -1,11 +1,11 @@
 export function Stylesheet(Context: any): {
-    element: {
-        width: "100%";
-        height: "100%";
-        backgroundColor: any;
-        zIndex: number;
-        position: "absolute";
-        top: number;
-        left: number;
-    };
+  element: {
+    width: '100%';
+    height: '100%';
+    backgroundColor: any;
+    zIndex: number;
+    position: 'absolute';
+    top: number;
+    left: number;
+  };
 };

package/src/components/atoms/background-gradient/background-gradient.styles.d.ts

@@ -1,8 +1,8 @@
 export function Stylesheet(): {
-    rootContainer: {
-        width: "100%";
-        height: "100%";
-        position: "absolute";
-        zIndex: number;
-    };
+  rootContainer: {
+    width: '100%';
+    height: '100%';
+    position: 'absolute';
+    zIndex: number;
+  };
 };

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

@@ -1,10 +1,15 @@
 import React from 'react';
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type CalendarProps = {
-    onDayPress: (day: ToddleDateTime) => void;
-    selected: ToddleDateTime;
-    minDate?: string;
-    maxDate?: string;
+  onDayPress: (day: ToddleDateTime) => void;
+  selected: ToddleDateTime;
+  minDate?: string;
+  maxDate?: string;
 };
-export declare const Calendar: ({ onDayPress, selected, minDate, maxDate, }: CalendarProps) => React.JSX.Element;
+export declare const Calendar: ({
+  onDayPress,
+  selected,
+  minDate,
+  maxDate,
+}: CalendarProps) => React.JSX.Element;
 export {};

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

@@ -1,7 +1,10 @@
 import * as React from 'react';
 type CheckProps = {
-    value: boolean;
-    onToggle: () => void;
+  value: boolean;
+  onToggle: () => void;
 };
-export declare const Check: ({ value, onToggle }: CheckProps) => React.JSX.Element;
+export declare const Check: ({
+  value,
+  onToggle,
+}: CheckProps) => React.JSX.Element;
 export {};

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

@@ -1,7 +1,10 @@
-import React from "react";
+import React from 'react';
 interface CountProps {
-    count: number;
-    disabled?: boolean;
+  count: number;
+  disabled?: boolean;
 }
-export declare const Count: ({ count, disabled }: CountProps) => React.JSX.Element;
+export declare const Count: ({
+  count,
+  disabled,
+}: CountProps) => React.JSX.Element;
 export {};

package/src/components/atoms/count/count.component.tsx

@@ -1,22 +1,21 @@
-import React from "react";
-import { View } from "react-native";
+import React from 'react';
+import {View} from 'react-native';
 import {useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
-import { Stylesheet } from "./count.styles";
-import { Paragraph } from "../paragraph-components";
+import {Stylesheet} from './count.styles';
+import {Paragraph} from '../paragraph-components';
 
 interface CountProps {
   count: number;
-  disabled?: boolean
+  disabled?: boolean;
 }
 
-export const Count = ({
-  count,
-  disabled
-}: CountProps) => {
+export const Count = ({count, disabled}: CountProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, disabled);
-  return <View style={styles.container}>
-    <Paragraph addStyle={styles.text}>{count}</Paragraph>
-  </View>;
-};
+  return (
+    <View style={styles.container}>
+      <Paragraph addStyle={styles.text}>{count}</Paragraph>
+    </View>
+  );
+};

package/src/components/atoms/count/count.preview.tsx

@@ -2,15 +2,15 @@ import {View} from 'react-native';
 import {useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
 import React from 'react';
-import { Count } from './count.component';
+import {Count} from './count.component';
 
 export const CountPreview = () => {
   const context = useContext(ThemeCtx);
   return (
     <View style={{alignItems: 'center', gap: 8}}>
-        <Count count={2} />
-        <Count count={99} />
-        <Count count={999999} />
+      <Count count={2} />
+      <Count count={99} />
+      <Count count={999999} />
     </View>
   );
-}
+};

package/src/components/atoms/count/count.styles.d.ts

@@ -1,21 +1,24 @@
-export function Stylesheet(context: any, disabled: any): {
-    container: {
-        borderWidth: number;
-        borderColor: any;
-        borderRadius: number;
-        paddingVertical: number;
-        paddingHorizontal: number;
-        minWidth: number;
-        color: any;
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        flex: number;
-        backgroundColor: any;
-    };
-    text: {
-        width: "auto";
-        fontSize: number;
-        color: any;
-    };
+export function Stylesheet(
+  context: any,
+  disabled: any
+): {
+  container: {
+    borderWidth: number;
+    borderColor: any;
+    borderRadius: number;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    minWidth: number;
+    color: any;
+    display: 'flex';
+    alignItems: 'center';
+    justifyContent: 'center';
+    flex: number;
+    backgroundColor: any;
+  };
+  text: {
+    width: 'auto';
+    fontSize: number;
+    color: any;
+  };
 };

package/src/components/atoms/count/count.styles.js

@@ -1,25 +1,33 @@
 import {StyleSheet} from 'react-native';
-import { Scale } from '../../../theme/scale';
+import {Scale} from '../../../theme/scale';
 
 export const Stylesheet = (context, disabled) =>
   StyleSheet.create({
     container: {
-        borderWidth: 1,
-        borderColor: disabled === true ? context.colors.ui.xlightgrey : context.colors.main['1'],
-        borderRadius: 20,
-        paddingVertical: Scale.xs,
-        paddingHorizontal: Scale.m,
-        minWidth: Scale.xxxl,
-        color: disabled === true ? context.colors.ui.grey : context.colors.main['2'],
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flex: 0,
-        backgroundColor: disabled === true ? context.colors.ui.xlightgrey : context.colors.ui.white
+      borderWidth: 1,
+      borderColor:
+        disabled === true
+          ? context.colors.ui.xlightgrey
+          : context.colors.main['1'],
+      borderRadius: 20,
+      paddingVertical: Scale.xs,
+      paddingHorizontal: Scale.m,
+      minWidth: Scale.xxxl,
+      color:
+        disabled === true ? context.colors.ui.grey : context.colors.main['2'],
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: 0,
+      backgroundColor:
+        disabled === true
+          ? context.colors.ui.xlightgrey
+          : context.colors.ui.white,
     },
     text: {
-        width: 'auto',
-        fontSize: Scale.m,
-        color: disabled === true ? context.colors.ui.grey : context.colors.main['2'],
-    }
+      width: 'auto',
+      fontSize: Scale.m,
+      color:
+        disabled === true ? context.colors.ui.grey : context.colors.main['2'],
+    },
   });

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

@@ -1,9 +1,12 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
-import { AnimateStyle } from 'react-native-reanimated';
+import {ViewStyle} from 'react-native';
+import {AnimateStyle} from 'react-native-reanimated';
 type FooterProps = {
-    children: React.ReactNode;
-    animatedStyle?: AnimateStyle<ViewStyle>;
+  children: React.ReactNode;
+  animatedStyle?: AnimateStyle<ViewStyle>;
 };
-declare const Footer: ({ children, animatedStyle }: FooterProps) => React.JSX.Element;
-export { Footer as Footer };
+declare const Footer: ({
+  children,
+  animatedStyle,
+}: FooterProps) => React.JSX.Element;
+export {Footer as Footer};

package/src/components/atoms/footer/footer.component.tsx

@@ -5,9 +5,7 @@ import {ViewStyle} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './footer.styles';
 import Animated, {AnimateStyle} from 'react-native-reanimated';
-import {
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 type FooterProps = {
   children: React.ReactNode;
@@ -20,12 +18,12 @@ const Footer = ({children, animatedStyle}: FooterProps) => {
   const styles = Stylesheet(context, insets);
 
   return (
-      <Animated.View
-        style={[styles.container, animatedStyle]}
-        testID="footer-container"
-      >
-        {children}
-      </Animated.View>
+    <Animated.View
+      style={[styles.container, animatedStyle]}
+      testID="footer-container"
+    >
+      {children}
+    </Animated.View>
   );
 };
 

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

@@ -1,14 +1,17 @@
-export function Stylesheet(context: any, insets: any): {
-    container: {
-        flexDirection: "row";
-        alignItems: "center";
-        justifyContent: "center";
-        backgroundColor: any;
-        borderTopColor: any;
-        borderStyle: "solid";
-        borderTopWidth: number;
-        minHeight: any;
-        paddingBottom: any;
-        width: "100%";
-    };
+export function Stylesheet(
+  context: any,
+  insets: any
+): {
+  container: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    justifyContent: 'center';
+    backgroundColor: any;
+    borderTopColor: any;
+    borderStyle: 'solid';
+    borderTopWidth: number;
+    minHeight: any;
+    paddingBottom: any;
+    width: '100%';
+  };
 };

package/src/components/atoms/footer/footer.styles.js

@@ -11,7 +11,7 @@ export const Stylesheet = (context, insets) =>
       borderTopColor: context.colors.ui.lightgrey,
       borderStyle: 'solid',
       borderTopWidth: 1,
-      minHeight: (Scale.xxxl + insets.bottom),
+      minHeight: Scale.xxxl + insets.bottom,
       paddingBottom: insets.bottom,
       width: '100%',
     },

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.component.d.ts

@@ -1,3 +1,11 @@
 import React from 'react';
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const AllCapsHeading: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => React.JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const AllCapsHeading: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  numberOfLines,
+  ellipsizeMode,
+  addStyle,
+}: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/heading1/heading1.component.d.ts

@@ -1,3 +1,11 @@
 import React from 'react';
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading1: ({ bold, children, textColor, textAlign, addStyle, ellipsizeMode, numberOfLines, }: TextProperties) => React.JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Heading1: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  ellipsizeMode,
+  numberOfLines,
+}: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/heading2/heading2.component.d.ts

@@ -1,3 +1,11 @@
 import React from 'react';
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading2: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => React.JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Heading2: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  numberOfLines,
+  ellipsizeMode,
+  addStyle,
+}: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/heading3/heading3.component.d.ts

@@ -1,3 +1,11 @@
 import React from 'react';
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading3: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => React.JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Heading3: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  numberOfLines,
+  ellipsizeMode,
+}: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/heading4/heading4.component.d.ts

@@ -1,3 +1,11 @@
 import React from 'react';
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading4: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => React.JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Heading4: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  numberOfLines,
+  ellipsizeMode,
+}: TextProperties) => React.JSX.Element;

package/src/components/atoms/heading-components/index.d.ts

@@ -1,6 +1,6 @@
-import { Heading1 } from './heading1/heading1.component';
-import { Heading2 } from './heading2/heading2.component';
-import { Heading3 } from './heading3/heading3.component';
-import { Heading4 } from './heading4/heading4.component';
-import { AllCapsHeading } from './all-caps-heading/all-caps-heading.component';
-export { AllCapsHeading, Heading1, Heading2, Heading3, Heading4 };
+import {Heading1} from './heading1/heading1.component';
+import {Heading2} from './heading2/heading2.component';
+import {Heading3} from './heading3/heading3.component';
+import {Heading4} from './heading4/heading4.component';
+import {AllCapsHeading} from './all-caps-heading/all-caps-heading.component';
+export {AllCapsHeading, Heading1, Heading2, Heading3, Heading4};

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

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

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

@@ -1,8 +1,12 @@
 import React from 'react';
 type IncrementInputProps = {
-    value: number;
-    maxValue?: number;
-    onPress: (number: number) => void;
+  value: number;
+  maxValue?: number;
+  onPress: (number: number) => void;
 };
-export declare const IncrementInput: ({ value, onPress, maxValue, }: IncrementInputProps) => React.JSX.Element;
+export declare const IncrementInput: ({
+  value,
+  onPress,
+  maxValue,
+}: IncrementInputProps) => React.JSX.Element;
 export {};

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

@@ -1,35 +1,35 @@
 export function Stylesheet(Context: any): {
-    container: {
-        width: "100%";
-        flexDirection: "row";
-        alignItems: "center";
-    };
-    buttonContainer: {
-        width: number;
-        height: number;
-        backgroundColor: any;
-        alignItems: "center";
-        justifyContent: "center";
-        borderRadius: number;
-    };
-    numberContainer: {
-        width: number;
-        height: number;
-        display: "flex";
-        justifyContent: "center";
-        alignItems: "center";
-        marginRight: number;
-        marginLeft: number;
-        backgroundColor: any;
-        borderWidth: number;
-        borderStyle: "solid";
-        borderColor: any;
-        borderRadius: number;
-    };
-    number: {
-        textAlignVertical: "center";
-        justifyContent: "center";
-        alignItems: "center";
-        display: "flex";
-    };
+  container: {
+    width: '100%';
+    flexDirection: 'row';
+    alignItems: 'center';
+  };
+  buttonContainer: {
+    width: number;
+    height: number;
+    backgroundColor: any;
+    alignItems: 'center';
+    justifyContent: 'center';
+    borderRadius: number;
+  };
+  numberContainer: {
+    width: number;
+    height: number;
+    display: 'flex';
+    justifyContent: 'center';
+    alignItems: 'center';
+    marginRight: number;
+    marginLeft: number;
+    backgroundColor: any;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderColor: any;
+    borderRadius: number;
+  };
+  number: {
+    textAlignVertical: 'center';
+    justifyContent: 'center';
+    alignItems: 'center';
+    display: 'flex';
+  };
 };

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

@@ -1,9 +1,13 @@
 import * as React from 'react';
 type Orientation = 'horizontal' | 'vertical';
 interface LineProps {
-    color?: string;
-    thickness?: number;
-    orientation?: Orientation;
+  color?: string;
+  thickness?: number;
+  orientation?: Orientation;
 }
-export declare const Line: ({ color, thickness, orientation, }: LineProps) => React.JSX.Element;
+export declare const Line: ({
+  color,
+  thickness,
+  orientation,
+}: LineProps) => React.JSX.Element;
 export {};