@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

@@ -1,127 +0,0 @@
-import React, {Children, useContext, useEffect, useMemo, useState} from 'react';
-import {Animated, Dimensions, Platform, StatusBar, View} from 'react-native';
-import {Backdrop} from '../../atoms/backdrop/backdrop.component';
-import {Stylesheet} from './popover-action.styles';
-import {Swipe} from '../../molecules/swipe/swipe.component';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Foreground} from '../popover/components';
-
-type PopOverActionProps = {
-  isVisible: boolean;
-  touchBackDrop: (value: boolean) => void;
-  children?: React.ReactNode;
-};
-export const PopOverAction = ({
-  isVisible,
-  children,
-  touchBackDrop,
-}: PopOverActionProps) => {
-
-  const [windowHeight, setWindowHeight] = useState(
-    Dimensions.get('window').height
-  );
-  const [elementSize, setElementSize] = useState({width: 0, height: 0});
-  const [currentChildIndex, setCurrentChildIndex] = useState(0);
-  const [childDimensions, setChildDimensions] = useState<any[]>([]);
-
-  const handleChildLayout = (index: number, layout: any) => {
-    const updatedDimensions = [...childDimensions];
-    updatedDimensions[index] = layout;
-
-    setChildDimensions(updatedDimensions);
-  };
-
-  const renderChildren = Children.map(children, (child, index) => {
-    return child
-      ? React.cloneElement(child as React.ReactElement, {
-          onLayout: (event: any) =>
-            handleChildLayout(index, event.nativeEvent.layout),
-        })
-      : null;
-  });
-
-  const handleChildIndexChange = (index: number) => {
-    setCurrentChildIndex(index);
-
-    const childDimension = childDimensions[index];
-    if (childDimension) {
-      const {width, height} = childDimension;
-      setElementSize({width: width, height: height});
-    }
-  };
-
-  useEffect(() => {
-    const updateWindowHeight = () => {
-      let availableHeight = Dimensions.get('window').height;
-      if (Platform.OS === 'android') {
-        availableHeight += StatusBar.currentHeight ?? 0;
-      }
-      setWindowHeight(availableHeight);
-    };
-
-    updateWindowHeight();
-
-    const subscription = Dimensions.addEventListener(
-      'change',
-      updateWindowHeight
-    );
-
-    return () => subscription?.remove();
-  }, []);
-
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-
-  const elementHeight = Math.round(elementSize.height);
-  const maxHeight = Math.round(windowHeight / 100) * 80;
-  const translateYStartingPoint = windowHeight;
-  const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
-
-  const translateY = useMemo(
-    () => new Animated.Value(translateYStartingPoint),
-    [translateYStartingPoint]
-  );
-
-  const open = () => {
-    Animated.timing(translateY, {
-      toValue: translateYStartingPoint - saveHeight,
-      duration: 500,
-      useNativeDriver: true,
-    }).start();
-  };
-
-  const close = () => {
-    Animated.timing(translateY, {
-      toValue: translateYStartingPoint,
-      duration: 500,
-      useNativeDriver: true,
-    }).start();
-  };
-
-  if (isVisible) {
-    open();
-  } else {
-    close();
-  }
-
-  const transform = [{translateY: translateY}];
-
-  return (
-    <View
-      style={styles.element}
-      pointerEvents={isVisible ? 'box-none' : 'none'}
-    >
-      <Backdrop isVisible={isVisible} touchBackDrop={touchBackDrop} />
-
-      <Animated.View
-        style={[
-          styles.slidePanelContainer,
-          {maxHeight: maxHeight},
-          {transform: transform},
-        ]}
-      >
-        <Swipe onIndexChange={handleChildIndexChange}>{renderChildren}</Swipe>
-      </Animated.View>
-    </View>
-  );
-};

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const PopOverActionPreview: () => React.JSX.Element;

package/src/components/templates/popover-action/popover-action.preview.tsx

