@tactics/toddle-styleguide 1.2.7 → 1.2.8

package/src/components/organisms/tab-view/tab-view.preview.tsx

@@ -0,0 +1,36 @@
+import {Text, View} from 'react-native';
+import {TabView} from './tab-view.component';
+import {useState} from 'react';
+
+export const TabViewPreview = () => {
+  const tabs = [
+    {value: 'Registration', label: 'Registration'},
+    {value: 'Products', label: 'Products'},
+  ];
+
+  const [tabValue, setTabValue] = useState<string>(tabs[0].value);
+
+  console.log('Active tab: ', tabValue);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'white',
+        padding: 32,
+      }}
+    >
+      <TabView tabItem={tabs} setTabValue={setTabValue}>
+        <View style={{height: 500, alignItems: 'center'}}>
+          <Text>Tab 1</Text>
+        </View>
+        <View style={{height: 500, alignItems: 'center'}}>
+          <Text>Tab 2</Text>
+        </View>
+      </TabView>
+    </View>
+  );
+};

package/src/components/organisms/tab-view/tab-view.styles.d.ts

@@ -0,0 +1,10 @@
+export function Stylesheet(): {
+  rootContainer: {
+    width: string;
+    height: string;
+    gap: number;
+  };
+  swipeContainer: {
+    flex: number;
+  };
+};

package/src/components/organisms/tab-view/tab-view.styles.js

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    rootContainer: {
+      width: '100%',
+      height: '100%',
+      gap: Scale.l,
+    },
+    swipeContainer: {
+      flex: 1,
+    },
+  });

package/src/components/organisms/tab-view/tab-view.test.js

