@tactics/toddle-styleguide 5.0.4 → 5.0.5

package/src/theme/provider/parent.theme.d.ts

@@ -0,0 +1,71 @@
+export declare const ParentTheme: {
+    colors: {
+        gradient: {
+            1: string[];
+            0: string[];
+        };
+        main: {
+            9: string;
+            8: string;
+            7: string;
+            6: string;
+            5: string;
+            4: string;
+            3: string;
+            2: string;
+            1: string;
+            0: string;
+        };
+        state: {
+            unplanned: {
+                default: string;
+                dark: string;
+            };
+            expected: {
+                default: string;
+                dark: string;
+            };
+            in: {
+                default: string;
+                dark: string;
+            };
+            out: {
+                default: string;
+                dark: string;
+            };
+            absent: {
+                default: string;
+                dark: string;
+            };
+        };
+        ui: {
+            black: string;
+            white: string;
+            xlightgrey: string;
+            lightgrey: string;
+            grey: string;
+            darkgrey: string;
+            success: {
+                xlight: string;
+                light: string;
+                default: string;
+                dark: string;
+            };
+            warning: {
+                xlight: string;
+                light: string;
+                default: string;
+                dark: string;
+            };
+            error: {
+                xlight: string;
+                light: string;
+                default: string;
+                dark: string;
+            };
+        };
+    };
+    wave: {
+        path: any;
+    };
+};

package/src/theme/provider/parent.theme.ts

@@ -0,0 +1,73 @@
+import {Colors} from '@tactics/kinderopvang-branding';
+
+export const ParentTheme = {
+  colors: {
+    gradient: {
+      1: [Colors.primary[2], Colors.primary[5], Colors.primary[5]],
+      0: [Colors.primary[1], Colors.primary[5], Colors.primary[9]],
+    },
+    main: {
+      9: Colors.primary[9],
+      8: Colors.primary[8],
+      7: Colors.primary[7],
+      6: Colors.primary[6],
+      5: Colors.primary[5],
+      4: Colors.primary[4],
+      3: Colors.primary[3],
+      2: Colors.primary[2],
+      1: Colors.primary[1],
+      0: Colors.primary[0],
+    },
+    state: {
+      unplanned: {
+        default: Colors.secondary['2'],
+        dark: Colors.secondary['0'],
+      },
+      expected: {
+        default: Colors.ui.warning.default,
+        dark: Colors.ui.warning.dark,
+      },
+      in: {
+        default: Colors.primary['4'],
+        dark: Colors.primary['2'],
+      },
+      out: {
+        default: Colors.ui.success.default,
+        dark: Colors.ui.success.dark,
+      },
+      absent: {
+        default: Colors.ui.error.default,
+        dark: Colors.ui.error.dark,
+      },
+    },
+    ui: {
+      black: Colors.ui.black,
+      white: Colors.ui.white,
+      xlightgrey: Colors.ui.xlightgrey,
+      lightgrey: Colors.ui.lightgrey,
+      grey: Colors.ui.grey,
+      darkgrey: Colors.ui.darkgrey,
+      success: {
+        xlight: Colors.ui.success.xlight,
+        light: Colors.ui.success.light,
+        default: Colors.ui.success.default,
+        dark: Colors.ui.success.dark,
+      },
+      warning: {
+        xlight: Colors.ui.warning.xlight,
+        light: Colors.ui.warning.light,
+        default: Colors.ui.warning.default,
+        dark: Colors.ui.warning.dark,
+      },
+      error: {
+        xlight: Colors.ui.error.xlight,
+        light: Colors.ui.error.light,
+        default: Colors.ui.error.default,
+        dark: Colors.ui.error.dark,
+      },
+    },
+  },
+  wave: {
+    path: require('../../../assets/lottie/wave-for-parents.json'),
+  },
+};

package/src/theme/provider/staff-member.theme.d.ts

