storybook web was fixed

janis-commerce · Oct 23, 2023 · 43a5643 · 43a5643
1 parent e3c0440
commit 43a5643
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 95 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -4,7 +4,13 @@ module.exports = {
 		'@storybook/addon-actions',
 		'@storybook/addon-controls',
 		'@storybook/addon-essentials',
-		'@storybook/addon-react-native-web',
+		{
+			name: '@storybook/addon-react-native-web',
+			options: {
+				modulesToTranspile: ['react-native-reanimated', '@gorhom/bottom-sheet'],
+				babelPlugins: ['react-native-reanimated/plugin'],
+			},
+		},
 	],
 	core: {
 		builder: '@storybook/builder-webpack5',

diff --git a/src/components/SwipeUp/childComponents/index.tsx b/src/components/SwipeUp/childComponents/index.tsx
@@ -1,7 +1,9 @@
-import React, {EffectCallback, DependencyList, JSX} from 'react';
+import React, {EffectCallback, DependencyList, JSX, Ref} from 'react';
 import {
 	BottomSheetFlatList,
+	BottomSheetFlatListMethods,
 	BottomSheetScrollView,
+	BottomSheetScrollViewMethods,
 	BottomSheetScrollableProps,
 	BottomSheetView,
 } from '@gorhom/bottom-sheet';
@@ -15,28 +17,35 @@ type SwipeUpFlatListProps<T> = FlatListProps<T> & BottomSheetScrollableProps;
 type SwipeUpScrollViewProps = ScrollViewProps & BottomSheetScrollableProps;
 type SwipeUpViewProps = ViewProps & BottomSheetFocusProps;
 
-export const SwipeUpFlatList = <T,>({
-	data,
-	renderItem,
-	...props
-}: SwipeUpFlatListProps<T>): JSX.Element | null => {
-	if (!data || !data.length || !renderItem) {
-		return null;
-	}
+export const SwipeUpFlatList = React.forwardRef(
+	<T,>(
+		{data, renderItem, ...props}: SwipeUpFlatListProps<T>,
+		ref: Ref<BottomSheetFlatListMethods>
+	): JSX.Element | null => {
+		if (!data || !data.length || !renderItem) {
+			return null;
+		}
 
-	return <BottomSheetFlatList data={data} renderItem={renderItem} {...props} />;
-};
-
-export const SwipeUpScrollView = ({
-	children,
-	...props
-}: SwipeUpScrollViewProps): JSX.Element | null => {
-	if (!children) {
-		return null;
+		return <BottomSheetFlatList ref={ref} data={data} renderItem={renderItem} {...props} />;
 	}
-
-	return <BottomSheetScrollView {...props}>{children}</BottomSheetScrollView>;
-};
+);
+
+export const SwipeUpScrollView = React.forwardRef(
+	(
+		{children, ...props}: SwipeUpScrollViewProps,
+		ref: Ref<BottomSheetScrollViewMethods>
+	): JSX.Element | null => {
+		if (!children) {
+			return null;
+		}
+
+		return (
+			<BottomSheetScrollView ref={ref} {...props}>
+				{children}
+			</BottomSheetScrollView>
+		);
+	}
+);
 
 export const SwipeUpView = ({children, ...props}: SwipeUpViewProps): JSX.Element | null => {
 	if (!children) {

diff --git a/src/components/SwipeUp/index.tsx b/src/components/SwipeUp/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Ref} from 'react';
 import BottomSheet, {BottomSheetProps} from '@gorhom/bottom-sheet';
 import {ViewStyle} from 'react-native';
 
@@ -8,32 +8,38 @@ export interface SwipeUpProps extends BottomSheetProps {
 	snapPosition?: number;
 }
 
-const SwipeUp = ({
-	children,
-	snapPoints = ['100%'],
-	snapPosition = 0,
-	style,
-	onChangeSnap,
-	backgroundStyle,
-	swipeWrapperStyle,
-	...props
-}: SwipeUpProps) => {
-	if (!children) {
-		return null;
-	}
+const SwipeUp = React.forwardRef(
+	(
+		{
+			children,
+			snapPoints = ['100%'],
+			snapPosition = 0,
+			style,
+			onChangeSnap,
+			backgroundStyle,
+			swipeWrapperStyle,
+			...props
+		}: SwipeUpProps,
+		ref: Ref<BottomSheet>
+	) => {
+		if (!children) {
+			return null;
+		}
 
-	return (
-		<BottomSheet
-			snapPoints={snapPoints}
-			index={snapPosition}
-			onChange={onChangeSnap}
-			style={style}
-			containerStyle={backgroundStyle}
-			backgroundStyle={swipeWrapperStyle}
-			{...props}>
-			{children}
-		</BottomSheet>
-	);
-};
+		return (
+			<BottomSheet
+				ref={ref}
+				snapPoints={snapPoints}
+				index={snapPosition}
+				onChange={onChangeSnap}
+				style={style}
+				containerStyle={backgroundStyle}
+				backgroundStyle={swipeWrapperStyle}
+				{...props}>
+				{children}
+			</BottomSheet>
+		);
+	}
+);
 
 export default SwipeUp;
diff --git a/storybook/stories/SwipeUp/SwipeUp.stories.js b/storybook/stories/SwipeUp/SwipeUp.stories.js
@@ -1,20 +1,20 @@
 import React from 'react';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import {Text, StyleSheet, View} from 'react-native';
+import {StyleSheet} from 'react-native';
 import SwipeUp from '../../../src/components/SwipeUp';
-import RadioButton from '../../../src/components/RadioButton';
 import Svg from '../../../src/components/Svg';
-import {SwipeUpFlatList, SwipeUpView} from '../../../src/components/SwipeUp/childComponents';
+import {SwipeUpView} from '../../../src/components/SwipeUp/childComponents';
 
 export default {
 	title: 'Components/SwipeUp',
 	argTypes: {
 		snapPoints: {
-			options: [
-				['25%', '50%', '100%'],
-				[120, 240, 460],
-			],
-			control: {type: 'select'},
+			options: ['5_50_100_percentage', '120_240_300_px'],
+			mapping: {
+				'5_50_100_percentage': ['5%', '50%', '100%'],
+				'120_240_300_px': [120, 240, 300],
+			},
+			control: {type: 'radio'},
 		},
 		snapPosition: {
 			options: [0, 1, 2],
@@ -36,22 +36,10 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 		alignItems: 'center',
 		backgroundColor: 'rgb(122, 193, 224)',
+		zIndex: 10,
 	},
 });
 
-const dataItem = [
-	1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
-	28, 29, 30,
-];
-
-const renderItem = ({item, index}) => {
-	return (
-		<RadioButton checkSize="md" checkPosition="right" key={index}>
-			<Text>{item}</Text>
-		</RadioButton>
-	);
-};
-
 export const WithSwipeUpViewComponent = (props) => {
 	return (
 		<GestureHandlerRootView style={styles.screenStyle}>
@@ -64,33 +52,9 @@ export const WithSwipeUpViewComponent = (props) => {
 	);
 };
 
-export const WithSwipeUpFlatListComponent = (props) => {
-	return (
-		<GestureHandlerRootView style={styles.screenStyle}>
-			<View>
-				<Text>
-					To render scrollable components, you must use the next additional components as children:
-				</Text>
-				<Text>SwipeUpFlatList</Text>
-				<Text>SwipeUpSCrollView</Text>
-			</View>
-			<SwipeUp swipeWrapperStyle={styles.wrapperStyle} {...props}>
-				<SwipeUpFlatList data={dataItem} renderItem={renderItem} />
-			</SwipeUp>
-		</GestureHandlerRootView>
-	);
-};
-
 WithSwipeUpViewComponent.args = {
 	snapPoints: ['25%', '50%', '100%'],
 	snapPosition: 0,
 };
 
-WithSwipeUpViewComponent.storyName = 'render with static children;';
-
-WithSwipeUpFlatListComponent.args = {
-	snapPoints: ['1%', '50%', '100%'],
-	snapPosition: 1,
-};
-
-WithSwipeUpFlatListComponent.storyName = 'render with scrollable component';
+WithSwipeUpViewComponent.storyName = 'render with children;';