@tactics/toddle-styleguide 0.0.4 → 0.0.6

package/.yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: node-modules

package/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): JSX.Element;
+export default App;

package/{types/index.d.ts → index.d.ts}

@@ -20,4 +20,15 @@ import { TextBubble } from './src/components/atoms/text-bubble/text-bubble.compo
 import { TextInput } from './src/components/atoms/text-input/text-input.component';
 import { TimeTracker } from './src/components/atoms/time-tracker/time-tracker.component';
 import { WideButton } from './src/components/atoms/wide-button/wide-button.component';
-export { Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, FormAction, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton };
+import { Icon } from './src/icons';
+import { Calendar } from './src/components/atoms/calendar/calendar.component';
+import { IncrementInput } from './src/components/atoms/increment-input/increment-input.component';
+import { Swipe } from './src/components/atoms/swipe/swipe.component';
+import { Logo } from './src/components/atoms/logo/logo.component';
+import { BubbleAlignment } from "./src/types/bubble-alignment.enum";
+import { KeyBoardTypes } from "./src/types/keyboard-types.enum";
+import { Size } from "./src/types/size.enum";
+import { VisualState } from "./src/types/visual-state.enum";
+import { Initials } from "./src/models/initials.model";
+import { ThemeCtx } from "./src/context/theme.context";
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, VisualState, ThemeCtx, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, FormAction, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, };

package/index.tsx

@@ -33,7 +33,25 @@ import {IncrementInput} from './src/components/atoms/increment-input/increment-i
 import {Swipe} from './src/components/atoms/swipe/swipe.component';
 import {Logo} from './src/components/atoms/logo/logo.component';
 
+// Exports of enums
+import {BubbleAlignment} from "./src/types/bubble-alignment.enum";
+import {KeyBoardTypes} from "./src/types/keyboard-types.enum";
+import {Size} from "./src/types/size.enum";
+import {VisualState} from "./src/types/visual-state.enum";
+
+// Exports of models
+import {Initials} from "./src/models/initials.model";
+
+// Exports of context
+import {ThemeCtx} from "./src/context/theme.context";
+
 export {
+  Initials,
+  BubbleAlignment,
+  KeyBoardTypes,
+  Size,
+  VisualState,
+  ThemeCtx,
   Avatar,
   Button,
   CancelLink,

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "index.tsx",
-  "types": "types/index.d.ts",
+  "types": "index.d.ts",
+  "prepublish": "tsc",
   "scripts": {
-    "expo": "node_modules/.bin/expo",
-    "start": "node_modules/.bin/tsc && node_modules/.bin/expo start",
-    "android": "node_modules/.bin/tsc && node_modules/.bin/expo start --android",
-    "ios": "node_modules/.bin/tsc && node_modules/.bin/expo start --ios",
-    "web": "node_modules/.bin/tsc && node_modules/.bin/expo start --web",
-    "test": "node_modules/.bin/jest",
-    "format": "yarn prettier --write src/.",
-    "types": "node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --jsx react-native --outDir types --skipLibCheck"
+    "expo": "./node_modules/.bin/tsc && ./node_modules/.bin/expo",
+    "start": "./node_modules/.bin/tsc && node_modules/.bin/expo start",
+    "test": "./node_modules/.bin/jest",
+    "format": "./node_modules/.bin/prettier --write src/.",
+    "types": "./node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --esModuleInterop --jsx react-native --skipLibCheck"
+  },
+  "engines": {
+    "npm": "please-use-yarn",
+    "yarn": ">= 3.2.4"
   },
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
@@ -21,7 +23,7 @@
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.1",
     "@react-navigation/stack": "^6.3.3",
-    "@tactics/kinderopvang-branding": "^1.0.1",
+    "@tactics/kinderopvang-branding": "1.0.3",
     "@types/xdate": "^0.8.32",
     "expo": "~46.0.16",
     "expo-font": "^10.2.1",

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { Size } from '../../../types/size.enum';
+import { Initials } from '../../../models/initials.model';
+declare type AvatarProps = {
+    source: ImageSourcePropType | Initials;
+    size: Size;
+    isBlocked?: boolean;
+};
+declare const Avatar: React.FC<AvatarProps>;
+export { Avatar as Avatar };

package/src/components/atoms/avatar/avatar.preview.d.ts

@@ -0,0 +1 @@
+export declare const AvatarPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,48 @@
+export function Stylesheet(
+  Context: any,
+  size: any,
+  isBlocked: 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;
+          }
+      )[];
+      image: {
+        position: string;
+        width: string;
+        height: string;
+        borderRadius: number;
+      }[];
+      text: (
+        | {
+            color: any;
+            textTransform: string;
+          }
+        | {
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+            color?: undefined;
+            textTransform?: undefined;
+          }
+      )[];
+    }>;
+import {StyleSheet} from 'react-native';

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