@@ -1,142 +0,0 @@
-import React, {useState} from 'react';
-import {View} from 'react-native';
-import {Button} from '../../molecules/button/button.component';
-import {PopOverAction} from './popover-action.component';
-import {Heading2} from '../../atoms/heading-components';
-import {Icon} from '../../../icons/index';
-import {Paragraph} from '../../atoms/paragraph-components';
-import {TimePicker} from '../../molecules/time-picker/time-picker.component';
-
-export const PopOverActionPreview = () => {
-  const [isVisible, setIsVisible] = useState<boolean>(false);
-  const [checkInHours, setCheckInHours] = useState('09');
-  const [checkInMinutes, setCheckInMinutes] = useState('06');
-
-  return (
-    <View style={{width: '100%', height: '100%', zIndex: 10000}}>
-      <View style={{marginTop: 150}}>
-        <Button
-          label={'Open popover action'}
-          onPress={() => setIsVisible(true)}
-        />
-      </View>
-
-      <PopOverAction isVisible={isVisible} touchBackDrop={setIsVisible}>
-        {/*FIRST CHILD*/}
-        <View
-          style={{
-            alignItems: 'center',
-            gap: 60,
-            height: 460,
-          }}
-          key={1}
-        >
-          <View style={{gap: 10}}>
-            <Heading2 bold={true} textAlign={'center'}>
-              Uurregistratie
-            </Heading2>
-
-            <View
-              style={{
-                flexDirection: 'row',
-                gap: 16,
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Icon style={'regular'} name={'calendar'} color={'#000000'} />
-              <View>
-                <Paragraph>17 Jan 2021</Paragraph>
-              </View>
-            </View>
-          </View>
-          <TimePicker
-            initialHours={checkInHours}
-            initialMinutes={checkInMinutes}
-            onChangeHours={setCheckInHours}
-            onChangeMinutes={setCheckInMinutes}
-          />
-        </View>
-
-        {/*SECOND CHILD*/}
-
-        <View
-          style={{
-            alignItems: 'center',
-            gap: 60,
-            height: 400,
-          }}
-          key={2}
-        >
-          <View style={{gap: 12}}>
-            <Heading2 bold={true} textAlign={'center'}>
-              Uurregistratie
-            </Heading2>
-
-            <View
-              style={{
-                flexDirection: 'row',
-                gap: 16,
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Icon style={'regular'} name={'calendar'} color={'#000000'} />
-              <View>
-                <Paragraph>17 Jan 2021</Paragraph>
-              </View>
-            </View>
-          </View>
-
-          <TimePicker
-            initialHours={checkInHours}
-            initialMinutes={checkInMinutes}
-            onChangeHours={setCheckInHours}
-            onChangeMinutes={setCheckInMinutes}
-          />
-
-          <Button
-            label={'Test button'}
-            onPress={() => console.log('pressed')}
-          />
-        </View>
-
-        {/*Third CHILD*/}
-
-        <View
-          style={{
-            alignItems: 'center',
-            gap: 60,
-            height: 600,
-          }}
-          key={3}
-        >
-          <View style={{gap: 12}}>
-            <Heading2 bold={true} textAlign={'center'}>
-              Uurregistratie
-            </Heading2>
-
-            <View
-              style={{
-                flexDirection: 'row',
-                gap: 16,
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Icon style={'regular'} name={'calendar'} color={'#000000'} />
-              <View>
-                <Paragraph>17 Jan 2021</Paragraph>
-              </View>
-            </View>
-          </View>
-
-          <Button
-            label={'Test button'}
-            onPress={() => console.log('pressed')}
-          />
-        </View>
-      </PopOverAction>
-    </View>
-  );
-};

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

@@ -1,28 +0,0 @@
-export function Stylesheet(context: any): {
-  element: {
-    width: '100%';
-    height: '100%';
-    position: 'absolute';
-    left: number;
-    top: number;
-    zIndex: number;
-    alignItems: 'center';
-  };
-  slidePanelContainer: {
-    position: 'relative';
-    display: 'flex';
-    flex: number;
-    width: '90%';
-    maxWidth: number;
-    alignSelf: 'center';
-    alignItems: 'stretch';
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-    borderTopLeftRadius: number;
-    borderTopRightRadius: number;
-    zIndex: number;
-    backgroundColor: any;
-  };
-};

package/src/components/templates/popover-action/popover-action.styles.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale/index';
-
-export const Stylesheet = (context) =>
-  StyleSheet.create({
-    element: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      zIndex: 1000,
-      alignItems: 'center',
-    },
-    slidePanelContainer: {
-      position: 'relative',
-      display: 'flex',
-      flex: 1,
-      width: '90%',
-      maxWidth: 768,
-      alignSelf: 'center',
-      alignItems: 'stretch',
-      paddingLeft: Scale.m,
-      paddingTop: Scale.xl,
-      paddingRight: Scale.m,
-      paddingBottom: Scale.m,
-      borderTopLeftRadius: Scale.l,
-      borderTopRightRadius: Scale.l,
-      zIndex: 1004,
-      backgroundColor: context.colors.ui.white,
-    },
-  });

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

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

package/src/context/loading-dots.context.tsx

@@ -1,33 +0,0 @@
-import React, {createContext, ReactNode, useContext, useState} from 'react';
-import {LoadingDotsProps} from '../types/loading-dots.type';
-
-const defaultState = {
-  animation: 'pulse',
-  dots: 3,
-  color: 'black',
-  size: 10,
-  spacing: 2,
-};
-
-const LoadingDotContext = createContext<LoadingDotsProps>(defaultState);
-
-const useLoadingContext = () => {
-  const context = useContext(LoadingDotContext);
-  return context;
-};
-
-const LoadingDotContextProvider = ({
-  children,
-  values,
-}: {
-  children: ReactNode;
-  values: LoadingDotsProps;
-}) => {
-  return (
-    <LoadingDotContext.Provider value={{...values}}>
-      {children}
-    </LoadingDotContext.Provider>
-  );
-};
-
-export {LoadingDotContextProvider, useLoadingContext};

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

@@ -1,74 +0,0 @@
-/// <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;
-        };
-        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: NodeRequire;
-    };
-}
-declare const ThemeCtx: import("react").Context<ThemeInterface>;
-export { ThemeCtx as ThemeCtx };

package/src/context/theme.context.ts

@@ -1,77 +0,0 @@
-import {createContext} from 'react';
-import {StaffMemberTheme} from '../theme/provider';
-
-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;
-    };
-    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: NodeRequire;
-  };
-}
-
-const ThemeCtx = createContext<ThemeInterface>(StaffMemberTheme);
-export {ThemeCtx as ThemeCtx};

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