@@ -0,0 +1,71 @@
+export declare const StaffMemberTheme: {
+    colors: {
+        gradient: {
+            1: string[];
+            0: string[];
+        };
+        main: {
+            9: string;
+            8: string;
+            7: string;
+            6: string;
+            5: string;
+            4: string;
+            3: string;
+            2: string;
+            1: string;
+            0: string;
+        };
+        state: {
+            unplanned: {
+                default: string;
+                dark: string;
+            };
+            expected: {
+                default: string;
+                dark: string;
+            };
+            in: {
+                default: string;
+                dark: string;
+            };
+            out: {
+                default: string;
+                dark: string;
+            };
+            absent: {
+                default: string;
+                dark: string;
+            };
+        };
+        ui: {
+            black: string;
+            white: string;
+            xlightgrey: string;
+            lightgrey: string;
+            grey: string;
+            darkgrey: string;
+            success: {
+                xlight: string;
+                light: string;
+                default: string;
+                dark: string;
+            };
+            warning: {
+                xlight: string;
+                light: string;
+                default: string;
+                dark: string;
+            };
+            error: {
+                xlight: string;
+                light: string;
+                default: string;
+                dark: string;
+            };
+        };
+    };
+    wave: {
+        path: any;
+    };
+};

package/src/theme/provider/staff-member.theme.ts

@@ -0,0 +1,73 @@
+import {Colors} from '@tactics/kinderopvang-branding';
+
+export const StaffMemberTheme = {
+  colors: {
+    gradient: {
+      1: [Colors.secondary[2], Colors.secondary[5], Colors.secondary[5]],
+      0: [Colors.secondary[2], Colors.secondary[5], Colors.tertiary[4]],
+    },
+    main: {
+      9: Colors.secondary[9],
+      8: Colors.secondary[8],
+      7: Colors.secondary[7],
+      6: Colors.secondary[6],
+      5: Colors.secondary[5],
+      4: Colors.secondary[4],
+      3: Colors.secondary[3],
+      2: Colors.secondary[2],
+      1: Colors.secondary[1],
+      0: Colors.secondary[0],
+    },
+    state: {
+      unplanned: {
+        default: Colors.secondary['2'],
+        dark: Colors.secondary['0'],
+      },
+      expected: {
+        default: Colors.ui.warning.default,
+        dark: Colors.ui.warning.dark,
+      },
+      in: {
+        default: Colors.primary['4'],
+        dark: Colors.primary['2'],
+      },
+      out: {
+        default: Colors.ui.success.default,
+        dark: Colors.ui.success.dark,
+      },
+      absent: {
+        default: Colors.ui.error.default,
+        dark: Colors.ui.error.dark,
+      },
+    },
+    ui: {
+      black: Colors.ui.black,
+      white: Colors.ui.white,
+      xlightgrey: Colors.ui.xlightgrey,
+      lightgrey: Colors.ui.lightgrey,
+      grey: Colors.ui.grey,
+      darkgrey: Colors.ui.darkgrey,
+      success: {
+        xlight: Colors.ui.success.xlight,
+        light: Colors.ui.success.light,
+        default: Colors.ui.success.default,
+        dark: Colors.ui.success.dark,
+      },
+      warning: {
+        xlight: Colors.ui.warning.xlight,
+        light: Colors.ui.warning.light,
+        default: Colors.ui.warning.default,
+        dark: Colors.ui.warning.dark,
+      },
+      error: {
+        xlight: Colors.ui.error.xlight,
+        light: Colors.ui.error.light,
+        default: Colors.ui.error.default,
+        dark: Colors.ui.error.dark,
+      },
+    },
+  },
+  wave: {
+    path: require('../../../assets/lottie/wave-for-daycares.json'),
+  },
+};

package/src/theme/responsive/index.d.ts

@@ -0,0 +1,2 @@
+import { ScaledSize, StyleProp, StyleSheet } from 'react-native';
+export default function CreateResponsiveStyle<T, U extends Partial<T>>(mobileStyles: StyleSheet.NamedStyles<T>, tabletStyles: StyleSheet.NamedStyles<U>): (layout: ScaledSize) => (style: keyof T) => StyleProp<any>;

package/src/theme/responsive/index.ts