@@ -0,0 +1,8 @@
+declare type ButtonProps = {
+    label: string;
+    icon?: any;
+    disabled?: boolean;
+    onPress?: () => void;
+};
+declare const Button: ({ label, icon, disabled, onPress }: ButtonProps) => JSX.Element;
+export { Button as Button };

package/src/components/atoms/button/button.preview.d.ts

@@ -0,0 +1 @@
+export declare const ButtonPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,23 @@
+export function Stylesheet(
+  context: any,
+  disabled: any
+): {
+  container: {
+    backgroundColor: any;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    flexDirection: 'row';
+    justifyContent: 'center';
+    alignItems: 'center';
+    borderRadius: number;
+  };
+  label: {
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  iconGap: {
+    marginRight: number;
+  };
+};

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

@@ -0,0 +1,8 @@
+declare type CalendarProps = {
+    onDayPress: (day: string) => void;
+    selected: string;
+    minDate?: string;
+    maxDate?: string;
+};
+export declare const Calendar: ({ onDayPress, selected, minDate, maxDate, }: CalendarProps) => JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export declare const CalendarPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,81 @@
+export function Stylesheet(context: any): {
+  custom: {
+    backgroundColor: any;
+    'stylesheet.calendar.header': {
+      headerContainer: {
+        height: number;
+        flexDirection: string;
+        justifyContent: string;
+        alignItems: string;
+        backgroundColor: any;
+        borderRadius: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+      };
+      monthText: {
+        fontSize: number;
+        fontFamily: string;
+        lineHeight: number;
+        color: any;
+        margin: number;
+      };
+      week: {
+        marginTop: number;
+        flexDirection: string;
+        justifyContent: string;
+      };
+      dayHeader: {
+        marginBottom: number;
+        width: number;
+        textAlign: string;
+        fontSize: number;
+        fontFamily: string;
+        lineHeight: number;
+        color: any;
+      };
+      disabledDayHeader: {
+        color: any;
+      };
+    };
+    'stylesheet.day.basic': {
+      container: {
+        alignSelf: string;
+        alignItems: string;
+      };
+      base: {
+        width: number;
+        height: number;
+        alignItems: string;
+        justifyContent: string;
+      };
+      text: {
+        marginTop: number;
+        fontSize: number;
+        fontFamily: string;
+        lineHeight: number;
+        color: any;
+      };
+      selected: {
+        backgroundColor: any;
+        borderRadius: number;
+      };
+      today: {
+        borderWidth: number;
+        borderStyle: string;
+        borderColor: any;
+        borderRadius: number;
+      };
+      todayText: {
+        color: any;
+      };
+      selectedText: {
+        color: any;
+      };
+      disabledText: {
+        color: any;
+      };
+    };
+  };
+};

package/src/components/atoms/cancel-link/cancel-link.component.d.ts

@@ -0,0 +1,6 @@
+declare type CancelLinkProps = {
+    label: string;
+    onPress: () => void;
+};
+declare const CancelLink: ({ label, onPress }: CancelLinkProps) => JSX.Element;
+export { CancelLink as CancelLink };

package/src/components/atoms/cancel-link/cancel-link.preview.d.ts

@@ -0,0 +1 @@
+export declare const CancelLinkPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/cancel-link/cancel-link.styles.d.ts

@@ -0,0 +1,17 @@
+export function Stylesheet(context: any): {
+  container: {
+    backgroundColor: string;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    flexDirection: 'row';
+    justifyContent: 'center';
+    alignItems: 'center';
+    borderRadius: number;
+  };
+  label: {
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+};

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

@@ -0,0 +1,6 @@
+declare type CheckProps = {
+    value: boolean;
+    onToggle: () => void;
+};
+export declare const Check: ({ value, onToggle }: CheckProps) => JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export declare const CheckPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,33 @@
+export function Stylesheet(
+  context: any,
+  value: any
+): {
+  container: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    justifyContent: 'center';
+  };
+  toggleContainer: {
+    width: number;
+    height: number;
+    paddingLeft: number;
+    paddingRight: number;
+    borderRadius: number;
+    backgroundColor: any;
+    justifyContent: 'center';
+  };
+  thumbStyle: {
+    width: number;
+    height: number;
+    backgroundColor: any;
+    borderRadius: number;
+    shadowColor: any;
+    shadowOpacity: number;
+    shadowOffset: {
+      width: number;
+      height: number;
+    };
+    shadowRadius: number;
+    elevation: number;
+  };
+};

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

@@ -0,0 +1,7 @@
+declare type CheckboxProps = {
+    value: boolean;
+    onValueChange: () => void;
+    label: string;
+};
+declare const Checkbox: ({ value, onValueChange, label }: CheckboxProps) => JSX.Element;
+export { Checkbox as Checkbox };

package/src/components/atoms/checkbox/checkbox.preview.d.ts

@@ -0,0 +1 @@
+export declare const CheckboxPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,32 @@
+export function Stylesheet(context: any): {
+  element: {
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    flexDirection: 'row';
+    justifyContent: 'center';
+    alignItems: 'center';
+  };
+  input: {
+    width: number;
+    height: number;
+    backgroundColor: any;
+    borderRadius: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+    marginRight: number;
+  };
+  check: {
+    width: number;
+    height: number;
+    backgroundColor: any;
+    borderRadius: number;
+  };
+  label: {
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+};

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

@@ -0,0 +1,18 @@
+import { ImageSourcePropType } from 'react-native';
+import { Initials } from '../../../models/initials.model';
+import { VisualState } from '../../../types/visual-state.enum';
+declare type ChildListItemProps = {
+    id: string;
+    name: string;
+    label: string;
+    selectable: boolean;
+    isSelected: boolean;
+    onPressArrow: () => void;
+    onPressText: () => void;
+    onSelect: (id: string) => void;
+    sourceAvatar: ImageSourcePropType | Initials;
+    textTimeTracker: string;
+    visualStateTimeTracker: VisualState;
+};
+declare const ChildListItem: ({ id, name, label, selectable, isSelected, onPressArrow, onPressText, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element;
+export { ChildListItem as ChildListItem };

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

@@ -0,0 +1 @@
+export declare const ChildListItemPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,78 @@
+export function Stylesheet(
+  isSelectedItem: any,
+  context: any,
+  selectable: any,
+  visualStateTimeTracker: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: {
+        width: string;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+        overflow: 'hidden';
+        flexDirection: 'row';
+        backgroundColor: any;
+      };
+      selectableContainer: {};
+      innerContainer: {
+        flex: number;
+        flexDirection: 'row';
+        alignItems: 'center';
+        padding: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+      };
+      pressableText: {
+        marginLeft: number;
+        flex: number;
+        marginRight: number;
+      };
+      iconContainer: {
+        alignItems: 'center';
+        justifyContent: 'center';
+      };
+      textName: {
+        color: any;
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+      };
+      textLabel: {
+        color: any;
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+      };
+      trackerContainer: {
+        flexDirection: 'row';
+        alignItems: 'center';
+      };
+      bal: (
+        | {
+            width: number;
+            height: number;
+            borderRadius: number;
+            marginRight: number;
+            backgroundColor?: undefined;
+          }
+        | {
+            backgroundColor: any;
+            width?: undefined;
+            height?: undefined;
+            borderRadius?: undefined;
+            marginRight?: undefined;
+          }
+      )[];
+      textTracker: {
+        color: any;
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+      };
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/atoms/contact-item/contact-item.component.d.ts

@@ -0,0 +1,9 @@
+declare type ContactItemProps = {
+    name: string;
+    firstname: string;
+    label: string;
+    onPress?: () => void;
+    isBlocked?: boolean;
+};
+declare const ContactItem: ({ name, firstname, label, onPress, isBlocked, }: ContactItemProps) => JSX.Element;
+export { ContactItem as ContactItem };

package/src/components/atoms/contact-item/contact-item.preview.d.ts

@@ -0,0 +1 @@
+export declare const ContactItemPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/contact-item/contact-item.styles.d.ts

@@ -0,0 +1,24 @@
+export function Stylesheet(Context: any): {
+  container: {
+    width: string;
+    flexDirection: 'row';
+    alignItems: 'center';
+  };
+  textContainer: {
+    flex: number;
+    marginLeft: number;
+  };
+  textNames: {
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  textSubtitle: {
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  iconSquare: {
+    marginLeft: number;
+  };
+};

package/src/components/atoms/filter-tab/filter-tab.component.d.ts

@@ -0,0 +1,8 @@
+declare type FilterTab = {
+    tabItem: {
+        value: string;
+        label: string;
+    }[];
+};
+export declare const FilterTab: ({ tabItem }: FilterTab) => JSX.Element;
+export {};

package/src/components/atoms/filter-tab/filter-tab.preview.d.ts

@@ -0,0 +1 @@
+export declare const FilterTabPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/filter-tab/filter-tab.styles.d.ts

@@ -0,0 +1,66 @@
+export function Stylesheet(
+  Context: any,
+  inRow: any,
+  ElementWidth: any,
+  ItemWidth: any
+): {
+  container: {
+    width: string;
+    display: 'flex';
+    paddingRight: number;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    borderRadius: number;
+    backgroundColor: any;
+  };
+  inner: {
+    display: 'flex';
+    width: string;
+  };
+  tabs: {
+    display: 'flex';
+    flexDirection: 'row' | 'column';
+    width: string;
+    position: 'relative';
+  };
+  tab: {
+    width: any;
+    paddingRight: number;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    borderRadius: number;
+    alignItems: 'center';
+    backgroundColor: string;
+  };
+  slidingTab: {
+    width: any;
+    paddingRight: number;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    borderRadius: number;
+    zIndex: number;
+    position: 'absolute';
+    backgroundColor: any;
+  };
+  textHidden: {
+    opacity: number;
+  };
+  text: {
+    width: string;
+    textAlign: 'center';
+    color: any;
+    maxHeight: number;
+    overflow: 'hidden';
+    whiteSpace: string;
+    textOverflow: string;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  tabTextActive: {
+    color: any;
+  };
+};

package/src/components/atoms/form-actions/form-action.component.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare type formActionProps = {
+    button: React.ReactNode;
+    cancel?: React.ReactNode;
+};
+declare const FormAction: ({ button, cancel }: formActionProps) => JSX.Element;
+export { FormAction as FormAction };

package/src/components/atoms/form-actions/form-action.preview.d.ts

@@ -0,0 +1 @@
+export declare const FormActionPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/form-actions/form-action.styles.d.ts

@@ -0,0 +1,14 @@
+export function Stylesheet(context: any): {
+  element: {
+    width: string;
+    paddingRight: number;
+    paddingLeft: number;
+  };
+  inner: {
+    flexDirection: 'row';
+    justifyContent: 'center';
+  };
+  cancel: {
+    justifyContent: 'space-between';
+  };
+};

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

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

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

@@ -0,0 +1 @@
+export declare const ImageBubblePreview: ({}: {}) => JSX.Element;