@tactics/toddle-styleguide 5.0.1 → 5.0.2

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

@@ -1,71 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

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

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

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

@@ -1,2 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

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

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

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

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

package/src/types/size.enum.ts

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

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

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

package/src/types/state.enum.ts

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

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

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

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

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

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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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