@@ -0,0 +1,17 @@
+import {ScaledSize, StyleProp, StyleSheet} from 'react-native';
+
+export default function CreateResponsiveStyle<T, U extends Partial<T>>(
+  mobileStyles: StyleSheet.NamedStyles<T>,
+  tabletStyles: StyleSheet.NamedStyles<U>
+) {
+  const mobile = StyleSheet.create<StyleSheet.NamedStyles<T>>(mobileStyles);
+  const tablet = StyleSheet.create<StyleSheet.NamedStyles<U>>(tabletStyles);
+
+  // Return a function that combines wraps web and mobile styles
+  return (layout: ScaledSize) =>
+    (style: keyof T): StyleProp<any> => {
+      if (layout.width > 768 && tablet.hasOwnProperty(style)) {
+        return [mobile[style], tablet[style]];
+      } else return mobile[style];
+    };
+}

package/src/theme/scale/index.d.ts

@@ -0,0 +1,12 @@
+export declare const Scale: {
+    xxxs: number;
+    xxs: number;
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+    xxxxl: number;
+};

package/src/theme/scale/index.ts

@@ -0,0 +1,14 @@
+const base = 16;
+
+export const Scale = {
+  xxxs: base * 0.125,
+  xxs: base * 0.25,
+  xs: base * 0.5,
+  s: base * 0.75,
+  m: base,
+  l: base * 1.5,
+  xl: base * 2,
+  xxl: base * 3,
+  xxxl: base * 4,
+  xxxxl: base * 6,
+};

package/src/types/bubble-alignment.enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum BubbleAlignment {
+    SENT = "SENT",
+    RECEIVE = "RECEIVE"
+}

package/src/types/bubble-alignment.enum.ts

@@ -0,0 +1,4 @@
+export enum BubbleAlignment {
+  SENT = 'SENT',
+  RECEIVE = 'RECEIVE',
+}

package/src/types/icontype.type.d.ts

@@ -0,0 +1,2 @@
+export type IconStyleType = 'solid' | 'regular';
+export type IconNameType = 'calendar' | 'chat' | 'chat-alt' | 'check-circle' | 'chevron-left' | 'chevron-right' | 'clock' | 'cloud-download' | 'currency-euro' | 'document-text' | 'exclamation' | 'exclamation-circle' | 'eye' | 'eye-off' | 'filter' | 'information-circle' | 'logout' | 'mail' | 'mail-open' | 'menu' | 'minus-sm' | 'office-building' | 'paper-airplane' | 'paper-clip' | 'pencil' | 'phone' | 'plus' | 'plus-sm' | 'qrcode' | 'refresh' | 'search' | 'selector' | 'sm-view-grid-add' | 'status-online' | 'thumb-up' | 'trash' | 'user' | 'user-group' | 'users' | 'xmark' | 'share' | 'photograph';

package/src/types/icontype.type.ts

@@ -0,0 +1,45 @@
+export type IconStyleType = 'solid' | 'regular';
+
+export type IconNameType =
+  | 'calendar'
+  | 'chat'
+  | 'chat-alt'
+  | 'check-circle'
+  | 'chevron-left'
+  | 'chevron-right'
+  | 'clock'
+  | 'cloud-download'
+  | 'currency-euro'
+  | 'document-text'
+  | 'exclamation'
+  | 'exclamation-circle'
+  | 'eye'
+  | 'eye-off'
+  | 'filter'
+  | 'information-circle'
+  | 'logout'
+  | 'mail'
+  | 'mail-open'
+  | 'menu'
+  | 'minus-sm'
+  | 'office-building'
+  | 'paper-airplane'
+  | 'paper-clip'
+  | 'pencil'
+  | 'phone'
+  | 'plus'
+  | 'plus-sm'
+  | 'qrcode'
+  | 'refresh'
+  | 'search'
+  | 'selector'
+  | 'sm-view-grid-add'
+  | 'status-online'
+  | 'thumb-up'
+  | 'trash'
+  | 'user'
+  | 'user-group'
+  | 'users'
+  | 'xmark'
+  | 'share'
+  | 'photograph';

package/src/types/keyboard-types.enum.d.ts

