@tactics/toddle-styleguide 2.0.3 → 3.0.0

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

@@ -1,421 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TabView should render correctly 1`] = `
-<View
-  style={
-    {
-      "gap": 24,
-      "height": "100%",
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      {
-        "backgroundColor": "#E5E8EB",
-        "borderRadius": 16,
-        "display": "flex",
-        "paddingBottom": 4,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 4,
-        "width": "100%",
-      }
-    }
-  >
-    <View
-      onLayout={[Function]}
-      style={
-        {
-          "display": "flex",
-          "width": "100%",
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "alignItems": "stretch",
-            "display": "flex",
-            "flexDirection": "column",
-            "position": "relative",
-            "width": "100%",
-          }
-        }
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
-              "borderRadius": 16,
-              "paddingBottom": 8,
-              "paddingLeft": 16,
-              "paddingRight": 16,
-              "paddingTop": 8,
-              "width": 0,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                [
-                  {
-                    "fontFamily": "SourceSansPro",
-                    "fontSize": 16,
-                    "lineHeight": 22.4,
-                  },
-                ],
-                {
-                  "color": "#FFFFFF",
-                  "textAlign": "center",
-                  "width": "100%",
-                },
-                {
-                  "maxHeight": 32,
-                  "overflow": "hidden",
-                  "width": "100%",
-                },
-              ]
-            }
-          >
-            Tab1
-          </Text>
-        </View>
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
-              "borderRadius": 16,
-              "paddingBottom": 8,
-              "paddingLeft": 16,
-              "paddingRight": 16,
-              "paddingTop": 8,
-              "width": 0,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                [
-                  {
-                    "fontFamily": "SourceSansPro",
-                    "fontSize": 16,
-                    "lineHeight": 22.4,
-                  },
-                ],
-                {
-                  "color": "#19216C",
-                  "textAlign": "center",
-                  "width": "100%",
-                },
-                {
-                  "maxHeight": 32,
-                  "overflow": "hidden",
-                  "width": "100%",
-                },
-              ]
-            }
-          >
-            Tab2
-          </Text>
-        </View>
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
-              "borderRadius": 16,
-              "paddingBottom": 8,
-              "paddingLeft": 16,
-              "paddingRight": 16,
-              "paddingTop": 8,
-              "width": 0,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                [
-                  {
-                    "fontFamily": "SourceSansPro",
-                    "fontSize": 16,
-                    "lineHeight": 22.4,
-                  },
-                ],
-                {
-                  "color": "#19216C",
-                  "textAlign": "center",
-                  "width": "100%",
-                },
-                {
-                  "maxHeight": 32,
-                  "overflow": "hidden",
-                  "width": "100%",
-                },
-              ]
-            }
-          >
-            Tab3
-          </Text>
-        </View>
-        <View
-          collapsable={false}
-          style={
-            {
-              "alignItems": "center",
-              "backgroundColor": "#647ACB",
-              "borderRadius": 12,
-              "marginTop": 3,
-              "maxHeight": 32,
-              "paddingBottom": 8,
-              "paddingLeft": 16,
-              "paddingRight": 16,
-              "paddingTop": 8,
-              "position": "absolute",
-              "transform": [
-                {
-                  "translateY": 0,
-                },
-              ],
-              "width": 0,
-              "zIndex": -1,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                [
-                  {
-                    "fontFamily": "SourceSansPro",
-                    "fontSize": 16,
-                    "lineHeight": 22.4,
-                  },
-                ],
-                {
-                  "color": "#19216C",
-                  "textAlign": undefined,
-                  "width": "100%",
-                },
-                [
-                  {
-                    "maxHeight": 32,
-                    "overflow": "hidden",
-                    "width": "100%",
-                  },
-                  {
-                    "opacity": 0,
-                  },
-                ],
-              ]
-            }
-          >
-            Hidden
-          </Text>
-        </View>
-      </View>
-    </View>
-  </View>
-  <RNCViewPager
-    collapsable={false}
-    layoutDirection="ltr"
-    onMoveShouldSetResponderCapture={[Function]}
-    onPageScroll={[Function]}
-    onPageScrollStateChanged={[Function]}
-    onPageSelected={[Function]}
-    scrollEnabled={false}
-    style={
-      {
-        "flex": 1,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        style={
-          [
-            undefined,
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-          ]
-        }
-      >
-        <Text>
-          Tab1
-        </Text>
-      </View>
-    </View>
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        style={
-          [
-            undefined,
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-          ]
-        }
-      >
-        <Text>
-          Tab2
-        </Text>
-      </View>
-    </View>
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        style={
-          [
-            undefined,
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-          ]
-        }
-      >
-        <Text>
-          Tab3
-        </Text>
-      </View>
-    </View>
-  </RNCViewPager>
-</View>
-`;

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

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-import React from 'react';
-interface TabViewProps {
-    tabItem: {
-        value: string;
-        label: string;
-    }[];
-    children: ReactNode;
-    setTabValue: (value: string) => void;
-}
-export declare const TabView: ({ tabItem, setTabValue, children }: TabViewProps) => React.JSX.Element;
-export {};

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

@@ -1,49 +0,0 @@
-import {FilterTab} from '../../molecules/filter-tab/filter-tab.component';
-import {View} from 'react-native';
-import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view';
-import {ReactNode, useEffect, useRef, useState} from 'react';
-import {Stylesheet} from './tab-view.styles';
-import React from 'react';
-
-interface TabViewProps {
-  tabItem: {
-    value: string;
-    label: string;
-  }[];
-  children: ReactNode;
-  setTabValue: (value: string) => void;
-}
-
-export const TabView = ({tabItem, setTabValue, children}: TabViewProps) => {
-  const styles = Stylesheet();
-  const viewPagerRef = useRef<PagerView>(null);
-  const [activePage, setActivePage] = useState(0);
-
-  useEffect(() => {
-    viewPagerRef.current?.setPage(activePage);
-  }, [activePage, tabItem]);
-
-  const handleActivePage = (event: PagerViewOnPageSelectedEvent) => {
-    const currentIndex = event.nativeEvent.position;
-    setActivePage(currentIndex);
-  };
-
-  return (
-    <View style={styles.rootContainer}>
-      <FilterTab
-        tabItem={tabItem}
-        setFilterValue={setTabValue}
-        setActivePage={setActivePage}
-      />
-      <PagerView
-        ref={viewPagerRef}
-        scrollEnabled={false}
-        style={styles.swipeContainer}
-        collapsable={false}
-        onPageSelected={handleActivePage}
-      >
-        {children}
-      </PagerView>
-    </View>
-  );
-};

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

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

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

@@ -1,37 +0,0 @@
-import {Text, View} from 'react-native';
-import {TabView} from './tab-view.component';
-import {useState} from 'react';
-import React 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

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

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

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

@@ -1,37 +0,0 @@
-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();
-  });
-});