Feature/show2 233 segmented control

apps/expo/package.json

@@ -36,6 +36,7 @@
     "@radix-ui/react-tabs": "^0.1.1",
     "@react-native-async-storage/async-storage": "^1.15.11",
     "@react-native-community/netinfo": "7.1.3",
+    "@react-native-segmented-control/segmented-control": "^2.4.0",
     "@react-navigation/bottom-tabs": "^6.0.9",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.2.5",

apps/storybook-react-native/.storybook/storybook.requires.js

@@ -35,6 +35,7 @@ const getStories = () => {
     require("../../../packages/design-system/tabs/tabs.stories.tsx"),
     require("../../../packages/design-system/text/text.stories.tsx"),
     require("../../../packages/design-system/toast/toast.stories.tsx"),
+    require("../../../packages/design-system/segmented-control/segmented-control.stories.tsx"),
   ];
 };
 

apps/storybook-react-native/package.json

@@ -29,6 +29,7 @@
     "@react-native-async-storage/async-storage": "~1.15.0",
     "@react-native-community/datetimepicker": "4.0.0",
     "@react-native-community/slider": "4.1.12",
+    "@react-native-segmented-control/segmented-control": "^2.4.0",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-controls": "^6.3.12",
     "@storybook/addon-ondevice-actions": "^6.0.1-alpha.6",

packages/design-system/segmented-control/index.tsx

@@ -0,0 +1,40 @@
+import RNSegmentedControl from "@react-native-segmented-control/segmented-control";
+import { useCallback } from "react";
+import {
+  NativeSegmentedControlIOSChangeEvent,
+  NativeSyntheticEvent,
+} from "react-native";
+import { colors } from "design-system/tailwind/colors";
+import { useIsDarkMode } from "design-system/hooks";
+import { tw } from "design-system/tailwind";
+
+type SegmentedControlProps = {
+  values: Array<string>;
+  selectedIndex: number;
+  onChange: (newIndex: number) => void;
+};
+
+export const SegmentedControl = (props: SegmentedControlProps) => {
+  const { values, selectedIndex, onChange } = props;
+  const handleChange = useCallback(
+    (e: NativeSyntheticEvent<NativeSegmentedControlIOSChangeEvent>) => {
+      onChange?.(e.nativeEvent.selectedSegmentIndex);
+    },
+    [onChange]
+  );
+
+  const isDark = useIsDarkMode();
+
+  return (
+    <RNSegmentedControl
+      values={values}
+      selectedIndex={selectedIndex}
+      onChange={handleChange}
+      style={tw.style("rounded-lg")}
+      backgroundColor={isDark ? colors.gray[900] : colors.gray[100]}
+      tintColor={isDark ? colors.white : colors.gray[900]}
+      fontStyle={tw.style("font-bold dark:text-gray-400 text-gray-600")}
+      activeFontStyle={tw.style("font-bold dark:text-gray-900 text-white")}
+    />
+  );
+};

packages/design-system/segmented-control/segmented-control.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta } from "@storybook/react";
+import { SegmentedControl } from "./index";
+import { useState } from "react";
+
+export default {
+  component: SegmentedControl,
+  title: "Components/SegmentedControl",
+} as Meta;
+
+export const Primary: React.VFC<{}> = () => {
+  const [selected, setSelected] = useState(0);
+  return (
+    <SegmentedControl
+      values={["LABEL 1", "LABEL 2", "LABEL 3"]}
+      onChange={setSelected}
+      selectedIndex={selected}
+    />
+  );
+};

patches/@react-native-segmented-control+segmented-control+2.4.0.patch

@@ -0,0 +1,33 @@
+diff --git a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js
+index 85bb622..5eddb89 100644
+--- a/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js
++++ b/node_modules/@react-native-segmented-control/segmented-control/js/SegmentedControlTab.js
+@@ -14,7 +14,7 @@ import {
+   View,
+   useColorScheme,
+ } from 'react-native';
+-
++import { Pressable } from "design-system/pressable-scale"
+ import type {FontStyle, ViewStyle} from './types';
+
+ type Props = $ReadOnly<{|
+@@ -83,8 +83,8 @@ export const SegmentedControlTab = ({
+   };
+
+   return (
+-    <TouchableOpacity
+-      style={[styles.container, tabStyle]}
++    <Pressable
++      containerStyle={[styles.container, tabStyle]}
+       disabled={!enabled}
+       onPress={onSelect}
+       accessibilityState={{selected: selected, disabled: !enabled}}>
+@@ -97,7 +97,7 @@ export const SegmentedControlTab = ({
+           <Text style={[idleStyle, selected && activeStyle]}>{value}</Text>
+         )}
+       </View>
+-    </TouchableOpacity>
++    </Pressable>
+   );
+ };
+

yarn.lock

@@ -3320,6 +3320,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.1.12.tgz#279ff7bbe487af92ad95ec758a029a54569e2a62"
   integrity sha512-CiuLZ2orueBiWHYxfaJF57jQY6HY2Q3z5pdAE4MKH8EqIImr/jgDJrJ/UxOVZHK1Ng9P+XlGIKfVIcuWZ6guuA==
 
+"@react-native-segmented-control/segmented-control@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@react-native-segmented-control/segmented-control/-/segmented-control-2.4.0.tgz#0a88f22ad2c0fe07ecc002ee1e5d62c55a3dd0ae"
+  integrity sha512-2s1AaT6xk/Do5s6u7ioCXucqesAt02NQlLKBOM28dJWI7PTH9o89x6AwsGHIeMkTe4nQ6iENiJKzO7Y3SGG9Ew==
+
 "@react-native/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"