@@ -0,0 +1,9 @@
+export declare enum KeyBoardTypes {
+    DEFAULT = "default",
+    NUMBER_PAD = "number-pad",
+    DECIMAL_PAD = "decimal-pad",
+    NUMERIC = "numeric",
+    EMAIL_ADDRESS = "email-address",
+    PHONE_PAD = "phone-pad",
+    URL = "url"
+}

package/src/types/keyboard-types.enum.ts

@@ -0,0 +1,9 @@
+export enum KeyBoardTypes {
+  DEFAULT = 'default',
+  NUMBER_PAD = 'number-pad',
+  DECIMAL_PAD = 'decimal-pad',
+  NUMERIC = 'numeric',
+  EMAIL_ADDRESS = 'email-address',
+  PHONE_PAD = 'phone-pad',
+  URL = 'url',
+}

package/src/types/loading-dots.type.d.ts

@@ -0,0 +1,8 @@
+export type LoadingDotsProps = {
+    animation?: string;
+    dots?: number;
+    color?: string;
+    size?: number;
+    spacing?: number;
+    delay?: number;
+};

package/src/types/loading-dots.type.ts

@@ -0,0 +1,8 @@
+export type LoadingDotsProps = {
+  animation?: string;
+  dots?: number;
+  color?: string;
+  size?: number;
+  spacing?: number;
+  delay?: number;
+};

package/src/types/size.enum.d.ts

@@ -0,0 +1,5 @@
+export declare enum Size {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}

package/src/types/size.enum.ts

@@ -0,0 +1,5 @@
+export enum Size {
+  SMALL = 'SMALL',
+  MEDIUM = 'MEDIUM',
+  LARGE = 'LARGE',
+}

package/src/types/state.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum State {
+    UNPLANNED = "UNPLANNED",
+    IN = "IN",
+    OUT = "OUT",
+    EXPECTED = "EXPECTED",
+    ABSENT = "ABSENT"
+}

package/src/types/state.enum.ts

@@ -0,0 +1,7 @@
+export enum State {
+  UNPLANNED = 'UNPLANNED',
+  IN = 'IN',
+  OUT = 'OUT',
+  EXPECTED = 'EXPECTED',
+  ABSENT = 'ABSENT',
+}

package/src/types/text-properties.type.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export type TextProperties = {
+    bold?: boolean;
+    textColor?: string;
+    children: React.ReactNode;
+    textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;
+    numberOfLines?: number | undefined;
+    ellipsizeMode?: 'head' | 'tail' | 'middle' | 'clip' | undefined;
+    addStyle?: StyleProp<TextStyle>;
+};

package/src/types/text-properties.type.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import {StyleProp, TextStyle} from 'react-native';
+
+export type TextProperties = {
+  bold?: boolean;
+  textColor?: string;
+  children: React.ReactNode;
+  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;
+  numberOfLines?: number | undefined;
+  ellipsizeMode?: 'head' | 'tail' | 'middle' | 'clip' | undefined;
+  addStyle?: StyleProp<TextStyle>;
+};

package/src/types/timetable-edit.enum.d.ts

@@ -0,0 +1,5 @@
+export declare enum TimetableEditState {
+    IN = "IN",
+    OUT = "OUT",
+    NONE = "NONE"
+}

package/src/types/timetable-edit.enum.ts

@@ -0,0 +1,5 @@
+export enum TimetableEditState {
+  IN = 'IN',
+  OUT = 'OUT',
+  NONE = 'NONE',
+}

package/src/types/visual-state.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum VisualState {
+    DEFAULT = "DEFAULT",
+    SUCCESS = "SUCCESS",
+    WARNING = "WARNING",
+    ERROR = "ERROR",
+    INACTIVE = "INACTIVE"
+}

package/src/types/visual-state.enum.ts

@@ -0,0 +1,7 @@
+export enum VisualState {
+  DEFAULT = 'DEFAULT',
+  SUCCESS = 'SUCCESS',
+  WARNING = 'WARNING',
+  ERROR = 'ERROR',
+  INACTIVE = 'INACTIVE',
+}

package/src/utilities/color-handler/color-handler.d.ts