@@ -1,6 +0,0 @@
-import * as React from 'react';
-type MainGradientProps = {
-    isActive?: boolean;
-};
-export declare const MainGradient: ({ isActive }: MainGradientProps) => React.JSX.Element;
-export {};

package/src/gradients/main/main.gradient.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import {useContext} from 'react';
-import {ThemeCtx} from '../../context/theme.context';
-import {LinearGradient} from 'expo-linear-gradient';
-import {Stylesheet} from './main.styles';
-import {View} from 'react-native';
-
-type MainGradientProps = {
-  isActive?: boolean;
-};
-
-export const MainGradient = ({isActive = true}: MainGradientProps) => {
-  const Context = useContext(ThemeCtx);
-  const styles = Stylesheet();
-
-  return isActive ? (
-    <LinearGradient
-      start={{x: 0.1, y: 0.1}}
-      end={{x: 0.9, y: 0.9}}
-      locations={[0, 0.55, 1]}
-      colors={Context.colors.gradient['0']}
-      style={styles.container}
-    />
-  ) : (
-    <View
-      style={[{backgroundColor: Context.colors.ui.lightgrey}, styles.container]}
-    />
-  );
-};

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

@@ -1,9 +0,0 @@
-export function Stylesheet():
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      container: {
-        width: string;
-        height: string;
-      }[];
-    }>;
-import {StyleSheet} from 'react-native';

package/src/gradients/main/main.styles.js

@@ -1,11 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-export const Stylesheet = () =>
-  StyleSheet.create({
-    container: [
-      {
-        width: '100%',
-        height: '100%',
-      },
-    ],
-  });

package/src/hooks/use-debounce.d.ts

@@ -1 +0,0 @@
-export declare function useDebounce<T>(value: T, delay?: number): T;

package/src/hooks/use-debounce.ts

@@ -1,15 +0,0 @@
-import {useEffect, useState} from 'react';
-
-export function useDebounce<T>(value: T, delay?: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}