@@ -0,0 +1,37 @@
+import {render} from '@testing-library/react-native';
+import {TabView} from './tab-view.component';
+import {View, Text} from 'react-native';
+
+describe('TabView', () => {
+  it('should render correctly', () => {
+    const tabs = [
+      {
+        value: 'Tab1',
+        label: 'Tab1',
+      },
+      {
+        value: 'Tab2',
+        label: 'Tab2',
+      },
+      {
+        value: 'Tab3',
+        label: 'Tab3',
+      },
+    ];
+
+    const {toJSON} = render(
+      <TabView tabItem={tabs} setTabValue={() => 'Tab2'}>
+        <View>
+          <Text>Tab1</Text>
+        </View>
+        <View>
+          <Text>Tab2</Text>
+        </View>
+        <View>
+          <Text>Tab3</Text>
+        </View>
+      </TabView>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/organisms/text-bubble/text-bubble.component.d.ts

@@ -1,16 +1,26 @@
-import { VisualState } from '../../../types/visual-state.enum';
-import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {VisualState} from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type TextBubbleProps = {
-    id: string;
-    text: string;
-    visualState: VisualState;
-    bubbleAlignment: BubbleAlignment;
-    timestamp: ToddleDateTime;
-    send: boolean;
-    onFail: (id: string) => void;
-    onEdit: (id: string) => void;
-    onDelete: (id: string) => void;
+  id: string;
+  text: string;
+  visualState: VisualState;
+  bubbleAlignment: BubbleAlignment;
+  timestamp: ToddleDateTime;
+  send: boolean;
+  onFail: (id: string) => void;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
 };
-declare const TextBubble: ({ id, text, visualState, bubbleAlignment, timestamp, send, onFail, onEdit, onDelete, }: TextBubbleProps) => JSX.Element;
-export { TextBubble as TextBubble };
+declare const TextBubble: ({
+  id,
+  text,
+  visualState,
+  bubbleAlignment,
+  timestamp,
+  send,
+  onFail,
+  onEdit,
+  onDelete,
+}: TextBubbleProps) => JSX.Element;
+export {TextBubble as TextBubble};

package/src/components/organisms/text-bubble/text-bubble.styles.d.ts

@@ -1,31 +1,45 @@
-export function Stylesheet(context: any, bubbleAlignment: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
-    rootContainer: {
+export function Stylesheet(
+  context: any,
+  bubbleAlignment: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      rootContainer: {
         width: string;
-    }[];
-    textBubbleRootContainer: ({
-        maxWidth: string;
-        minWidth: string;
-        alignSelf?: undefined;
-    } | {
-        alignSelf: string;
-        maxWidth?: undefined;
-        minWidth?: undefined;
-    })[];
-    failedBubbleRootContainer: ({
-        maxWidth: string;
-        minWidth: string;
-        alignSelf?: undefined;
-    } | {
-        alignSelf: string;
-        maxWidth?: undefined;
-        minWidth?: undefined;
-    })[];
-    timestampContainer: ({
-        maxWidth: string;
-        alignSelf?: undefined;
-    } | {
-        alignSelf: string;
-        maxWidth?: undefined;
-    })[];
-}>;
-import { StyleSheet } from "react-native/Libraries/StyleSheet/StyleSheet";
+      }[];
+      textBubbleRootContainer: (
+        | {
+            maxWidth: string;
+            minWidth: string;
+            alignSelf?: undefined;
+          }
+        | {
+            alignSelf: string;
+            maxWidth?: undefined;
+            minWidth?: undefined;
+          }
+      )[];
+      failedBubbleRootContainer: (
+        | {
+            maxWidth: string;
+            minWidth: string;
+            alignSelf?: undefined;
+          }
+        | {
+            alignSelf: string;
+            maxWidth?: undefined;
+            minWidth?: undefined;
+          }
+      )[];
+      timestampContainer: (
+        | {
+            maxWidth: string;
+            alignSelf?: undefined;
+          }
+        | {
+            alignSelf: string;
+            maxWidth?: undefined;
+          }
+      )[];
+    }>;
+import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';

package/src/components/templates/modal/components/fade-panel.component.d.ts

@@ -1,12 +1,20 @@
 import React from 'react';
 type FadePanelProps = {
-    title: string;
-    subtitle?: string;
-    isVisible: boolean;
-    onClose: () => void;
-    maxHeight: number;
-    children: React.ReactNode;
-    scrollable: boolean | undefined;
+  title: string;
+  subtitle?: string;
+  isVisible: boolean;
+  onClose: () => void;
+  maxHeight: number;
+  children: React.ReactNode;
+  scrollable: boolean | undefined;
 };
-export declare const FadePanel: ({ title, subtitle, isVisible, onClose, maxHeight, children, scrollable, }: FadePanelProps) => JSX.Element;
+export declare const FadePanel: ({
+  title,
+  subtitle,
+  isVisible,
+  onClose,
+  maxHeight,
+  children,
+  scrollable,
+}: FadePanelProps) => JSX.Element;
 export {};

package/src/components/templates/modal/modal.component.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
 type ModalProps = {
-    title: string;
-    subtitle?: string;
-    isVisible: boolean;
-    onClose: () => void;
-    children?: React.ReactNode;
-    scrollable?: boolean;
+  title: string;
+  subtitle?: string;
+  isVisible: boolean;
+  onClose: () => void;
+  children?: React.ReactNode;
+  scrollable?: boolean;
 };
-export declare const Modal: ({ title, subtitle, isVisible, onClose, children, scrollable, }: ModalProps) => JSX.Element;
+export declare const Modal: ({
+  title,
+  subtitle,
+  isVisible,
+  onClose,
+  children,
+  scrollable,
+}: ModalProps) => JSX.Element;
 export {};

package/src/components/templates/popover/components/foreground/foreground.component.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Modal } from '../modal/modal.component';
+import {Modal} from '../modal/modal.component';
 type PopoverForegroundProps = {
-    children: React.ReactElement<typeof Modal>;
+  children: React.ReactElement<typeof Modal>;
 };
-declare const Foreground: ({ children }: PopoverForegroundProps) => JSX.Element;
-export { Foreground as Foreground };
+declare const Foreground: ({children}: PopoverForegroundProps) => JSX.Element;
+export {Foreground as Foreground};

package/src/components/templates/popover/components/modal/close/close.component.d.ts

@@ -1,6 +1,6 @@
-import { GestureResponderEvent } from 'react-native';
+import {GestureResponderEvent} from 'react-native';
 type ModalCloseProps = {
-    onPress: (event: GestureResponderEvent) => void;
+  onPress: (event: GestureResponderEvent) => void;
 };
-declare const Close: ({ onPress }: ModalCloseProps) => JSX.Element;
-export { Close as Close };
+declare const Close: ({onPress}: ModalCloseProps) => JSX.Element;
+export {Close as Close};

package/src/components/templates/popover/components/modal/heading/heading.component.d.ts

@@ -1,6 +1,6 @@
 type ModalHeadingProps = {
-    title: string;
-    subtitle?: string;
+  title: string;
+  subtitle?: string;
 };
-declare const Heading: ({ title, subtitle }: ModalHeadingProps) => JSX.Element;
-export { Heading as Heading };
+declare const Heading: ({title, subtitle}: ModalHeadingProps) => JSX.Element;
+export {Heading as Heading};

package/src/components/templates/popover/components/modal/modal.component.d.ts

@@ -1,11 +1,20 @@
 import * as React from 'react';
 type PopoverModalProps = {
-    onClose: () => void;
-    title?: string;
-    subtitle?: string;
-    isVisible: boolean;
-    children: React.ReactNode;
-    windowHeight: number;
+  onClose: () => void;
+  title?: string;
+  subtitle?: string;
+  isVisible: boolean;
+  children: React.ReactNode;
+  windowHeight: number;
+  disableSrollContent?: boolean;
 };
-declare const Modal: ({ isVisible, title, subtitle, onClose, children, windowHeight, }: PopoverModalProps) => JSX.Element;
-export { Modal as Modal };
+declare const Modal: ({
+  isVisible,
+  title,
+  subtitle,
+  onClose,
+  children,
+  windowHeight,
+  disableSrollContent,
+}: PopoverModalProps) => JSX.Element;
+export {Modal as Modal};

package/src/components/templates/popover/components/modal/modal.component.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
-import {Animated} from 'react-native';
+import {Animated, View} from 'react-native';
 import {Stylesheet} from './modal.styles';
 import {Close} from './close/close.component';
 import {Heading} from './heading/heading.component';
@@ -14,6 +14,7 @@ type PopoverModalProps = {
   isVisible: boolean;
   children: React.ReactNode;
   windowHeight: number;
+  disableSrollContent?: boolean;
 };
 
 const Modal = ({
@@ -23,6 +24,7 @@ const Modal = ({
   onClose,
   children,
   windowHeight,
+  disableSrollContent,
 }: PopoverModalProps) => {
   // Keep element and window size in local state.
   const [elementSize, setElementSize] = useState({width: 0, height: 0});
@@ -78,7 +80,11 @@ const Modal = ({
       <Close onPress={onClose} />
       <Animated.View style={styles.inner}>
         {title ? <Heading title={title} subtitle={subtitle} /> : null}
-        <ScrollContent>{children}</ScrollContent>
+        {disableSrollContent ? (
+          <View>{children}</View>
+        ) : (
+          <ScrollContent>{children}</ScrollContent>
+        )}
       </Animated.View>
     </Animated.View>
   );

package/src/components/templates/popover/components/modal/scroll-content/scroll-content.component.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 type ModalScrollContentProps = {
-    children: React.ReactNode;
+  children: React.ReactNode;
 };
-declare const ScrollContent: ({ children }: ModalScrollContentProps) => JSX.Element;
-export { ScrollContent as ScrollContent };
+declare const ScrollContent: ({
+  children,
+}: ModalScrollContentProps) => JSX.Element;
+export {ScrollContent as ScrollContent};

package/src/components/templates/popover/popover.component.d.ts

@@ -1,10 +1,18 @@
 import * as React from 'react';
 type PopoverProps = {
-    onClose: () => void;
-    title?: string;
-    subtitle?: string;
-    isVisible: boolean;
-    children?: React.ReactNode;
+  onClose: () => void;
+  title?: string;
+  subtitle?: string;
+  isVisible: boolean;
+  children?: React.ReactNode;
+  disableScrollContent?: boolean;
 };
-declare const Popover: ({ isVisible, title, subtitle, onClose, children, }: PopoverProps) => JSX.Element;
-export { Popover as Popover };
+declare const Popover: ({
+  isVisible,
+  title,
+  subtitle,
+  onClose,
+  children,
+  disableScrollContent,
+}: PopoverProps) => JSX.Element;
+export {Popover as Popover};

package/src/components/templates/popover/popover.component.tsx

@@ -11,6 +11,7 @@ type PopoverProps = {
   subtitle?: string;
   isVisible: boolean;
   children?: React.ReactNode;
+  disableScrollContent?: boolean;
 };
 
 const Popover = ({
@@ -19,6 +20,7 @@ const Popover = ({
   subtitle,
   onClose,
   children,
+  disableScrollContent,
 }: PopoverProps) => {
   const [windowHeight, setWindowHeight] = useState(
     Dimensions.get('window').height
@@ -55,6 +57,7 @@ const Popover = ({
           onClose={onClose}
           title={title}
           subtitle={subtitle}
+          disableSrollContent={disableScrollContent}
         >
           {children}
         </Modal>

package/src/components/templates/popover-action/popover-action.component.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 type PopOverActionProps = {
-    isVisible: boolean;
-    touchBackDrop: (value: boolean) => void;
-    children?: React.ReactNode;
+  isVisible: boolean;
+  touchBackDrop: (value: boolean) => void;
+  children?: React.ReactNode;
 };
-export declare const PopOverAction: ({ isVisible, children, touchBackDrop, }: PopOverActionProps) => JSX.Element;
+export declare const PopOverAction: ({
+  isVisible,
+  children,
+  touchBackDrop,
+}: PopOverActionProps) => JSX.Element;
 export {};

package/src/context/loading-dots.context.d.ts

@@ -1,8 +1,11 @@
-import { ReactNode } from 'react';
-import { LoadingDotsProps } from '../types/loading-dots.type';
+import {ReactNode} from 'react';
+import {LoadingDotsProps} from '../types/loading-dots.type';
 declare const useLoadingContext: () => LoadingDotsProps;
-declare const LoadingDotContextProvider: ({ children, values, }: {
-    children: ReactNode;
-    values: LoadingDotsProps;
+declare const LoadingDotContextProvider: ({
+  children,
+  values,
+}: {
+  children: ReactNode;
+  values: LoadingDotsProps;
 }) => JSX.Element;
-export { LoadingDotContextProvider, useLoadingContext };
+export {LoadingDotContextProvider, useLoadingContext};

package/src/context/theme.context.d.ts

@@ -1,52 +1,52 @@
 /// <reference types="react" />
 interface ThemeInterface {
-    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;
-        };
-        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;
-            };
-        };
+  colors: {
+    gradient: {
+      1: string[];
+      0: string[];
     };
-    wave: {
-        path: NodeRequire;
+    main: {
+      9: string;
+      8: string;
+      7: string;
+      6: string;
+      5: string;
+      4: string;
+      3: string;
+      2: string;
+      1: string;
+      0: 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: NodeRequire;
+  };
 }
-declare const ThemeCtx: import("react").Context<ThemeInterface>;
-export { ThemeCtx as ThemeCtx };
+declare const ThemeCtx: import('react').Context<ThemeInterface>;
+export {ThemeCtx as ThemeCtx};

package/src/gradients/main/main.gradient.d.ts

@@ -1,5 +1,7 @@
 type MainGradientProps = {
-    isActive?: boolean;
+  isActive?: boolean;
 };
-export declare const MainGradient: ({ isActive }: MainGradientProps) => JSX.Element;
+export declare const MainGradient: ({
+  isActive,
+}: MainGradientProps) => JSX.Element;
 export {};

package/src/icons/index.d.ts

@@ -1,2 +1,7 @@
-import { IconInterface } from '../interfaces/icon.interface';
-export declare const Icon: ({ style, name, size, color }: IconInterface) => JSX.Element;
+import {IconInterface} from '../interfaces/icon.interface';
+export declare const Icon: ({
+  style,
+  name,
+  size,
+  color,
+}: IconInterface) => JSX.Element;

package/src/icons/outline/calendar/calendar.icon.d.ts

@@ -1,2 +1,2 @@
-import { IconSVGProps } from '../../../interfaces/icon.interface';
-export declare const CalendarIcon: ({ color, size }: IconSVGProps) => JSX.Element;
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+export declare const CalendarIcon: ({color, size}: IconSVGProps) => JSX.Element;

package/src/icons/outline/chat/chat.icon.d.ts

@@ -1,2 +1,2 @@
-import { IconSVGProps } from '../../../interfaces/icon.interface';
-export declare const ChatIcon: ({ color, size }: IconSVGProps) => JSX.Element;
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+export declare const ChatIcon: ({color, size}: IconSVGProps) => JSX.Element;

package/src/icons/outline/chat-alt/chat-alt.icon.d.ts

@@ -1,2 +1,2 @@
-import { IconSVGProps } from '../../../interfaces/icon.interface';
-export declare const ChatAltIcon: ({ color, size }: IconSVGProps) => JSX.Element;
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+export declare const ChatAltIcon: ({color, size}: IconSVGProps) => JSX.Element;

package/src/icons/outline/check-circle/check-circle.icon.d.ts

@@ -1,2 +1,5 @@
-import { IconSVGProps } from '../../../interfaces/icon.interface';
-export declare const CheckCircleIcon: ({ color, size }: IconSVGProps) => JSX.Element;
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+export declare const CheckCircleIcon: ({
+  color,
+  size,
+}: IconSVGProps) => JSX.Element;

package/src/icons/outline/chevron-left/chevron-left.icon.d.ts

@@ -1,2 +1,5 @@
-import { IconSVGProps } from '../../../interfaces/icon.interface';
-export declare const ChevronLeftIcon: ({ color, size }: IconSVGProps) => JSX.Element;
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+export declare const ChevronLeftIcon: ({
+  color,
+  size,
+}: IconSVGProps) => JSX.Element;

package/src/icons/outline/chevron-right/chevron-right.icon.d.ts

@@ -1,2 +1,5 @@
-import { IconSVGProps } from '../../../interfaces/icon.interface';
-export declare const ChevronRightIcon: ({ color, size }: IconSVGProps) => JSX.Element;
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+export declare const ChevronRightIcon: ({
+  color,
+  size,
+}: IconSVGProps) => JSX.Element;

package/src/icons/outline/clock/clock.icon.d.ts

@@ -1,2 +1,2 @@
-import { IconSVGProps } from '../../../interfaces/icon.interface';
-export declare const ClockIcon: ({ color, size }: IconSVGProps) => JSX.Element;
+import {IconSVGProps} from '../../../interfaces/icon.interface';
+export declare const ClockIcon: ({color, size}: IconSVGProps) => JSX.Element;