@@ -0,0 +1,4 @@
+import { VisualState } from '../../types/visual-state.enum';
+import { State } from '../../types/state.enum';
+export declare const TextColorHandler: (visualState: VisualState, selected?: boolean, loading?: boolean) => string;
+export declare const StateTextColorHandler: (visualState: State, selected?: boolean, loading?: boolean) => string;

package/src/utilities/color-handler/color-handler.ts

@@ -0,0 +1,74 @@
+import {VisualState} from '../../types/visual-state.enum';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../context/theme.context';
+import {State} from '../../types/state.enum';
+
+export const TextColorHandler = (
+  visualState: VisualState,
+  selected?: boolean,
+  loading?: boolean
+) => {
+  const context = useContext(ThemeCtx);
+
+  const selectedTextColor = context.colors.ui.white;
+  const defaultTextColor = context.colors.main['0'];
+  const warningTextColor = context.colors.ui.warning.dark;
+  const errorTextColor = context.colors.ui.error.dark;
+  const successTextColor = context.colors.ui.success.dark;
+
+  if (visualState === VisualState.DEFAULT) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    else return selected ? selectedTextColor : defaultTextColor;
+  } else if (visualState === VisualState.WARNING) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : warningTextColor;
+  } else if (visualState === VisualState.ERROR) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : errorTextColor;
+  } else if (visualState === VisualState.SUCCESS) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : successTextColor;
+  } else if (visualState != VisualState.INACTIVE)
+    return context.colors.ui.white;
+};
+
+export const StateTextColorHandler = (
+  visualState: State,
+  selected?: boolean,
+  loading?: boolean
+) => {
+  const context = useContext(ThemeCtx);
+
+  const selectedTextColor = context.colors.ui.white;
+  const unplannedTextColor = context.colors.state.unplanned.dark;
+  const expectedTextColor = context.colors.state.expected.dark;
+  const inTextColor = context.colors.state.in.dark;
+  const outTextColor = context.colors.state.out.dark;
+  const absentTextColor = context.colors.state.absent.dark;
+
+  if (visualState === State.UNPLANNED) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    else return selected ? selectedTextColor : unplannedTextColor;
+  } else if (visualState === State.EXPECTED) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : expectedTextColor;
+  } else if (visualState === State.IN) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : inTextColor;
+  } else if (visualState === State.OUT) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : outTextColor;
+  } else if (visualState === State.ABSENT) {
+    if (selected && loading) return selectedTextColor;
+    if (selected && !loading) return selectedTextColor;
+    return selected ? selectedTextColor : absentTextColor;
+  } else return context.colors.ui.white;
+};

package/src/utilities/toddle-datetime/interfaces/duration.interface.d.ts

@@ -0,0 +1,22 @@
+export interface DurationObjectUnits {
+    years?: number | undefined;
+    quarters?: number | undefined;
+    months?: number | undefined;
+    weeks?: number | undefined;
+    days?: number | undefined;
+    hours?: number | undefined;
+    minutes?: number | undefined;
+    seconds?: number | undefined;
+    milliseconds?: number | undefined;
+}
+export interface DurationLikeObject extends DurationObjectUnits {
+    year?: number | undefined;
+    quarter?: number | undefined;
+    month?: number | undefined;
+    week?: number | undefined;
+    day?: number | undefined;
+    hour?: number | undefined;
+    minute?: number | undefined;
+    second?: number | undefined;
+    millisecond?: number | undefined;
+}

package/src/utilities/toddle-datetime/interfaces/duration.interface.tsx

@@ -0,0 +1,23 @@
+export interface DurationObjectUnits {
+  years?: number | undefined;
+  quarters?: number | undefined;
+  months?: number | undefined;
+  weeks?: number | undefined;
+  days?: number | undefined;
+  hours?: number | undefined;
+  minutes?: number | undefined;
+  seconds?: number | undefined;
+  milliseconds?: number | undefined;
+}
+
+export interface DurationLikeObject extends DurationObjectUnits {
+  year?: number | undefined;
+  quarter?: number | undefined;
+  month?: number | undefined;
+  week?: number | undefined;
+  day?: number | undefined;
+  hour?: number | undefined;
+  minute?: number | undefined;
+  second?: number | undefined;
+  millisecond?: number | undefined;
+}